/* sayfa-ana.css — yalnızca ana sayfa */

/* ================= giriş ekranı ================= */
.kahraman {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding-block: 8rem var(--bos-9);
  overflow: hidden;
  isolation: isolate;
}

/* Nefes eden hale kaldırıldı: matbu dilde parlayan ışık yok, mürekkep var. */
@keyframes nefes {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.55; }
}

/* ince film grenleri — sinematik doku */
.gren {
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
  opacity: var(--gren-siddet);
  mix-blend-mode: var(--gren-katman);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

.kahraman-ic {
  display: grid;
  gap: clamp(2.5rem, 5vw, 5rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 62rem) {
  /* `1.15fr 0.85fr` ISE YARAMIYORDU: fr biriminin ortuk alt siniri
     min-content'tir; dev manset ilk sutunu 825px'e sisirip portreyi
     237px'e dusuruyordu (olculdu). minmax(0,...) tabani sifirlar,
     portre sutununa gercek bir alt sinir verilir. */
  /* Portre sutunu genisletildi (patron: "biraz daha buyut"). Onceki
     0.8fr'de kare 517px'te kaliyordu; max-width vermek ise yaramiyordu
     cunku sinir SUTUNDU. */
  /* Patron (5 Eylül): "görseli daha büyüt" — portre sütunu 1.25fr, kare 54rem. */
  .kahraman-ic { grid-template-columns: minmax(0, 0.8fr) minmax(26rem, 1.25fr); }

  /* Punto ARTIK EKRANA DEĞİL KENDİ SÜTUNUNA bağlı. İki sütuna geçince
     manşet 613px'lik kolona düşüyor ama `9.2vw` hâlâ 134px punto veriyordu;
     "KARAKUŞ" 825px istiyor ve portrenin altına taşıp kesiliyordu
     (ölçüldü). cqi = kapsayıcı genişliğinin %1'i. */
  .kahraman-metin { container-type: inline-size; }
}

.kahraman-metin { display: flex; flex-direction: column; gap: var(--bos-6); }

.kahraman-ad {
  font-family: var(--yazi-baslik);
  /* Afiş ağırlığı. Önceki 400, sayfanın alt bölüm başlıklarından HAFİFTİ:
     h1, h2'den ince görünüyordu — hiyerarşi tersine dönmüştü. */
  font-weight: 900;
  font-stretch: 120%;
  font-size: clamp(2.9rem, 1.0rem + 9.2vw, 9.6rem);
  line-height: 0.84;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  margin: 0;
}

/* Punto EKRANA değil KENDİ SÜTUNUNA bağlı — bu blok yukarıdaki temel
   kuralın ARDINDAN gelmek zorunda: medya sorgusu özgüllük eklemez, önce
   yazılırsa temel kural onu ezer (ölçüldü: 133.76px'te kaldı).
   İki sütuna geçince manşet 613px'lik kolona düşüyor ama `9.2vw` hâlâ
   134px veriyordu; "KARAKUŞ" 825px isteyip portrenin altında kesiliyordu. */
@media (min-width: 62rem) {
  .kahraman-ad { font-size: clamp(2.9rem, 14.5cqi, 9.6rem); }
}
.kahraman-ad .satir { display: block; overflow: hidden; }
.kahraman-ad .satir > span { display: block; }
.kahraman-ad .soyad { color: var(--vurgu); }

/* Künye satırı: afişte bu, adın altındaki kalın şerittir. */
.kahraman-rol {
  display: flex; align-items: center; gap: var(--bos-4);
  flex-wrap: wrap;
  font-size: var(--ol-xs);
  font-weight: 700;
  font-stretch: 108%;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--metin);
  padding-block-start: var(--bos-4);
  border-block-start: 4px solid var(--vurgu);
}
.kahraman-rol i { display: none; }

.kahraman-ozet { max-width: 34rem; font-size: var(--ol-m); color: var(--metin-sonuk); }

/* Patron (5 Eylül): adın altında küçük, modern unvan satırı. */
.kahraman-unvan {
  margin-block-start: calc(-1 * var(--bos-4));
  font-size: var(--ol-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vurgu);
  display: flex; align-items: center; gap: var(--bos-3);
}
@media (min-width: 62rem) { .kahraman-unvan { white-space: nowrap; } }
.kahraman-unvan::before { content: ""; width: 2.4rem; height: 1px; background: var(--vurgu); flex: none; }

.kahraman-eylem { display: flex; gap: var(--bos-4); flex-wrap: wrap; }

/* --- portre ---
   Matbu dilde fotoğraf kağıda BASILIR: sert kenar, kalın mürekkep
   çerçevesi, altında kırmızı künye şeridi. Önceki hal ince kaydırılmış
   bir çerçeve ve alttan zemine eriyen yumuşak geçişti; afiş dilinde
   ikisi de zayıflatıyor. */
/* PORTRE — patronun tarifi: sağda büyük, siyah-beyaz, kenarları belli
   olmadan zemine eriyen görsel.

   MASKE TEK KATMAN: iki maske katmanı `mask-composite` ile birleştirilince
   Chrome'da maske TAMAMEN boşalıyor, görsel görünmez oluyor ve hata da
   vermiyor (CLAUDE.md · TUZAKLAR, ölçüldü). Bu yüzden tek bir radial
   gradyan kullanılıyor; yatay ve dikey erime aynı maskeden çıkıyor. */
.portre {
  position: relative;
  justify-self: end;
  translate: clamp(0px, 2.5vw, 3.5rem) 0;
  align-self: center;
  /* Patron: "biraz daha buyut, birazda saga yanastir".
     42rem -> 48rem; justify-self zaten end, ek olarak negatif sag kenar
     ile kabin disina bir tik tasiriliyor. */
  width: min(100%, 54rem);
  margin: 0;
  margin-inline-end: clamp(0rem, -2vw + 1rem, 0rem);
}
.portre img {
  display: block;
  width: 100%;
  height: auto;
  /* RENKLİ. Siyah-beyazdı; patron renkli ve daha büyük istedi.
     Doygunluk bir tık geri çekildi ki fotoğraf zeminden kopmasın. */
  filter: saturate(0.96) contrast(1.04) brightness(var(--portre-parlaklik, 1));
  -webkit-mask-image: radial-gradient(72% 78% at 58% 42%,
      #000 0%, #000 46%, rgba(0,0,0,0.55) 68%, rgba(0,0,0,0) 88%);
  mask-image: radial-gradient(72% 78% at 58% 42%,
      #000 0%, #000 46%, rgba(0,0,0,0.55) 68%, rgba(0,0,0,0) 88%);
}
:root[data-tema="koyu"] .portre img { --portre-parlaklik: 1.06; }

.portre-cerceve, .portre-kutu { display: contents; }

/* KİMLİK KÜNYESİ
   AD ÇAKIŞMASI: `.kimlik` bu dosyada ZATEN kullanılıyor (iki sütunlu
   kutu ızgarası, satır 193) ve benden sonra geldiği için tek sütun
   kuralımı eziyordu — künye iki sütuna düşüp değerler satır satır
   kırılıyordu (ölçüldü). Kendi sınıfım yeniden adlandırıldı.

   KİMLİK LİSTESİ — ad/meslek/siyasi bilgi. Etiket üstte küçük ve seyrek
   harfli, değer altta; künye okunuşu. */
.kimlik-kunye {
  display: grid;
  grid-template-columns: 1fr;   /* aksi halde iki sutuna dusuyor, deger satir satir kiriliyor */
  gap: 0;
  margin: 0;
  max-width: 34rem;
}
.kimlik-kunye > div {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: var(--bos-4);
  align-items: baseline;
  padding-block: var(--bos-3);
  border-top: 1px solid var(--cizgi);
}
.kimlik-kunye > div:first-child { border-top: 0; padding-top: 0; }
.kimlik-kunye dt {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--metin-silik);
  font-weight: 600;
}
.kimlik-kunye dd {
  margin: 0;
  font-size: var(--ol-s);
  line-height: 1.35;
  color: var(--metin);
}

@media (max-width: 60rem) {
  .portre { justify-self: center; width: min(100%, 26rem); }
  .kimlik-kunye > div { grid-template-columns: 1fr; gap: var(--bos-1); }
}

/* aşağı kaydır işareti */
/* ================= kimlik şeridi ================= */
.serit {
  border-block: 3px solid var(--metin);
  background: var(--zemin-derin);
}
.serit-ic {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}
.serit-oge {
  padding: var(--bos-6) var(--bos-5);
  border-inline-start: 1px solid var(--cizgi);
  display: flex; flex-direction: column; gap: var(--bos-2);
}
.serit-oge:first-child { border-inline-start: 0; padding-inline-start: 0; }
.serit-oge dt {
  font-size: var(--ol-3xs); font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--vurgu);
}
.serit-oge dd {
  margin: 0; font-family: var(--yazi-baslik);
  font-weight: 800; font-stretch: 112%; text-transform: uppercase;
  font-size: var(--ol-l); line-height: 0.98; letter-spacing: -0.015em;
  color: var(--metin);
}

/* ================= hakkında ================= */
.hakkinda-ic {
  display: grid;
  gap: clamp(2.5rem, 6vw, 6rem);
  grid-template-columns: 1fr;
}
@media (min-width: 58rem) {
  .hakkinda-ic { grid-template-columns: 0.9fr 1.1fr; align-items: start; }
}
.hakkinda-metin { display: flex; flex-direction: column; gap: var(--bos-6); }

/* iki kimlik: hukukçu ve siyasetçi */
.kimlik { display: grid; gap: var(--bos-5); }
@media (min-width: 40rem) { .kimlik { grid-template-columns: 1fr 1fr; } }
/* İki kimlik kutusu, jenerik "üç eşit kart" kalıbının ikizidir. Kutu
   kaldırıldı; ayrımı üstteki kalın çizgi yapıyor. */
.kimlik-kutu {
  border: 0;
  border-block-start: 3px solid var(--metin);
  border-radius: 0;
  padding: var(--bos-4) 0 0;
  display: flex; flex-direction: column; gap: var(--bos-3);
  transition: border-color var(--gecis);
}
.kimlik-kutu:hover { border-block-start-color: var(--vurgu); }
.kimlik-kutu h3 {
  font-family: var(--yazi-baslik); font-size: var(--ol-l);
  font-weight: 800; font-stretch: 112%; text-transform: uppercase;
  line-height: 1; letter-spacing: -0.015em;
}
.kimlik-kutu p { color: var(--metin-sonuk); font-size: var(--ol-xs); }

/* ================= söz ================= */
.soz {
  position: relative;
  background: var(--zemin-derin);
  border-block-end: 3px solid var(--metin);
  overflow: hidden;
}
/* Dev tirnak glifi kaldirildi: Bodoni'ye ozgu bir sustu ve ham altin
   rengini tasiyordu (Kural 3 ihlali). Matbu dilde alintiyi cerceve degil
   KALIN KIRMIZI SERIT tasir. */
.soz::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 10px;
  background: var(--vurgu);
  pointer-events: none;
}
/* Ortalanmis alinti afis dilinde zayif duruyor; sola dayali daha guclu. */
.soz-ic { position: relative; text-align: start; max-width: 46rem; }
.soz-liste { position: relative; min-height: 1px; }
.soz-oge { display: none; }
.soz-oge[data-etkin="evet"] { display: block; }

.soz-nokta { display: flex; justify-content: flex-start; gap: var(--bos-3);
             margin-top: var(--bos-6); }
.soz-nokta button {
  width: 2.25rem; height: 4px; padding: 0;
  background: var(--cizgi); border: 0; cursor: pointer;
  transition: background var(--gecis-hizli);
}
.soz-nokta button[aria-selected="true"] { background: var(--vurgu); }

/* ================= galeri şeridi ================= */
.galeri-serit { overflow: hidden; }
.galeri-yol { display: flex; gap: var(--bos-4); will-change: transform; }
.galeri-kare {
  flex: 0 0 clamp(14rem, 26vw, 24rem);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--kose);
  background: var(--zemin-kat);
  border: 1px solid var(--cizgi);
}
.galeri-kare img { width: 100%; height: 100%; object-fit: cover;
                   transition: transform 900ms cubic-bezier(0.22,0.61,0.36,1),
                               filter var(--gecis); filter: saturate(0.85); }
.galeri-kare:hover img { transform: scale(1.06); filter: saturate(1); }

/* ================= iletişim çağrısı ================= */
.cagri { position: relative; text-align: center; overflow: hidden; }
.cagri::before {
  content: "";
  position: absolute; z-index: -1;
  inset-block-start: 50%; inset-inline-start: 50%;
  translate: -50% -50%;
  width: min(80vw, 50rem); aspect-ratio: 1;
  background: radial-gradient(circle, var(--hale), transparent 65%);
}
.cagri-ic { display: flex; flex-direction: column; align-items: center; gap: var(--bos-6); }

/* ================= kahraman arka planı (fare parallax) =================
   Katmanlar fareyle farklı hızda kayar. Dokunmatikte ve azaltılmış
   hareket tercihinde JS hiç bağlanmaz; katmanlar sabit durur. */
.kahraman-fon {
  position: absolute;
  inset: -8%;
  z-index: -3;
  pointer-events: none;
  overflow: hidden;
}
.kahraman-fon .kat {
  position: absolute;
  inset: 0;
  will-change: transform;
  /* JS her karede --fx/--fy yaziyor; ayrica transition olsa iki
     yumusatma ust uste biner ve hareket gecikmeli/lastikli hissettirir */
  transform: translate3d(calc(var(--fx, 0px) * var(--derinlik, 1)),
                         calc(var(--fy, 0px) * var(--derinlik, 1)), 0);
}
.kahraman-fon img {
  position: absolute;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Patron (5 Eylül): arka plana fotoğraf yerine kırmızı Yeniden Refah amblemi,
   sayfa boyunda ve soluk. Fotoğraf katmanları kapatıldı (DOM'da duruyor). */
.kahraman-fon .kat-1, .kahraman-fon .kat-2 { display: none; }
.kahraman-fon .kat-amblem { --derinlik: 0.5; }
.kahraman-fon .kat-amblem img {
  width: min(135vh, 125vw); height: auto; aspect-ratio: 1;
  object-fit: contain;
  inset: auto; left: 56%; top: 50%; translate: -50% -50%;
  opacity: 0.14;
}
:root[data-tema="acik"] .kahraman-fon .kat-amblem img { opacity: 0.10; }

/* geniş, çok soluk şehir/kalabalık dokusu */
.kahraman-fon .kat-1 { --derinlik: 1; }
.kahraman-fon .kat-1 img {
  opacity: 0.20;
  filter: saturate(0.25) contrast(1.1) brightness(0.75);
  -webkit-mask-image: radial-gradient(ellipse 78% 72% at 72% 40%, #000 0%, transparent 72%);
  mask-image: radial-gradient(ellipse 78% 72% at 72% 40%, #000 0%, transparent 72%);
}
/* Kağıt zeminde kalabalık dokusu çamurlaşıyordu: gri bir bulanıklık
   üretip başlığın altındaki kontrastı düşürüyor, hiçbir anlam
   taşımıyordu. Neredeyse tamamen geri çekildi. */
:root[data-tema="acik"] .kahraman-fon .kat-1 img {
  opacity: 0.045;
  filter: saturate(0) contrast(1.05) brightness(1.06);
}

/* ikinci doku, ters yönde ve daha yavaş */
.kahraman-fon .kat-2 { --derinlik: -0.55; }
.kahraman-fon .kat-2 img {
  opacity: 0.14;
  filter: saturate(0.2) contrast(1.05) brightness(0.7);
  -webkit-mask-image: radial-gradient(ellipse 62% 58% at 18% 78%, #000 0%, transparent 70%);
  mask-image: radial-gradient(ellipse 62% 58% at 18% 78%, #000 0%, transparent 70%);
}
:root[data-tema="acik"] .kahraman-fon .kat-2 img {
  opacity: 0.07;
  filter: saturate(0.18) contrast(1.0) brightness(1.08);
}

/* altın hale — en hızlı katman */
.kahraman-fon .kat-hale { --derinlik: 1.8; }
.kahraman-fon .kat-hale::before {
  content: "";
  position: absolute;
  inset-block-start: -12%;
  inset-inline-end: -6%;
  width: min(86vw, 58rem);
  aspect-ratio: 1;
  background: radial-gradient(circle, var(--hale-yogun) 0%,
              color-mix(in srgb, var(--hale) 28%, transparent) 42%, transparent 70%);
  animation: nefes 14s ease-in-out infinite;
}

/* zemin, katmanları içeri doğru yutar — kenar çizgisi kalmasın */
.kahraman-fon::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, transparent 62%, var(--zemin) 97%),
    linear-gradient(to right, var(--zemin) 2%, transparent 34%);
}

/* ================= SİNEMATİK KAHRAMAN (lacivert + altın) =================
   Patronun referansı: tam kadraj koyu fotoğraf, soldan lacivert perde,
   sağ altta altın ışık, altın serif manşet. Bu blok dosyanın SONUNDA
   duruyor ki yukarıdaki matbu-dönemi kuralları özgüllük eşitliğinde ezsin. */
.kahraman { padding-block: 7rem var(--bos-9); }

/* Fotoğraf artık doku değil SAHNE: opaklık 0.20 → 0.55, renk geri geldi. */
.kahraman-fon .kat-1 img {
  opacity: 0.55;
  filter: saturate(0.55) contrast(1.12) brightness(0.62);
  -webkit-mask-image: none;
  mask-image: none;
}
.kahraman-fon .kat-2 img {
  opacity: 0.22;
  filter: saturate(0.4) contrast(1.05) brightness(0.55);
  -webkit-mask-image: radial-gradient(ellipse 70% 65% at 15% 85%, #000 0%, transparent 72%);
  mask-image: radial-gradient(ellipse 70% 65% at 15% 85%, #000 0%, transparent 72%);
}
:root[data-tema="acik"] .kahraman-fon .kat-1 img {
  opacity: 0.22; filter: saturate(0.35) contrast(1.05) brightness(1.15);
}
:root[data-tema="acik"] .kahraman-fon .kat-2 img { opacity: 0.08; }

/* Soldan lacivert perde: manşet fotoğrafın üstünde okunur kalsın. */
.kahraman::before {
  content: "";
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    linear-gradient(90deg, var(--zemin) 0%, rgb(12 21 38 / 0.86) 34%, rgb(12 21 38 / 0.35) 62%, rgb(12 21 38 / 0.10) 100%),
    linear-gradient(0deg, var(--zemin) 0%, rgb(12 21 38 / 0) 38%);
}
:root[data-tema="acik"] .kahraman::before {
  background:
    linear-gradient(90deg, var(--zemin) 0%, rgb(247 245 240 / 0.88) 34%, rgb(247 245 240 / 0.40) 62%, rgb(247 245 240 / 0.12) 100%),
    linear-gradient(0deg, var(--zemin) 0%, rgb(247 245 240 / 0) 38%);
}

/* Sağ altta altın ışık — referansın gün batımı parıltısı. */
.kahraman::after {
  content: "";
  position: absolute; z-index: -1; pointer-events: none;
  inset-inline-end: -12%; inset-block-end: -18%;
  width: min(90vw, 64rem); aspect-ratio: 1;
  background: radial-gradient(circle, var(--isik) 0%, rgb(227 199 122 / 0.08) 32%, transparent 62%);
  filter: blur(6px);
}
.kahraman-fon .kat-hale::before { display: none; }   /* eski hale ile çakışmasın */

/* Manşet: altın serif. */
.kahraman-ad {
  font-family: var(--yazi-ekran);
  font-weight: 500;
  font-stretch: 100%;
  letter-spacing: 0.02em;
  line-height: 0.98;
  color: var(--vurgu);
  text-shadow: 0 2px 30px var(--kahraman-golge);
}
.kahraman-ad .soyad { color: var(--vurgu-parlak); }
.kahraman-ad .satir:first-child > span {
  font-size: 0.42em; font-weight: 400; letter-spacing: 0.34em;
  color: var(--metin); display: block; margin-bottom: 0.35em;
}

/* Portre RENKLİ. Önce siyah-beyaz, sonra altın duoton yapılmıştı; patron
   "renklendir ve büyüt" dedi. Duoton kaldırıldı, maske kaldı: fotoğraf
   çerçevesiz duruyor ve kenarları zemine eriyor. */
.portre img {
  filter: saturate(1.02) contrast(1.03) brightness(0.99);
  -webkit-mask-image: radial-gradient(74% 80% at 56% 44%, #000 0%, #000 44%, rgb(0 0 0 / 0.5) 68%, transparent 90%);
  mask-image: radial-gradient(74% 80% at 56% 44%, #000 0%, #000 44%, rgb(0 0 0 / 0.5) 68%, transparent 90%);
}
:root[data-tema="acik"] .portre img { filter: saturate(1.0) contrast(1.02) brightness(1.01); }

/* Künye: altın etiketler. */
.kimlik-kunye dt { color: var(--vurgu); letter-spacing: 0.2em; }
.kimlik-kunye > div { border-top-color: var(--cizgi); }

/* Altın dalga ayraç — kahramanın altında, referansın akan çizgisi. */
.kahraman-dalga {
  position: absolute; inset-inline: 0; inset-block-end: -1px; z-index: 1;
  width: 100%; height: clamp(3rem, 8vw, 7rem); pointer-events: none;
}
.kahraman-dalga path { fill: none; stroke: var(--vurgu); stroke-width: 1.5; opacity: 0.85; }
.kahraman-dalga .dolgu { fill: var(--zemin); stroke: none; opacity: 1; }

/* Portre kenarı: sahne parlaklaşınca dikdörtgen sınır seçilir oldu
   (ölçüldü, ekran görüntüsünde sol ve üst kenar belli). Maske erimesi
   erken başlıyor, tam saydama %100'de değil %78'de varıyor; ayrıca
   portrenin arkasına lacivert vinyet konarak kalabalık bastırılıyor. */
.portre { position: relative; }
.portre::before {
  content: ""; position: absolute; inset: -18% -22%; z-index: -1;
  background: radial-gradient(60% 62% at 55% 48%, rgb(12 21 38 / 0.72) 0%, rgb(12 21 38 / 0.35) 45%, transparent 72%);
  pointer-events: none;
}
.portre img {
  -webkit-mask-image: radial-gradient(64% 70% at 54% 46%, #000 0%, #000 28%, rgb(0 0 0 / 0.55) 54%, rgb(0 0 0 / 0.12) 70%, transparent 78%);
  mask-image: radial-gradient(64% 70% at 54% 46%, #000 0%, #000 28%, rgb(0 0 0 / 0.55) 54%, rgb(0 0 0 / 0.12) 70%, transparent 78%);
}
:root[data-tema="acik"] .portre::before {
  background: radial-gradient(60% 62% at 55% 48%, rgb(247 245 240 / 0.7) 0%, rgb(247 245 240 / 0.3) 45%, transparent 72%);
}

/* ================= KANIT ŞERİDİ ================= */
.etiket-altin { color: var(--vurgu); }
.kanit { position: relative; padding-block: var(--bolum-bos); overflow: hidden; }
.kanit::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset-inline-start: -20%; inset-block-start: -30%;
  width: min(80vw, 56rem); aspect-ratio: 1;
  background: radial-gradient(circle, var(--isik) 0%, transparent 62%); filter: blur(10px);
}
.kanit-izgara {
  display: grid; gap: var(--bos-5); margin-block: var(--bos-6);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.kanit-kart {
  padding: var(--bos-5) var(--bos-5) var(--bos-4);
  border: 1px solid var(--cizgi); border-radius: 4px;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.03), transparent);
  position: relative;
}
.kanit-kart::after {
  content: ""; position: absolute; inset-inline: var(--bos-5); inset-block-start: 0;
  height: 2px; background: linear-gradient(90deg, var(--vurgu), transparent);
}
.kanit-sayi {
  font-family: var(--yazi-ekran); font-weight: 500;
  font-size: clamp(2.6rem, 5.5vw, 4.2rem); line-height: 1; color: var(--vurgu);
  font-variant-numeric: tabular-nums; letter-spacing: 0.01em;
}
.kanit-ad { font-family: var(--yazi-govde); font-weight: 600; font-size: var(--ol-s);
  margin-top: var(--bos-3); color: var(--metin); text-transform: none; letter-spacing: 0; }
.kanit-not { margin-top: var(--bos-1); font-size: var(--ol-xs); color: var(--metin-silik); }

/* ================= MESELE KARTLARI ================= */
.meseleler-ana { position: relative; padding-block: var(--bolum-bos); overflow: hidden; }
.meseleler-ana::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset-inline-end: -18%; inset-block-end: -30%;
  width: min(80vw, 54rem); aspect-ratio: 1;
  background: radial-gradient(circle, var(--isik) 0%, transparent 62%); filter: blur(10px);
}
.mesele-kartlar {
  display: grid; gap: var(--bos-4); margin-top: var(--bos-6);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.mesele-kart {
  display: flex; flex-direction: column; gap: var(--bos-3);
  padding: var(--bos-5); border: 1px solid var(--cizgi); border-radius: 4px;
  background: var(--zemin-kat); color: inherit; text-decoration: none;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.mesele-kart:hover { border-color: var(--vurgu); transform: translateY(-3px); }
.mesele-kart:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 3px; }
.mesele-ikon {
  width: 2.6rem; height: 2.6rem; display: grid; place-items: center;
  border: 1px solid var(--cizgi-guclu); border-radius: 50%; color: var(--vurgu);
}
.mesele-ikon svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.mesele-kart h3 { font-family: var(--yazi-baslik); font-weight: 600; font-size: var(--ol-s);
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--metin); }
.mesele-kart .mesele-sayac { font-size: 0.72rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--vurgu); }
.mesele-ozet { font-size: var(--ol-xs); line-height: 1.55; color: var(--metin-sonuk); }
.mesele-git { margin-top: auto; font-size: 0.74rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--vurgu); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .mesele-kart { transition: none; } .mesele-kart:hover { transform: none; } }
.kanit .etiket, .meseleler-ana .etiket { margin-bottom: var(--bos-3); display: inline-flex; }
.kanit .baslik-2 { margin-top: var(--bos-2); }