/* ═══════════════════════════════════════════════════════════════════════
   KARİYER TAKİBİ — ana site düzeni
   ───────────────────────────────────────────────────────────────────────
   /ortak/kt-tema.css'ten SONRA yüklenir. Burada yalnızca bu siteye ait
   bölüm ve düzen kuralları bulunur.

   KURAL: sabit hex yazma. Renk gerekiyorsa /ortak/kt-tema.css'e ekle,
   buradan var(--kt-...) ile çağır. Gerekçe: /ortak/TASARIM.md
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════ ÜST BAR ═══════════ */

.site-ustbar { padding: 0; }
.site-ustbar__ic {
  display: flex; align-items: center; gap: var(--kt-b5);
  min-height: 64px;
}
.site-ustbar__ad {
  font-family: var(--kt-font-baslik); font-weight: 800;
  font-size: var(--kt-yazi-l); color: var(--kt-metin); text-decoration: none;
}
.site-ustbar .custom-logo-link { display: block; line-height: 0; }
/* Logo animasyonlu GIF (1200×320, 3.75:1). Eski temada 50px yükseklikteydi;
   yeni üst bar daha alçak olduğu için 38px dengeli duruyor — 142px genişlik. */
.site-ustbar .custom-logo { height: 38px; width: auto; }
@media (max-width: 600px) {
  .site-ustbar .custom-logo { height: 30px; }
}

.site-menu { flex: 1 1 auto; min-width: 0; }
.site-menu__liste {
  display: flex; align-items: center; justify-content: flex-end;
  gap: var(--kt-b1); margin: 0; padding: 0; list-style: none;
}
.site-menu__liste a {
  display: inline-flex; align-items: center;
  padding: var(--kt-b2) var(--kt-b3); border-radius: var(--kt-yari-s);
  font-size: var(--kt-yazi-s); font-weight: 500; white-space: nowrap;
  color: var(--kt-metin-soluk); text-decoration: none;
  transition: background var(--kt-gecis), color var(--kt-gecis);
}
.site-menu__liste a:hover { background: var(--kt-zemin-2); color: var(--kt-metin); }
.site-menu__liste .current-menu-item > a,
.site-menu__liste .current-menu-parent > a { color: var(--kt-vurgu); font-weight: 600; }

/* ── Alt menü (açılır) ── */
.site-menu__liste li { position: relative; }
.site-menu__liste .sub-menu {
  position: absolute; top: 100%; left: 0; z-index: 60;
  min-width: 260px; margin: 0; padding: var(--kt-b2); list-style: none;
  background: var(--kt-kart); border: 1px solid var(--kt-cizgi);
  border-radius: var(--kt-yari); box-shadow: var(--kt-golge-m);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity var(--kt-gecis), transform var(--kt-gecis), visibility var(--kt-gecis);
}
.site-menu__liste li:hover > .sub-menu,
.site-menu__liste li:focus-within > .sub-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.site-menu__liste .sub-menu a { white-space: normal; width: 100%; }

/* ── Mobil menü tuşu — hamburger ── */
.site-menu__tus {
  display: none; flex: 0 0 auto;
  width: 44px; height: 44px; padding: 0;          /* dokunma hedefi */
  background: transparent; border: 1px solid var(--kt-cizgi);
  border-radius: var(--kt-yari-s); cursor: pointer;
  position: relative;
}
.site-menu__cizgi,
.site-menu__cizgi::before,
.site-menu__cizgi::after {
  position: absolute; left: 50%; width: 18px; height: 2px;
  background: var(--kt-metin); border-radius: 2px;
  transition: transform var(--kt-gecis), opacity var(--kt-gecis);
}
.site-menu__cizgi { top: 50%; transform: translate(-50%, -50%); }
.site-menu__cizgi::before,
.site-menu__cizgi::after { content: ""; left: 0; }
.site-menu__cizgi::before { transform: translateY(-6px); }
.site-menu__cizgi::after  { transform: translateY(6px); }

.site-menu__tus[aria-expanded="true"] .site-menu__cizgi { background: transparent; }
.site-menu__tus[aria-expanded="true"] .site-menu__cizgi::before { transform: rotate(45deg); }
.site-menu__tus[aria-expanded="true"] .site-menu__cizgi::after  { transform: rotate(-45deg); }

.site-menu-mobil {
  border-top: 1px solid var(--kt-cizgi);
  background: var(--kt-kart); padding: var(--kt-b3) 0 var(--kt-b5);
  max-height: 70vh; overflow-y: auto;
}
.site-menu-mobil ul { margin: 0; padding: 0; list-style: none; }
.site-menu-mobil a {
  display: block; padding: var(--kt-b3) 0;
  font-size: var(--kt-yazi-m); font-weight: 500;
  color: var(--kt-metin); text-decoration: none;
  border-bottom: 1px solid var(--kt-cizgi);
}
.site-menu-mobil .sub-menu a {
  padding-left: var(--kt-b4); font-size: var(--kt-yazi-s);
  color: var(--kt-metin-soluk); font-weight: 400;
}

/* Alt menüsü olan başlıklar: başlık + açma tuşu aynı satırda.
   Tuş 44px dokunma hedefi. */
.site-menu-mobil li.menu-item-has-children { position: relative; }
.site-menu-mobil li.menu-item-has-children > a { padding-right: 52px; }
.site-menu-mobil__ac {
  position: absolute; top: 0; right: 0;
  width: 44px; height: 52px; padding: 0;
  background: transparent; border: 0; cursor: pointer;
  color: var(--kt-metin-soluk); font-size: 14px; line-height: 1;
  transition: transform var(--kt-gecis), color var(--kt-gecis);
}
.site-menu-mobil__ac:hover { color: var(--kt-metin); }
.site-menu-mobil li.acik > .site-menu-mobil__ac { transform: rotate(180deg); }
.site-menu-mobil li.acik > a { color: var(--kt-vurgu); }
.site-menu-mobil .sub-menu { border-left: 2px solid var(--kt-vurgu-acik); }

@media (max-width: 980px) {
  .site-menu { display: none; }
  .site-menu__tus { display: block; margin-left: auto; }
}
@media (min-width: 981px) {
  .site-menu-mobil { display: none !important; }
}


/* ═══════════ DUYURU ŞERİDİ ═══════════
   Eski kayan banner'ın yerine geçer: tek mesaj, sezona göre otomatik.
   JS açana kadar `hidden` durur — kapatılmışsa hiç görünmez, yanıp
   sönme (flash) olmaz. */

.duyuru {
  background: var(--kt-antrasit); color: var(--kt-zemin);
  font-size: var(--kt-yazi-s);
}
.duyuru__ic {
  display: flex; align-items: center; gap: var(--kt-b3);
  min-height: 44px; padding-block: var(--kt-b2);
}
.duyuru__nokta {
  flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%;
  background: var(--kt-vurgu);
  box-shadow: 0 0 0 0 var(--kt-vurgu);
  animation: kt-nabiz 2.4s ease-out infinite;
}
@keyframes kt-nabiz {
  0%   { box-shadow: 0 0 0 0 rgba(111,174,149,.7); }
  70%  { box-shadow: 0 0 0 8px rgba(111,174,149,0); }
  100% { box-shadow: 0 0 0 0 rgba(111,174,149,0); }
}
.duyuru__metin { flex: 1 1 auto; }
.duyuru__kapat {
  flex: 0 0 auto; width: 32px; height: 32px; padding: 0;
  background: transparent; border: 0; cursor: pointer;
  color: var(--kt-cizgi-koyu); font-size: 20px; line-height: 1;
  border-radius: var(--kt-yari-s);
}
.duyuru__kapat:hover { color: #fff; background: rgba(255,255,255,.1); }
.duyuru :focus-visible { outline-color: #fff; }


/* ═══════════ HERO ═══════════ */

/* Zemin: aksan tonu + ince ızgara dokusu. Önceki hâli neredeyse
   görünmez bir gradyandı; sayfa baştan sona renksiz duruyordu. */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(130% 110% at 15% 0%, var(--kt-vurgu-acik) 0%, transparent 62%),
    var(--kt-zemin);
  border-bottom: 1px solid var(--kt-cizgi);
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--kt-cizgi) 1px, transparent 1px),
    linear-gradient(to bottom, var(--kt-cizgi) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(120% 90% at 20% 10%, #000 0%, transparent 70%);
          mask-image: radial-gradient(120% 90% at 20% 10%, #000 0%, transparent 70%);
  opacity: .5;
}

/* İki sütun: solda metin+araç, sağda veriden çizilen grafik.
   Tek sütunken geniş ekranda sağ yarı bomboş kalıyordu. */
.hero__izgara {
  position: relative; z-index: 1;
  display: grid; align-items: center;
  gap: clamp(var(--kt-b5), 4vw, var(--kt-b7));
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  padding-block: clamp(var(--kt-b6), 6vw, var(--kt-b8));
}
.hero__ic {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--kt-b4); min-width: 0;
}

/* ── Hero grafiği ── */
.hero-grafik {
  margin: 0; padding: var(--kt-b4);
  background: var(--kt-kart); border: 1px solid var(--kt-cizgi);
  border-radius: var(--kt-yari); box-shadow: var(--kt-golge-m);
}
.hero-grafik__baslik {
  display: flex; flex-direction: column; gap: 2px;
  font-size: var(--kt-yazi-s); font-weight: 600; color: var(--kt-metin);
  margin-bottom: var(--kt-b3);
}
.hero-grafik__not {
  font-size: var(--kt-yazi-xs); font-weight: 400; color: var(--kt-metin-soluk);
}
.hero-grafik__cizim { display: block; width: 100%; height: 170px; }
.hero-grafik__eksen {
  display: flex; justify-content: space-between;
  margin-top: var(--kt-b2);
  font-size: var(--kt-yazi-xs); color: var(--kt-metin-soluk);
  font-variant-numeric: tabular-nums;
}
.hero-grafik__alan { fill: var(--kt-vurgu); opacity: .16; }
.hero-grafik__cizgi {
  fill: none; stroke: var(--kt-vurgu); stroke-width: 2;
  stroke-linejoin: round; stroke-linecap: round;
}
.hero-grafik__isaret { stroke: var(--kt-metin); stroke-width: 1; stroke-dasharray: 3 3; }
.hero-grafik__nokta  { fill: var(--kt-vurgu); stroke: var(--kt-kart); stroke-width: 2.5; }

@media (max-width: 980px) {
  .hero__izgara { grid-template-columns: 1fr; }
  .hero-grafik  { order: 2; }
}
@media (max-width: 600px) {
  /* Darda grafiği gizle: küçük ekranda okunmuyor, yalnız yer kaplıyor */
  .hero-grafik { display: none; }
}
/* .kt öneki gerekli: ortak sistemdeki `.kt h1/h2/h3` kuralları (0,1,1)
   özgüllüğünde. Önek olmadan buradaki (0,1,0) kurallar ezilir ve
   başlıklar yanlış boyda çıkar. */
.kt .hero__baslik { font-size: var(--kt-yazi-3xl); }
.hero__ozet {
  font-size: var(--kt-yazi-l); color: var(--kt-metin-soluk);
  max-width: 38ch;                                /* okunabilir satır boyu */
}
.hero__eylemler { display: flex; flex-wrap: wrap; gap: var(--kt-b3); }

.hero__olcu {
  display: flex; flex-wrap: wrap; gap: var(--kt-b5);
  margin: var(--kt-b3) 0 0; padding: 0; list-style: none;
  font-size: var(--kt-yazi-s); color: var(--kt-metin-soluk);
}
.hero__olcu strong {
  display: block; font-family: var(--kt-font-baslik);
  font-size: var(--kt-yazi-xl); color: var(--kt-metin); line-height: 1.1;
  font-variant-numeric: tabular-nums;   /* sayarken genişlik oynamasın */
}

/* ── Dönen kelime ──
   Başlığın yalnız ilk parçası değişir. `min-width` yok: kelime
   değişirken satır kayabilir diye ikinci satır zaten sabit. */
.hero__donen {
  color: var(--kt-vurgu);
  display: inline-block;
  transition: opacity 260ms ease, transform 260ms ease;
}
.hero__donen.degisiyor { opacity: 0; transform: translateY(-6px); }

/* ── Sıralama aracı ── */
.hero-arac {
  width: 100%; max-width: 30rem;
  margin-top: var(--kt-b2);
  padding: var(--kt-b4);
  background: var(--kt-kart);
  border: 1px solid var(--kt-cizgi);
  border-radius: var(--kt-yari);
  box-shadow: var(--kt-golge-s);
}
.hero-arac__etiket {
  display: block; font-size: var(--kt-yazi-s); font-weight: 500;
  margin-bottom: var(--kt-b3);
}
.hero-arac__satir { display: flex; gap: var(--kt-b2); }
.hero-arac__alan { flex: 1 1 auto; font-variant-numeric: tabular-nums; }
.hero-arac__sonuc {
  margin-top: var(--kt-b3); font-size: var(--kt-yazi-s);
  color: var(--kt-metin-soluk); min-height: 1.4em;
}
.hero-arac__sonuc strong { color: var(--kt-metin); font-variant-numeric: tabular-nums; }
.hero-arac__sonuc a { color: var(--kt-vurgu); font-weight: 600; }


/* ═══════════ BÖLÜM ═══════════ */

.kt-bolum--zemin { background: var(--kt-zemin-2); }
.kt-bolum--dar   { max-width: 44rem; margin-inline: auto; }
.bolum__daha     { margin-top: var(--kt-b5); }


/* ═══════════ ÜRÜN KARTI ═══════════ */

.urun-kart {
  position: relative;
  display: flex; flex-direction: column; gap: var(--kt-b3);
  text-decoration: none; color: inherit;
  /* Kart kendi ürün aksanını taşır (data-kt-urun); üzerine gelince
     kenarlık o ürünün rengine döner — vitrinde ürünler ayırt edilir. */
}
/* Ek boşluk YALNIZCA gündem rozeti olan kartta: hepsine verilince
   rozetsiz kartların üstü boş kalıyordu. */
.urun-kart--gundemli { padding-top: var(--kt-b7); }
/* Rozetler tek satırda kalsın: gündem rozeti iki satıra düşünce dört
   kartın başlığı farklı yükseklikten başlıyordu. */
.urun-kart__ust { display: flex; flex-wrap: nowrap; gap: var(--kt-b2); min-height: 26px; }
.urun-kart__ust .kt-rozet { white-space: nowrap; }
/* Ürün adı kendi aksan renginde — vitrinde beş ürün tek bakışta ayrışır.
   Renk karttaki data-kt-urun'dan gelir, burada sabit değer yok.
   .kt öneki şart: kart ana sayfada h3, 404'te h2 ve `.kt h2` (0,1,1)
   öneksiz kuralı ezip başlığı iki kat büyütüyordu. */
.kt .urun-kart__ad { font-size: var(--kt-yazi-xl); color: var(--kt-vurgu); }
.urun-kart__ozet {
  color: var(--kt-metin-soluk); font-size: var(--kt-yazi-s);
  flex: 1 1 auto;
}
.urun-kart__eylem {
  font-weight: 600; font-size: var(--kt-yazi-s); color: var(--kt-vurgu);
}
.urun-kart:hover .urun-kart__eylem { text-decoration: underline; }

/* ── "Şu an gündemde" rozeti ──
   Akıştan çıkarıldı: kart içinde dururken rozet satırını ikiye bölüp
   dört kartın hizasını bozuyordu. */
.urun-kart__gundem {
  position: absolute; top: var(--kt-b3); right: var(--kt-b3);
  background: var(--kt-vurgu); color: #fff;
  white-space: nowrap;
}
/* Başlık alanı sabit: "Lise Tercih Robotu" iki satıra kırılınca
   diğer kartların özet metni yukarı kayıyordu. */
.kt .urun-kart__ad { min-height: 2.5em; display: flex; align-items: flex-start; }
.urun-kart__nokta {
  width: 6px; height: 6px; border-radius: 50%; background: currentColor;
  animation: kt-sonuk 2s ease-in-out infinite;
}
@keyframes kt-sonuk { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }

/* ── Kart görsel imzaları ──
   Saf CSS/SVG, ek istek yok. Karta gelince canlanır. */
.urun-onizleme {
  display: flex; align-items: flex-end; gap: 4px;
  height: 34px; margin-top: auto; padding-top: var(--kt-b2);
  opacity: .5; transition: opacity var(--kt-gecis);
}
.urun-kart:hover .urun-onizleme { opacity: 1; }

/* Tercih Robotu / Lise: sıralama çubukları */
.urun-onizleme__cubuk {
  flex: 0 0 auto; height: 6px; width: var(--w, 50%);
  max-width: 100%; border-radius: 3px; background: var(--kt-vurgu);
  transform-origin: left center; transform: scaleX(.85);
  transition: transform 420ms cubic-bezier(.2,.8,.2,1);
}
.urun-onizleme { flex-direction: column; align-items: stretch; justify-content: flex-end; }
.urun-kart:hover .urun-onizleme__cubuk { transform: scaleX(1); }
.urun-kart:hover .urun-onizleme__cubuk:nth-child(2) { transition-delay: 60ms; }
.urun-kart:hover .urun-onizleme__cubuk:nth-child(3) { transition-delay: 120ms; }

/* Koçum Benim: gelişim eğrisi */
.urun-onizleme--kocluk svg { width: 100%; height: 30px; overflow: visible; }
.urun-onizleme--kocluk polyline {
  fill: none; stroke: var(--kt-vurgu); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  /* Duruşta yarısı çizili dursun — tamamen gizlenirse kart boş görünüyor,
     diğer kartlarda çubuk/pin varken bu boşluk göze batıyordu. */
  stroke-dasharray: 200; stroke-dashoffset: 96;
  transition: stroke-dashoffset 900ms ease;
}
.urun-kart:hover .urun-onizleme--kocluk polyline { stroke-dashoffset: 0; }

/* KütüphaneBul: harita pini */
.urun-onizleme--kutuphane { position: relative; flex-direction: row; align-items: center; }
.urun-onizleme__pin {
  position: relative; z-index: 1;
  width: 12px; height: 12px; border-radius: 50% 50% 50% 0;
  background: var(--kt-vurgu); transform: rotate(-45deg);
}
.urun-onizleme__dalga {
  position: absolute; left: 0; top: 50%; width: 12px; height: 12px;
  margin-top: -6px; border-radius: 50%;
  border: 2px solid var(--kt-vurgu); opacity: 0;
}
.urun-kart:hover .urun-onizleme__dalga { animation: kt-dalga 1.6s ease-out infinite; }
@keyframes kt-dalga {
  0%   { transform: scale(1);   opacity: .6 }
  100% { transform: scale(3.2); opacity: 0 }
}

/* ── Kaydırmayla belirme ──
   JS `gorundu` sınıfını ekler. prefers-reduced-motion ortak sistemde
   zaten tüm geçişleri kapatıyor. */
.kt-belir {
  opacity: 0; transform: translateY(14px);
  transition: opacity 520ms ease, transform 520ms cubic-bezier(.2,.8,.2,1);
}
.kt-belir.gorundu { opacity: 1; transform: none; }


/* ═══════════ BÖLÜM BAŞLIK HİYERARŞİSİ ═══════════
   Dört bölüm başlığı da aynı boyuttaydı; göz nerede duracağını
   bilmiyordu. Ürünler ana bölüm kalır, diğerleri bir kademe iner. */
.kt .kt-bolum__baslik--orta { font-size: var(--kt-yazi-xl); }
.kt-bolum__ust { gap: var(--kt-b1); }
.kt-bolum__ust .kt-bolum__aciklama { margin-top: var(--kt-b2); }


/* ═══════════ KİMLER KULLANIYOR (koyu bölüm) ═══════════ */

.kimler {
  background: var(--kt-antrasit); color: var(--kt-zemin);
}
.kimler .kt-bolum__etiket { color: var(--kt-vurgu); }
.kimler h2 { color: #fff; }
.kimler :focus-visible { outline-color: #fff; }

.kimler-kart {
  display: flex; flex-direction: column; gap: var(--kt-b2);
  padding: var(--kt-b5);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--kt-yari);
  text-decoration: none; color: inherit;
  transition: background var(--kt-gecis), border-color var(--kt-gecis), transform var(--kt-gecis);
}
.kimler-kart:hover {
  background: rgba(255,255,255,.08);
  border-color: var(--kt-vurgu);
  transform: translateY(-2px);
}
.kimler-kart__no {
  font-family: var(--kt-font-baslik); font-size: var(--kt-yazi-2xl);
  font-weight: 800; line-height: 1; color: var(--kt-vurgu); opacity: .55;
}
.kt .kimler-kart__ad { font-size: var(--kt-yazi-l); color: #fff; }
.kimler-kart__metin {
  font-size: var(--kt-yazi-s); color: var(--kt-cizgi-koyu); flex: 1 1 auto;
}
.kimler-kart__eylem {
  margin-top: var(--kt-b2);
  font-size: var(--kt-yazi-s); font-weight: 600; color: var(--kt-vurgu);
}
.kimler-kart:hover .kimler-kart__eylem { text-decoration: underline; }


/* ═══════════ ARAÇ KARTI ═══════════ */

/* İki küme: "kendini tanı" ile "puan hesapla" aynı ızgarada karışıyordu */
.arac-kume + .arac-kume { margin-top: var(--kt-b6); }
.arac-kume__ust {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--kt-b3);
  margin-bottom: var(--kt-b4);
  padding-bottom: var(--kt-b2); border-bottom: 1px solid var(--kt-cizgi);
}
.kt .arac-kume__ad { font-size: var(--kt-yazi-l); }
.arac-kume__aciklama { font-size: var(--kt-yazi-s); color: var(--kt-metin-soluk); }

.arac-izgara { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.arac-kart {
  display: flex; align-items: center; gap: var(--kt-b3);
  padding: var(--kt-b4);
  text-decoration: none; color: inherit;
}
.arac-kart__ad { font-weight: 500; font-size: var(--kt-yazi-s); flex: 1 1 auto; }
.arac-kart__ok { color: var(--kt-vurgu); flex: 0 0 auto; }

/* Görsel imza — iki kümeyi bir bakışta ayırır */
.arac-kart__im {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: var(--kt-yari-s);
  background: var(--kt-vurgu-acik); position: relative;
}
.arac-kart__im::before {
  content: ""; position: absolute; inset: 0; margin: auto;
  background: var(--kt-vurgu);
}
/* Envanter: içi dolu daire (kişilik/eğilim) */
.arac-kart--envanter .arac-kart__im::before {
  width: 12px; height: 12px; border-radius: 50%;
}
/* Hesaplama: eşittir işareti (sayısal) */
.arac-kart--hesap .arac-kart__im::before {
  width: 14px; height: 3px; border-radius: 2px;
  box-shadow: 0 5px 0 var(--kt-vurgu);
  margin-top: 10px;
}


/* ═══════════ YAZI KARTI ═══════════ */

.yazi-kart {
  display: flex; flex-direction: column; gap: 0;
  padding: 0; overflow: hidden;
}
/* 1 büyük + 2 küçük — üç eşit kart yerine göze giriş noktası */
.yazi-izgara {
  display: grid; gap: var(--kt-b4);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
@media (min-width: 900px) {
  .yazi-izgara { grid-template-columns: 1.4fr 1fr; grid-template-rows: auto auto; }
  .yazi-kart--one { grid-row: span 2; }
  .yazi-kart--one .yazi-kart__gorsel { aspect-ratio: 16 / 10; }
  .kt .yazi-kart--one .yazi-kart__baslik { font-size: var(--kt-yazi-xl); }
  .yazi-kart--one .yazi-kart__ozet { font-size: var(--kt-yazi-m); }
}

.yazi-kart__gorsel {
  position: relative;
  display: block; aspect-ratio: 16 / 9; background: var(--kt-zemin-2);
  overflow: hidden; text-decoration: none;   /* yer tutucu harfin altı çizilmesin */
}
/* Marka tonu: kapak görselleri paletin dışında (parlak mavi, kahve, gri).
   Hafif örtü hepsini aynı aileye çeker, üzerine gelince açılır. */
.yazi-kart__ton {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 40%, var(--kt-vurgu) 100%);
  opacity: .14; transition: opacity var(--kt-gecis);
}
.yazi-kart:hover .yazi-kart__ton { opacity: .05; }
.yazi-kart__gorsel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kt-kart-gorsel__yok {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  font-family: var(--kt-font-baslik); font-size: var(--kt-yazi-3xl);
  font-weight: 800; color: var(--kt-vurgu); background: var(--kt-vurgu-acik);
}
.yazi-kart__govde {
  display: flex; flex-direction: column; gap: var(--kt-b2);
  padding: var(--kt-b4); flex: 1 1 auto;
}
.kt .yazi-kart__baslik { font-size: var(--kt-yazi-l); }
.yazi-kart__baslik a { color: inherit; text-decoration: none; }
.yazi-kart__baslik a:hover { color: var(--kt-vurgu); }
.yazi-kart__ozet {
  font-size: var(--kt-yazi-s); color: var(--kt-metin-soluk); flex: 1 1 auto;
}
.yazi-kart__ust-veri {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--kt-b2);
  font-size: var(--kt-yazi-xs);
}


/* ═══════════ YAZI / SAYFA GÖVDESİ ═══════════ */

.yazi__ust, .sayfa__ust { padding-top: var(--kt-b7); }
.kt .yazi__baslik { font-size: var(--kt-yazi-2xl); margin-block: var(--kt-b3); }
.yazi__ust-veri {
  display: flex; flex-wrap: wrap; gap: var(--kt-b2);
  font-size: var(--kt-yazi-s);
}
.yazi__gorsel { margin: var(--kt-b5) auto; }
.yazi__gorsel img { width: 100%; height: auto; border-radius: var(--kt-yari); display: block; }

.yazi__uyari {
  margin-top: var(--kt-b4); padding: var(--kt-b3) var(--kt-b4);
  background: var(--kt-uyari-zemin); color: var(--kt-metin);
  border-left: 3px solid var(--kt-uyari); border-radius: var(--kt-yari-s);
  font-size: var(--kt-yazi-s);
}

/* Gövde metni — WordPress editöründen gelen serbest içerik.
   .kt öneki ŞART: ortak sistemdeki `.kt p { margin: 0 }` (0,1,1)
   öneksiz `> * + *` kuralını (0,1,0) eziyor ve paragraflar arası boşluk
   sıfırlanıyordu — tablo ve başlıklar etkilenmediği için gözden kaçmıştı. */
.yazi-govde { padding-block: var(--kt-b5); }
.kt .yazi-govde > * + * { margin-top: var(--kt-b4); }
.kt .yazi-govde p { line-height: var(--kt-satir-normal); }
.kt .yazi-govde h2 { font-size: var(--kt-yazi-xl); margin-top: var(--kt-b6); }
.kt .yazi-govde h3 { font-size: var(--kt-yazi-l);  margin-top: var(--kt-b5); }
.yazi-govde ul, .yazi-govde ol { padding-left: var(--kt-b5); }
.yazi-govde li + li { margin-top: var(--kt-b2); }
.yazi-govde img { max-width: 100%; height: auto; border-radius: var(--kt-yari-s); }
.yazi-govde a { color: var(--kt-vurgu); }
.yazi-govde blockquote {
  margin-inline: 0; padding-left: var(--kt-b4);
  border-left: 3px solid var(--kt-vurgu); color: var(--kt-metin-soluk);
}
.yazi-govde table { width: 100%; border-collapse: collapse; font-size: var(--kt-yazi-s); }
.yazi-govde th, .yazi-govde td {
  padding: var(--kt-b2) var(--kt-b3); text-align: left;
  border-bottom: 1px solid var(--kt-cizgi);
}
/* Geniş tablolar sayfayı yatay kaydırmasın; kendi içinde kaysın */
.yazi-govde .wp-block-table,
.yazi-govde .tablo-sar { overflow-x: auto; }

/* Veri tabloları: sayı sütunları sağa yaslanır ki basamaklar hizalansın.
   Sınıf, markdown'daki `|---:|` hizalamasından üretilir (icerik/_kur/md2wp.py). */
.yazi-govde th.sag,  .yazi-govde td.sag  { text-align: right; font-variant-numeric: tabular-nums; }
.yazi-govde th.orta, .yazi-govde td.orta { text-align: center; }
.yazi-govde thead th { border-bottom-width: 2px; font-weight: 600; }
/* Türkiye ortalaması gibi ayraç satırlar tabloda kalın yazılıyor;
   satırın tamamı kalınsa zemini de değişsin. */
.yazi-govde tbody tr:hover { background: var(--kt-zemin-2); }

/* Yazı içi bilgi kutusu — "Bu veriyi nasıl okumalı" blokları.
   Bilgi rengi kullanılır: sarı uyarı zemini eskimiş içeriğe ayrılmıştır
   (.yazi__uyari), ikisi aynı sayfada karışmasın. */
.yazi-govde blockquote.kt-not {
  padding: var(--kt-b3) var(--kt-b4);
  background: var(--kt-bilgi-zemin);
  border-left: 3px solid var(--kt-bilgi);
  border-radius: var(--kt-yari-s);
  color: var(--kt-metin);
  font-size: var(--kt-yazi-s);
}
.kt .yazi-govde blockquote.kt-not > p + p { margin-top: var(--kt-b2); }

/* ═══════════ ARŞİV ═══════════ */

.yazi__uyari--arsiv { border-left-color: var(--kt-metin-soluk); }

.arsiv__ozet { margin-top: var(--kt-b4); font-size: var(--kt-yazi-s); }

.arsiv__yillar { display: flex; flex-wrap: wrap; gap: var(--kt-b2); margin-top: var(--kt-b3); }
.arsiv__yil-bag {
  display: inline-flex; align-items: baseline; gap: var(--kt-b1);
  padding: var(--kt-b1) var(--kt-b3);
  border: 1px solid var(--kt-cizgi); border-radius: var(--kt-yari-s);
  font-size: var(--kt-yazi-s); text-decoration: none;
}
.arsiv__yil-bag:hover { border-color: var(--kt-vurgu); }

.arsiv__yil { padding-block: var(--kt-b5); }
.arsiv__yil-baslik { font-size: var(--kt-yazi-l); margin-bottom: var(--kt-b3); }
.arsiv__liste { list-style: none; padding: 0; margin: 0; }
.arsiv__oge {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: var(--kt-b2);
  padding-block: var(--kt-b2);
  border-bottom: 1px solid var(--kt-cizgi);
}
.arsiv__bag { text-decoration: none; flex: 1 1 20rem; }
.arsiv__bag:hover { text-decoration: underline; }
.arsiv__veri { display: flex; gap: var(--kt-b1); font-size: var(--kt-yazi-s); white-space: nowrap; }

.yazi-govde iframe,
.yazi-govde .wp-video,
.yazi-govde embed { max-width: 100%; }

.yazi__alt { padding-bottom: var(--kt-b7); }
.yazi__etiketler { display: flex; flex-wrap: wrap; gap: var(--kt-b2); margin-bottom: var(--kt-b5); }
.yazi__etiketler a {
  display: inline-block; padding: var(--kt-b1) var(--kt-b3);
  border-radius: var(--kt-yari-hap); background: var(--kt-zemin-2);
  font-size: var(--kt-yazi-xs); color: var(--kt-metin-soluk); text-decoration: none;
}

.yazi__gezinme {
  display: grid; gap: var(--kt-b3);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  border-top: 1px solid var(--kt-cizgi); padding-top: var(--kt-b5);
}
.yazi__gezinme-bag {
  display: flex; flex-direction: column; gap: var(--kt-b1);
  padding: var(--kt-b3); border-radius: var(--kt-yari);
  text-decoration: none; color: inherit; font-size: var(--kt-yazi-s);
  transition: background var(--kt-gecis);
}
.yazi__gezinme-bag:hover { background: var(--kt-zemin-2); }
.yazi__gezinme-bag--sag { text-align: right; }


/* ═══════════ ARAMA ═══════════ */

.arama { display: flex; gap: var(--kt-b2); margin-top: var(--kt-b4); }
.arama__alan { flex: 1 1 auto; }


/* ═══════════ SAYFALAMA ═══════════ */

.navigation.pagination { padding-block: var(--kt-b6); }
.nav-links { display: flex; flex-wrap: wrap; gap: var(--kt-b2); justify-content: center; }
.nav-links .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 var(--kt-b3);
  border: 1px solid var(--kt-cizgi); border-radius: var(--kt-yari-s);
  background: var(--kt-kart); color: var(--kt-metin);
  text-decoration: none; font-size: var(--kt-yazi-s); font-weight: 500;
}
.nav-links .page-numbers:hover { border-color: var(--kt-vurgu); color: var(--kt-vurgu); }
.nav-links .page-numbers.current {
  background: var(--kt-vurgu); border-color: var(--kt-vurgu); color: #fff;
}


/* ═══════════ ALT (FOOTER) ═══════════ */

.site-alt {
  margin-top: var(--kt-b8);
  background: var(--kt-antrasit); color: var(--kt-zemin);
  padding-block: var(--kt-b7) var(--kt-b5);
}
.site-alt__ust {
  display: grid; gap: var(--kt-b6);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.site-alt__marka .custom-logo { height: 28px; width: auto; filter: brightness(0) invert(1); }
.site-alt .kt-soluk { color: var(--kt-cizgi-koyu); }
.kt .site-alt__baslik {
  font-size: var(--kt-yazi-xs); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--kt-cizgi-koyu);
  margin-bottom: var(--kt-b3);
}
.site-alt__liste { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--kt-b2); }
.site-alt__liste a {
  color: var(--kt-zemin); text-decoration: none; font-size: var(--kt-yazi-s);
}
.site-alt__liste a:hover { text-decoration: underline; }

.site-alt__son {
  display: flex; flex-wrap: wrap; gap: var(--kt-b3);
  align-items: center; justify-content: space-between;
  margin-top: var(--kt-b6); padding-top: var(--kt-b4);
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: var(--kt-yazi-xs);
}
.site-alt__yasal { display: flex; flex-wrap: wrap; gap: var(--kt-b4); margin: 0; padding: 0; list-style: none; }
.site-alt__yasal a { color: var(--kt-cizgi-koyu); text-decoration: none; }
.site-alt__yasal a:hover { color: #fff; text-decoration: underline; }

/* Koyu zeminde odak halkası yeşilde kaybolmasın */
.site-alt :focus-visible { outline-color: #fff; }


/* ═══════════ ÜRÜN EKRANLARI (kayan galeri) ═══════════
   Gerçek ekran görüntüleri, yatay scroll-snap ray.

   Bilinçli tercih: OTOMATİK DÖNMÜYOR. Eski slider kendi kendine
   dönüyordu; ölçümde neredeyse hiç tıklanmıyordu ve klavye/ekran
   okuyucu için engeldi. Burada hareketi kullanıcı başlatır.

   Özgüllük notu: h3/p/a hedefleyen kuralların hepsi `.kt` önekli —
   ortak sistemdeki `.kt h3` (0,1,1) sınıf-only kuralı (0,1,0) ezer.
   Bu tuzağa altı kez düştük; bkz. ortak/TASARIM.md. */

.ekranlar__cipler {
  display: flex; flex-wrap: wrap; gap: var(--kt-b2);
  margin-bottom: var(--kt-b5);
}
.ekranlar__cip {
  --kt-vurgu: var(--kt-yesil);
  font: 600 var(--kt-yazi-s)/1 var(--kt-font-govde);
  padding: .55rem var(--kt-b4); border-radius: var(--kt-yari-hap);
  border: 1px solid var(--kt-cizgi-koyu); background: var(--kt-kart);
  color: var(--kt-metin-soluk); cursor: pointer;
  transition: background var(--kt-gecis), color var(--kt-gecis),
              border-color var(--kt-gecis);
}
.ekranlar__cip:hover { border-color: var(--kt-vurgu); color: var(--kt-metin); }
.ekranlar__cip[aria-current="true"] {
  background: var(--kt-vurgu); border-color: var(--kt-vurgu);
  color: #fff;
}

/* ── Ray ── */
.ekranlar__sarma { position: relative; }

.ekranlar__ray {
  display: flex; gap: var(--kt-b5);
  margin: 0; padding: var(--kt-b1) 0 var(--kt-b5);
  list-style: none;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 0;
  /* Kaydırma çubuğu ince ama görünür kalsın — burada kaydırılabildiğinin
     tek kalıcı ipucu o. */
  scrollbar-width: thin;
  scrollbar-color: var(--kt-cizgi-koyu) transparent;
}
.ekranlar__ray::-webkit-scrollbar { height: 6px; }
.ekranlar__ray::-webkit-scrollbar-thumb {
  background: var(--kt-cizgi-koyu); border-radius: var(--kt-yari-hap);
}
.ekranlar__ray:focus-visible { outline: 2px solid var(--kt-vurgu); outline-offset: 4px; }

.ekran {
  flex: 0 0 min(86vw, 44rem);
  scroll-snap-align: start;
}

.ekran__cerceve {
  margin: 0; height: 100%;
  display: flex; flex-direction: column;
  background: var(--kt-kart);
  border: 1px solid var(--kt-cizgi);
  border-radius: var(--kt-yari);
  box-shadow: var(--kt-golge-m);
  overflow: hidden;
}

/* Tarayıcı çubuğu — bunun bir ekran görüntüsü olduğunu söyler */
.ekran__cubuk {
  display: flex; align-items: center; gap: var(--kt-b2);
  padding: var(--kt-b2) var(--kt-b3);
  background: var(--kt-zemin-2);
  border-bottom: 1px solid var(--kt-cizgi);
}
.ekran__nokta {
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--kt-cizgi-koyu); flex: none;
}
.ekran__adres {
  margin-left: var(--kt-b2); padding: .15rem var(--kt-b3);
  flex: 1 1 auto; min-width: 0;
  background: var(--kt-kart); border-radius: var(--kt-yari-hap);
  font-size: var(--kt-yazi-xs); color: var(--kt-metin-soluk);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.ekran__resim {
  display: block; width: 100%; height: auto;
  aspect-ratio: 720 / 342;
  background: var(--kt-zemin-2);
  border-bottom: 1px solid var(--kt-cizgi);
}

.ekran__yazi {
  padding: var(--kt-b5);
  display: flex; flex-direction: column; gap: var(--kt-b2);
  flex: 1 1 auto;
}
.ekran__urun {
  font-size: var(--kt-yazi-xs); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--kt-vurgu);
}
.kt .ekran__baslik {
  margin: 0; font-size: var(--kt-yazi-l); line-height: 1.3;
}
.kt .ekran__ozet {
  margin: 0; font-size: var(--kt-yazi-s); line-height: 1.6;
  color: var(--kt-metin-soluk);
}
.kt .ekran__eylem {
  margin-top: auto; padding-top: var(--kt-b3);
  align-self: flex-start;
  font-size: var(--kt-yazi-s); font-weight: 600;
  color: var(--kt-vurgu); text-decoration: none;
}
.kt .ekran__eylem:hover { text-decoration: underline; text-underline-offset: .2em; }
.ekran__eylem span { display: inline-block; transition: transform var(--kt-gecis); }
.kt .ekran__eylem:hover span { transform: translateX(3px); }

/* ── Oklar — yalnız işaretçi cihazlarda ── */
.ekranlar__ok {
  position: absolute; top: 38%; z-index: 2;
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  display: none; place-items: center;
  background: var(--kt-kart); color: var(--kt-metin);
  border: 1px solid var(--kt-cizgi-koyu);
  box-shadow: var(--kt-golge-m); cursor: pointer;
  transition: background var(--kt-gecis), transform var(--kt-gecis);
}
.ekranlar__ok svg {
  width: 1.25rem; height: 1.25rem; fill: none;
  stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
}
.ekranlar__ok:hover { background: var(--kt-zemin-2); }
.ekranlar__ok:active { transform: scale(.94); }
.ekranlar__ok--geri  { left: calc(var(--kt-b6) * -1); }
.ekranlar__ok--ileri { right: calc(var(--kt-b6) * -1); }

@media (hover: hover) and (min-width: 1180px) {
  .ekranlar__ok:not([hidden]) { display: grid; }
}

.ekranlar__sayac {
  margin: 0; text-align: center;
  font-size: var(--kt-yazi-s); color: var(--kt-metin-soluk);
  font-variant-numeric: tabular-nums;
}
.ekranlar__sayac-no { color: var(--kt-metin); font-weight: 600; }

/* Ray kenarlara taşsın: mobilde slayt ekranın kenarına değsin,
   ama ilk slayt kap hizasında başlasın. */
@media (max-width: 780px) {
  .ekranlar__ray {
    margin-inline: calc(var(--kt-b5) * -1);
    padding-inline: var(--kt-b5);
    scroll-padding-left: var(--kt-b5);
    gap: var(--kt-b4);
  }
  .ekran__yazi { padding: var(--kt-b4); }
}

/* Belirme animasyonu yatay rayda yanlış çalışır (slaytlar zaten
   görünürde ama ekran dışında). Rayda kapat. */
.ekranlar__ray .kt-belir { opacity: 1; transform: none; transition: none; }

/* Dar ekranda çipler üç satıra yayılıp galeriyi aşağı itiyordu.
   Tek satır, kendi içinde kayan şerit. */
@media (max-width: 780px) {
  .ekranlar__cipler {
    flex-wrap: nowrap; overflow-x: auto;
    margin-inline: calc(var(--kt-b5) * -1);
    padding-inline: var(--kt-b5);
    scrollbar-width: none;
  }
  .ekranlar__cipler::-webkit-scrollbar { display: none; }
  .ekranlar__cip { flex: none; }
}