/* ═══════════════════════════════════════════════════════════════════════════
   EDİTORYAL-LACİVERT — ortak tema
   Kimlik kaynağı: /DESIGN.md (A2). Buradaki her değer oradan gelir; yeni bir
   renk/yarıçap/süre gerekiyorsa önce DESIGN.md güncellenir.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* B1: saf #ffffff / #000000 kullanılmaz; her nötr lacivert tint taşır */
  --yuzey:       #fcfdff;
  --yuzey-2:     #eef2fa;
  --lacivert:    #0f2f63;
  --lacivert-2:  #0a2450;
  --metin:       #0f2f63;
  --metin-ters:  #f2f6fd;
  --aksan:       #2563c9;
  --odak:        #5790e6;
  --etiket-ters: #8fb2ee;
  --hayalet:     #d7dae1;
  --cizgi:       rgba(15, 47, 99, 0.10);
  --cizgi-ters:  rgba(242, 246, 253, 0.16);

  /* C3 — İKİ yarıçap kararı, gerekçesi DESIGN.md'de:
     bölüm levhaları iri yarıçapla "sayfa içinde sayfa" olur,
     içerik görselleri daha küçük yarıçapla levhanın İÇİNDE durur. */
  --r-bolum:  2rem;
  --r-gorsel: 1.25rem;
  --r-pill:   2rem;

  /* E2 — gölge siyah opak değil, zemin tonunda ve yarı saydam */
  --golge: 0 18px 44px -26px rgba(15, 47, 99, 0.42);

  /* D — hareket dili */
  --cikis: cubic-bezier(0.16, 1, 0.3, 1);
  --yumusak: cubic-bezier(0.2, 0.9, 0.2, 1);
}

/* ═══ ADAPTİF REM IZGARASI (1920 tabanı) ═══
   Ham vw değerleri yalnız kırılma noktasının üst sınırında 16px verir; aralık içinde
   kök boyut düşerdi (1496px'te gövde 12.47px ölçüldü). A4 kapısı (gövde ≥16px) pazarlık
   konusu olmadığı için kök boyuta alt sınır konuldu; oranlar korunur. */
html { font-size: 16px; }
@media (max-width: 1920px) { html { font-size: max(0.833333vw, 16px); } }
@media (max-width: 1440px) { html { font-size: max(1.111111vw, 16px); } }
@media (max-width: 1024px) { html { font-size: max(1.5625vw, 16px); } }
@media (max-width: 640px)  { html { font-size: max(4.444444vw, 16px); } }

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

body {
  margin: 0;
  padding: 0.75rem;                 /* KART 1 — inset */
  background: var(--yuzey);
  color: var(--metin);
  font-family: 'Onest', system-ui, sans-serif;
  font-weight: 400;
  font-size: 1rem;                  /* A4 */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, ol, figure, address, blockquote { margin: 0; }
ul { list-style: none; padding: 0; }

/* E3 — odak halkası her interaktif öğede */
:focus-visible { outline: 2px solid var(--odak); outline-offset: 2px; border-radius: 0.25rem; }

/* D7 — reduced-motion (CSS tarafı; JS tarafı Temel.astro içinde) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════ ATLAMA BAĞLANTISI ═══════════ */
.atla {
  position: fixed; top: -5rem; left: 1rem; z-index: 110;
  background: var(--lacivert); color: var(--metin-ters);
  padding: 0.85rem 1.25rem; border-radius: 0.5rem; font-weight: 500;
  min-height: 44px; display: inline-flex; align-items: center;
}
.atla:focus-visible { top: 1rem; }

/* ═══════════ ÜST BAR ═══════════ */
.ust {
  /* Sabit konumda sol+sağ verilip max-width konulunca `margin-inline: auto` barı
     ortalar: geniş ekranda uzayıp gitmez, dar ekranda insete oturur. */
  position: fixed; top: 0.75rem; left: 2.5rem; right: 2.5rem; z-index: 60;
  max-width: 76rem; margin-inline: auto;
  display: flex; align-items: center; gap: 0;
  padding: 0.5rem 1rem;
  border-radius: var(--r-pill);
  background: rgba(252, 253, 255, 0.86);
  backdrop-filter: blur(14px);
  border: 1px solid var(--cizgi);
  box-shadow: var(--golge);
  /* Üst bar tipografisi: Anton, tamamı büyük harf. Anton'un tek ağırlığı 400'dür —
     700 verilirse tarayıcı sahte kalın üretir, o yüzden ağırlık burada 400'e sabitlenir. */
  font-family: 'Anton', 'Onest', system-ui, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}
/* Perde YALNIZ anasayfada var; orada üst bar perde kalkınca girer (D1 — ease-out).
   Diğer sayfalarda beklemek anlamsız olurdu, bar ilk karede yerindedir. */
body.perdeli .ust { opacity: 0; transform: translateY(-0.75rem); }
body.perdeli .ust.ready {
  opacity: 1; transform: none;
  transition: opacity 600ms var(--cikis), transform 600ms var(--yumusak);
}

/* Marka artık yazı değil, logo: saydam zeminli PNG, rengi lacivert olarak gömülü
   (kaynak dosya koyu gri JPEG'di; luminans alfaya çevrildi). */
.marka { display: inline-flex; align-items: center; min-height: 44px; padding: 0.3rem 0; }
.marka img { height: 2.4rem; width: auto; }

/* Beş başlık sıkı bir küme olarak barın ortasında durur; nav orta alanı komple
   kapladığı için artan boşluk sağa ve sola eşit dağılır (marka ve ikonlar dengede). */
.nav { display: flex; flex: 1; justify-content: center; gap: 0.35rem; font-size: 1.0625rem; }
.nav a {
  position: relative; display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 0.7rem; font-weight: 400; opacity: 0.85;
  transition: opacity 260ms var(--yumusak);
}
.nav a::after {
  content: ''; position: absolute; left: 0.7rem; right: 0.7rem; bottom: 0.65rem;
  height: 1px; background: var(--aksan); transform: scaleX(0); transform-origin: left;
  transition: transform 300ms var(--yumusak);
}
/* Bulunulan sayfa: aksan çizgisi kalıcı — hover ile aynı dil, farklı sebep */
.nav a[aria-current='page'] { opacity: 1; }
.nav a[aria-current='page']::after { transform: scaleX(1); }

/* ── Açılır menü grubu ("Anılarımız") ──
   Açılma CSS ile: imleçte :hover, klavyede :focus-within. JS yalnız aria-expanded'ı
   senkronlar ve Escape'te data-kapali basar (bkz. Temel.astro). */
.nav-grup { position: relative; display: inline-flex; }
.nav-tetik {
  position: relative; display: inline-flex; align-items: center; gap: 0.45rem;
  min-height: 44px; padding: 0 0.7rem; font-weight: 400; opacity: 0.85;
  border: 0; background: transparent; color: inherit; font-family: inherit; font-size: inherit; cursor: pointer;
  text-transform: uppercase; letter-spacing: inherit;
  transition: opacity 260ms var(--yumusak);
}
.nav-tetik::after {
  content: ''; position: absolute; left: 0.7rem; right: 0.7rem; bottom: 0.65rem;
  height: 1px; background: var(--aksan); transform: scaleX(0); transform-origin: left;
  transition: transform 300ms var(--yumusak);
}
.nav-tetik[aria-current='page'] { opacity: 1; }
.nav-tetik[aria-current='page']::after { transform: scaleX(1); }

.nav-ok {
  width: 0.4rem; height: 0.4rem; margin-top: -0.18rem;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(45deg); transition: transform 300ms var(--yumusak);
}

.nav-alt {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  padding-top: 0.5rem;                    /* imleç köprüsü — boşlukta kapanmasın */
  min-width: 11rem; visibility: hidden; pointer-events: none;
}
.nav-alt-kart {
  display: grid; gap: 0.15rem; padding: 0.4rem;
  background: rgba(252, 253, 255, 0.94);
  backdrop-filter: blur(14px);
  border: 1px solid var(--cizgi); border-radius: var(--r-gorsel);
  box-shadow: var(--golge);
  opacity: 0; transform: translateY(-0.4rem);
  transition: opacity 300ms var(--cikis), transform 300ms var(--cikis);
}
.nav-alt-kart a {
  display: flex; align-items: center; min-height: 44px; padding: 0 0.9rem;
  border-radius: var(--r-gorsel); white-space: nowrap; font-weight: 400; opacity: 0.85;
  transition: background 260ms var(--yumusak), opacity 260ms var(--yumusak);
}
.nav-alt-kart a::after { display: none; }        /* alt menüde çizgi yok, zemin var */
.nav-alt-kart a[aria-current='page'] { background: var(--yuzey-2); color: var(--aksan); opacity: 1; }

.nav-grup:focus-within .nav-alt { visibility: visible; pointer-events: auto; }
.nav-grup:focus-within .nav-alt-kart { opacity: 1; transform: none; }
.nav-grup:focus-within .nav-tetik { opacity: 1; }
.nav-grup:focus-within .nav-ok { margin-top: 0.12rem; transform: rotate(225deg); }

/* Escape ile kapatıldı: imleç hâlâ üstünde olsa bile kapalı kalır */
.nav-grup[data-kapali] .nav-alt { visibility: hidden; pointer-events: none; }
.nav-grup[data-kapali] .nav-alt-kart { opacity: 0; transform: translateY(-0.4rem); }

/* Üst bardaki sosyal medya şeridi — eski "Mesaj Gönder" butonunun yerinde.
   Zarf ikonu aynı başvuru kanalını taşır, kanal kaybolmaz. */
.ust-sosyal { display: flex; align-items: center; gap: 0.1rem; }
.ust-ikon {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 44px; font-size: 1.2rem; opacity: 0.8;
  border-radius: var(--r-pill);
  transition: opacity 260ms var(--yumusak), background 260ms var(--yumusak);
}

@media (hover: hover) and (min-width: 769px) {
  .nav a:hover { opacity: 1; }
  .nav a:hover::after { transform: scaleX(1); }
  .nav-tetik:hover { opacity: 1; }
  .nav-tetik:hover::after { transform: scaleX(1); }
  .nav-grup:hover .nav-alt { visibility: visible; pointer-events: auto; }
  .nav-grup:hover .nav-alt-kart { opacity: 1; transform: none; }
  .nav-grup:hover .nav-ok { margin-top: 0.12rem; transform: rotate(225deg); }
  .nav-alt-kart a:hover { background: var(--yuzey-2); opacity: 1; }
  .ust-ikon:hover { opacity: 1; background: var(--yuzey-2); }
}

/* ═══════════ SAYFA BAŞINA DÖN ═══════════ */
.yukari {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 58;
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: var(--r-pill);
  border: 1px solid var(--cizgi-ters); cursor: pointer;
  background: var(--lacivert); color: var(--metin-ters);
  box-shadow: var(--golge);
  opacity: 0; transform: translateY(0.75rem);
  transition: opacity 320ms var(--cikis), transform 320ms var(--cikis), background 260ms ease-out;
}
.yukari.acik { opacity: 1; transform: none; }
.yukari svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) and (min-width: 769px) {
  .yukari:hover { background: var(--aksan); }
}

/* ═══════════ MOBİL MENÜ ═══════════ */
.menu-dugme {
  display: none;
  align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 44px; min-width: 44px; padding: 0 0.9rem;
  border: 1px solid var(--cizgi); border-radius: var(--r-pill);
  background: transparent; color: inherit; font-family: inherit; font-size: inherit; cursor: pointer;
  text-transform: uppercase; letter-spacing: inherit;
}
.menu-dugme span { display: block; width: 1.05rem; height: 1px; background: currentColor; position: relative; }
.menu-dugme span::before, .menu-dugme span::after {
  content: ''; position: absolute; left: 0; width: 100%; height: 1px; background: currentColor;
  transition: transform 280ms var(--yumusak);
}
.menu-dugme span::before { top: -0.32rem; }
.menu-dugme span::after  { top:  0.32rem; }
.menu-dugme[aria-expanded='true'] span { background: transparent; }
.menu-dugme[aria-expanded='true'] span::before { transform: translateY(0.32rem) rotate(45deg); }
.menu-dugme[aria-expanded='true'] span::after  { transform: translateY(-0.32rem) rotate(-45deg); }

.menu-panel {
  position: fixed; inset: 4.75rem 0.75rem auto 0.75rem; z-index: 59;
  font-family: 'Anton', 'Onest', system-ui, sans-serif;
  text-transform: uppercase; letter-spacing: 0.045em;
  background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-bolum);
  box-shadow: var(--golge); padding: 0.75rem;
  display: none; gap: 0.25rem; grid-template-columns: 1fr;
}
.menu-panel.acik { display: grid; }
.menu-panel a {
  display: flex; align-items: center; min-height: 52px; padding: 0 1rem;
  border-radius: var(--r-gorsel); font-size: 1.125rem; font-weight: 400;
}
.menu-panel a[aria-current='page'] { background: var(--yuzey-2); color: var(--aksan); }
/* Mobilde açılır menü yok: grup başlığı etiket, alt bağlantılar girintili */
.menu-baslik {
  padding: 0.85rem 1rem 0.3rem; font-size: 0.8125rem; font-weight: 400;
  letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.72;
}
.menu-panel a.menu-alt { padding-left: 1.9rem; }
.menu-sosyal {
  display: flex; gap: 0.25rem; margin-top: 0.35rem;
  padding: 0.5rem 0.5rem 0.15rem; border-top: 1px solid var(--cizgi);
}
.menu-sosyal a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 44px; font-size: 1.25rem; opacity: 0.8;
  border-radius: var(--r-pill);
}

@media (max-width: 900px) {
  /* Dar ekranda bar yine sayfa insetine oturur — marka + menü düğmesi sıkışmasın */
  .ust { left: 0.75rem; right: 0.75rem; }
  .marka img { height: 1.9rem; }
  .nav { display: none; }
  .menu-dugme { display: inline-flex; }
  .ust-sosyal { display: none; }   /* dar ekranda ikonlar mobil menü panelinde */
}

/* ═══════════ DÜĞMELER ═══════════ */
.dugme {
  display: inline-flex; align-items: center; gap: 0.75rem;
  min-height: 44px; padding: 0.9rem 1.6rem; border-radius: var(--r-pill);
  background: var(--yuzey); color: var(--lacivert); font-weight: 500; white-space: nowrap;
  transition: background 300ms ease-out, color 300ms ease-out;
}
.dugme svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform 300ms var(--yumusak); }
.dugme-ters { background: var(--aksan); color: var(--metin-ters); }
.dugme-cizgi { background: transparent; color: var(--lacivert); border: 1px solid var(--cizgi); }
@media (hover: hover) and (min-width: 769px) {
  .dugme:hover { background: var(--aksan); color: var(--metin-ters); }
  .dugme:hover svg { transform: translateX(4px); }
  .dugme-ters:hover { background: var(--yuzey); color: var(--lacivert); }
  .dugme-cizgi:hover { background: var(--lacivert); color: var(--metin-ters); border-color: var(--lacivert); }
}

/* ═══════════ ORTAK TİPOGRAFİ ═══════════ */
.etiket { font-size: 0.875rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--aksan); margin-bottom: 1rem; }
.etiket-ters { color: var(--etiket-ters); }
.bolum-baslik { font-size: 4rem; line-height: 0.9; letter-spacing: -0.025em; font-weight: 500; }
.govde { max-width: 62ch; opacity: 0.82; }
.hayalet-baslik {
  font-size: 8.2vw; line-height: 0.85; letter-spacing: -0.025em;
  text-transform: uppercase; font-weight: 500;
}

/* ═══════════ SAYFA BAŞLIĞI (levha) ═══════════
   İç sayfaların ortak açılışı: lacivert levha + hayalet başlık. Anasayfadaki hero'nun
   iç sayfa karşılığıdır — perde ve fotoğraf yok, ölçek cesareti duruyor. */
.sayfa-basi {
  position: relative; overflow: hidden;
  background: var(--lacivert); color: var(--metin-ters);
  border-radius: var(--r-bolum);
  padding: 9.5rem 3rem 4rem;
  margin-bottom: 0.75rem;
}
.sayfa-basi::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 70% at 50% -10%, rgba(87, 144, 230, 0.20), transparent 62%);
}
.sayfa-basi > * { position: relative; z-index: 1; }
.sayfa-basi .bolum-baslik { text-transform: uppercase; }
.sayfa-basi .govde { opacity: 0.80; margin-top: 1.5rem; }

/* ═══════════ ÜST SEVİYE SAYFA (Haberler, İletişim) ═══════════
   Sayfa adı küçük durur; büyük olan altındaki manşet / karşılama bloğudur. Tek seviyeli
   sayfada konum yolu (breadcrumb) kullanılmaz: "Anasayfa / X" yolu bir işe yaramıyor.
   Konum yolu yalnız iki seviyeli sayfalarda (haber detayı, proje detayı) durur. */
.ust-sayfa { padding: 8rem 3rem 5rem; }
.sayfa-adi { font-size: 2.25rem; line-height: 1.1; letter-spacing: -0.02em; font-weight: 500; }
@media (max-width: 1024px) { .ust-sayfa { padding: 7rem 1.5rem 4rem; } }

/* ═══════════ İZ (breadcrumb) ═══════════ */
.iz { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.875rem; opacity: 0.78; margin-bottom: 1.5rem; }
.iz a { display: inline-flex; align-items: center; min-height: 32px; border-bottom: 1px solid transparent; }
/* Ayraç ve son öğe de aynı kutuda: yoksa bağlantıdan birkaç piksel yukarıda duruyorlardı. */
.iz > span { display: inline-flex; align-items: center; min-height: 32px; }
@media (hover: hover) and (min-width: 769px) { .iz a:hover { border-bottom-color: currentColor; } }

/* ═══════════ BÖLÜM KABI ═══════════ */
.bolum { padding: 5rem 3rem; }
.bolum-dar { max-width: 74rem; margin: 0 auto; }

/* ═══════════ HABER KARTI ═══════════ */
.haber-agi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.haber { display: grid; gap: 0.9rem; align-content: start; }
.haber-gorsel {
  border-radius: var(--r-gorsel); overflow: hidden; background: var(--yuzey-2);
  transition: box-shadow 400ms var(--yumusak);
}
.haber-gorsel img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform 800ms var(--yumusak);
}

/* Vitrin (büyük) kart — asimetrik haber düzeninin sol sütunu. */
.haber-buyuk .haber-gorsel img { aspect-ratio: 3 / 2; }
.haber-buyuk .haber-baslik { font-size: 2.25rem; line-height: 1.1; letter-spacing: -0.025em; }
.haber-buyuk .haber-ozet { font-size: 1.0625rem; line-height: 1.65; max-width: 54ch; }
.haber-tarih { font-size: 0.875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--aksan); }
.haber-baslik { font-size: 1.5rem; line-height: 1.2; letter-spacing: -0.02em; font-weight: 500; }
.haber-ozet { opacity: 0.82; max-width: 46ch; }
.haber-devam {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.9375rem; color: var(--aksan); font-weight: 500;
}
.haber-devam svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform 300ms var(--yumusak); }
@media (hover: hover) and (min-width: 769px) {
  .haber:hover .haber-devam svg { transform: translateX(4px); }
  .haber:hover .haber-gorsel { box-shadow: var(--golge); }
  /* Hover iki kanaldan: gölge + görselin çok hafif yakınlaşması (DESIGN.md). */
  .haber:hover .haber-gorsel img { transform: scale(1.045); }
  .haber:hover .haber-baslik { color: var(--aksan); }
}

/* ═══════════ REVEAL (D1: giriş ease-out) ═══════════ */
[data-reveal] {
  opacity: 0; transform: translateY(1.25rem);
  transition: opacity 620ms var(--cikis), transform 620ms var(--cikis);
}
[data-reveal].gorundu { opacity: 1; transform: none; }

/* ═══════════ DAR EKRAN ═══════════ */
@media (max-width: 1024px) {
  .bolum { padding: 3.5rem 1.5rem; }
  .sayfa-basi { padding: 8rem 1.5rem 3rem; }
  .haber-agi { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.5rem; }
}
@media (max-width: 768px) {
  .bolum-baslik { font-size: 2.75rem; }
  .hayalet-baslik { font-size: 15vw; }
  .haber-agi { grid-template-columns: 1fr; gap: 2.5rem; }
}