/* sayfa.css — iç sayfaların ortak kalıpları.
   Ana sayfa kendi dosyasını kullanır; burası diğer 8 sayfa içindir. */

/* ---------- sayfa başlığı ---------- */
.sayfa-bas {
  position: relative;
  padding-block: clamp(7rem, 5.5rem + 6vw, 10rem) var(--bolum-bos);
  border-bottom: 3px solid var(--metin);
  overflow: hidden;
}
/* Radyal hale kaldirildi: kagit zeminde pembemsi bir leke birakiyordu ve
   afis dilinde parlayan isik yok. Yerine baslik ustunde kirmizi kunye
   seridi. */
.sayfa-bas::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 10px;
  background: var(--vurgu);
  pointer-events: none;
}
.sayfa-bas h1 { max-width: 14ch; }
.sayfa-bas .govde { max-width: 52ch; margin-top: var(--bos-5); }
.sayfa-bas-ic { display: flex; flex-direction: column; gap: var(--bos-4); }

/* ---------- sayfa başlığında yumuşak fotoğraf bandı ----------
   Patron: "sağa sola birkaç fotoğrafını ekle, yumuşak geçişli."
   Süsleme: aria-hidden, metnin arkasında, kenarlardan içeri doğru erir.
   TEK maske katmanı — iki katman Chrome'da maskeyi boşaltıyor. */
/* ÖLÇÜLDÜ: .sayfa-bas viewport'un en üstünden başlıyor ve sabit üst menü ilk
   ~78 px'ini örtüyordu; fotoğraflardaki yüzler tam o bandın altında kalıyordu
   (patron: "adamın ağzı görünüyor sadece"). Katman menünün altından başlar. */
.bas-fotolar { position: absolute; inset: var(--bas-foto-ust, 5rem) 0 0; z-index: -1; pointer-events: none; overflow: hidden; }
.bas-foto {
  position: absolute; inset-block: 0; height: 100%; object-fit: cover;
  filter: saturate(0.9) contrast(1.04);
  opacity: 0.5;
}
.bas-foto-1 { inset-inline-start: 0; width: 21%;
  -webkit-mask-image: radial-gradient(ellipse 130% 105% at 0% 50%, #000 22%, rgba(0,0,0,0) 82%);
  mask-image: radial-gradient(ellipse 130% 105% at 0% 50%, #000 22%, rgba(0,0,0,0) 82%); }
.bas-foto-2 { inset-inline-start: 17%; width: 15%; inset-block: 6% 6%; height: auto; opacity: 0.34;
  -webkit-mask-image: radial-gradient(ellipse 120% 110% at 10% 50%, #000 12%, rgba(0,0,0,0) 78%);
  mask-image: radial-gradient(ellipse 120% 110% at 10% 50%, #000 12%, rgba(0,0,0,0) 78%); }
.bas-foto-3 { inset-inline-end: 17%; width: 15%; inset-block: 6% 6%; height: auto; opacity: 0.34;
  -webkit-mask-image: radial-gradient(ellipse 120% 110% at 90% 50%, #000 12%, rgba(0,0,0,0) 78%);
  mask-image: radial-gradient(ellipse 120% 110% at 90% 50%, #000 12%, rgba(0,0,0,0) 78%); }
.bas-foto-4 { inset-inline-end: 0; width: 21%;
  -webkit-mask-image: radial-gradient(ellipse 130% 105% at 100% 50%, #000 22%, rgba(0,0,0,0) 82%);
  mask-image: radial-gradient(ellipse 130% 105% at 100% 50%, #000 22%, rgba(0,0,0,0) 82%); }
:root[data-tema="acik"] .bas-foto { opacity: 0.34; filter: saturate(0.85) contrast(1.02) brightness(1.04); }
:root[data-tema="acik"] .bas-foto-2, :root[data-tema="acik"] .bas-foto-3 { opacity: 0.22; }
/* Dar ekranda iki küçük kare çıkar, kalan ikisi iyice geri çekilir:
   başlık ortada ve okunur kalmalı. */
/* Metnin altında ince bir perde: fotoğraf ne olursa olsun başlık okunur kalsın. */
.bas-fotolar::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 62% 88% at 50% 50%,
    color-mix(in srgb, var(--zemin) 88%, transparent) 0%,
    color-mix(in srgb, var(--zemin) 40%, transparent) 55%,
    rgba(0, 0, 0, 0) 100%);
}
@media (max-width: 62rem) {
  .bas-foto-2, .bas-foto-3 { display: none; }
  .bas-foto-1, .bas-foto-4 { width: 27%; opacity: 0.2; }
  :root[data-tema="acik"] .bas-foto-1, :root[data-tema="acik"] .bas-foto-4 { opacity: 0.14; }
  .bas-fotolar::after { background: radial-gradient(ellipse 78% 96% at 50% 50%,
    color-mix(in srgb, var(--zemin) 92%, transparent) 0%,
    color-mix(in srgb, var(--zemin) 55%, transparent) 60%,
    rgba(0, 0, 0, 0) 100%); }
}
.sayfa-bas-fotolu .sayfa-bas-ic { position: relative; }

/* ---------- özgeçmiş: anlatı ---------- */
.ozgecmis { display: grid; gap: var(--bos-7); }
.ozgecmis-bolum { display: grid; grid-template-columns: 1fr; gap: var(--bos-3); }
@media (min-width: 52rem) {
  .ozgecmis-bolum { grid-template-columns: 13rem 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); }
}
.ozgecmis-bolum + .ozgecmis-bolum { border-top: 1px solid var(--cizgi); padding-top: var(--bos-7); }
.ozgecmis-baslik {
  font-family: var(--yazi-ekran); font-weight: 500;
  font-size: var(--ol-s); line-height: 1.2;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--vurgu); align-self: start;
}
.ozgecmis-metin {
  display: grid; gap: var(--bos-4);
  font-family: var(--yazi-makale); font-size: var(--ol-m);
  line-height: 1.62; color: var(--makale-metin); max-width: 64ch;
}

/* Aydinlatma metnindeki madde listeleri. Ham hex YOK: isaret rengi
   --vurgu belirtecinden gelir, yoksa gece modunda koparadi. */
.ozgecmis-metin ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--bos-2); }
.ozgecmis-metin li { position: relative; padding-inline-start: 1.15rem; }
.ozgecmis-metin li::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.62em;
  width: 0.32rem; height: 0.32rem; border-radius: 50%; background: var(--vurgu);
}

/* ---------- özgeçmiş: zaman çizelgesi ---------- */
.zaman { display: grid; gap: 0; }
.zaman-oge {
  display: grid;
  gap: var(--bos-4) clamp(1.5rem, 4vw, 4rem);
  grid-template-columns: 1fr;
  padding-block: var(--bos-7);
  border-top: 1px solid var(--cizgi);
}
@media (min-width: 46rem) {
  .zaman-oge { grid-template-columns: 12rem 1fr; }
}
.zaman-yil {
  font-family: var(--yazi-baslik);
  font-weight: 900;
  font-stretch: 118%;
  font-size: var(--ol-l);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--vurgu);
  align-self: start;
  position: sticky;
  top: 6rem;
}
.zaman-govde h3 { font-family: var(--yazi-baslik); font-size: var(--ol-l);
                  font-weight: 800; font-stretch: 110%; text-transform: uppercase;
                  letter-spacing: -0.015em;
                  line-height: 1.02; margin-bottom: var(--bos-3); }
.zaman-govde p { color: var(--metin-sonuk); max-width: 60ch; }

/* ---------- görüşler: editoryal dizin ---------- */
.one-cikan {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  grid-template-columns: 1fr;
  align-items: center;
  padding-bottom: var(--bolum-bos);
  border-bottom: 1px solid var(--cizgi);
}
@media (min-width: 54rem) { .one-cikan { grid-template-columns: 1.1fr 0.9fr; } }
.one-cikan-gorsel { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--kose);
                    background: var(--zemin-kat); border: 1px solid var(--cizgi); }
.one-cikan-gorsel img { width: 100%; height: 100%; object-fit: cover; }
.one-cikan h2 { font-family: var(--yazi-baslik); font-weight: 900;
                font-stretch: 116%; text-transform: uppercase; letter-spacing: -0.025em;
                font-size: var(--ol-2xl); line-height: 1.02; letter-spacing: -0.025em; }

.yazi-liste { display: grid; }
.yazi-satir {
  position: relative;
  display: grid;
  gap: var(--bos-3) clamp(1.5rem, 4vw, 4rem);
  grid-template-columns: 1fr;
  padding-block: var(--bos-6);
  border-bottom: 1px solid var(--cizgi);
  transition: padding-inline-start var(--gecis);
}
@media (min-width: 46rem) {
  .yazi-satir { grid-template-columns: 9rem 1fr auto; align-items: baseline; }
  .yazi-satir:hover { padding-inline-start: var(--bos-4); }
}
.yazi-satir time { font-size: var(--ol-2xs); color: var(--metin-silik); }
.yazi-satir h3 { font-family: var(--yazi-baslik); font-weight: 800;
                 font-stretch: 110%; text-transform: uppercase; letter-spacing: -0.015em;
                 font-size: var(--ol-l); line-height: 1.2; }
.yazi-satir .ok { color: var(--vurgu); opacity: 0; transition: opacity var(--gecis); }
.yazi-satir:hover .ok { opacity: 1; }

/* ---------- tek yazı ---------- */
.makale-duzen { max-width: 44rem; margin-inline: auto; }
.makale-ust { display: flex; flex-direction: column; gap: var(--bos-4);
              padding-bottom: var(--bos-7); }
.makale-ust h1 { font-family: var(--yazi-baslik); font-weight: 800;
                 font-stretch: 114%; text-transform: uppercase;
                 font-size: var(--ol-xl); line-height: 0.96; letter-spacing: -0.025em; }
.makale-bilgi { display: flex; gap: var(--bos-4); flex-wrap: wrap;
                font-size: var(--ol-2xs); color: var(--metin-silik); }

/* okuma ilerlemesi */
.ilerleme-cizgi {
  position: fixed; inset-block-start: 0; inset-inline: 0; height: 4px; z-index: 95;
  background: var(--vurgu); transform: scaleX(var(--okundu, 0));
  transform-origin: left; pointer-events: none;
}

/* ---------- galeri ---------- */
.galeri-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  gap: var(--bos-3);
  grid-auto-flow: dense;
}
.galeri-oge {
  position: relative; margin: 0; overflow: hidden;
  border-radius: var(--kose); background: var(--zemin-kat);
  border: 1px solid var(--cizgi);
  aspect-ratio: 1;
}
/* Ritim kaldirildi. Olculdu: 7n+1 iki sutuna, 11n+4 iki SATIRA yayiliyordu;
   yatay bir fotograf 1:2.06 kutuya `cover` ile basilinca karenin %60'i
   kirpiliyor ve ozne kadraj disinda kaliyordu ("Erhun yok, dagitik").
   Artik butun kareler ayni 3:2 oraninda ve odak bir tik yukarida. */
.galeri-oge { aspect-ratio: 3 / 2; }
.galeri-oge img { object-position: center 32%; }
@media (max-width: 34rem) {
  .galeri-oge:nth-child(7n + 1), .galeri-oge:nth-child(11n + 4) {
    grid-column: auto; grid-row: auto; aspect-ratio: 1;
  }
}
.galeri-oge img { width: 100%; height: 100%; object-fit: cover;
                  transition: transform 800ms cubic-bezier(0.22,0.61,0.36,1),
                              filter var(--gecis);
                  filter: saturate(0.88); }
.galeri-oge:hover img { transform: scale(1.05); filter: saturate(1); }
.galeri-dugme { position: absolute; inset: 0; border: 0; background: none;
                cursor: zoom-in; padding: 0; }

/* büyüteç */
.buyutec {
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: center;
  background: rgb(6 16 32 / 0.94);
  padding: clamp(1rem, 4vw, 3rem);
}
.buyutec[hidden] { display: none; }
.buyutec img { max-width: 100%; max-height: 82svh; object-fit: contain;
               border-radius: var(--kose); }
.buyutec-alt { margin-top: var(--bos-4); text-align: center;
               color: rgb(242 239 233 / 0.82); font-size: var(--ol-xs);
               max-width: 60ch; margin-inline: auto; }
.buyutec-tarih { margin-top: var(--bos-2); text-align: center;
                 color: rgb(242 239 233 / 0.5); font-size: var(--ol-3xs); }
.buyutec-kapat, .buyutec-gez {
  position: absolute; background: none; color: var(--marka-beyaz);
  border: 1px solid rgb(242 239 233 / 0.25); border-radius: 50%;
  width: 3rem; height: 3rem; display: grid; place-items: center;
  cursor: pointer; font-size: 1.1rem; transition: border-color var(--gecis-hizli);
}
.buyutec-kapat:hover, .buyutec-gez:hover { border-color: var(--marka-altin); }
.buyutec-kapat { inset-block-start: var(--kenar); inset-inline-end: var(--kenar); }
.buyutec-gez[data-yon="onceki"] { inset-inline-start: var(--kenar); }
.buyutec-gez[data-yon="sonraki"] { inset-inline-end: var(--kenar); }
.buyutec-gez { inset-block-start: 50%; translate: 0 -50%; }

/* ---------- video ---------- */
.video-izgara {
  display: grid; gap: var(--bos-5);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}
.video-kart { position: relative; margin: 0; }
.video-kutu { position: relative; aspect-ratio: 9 / 16; overflow: hidden;
              border-radius: var(--kose); background: var(--zemin-kat);
              border: 1px solid var(--cizgi); }
.video-kutu video, .video-kutu img { width: 100%; height: 100%; object-fit: cover; }
.video-kart figcaption { margin-top: var(--bos-4); color: var(--metin-sonuk);
                         font-size: var(--ol-xs); }

/* ---------- çalışmalar: kümeler ---------- */
/* ÇALIŞMALAR — her küme kendi görselleştirmesiyle.
   Önceki sürüm beş kümeyi de aynı metin kartı olarak basıyordu; sayfa
   veri dökümü gibi duruyordu. Aşağıdaki dört blok onun yerine geçti. */
.kume { padding-block: var(--bolum-bos); border-top: 1px solid var(--cizgi); }
.kume:first-of-type { border-top: 0; padding-top: 0; }
.kume-bas { display: flex; flex-direction: column; gap: var(--bos-2);
            margin-bottom: var(--bos-5); max-width: 62ch; }
.kume-bas h2 { font-family: var(--yazi-baslik); font-weight: 800; font-stretch: 114%; text-transform: uppercase; letter-spacing: -0.02em;
               font-size: var(--ol-l); line-height: 1.12; }
.kume-not { color: var(--metin-silik); font-size: var(--ol-xs); }
.kume-ozet { max-width: 60ch; margin-bottom: var(--bos-5);
             padding-left: var(--bos-4); border-left: 2px solid var(--vurgu);
             font-size: var(--ol-m); line-height: 1.45; color: var(--metin-sonuk); }

/* 1) İRİ RAKAMLAR — sayfanın tepe hiyerarşisi. Boyut tek başına değil,
      ağırlık ve renk de taşıyor; okuyan önce bu dört sayıyı görür. */
.kume--sayilar .kume-govde { display: grid; gap: var(--bos-5);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.sayi-kart { display: flex; flex-direction: column; gap: var(--bos-2);
             padding-top: var(--bos-4); border-top: 2px solid var(--cizgi-guclu); }
.sayi-deger { font-family: var(--yazi-baslik); font-weight: 900; font-stretch: 118%; letter-spacing: -0.03em;
              font-size: clamp(2.9rem, 7vw, 4.6rem); line-height: 0.92;
              letter-spacing: -0.03em; color: var(--vurgu);
              font-variant-numeric: tabular-nums; }
.sayi-birim { font-size: 0.42em; color: var(--metin-silik); letter-spacing: 0; }
.sayi-ad { font-family: var(--yazi-baslik); font-weight: 800; font-stretch: 110%; text-transform: uppercase; letter-spacing: -0.01em; font-size: var(--ol-m); }
.sayi-not { color: var(--metin-silik); font-size: var(--ol-xs); line-height: 1.5; }

/* 2) SIRALI ÇUBUK — dolgu en büyüğe oranlanır. Çubuk saf süsleme
      (aria-hidden); ad ve sayı normal metin, ekran okuyucu ikisini okur. */
.cubuk-liste { display: flex; flex-direction: column; gap: 1px;
               list-style: none; margin: 0; padding: 0; }
.cubuk-satir { display: grid; align-items: center; gap: var(--bos-4);
  grid-template-columns: minmax(9rem, 15rem) 1fr auto;
  padding-block: var(--bos-3); border-bottom: 1px solid var(--cizgi); }
.cubuk-ad { font-size: var(--ol-s); }
.cubuk-satir--lider .cubuk-ad { font-weight: 600; }
.cubuk-yol { position: relative; height: 10px; border-radius: 999px;
             background: var(--hale); overflow: hidden; }
.cubuk-dolgu { position: absolute; inset: 0 auto 0 0; width: var(--oran);
               border-radius: 999px; background: var(--vurgu); opacity: 0.55;
               transform-origin: left center; animation: cubuk-ac 0.7s cubic-bezier(.22,1,.36,1) both; }
.cubuk-satir--lider .cubuk-dolgu { opacity: 1; }
.cubuk-sayi { font-family: var(--yazi-baslik); font-size: var(--ol-m);
              font-variant-numeric: tabular-nums; min-width: 3ch; text-align: right; }
@keyframes cubuk-ac { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .cubuk-dolgu { animation: none; } }

/* 3) ROZET — elli kurumu satır satır dizmek okunmuyordu; etiket bulutu
      hem sığıyor hem de çok gidilen yerler koyu olduğu için sıralanabiliyor. */
.rozet-liste { display: flex; flex-wrap: wrap; gap: var(--bos-2);
               list-style: none; margin: 0; padding: 0; }
.rozet { display: inline-flex; align-items: baseline; gap: var(--bos-2);
  padding: 0.42em 0.8em; border: 1px solid var(--cizgi); border-radius: 999px;
  font-size: var(--ol-xs); color: var(--metin-sonuk); background: var(--zemin-kat); }
.rozet--cok { border-color: var(--vurgu); color: var(--metin);
              background: var(--hale); font-weight: 600; }
.rozet-sayi { font-family: var(--yazi-baslik); color: var(--vurgu);
              font-variant-numeric: tabular-nums; }

/* 4) PROJE KARTI */
.kume--kart .kume-govde { display: grid; gap: var(--bos-5);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.proje-kart { display: flex; flex-direction: column; gap: var(--bos-3);
  padding: var(--bos-5); background: var(--zemin-kat);
  border: 1px solid var(--cizgi); border-radius: 3px; box-shadow: var(--golge-yakin); }
.proje-ad { font-family: var(--yazi-baslik); font-weight: 800; font-stretch: 110%; text-transform: uppercase; letter-spacing: -0.01em; font-size: var(--ol-m); }
.proje-adres { font-size: var(--ol-xs); color: var(--vurgu);
               font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.proje-not { color: var(--metin-sonuk); font-size: var(--ol-xs); line-height: 1.55; }
.proje-sayilar { display: flex; flex-wrap: wrap; gap: var(--bos-4);
                 margin-top: auto; padding-top: var(--bos-3);
                 border-top: 1px solid var(--cizgi); }
.proje-sayilar div { display: flex; flex-direction: column; }
.proje-sayilar dt { font-family: var(--yazi-baslik); font-size: var(--ol-s);
                    font-variant-numeric: tabular-nums; }
.proje-sayilar dd { margin: 0; font-size: 0.78rem; color: var(--metin-silik); }

@media (max-width: 34rem) {
  .cubuk-satir { grid-template-columns: 1fr auto; gap: var(--bos-2) var(--bos-3); }
  .cubuk-yol { grid-column: 1 / -1; }
}

/* ---------- basında ---------- */
/* Eski çalışmalar-içi basın bloğu (.basin-yil / .basin-oge) kaldırıldı:
   haberler artık /basinda-biz sayfasında, sayfa-basinda-biz.css ile
   çiziliyor. Buradaki `.basin-oge { grid-template-columns: 11rem 1fr }`
   yeni kartı 176px'e sıkıştırıyordu — ölçüldü, başlıklar tek kelimeye
   düşmüştü. .basin-yil hiçbir betikte üretilmiyor. */

/* ---------- iletişim ---------- */
.iletisim-duzen { display: grid; gap: clamp(2rem, 6vw, 5rem);
                  grid-template-columns: 1fr; align-items: start; }
@media (min-width: 54rem) { .iletisim-duzen { grid-template-columns: 1.15fr 0.85fr; } }

.form { display: grid; gap: var(--bos-5); }
.alan { display: grid; gap: var(--bos-2); }
.alan label { font-size: var(--ol-2xs); font-weight: 500; color: var(--metin); }
.alan input, .alan textarea, .alan select {
  width: 100%;
  background: var(--zemin-kat);
  border: 1px solid var(--cizgi);
  border-radius: var(--kose);
  padding: var(--bos-4);
  color: var(--metin);
  font-size: var(--ol-s);
  transition: border-color var(--gecis-hizli), background var(--gecis-hizli);
}
.alan textarea { min-height: 9rem; resize: vertical; }
.alan input::placeholder, .alan textarea::placeholder { color: var(--metin-silik); }
.alan input:focus, .alan textarea:focus, .alan select:focus {
  outline: none; border-color: var(--vurgu);
}
.alan-yardim { font-size: var(--ol-3xs); color: var(--metin-silik); }
.alan-hata { font-size: var(--ol-3xs); color: var(--hata); min-height: 1em; }
.alan[data-durum="hatali"] input,
.alan[data-durum="hatali"] textarea { border-color: var(--hata); }

.form-sonuc {
  padding: var(--bos-5);
  border: 1px solid var(--cizgi);
  border-radius: var(--kose);
  font-size: var(--ol-xs);
}
.form-sonuc[data-tur="basarili"] { border-color: var(--cizgi-guclu); color: var(--metin); }
.form-sonuc[data-tur="hata"] { border-color: var(--hata-cizgi); color: var(--hata); }
.form-sonuc[hidden] { display: none; }

.kunye { display: grid; gap: var(--bos-5); }
.kunye-blok { border: 1px solid var(--cizgi); border-radius: var(--kose);
              padding: var(--bos-6) var(--bos-5); }
.kunye-blok h2 { font-family: var(--yazi-baslik); font-weight: 800; font-stretch: 114%; text-transform: uppercase; letter-spacing: -0.02em;
                 font-size: var(--ol-m); margin-bottom: var(--bos-4); }
.kunye-blok dl { display: grid; gap: var(--bos-3); margin: 0; }
.kunye-blok dl > div { display: flex; justify-content: space-between;
                       gap: var(--bos-4); font-size: var(--ol-xs); }
.kunye-blok dt { color: var(--metin-silik); }
.kunye-blok dd { margin: 0; color: var(--metin-sonuk); text-align: right; }

/* ---------- iskelet yükleyici ---------- */
.iskelet { display: grid; gap: var(--bos-4); }
.iskelet span {
  display: block; height: 1em; border-radius: 2px;
  background: linear-gradient(90deg, var(--zemin-kat) 25%,
              color-mix(in srgb, var(--zemin-kat) 60%, var(--metin) 8%) 50%,
              var(--zemin-kat) 75%);
  background-size: 200% 100%;
  animation: parilti 1.4s linear infinite;
}
.iskelet span:nth-child(2) { width: 70%; }
.iskelet span:nth-child(3) { width: 45%; }
@keyframes parilti { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .iskelet span { animation: none; } }

/* ---------- 404 ----------
   Sayfa artik ana sayfayla ayni ust/alt bilgiyi tasiyor; buradaki uc parca
   yalniz hata sayfasina ozgu. Renk yok, hepsi belirtec. */
.hata-kod {
  font-family: var(--yazi-baslik);
  font-size: var(--ol-l);
  color: var(--vurgu);
  letter-spacing: 0.08em;
}

.hata-eylem {
  display: flex;
  gap: var(--bos-4);
  flex-wrap: wrap;
  margin-top: var(--bos-3);
}

.hata-yol {
  display: grid;
  gap: 0;
  border-block-start: 1px solid var(--cizgi);
}
.hata-yol a {
  display: flex;
  flex-direction: column;
  gap: var(--bos-2);
  padding-block: var(--bos-5);
  border-block-end: 1px solid var(--cizgi);
  transition: padding-inline-start var(--gecis), border-color var(--gecis);
}
.hata-yol a:hover,
.hata-yol a:focus-visible {
  padding-inline-start: var(--bos-4);
  border-color: var(--cizgi-guclu);
}
.hata-yol strong {
  font-family: var(--yazi-baslik);
  font-weight: 800;
  font-stretch: 112%;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  font-size: var(--ol-l);
  color: var(--metin);
}
.hata-yol span {
  font-size: var(--ol-xs);
  color: var(--metin-sonuk);
}
@media (min-width: 46rem) {
  .hata-yol { grid-template-columns: 1fr 1fr; column-gap: var(--bos-8); }
}

/* ---------- bos durum ----------
   Kesik cizgili kucuk kutu yerine kurulmus bir blok. Kart degil: ust cizgi
   ve bosluk hiyerarsiyi zaten kuruyor. */
.bos-durum {
  grid-column: 1 / -1;
  border-block-start: 5px solid var(--metin);
  padding-block-start: var(--bos-6);
  display: flex;
  flex-direction: column;
  gap: var(--bos-4);
  max-width: 46rem;
}
.bos-durum h2 {
  font-family: var(--yazi-baslik);
  font-weight: 800;
  font-stretch: 112%;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  line-height: 1;
  font-size: var(--ol-l);
  color: var(--metin);
}
.bos-durum p {
  color: var(--metin-sonuk);
  max-width: 52ch;
}
.bos-yol {
  display: flex;
  gap: var(--bos-5);
  flex-wrap: wrap;
  margin-top: var(--bos-2);
}

/* ---------- video kartı ek ---------- */
.video-rozet {
  position: absolute; inset-block-end: var(--bos-3); inset-inline-start: var(--bos-3);
  background: var(--zemin-derin); color: var(--metin-sonuk);
  font-size: var(--ol-3xs); padding: 3px 9px; border-radius: var(--kose);
  border: 1px solid var(--cizgi);
}
.video-kart figcaption { display: flex; flex-direction: column; gap: var(--bos-2); }
.video-kart figcaption strong { color: var(--metin); font-weight: 600;
                                display: -webkit-box; -webkit-line-clamp: 2;
                                -webkit-box-orient: vertical; overflow: hidden; }
.video-bilgi { font-size: var(--ol-3xs); color: var(--metin-silik); }
.video-kart figcaption a { color: var(--vurgu); font-size: var(--ol-3xs); }

/* ---------- video ses düğmesi ---------- */
/* Oynat düğmesi. Otomatik oynatma kalktığı için bu düğme artık sayfanın
   asıl kumandası — büyük, ortada ve poster üstünde okunur durmalı. */
.oynat-dugme {
  position: absolute; inset: 0; display: grid; place-items: center;
  width: 100%; height: 100%; border: 0; background: transparent;
  cursor: pointer; color: #FFF;
}
.oynat-dugme::before {
  content: ""; width: 3.4rem; height: 3.4rem; border-radius: 50%;
  background: rgb(20 19 16 / 0.55); border: 1px solid rgb(255 255 255 / 0.55);
  backdrop-filter: blur(3px); transition: transform 0.18s ease, background 0.18s ease;
}
.oynat-dugme svg { position: absolute; width: 1.5rem; height: 1.5rem;
  fill: currentColor; translate: 2px 0; pointer-events: none; }
.oynat-dugme:hover::before { background: var(--vurgu); transform: scale(1.06); }
.oynat-dugme:focus-visible { outline: 2px solid var(--vurgu); outline-offset: -4px; }
.video-kutu[data-oynuyor="evet"] .oynat-dugme { display: none; }
.video-sure {
  position: absolute; right: 0.5rem; bottom: 0.5rem; padding: 0.15em 0.5em;
  border-radius: 3px; background: rgb(20 19 16 / 0.72); color: #FFF;
  font-size: 0.72rem; font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
}
.video-kutu[data-oynuyor="evet"] .video-sure { display: none; }
@media (prefers-reduced-motion: reduce) {
  .oynat-dugme::before { transition: none; }
}

/* ---------- basında: kupür görünümü ----------
   Gazetenin sayfa görüntüsü basılmaz (telifi onların). Manşet öne çıkar,
   doğrulanmış alıntı destekler, kaynak ve bağlantı künyede durur. */
.kupur-izgara {
  display: grid; gap: var(--bos-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
}
.kupur {
  display: flex; flex-direction: column; gap: var(--bos-3);
  padding: var(--bos-5);
  background: var(--zemin-kat);
  border: 1px solid var(--cizgi);
  border-radius: var(--kose);
  transition: border-color var(--gecis), transform var(--gecis);
}
.kupur:hover { border-color: var(--cizgi-guclu); transform: translateY(-3px); }
.kupur-ust {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--bos-3); padding-bottom: var(--bos-3);
  border-bottom: 2px solid var(--cizgi-guclu);
}
.kupur-kaynak {
  font-family: var(--yazi-baslik); font-size: var(--ol-s);
  letter-spacing: -0.01em; color: var(--vurgu);
}
.kupur-ust time { font-size: var(--ol-3xs); color: var(--metin-silik); white-space: nowrap; }
.kupur-manset {
  font-family: var(--yazi-baslik); font-weight: 500;
  font-size: var(--ol-l); line-height: 1.14; letter-spacing: -0.015em;
  text-wrap: balance;
}
.kupur-manset a { color: inherit; }
.kupur:hover .kupur-manset a { color: var(--vurgu); }
.kupur-alinti {
  font-family: var(--yazi-makale); font-size: var(--ol-xs); line-height: 1.55;
  color: var(--metin-sonuk); border-left: 2px solid var(--cizgi);
  padding-left: var(--bos-4); margin: 0;
}
.kupur-konu {
  margin-top: auto; align-self: flex-start;
  font-size: var(--ol-3xs); color: var(--metin-silik);
  border: 1px solid var(--cizgi); border-radius: 99px; padding: 2px 9px;
}


/* BASIN KÜPÜRÜ — haberin kendi manşet görseli.
   Görsel bağlantısı aria-hidden + tabindex="-1": hemen altındaki manşet
   zaten aynı adrese giden odaklanabilir bağlantı, ikisi de sekmede
   durursa ekran okuyucu aynı haberi iki kez okur. */
.kupur--gorselli { padding-top: 0; overflow: hidden; }
.kupur-gorsel { display: block;
  /* Kartın yan dolgusunu iptal eder — görsel kenara kadar taşar. */
  margin: 0 calc(-1 * var(--bos-5)) var(--bos-4);
  aspect-ratio: 16 / 9; overflow: hidden; background: var(--zemin-derin); }
.kupur-gorsel img { width: 100%; height: 100%; object-fit: cover;
  filter: var(--gorsel-suzgec);
  transition: transform 0.5s cubic-bezier(.22,1,.36,1); }
.kupur--gorselli:hover .kupur-gorsel img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
  .kupur-gorsel img { transition: none; }
  .kupur--gorselli:hover .kupur-gorsel img { transform: none; }
}

/* ================= SON İKİ YILDA NE YAPILDI =================
   Sayılar tekrarlı (aynı yere ikinci gidiş ayrı sayılır); her başlığın
   altında o faaliyete ait fotoğraf ve video, her birinin altında da kendi
   açıklaması durur — hangi karenin neyle ilgili olduğu okuyana görünsün. */
.faaliyet-kapsam {
  max-width: 54ch; margin-bottom: var(--bos-6);
  color: var(--metin-silik); font-size: var(--ol-xs); line-height: 1.55;
}
/* Ozet sayaci SERIT: onceki hal uc ayri kart, her birinin ustunde 2px
   cizgi ve 4rem rakam vardi; ekranin ucte birini yiyordu (patron
   bildirdi). Artik tek satir, cizgisiz, rakam ile etiket yan yana. */
.ozet-izgara {
  display: flex; flex-wrap: wrap;
  gap: var(--bos-3) clamp(1.75rem, 5vw, 3.5rem);
  align-items: baseline;
  margin-block-end: var(--bos-6);
}
.ozet-kart {
  display: flex; align-items: baseline; gap: var(--bos-3);
  padding: 0; border: 0;
}
.ozet-sayi {
  font-family: var(--yazi-baslik); font-weight: 400;
  font-size: var(--ol-l); line-height: 1;
  letter-spacing: -0.02em; color: var(--vurgu);
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.ozet-ad {
  font-family: var(--yazi-govde); font-weight: 600;
  font-size: var(--ol-3xs); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--metin-sonuk); margin: 0;
}

.faaliyet { padding-block: var(--bolum-bos); border-top: 1px solid var(--cizgi); }
.faaliyet:first-of-type { border-top: 0; padding-top: 0; }
.faaliyet-bas {
  display: grid; grid-template-columns: minmax(7rem, 10rem) 1fr;
  gap: var(--bos-5); align-items: baseline; margin-bottom: var(--bos-5);
}
.faaliyet-sayi {
  font-family: var(--yazi-baslik); font-weight: 400;
  font-size: clamp(2.4rem, 5vw, 3.4rem); line-height: 0.9;
  color: var(--vurgu); font-variant-numeric: tabular-nums;
}
.faaliyet-sayi span {
  display: block; font-family: var(--yazi-govde); font-size: 0.7rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--metin-silik); margin-top: var(--bos-2);
}
.faaliyet-bas h2 { font-family: var(--yazi-baslik); font-weight: 400;
  font-size: var(--ol-l); line-height: 1.12; }
.faaliyet-not { margin-top: var(--bos-3); max-width: 56ch;
  color: var(--metin-sonuk); font-size: var(--ol-xs); line-height: 1.55; }

.faaliyet-dokum {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0 var(--bos-5); list-style: none; margin: 0 0 var(--bos-5); padding: 0;
}
.faaliyet-dokum li {
  display: flex; justify-content: space-between; gap: var(--bos-3);
  padding-block: var(--bos-2); border-bottom: 1px solid var(--cizgi);
  font-size: var(--ol-xs);
}
.dokum-sayi { font-variant-numeric: tabular-nums; color: var(--vurgu); font-weight: 600; }

.kanit-izgara {
  display: grid; gap: var(--bos-4);
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.kanit-kare { margin: 0; display: flex; flex-direction: column; gap: var(--bos-2); }
.kanit-kare img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  background: var(--zemin-derin); filter: var(--gorsel-suzgec);
}
.kanit-kare figcaption {
  font-size: 0.76rem; line-height: 1.45; color: var(--metin-silik);
  display: flex; flex-direction: column; gap: 0.15rem;
}
.kanit-tarih { color: var(--vurgu); font-variant-numeric: tabular-nums; }
.kanit-video { position: relative; display: block; }
.kanit-oynat {
  position: absolute; inset: 0; display: grid; place-items: center;
}
.kanit-oynat svg {
  width: 2.2rem; height: 2.2rem; fill: #FFF;
  filter: drop-shadow(0 2px 8px rgb(10 9 8 / 0.6));
}
.kanit-yok { color: var(--metin-silik); font-size: var(--ol-xs); font-style: italic; }

.soz-izgara {
  display: grid; gap: var(--bos-5);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.soz-kart {
  margin: 0; padding-left: var(--bos-4); border-left: 2px solid var(--vurgu);
}
.soz-kart p { font-family: var(--yazi-makale); font-size: var(--ol-s);
  line-height: 1.5; color: var(--metin); }
.soz-kart cite { display: block; margin-top: var(--bos-3); font-style: normal;
  font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--metin-silik); }

@media (max-width: 40rem) {
  .faaliyet-bas { grid-template-columns: 1fr; gap: var(--bos-3); }
}

/* ================= GAZETE ================= */
.gazete-izgara {
  display: grid; gap: var(--bos-5);
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.gazete-sayfa { margin: 0; display: flex; flex-direction: column; gap: var(--bos-2); }
.gazete-sayfa a {
  display: block; border: 1px solid var(--cizgi); background: var(--zemin-kat);
  box-shadow: var(--golge-yakin); transition: transform 0.25s ease, border-color 0.25s ease;
}
.gazete-sayfa a:hover { transform: translateY(-3px); border-color: var(--vurgu); }
.gazete-sayfa a:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 3px; }
.gazete-sayfa img { display: block; width: 100%; height: auto; }
.gazete-sayfa figcaption {
  font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--metin-silik);
}
@media (prefers-reduced-motion: reduce) {
  .gazete-sayfa a { transition: none; }
  .gazete-sayfa a:hover { transform: none; }
}

/* ================= KİMDİR — künye ================= */
.kunye-liste { display: grid; gap: 0; margin: 0; max-width: 46rem; }
.kunye-liste > div {
  display: grid; grid-template-columns: minmax(9rem, 15rem) 1fr;
  gap: var(--bos-4); align-items: baseline;
  padding-block: var(--bos-3); border-top: 1px solid var(--cizgi);
}
.kunye-liste > div:first-child { border-top: 0; }
.kunye-liste dt {
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--metin-silik); font-weight: 600;
}
.kunye-liste dd { margin: 0; font-size: var(--ol-s); color: var(--metin); }
.kunye-eksik dd { color: var(--metin-silik); }
.kunye-not {
  margin-top: var(--bos-4); max-width: 46rem;
  font-size: var(--ol-xs); color: var(--metin-silik); font-style: italic;
}
@media (max-width: 40rem) {
  .kunye-liste > div { grid-template-columns: 1fr; gap: var(--bos-1); }
}

/* ================= MESELELER — sorun / öneri ================= */
.mesele { padding-block: var(--bos-6); border-top: 1px solid var(--cizgi); }
.mesele:first-of-type { border-top: 0; padding-top: 0; }
.mesele-bas {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: var(--bos-3); margin-bottom: var(--bos-4);
}
.mesele-bas h3 { font-family: var(--yazi-baslik); font-weight: 400;
  font-size: var(--ol-m); }
.mesele-sayac { display: flex; gap: var(--bos-3); }
.mesele-sayac span {
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--metin-silik); font-variant-numeric: tabular-nums;
}
.mesele-liste { list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--bos-4); }
.mesele-madde {
  padding-left: var(--bos-4); border-left: 2px solid var(--cizgi);
}
.mesele-cumle {
  font-size: var(--ol-xs); line-height: 1.55; margin-bottom: var(--bos-2);
}
.mesele-cumle--sorun { color: var(--metin); }
.mesele-cumle--cozum { color: var(--metin); }
.mesele-etiket {
  display: inline-block; margin-right: 0.55em; padding: 0.1em 0.5em;
  font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase;
  border-radius: 2px; vertical-align: 0.12em; font-weight: 700;
}
.mesele-cumle--sorun .mesele-etiket {
  background: var(--hale); color: var(--vurgu);
}
.mesele-cumle--cozum .mesele-etiket {
  background: var(--cizgi-guclu); color: var(--zemin);
}
.mesele-kaynak { font-size: 0.72rem; color: var(--metin-silik); }
.mesele-kaynak a { color: var(--metin-silik); text-decoration: underline;
  text-underline-offset: 2px; }
.mesele-kaynak a:hover { color: var(--vurgu); }

/* ---------- küçük ve ortalı sayfa başlığı ----------
   Galeri/Video gibi içeriğin öne çıktığı sayfalarda dev başlık ekranın
   yarısını yiyordu. Burada başlık içeriği tanıtır, sahiplenmez. */
.sayfa-bas-kucuk { padding-block: clamp(4.5rem, 3.5rem + 3vw, 6.5rem) var(--bos-7); }
.sayfa-bas-kucuk .sayfa-bas-ic { align-items: center; text-align: center; }
.sayfa-bas-kucuk .baslik-1 {
  font-size: clamp(1.9rem, 1.4rem + 2vw, 3.2rem);
  max-width: none;
}
.sayfa-bas-kucuk .govde { max-width: 46ch; margin-inline: auto; }

/* ---------- öne çıkan kareler şeridi ----------
   Erhun Karakuş’un bizzat bulunduğu kareler; yatay kaydırılır. */
.bolum-serit { padding-block: var(--bos-6) var(--bos-4); }

/* Serit KAP genisligindedir: patron "Erhun'la baslayip gece/gunduz
   dugmesiyle biten mesafe" dedi. Onceki hal kabi asip kenardan kenara
   gidiyordu. Bu yuzden .bolum-serit > .kap ezmesi KALDIRILDI. */
.serit-kaydir {
  overflow: hidden;
  /* Tek maske katmani: iki katman + mask-composite Chrome'da maskeyi
     tamamen bosaltiyor (CLAUDE.md tuzagi). */
  mask-image: linear-gradient(to right, transparent, black 3%, black 97%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 3%, black 97%, transparent);
}
.serit-ray {
  display: flex; gap: var(--bos-4); width: max-content;
  will-change: transform;
}

/* Azaltilmis harekette bant durur; ziyaretci elle kaydirir. */
.serit-kaydir.serit--elle { overflow-x: auto; scrollbar-width: thin; }
.serit-kaydir.serit--elle .serit-ray { will-change: auto; }

.serit-kare {
  position: relative; margin: 0; overflow: hidden; flex: none;
  border-radius: var(--kose);
  background: var(--zemin-kat); border: 1px solid var(--cizgi);
  cursor: zoom-in;
  /* Kutunun orani = GORUNTUNUN orani (--oran, JS'te en/boy'dan gelir).
     Boylece object-fit: cover hicbir yeri kirpmaz. Onceki sabit
     yukseklik + 94vw genislik dikey karelerin ust/altini kesiyordu. */
  height: clamp(13rem, 38svh, 26rem);
  aspect-ratio: var(--oran, 3 / 2);
}
.serit-kare img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--gecis);
}
.serit-kare:hover img { transform: scale(1.03); }
.serit-kare figcaption {
  position: absolute; inset-inline: 0; inset-block-end: 0;
  padding: var(--bos-7) var(--bos-4) var(--bos-3);
  font-size: var(--ol-3xs); line-height: 1.4;
  /* Fotografin uzerindeki koyu gecisin ustunde duruyor; iki temada da
     ayni. Belirtec degil, `.film` ile ayni gerekce (Kural 3 istisnasi). */
  color: white;
  background: linear-gradient(to top, rgb(0 0 0 / 0.78), transparent);
}