/* ═══ DEMO REVİZELERİ — Toplantı Raporu 01 (25.09.2026) ═══
   Her blok, asıl projede taşınacağı dosyayı belirtir. */

/* Karar 2 — Slayt sekmeleri yazısız çizgi göstergesine dönüştü
   → src/components/Hero.astro  (.hero-kupur, .hero-kupur-ad, .hero-dolum) */
.hero .hero-kupurler { gap: .5rem; align-items: center; }
.hero .hero-kupur {
  min-height: 0; height: 4px; width: 2.5rem; padding: 0;
  border: 0; border-radius: 2px;
  background: rgb(242 246 253 / .35);
  opacity: 1;
  /* tıklama alanı erişilebilirlik için 44px kalır */
  background-clip: content-box; box-sizing: content-box;
  padding-block: 20px; margin-block: -20px;
}
.hero .hero-kupur.etkin,
.hero .hero-kupur:hover { background: rgb(242 246 253 / .35) content-box; }
.hero .hero-kupur.etkin { width: 4rem; }
.hero .hero-kupur:hover:not(.etkin) { background-color: rgb(242 246 253 / .6); }
.hero .hero-kupur-ad {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.hero .hero-dolum { background: #fff; top: 20px; bottom: 20px; border-radius: 2px; }
.hero .hero-kupur { transition: width .4s ease, background-color .2s; }

/* Karar 4 — Mavi geçiş yalnız sol alttan çapraz; sağ üst yarı (başkanın durduğu alan) renksiz
   → src/components/Hero.astro  (.hero-perde ve .hero-perde:after) */
.hero .hero-perde {
  background: linear-gradient(to top right,
    rgb(10 36 80 / .95) 0%,
    rgb(10 36 80 / .8) 32%,
    rgb(10 36 80 / .35) 52%,
    rgb(10 36 80 / 0) 68%);
}
.hero .hero-perde::after { display: none; }

/* Karar 4 — Başkan sağ ortaya: fotoğraf kadrajları sağa kaydırıldı (asıl fotoğraflar gelince yeniden ayarlanacak)
   → ana sayfa hero verisi (her slaytın object-position değeri) */
/* 01.10 — 1: DSC_3924, 3: FA7A3209 (yüz x %49 → ekranda ~%67), 2: FA7A5433 (yüz x %60 → ~%67). Sol kenar kırpılabilir, degrade örter. */
/* 02.10 — 1. slayt hazır kadrajlı hero görseli (Photoshop çıktısı: "Yasin Özlü - Web Hero 1" + "… Mobil"); ölçek/kaydırma yok.
   Mobilde <picture> ile ayrı dikey görsel. → src/components/Hero.astro */
.hero .hero-kat picture { display: contents; }
.hero .hero-kat:nth-child(1) img { object-position: 50% 50% !important; transform: none; }
.hero .hero-kat:nth-child(2) img { object-position: 50% 50% !important; transform: none; } /* 02.10: hazır kadraj (Hero 4 çıktısı) */
.hero .hero-kat:nth-child(3) img,
.hero .hero-kat:nth-child(4) img,
.hero .hero-kat:nth-child(5) img { object-position: 50% 50% !important; transform: none; } /* 02.10: hazır kadraj — 3: Hemşehrim (Hero 3 çıktısı), 4: Başiskele Bizim (Hero 2 çıktısı) */
.hero .hero-gorsel, .hero .hero-kat { overflow: hidden; }
.hero .hero-perde { z-index: 1; }

/* Karar 6 — Özgeçmişte ilk paragraf diğerleriyle aynı biçimde (başlık gibi durmasın)
   → src/pages/ozgecmis.astro  (.metin:first-child kuralı silinir) */
.ozgecmis-metin .metin:first-child { font-size: 1.125rem; line-height: 1.75; opacity: .88; }

/* Karar 7 — Özgeçmiş metni iki yana yaslı; boşluklar açılmasın diye Türkçe heceleme açık
   → src/pages/ozgecmis.astro  (.metin) */
.ozgecmis-metin .metin { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }

/* İş 6 — Özgeçmiş sayfa başlığı biraz yukarıda (levhanın üst boşluğu azaldı)
   → src/pages/ozgecmis.astro  (yalnız bu sayfa için .sayfa-basi dolgusu) */
/* İş 6 — "Millet Bahçesi ve Vadi" künye satırı HTML'den kaldırıldı → src/pages/ozgecmis.astro */

/* ═══ 28.09 kullanıcı geri bildirimi ═══ */

/* Header üst kenara yapışık durmasın: sayfa çerçevesindeki beyaz boşluk kadar içeride
   → src/styles/tema.css  (.ust { top }) — tüm sayfalar */
.ust { top: 1.5rem; }
@media (max-width: 1024px) { .ust { top: 1.25rem; } }

/* Özgeçmiş sayfası tam genişlikte değil: levha ve içerik header genişliğinde, ortada
   → src/pages/ozgecmis.astro */
main:is(:has(.ozgecmis-duzen), :has(.oh-hikaye)) .sayfa-basi {
  /* header'dan her yanda 0.75rem geniş: header levhanın içinde, çerçeve boşluğu kadar içeride durur */
  max-width: calc(76rem + 1.5rem); margin-inline: auto;
  text-align: center;
  padding: 7.5rem 2rem 3rem;
}
main:is(:has(.ozgecmis-duzen), :has(.oh-hikaye)) .ozgecmis-duzen {
  max-width: 68rem; margin-inline: auto;
  padding-inline: 2rem;
}
main:is(:has(.ozgecmis-duzen), :has(.oh-hikaye)) .sayfa-basi .govde { margin-inline: auto; }
/* Fotoğraf metinle birlikte kayar, ekranda kalır */
main:is(:has(.ozgecmis-duzen), :has(.oh-hikaye)) .ozgecmis-yan { position: sticky; top: 7.5rem; }
main:is(:has(.ozgecmis-duzen), :has(.oh-hikaye)) .ozgecmis-metin .metin { max-width: none; }

/* İş 4 — Özgeçmiş portresi (özgeçmiş sayfası + ana sayfa özgeçmiş bölümü): dekupe fotoğraf,
   lacivert panel üzerinde; baş panelden hafif taşar
   → src/pages/ozgecmis.astro (.portre), src/pages/index.astro (.ozgecmis-gorsel) + src/assets/img/ozlu-dekupe.png */
main:is(:has(.ozgecmis-duzen), :has(.oh-hikaye)) .portre,
.mektup-bolum .portre {
  position: relative; overflow: visible;
  background: none; box-shadow: none;
  margin-top: 3rem;                         /* taşan baş için yer */
  aspect-ratio: 4 / 5;
  display: flex; align-items: flex-end; justify-content: center;
  /* alt köşeler yuvarlak kesilir, üstte taşmaya izin verilir */
  clip-path: inset(-4rem 0 0 0 round 0 0 var(--r-bolum) var(--r-bolum));
}
main:is(:has(.ozgecmis-duzen), :has(.oh-hikaye)) .portre::before,
.mektup-bolum .portre::before {
  content: ""; position: absolute; inset: 0;
  border-radius: var(--r-bolum);
  background:
    radial-gradient(90% 70% at 50% 35%, rgb(87 144 230 / .35), transparent 70%),
    var(--lacivert);
  box-shadow: var(--golge);
}
main:is(:has(.ozgecmis-duzen), :has(.oh-hikaye)) .portre img.portre-dekupe,
.mektup-bolum .portre img.portre-dekupe {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 112%; max-width: none; height: auto;
  flex: none; aspect-ratio: auto;
  object-fit: contain;
  filter: drop-shadow(0 18px 30px rgb(6 22 52 / .35));
}

/* Karar 9 — "← Merhaba sayfasına dön" metin bağlantısı kalktı; yerine başlık levhasında geri oku
   → src/components/GeriOk.astro (yeni) + src/pages/ozgecmis.astro */
.sayfa-basi .geri-ok {
  position: absolute; z-index: 2;
  left: 2rem; top: 7.5rem;
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgb(242 246 253 / .35);
  color: var(--metin-ters);
  transition: background .25s, border-color .25s, transform .25s;
}
.sayfa-basi .geri-ok svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sayfa-basi .geri-ok:hover { background: rgb(242 246 253 / .12); border-color: rgb(242 246 253 / .6); transform: translateX(-3px); }
.sayfa-basi .geri-ok:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (max-width: 1024px) { .sayfa-basi .geri-ok { left: 1rem; top: 6.5rem; width: 44px; height: 44px; } }

/* Karar 10 — Toplam fotoğraf sayısı gösterilmez. "48 / 189 fotoğraf" satırı yalnız sonsuz yükleme
   işaretçisi olarak kalır (metni yok); ana sayfadaki buton "Tüm fotoğraflar" oldu, meta açıklamalardan sayı çıktı
   → src/components/FotoListesi.astro, src/pages/fotograflar.astro, src/pages/index.astro */
.arsiv-son { min-height: 1px; margin: 0; }

/* Karar 11 — İletişim: "Başvuru yap" → "Başkana Yaz"; canlı "Şu an açık · 17.30'a kadar" göstergesi ve
   mesai saati notları kaldırıldı (ana sayfa iletişim kartındaki "santralimiz açık" satırı dahil)
   → src/pages/iletisim.astro (durum göstergesi + betiği), src/pages/index.astro (kanal açıklaması) */

/* Yapılmayacaklar 4 — Merhaba sayfasının başındaki manzara banner'ı ("Mavisi başka, yeşili başka güzel.") kaldırıldı;
   portre dekupe fotoğrafla değişti (ortak portre stili yukarıda)
   → src/pages/merhaba.astro */
.mektup-bolum .portre { margin-top: 3rem; }
.mektup-bolum .portre img.portre-dekupe { aspect-ratio: auto; }

/* İş 10 — Mobilde "Menü" yazısı kalktı, yalnız ikonlu yuvarlak buton (yazı ekran okuyucu için kalır)
   → src/components/UstBar.astro (veya Temel.astro) — .menu-dugme */
.menu-dugme { padding: 0; width: 48px; height: 48px; border-radius: 50%; gap: 0; }
.menu-dugme span.gorunmez-metin {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; background: none;
}
.menu-dugme span.gorunmez-metin::before, .menu-dugme span.gorunmez-metin::after { content: none; }
.menu-dugme { margin-left: auto; flex: none; }
@media (max-width: 1024px) {
  /* tek sütunda fotoğraf sabitlenmez; metnin üstüne binmesin */
  main:is(:has(.ozgecmis-duzen), :has(.oh-hikaye)) .ozgecmis-yan { position: static; margin-inline: auto; width: 100%; max-width: 22rem; }
  main:is(:has(.ozgecmis-duzen), :has(.oh-hikaye)) .sayfa-basi { padding: 6.5rem 1.25rem 2.5rem; }
}

/* İş 10 — Mobilde giriş alanı: başkan üstte açıkta, mavi geçiş alttan yükselir, yazılar alta iner
   → src/components/Hero.astro (mobil @media) + her slaytın mobil kadraj değeri */
@media (max-width: 768px) {
  .hero .hero-perde {
    background: linear-gradient(to top,
      rgb(10 36 80 / .95) 0%, rgb(10 36 80 / .8) 32%, rgb(10 36 80 / .25) 55%, rgb(10 36 80 / 0) 68%);
  }
  .hero .hero-ic { align-self: end; }
  .hero .hero-kat img { transform: none !important; }
  .hero .hero-kat:nth-child(1) img { object-position: 50% 50% !important; }
  .hero .hero-kat:nth-child(2) img { object-position: 50% 50% !important; }
  .hero .hero-kat:nth-child(3) img,
  .hero .hero-kat:nth-child(4) img,
  .hero .hero-kat:nth-child(5) img { object-position: 50% 50% !important; }
}

/* 28.09 geri bildirim — Ana sayfa özgeçmiş bölümü: panel yok, dekupe fotoğraf serbest ve daha küçük;
   alt kenarı zemine yumuşak geçer; fotoğraf + metin ekranın ortasında
   → src/pages/index.astro (.ozgecmis, .ozgecmis-gorsel) */
section.ozgecmis {
  max-width: 68rem; margin-inline: auto;
  grid-template-columns: 26rem 1fr; gap: 4rem;
  align-items: end;
}
.ozgecmis .ozgecmis-gorsel {
  background: none; box-shadow: none; border-radius: 0; overflow: visible;
  position: relative;
}
/* fotoğrafın arkasında belli belirsiz bir hale — panel değil, derinlik */
.ozgecmis .ozgecmis-gorsel::before {
  content: ""; position: absolute; left: 50%; bottom: 8%; translate: -50% 0;
  width: 88%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgb(87 144 230 / .16), transparent 68%);
  z-index: -1;
}
.ozgecmis .ozgecmis-gorsel img.portre-dekupe {
  width: 100%; height: auto; aspect-ratio: auto; object-fit: contain;
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
}
.ozgecmis .ozgecmis-metin { padding-bottom: 3rem; }
@media (max-width: 1024px) {
  section.ozgecmis { grid-template-columns: 1fr; gap: 1.5rem; justify-items: center; text-align: center; }
  .ozgecmis .ozgecmis-gorsel { max-width: 20rem; }
  .ozgecmis .ozgecmis-metin { padding-bottom: 0; }
}

/* ═══ SEÇENEK DEMOLARI (karar bekliyor) ═══ */

/* Özgeçmiş başlık levhası kenardan kenara (giriş alanı gibi), daha yüksek — onaylandı 28.09 → src/pages/ozgecmis.astro */
main:is(:has(.ozgecmis-duzen), :has(.oh-hikaye)) .sayfa-basi {
  max-width: none; margin-inline: 0;
  padding: 10rem 2rem 5rem;
}
main:is(:has(.ozgecmis-duzen), :has(.oh-hikaye)) .sayfa-basi .bolum-baslik { font-size: clamp(2.75rem, 6vw, 5.5rem); }
main:is(:has(.ozgecmis-duzen), :has(.oh-hikaye)) .sayfa-basi .geri-ok { left: 2.5rem; top: 8.5rem; }
@media (max-width: 1024px) {
  main:is(:has(.ozgecmis-duzen), :has(.oh-hikaye)) .sayfa-basi { padding: 8rem 1.25rem 3.5rem; }
  main:is(:has(.ozgecmis-duzen), :has(.oh-hikaye)) .sayfa-basi .geri-ok { left: 1rem; top: 6.5rem; }
}

/* Mobil header (onaylandı, 28.09): oval değil, ekranın üstüne yapışık tam genişlik ve daha yüksek bar.
   Menü tam sayfa açılır, köşesiz (üstü header'a yapışık). Eski oval hali ?header=oval ile görülebilir.
   → src/styles/tema.css (.ust, .menu-panel @media max-width: 900px) */
@media (max-width: 900px) {
  html:not(.v-header-oval) {
    --ust-h: 4.75rem;
  }
  html:not(.v-header-oval) .ust {
    top: 0; left: 0; right: 0; max-width: none; margin: 0;
    height: var(--ust-h);
    border-radius: 0; border-width: 0 0 1px 0;
    padding: 0 1.1rem;
    background: rgb(252 253 255 / .96);
    box-shadow: 0 4px 18px rgb(10 36 80 / .08);
  }
  html:not(.v-header-oval) .marka img { height: 2.2rem; }
  html:not(.v-header-oval):has(.menu-panel.acik) .ust { background: var(--yuzey); box-shadow: none; }

  html:not(.v-header-oval) .menu-panel {
    inset: var(--ust-h) 0 0 0;
    border: 0; border-radius: 0;
    box-shadow: 0 24px 48px rgb(10 36 80 / .18);
    padding: 1rem 1.1rem 1.5rem;
    align-content: start; gap: 0;
    overflow-y: auto; overscroll-behavior: contain;
  }
  html:not(.v-header-oval) .menu-panel a:not(.menu-sosyal a):not(.menu-yaz) {
    min-height: 58px; border-radius: 0;
    border-bottom: 1px solid var(--cizgi);
    font-size: 1.25rem;
  }
  html:not(.v-header-oval) .menu-panel a[aria-current='page'] { background: none; }
  html:not(.v-header-oval) .menu-baslik { padding-top: 1.25rem; }
  html:not(.v-header-oval) .menu-sosyal { border-top: 0; margin-top: 1.25rem; justify-content: center; gap: .75rem; }
  html:not(.v-header-oval) .menu-sosyal a { background: var(--yuzey-2); border-radius: 50%; }
  /* menü açıkken sayfa arkada kaymasın */
  html:not(.v-header-oval):has(.menu-panel.acik) { overflow: hidden; }
  html:not(.v-header-oval):has(.menu-panel.acik) body { overflow: hidden; }
}

/* ═══ 28.09 — Header'da "Başkana Yaz" butonu ═══
   Zarf ikonu kalktı; sosyal ikonlar menünün sağında, en sağda kalem ikonlu lacivert "Başkana Yaz" butonu.
   Header ferah dursun diye genişletildi. Mobil menüde metin bağlantı yerine en altta aynı buton.
   → src/components/UstBar.astro (veya Temel.astro) + src/styles/tema.css */
.ust { max-width: 84rem; padding-inline: 1.25rem 0.6rem; }
.ust .nav { gap: 0.6rem; }
.ust-sosyal { margin-right: 0.9rem; }
.ust-yaz {
  display: inline-flex; align-items: center; gap: 0.55rem; flex: none;
  min-height: 48px; padding: 0 1.4rem;
  border-radius: var(--r-pill);
  background: var(--lacivert); color: #fff;
  font-size: 1rem; letter-spacing: 0.06em; white-space: nowrap;
  transition: background .25s, transform .25s;
}
.ust-yaz svg { font-size: 1.15rem; }
.ust-yaz:hover { background: var(--aksan); }
.ust-yaz:focus-visible { outline: 2px solid var(--aksan); outline-offset: 3px; }
/* orta genişlikte sıkışmasın: sosyal ikonlar mobil menüye bırakılır */
@media (max-width: 1240px) { .ust-sosyal { display: none; } }
@media (max-width: 900px) { .ust-yaz { display: none; } }

.menu-yaz {
  display: flex; align-items: center; justify-content: center; gap: 0.65rem;
  min-height: 58px; margin-top: 1rem;
  border-radius: var(--r-pill);
  background: var(--lacivert); color: #fff !important;
  font-size: 1.2rem; letter-spacing: 0.06em;
  border-bottom: 0 !important;
}
.menu-yaz svg { font-size: 1.3rem; }

/* ═══ Header ve mobil menü yazıları: sitenin gövde yazı tipi Onest, baş harfler büyük (onaylandı 28.09; eski Anton hali ?font=anton) ═══
   Kalınlık 560 (Medium ile SemiBold arası). Onest değişken yazı tipi olduğundan ek dosya gerekmez.
   → src/styles/tema.css (.ust, .menu-panel, .nav-tetik, .ust-yaz, .menu-baslik) */
html:not(.v-font-anton) .ust,
html:not(.v-font-anton) .menu-panel,
html:not(.v-font-anton) .ust .nav-tetik,
html:not(.v-font-anton) .ust .nav-alt,
html:not(.v-font-anton) .ust-yaz,
html:not(.v-font-anton) .menu-baslik {
  font-family: 'Onest', system-ui, sans-serif;
  font-weight: 560;
  text-transform: none;
  letter-spacing: -0.005em;
}
html:not(.v-font-anton) .ust .nav a,
html:not(.v-font-anton) .ust .nav-tetik { font-size: 1.0625rem; font-weight: 560; }
html:not(.v-font-anton) .ust-yaz { font-size: 1rem; }
html:not(.v-font-anton) .menu-panel a { font-size: 1.3rem; }
html:not(.v-font-anton) .menu-baslik { font-weight: 500; font-size: 0.95rem; opacity: .7; text-transform: none; }

/* 28.09 — Yeni logo (lacivert, tek parça): oranı eskisinden kısa-geniş, bu yüzden biraz daha yüksek gösterilir
   → public/logo-ozlu.png yerine yeni dosya + src/styles/tema.css (.marka img) */
.marka img { width: 200px; height: auto; }
@media (max-width: 900px) { html:not(.v-header-oval) .marka img, .marka img { width: 200px; height: auto; } }
/* Logo sol kenara yapışık durmasın */
.marka { margin-left: 0.75rem; }
@media (max-width: 900px) { .marka { margin-left: 0.4rem; } }

/* 28.09 — Giriş alanında her slayt: büyük ana başlık + hemen altında bir tık küçük alt başlık.
   Alttaki küçük açıklama şeridi (çizgi + paragraf) yok. Alt başlık her ekranda ana başlığın ~%40'ı kadar büyük kalır.
   → src/components/Hero.astro (+ slayt verisi) */
.hero .hero-altbaslik {
  font-size: clamp(1.2rem, 1.6vw, 1.6rem) !important;
  line-height: 1.4; font-weight: 400; letter-spacing: -0.005em;
  max-width: 40ch; margin-top: 1.25rem; opacity: .95;
  text-transform: none;
}
.hero .hero-tagline-buyuk + .hero-altbaslik { margin-top: 1.5rem; }
@media (max-width: 768px) { .hero .hero-altbaslik { font-size: 1.15rem !important; max-width: none; } }
.hero .hero-baslik + .hero-altbaslik { margin-top: 0.75rem; }

/* ═══ İş 9 / Açık konu 1 (onaylandı 28.09) — Büyük harfle yazılan başlıklar artık her kelimenin baş harfi büyük
   ("Yedi Yılda", "Güzel İşler’e Devam…", "M. Yasin Özlü", "Anılarımız"). html lang="tr" sayesinde i/İ doğru.
   → src/components/Hero.astro (.hero-baslik), src/styles/tema.css (.sayfa-basi .bolum-baslik, .hayalet-baslik) */
:is(.hero-baslik, .hero-tagline-buyuk, .sayfa-basi .bolum-baslik, .hayalet-baslik) {
  text-transform: capitalize !important; letter-spacing: -0.03em;
}
/* ═══ Karar 8 / İş 11 (onaylandı 28.09) — Merhaba sayfasında özgeçmiş, seslenişin (imzanın) hemen altında ═══
   → src/pages/merhaba.astro (özgeçmiş bölümü eklenir; /ozgecmis ayrı sayfa olarak kalabilir ya da buraya yönlenir) */
.mb-ozgecmis {
  display: grid; grid-template-columns: 18rem 1fr; gap: 4rem;
  max-width: 68rem; margin: 2rem auto 5rem; padding: 4rem 2rem 0;
  border-top: 1px solid var(--cizgi);
}
.mb-ozg-yan { position: sticky; top: 7.5rem; align-self: start; }
.mb-etiket { font-size: .8125rem; letter-spacing: .2em; text-transform: uppercase; color: var(--aksan); margin-bottom: .9rem; }
.mb-ozg-baslik { font-size: 2.5rem; line-height: 1.05; letter-spacing: -0.025em; font-weight: 500; color: var(--lacivert); }
.mb-ozg-unvan { margin-top: .9rem; opacity: .7; line-height: 1.5; }
.mb-metin { font-size: 1.125rem; line-height: 1.75; margin-bottom: 1.4rem; text-align: justify; hyphens: auto; opacity: .9; }
.izgara .yazi-bag { display: none; }
.izgara { max-width: 68rem; margin-inline: auto; }
@media (max-width: 900px) {
  .mb-ozgecmis { grid-template-columns: 1fr; gap: 1.5rem; padding: 3rem 1.25rem 0; }
  .mb-ozg-yan { position: static; }
}

/* ═══ İş 7 (onaylandı 28.09) — Güzel İşler: solda sabit "7 yıl Güzel İşler yolunda" rozeti,
   sağda sürekli kayan kartlar. İmleç bir kartta: o kart öne büyür, diğerleri bulanıklaşır; kenarlar yumuşak silinir.
   → src/components/IslerSeridi.astro (yeni) + src/pages/index.astro */
section.isler { display: none; }
.isler-kayan {
  display: grid; grid-template-columns: minmax(14rem, 20rem) 1fr; align-items: center; gap: 1rem;
  margin: 0.75rem; padding: 4.5rem 0 4.5rem 3.5rem;
  border-radius: var(--r-bolum); background: var(--yuzey-2, #eef2f8);
  overflow: hidden;
}
.ks-sol { position: relative; z-index: 3; display: grid; justify-items: center; gap: 1.75rem; }
.ks-rozet { width: 100%; max-width: 17rem; height: auto; filter: drop-shadow(0 14px 26px rgb(10 36 80 / .18)); }
.ks-tumu { background: #fff; }
.ks-tumu svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.7; }

.ks-serit {
  position: relative; overflow: hidden; padding: 2.5rem 0; cursor: grab; touch-action: pan-y; outline: none;
  /* kenarlarda yumuşak silinme */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 88%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 88%, transparent 100%);
}
.ks-serit.surukleniyor { cursor: grabbing; }
.ks-liste { display: flex; gap: 1.5rem; width: max-content; list-style: none; margin: 0; padding: 0 0 0 1.5rem; will-change: transform; }
.ks-kart {
  display: block; width: 24rem; border-radius: 18px; overflow: hidden; background: #fff;
  box-shadow: 0 10px 28px rgb(10 36 80 / .12);
  transition: transform .45s cubic-bezier(.2,.8,.2,1), filter .35s, opacity .35s, box-shadow .35s;
  user-select: none;
}
.ks-kart img { width: 100%; aspect-ratio: 1400 / 789; object-fit: cover; display: block; pointer-events: none; }
.ks-ad { display: block; padding: .9rem 1.1rem 1rem; font-weight: 500; color: var(--lacivert);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* odak: üzerine gelinen kart öne büyür, diğerleri bulanık */
.ks-serit:has(.ks-kart:hover) .ks-kart:not(:hover),
.ks-serit.surukleniyor .ks-kart { filter: blur(3px); opacity: .55; box-shadow: none; }
.ks-kart:hover { transform: scale(1.08); box-shadow: 0 22px 44px rgb(10 36 80 / .25); position: relative; z-index: 2; }
.ks-kart:focus-visible { outline: 3px solid var(--aksan); outline-offset: 3px; }
@media (max-width: 900px) {
  .isler-kayan { grid-template-columns: 1fr; padding: 3rem 0; gap: .5rem; }
  .ks-rozet { max-width: 12rem; }
  .ks-kart { width: 17rem; }
}

/* 28.09 — Merhaba sayfasının sol üstündeki "Merhaba" sayfa adı görünmez (ekran okuyucu için h1 olarak kalır)
   → src/pages/merhaba.astro (.sayfa-adi) */
main:has(.mektup-bolum) .sayfa-adi {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* 28.09 — Ana sayfa özgeçmiş: fotoğraf silik değil; alt kenarı Güzel İşler kutusunun (buz mavisi) tam üstüne oturur,
   hafif büyüdü (alttan sabit, yukarı doğru). Mobilde metin üstte, fotoğraf altta kutuya oturur. → src/pages/index.astro */
section.ozgecmis { padding-bottom: 0 !important; margin-bottom: 0 !important; grid-template-columns: 28rem 1fr; }
.ozgecmis .ozgecmis-gorsel { align-self: end; margin-bottom: 0; line-height: 0; }
.ozgecmis .ozgecmis-gorsel img.portre-dekupe { -webkit-mask-image: none; mask-image: none; display: block; }
.ozgecmis .ozgecmis-gorsel::before { bottom: 0; }
section.ozgecmis + .isler-kayan { margin-top: 0; }
.ozgecmis .ozgecmis-metin { align-self: center; padding-bottom: 0; }
@media (max-width: 1024px) {
  section.ozgecmis { grid-template-columns: 1fr; }
  .ozgecmis .ozgecmis-metin { order: -1; padding-bottom: 1rem; }
  .ozgecmis .ozgecmis-gorsel { max-width: 21rem; }
}

/* 28.09 — Mobilde Güzel İşler: rozet → kayan kartlar → "Güzel İşlerin tamamı" (buton şeridin altında)
   → IslerSeridi.astro (@media) */
@media (max-width: 900px) {
  .isler-kayan .ks-sol { display: contents; }
  .isler-kayan .ks-rozet { order: 1; justify-self: center; }
  .isler-kayan .ks-serit { order: 2; }
  .isler-kayan .ks-tumu { order: 3; justify-self: center; }
}

/* ═══ 28.09 ONAYLANDI — /guzel-isler yeni düzen (İş 7 devamı). Eski sayfa: /guzel-isler-eski/
   Üstte basiskele.bel.tr/projelerimiz banner'ı; sabit kategori çipleri; her başlıkta çerçeve rayı
   (varsayılan) ya da ızgara (?kart=izgara). → src/pages/guzel-isler/index.astro */
.gi-ust { margin: 0; padding: 0; background: none; }   /* kullanıcının hazırladığı görsel: üstü saydama geçer, kenardan kenara */
.gi-banner { display: block; width: 100%; height: auto; aspect-ratio: 1902 / 850; object-fit: cover; }
/* (mobil banner kuralı aşağıda yeniden tanımlandı) */
.gi-giris { max-width: 84rem; margin: 3.5rem auto 1.5rem; padding: 0 2rem; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: end; }
.gi-etiket { font-size: .8125rem; letter-spacing: .2em; text-transform: uppercase; color: var(--aksan); margin-bottom: .8rem; }
.gi-baslik { font-size: clamp(2.75rem, 5.5vw, 5rem); line-height: .95; letter-spacing: -0.03em; font-weight: 500; color: var(--lacivert); }
.gi-metin { font-size: 1.125rem; line-height: 1.6; opacity: .8; max-width: 44ch; }
.gi-cipler { position: sticky; top: 6.5rem; z-index: 40; margin: 0 auto 1rem; max-width: 84rem; padding: .6rem 2rem; }
.gi-cipler-ic { display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; padding: .45rem;
  background: rgb(252 253 255 / .9); backdrop-filter: blur(12px); border: 1px solid var(--cizgi); border-radius: var(--r-pill); box-shadow: var(--golge); }
.gi-cip { flex: none; display: inline-flex; align-items: center; gap: .45rem; min-height: 40px; padding: 0 1rem; border-radius: var(--r-pill);
  font-size: .95rem; color: var(--lacivert); white-space: nowrap; transition: background .25s, color .25s; }
.gi-cip span { font-size: .8rem; opacity: .55; }
.gi-cip:hover { background: var(--yuzey-2, #eef2f8); }
.gi-cip.etkin { background: var(--lacivert); color: #fff; }
.gi-cip.etkin span { opacity: .75; }
.gi-bolum { max-width: 84rem; margin: 0 auto; padding: 3rem 2rem 2rem; scroll-margin-top: 11rem; }
.gi-bolum-bas { display: flex; align-items: baseline; gap: 1rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--cizgi); margin-bottom: 1.5rem; }
.gi-no { font-size: .95rem; color: var(--aksan); font-variant-numeric: tabular-nums; }
.gi-bolum-bas h2 { font-size: clamp(1.6rem, 2.6vw, 2.4rem); line-height: 1.1; letter-spacing: -0.02em; font-weight: 500; color: var(--lacivert); flex: 1; }
.gi-sayi { font-size: .95rem; opacity: .6; white-space: nowrap; }

/* ── Çerçeve rayı (paylaşılan tarif): açılan çerçeve BÜYÜMEZ, genişler; görsel background-size ile yeniden kırpılır ── */
.gi-sahne { container-type: inline-size; overflow-x: auto; scrollbar-width: thin; padding-bottom: .75rem; }
/* Görseller 1400×789 (16:9). Açıkken 118% genişlik görselin kendi oranında olsun diye yükseklik = 40cqw × 1.18 ÷ 1.774 ≈ 26.6cqw.
   Kapalıyken aynı ölçek için 40×1.18÷15 ≈ 315% (tarifteki 260% geniş fotoğraflar içindi) → hiçbir şey esnemez. */
.gi-ray { display: flex; gap: .6rem; height: 26.6cqw; }
.gi-cerceve { flex: 0 0 auto; width: 15cqw; margin: 0; position: relative; border-radius: 14px; overflow: hidden;
  background: #0f2f63; transition: width .6s cubic-bezier(.22,1,.36,1); outline: none; }
.gi-cerceve > a { position: absolute; inset: 0; display: block; color: #fff; }
.gi-resim { position: absolute; inset: 0; background-repeat: no-repeat;
  background-size: 315% 100%; background-position: 50% 50%;
  filter: brightness(.74) saturate(.8);
  transition: background-size .6s cubic-bezier(.22,1,.36,1), background-position .6s cubic-bezier(.22,1,.36,1), filter .6s; }
.gi-cerceve::after { content: ""; position: absolute; inset: 40% 0 0; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: linear-gradient(to top, rgb(6 18 42 / .88), rgb(6 18 42 / 0)); }
.gi-cerceve figcaption {
  position: absolute; left: 0; bottom: 0; z-index: 1; width: 40cqw; padding: 3.5rem 1.4rem 1.2rem; white-space: nowrap;
  opacity: 0; transform: translateY(10px); transition: opacity .35s, transform .35s;
}
.gi-cerceve figcaption > strong { display: block; font-size: 1.2rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; max-width: calc(40cqw - 2.8rem); }
.gi-cerceve figcaption > span { display: block; margin-top: .3rem; font-size: .95rem; opacity: .85; overflow: hidden; text-overflow: ellipsis; max-width: calc(40cqw - 2.8rem); }
.gi-cerceve.acik { width: 40cqw; }
.gi-cerceve.acik .gi-resim { background-size: 118% 100%; background-position: 46% 50%; filter: none; }
.gi-cerceve.acik::after { opacity: 1; }
.gi-cerceve.acik figcaption { opacity: 1; transform: none; transition-delay: .14s; }
.gi-cerceve:focus-visible { box-shadow: 0 0 0 3px var(--aksan); }

/* ── Izgara görünümü (?kart=izgara) ── */
.gi-izgara { display: none; }
.v-kart-izgara .gi-sahne { display: none; }
.v-kart-izgara .gi-izgara { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; list-style: none; padding: 0; }
.gi-kart { display: block; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 10px 28px rgb(10 36 80 / .1); transition: transform .3s, box-shadow .3s; height: 100%; }
.gi-kart:hover { transform: translateY(-4px); box-shadow: 0 18px 38px rgb(10 36 80 / .18); }
.gi-kart img { width: 100%; aspect-ratio: 1400 / 789; object-fit: cover; display: block; }
.gi-kart-ad { display: block; padding: 1rem 1.2rem .3rem; font-weight: 500; font-size: 1.1rem; color: var(--lacivert); }
.gi-kart-rakam { display: block; padding: 0 1.2rem 1.2rem; font-size: .95rem; opacity: .7; }

@media (max-width: 900px) {
  .gi-giris { grid-template-columns: 1fr; padding: 0 1.25rem; margin-top: 2.5rem; }
  .gi-cipler { top: 5rem; padding: .5rem .75rem; }
  .gi-bolum { padding: 2.5rem 1.25rem 1.5rem; scroll-margin-top: 9rem; }
  .gi-ray { height: 46.6cqw; }
  .gi-cerceve { width: 22cqw; } .gi-cerceve.acik { width: 70cqw; }
  .gi-resim { background-size: 375% 100%; }
  .gi-cerceve figcaption { width: 70cqw; }
  .gi-cerceve figcaption > :is(strong, span) { max-width: calc(70cqw - 2.8rem); }
  .v-kart-izgara .gi-izgara { grid-template-columns: 1fr; }
}

/* ═══ 28.09 ONAYLANDI — /guzel-isler "akış" slaytı (varsayılan). Önceki denemeler: ?kart=ray (çerçeve rayı), ?kart=izgara.
   Soldaki kartlar net, sağdakiler bulanık. Yalnız ekranın ortasındaki başlık "etkin": 2 sn'de bir sağdaki kart netleşir
   (şerit yerinden oynamaz); 4 kart netleşince şerit her adımda bir kart sola kayar. Etkin olmayan başlık durur.
   Görsel kırpılmaz: slayt görselinin tamamı görünür (16:9). → src/pages/guzel-isler/index.astro */
.gi-sahne { display: none; }
.v-kart-ray .gi-sahne { display: block; }
.v-kart-ray .gi-akis, .v-kart-izgara .gi-akis { display: none; }

.gi-akis { --adet: 4.35; --ara: 1.25rem; container-type: inline-size; overflow: hidden; padding: .5rem 0 1rem;
  -webkit-mask-image: linear-gradient(to right, #000 82%, transparent 100%); mask-image: linear-gradient(to right, #000 82%, transparent 100%); }
.gi-akis-ray { display: flex; gap: var(--ara); list-style: none; margin: 0; padding: 0; width: max-content;
  transition: transform .9s cubic-bezier(.22,1,.36,1); will-change: transform; }
.gi-akis-ray > li { flex: 0 0 auto; width: calc((100cqw - 3 * var(--ara)) / var(--adet)); }
.gi-akis .gi-kart { box-shadow: 0 8px 22px rgb(10 36 80 / .1);
  filter: blur(5px) saturate(.7); opacity: .45; transform: scale(.97);
  transition: filter .7s ease, opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1), box-shadow .3s; }
.gi-akis li.net .gi-kart { filter: none; opacity: 1; transform: none; }
.gi-akis li.net .gi-kart:hover { transform: translateY(-4px); box-shadow: 0 18px 38px rgb(10 36 80 / .18); }
.gi-akis .gi-kart img { object-fit: contain; background: #eef2f8; }
.gi-akis .gi-kart-ad { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gi-akis .gi-kart-rakam { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Etkin başlık: ekranın ortasındaki */
.gi-bolum .gi-bolum-bas h2, .gi-bolum .gi-no { transition: color .5s, opacity .5s; }
.gi-bolum:not(.etkin) .gi-bolum-bas h2 { opacity: .45; }
.gi-bolum:not(.etkin) .gi-no { opacity: .45; }
.gi-bolum.etkin .gi-bolum-bas { border-bottom-color: var(--aksan); }
.gi-bolum-bas { transition: border-color .5s; }
/* ilerleme çizgisi: sıradaki adıma kalan süre */
.gi-bolum-bas { position: relative; }
.gi-bolum-bas::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%;
  background: var(--aksan); transform: scaleX(0); transform-origin: left; }
.gi-bolum.etkin.oynuyor .gi-bolum-bas::after { animation: gi-sure 2s linear infinite; }
@keyframes gi-sure { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (max-width: 900px) {
  .gi-akis { --adet: 1.25; --ara: 1rem; }
}

/* çip çubuğunun arkasından içerik görünmesin */
.gi-cipler { background: linear-gradient(to bottom, var(--zemin, #fbfcfe) 70%, transparent); }

/* ═══ 28.09 ONAYLANDI — /guzel-isler revize 2: oval banner, solda sabit kategori listesi, oklar + sürükleme,
   "Tümünü gör" (kategori ızgarası; sonraki başlığa geçince kapanır). */
@media (min-width: 901px) { .gi-banner { border-radius: var(--r-bolum); } }

/* Sol kategori listesi */
.gi-duzen { max-width: 90rem; margin: 0 auto; padding: 0 2rem; display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: 3rem; align-items: start; }
.gi-duzen .gi-cipler { position: sticky; top: 7.5rem; margin: 3rem 0 0; padding: 0; max-width: none; background: none; z-index: 5; }
.gi-duzen .gi-cipler-ic { flex-direction: column; overflow: visible; gap: .15rem; padding: .6rem; border-radius: 22px; }
.gi-duzen .gi-cip { justify-content: space-between; gap: .75rem; white-space: normal; text-align: left; line-height: 1.25;
  min-height: 44px; padding: .55rem .9rem; border-radius: 14px; position: relative; }
.gi-duzen .gi-cip::before { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 3px; border-radius: 2px;
  background: var(--aksan); transform: scaleY(0); transition: transform .35s; }
.gi-duzen .gi-cip.etkin::before { transform: scaleY(1); }
.gi-duzen .gi-cip-tumu { font-weight: 600; border-bottom: 1px solid var(--cizgi); border-radius: 14px 14px 6px 6px; margin-bottom: .25rem; }
.gi-icerik { min-width: 0; }
.gi-icerik .gi-bolum { max-width: none; margin: 0; padding: 3rem 0 2rem; scroll-margin-top: 7rem; }

/* Başlık sağı: sayı + Tümünü gör */
.gi-bas-sag { display: flex; align-items: center; gap: 1rem; }
.gi-tumunu-gor { display: inline-flex; align-items: center; gap: .5rem; min-height: 40px; padding: 0 1rem; border-radius: var(--r-pill);
  border: 1px solid var(--cizgi); background: #fff; color: var(--lacivert); font: inherit; font-size: .95rem; cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.gi-tumunu-gor svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform .3s; }
.gi-tumunu-gor:hover { background: var(--lacivert); color: #fff; border-color: var(--lacivert); }
.gi-tumunu-gor:hover svg { transform: translateX(3px); }
.gi-tumunu-gor[aria-expanded="true"] svg { transform: rotate(90deg); }
.gi-bolum.izgara-acik .gi-akis-kap { display: none; }
.gi-bolum.izgara-acik .gi-izgara { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; list-style: none; padding: 0; margin: 0; animation: gi-belir .5s ease; }
@keyframes gi-belir { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Oklar ve sürükleme */
.gi-akis-kap { position: relative; }
.v-kart-ray .gi-akis-kap, .v-kart-izgara .gi-akis-kap { display: none; }
.gi-ok { position: absolute; top: 34%; z-index: 3; width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; background: #fff; color: var(--lacivert);
  box-shadow: 0 8px 22px rgb(10 36 80 / .18); transition: background .25s, color .25s, opacity .25s, transform .25s; }
.gi-ok svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.9; }
.gi-ok:hover { background: var(--lacivert); color: #fff; transform: scale(1.06); }
.gi-ok-sol { left: -22px; } .gi-ok-sag { right: -6px; }
.gi-ok[disabled] { opacity: 0; pointer-events: none; }
.gi-akis { --adet: 4.2; cursor: grab; touch-action: pan-y; user-select: none; }
.gi-akis.surukleniyor { cursor: grabbing; }
.gi-akis.surukleniyor .gi-akis-ray { transition: none; }
.gi-akis img { -webkit-user-drag: none; pointer-events: none; }
/* üzerine gelinen kart netleşir */
.gi-akis li:hover .gi-kart { filter: none; opacity: 1; transform: translateY(-4px); box-shadow: 0 18px 38px rgb(10 36 80 / .18); }

@media (max-width: 900px) {
  .gi-duzen { display: block; padding: 0; }
  .gi-duzen .gi-cipler { position: sticky; top: 4.75rem; margin: 0 0 1rem; padding: .5rem .75rem;
    background: linear-gradient(to bottom, #fbfcfe 70%, transparent); z-index: 40; }
  .gi-duzen .gi-cipler-ic { flex-direction: row; overflow-x: auto; border-radius: var(--r-pill); }
  .gi-duzen .gi-cip { white-space: nowrap; border-radius: var(--r-pill); }
  .gi-duzen .gi-cip::before { display: none; }
  .gi-duzen .gi-cip-tumu { border-bottom: 0; margin: 0; }
  .gi-icerik .gi-bolum { padding: 2.5rem 1.25rem 1.5rem; scroll-margin-top: 9rem; }
  .gi-bolum-bas { flex-wrap: wrap; }
  .gi-bas-sag { width: 100%; justify-content: space-between; }
  .gi-ok { display: none; }
  .gi-akis { --adet: 1.25; }
  .gi-bolum.izgara-acik .gi-izgara { grid-template-columns: 1fr; }
}

/* Eski yatay sayfa "#yukari { display:none }" diyordu; yeni düzende "Sayfanın başına dön" butonu görünür.
   Sitenin kendi betiği bir ekran boyu inilince açar (2. başlığa gelmeden). → guzel-isler/index.astro içindeki #yukari kuralı silinir */
body:has(.gi-duzen) #yukari:not([hidden]) { display: inline-flex; }

/* ═══ 28.09 — "Aşağı kaydır" oku (ana sayfa + Güzel İşler, masaüstü + mobil)
   İlk ekranın alt ortasında; ışık halkası yayılarak yanıp söner, ok hafifçe aşağı iner.
   Tıklayınca bir sonraki bölüme kayar; aşağı inilince kaybolur.
   Not: sitenin genel "animasyonları azalt" kuralı tüm animasyonları kapatır; bu ok bilerek o kuralın dışında tutuldu (yavaş).
   → src/components/AsagiOk.astro (yeni) + src/pages/index.astro, src/pages/guzel-isler/index.astro */
.asagi-ok {
  position: absolute; left: 50%; bottom: 1.6rem; z-index: 5;
  width: 56px; height: 56px; margin-left: -28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  border: 1px solid rgb(255 255 255 / .55); background: rgb(255 255 255 / .16); color: #fff;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: opacity .45s, transform .45s, background .25s, color .25s;
}
.asagi-ok svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  animation: asagi-in 1.8s ease-in-out infinite; }
.asagi-ok::before { content: ""; position: absolute; inset: -1px; border-radius: 50%;
  box-shadow: 0 0 0 0 rgb(255 255 255 / .6); animation: asagi-isik 1.8s ease-out infinite; }
.asagi-ok:hover { background: #fff; color: var(--lacivert); }
.asagi-ok:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.asagi-ok.gizli { opacity: 0; transform: translateY(12px); pointer-events: none; }
/* açık zeminli sayfada (Güzel İşler) lacivert */
.asagi-ok.koyu { background: var(--lacivert); border-color: var(--lacivert); color: #fff; }
.asagi-ok.koyu::before { box-shadow: 0 0 0 0 rgb(16 50 105 / .5); animation-name: asagi-isik-koyu; }
.asagi-ok.koyu:hover { background: var(--aksan); border-color: var(--aksan); }
@keyframes asagi-in { 0%, 100% { transform: translateY(-3px); opacity: .75; } 50% { transform: translateY(4px); opacity: 1; } }
@keyframes asagi-isik { 0% { box-shadow: 0 0 0 0 rgb(255 255 255 / .6); } 70% { box-shadow: 0 0 0 18px rgb(255 255 255 / 0); } 100% { box-shadow: 0 0 0 0 rgb(255 255 255 / 0); } }
@keyframes asagi-isik-koyu { 0% { box-shadow: 0 0 0 0 rgb(16 50 105 / .5); } 70% { box-shadow: 0 0 0 18px rgb(16 50 105 / 0); } 100% { box-shadow: 0 0 0 0 rgb(16 50 105 / 0); } }
@media (prefers-reduced-motion: reduce) {
  .asagi-ok svg, .asagi-ok::before { animation-duration: 2.6s !important; animation-iteration-count: infinite !important; }
}
@media (max-width: 900px) { .asagi-ok { bottom: 1.1rem; width: 50px; height: 50px; margin-left: -25px; }
  .hero .asagi-ok { bottom: 3.4rem; } }
.gi-ust { position: relative; }

/* ═══ 28.09 — Mobil Güzel İşler görseli: çerçeve içinde, dikey ve büyük (neredeyse filtrelere kadar), başkan ortada ve yakın.
   Görsel yataydır; mobilde yüksekliğin %118'i kadar büyütülüp başkan (görselin ~%39'u) ortaya alınır. → src/pages/guzel-isler/index.astro (@media) */
@media (max-width: 900px) {
  .gi-ust { margin: 5.5rem .75rem 0; padding: 0; height: calc(100svh - 11.5rem); min-height: 26rem; max-height: 44rem;
    border-radius: 24px; overflow: hidden; background: linear-gradient(#cfe0f5, #86ade3); }
  /* başkanın yüzü görselde ~x %50, y %28 → kutunun ~%50 / %30'una gelir; yükseklik %150 (başkan yakın) */
  .gi-banner { position: absolute; top: -16%; left: 50%; height: 150%; width: auto; max-width: none; aspect-ratio: 1902 / 850;
    transform: translateX(-50.5%); border-radius: 0; object-fit: fill; }
  .gi-giris { margin-top: 1.75rem; }
}

/* ═══ 28.09 — Ana sayfa AÇILIŞ ANİMASYONU (≈3,2 sn) — eski perdenin (#perde) içeriği değişti
   Başkan (dekupe) solda büyük girer · kocaman baret ekranın üstünden iner · baret geçtikçe arkasından
   "Güzel İşler’e / Devam…" (Onest Bold, italik eğim, sağ üste çapraz) harf harf belirir · görüntü yukarıdan aşağıya silinir.
   Sitenin genel "animasyonları azalt" kuralı tüm animasyonları kapatır; açılış bilerek bunun dışında (!important).
   → src/pages/index.astro (perde bölümü + betiği), görseller: ozlu-dekupe, baret */
@property --kesim { syntax: '<percentage>'; inherits: false; initial-value: -30%; }
.perde.acilis { display: block; place-items: initial; color: #fff;
  --in-bas: .45s; --in-sure: 1.35s; --in-egri: cubic-bezier(.55,.05,.35,1);
  background: radial-gradient(90% 80% at 72% 30%, #2a5aa8 0%, #0f2f63 55%, #0a2147 100%); clip-path: inset(0 0 0 0); }
.perde.acilis::before { content: ""; position: absolute; inset: 0; opacity: .08; pointer-events: none;
  background-image: linear-gradient(rgb(255 255 255 / .6) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .6) 1px, transparent 1px);
  background-size: 64px 64px; -webkit-mask-image: radial-gradient(80% 80% at 70% 40%, #000 20%, transparent 75%); mask-image: radial-gradient(80% 80% at 70% 40%, #000 20%, transparent 75%); }
/* çıkış: yukarıdan aşağıya silinir */
.perde.acilis.gitti { transform: none !important; clip-path: inset(100% 0 0 0);
  transition: clip-path .65s cubic-bezier(.7,0,.2,1) !important; }

.acilis-baskan { position: absolute; left: 6vw; bottom: 0; height: 95vh; width: auto; max-width: none; z-index: 2;
  filter: drop-shadow(0 30px 60px rgb(0 0 0 / .35)); opacity: 0; transform: translateX(-14%) scale(1.04);
  animation: acilis-baskan .85s cubic-bezier(.22,1,.36,1) .1s forwards !important; }
@keyframes acilis-baskan { to { opacity: 1; transform: none; } }

.acilis-sag { position: absolute; top: 0; bottom: 0; right: 3vw; width: min(56vw, 64rem); }
.acilis-yazi { position: absolute; left: 10%; top: 13vh; z-index: 1; margin: 0;
  transform: rotate(-6deg) skewX(-11deg); transform-origin: left bottom;
  font-family: 'Onest', system-ui, sans-serif; font-weight: 700; letter-spacing: -.03em; line-height: .95; text-transform: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(var(--kesim) - 14%), transparent var(--kesim));
          mask-image: linear-gradient(to bottom, #000 calc(var(--kesim) - 14%), transparent var(--kesim));
  animation: acilis-kesim var(--in-sure) var(--in-egri) calc(var(--in-bas) + .1s) forwards !important; }
@keyframes acilis-kesim { to { --kesim: 135%; } }
.acilis-yazi > span { display: block; }
.acilis-yazi .y1 { font-size: clamp(3rem, 7.4vw, 8.8rem); }
.acilis-yazi .y2 { font-size: clamp(3.4rem, 9vw, 10.5rem); padding-left: .12em; }
.acilis-yazi .alt { margin-top: 1.1rem; font-size: clamp(.8rem, 1.05vw, 1rem); font-weight: 600; letter-spacing: .3em; text-transform: uppercase; opacity: .8; padding-left: .35em; }
.acilis-harf { display: inline-block; white-space: pre; opacity: 0; filter: blur(10px); transform: translateY(-.35em) scale(1.08);
  text-shadow: 0 0 28px rgb(160 200 255 / .9);
  animation: acilis-harf .7s cubic-bezier(.22,1,.36,1) var(--g) forwards !important; }
@keyframes acilis-harf {
  60% { opacity: 1; filter: blur(0); text-shadow: 0 0 22px rgb(160 200 255 / .8); }
  to { opacity: 1; filter: blur(0); transform: none; text-shadow: 0 0 0 rgb(160 200 255 / 0); } }

.acilis-baret { position: absolute; right: -2vw; top: 44vh; width: min(46vw, 760px); height: auto; z-index: 3;
  filter: drop-shadow(0 40px 50px rgb(0 0 0 / .45)); transform: translateY(-150vh) rotate(-10deg);
  animation: acilis-baret-in var(--in-sure) var(--in-egri) var(--in-bas) forwards,
             acilis-baret-otur .4s cubic-bezier(.3,1.6,.5,1) calc(var(--in-bas) + var(--in-sure)) forwards !important; }
@keyframes acilis-baret-in { to { transform: translateY(3vh) rotate(3deg); } }
@keyframes acilis-baret-otur { from { transform: translateY(3vh) rotate(3deg); } to { transform: translateY(0) rotate(0); } }
.acilis-golge { position: absolute; right: 4vw; top: calc(44vh + min(46vw, 760px) * .6); width: min(40vw, 660px); height: 40px; border-radius: 50%; z-index: 2;
  background: radial-gradient(rgb(0 0 0 / .4), transparent 70%); opacity: 0; transform: scaleX(.35);
  animation: acilis-golge .45s ease-out calc(var(--in-bas) + var(--in-sure) - .15s) forwards !important; }
@keyframes acilis-golge { to { opacity: 1; transform: none; } }

@media (max-width: 800px) {
  .acilis-baskan { left: 50%; height: 62vh; transform: translate(-62%, 0) scale(1.04); animation-name: acilis-baskan-m !important; }
  @keyframes acilis-baskan-m { to { opacity: 1; transform: translateX(-50%); } }
  .acilis-sag { left: 0; right: 0; width: auto; }
  .acilis-yazi { left: 7vw; top: 12vh; }
  .acilis-yazi .y1 { font-size: 11.5vw; } .acilis-yazi .y2 { font-size: 14vw; }
  .acilis-baret { top: 22vh; right: -10vw; width: 62vw; }
  .acilis-golge { display: none; }
}

/* ═══ 28.09 — ÖZGEÇMİŞ: deste hikâyesi (onaylandı)
   Paragraflar adımlara bölündü. Ekrana sabit sahne: solda fotoğraflar (Anılarımız destesi gibi) üst üste iner, sağda yıl + paragraf.
   Tek kaydırma hareketi = tek adım; geri kaydırınca son fotoğraf kalkar, paragraf öncekine döner.
   Başlık levhasında ⌄ (hikâyeye in), sahnede ⌃ (1. fotoğrafa dön).
   → src/pages/ozgecmis.astro (bölüm + betik) */
.oh-hikaye { position: relative; height: calc(var(--adim) * 70vh + 100vh); }
.oh-sahne { position: sticky; top: 0; height: 100vh; display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: 3.5rem; align-items: center;
  max-width: 88rem; margin: 0 auto; padding: 6.5rem 2.5rem 1.5rem; }
.oh-deste { position: relative; width: min(100%, 42rem); aspect-ratio: 4 / 3.3; justify-self: center; }
.oh-kart { position: absolute; inset: 2% 4% auto; margin: 0; padding: .7rem .7rem 0; background: #fbfaf6; border-radius: 6px;
  box-shadow: 0 18px 40px rgb(10 36 80 / .22); transform-origin: 50% 60%;
  transform: translate(var(--x), calc(var(--y) - 120vh)) rotate(calc(var(--r) * 3)); opacity: 0;
  transition: transform .75s cubic-bezier(.22,1,.36,1), opacity .35s !important; }
.oh-kart img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 2px; background: #e8edf5; }
.oh-kart figcaption { padding: .75rem .3rem .9rem; font-size: .95rem; color: var(--lacivert); font-weight: 500; }
.oh-kart.indi { transform: translate(var(--x), var(--y)) rotate(var(--r)); opacity: 1; }
.oh-metin { position: relative; }
.oh-sayac { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.5rem; color: var(--aksan); font-variant-numeric: tabular-nums; font-size: .95rem; }
.oh-sayac .oh-cizgi { flex: 1; max-width: 12rem; height: 2px; background: var(--cizgi); border-radius: 2px; overflow: hidden; }
.oh-sayac .oh-cizgi i { display: block; height: 100%; background: var(--aksan); transform-origin: left; transform: scaleX(0); transition: transform .6s cubic-bezier(.22,1,.36,1) !important; }
.oh-yil { font-size: clamp(3rem, 6vw, 5rem); line-height: 1; font-weight: 500; letter-spacing: -.03em; color: var(--lacivert); margin-bottom: 1.25rem; }
.oh-paragraflar { position: relative; }
.oh-paragraf { position: absolute; left: 0; right: 0; top: 0; margin: 0; font-size: 1.25rem; line-height: 1.75; text-align: justify; hyphens: auto;
  opacity: 0; transform: translateY(24px); filter: blur(4px); pointer-events: none;
  transition: opacity .5s, transform .6s cubic-bezier(.22,1,.36,1), filter .5s !important; }
.oh-paragraf.gecti { transform: translateY(-24px); }
.oh-paragraf.etkin { opacity: 1; transform: none; filter: none; pointer-events: auto; }
.oh-ipucu { position: absolute; left: 50%; bottom: 1.5rem; translate: -50% 0; margin: 0; font-size: .85rem; color: var(--lacivert); opacity: .6; display: flex; align-items: center; gap: .5rem; transition: opacity .4s; }
.oh-ipucu svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; animation: oh-in 1.6s ease-in-out infinite !important; }
@keyframes oh-in { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }
.oh-yuvarlak { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; cursor: pointer; border: 0; position: relative; }
.oh-yuvarlak svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.oh-yuvarlak::before { content: ""; position: absolute; inset: 0; border-radius: 50%; animation: oh-isik 1.8s ease-out infinite !important; }
@keyframes oh-isik { 0% { box-shadow: 0 0 0 0 rgb(255 255 255 / .55); } 70% { box-shadow: 0 0 0 16px rgb(255 255 255 / 0); } 100% { box-shadow: 0 0 0 0 rgb(255 255 255 / 0); } }
.oh-asagi { margin-top: 2.5rem; background: rgb(255 255 255 / .14); color: #fff; border: 1px solid rgb(255 255 255 / .5); }
.oh-asagi svg { animation: oh-in 1.8s ease-in-out infinite !important; }
.oh-asagi:hover { background: #fff; color: var(--lacivert); }
.oh-yukari { position: absolute; right: 2.5rem; bottom: 2rem; z-index: 5; background: var(--lacivert); color: #fff; box-shadow: 0 10px 24px rgb(10 36 80 / .25);
  opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .4s, transform .4s, background .25s !important; }
.oh-yukari.gorunur { opacity: 1; transform: none; pointer-events: auto; }
.oh-yukari:hover { background: var(--aksan); }
.oh-yukari svg { animation: oh-ust 1.8s ease-in-out infinite !important; }
@keyframes oh-ust { 0%, 100% { transform: translateY(2px); } 50% { transform: translateY(-3px); } }
.oh-son { max-width: 52rem; margin: 0 auto; padding: 4rem 2rem 6rem; text-align: center; }
.oh-son p { font-size: 1.1rem; opacity: .7; }
.oh-son a { display: inline-flex; margin-top: 1.5rem; padding: .9rem 1.6rem; border-radius: 999px; border: 1px solid var(--cizgi); color: var(--lacivert); }
/* eski sayfanın "Sayfanın başına dön" butonu hikâyenin ⌃ butonuyla çakışmasın */
body:has(.oh-hikaye) #yukari { display: none !important; }
@media (max-width: 900px) {
  .oh-hikaye { height: calc(var(--adim) * 60vh + 100vh); }
  .oh-sahne { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 1.25rem; padding: 5.5rem 1.25rem 1.5rem; align-items: start; }
  .oh-deste { width: 78%; aspect-ratio: 4 / 3.1; }
  .oh-yil { font-size: 2.5rem; margin-bottom: .75rem; }
  .oh-paragraf { font-size: 1.02rem; line-height: 1.65; }
  .oh-yukari { right: 1.25rem; bottom: 1.25rem; width: 50px; height: 50px; }
}
/* 28.09 — Özgeçmiş: ⌄ butonu lacivert başlık alanında değil, altındaki beyaz alanda (boşluğu doldurur) */
.oh-asagi-kap { display: flex; justify-content: center; padding: 2.25rem 0 .5rem; }
.oh-asagi { margin-top: 0; background: var(--lacivert); color: #fff; border: 0; box-shadow: 0 10px 24px rgb(10 36 80 / .22); }
.oh-asagi::before { animation-name: oh-isik-koyu !important; }
.oh-asagi:hover { background: var(--aksan); color: #fff; }
@keyframes oh-isik-koyu { 0% { box-shadow: 0 0 0 0 rgb(16 50 105 / .45); } 70% { box-shadow: 0 0 0 16px rgb(16 50 105 / 0); } 100% { box-shadow: 0 0 0 0 rgb(16 50 105 / 0); } }

/* ═══ 29.09 DEMO — ?tema=bordo : sitedeki tüm mavi/lacivert tonlar bordoya çevrilir (lacivert → bordo, açık mavi → açık gül).
   Eski renkler: ?tema=lacivert. Karar sonrası kalıcı olursa → src/styles/tema.css (:root değişkenleri) + aşağıdaki sabit tonlar */
html.v-tema-bordo {
  --yuzey:       #fffcfc;
  --yuzey-2:     #f8eeef;
  --lacivert:    #6e1423;
  --lacivert-2:  #4f0d18;
  --metin:       #5a1020;
  --metin-ters:  #fdf4f5;
  --aksan:       #b01e35;
  --odak:        #d4506a;
  --etiket-ters: #f2b6c0;
  --hayalet:     #e6dadc;
  --cizgi:       rgba(110, 20, 35, 0.10);
  --cizgi-ters:  rgba(253, 244, 245, 0.16);
  --golge: 0 18px 44px -26px rgba(110, 20, 35, 0.42);
  --zemin: #fffbfb;
}
html.v-tema-bordo body { background-color: #fffbfb; }

/* Sabit yazılmış mavi tonlar */
.v-tema-bordo .hero .hero-perde { background: linear-gradient(to top right, rgb(79 13 24 / .95) 0%, rgb(79 13 24 / .8) 32%, rgb(79 13 24 / .35) 52%, rgb(79 13 24 / 0) 68%); }
@media (max-width: 768px) {
  .v-tema-bordo .hero .hero-perde { background: linear-gradient(to top, rgb(79 13 24 / .95) 0%, rgb(79 13 24 / .8) 32%, rgb(79 13 24 / .25) 55%, rgb(79 13 24 / 0) 68%); }
}
.v-tema-bordo .hero-kupur { background-color: rgb(79 13 24 / .35); }
.v-tema-bordo .sayfa-basi::before { background: radial-gradient(120% 70% at 50% -10%, rgba(212, 80, 106, 0.22), transparent 62%); }
.v-tema-bordo .perde.acilis { background: radial-gradient(90% 80% at 72% 30%, #a8243a 0%, #6e1423 55%, #470b15 100%); }
.v-tema-bordo .acilis-harf { text-shadow: 0 0 28px rgb(255 190 200 / .9); }
.v-tema-bordo .ozgecmis .ozgecmis-gorsel::before { background: radial-gradient(circle, rgb(212 80 106 / .16), transparent 68%); }
.v-tema-bordo .gi-akis .gi-kart img, .v-tema-bordo .oh-kart img { background: #f8eeef; }
.v-tema-bordo .gi-cip:hover { background: #f8eeef; }
@media (max-width: 900px) { .v-tema-bordo .gi-ust { background: linear-gradient(#f5dde1, #c98a95); } }
.v-tema-bordo .gi-duzen .gi-cipler { background: none; }
@media (max-width: 900px) { .v-tema-bordo .gi-duzen .gi-cipler { background: linear-gradient(to bottom, #fffbfb 70%, transparent); } }
.v-tema-bordo .asagi-ok.koyu::before { animation-name: asagi-isik-bordo; }
.v-tema-bordo .oh-asagi::before { animation-name: asagi-isik-bordo !important; }
@keyframes asagi-isik-bordo { 0% { box-shadow: 0 0 0 0 rgb(110 20 35 / .45); } 70% { box-shadow: 0 0 0 16px rgb(110 20 35 / 0); } 100% { box-shadow: 0 0 0 0 rgb(110 20 35 / 0); } }
/* gölgeler (lacivert tonlu) */
.v-tema-bordo :is(.ks-kart, .gi-kart, .oh-kart, .gi-ok, .ust, .gi-cipler-ic) { box-shadow: 0 10px 28px rgb(110 20 35 / .12); }
.v-tema-bordo .ks-rozet { filter: drop-shadow(0 14px 26px rgb(110 20 35 / .18)); }
/* Logo: lacivert PNG → bordo (renk filtresiyle; kalıcı olursa bordo logo dosyası üretilecek) */
.v-tema-bordo .marka img { filter: brightness(0) saturate(100%) invert(12%) sepia(52%) saturate(4700%) hue-rotate(335deg) brightness(88%) contrast(98%); }

/* ═══ 29.09 DEMO — ?tema=yesil : haki/orman yeşili, ana ton #3E8257 (vurgu). Koyu zeminler aynı tonun koyusu.
   Eski renkler: ?tema=lacivert · bordo: ?tema=bordo */
html.v-tema-yesil {
  --yuzey:       #fcfefc;
  --yuzey-2:     #eef5f0;
  --lacivert:    #1f4a31;
  --lacivert-2:  #163826;
  --metin:       #1c3f2b;
  --metin-ters:  #f3faf5;
  --aksan:       #3E8257;
  --odak:        #5fa378;
  --etiket-ters: #b6dcc3;
  --hayalet:     #d9e2dc;
  --cizgi:       rgba(31, 74, 49, 0.10);
  --cizgi-ters:  rgba(243, 250, 245, 0.16);
  --golge: 0 18px 44px -26px rgba(31, 74, 49, 0.42);
  --zemin: #fbfdfb;
}
html.v-tema-yesil body { background-color: #fbfdfb; }

.v-tema-yesil .hero .hero-perde { background: linear-gradient(to top right, rgb(22 56 38 / .95) 0%, rgb(22 56 38 / .8) 32%, rgb(22 56 38 / .35) 52%, rgb(22 56 38 / 0) 68%); }
@media (max-width: 768px) {
  .v-tema-yesil .hero .hero-perde { background: linear-gradient(to top, rgb(22 56 38 / .95) 0%, rgb(22 56 38 / .8) 32%, rgb(22 56 38 / .25) 55%, rgb(22 56 38 / 0) 68%); }
}
.v-tema-yesil .hero-kupur { background-color: rgb(22 56 38 / .35); }
.v-tema-yesil .sayfa-basi::before { background: radial-gradient(120% 70% at 50% -10%, rgba(95, 163, 120, 0.25), transparent 62%); }
.v-tema-yesil .perde.acilis { background: radial-gradient(90% 80% at 72% 30%, #3E8257 0%, #1f4a31 55%, #122c1d 100%); }
.v-tema-yesil .acilis-harf { text-shadow: 0 0 28px rgb(190 240 205 / .9); }
.v-tema-yesil .ozgecmis .ozgecmis-gorsel::before { background: radial-gradient(circle, rgb(95 163 120 / .18), transparent 68%); }
.v-tema-yesil .gi-akis .gi-kart img, .v-tema-yesil .oh-kart img { background: #eef5f0; }
.v-tema-yesil .gi-cip:hover { background: #eef5f0; }
@media (max-width: 900px) { .v-tema-yesil .gi-ust { background: linear-gradient(#dcefe2, #8fbf9f); } }
.v-tema-yesil .gi-duzen .gi-cipler { background: none; }
@media (max-width: 900px) { .v-tema-yesil .gi-duzen .gi-cipler { background: linear-gradient(to bottom, #fbfdfb 70%, transparent); } }
.v-tema-yesil .asagi-ok.koyu::before { animation-name: asagi-isik-yesil; }
.v-tema-yesil .oh-asagi::before { animation-name: asagi-isik-yesil !important; }
@keyframes asagi-isik-yesil { 0% { box-shadow: 0 0 0 0 rgb(31 74 49 / .45); } 70% { box-shadow: 0 0 0 16px rgb(31 74 49 / 0); } 100% { box-shadow: 0 0 0 0 rgb(31 74 49 / 0); } }
.v-tema-yesil :is(.ks-kart, .gi-kart, .oh-kart, .gi-ok, .ust, .gi-cipler-ic) { box-shadow: 0 10px 28px rgb(31 74 49 / .12); }
.v-tema-yesil .ks-rozet { filter: drop-shadow(0 14px 26px rgb(31 74 49 / .18)); }
.v-tema-yesil .marka img { filter: brightness(0) saturate(100%) invert(22%) sepia(24%) saturate(1100%) hue-rotate(95deg) brightness(92%) contrast(92%); }

/* ═══ 29.09 ONAYLANDI — Header büyük ekranlarda (≥1400px) daha büyük (Rapor 02 — "web halinde biraz daha büyük")
   1920×1080'de: genişlik 1344→1664px, yükseklik 66→84px, logo 200→250px, menü 17→19px, "Bana Yaz" 48→56px */
@media (min-width: 1400px) {
  .ust { max-width: 104rem; padding: .7rem .75rem .7rem 1.5rem; }
  .marka img { width: 250px !important; }
  .ust .nav { gap: 1.1rem; }
  .ust .nav a, .ust .nav-tetik { font-size: 1.1875rem !important; padding-inline: .85rem; }
  .ust-ikon { min-width: 48px; height: 48px; font-size: 1.3rem; }
  .ust-yaz { min-height: 56px; padding: 0 1.75rem; font-size: 1.125rem; }
  .ust-yaz svg { font-size: 1.25rem; }
}

/* ═══ 29.09 ONAYLANDI — Ana sayfa Gündem bölümü küçük ve DAR (Rapor 02, İş 5)
   Bölüm sırası dar–geniş: Özgeçmişim (dar) · Güzel İşler (geniş) · Gündem (dar) · Anılarımız (geniş) */
section.haberler { max-width: 84rem; margin-inline: auto; padding-top: 5rem; padding-bottom: 5rem; }
.haberler-ust { margin-bottom: 2rem; }
.haberler .bolum-baslik { font-size: clamp(2.5rem, 3.8vw, 3.6rem); }
.haber-duzen { gap: 2rem; align-items: start; }
.haber-buyuk .haber-gorsel img { aspect-ratio: 16 / 10; }
.haber-buyuk .haber-baslik { font-size: 1.95rem; line-height: 1.18; }
.haber-buyuk .haber-ozet { font-size: 1.0625rem; }
.haber-sutun .haber-gorsel { max-width: 200px; }
.haber-sutun .haber-baslik { font-size: 1.3rem; }
.haber-sutun .haber-ozet { font-size: 1rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.haber-sutun .haber { grid-template-columns: 200px minmax(0, 1fr) !important; column-gap: 1.25rem !important; }
.haber-sutun .haber-ozet { line-height: 1.55 !important; max-height: 3.1em; overflow: hidden; }

/* ═══ 29.09 — Açılış animasyonu: masaüstünde "Güzel İşler’e" yine tek satır (iki parça yan yana) ═══ */
.acilis-yazi .y1, .acilis-yazi .yb { display: inline-block; font-size: clamp(3rem, 7.4vw, 8.8rem); }
.acilis-yazi .y1 { margin-right: .26em; }
.acilis-yazi .y2 { display: block; }

/* ═══ 29.09 — Açılış animasyonu MOBİL: yukarıdan inme yok, 3 satır (Güzel / İşler’e / Devam…), imza yok, her şey ekrana sığar ═══ */
@media (max-width: 800px) {
  .acilis-sag { position: absolute; inset: 0; width: auto; }
  .acilis-yazi { left: 7vw; right: 7vw; top: calc(12svh + env(safe-area-inset-top, 0px)); transform: rotate(-5deg) skewX(-9deg);
    -webkit-mask-image: none !important; mask-image: none !important; animation: none !important; }
  .acilis-yazi .y1, .acilis-yazi .yb, .acilis-yazi .y2 { display: block; margin: 0; padding: 0; font-size: min(16vw, 9svh); line-height: .98; }
  .acilis-yazi .alt { display: none; }
  /* baret: üstten inmez; sağ üstte yerinde dönerek büyüyüp belirir */
  .acilis-baret { top: calc(9svh + env(safe-area-inset-top, 0px)); right: 3vw; width: 40vw; max-width: 220px;
    transform: scale(.4) rotate(-25deg); opacity: 0;
    animation: acilis-baret-m .9s cubic-bezier(.3,1.5,.5,1) .45s forwards !important; }
  @keyframes acilis-baret-m { to { transform: none; opacity: 1; } }
  .acilis-golge { display: none; }
  /* başkan: altta ortada, ekrana sığacak boyda */
  .acilis-baskan { left: 50%; bottom: 0; height: min(58svh, 128vw); transform: translate(-62%, 0) scale(1.04); animation-name: acilis-baskan-m !important; }
}

/* 30.09 — Merhaba: lacivert panelli portre yerine başkanın konuşurken çekilmiş dekupe fotoğrafı (panel yok);
   altında metinden ayıran ince kıl çizgi. → src/pages/merhaba.astro (.portre) + src/assets/img/ozlu-konusma.png */
.mektup-bolum .portre {
  aspect-ratio: auto; clip-path: none; overflow: visible; display: block;
  margin-top: 0; border-radius: 0;
  border-bottom: 1px solid rgb(15 47 99 / .22);
}
.mektup-bolum .portre::before { content: none; }
.mektup-bolum .portre img.portre-konusma {
  position: static; transform: none; display: block;
  width: 100%; height: auto; aspect-ratio: auto; object-fit: contain;
}
.mektup-bolum { grid-template-columns: 30rem minmax(0, 42rem) !important; column-gap: 4rem !important; }
/* Başkan üstte (menünün altında) sabit kalır; kaydırdıkça yalnız metin akar */
@media (max-width: 1024px) {
  .mektup-bolum { grid-template-columns: 1fr !important; }
  .mektup-bolum .portre-kap { position: static !important; align-self: start !important; max-width: 26rem; }
}

/* 30.09 — Güzel İşler başlığının solunda kırmızı "Bizim İşler güzel işler" rozet logosu
   → src/pages/guzel-isler/index.astro (.gi-baslik) + src/assets/img/guzel-isler-rozet.png (Kurumsal Kimlik / 03 Marka Logolar) */
.gi-baslik { display: flex; align-items: center; gap: .3em; }
.gi-logo { width: 1.25em; height: 1.25em; flex: none; filter: drop-shadow(0 6px 12px rgb(200 30 30 / .18)); }

/* ═══ 30.09 — İletişim karşılama kutusu: başkan fotoğrafı (DSC_4673) — iki seçenek ═══
   A (varsayılan, ?iletisim=foto): fotoğraf kutunun sağ tarafına yedirilir; kart/çerçeve yok, sola doğru laciverte erir.
   B (?iletisim=popart): fotoğraftan üretilmiş pop-art portre (yüz birebir fotoğrafın kendisi), etkileşimli:
     imleç gezdikçe mercek altında gerçek fotoğraf görünür; tıklayınca / kendiliğinden 4 renk arasında döner.
   → src/pages/iletisim.astro (.karsilama-gorsel) + görseller: iletisim-baskan-*.webp / iletisim-popart-*.webp (_araclar/popart.py) */
.karsilama { min-height: 30rem; }
.karsilama .kg-yeni { margin: 0; border-radius: 0; box-shadow: none; overflow: visible; }
.kg-pop { display: none; }

/* — A: sağa yedirilmiş fotoğraf — */
html:not(.v-iletisim-popart) .karsilama .kg-yeni {
  position: absolute !important; z-index: 0 !important; inset: 0 0 0 auto; width: 64%;
  -webkit-mask-image: linear-gradient(to right, transparent 0, rgb(0 0 0 / .55) 22%, #000 48%);
          mask-image: linear-gradient(to right, transparent 0, rgb(0 0 0 / .55) 22%, #000 48%);
}
html:not(.v-iletisim-popart) .karsilama .kg-yeni::after {   /* lacivertle renk uyumu: alt ve sol kenar hafif koyulur */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgb(12 34 80 / .55), transparent 38%),
              linear-gradient(to right, rgb(16 50 105 / .6), transparent 45%);
}
.karsilama .kg-yeni img.kg-foto { width: 100%; height: 100%; object-fit: cover; object-position: 52% 100%; filter: saturate(.92) contrast(1.03); transform: scale(1.14); transform-origin: 58% 100%; }
html:not(.v-iletisim-popart) .karsilama-metin { max-width: 34rem; }
@media (max-width: 1024px) {
  html:not(.v-iletisim-popart) .karsilama { min-height: 0; padding-bottom: 0; }
  html:not(.v-iletisim-popart) .karsilama .kg-yeni {
    position: relative !important; inset: auto; width: auto; margin: -1rem -1.5rem 0; aspect-ratio: 4 / 3.4;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 32%); mask-image: linear-gradient(to bottom, transparent 0, #000 32%);
  }
  html:not(.v-iletisim-popart) .karsilama .kg-yeni::after { background: linear-gradient(to top, rgb(12 34 80 / .45), transparent 40%); }
}

/* — B: etkileşimli pop-art — */
.v-iletisim-popart .karsilama .kg-foto { display: none; }
.v-iletisim-popart .karsilama .kg-yeni { align-self: center; padding: 1.25rem 1.5rem 1.5rem 0; }
.v-iletisim-popart .kg-pop {
  display: block; position: relative; aspect-ratio: 1100 / 863; cursor: crosshair; outline: none;
  border: 5px solid #fff; border-radius: 6px; transform: rotate(-2.2deg);
  box-shadow: 14px 14px 0 #ffd23f, 0 30px 60px -20px rgb(0 0 0 / .6);
  transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s;
  --x: 50%; --y: 40%; --r: 0px;
}
.v-iletisim-popart .kg-pop:hover, .v-iletisim-popart .kg-pop:focus-visible { transform: rotate(0deg) scale(1.02); box-shadow: 18px 18px 0 #ff4f7b, 0 34px 70px -20px rgb(0 0 0 / .65); }
.kg-pop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.kg-pop-katman { opacity: 0; transition: opacity .35s steps(3); }
.kg-pop-katman.aktif { opacity: 1; }
/* mercek: altında gerçek fotoğraf */
.kg-pop-gercek { clip-path: circle(var(--r) at var(--x) var(--y)); transition: clip-path .25s ease-out; }
.kg-pop.mercek { --r: 5.5rem; }
.kg-pop::after {  /* mercek halkası */
  content: ""; position: absolute; left: var(--x); top: var(--y); width: calc(var(--r) * 2); height: calc(var(--r) * 2);
  transform: translate(-50%, -50%); border-radius: 50%; border: 4px solid #fff; box-shadow: 0 0 0 4px #111;
  pointer-events: none; opacity: 0; transition: opacity .2s;
}
.kg-pop.mercek::after { opacity: 1; }
.kg-pop-balon {
  position: absolute; left: -1.25rem; top: -1.6rem; z-index: 2; transform: rotate(-6deg);
  padding: .55rem 1rem; background: #fff; color: #111; border: 3px solid #111; border-radius: 1.2rem;
  font-weight: 800; font-size: 1.25rem; line-height: 1; letter-spacing: -.01em; box-shadow: 5px 5px 0 #111;
}
.kg-pop-balon::after { content: ""; position: absolute; left: 1.6rem; bottom: -.85rem; border: .5rem solid transparent; border-top: .6rem solid #111; }
.kg-pop-ipucu {
  position: absolute; right: .75rem; bottom: .75rem; z-index: 2; padding: .3rem .7rem; border-radius: 99px;
  background: rgb(0 0 0 / .6); color: #fff; font-size: .78rem; letter-spacing: .02em; transition: opacity .3s;
}
.kg-pop.mercek .kg-pop-ipucu { opacity: 0; }
@media (max-width: 1024px) {
  .v-iletisim-popart .karsilama .kg-yeni { padding: 1rem .5rem .75rem; }
  .v-iletisim-popart .kg-pop { box-shadow: 9px 9px 0 #ffd23f; }
  .kg-pop.mercek { --r: 4rem; }
}

/* 30.09 — İletişim başlığı iki satır ("Kapımız / herkese açık") ve daha büyük; giriş metni de büyüdü → src/pages/iletisim.astro */
.karsilama .karsilama-baslik { font-size: clamp(3.25rem, 5.4vw, 5.5rem); line-height: .95; }
.karsilama .karsilama-giris { font-size: 1.3rem; line-height: 1.5; max-width: 32ch; }
@media (max-width: 1024px) {
  .karsilama .karsilama-baslik { font-size: min(3.25rem, 10.4vw); }
  .karsilama .karsilama-giris { font-size: 1.15rem; }
}

/* 30.09 — İletişim karşılama kutusu tam genişlik değil: ortalı, en fazla 72rem. Sol üstteki "İletişim" sayfa adı görünmez
   (ekran okuyucu için h1 olarak kalır) → src/pages/iletisim.astro (.karsilama, .sayfa-adi) */
.karsilama { max-width: 72rem; margin-inline: auto; margin-top: 1rem; }
main:has(.karsilama) .sayfa-adi {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ═══ 30.09 — İletişim: "Başvurunuz nasıl ilerler" bölümü kaldırıldı; telefon 444 41 10; "Doğrudan ulaşın" listesine
   sosyal medya satırı (@mehmetyasinozlu — X, Instagram, Facebook, YouTube düğmeleri). Mobilde 2×2 ızgara.
   → src/pages/iletisim.astro ═══ */
.karsilama + .izgara { margin-top: 4rem; }
.kanal-sosyal .sosyal-bas { cursor: default; background: none; padding-bottom: .5rem; }
.sosyal-dugmeler {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem;
  padding: .5rem 1rem 1.5rem calc(1rem + 3rem + 1.25rem);   /* ikon sütununun hizasından başlar */
}
.sosyal-dugme {
  --marka: var(--lacivert);
  display: flex; align-items: center; gap: .6rem; min-height: 52px; padding: .5rem 1rem .5rem .5rem;
  border: 1px solid var(--cizgi); border-radius: var(--r-pill, 999px);
  color: var(--lacivert); font-weight: 500; text-decoration: none; background: #fff;
  transition: background .25s ease-out, color .25s ease-out, border-color .25s ease-out, transform .25s ease-out;
}
.sd-ikon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: var(--yuzey-2); color: var(--marka); transition: background .25s, color .25s; }
.sd-ikon svg { width: 18px; height: 18px; }
.sd-x { --marka: #111; }
.sd-instagram { --marka: #d6246e; }
.sd-facebook { --marka: #1877f2; }
.sd-youtube { --marka: #e62117; }
@media (hover: hover) {
  .sosyal-dugme:hover { background: var(--marka); border-color: var(--marka); color: #fff; transform: translateY(-2px); }
  .sosyal-dugme:hover .sd-ikon { background: rgb(255 255 255 / .18); color: #fff; }
}
.sosyal-dugme:focus-visible { outline: 2px solid var(--aksan); outline-offset: 3px; }
@media (max-width: 900px) {
  .sosyal-dugmeler { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-left: 1rem; }
}
@media (max-width: 640px) {
  .karsilama + .izgara { margin-top: 3rem; }
  .sosyal-dugmeler { padding: .25rem .25rem 1.25rem; gap: .6rem; }
  .sosyal-dugme { min-height: 48px; padding-right: .75rem; }
}
@media (max-width: 640px) { .sd-ad { font-size: .95rem; } .sosyal-dugme { gap: .45rem; } }

/* 30.09 — Sosyal medya: TikTok ve NSosyal eklendi (6 hesap). Masaüstünde 3×2, isimli; mobilde tek satır, yalnız logo
   (isim ekran okuyucu için kalır). NSosyal logosu: Downloads/Logo/nsosyal.svg */
.sosyal-dugmeler { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sd-tiktok { --marka: #111; }
.sd-nsosyal { --marka: #1b2b5b; }
.sd-nsosyal .sd-ikon svg { width: 17px; height: 13px; }
@media (max-width: 640px) {
  .sosyal-dugmeler { display: flex; justify-content: space-between; gap: .35rem; padding: .35rem .25rem 1.25rem; }
  .sosyal-dugme { flex: 0 0 auto; min-height: 0; padding: 0; border-radius: 50%; gap: 0; }
  .sosyal-dugme .sd-ikon { width: 46px; height: 46px; background: #fff; }
  .sosyal-dugme .sd-ikon svg { width: 20px; height: 20px; }
  .sd-nsosyal .sd-ikon svg { width: 19px; height: 14px; }
  .sosyal-dugme .sd-ad { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .sosyal-dugme:active .sd-ikon { background: var(--marka); color: #fff; }
}

/* 30.09 — Sosyal medya düğmeleri her ekranda yalnız ikon, tek sıra (isim ekran okuyucu ve title ipucu olarak kalır) */
.sosyal-dugmeler { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: .75rem; }
.sosyal-dugme { flex: 0 0 auto; min-height: 0; padding: 0; border-radius: 50%; gap: 0; background: none; }
.sosyal-dugme .sd-ikon { width: 52px; height: 52px; background: #fff; border: 1px solid var(--cizgi); }
.sosyal-dugme .sd-ikon svg { width: 21px; height: 21px; }
.sd-nsosyal .sd-ikon svg { width: 20px; height: 15px; }
.sosyal-dugme .sd-ad { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sosyal-dugme { border: 0; }
@media (hover: hover) {
  .sosyal-dugme:hover { background: none; transform: translateY(-3px); }
  .sosyal-dugme:hover .sd-ikon { background: var(--marka); border-color: var(--marka); color: #fff; }
}
@media (max-width: 640px) {
  .sosyal-dugmeler { flex-wrap: nowrap; justify-content: space-between; gap: .35rem; }
  .sosyal-dugme .sd-ikon { width: 46px; height: 46px; }
  .sosyal-dugme .sd-ikon svg { width: 20px; height: 20px; }
  .sd-nsosyal .sd-ikon svg { width: 19px; height: 14px; }
}

/* ═══ 30.09 — Güzel İşler: markaların yol haritası (duvar baskısı SVG'si, satır içi) — mavi görselin hemen altında, başlıksız ═══
   Sabitleme yok (üst/alt boşluk kalmasın): bölüm ekrana girdikçe yol çizgisi kalemle çiziliyormuş gibi ilerler. SVG'deki
   yol parçaları dolgu şekli olduğu için her birinin ORTA ÇİZGİSİ hesaplanır (dış hattın iki kenarı birlikte yürünür) ve
   bu çizgiyi izleyen kalın bir maske stroke-dasharray ile açılır; sondaki el yazısı "im" de aynı yolla soldan sağa yazılır.
   Kalem bir öğeye varınca daireler, yıllar, logolar, tırnaklar ve sloganlar baloncuk gibi belirir; yukarı kaydırınca geri
   sarar. Dar ekranda kamera kalemi izler, şerit sağdan sola kayar. "Animasyonu azalt"tan etkilenmez.
   → yeni src/components/YolHaritasi.astro */
.yh { position: relative; margin: 0; padding: 2.5rem 0 1rem; }
.yh-pencere { overflow: hidden; }
.yh-serit { width: max-content; padding: 0 max(1.5rem, calc((100vw - 84rem) / 2)); will-change: transform;
  transform: translate3d(var(--yh-x, 0px), 0, 0); transition: transform .12s linear; }
.yh-svg { display: block; width: min(84rem, calc(100vw - 3rem)); height: auto; aspect-ratio: 55.9181 / 15.309; overflow: visible; }
.yh-oge { opacity: 0; transform: scale(.35); transform-box: view-box;
  transition: transform .65s cubic-bezier(.34, 1.6, .64, 1), opacity .3s ease-out; }
.yh-oge.acik { opacity: 1; transform: none; }
@media (max-width: 900px) {
  .yh { padding: 1.75rem 0 .5rem; }
  .yh-svg { width: auto; height: min(19rem, 46svh); }
}
.yh + .gi-giris { padding-top: 1.5rem; }

/* "Güzel İşler" başlığındaki rozet: ekrana girince küçükten büyüğe zıplayarak (bounce) çıkar */
.gi-giris .gi-logo { transform: scale(0); opacity: 0; }
.gi-giris.gorundu .gi-logo { animation: gi-baloncuk .95s cubic-bezier(.28, .84, .42, 1) both; }
@keyframes gi-baloncuk {
  0%   { transform: scale(0) rotate(-20deg); opacity: 0; }
  35%  { transform: scale(1.28) rotate(6deg); opacity: 1; }
  55%  { transform: scale(.86) rotate(-3deg); }
  72%  { transform: scale(1.1) rotate(1deg); }
  86%  { transform: scale(.97); }
  100% { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .gi-giris.gorundu .gi-logo { animation-duration: .95s !important; animation-iteration-count: 1 !important; }
}



/* 30.09 — Güzel İşler kategori çubuğu (mobil): oval şerit yerine tek seferde TEK kategori (yanında bir sonrakinin ucu
   görünmez), iki yanda küçük ‹ › kaydırma düğmeleri. Kaydırınca çip ortaya oturur (scroll-snap).
   → src/pages/guzel-isler/index.astro (.gi-cipler) + revize.js son blok */
.gi-cip-ok { display: none; }
@media (max-width: 900px) {
  .gi-duzen .gi-cipler { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) 2.5rem; align-items: center; gap: .4rem; }
  .gi-duzen .gi-cipler-ic { gap: 0; padding: .3rem; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
  .gi-duzen .gi-cip { flex: 0 0 100%; justify-content: center; scroll-snap-align: center; scroll-snap-stop: always;
    white-space: normal; text-align: center; line-height: 1.2; min-height: 40px; padding: .2rem .75rem; }
  .gi-cip-ok { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; padding: 0; cursor: pointer;
    border: 1px solid var(--cizgi); background: rgb(252 253 255 / .95); color: var(--lacivert); box-shadow: var(--golge);
    transition: opacity .2s, background .2s; }
  .gi-cip-ok svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .gi-cip-ok:disabled { opacity: .35; cursor: default; }
  .gi-cip-ok:not(:disabled):active { background: var(--lacivert); color: #fff; }
}

/* 30.09 — X logosu diğer sosyal ikonlardan iri duruyordu: yalnız X %16 küçük (header, mobil menü, İletişim düğmeleri) */
.ust-ikon[title="X"] svg, .menu-sosyal a[title="X"] svg, .sd-x .sd-ikon svg { transform: scale(.84); transform-origin: center; }

/* ═══ 30.09 — Merhaba yeni düzen (2 + 1): üstte iki sütun — solda başkan fotoğrafı, sağda el yazısıyla "Merhaba," (sayfa
   açılışında kalemle yazılır) ve ilk iki paragraf büyük puntoyla; altta tam genişlik tek sütun: "Niyet hayır…" alıntısı ve
   kalan paragraflar normal puntoyla. Tüm paragraflar iki yana yaslı (Türkçe yumuşak kısa çizgiyle, hecele.py).
   Fotoğraf artık sabit (sticky) değil. → src/pages/merhaba.astro ═══ */
.mektup-bolum.mb-yeni { display: block !important; max-width: 72rem; margin: 5.5rem auto 0; padding: 0 1.5rem; }
.mb-ust { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 4rem; align-items: end; }
.mb-yeni .portre-kap { position: static !important; max-width: none !important; align-self: end; }
.mb-giris { padding-bottom: 2.5rem; }
.mb-yeni .mektup-metin { text-align: justify; hyphens: manual; }
.mb-yeni .mb-buyuk { hyphens: none; }   /* üstteki büyük paragraflarda kelime bölünmez */
/* alt metin tek paragraf, tam genişlik, iki yana yaslı (son satır sola) */
.mb-yeni .mb-buyuk { font-size: clamp(1.3rem, 1.75vw, 1.7rem); line-height: 1.5; letter-spacing: -.01em; margin-bottom: 1.1rem; opacity: 1; }
.mb-alt { margin-top: 3.5rem; }
.mb-alt .mektup-metin { font-size: clamp(1.2rem, 1.5vw, 1.4rem); line-height: 1.7; max-width: none; opacity: 1; }
.mb-alt .alinti, .mb-alt .alinti p { max-width: none; }
.mb-yeni .mb-giris .mektup-metin { max-width: none; }
.mb-alt .alinti { margin-top: 0; }

/* el yazısı "Merhaba," — kalemle yazılıyormuş gibi: soldan sağa açılan perde + harf konturu çizilir, dolgu arkadan gelir */
.selam-el { margin: 0 0 1.25rem; line-height: 0; }
.selam-svg { display: block; width: min(100%, 26rem); height: auto; overflow: visible; }
.selam-yazi { font-family: 'Great Vibes', 'Allura', cursive; font-size: 150px; fill: var(--lacivert, #0f2f63);
  stroke: var(--lacivert, #0f2f63); stroke-width: 1.4; stroke-linejoin: round; stroke-dasharray: 900; stroke-dashoffset: 900;
  fill-opacity: 0; }
.selam-el .selam-svg { clip-path: inset(-20% 100% -20% 0); }
.selam-el.yaz .selam-svg { animation: selam-perde 1.15s cubic-bezier(.5, .1, .4, 1) .15s forwards; }
.selam-el.yaz .selam-yazi { animation: selam-kontur 1.15s ease-out .15s forwards, selam-dolgu .5s ease-out .8s forwards; }
@keyframes selam-perde { to { clip-path: inset(-20% -4% -20% 0); } }
@keyframes selam-kontur { to { stroke-dashoffset: 0; } }
@keyframes selam-dolgu { to { fill-opacity: 1; stroke-width: 0; } }
@media (prefers-reduced-motion: reduce) {   /* sitenin genel kuralı animasyonu kısaltmasın: bu yazı efekti bilerek dışarıda */
  .selam-el.yaz .selam-svg { animation-duration: 1.15s !important; animation-delay: .15s !important; }
  .selam-el.yaz .selam-yazi { animation-duration: 1.15s, .5s !important; animation-delay: .15s, .8s !important; }
}

@media (max-width: 1024px) {
  .mektup-bolum.mb-yeni { margin-top: 3.5rem; padding: 0; }   /* sayfanın kendi kenar boşluğu yeterli */
  .mb-yeni .mb-buyuk { font-size: 1.2rem; }
  .mb-ust { grid-template-columns: 1fr; row-gap: 1.5rem; }
  .mb-yeni .portre-kap { max-width: 26rem !important; }
  .mb-giris { padding-bottom: 0; order: -1; }        /* mobilde önce "Merhaba," ve ilk paragraflar, sonra fotoğraf */
  .selam-svg { width: min(100%, 19rem); }
  .mb-alt { margin-top: 2.5rem; }
}

/* 30.09 — Merhaba: "Güzel İşler’e Devam" bir tık küçük ve paragrafa daha yakın (üstteki boşluk azaldı);
   alttaki "Rakamlarla" (91 güzel iş · 2 dönem · 7 milyar ₺) bölümü kaldırıldı → src/pages/merhaba.astro */
.mb-yeni + .kapanis { margin-top: 3rem !important; }
.mb-yeni ~ .kapanis .parola { font-size: clamp(2.6rem, 6.4vw, 5.6rem) !important; }
@media (max-width: 1024px) { .mb-yeni + .kapanis { margin-top: 2.25rem !important; } }

/* 30.09 — "Bunun için parolamız" paragraftan ayrıldı: "Güzel İşler’e Devam"ın hemen üstünde, ortalı, büyük harf, geniş aralıklı */
.parola-ust { text-align: center; text-transform: uppercase; letter-spacing: .32em; font-size: clamp(.8rem, 1vw, .95rem);
  font-weight: 500; color: var(--aksan, #2f6fd6); margin: 0 0 1rem; padding-left: .32em; }

/* 30.09 — paragraf · "Bunun için parolamız" · "Güzel İşler’e Devam" arası daha sıkı (masaüstü + mobil) */
.mb-yeni + .kapanis { margin-top: 1.75rem !important; }
.parola-ust { margin-bottom: .35rem; }
@media (max-width: 1024px) {
  .mb-yeni + .kapanis { margin-top: 1.25rem !important; }
  .parola-ust { font-size: .72rem; letter-spacing: .24em; padding-left: .24em; margin-bottom: .2rem; }
  .mb-yeni ~ .kapanis .parola { font-size: clamp(1.6rem, 8.3vw, 3rem) !important; line-height: 1.05; white-space: nowrap; margin-top: 0; }
  .mb-yeni ~ .kapanis .imza-ad { font-size: 1.25rem; }   /* başlık imzadan belirgin büyük kalsın */
  .mb-yeni ~ .kapanis .imza { margin-top: 1rem; }
}

/* 30.09 — "Bunun için parolamız" başlığa yapışık: .kapanis'in 2.5rem ızgara aralığı bu etikette geri alınır, etiket biraz aşağı iner */
.parola-ust { margin: .9rem 0 -2.05rem !important; }
@media (max-width: 1024px) { .parola-ust { margin: .6rem 0 -2.15rem !important; } }

/* 01.10 — Üç slaytta ana yazı aynı ölçüde: "Güzel İşler’e Devam"ın bir tık büyüğü; alt başlık aralıkları eşit
   → src/components/Hero.astro (.hero-baslik, .hero-tagline-buyuk) */
.hero .hero-baslik:not(.hero-baslik-bos),
.hero .hero-tagline-buyuk {
  font-size: clamp(3rem, 6.4vw, 8rem) !important;
  letter-spacing: -0.025em; font-weight: 500;
}
.hero .hero-tagline-buyuk { line-height: 1; max-width: 14ch; }
.hero .hero-tagline-buyuk + .hero-altbaslik,
.hero .hero-baslik + .hero-altbaslik { margin-top: 1.25rem; }
@media (max-width: 768px) {
  .hero .hero-baslik:not(.hero-baslik-bos),
  .hero .hero-tagline-buyuk { font-size: 13vw !important; }
}
/* 01.10 — İki satır, üç slaytta aynı satır aralığı ("Başiskele Bizim" ferah aralığı kaldırıldı) */
.hero .hero-baslik-ferah .maske + .maske { margin-top: -.26em !important; }

/* 01.10 — Hero döngüsü "hareketi azalt" açık bilgisayarlarda da döner; geçişler ve çizgi dolumu genel kısaltma kuralından muaf
   → src/components/Hero.astro (betikte azHareket koşulu kalktı + bu @media) */
@media (prefers-reduced-motion: reduce) {
  .hero .hero-kat { transition-duration: .9s !important; }
  .hero .hero-slayt { transition-duration: .7s, 0s !important; }
  .ready .hero .hero-slayt.etkin .maske > span { transition-duration: 1s !important; }
  .ready .hero .hero-slayt.etkin .hero-yazi { transition-duration: .62s, .62s !important; }
  .hero .hero-dolum.sayiyor { animation-duration: var(--sure, 5s) !important; }
}

/* 01.10 — Yol haritası: sayfa yenilenince bir an bütün hâliyle görünmesin (betik hazırlanana kadar gizli);
   dar ekranda bölüm sabitlenir, kaydırdıkça harita soldan sağa sonuna kadar ilerler → src/components/YolHaritasi.astro */
.yh:not(.yh-hazir) .yh-svg { visibility: hidden; }
.yh.yh-sabit { box-sizing: content-box; min-height: calc(var(--yh-pencere-h, 0px) + var(--yh-yol, 0px)); }
.yh.yh-sabit .yh-pencere { position: sticky; top: var(--yh-ust, 6rem); }

/* 01.10 — Merhaba (mobil): üstteki beyaz boşluk küçüldü; "Merhaba," header'ın hemen altında, başkan fotoğrafı daha yukarıda
   → src/pages/merhaba.astro (@media) */
@media (max-width: 1024px) {
  .ust-sayfa:has(.mb-yeni) { padding-top: 5.75rem; }
  .mektup-bolum.mb-yeni { margin-top: 0; }
  .mb-ust { row-gap: .75rem; }
  .mb-yeni .mb-giris .mektup-metin:last-child { margin-bottom: 0; }
}
/* 01.10 — Mobil yol haritası daha büyük: sabitken üstte/altta boş alan kalmasın */
@media (max-width: 900px) { .yh .yh-svg { height: min(30rem, 56svh); } .yh { padding: .5rem 0 0; } }
/* 01.10 — body'deki overflow-x: hidden iOS Safari'de sticky'yi bozuyordu (harita sabitlenmeden kaçıyor, geride boş alan kalıyordu).
   clip görünümü aynı tutar ama kaydırma kabı oluşturmaz → sticky çalışır. Tutmazsa revize.js yedek sabitlemeye geçer (.yh-yedek).
   → src/styles/tema.css (body) + src/components/YolHaritasi.astro */
body { overflow-x: clip; }
.yh.yh-yedek .yh-pencere { position: relative; top: auto; will-change: transform; }

/* 01.10 — Alt bölüm (footer) yeni düzen: solda "Kapımız herkese açık" + Telefon / Bana Yaz / Konum,
   ortada dekupe başkan — omuzlarının arkasından çerçeve döner, baş ve omuz üstü çerçevenin dışına taşar,
   sağda sosyal medya. Açıklama metinleri ve alttaki adres satırı kaldırıldı.
   ?footer=kemer → çerçeve üstü kemer (yarım yuvarlak) seçeneği
   → src/pages/index.astro (iletisim bölümü) + görsel: ozlu-dekupe-*.webp */
.iletisim.ilt-yeni {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 27rem) minmax(0, 1fr);
  align-items: end; column-gap: clamp(2.5rem, 4.5vw, 4.5rem);
  padding: clamp(3.5rem, 6vw, 5.5rem) clamp(1.5rem, 4vw, 3.5rem) 0;
  background:
    radial-gradient(60% 75% at 50% 100%, rgb(37 99 201 / .38), transparent 70%),
    linear-gradient(160deg, #143a78 0%, #0f2f63 45%, #0a2149 100%);
  color: var(--metin-ters, #f2f6fd);
}
.ilt-yeni .hayalet {
  position: absolute; left: 50%; bottom: -.18em; transform: translateX(-50%); z-index: -1;
  margin: 0; font-size: clamp(5rem, 17vw, 16rem); line-height: 1; font-weight: 600; letter-spacing: -.03em;
  white-space: nowrap; color: rgb(242 246 253 / .045); pointer-events: none;
}
.ilt-sol, .ilt-sag { align-self: center; padding-bottom: clamp(3rem, 5vw, 4.5rem); }

/* Sol — başlık + kanallar */
.ilt-yeni .iletisim-baslik { margin: 0 0 2rem; font-size: clamp(2.5rem, 3.6vw, 3.6rem); line-height: .95; }
.ilt-kanallar, .ilt-sosyal { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.ilt-kanal {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem;
  padding: .85rem 0; color: inherit; text-decoration: none;
  border-top: 1px solid rgb(242 246 253 / .14);
}
.ilt-kanallar li:last-child .ilt-kanal { border-bottom: 1px solid rgb(242 246 253 / .14); }
.ilt-ikon {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: rgb(242 246 253 / .08); border: 1px solid rgb(242 246 253 / .16);
  transition: background-color .25s, border-color .25s, color .25s;
}
.ilt-ikon svg { width: 1.2rem; height: 1.2rem; }
.ilt-yazi { display: grid; gap: .1rem; min-width: 0; }
.ilt-etiket { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--etiket-ters, #8fb2ee); }
.ilt-deger { font-size: 1.15rem; font-weight: 500; letter-spacing: -.01em; line-height: 1.3; }
.ilt-ok { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.7; opacity: .55; transition: transform .3s var(--yumusak, ease), opacity .3s; }
.ilt-kanal:hover .ilt-ikon, .ilt-sos:hover .ilt-ikon { background: #fff; border-color: #fff; color: var(--lacivert, #0f2f63); }
.ilt-kanal:hover .ilt-ok { transform: translateX(4px); opacity: 1; }

/* Orta — dekupe + omuz arkası çerçeve */
.ilt-orta { position: relative; align-self: end; aspect-ratio: 2072 / 2457; width: 100%; }
.ilt-baskan { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: contain; object-position: bottom;
  filter: drop-shadow(0 24px 40px rgb(5 16 40 / .45)); }
.ilt-cerceve-on {              /* omuz hizasından aşağı inen çerçeve çizgisi — başkanın arkasında; baş ve omuz üstü dışarı taşar */
  position: absolute; z-index: 0; left: -9%; right: -9%; top: 37%; bottom: 0;
  border: 1.5px solid rgb(242 246 253 / .35); border-bottom: 0;
  border-radius: 2.4rem 2.4rem 0 0; pointer-events: none;
  background: linear-gradient(180deg, rgb(242 246 253 / .06), rgb(242 246 253 / 0) 70%);
}
html.v-footer-kemer .ilt-cerceve-on { top: 30%; border-radius: 50vw 50vw 0 0 / 32vw 32vw 0 0; }

/* Sağ — sosyal medya: yalnız ikonlar, tek satır (isimler aria-label/title'da) */
.ilt-sag { justify-self: start; width: auto; }
.ilt-sag-etiket { margin: 0; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--etiket-ters, #8fb2ee); }
.ilt-kullanici { margin: .35rem 0 1.5rem; font-size: clamp(1.4rem, 1.9vw, 1.9rem); font-weight: 500; letter-spacing: -.02em; }
.ilt-sosyal { display: flex; flex-wrap: nowrap; gap: .5rem; }
.ilt-sos { display: block; color: inherit; text-decoration: none; border-radius: 50%; }
.ilt-sos .ilt-ikon { width: 3rem; height: 3rem; }
.ilt-sos .ilt-ikon svg { width: 1.3rem; height: 1.3rem; }
.ilt-sos-ad { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Tablet / mobil: başlık + kanallar üstte, başkan ortada, sosyal medya altta (fotoğraf kesilmesin diye sıra değişir) */
@media (max-width: 1100px) {
  .iletisim.ilt-yeni { grid-template-columns: 1fr 1fr; row-gap: 2.5rem; padding-bottom: 0; }
  .ilt-sol { grid-column: 1; padding-bottom: 0; }
  .ilt-sag { grid-column: 2; justify-self: start; padding-bottom: 0; align-self: end; }
  .ilt-orta { grid-column: 1 / -1; grid-row: 2; justify-self: center; width: min(26rem, 78vw); margin-top: 0; }
}
@media (max-width: 700px) {
  .iletisim.ilt-yeni { grid-template-columns: 1fr; padding-top: 3rem; }
  .ilt-sol, .ilt-sag { grid-column: 1; }
  .ilt-sag { grid-row: 2; justify-self: stretch; }
  .ilt-sosyal { justify-content: space-between; gap: .4rem; }
  .ilt-sos .ilt-ikon { width: clamp(2.6rem, 12vw, 3.1rem); height: clamp(2.6rem, 12vw, 3.1rem); }
  .ilt-orta { grid-row: 3; width: min(22rem, 84vw); margin-top: 1rem; }
  .ilt-yeni .iletisim-baslik { font-size: 2.6rem; }
}

/* 01.10 — Merhaba alt kısmı:
   1) "Güzel İşler’e Devam" altındaki yazı imza → kurumsal logo "Başkan - İmza + İsim Unvan Renkli" (SVG)
   2) Güzel İşler geçiş kartı: fotoğraf yerine Güzel İşler kırmızısı + rozet logosu (rozet kartın üstünden taşar, üzerine gelince döner)
   → src/pages/merhaba.astro (.imza, .gecis-kart) + görseller: baskan-imza-siyah.svg (01.10: renkli → siyah), guzel-isler-rozet.svg */
.kapanis .imza.imza-logo { display: block; margin: 1.75rem auto 0; width: min(20rem, 56vw); }
.kapanis .imza-logo img { display: block; width: 100%; height: auto; }

.gecis-kart.gk-yeni {
  position: relative; isolation: isolate; overflow: visible;
  display: flex; align-items: center; min-height: clamp(15rem, 22vw, 19rem);
  margin-top: clamp(6rem, 9vw, 8rem);
  padding: clamp(2rem, 4vw, 3.5rem) clamp(1.75rem, 5vw, 4.5rem);
  border-radius: var(--r-bolum, 2rem); color: #fff; text-decoration: none;
  background: linear-gradient(115deg, #e8440f 0%, #e5321a 45%, #e01d3d 100%);
  box-shadow: 0 30px 60px -30px rgb(224 29 61 / .55);
}
.gk-yeni .gk-isik {            /* rozetin arkasında yumuşak ışık + hafif yıldız deseni */
  position: absolute; inset: 0; z-index: -1; border-radius: inherit; overflow: hidden; pointer-events: none;
  background:
    radial-gradient(40% 80% at 80% 50%, rgb(255 214 120 / .35), transparent 70%),
    repeating-conic-gradient(from 0deg at 80% 50%, rgb(255 255 255 / .06) 0 6deg, transparent 6deg 15deg);
}
.gk-yeni .gecis-metin { position: relative; display: grid; gap: .6rem; max-width: 55%; }
.gk-yeni .gecis-ust { font-size: clamp(.95rem, 1.2vw, 1.15rem); color: rgb(255 255 255 / .9); }
.gk-yeni .gecis-baslik {
  display: inline-flex; align-items: center; gap: .9rem;
  font-size: clamp(2.6rem, 5.5vw, 5rem); line-height: 1; font-weight: 600; letter-spacing: -.03em; color: #fff;
}
.gk-yeni .gecis-baslik svg { width: .55em; height: .55em; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .35s var(--yumusak, ease); }
.gk-yeni .gk-rozet {
  position: absolute; right: clamp(1rem, 5vw, 5rem); top: 50%; z-index: 1;
  width: clamp(13rem, 25vw, 22rem); height: auto;
  transform: translateY(-58%) rotate(-8deg);
  filter: drop-shadow(0 22px 30px rgb(120 10 20 / .35));
  transition: transform .6s var(--yumusak, ease);
}
.gk-yeni:hover .gk-rozet { transform: translateY(-60%) rotate(4deg) scale(1.04); }
.gk-yeni:hover .gecis-baslik svg { transform: translateX(6px); }
.gk-yeni:focus-visible { outline: 3px solid var(--odak, #5790e6); outline-offset: 4px; }

@media (max-width: 700px) {
  .gecis-kart.gk-yeni { flex-direction: column; align-items: flex-start; min-height: 0; margin-top: 9rem; padding-top: 7.5rem; }
  .gk-yeni .gecis-metin { max-width: none; }
  .gk-yeni .gecis-baslik { white-space: nowrap; font-size: clamp(2.2rem, 11vw, 2.8rem); }
  .gecis-kart.gk-yeni { padding-left: 1.5rem !important; padding-right: 1.5rem !important; padding-bottom: 2rem; }
  .gk-yeni .gecis-metin { padding: 0 !important; }
  .mb-yeni ~ .kapanis .imza.imza-logo { margin-top: 1rem; }
  .gk-yeni .gk-rozet { top: 0; right: 50%; width: 13rem; transform: translate(50%, -45%) rotate(-8deg); }
  .gk-yeni:hover .gk-rozet { transform: translate(50%, -47%) rotate(4deg); }
  .gk-yeni .gk-isik { background: radial-gradient(70% 50% at 50% 0%, rgb(255 214 120 / .35), transparent 70%); }
}
/* 01.10 — Merhaba alt kısım (mobil): parola iki satır ve daha büyük, imza logosu küçük; Güzel İşler kartı daha alçak, rozet küçük, üst satır tek satır */
.parola-kir { display: none; }
@media (max-width: 700px) {
  .parola-kir { display: inline; }
  .mb-yeni ~ .kapanis .parola { font-size: clamp(2.6rem, 13vw, 3.6rem) !important; line-height: 1 !important; white-space: normal; }
  .mb-yeni ~ .kapanis .imza.imza-logo { width: min(11.5rem, 46vw); margin-top: -.5rem !important; }
  .mb-yeni ~ .kapanis .parola { margin-bottom: 0 !important; }
  .gecis-kart.gk-yeni { margin-top: 5.5rem; padding-top: 5rem; padding-bottom: 1.75rem; }
  .gk-yeni .gk-rozet { width: 8.5rem; transform: translate(50%, -50%) rotate(-8deg); }
  .gk-yeni:hover .gk-rozet { transform: translate(50%, -52%) rotate(4deg); }
  .gk-yeni .gecis-ust { white-space: nowrap; font-size: clamp(.7rem, 3.3vw, .9rem); }
}

/* 01.10 — Açılış animasyonu MOBİL: baret yok; yalnız iki öğe — üstte ortalı büyük "Güzel / İşler’e / Devam", altta ortada başkan
   → src/pages/index.astro (perde @media) */
@media (max-width: 800px) {
  .acilis-baret, .acilis-golge { display: none !important; }
  .acilis-yazi { left: 4vw; right: 4vw; top: calc(11svh + env(safe-area-inset-top, 0px)); text-align: center;
    transform: none; }
  .acilis-yazi > span { transform: skewX(-8deg); transform-origin: center; }
  .acilis-yazi .y1, .acilis-yazi .yb, .acilis-yazi .y2 { font-size: min(21vw, 10.5svh); line-height: .95; }
  .acilis-baskan { height: min(52svh, 120vw); }
}

/* 01.10 — Merhaba: Güzel İşler şeridi tam header genişliğinde (header: sol/sağ 2.5rem, max 84rem; ≥1400px'te 104rem).
   Kart .ust-sayfa içinde (yan dolgu 3rem) → 100% + 1rem = header'ın serbest genişliği. Rozet küçüldü.
   → src/pages/merhaba.astro */
@media (min-width: 701px) {
  .gecis-kart.gk-yeni { width: min(84rem, calc(100% + 1rem)); max-width: none; margin-inline: auto; }
  .gk-yeni .gk-rozet { width: clamp(9.5rem, 15vw, 15rem); right: clamp(1.5rem, 5vw, 5rem); }
  .gk-yeni .gecis-metin { max-width: 62%; }
}
@media (min-width: 1400px) {
  .gecis-kart.gk-yeni { width: min(104rem, calc(100% + 1rem)); }
}
@media (min-width: 701px) and (max-width: 1024px) {   /* .ust-sayfa yan dolgusu burada 1.5rem */
  .gecis-kart.gk-yeni { width: min(84rem, calc(100% - 2rem)); }
}
@media (min-width: 701px) and (max-width: 900px) {    /* header burada sol/sağ .75rem */
  .gecis-kart.gk-yeni { width: calc(100% + 1.5rem); }
}

/* 01.10 (2) — Güzel İşler şeridi daha alçak ve sade: rozet yazının hemen yanında, kartın içinde (taşmıyor);
   ışın deseni rozetin arkasında ortalı, kenarlara doğru sönüyor. Mobil eski hâliyle. → src/pages/merhaba.astro */
@media (min-width: 701px) {
  .gecis-kart.gk-yeni {
    overflow: hidden; justify-content: flex-start; gap: clamp(2rem, 4vw, 4rem);
    min-height: 0; margin-top: clamp(4rem, 6vw, 5.5rem);
    padding: clamp(1.25rem, 2vw, 1.75rem) clamp(2rem, 4vw, 3.5rem);
    box-shadow: 0 20px 40px -28px rgb(224 29 61 / .45);
  }
  .gk-yeni .gk-isik { background: none; }
  .gk-yeni .gecis-metin { max-width: none; gap: .35rem; }
  .gk-yeni .gecis-ust { font-size: clamp(.85rem, 1vw, 1rem); }
  .gk-yeni .gecis-baslik { font-size: clamp(2rem, 3.2vw, 3.25rem); font-weight: 600; }
  .gk-rozet-kap { position: relative; flex: none; width: clamp(6.5rem, 8vw, 8.5rem); aspect-ratio: 1; }
  .gk-rozet-kap::before {
    content: ''; position: absolute; left: 50%; top: 50%; z-index: -1; width: 320%; aspect-ratio: 1;
    translate: -50% -50%; border-radius: 50%; pointer-events: none;
    background:
      radial-gradient(closest-side, rgb(255 214 120 / .32), transparent 60%),
      repeating-conic-gradient(rgb(255 255 255 / .08) 0 5deg, transparent 5deg 15deg);
    -webkit-mask: radial-gradient(closest-side, #000 25%, transparent 100%);
            mask: radial-gradient(closest-side, #000 25%, transparent 100%);
  }
  .gk-yeni .gk-rozet {
    position: static; display: block; width: 100%; height: auto;
    transform: rotate(-8deg); filter: drop-shadow(0 10px 16px rgb(120 10 20 / .3));
  }
  .gk-yeni:hover .gk-rozet { transform: rotate(4deg) scale(1.05); }
}

/* 01.10 (3) — Güzel İşler şeridi: paragraf genişliğinde (69rem), daha ince; yazılar ortada;
   rozet kartın sağ dış çizgisinin üstünde, ona ortalı. Işınlar rozetin merkezinden (sağ kenar) çıkar ve kartın içinde kalır. */
@media (min-width: 701px) {
  .gecis-kart.gk-yeni {
    --rz: clamp(6rem, 7.5vw, 8rem);
    width: min(69rem, calc(100% - var(--rz))); overflow: visible;
    justify-content: center; text-align: center;
    padding: clamp(.85rem, 1.3vw, 1.15rem) calc(var(--rz) * .75);
  }
  .gk-yeni .gecis-metin { justify-items: center; gap: .25rem; }
  .gk-yeni .gecis-baslik { font-size: clamp(1.75rem, 2.6vw, 2.75rem); }
  .gk-yeni .gk-isik {
    background:
      radial-gradient(35% 90% at 100% 50%, rgb(255 214 120 / .32), transparent 70%),
      repeating-conic-gradient(from 0deg at 100% 50%, rgb(255 255 255 / .08) 0 5deg, transparent 5deg 15deg);
    -webkit-mask: radial-gradient(40% 140% at 100% 50%, #000 20%, transparent 100%);
            mask: radial-gradient(40% 140% at 100% 50%, #000 20%, transparent 100%);
  }
  .gk-rozet-kap { position: absolute; right: 0; top: 50%; width: var(--rz); translate: 50% -50%; }
  .gk-rozet-kap::before { content: none; }
}
@media (min-width: 701px) { .gk-yeni .gecis-metin { padding: 0; } }

/* 01.10 (2) — Footer: TEK mavi pano. Yüksekliği eski ince çerçeve kadar (omuz hizasından alta), genişlik tam.
   İç çizgi çerçeve kaldırıldı; başkanın başı ve omuz üstü panonun dışına (üstüne) taşar. Masaüstü; ≤1100px eski düzen. */
@media (min-width: 1101px) {
  .iletisim.ilt-yeni {
    --ow: clamp(18rem, 24vw, 26rem);              /* başkan sütunu genişliği */
    --pt: clamp(1.75rem, 2.5vw, 2.5rem);          /* pano üst dolgusu */
    grid-template-columns: minmax(0, 1fr) var(--ow) minmax(0, 1fr);
    padding-top: var(--pt); padding-bottom: 0;
    margin-top: calc(var(--ow) * 2457 / 2072 * .37 + 1.5rem);   /* taşan baş için üstte yer */
    overflow: visible;
    clip-path: inset(-100rem 0 0 0 round 0 0 var(--r-bolum, 2rem) var(--r-bolum, 2rem));
  }
  .ilt-yeni .ilt-orta { margin-top: calc(var(--ow) * 2457 / 2072 * -.37 - var(--pt)); }
  .ilt-yeni .ilt-cerceve-on { display: none; }
  .ilt-sol, .ilt-sag { padding-bottom: var(--pt); }
  .ilt-yeni .iletisim-baslik { margin-bottom: 1rem; font-size: clamp(2rem, 2.5vw, 2.75rem); line-height: 1; white-space: nowrap; }
  .ilt-yeni .iletisim-baslik br { display: none; }
  .ilt-yeni .ilt-kanal { padding: .55rem 0; }
  .ilt-yeni .ilt-ikon { width: 2.4rem; height: 2.4rem; }
  .ilt-yeni .ilt-deger { font-size: 1.05rem; }
}
@media (min-width: 1101px) { .ilt-yeni .ilt-baskan { filter: drop-shadow(0 18px 24px rgb(5 16 40 / .28)); } }

/* 02.10 — Hero başlıkları biraz daha kalın ve büyük; "7 Yılda" tek satır (masaüstü + mobil)
   → src/components/Hero.astro (.hero-baslik, .hero-tagline-buyuk; 2. slayt h1'e .hero-baslik-tek) */
.hero .hero-baslik:not(.hero-baslik-bos),
.hero .hero-tagline-buyuk {
  font-size: clamp(3.4rem, 7.4vw, 9.5rem) !important;
  font-weight: 650 !important;
}
.hero .hero-baslik-tek { display: flex; flex-wrap: nowrap; align-items: baseline; column-gap: .24em; }
.hero :is(.hero-baslik, .hero-tagline-buyuk) { font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1, "onum" 0; }
@media (max-width: 768px) {
  .hero .hero-baslik:not(.hero-baslik-bos),
  .hero .hero-tagline-buyuk { font-size: 14vw !important; }
}
/* 02.10 — Özgeçmiş: başkanın kendi metni (10 adım, daha uzun paragraflar) mobilde ekrana sığsın */
@media (max-width: 900px) {
  .oh-sahne { padding-top: 4.75rem; gap: 1rem; }
  .oh-deste { width: 64%; }
  .oh-sayac { margin-bottom: .9rem; }
  .oh-yil { font-size: 2.1rem; margin-bottom: .5rem; }
  .oh-paragraf { font-size: .97rem; line-height: 1.58; }
  .oh-ipucu { bottom: .75rem; }
}

/* 02.10 — Hero 1 (masaüstü): fotoğrafın alt kenarı hero'nun alt kenarına oturur.
   Görsel katmanı hero'dan uzun (top -2%, height 114% — parallax payı); alttaki %12'lik taşma fotoğrafı kesiyordu.
   Görüntü kutusu katmanın görünen kısmı kadar (102/114) ve alta hizalı. Kaydırınca parallax yine aşağı kaydırır.
   → src/components/Hero.astro */
@media (min-width: 769px) {
  .hero .hero-kat:nth-child(1) img { height: calc(100% * 102 / 114) !important; object-position: 50% 100% !important; }
}

/* 02.10 — Özgeçmiş destesi: kart çerçevesi fotoğrafın kendi en/boy oranına uyar (kırpma yok).
   Kartta --oran (genişlik / yükseklik) varsa: görüntü yüksekliği sabit (--oh-h), genişlik orana göre; dikey kartlar ortalanır.
   --oran'ı olmayan eski kartlar 3:2 olarak kalır. → src/pages/ozgecmis.astro */
.oh-deste { container-type: inline-size; --oh-h: 62cqw; }
.oh-kart[style*="--oran"] { left: 0; right: 0; margin-inline: auto; width: min(92%, calc(var(--oh-h) * var(--oran) + 2 * var(--oh-pad, .7rem))); }
.oh-kart[style*="--oran"] img { aspect-ratio: var(--oran); height: auto; object-fit: contain; }
@media (max-width: 900px) {
  /* Mobilde dar (dikey) kartlarda yazı 2–3 satıra taşıp sayaçla çakışıyordu → kart yazısı gizli, alt pay polaroid gibi kalın; yıl + paragraf zaten anlatıyor */
  .oh-deste { --oh-h: 66cqw; }
  .oh-kart { --oh-pad: .45rem; padding: .45rem .45rem 1.15rem; }
  .oh-kart figcaption { display: none; }
}

/* 02.10 — Özgeçmiş destesi büyütüldü: deste sütunu genişledi, kart yüksekliği arttı.
   Deste yüksekliği (genişlik × 0.825) ekran yüksekliğini aşmasın diye genişlik vh ile de sınırlı. → src/pages/ozgecmis.astro */
@media (min-width: 901px) {
  .oh-sahne { grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); gap: 3rem; }
  .oh-deste { width: min(100%, 50rem, calc((100vh - 8.5rem) / .825)); --oh-h: 68cqw; }
}
@media (max-width: 900px) {
  /* Mobil: deste neredeyse tam genişlik (yalnız sahnenin 1.25rem kenar payı kalır), üst çubuğun altından biraz aşağıda başlar.
     Kart yüksekliği (66cqw + alt pay) deste kutusuna (4:3.1) sığar. */
  .oh-sahne { padding-top: calc(4.75rem + 4vh); gap: calc(1.5rem + 4vh); }
  .oh-deste { width: 100%; }
  /* Paragraf bir tık küçük; altta güvenli alan: tarayıcı alt çubuğu (100svh) + iPhone çentik payı + "kaydırın" ipucu payı */
  .oh-paragraf { font-size: .92rem; line-height: 1.55; }
  .oh-sahne { height: 100svh; padding-bottom: calc(3rem + env(safe-area-inset-bottom)); }
  .oh-ipucu { bottom: calc(.75rem + env(safe-area-inset-bottom)); }
}

/* 02.10 — Özgeçmiş metni: 01/10 sayacı kaldırıldı, yıl büyüdü.
   Metin sütunu dikeyde ortalanmıyor, üste sabit: yıl hep aynı yerde durur, paragraf uzadıkça yalnızca aşağı doğru uzar.
   (Sayaç DOM'da duruyor, revize.js içine yazmaya devam ediyor; sadece görünmüyor.) → src/pages/ozgecmis.astro */
.oh-sayac { display: none; }
.oh-yil { font-size: clamp(3.75rem, 7.5vw, 6.5rem); margin-bottom: 1.5rem; }
@media (min-width: 901px) {
  /* Tipik adım (yıl + ~8 satır ≈ 26rem) desteyle ortalı gelecek kadar aşağıda, 2rem daha yukarıda; uzun paragraf aşağı taşar */
  .oh-metin { align-self: start; margin-top: max(0px, (100vh - 8rem - 26rem) / 2 - 2rem); }
}
@media (max-width: 900px) {
  .oh-yil { font-size: 2.9rem; margin-bottom: .6rem; }
}

/* 02.10 — Hero slayt barları: masaüstünde sol altta kalır, mobilde ortalı. → src/components/Hero.astro */
@media (width <= 768px) {
  .hero .hero-kupurler { justify-content: center; }
}

/* 02.10 (gece) — Mobil inceleme (Revizeler/2026-10-02-mobil). iPhone'da görünen alan ~680px (Chrome/Safari çubukları),
   PC'deki "İncele" 874px gösteriyordu → orada sığan düzen telefonda taşıyordu. */

/* Özgeçmiş (revize-01, 11): deste ekran yüksekliğine göre küçülür; paragrafa yer kalır.
   "Kaydırdıkça" ipucu yalnız ilk adımda; ⌃ butonu metnin üstünden alındı → yılın sağında. → src/pages/ozgecmis.astro */
@media (max-width: 900px) {
  .oh-sahne { --oh-ust: calc(4.75rem + 2vh); --oh-dh: min((100vw - 2.5rem) * .775, 100svh * .27); --oh-ara: calc(.75rem + 1.5vh);
    padding-top: var(--oh-ust); gap: var(--oh-ara); }
  .oh-deste { width: calc(var(--oh-dh) / .775); max-width: 100%; }
  .oh-yil { font-size: 2.6rem; margin-bottom: .5rem; }
  .oh-paragraf { line-height: 1.5; }
  .oh-ipucu { bottom: calc(.4rem + env(safe-area-inset-bottom)); }
  .oh-yukari { top: calc(var(--oh-ust) + var(--oh-dh) + var(--oh-ara) - 2px); bottom: auto; right: 1.25rem; width: 46px; height: 46px; }
  .oh-sahne:has(.oh-yukari.gorunur) .oh-ipucu { opacity: 0 !important; }
}
@media (max-width: 900px) and (max-height: 640px) {   /* küçük telefon (SE vb.) */
  .oh-sahne { --oh-dh: min((100vw - 2.5rem) * .775, 100svh * .22); --oh-ust: 4.6rem; }
  .oh-yil { font-size: 2.2rem; margin-bottom: .25rem; }
}

/* Merhaba + Özgeçmiş (revize-05, 11): dar ekranda iki yana yaslı metin kelime aralarını açıyordu → sola yaslı. */
@media (max-width: 640px) {
  .mektup-metin, .oh-paragraf, .mb-metin { text-align: left !important; }
}

/* ═══ 02.10 (gece) — YAZI ÖLÇEĞİ (Enes): sitedeki paragraflar 15,5–25px arası 9 farklı boydaydı → tek ölçü.
   Gövde = ana sayfa "Özgeçmişim" paragrafının (1rem / 1.6) bir tık altı: 0.9375rem / 1.55 → masaüstü 15/23px,
   telefonda kök yazı boyu ekranla büyüdüğü için aynı oranda (~16.7/26px).
   Bölüm başlığı = ana sayfa "Gündem" başlığı; ana sayfadaki bütün bölüm başlıkları bu boyda.
   Asıl projede → src/styles/tema.css :root değişkenleri + ilgili bileşenler. */
:root { --yazi-govde: .9375rem; --satir-govde: 1.55; --yazi-bolum: clamp(2.5rem, 3.8vw, 3.6rem); }
/* 02.10 gece (Enes): masaüstünde 15px "karınca yazısı" oldu → ölçek yalnız telefon/tablette; masaüstü eski boylarında. */
@media (max-width: 900px) {
  :is(.govde, .haber-ozet, .mektup-metin, .mb-metin, .oh-paragraf, .oh-son p, .gi-metin, .proje-ozet,
      .manset-ozet, .kart-ozet, .yazi-metin p, .karsilama-giris) {
    font-size: var(--yazi-govde) !important; line-height: var(--satir-govde) !important;
  }
}
:is(section.ozgecmis .bolum-baslik, section.haberler .bolum-baslik, section.serit .hayalet-baslik, section.iletisim .iletisim-baslik) {
  font-size: var(--yazi-bolum) !important; line-height: 1.05 !important;
}

/* 02.10 (gece) — Sayfa yolu ("Anasayfa / Anılarımız / Fotoğraflar") kaldırıldı (Enes): Fotoğraflar, 91 Güzel İş ve 50 haber detayı.
   → asıl projede bileşen çağrıları silinecek (nav.iz). */
nav.iz { display: none !important; }

/* 03.10 — Ana sayfa Gündem, mobil (revize-03, Enes onayı): üstte 1 büyük haber (başlık 2–3 satır, özet en fazla 3 satır),
   altında sık liste — her satırda solda küçük kare fotoğraf, sağda tarih + başlık (en fazla 3 satır), satırlar ince çizgiyle ayrılır.
   Önceki deneme (başlıksız 3'lü küçük fotoğraf) "büyük haberin fotoğrafları gibi" durduğu için kaldırıldı.
   Döner vitrin (data-haber-doner) haberleri yuvalar arasında taşıdığı için kurallar yuvaya göre yazıldı. → src/pages/index.astro / HaberKarti */
@media (max-width: 767px) {
  section.haberler .haber-duzen { display: block; }
  section.haberler .haber-vitrin .haber-baslik { font-size: 1.6rem !important; line-height: 1.18 !important; margin-top: .35rem; }
  section.haberler .haber-vitrin .haber-ozet { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  section.haberler .haber-sutun { display: block !important; margin-top: 1.75rem; border-top: 1px solid rgb(10 36 80 / .12); }
  section.haberler .haber-sutun .haber {
    display: grid !important; grid-template-columns: 5.75rem minmax(0, 1fr) !important; grid-template-rows: auto 1fr;
    column-gap: 1rem !important; row-gap: .3rem !important; align-items: start;
    padding: 1rem 0 !important; margin: 0 !important; border: 0 !important; border-bottom: 1px solid rgb(10 36 80 / .12) !important;
    background: none !important; box-shadow: none !important;
  }
  section.haberler .haber-sutun .haber-gorsel {
    grid-column: 1; grid-row: 1 / span 2; width: 5.75rem !important; height: auto !important; aspect-ratio: 1 / 1;
    border-radius: 12px; overflow: hidden; margin: 0 !important;
  }
  section.haberler .haber-sutun .haber-gorsel img { width: 100%; height: 100%; object-fit: cover; }
  section.haberler .haber-sutun .haber-tarih { grid-column: 2; grid-row: 1; display: block !important; margin: .1rem 0 0 !important; font-size: var(--yb-etiket) !important; letter-spacing: .12em; }
  section.haberler .haber-sutun .haber-baslik {
    grid-column: 2; grid-row: 2; display: -webkit-box !important; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    margin: 0 !important; font-size: 1.02rem !important; line-height: 1.32 !important; font-weight: 500;
  }
  section.haberler .haber-sutun :is(.haber-ozet, .haber-devam) { display: none !important; }
}

/* 02.10 (gece) — Merhaba mobil (Enes): "Merhaba," ile paragraf yakın; başkan ilk ekranda görünür.
   Güzel İşler kartı mobilde de web'deki gibi ince şerit: solda tek satır yazı, sağda rozet. → src/pages/merhaba.astro */
@media (max-width: 1024px) {
  .selam-el { margin-bottom: .35rem !important; }
}
@media (max-width: 700px) {
  .gecis-kart.gk-yeni {
    --rz: 4.75rem;
    flex-direction: row !important; align-items: center !important; justify-content: flex-start !important;
    margin-top: 3rem !important; min-height: 0 !important; overflow: visible;
    padding: .6rem calc(var(--rz) + .75rem) .6rem 1.25rem !important; border-radius: 999px;
    box-shadow: 0 16px 30px -22px rgb(224 29 61 / .5);
  }
  .gk-yeni .gecis-metin { gap: 0; padding: 0 !important; }
  .gk-yeni .gecis-ust { display: none; }
  .gk-yeni .gecis-baslik { font-size: 1.3rem !important; font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; gap: .5rem; }
  .gk-yeni .gk-isik {
    background:
      radial-gradient(30% 120% at 100% 50%, rgb(255 214 120 / .3), transparent 70%),
      repeating-conic-gradient(from 0deg at 92% 50%, rgb(255 255 255 / .08) 0 5deg, transparent 5deg 15deg);
    -webkit-mask: radial-gradient(45% 160% at 92% 50%, #000 15%, transparent 100%);
            mask: radial-gradient(45% 160% at 92% 50%, #000 15%, transparent 100%);
    border-radius: inherit;
  }
  .gk-rozet-kap { position: absolute; right: .35rem; top: 50%; width: var(--rz); aspect-ratio: 1; translate: 0 -50%; }
  .gk-yeni .gk-rozet { position: static !important; display: block; width: 100% !important; height: auto; transform: rotate(-8deg) !important;
    filter: drop-shadow(0 8px 12px rgb(120 10 20 / .3)); }
}

/* 02.10 (gece) — Güzel İşler haritası iPhone'da titriyordu: şerit her kaydırmada .12s geçişle geriden geliyordu.
   Sabitlenen (mobil) düzende geçiş yok, kaydırmaya birebir bağlı. → src/components/YolHaritasi.astro */
.yh.yh-sabit .yh-serit { transition: none !important; }

/* 02.10 (gece) — Güzel İşler kategori çubuğu (mobil, revize-07): koyu kapsül iri ve arkası saydamdı; yapışınca bölüm
   başlıklarının ("01 Verilerle Başiskele") üstüne biniyordu. Artık ince, arkası sayfa renginde tam şerit;
   içerik altından temiz geçer, başlıklar şeridin altında durur. → src/pages/guzel-isler/index.astro */
@media (max-width: 900px) {
  .gi-duzen .gi-cipler { top: 4.7rem !important; margin: 0 0 .5rem !important; padding: .4rem 1rem !important;
    grid-template-columns: 2.1rem minmax(0, 1fr) 2.1rem; gap: .5rem;
    background: var(--yuzey, #fbfcfe) !important; box-shadow: 0 10px 18px -16px rgb(10 36 80 / .35); }
  .gi-duzen .gi-cipler-ic { padding: .2rem !important; box-shadow: none !important; background: transparent; }
  .gi-duzen .gi-cip { min-height: 2.15rem !important; padding: .1rem .75rem !important; font-size: .9rem; }
  .gi-cip-ok { width: 2.1rem !important; height: 2.1rem !important; box-shadow: none !important; }
  .gi-icerik .gi-bolum { scroll-margin-top: 8rem; }
}

/* 02.10 (gece) — Mobil menü (revize-04): iPhone'da görünür alan ~680px; menü 661px tutuyordu, "Bana Yaz" ekran dışında kalıyordu.
   Satır yüksekliği ekran boyuna bağlı (kısa ekranda sık, uzun ekranda eski ferahlık), yazı bir tık küçük. → src/styles/tema.css */
@media (max-width: 900px) {
  html:not(.v-header-oval) .menu-panel { padding: .5rem 1.1rem calc(1rem + env(safe-area-inset-bottom)); }
  html:not(.v-header-oval) .menu-panel a:not(.menu-sosyal a):not(.menu-yaz) { min-height: clamp(42px, 6.6svh, 58px); font-size: 1.15rem; }
  html:not(.v-header-oval) .menu-baslik { padding-top: .8rem; padding-bottom: .2rem; }
  html:not(.v-header-oval) .menu-sosyal { margin-top: clamp(.6rem, 2svh, 1.25rem); }
  html:not(.v-header-oval) .menu-sosyal a { width: 2.75rem; height: 2.75rem; padding: 0; display: grid; place-items: center; }
  html:not(.v-header-oval) .menu-sosyal a svg { flex: none; width: 1.25rem; height: 1.25rem; }
  .menu-yaz { min-height: clamp(46px, 7svh, 58px); margin-top: clamp(.6rem, 2svh, 1rem); font-size: 1.05rem; }
}

/* 02.10 (gece) — Açılış (mobil, revize-13, Safari + Chrome): başkan ortanın solundan (-62%) başlayıp ortaya kayıyordu →
   "sağa kayarak başlıyor". Artık en baştan ortada; yalnız hafif büyüklükten oturur + belirir, yatay kayma yok. → src/layouts/Temel.astro */
@media (max-width: 900px) {
  .perde .acilis-baskan { transform: translateX(-50%) scale(1.04); transform-origin: 50% 100%;
    animation: acilis-baskan-m2 .85s cubic-bezier(.22,1,.36,1) .1s both !important; }
  @keyframes acilis-baskan-m2 { from { opacity: 0; transform: translateX(-50%) scale(1.04); } to { opacity: 1; transform: translateX(-50%) scale(1); } }
}
/* 02.10 (gece) — yedek sabitleme kaldırıldı (revize.js); pencere her durumda yalnız sticky. */
.yh.yh-yedek .yh-pencere { position: sticky; top: var(--yh-ust, 6rem); transform: none !important; }

/* 02.10 (gece, Enes) — Masaüstü paragraflar sabit: gövde 20px, haber metinleri 18px (eski 16 / 21.6 / 25 / 22 karmaşası).
   Satır aralığı 1.6. Telefon/tablet ölçeği yukarıdaki @media (max-width: 900px) bloğunda. → src/styles/tema.css */
@media (min-width: 901px) {
  :is(.govde, .mektup-metin, .mb-metin, .oh-paragraf, .oh-son p, .gi-metin, .proje-ozet, .karsilama-giris) {
    font-size: 20px !important; line-height: 1.6 !important;
  }
  :is(.haber-ozet, .manset-ozet, .kart-ozet, .yazi-metin p) { font-size: 18px !important; line-height: 1.6 !important; }
}

/* 03.10 (Enes: "efektler düzgün ama bölüm önce üstteki fotoğrafın üzerinden geçip sonra yerine kayıyor") — iPhone'da yapışkan
   harita kaydırma sırasında bir an yerinden oynuyordu ve hiçbir katman sırası olmadığı için banner'ın ÜSTÜNE çiziliyordu.
   Katmanlar sabitlendi: header (60) > banner (3) > Güzel İşler girişi (2) > harita (1). Harita oynasa bile banner'ın ve
   alttaki girişin altında kalır; görünür çakışma olmaz. Sarsıntının kaynağı (her karede maske yeniden çizimi) revize.js'te azaltıldı.
   → src/pages/guzel-isler/index.astro + src/components/YolHaritasi.astro */
@media (max-width: 900px) {
  .gi-ust { z-index: 3; isolation: isolate; }
  .yh { z-index: 1; isolation: isolate; }
  .yh.yh-sabit .yh-pencere { background: var(--yuzey, #fcfdff); transform: translateZ(0); }
  .yh + .gi-giris { position: relative; z-index: 2; background: var(--yuzey, #fcfdff); }
}

/* 03.10 — Hero mobil (revize-02, Enes'in tarifi): telefonda başlık yüzün üstüne geliyordu.
   • Fotoğraf yukarı: görsel doğal oranında (kırpmasız genişlik), kişinin başı header'ın hemen altına gelecek kadar yukarı kaydırılır.
     --bas = başın görseldeki yüksekliği (%, görsel boyuna göre); 1. slaytta baret header'ın altına hafif taşar.
   • Alttaki boşluk ve degradenin altı tam lacivert (fotoğrafı silmiş gibi), yazı o koyu alanda durur.
   • Alt açıklama küçük, başlığa yakın. Masaüstü değişmedi. → src/components/Hero.astro (mobil @media) + slayt verisi */
@media (max-width: 768px) {
  .hero .hero-gorsel { background: #0a2450; }
  .hero .hero-kat img {
    position: absolute; left: 0; right: auto; bottom: auto; top: calc(var(--hb-ust, 5.3rem));
    width: 100% !important; height: auto !important; aspect-ratio: 1080 / 2400; object-fit: cover;
    transform: translateY(calc(-1 * var(--bas, 25%))) !important;
  }
  .hero .hero-kat:nth-child(1) img { --bas: 22%; }
  .hero .hero-kat:nth-child(2) img { --bas: 27.5%; }
  .hero .hero-kat:nth-child(3) img { --bas: 23%; }
  .hero .hero-kat:nth-child(4) img { --bas: 17.5%; } /* 09.10: DSC_5816 (önce DSC_5819 için 30.5%) */
  .hero .hero-kat:nth-child(5) img { --bas: 27%; }
  .hero .hero-perde {
    background: linear-gradient(to top,
      #0a2450 0%, #0a2450 22%, rgb(10 36 80 / .88) 34%, rgb(10 36 80 / .45) 47%, rgb(10 36 80 / .12) 58%, rgb(10 36 80 / 0) 66%) !important;
  }
  .hero .hero-ic { margin-bottom: -1.6rem; }
  .hero .hero-altbaslik { font-size: .95rem !important; line-height: 1.45; opacity: .9; }
  .hero .hero-tagline-buyuk + .hero-altbaslik,
  .hero .hero-baslik + .hero-altbaslik { margin-top: .45rem !important; }
}
/* 03.10 — kısa telefonlarda (≤640px görünür yükseklik) başlık bir tık küçük: 3. slaytta yazı yüze değmesin */
@media (max-width: 768px) and (max-height: 640px) {
  .hero .hero-baslik:not(.hero-baslik-bos),
  .hero .hero-tagline-buyuk { font-size: 12.5vw !important; }
}

/* ═══ 03.10 — RENK DÜZENİ (Enes: "haberlerde açık mavi, başka yerde koyu lacivert, bazı yerlerde siyah/antrasit")
   Dökümde aynı lacivert 9 farklı soluklukta (%45–%86), Merhaba'da neredeyse siyah (#0c1a33), haber tarihleri mavi çıktı.
   Artık dört rol, her sayfa aynı:
     başlık  → --renk-baslik  (lacivert)
     gövde   → --renk-govde   (koyu, okunaklı, tek ton — özetler, paragraflar, haber metni)
     ikincil → --renk-ikincil (tarih, sayı, küçük bilgi satırı)
     vurgu   → --renk-vurgu   (yalnız tıklanan şey ve bölüm etiketi)
   Durum bildiren soluklar (seçili olmayan bölüm başlığı, süzgeç sayısı, ipucu, hover) bilerek dokunulmadı.
   Koyu zemindeki (hero, alt bölüm, video) beyaz yazılar değişmedi. → src/styles/tema.css (:root) + bileşenler */
:root {
  --renk-baslik: #0f2f63;
  --renk-govde: #1e2f4d;
  --renk-ikincil: #5f6f8a;
  --renk-vurgu: #2563c9;
}
/* gövde: tek ton, saydamlık yok */
:is(.haber-ozet, .kart-ozet, .proje-ozet, .gi-metin, .mektup-metin, .oh-son p, .yazi-metin p, .yazi-govde p, .govde, .mb-metin,
    .karsilama-giris, .kanal-alt, .deste-kart figcaption) {
  color: var(--renk-govde) !important; opacity: 1 !important;
}
.oh-paragraf { color: var(--renk-govde) !important; }          /* saydamlığı animasyona ait, yalnız renk */
.ozgecmis-duzen p:not([class]), main:has(.oh-hikaye) .sayfa-basi p:not([class]) { color: var(--renk-govde); opacity: 1; }
/* 04.10 — lacivert levha/kart üstündeki gövde yazısı beyaz (yukarıdaki tek-ton kuralı bunları koyuya boyuyordu) */
main:has(.oh-hikaye) .sayfa-basi .govde, .karsilama .karsilama-giris { color: #fff !important; }
/* ikincil: tarih, sayı, küçük bilgi */
:is(.haber-tarih, .yazi-tarih, .kart-tarih, .ay-yil, .kronik-son, .gi-sayi, .gi-kart-rakam, .rakam-etiket, .kanal-ad, span.vd-meta) {
  color: var(--renk-ikincil) !important; opacity: 1 !important;
}
.oh-ipucu, .suzgec-sayi { color: var(--renk-ikincil) !important; }   /* saydamlık durum bildirir, yalnız renk */
.vs-sira h3 { color: var(--renk-ikincil) !important; opacity: 1 !important; }
/* Merhaba'daki büyük söz ("Niyet hayır olunca…") siyah değil, başlık laciverti */
.parola { color: var(--renk-baslik) !important; }
/* söz kelime kelime yanar: sönük hâli lacivertin saydamı, yanınca başlık laciverti (04.10: !important tüm kelimeleri baştan açmıştı) */
.alinti .kelime { color: rgb(15 47 99 / .2) !important; }
.alinti .kelime.yandi { color: var(--renk-baslik) !important; }
/* vurgu yalnız tıklanan/etiket: "Haberi oku", kanal eylemi, bölüm etiketleri — zaten --aksan; burada sabitlenir */
:is(.haber-devam, .kanal-eylem, .eylem-fare, .komsu-etiket, .paylas-etiket, .parola-ust, .gi-etiket) { color: var(--renk-vurgu) !important; }
.gi-kart-rakam strong, .rakam-etiket strong { color: var(--renk-baslik); }   /* rakamın kendisi lacivert, etiketi ikincil */

/* ═══ 03.10 — YAZI ÖLÇEĞİ, 1. aşama: küçük yazılar. Dökümde masaüstünde 11,2–16 px arası 9, telefonda 7 farklı boy vardı.
   Artık iki boy:
     etiket (büyük harf, aralıklı — tarih, bölüm etiketi)  → --yb-etiket : masaüstü 14 px · telefon ~14,3 px
     küçük  (bilgi satırı, çip, "Haberi oku", sayaç)       → --yb-kucuk  : masaüstü 15 px · telefon ~15,6 px
   rem ile: telefonda kök boy ekrana göre ölçeklendiği için oran korunur. Rozetler ("CANLI", "YENİ") ve slayt adları bilerek dışarıda.
   → src/styles/tema.css + bileşenler */
:root { --yb-etiket: .875rem; --yb-kucuk: .9375rem; }
@media (max-width: 900px) { :root { --yb-etiket: .8rem; --yb-kucuk: .875rem; } }
:is(.haber-tarih, .yazi-tarih, .komsu-etiket, .paylas-etiket, p.etiket, .ilt-etiket, .ilt-sag-etiket, .parola-ust, .vs-sira h3) {
  font-size: var(--yb-etiket) !important;
}
:is(.kart-tarih, .kronik-son, .kanal-ad, .kanal-alt, .vd-meta, .gi-kart-rakam, .gi-sayi, .gi-no, .suzgec-dugme, .gi-cip, .haber-devam, .gecis-ust) {
  font-size: var(--yb-kucuk) !important;
}

/* ═══ 03.10 (Enes) — SAYFA HİZASI + SAYFA BAŞLIĞI: "biri solda biri daha sağda, biri geniş biri dar".
   Ölçüm (1440 px): içerik 60 / 80 / 144 / 192 px'ten başlıyordu (Gündem-Fotoğraflar / Güzel İşler / Merhaba-İletişim / detaylar);
   1920 px'te Gündem kenara kadar, detaylar ortada dar. Artık her iç sayfa LOGO ÇİZGİSİNDEN başlar, header'ın sağ kenarında biter.
   --ic = logonun gövde kenarından uzaklığı; header'ın genişlik kuralından türetilir (84rem / ≥1400px 104rem, kenardan 40px, logo içeride 33/37px).
   Okuma sütunları (haber/proje metni) dar kalır ama ortalanmaz, aynı sol çizgiden başlar. Telefonda tüm sayfalar 1.5rem.
   Sayfa başlıkları (Gündem, Fotoğraflar, Güzel İşler, Videolar) tek boy. → src/styles/tema.css + sayfa şablonları */
:root { --ic: 1.5rem; }
@media (min-width: 901px) { :root { --ic: calc(max(28px, (100% - 84rem) / 2) + 33px); } }
@media (min-width: 1400px) { :root { --ic: calc(max(28px, (100% - 104rem) / 2) + 37px); } }
:is(.ust-sayfa, article.yazi, article.proje, .gi-giris, .gi-duzen, .vd-bas, .vs-sinema, .vs-serit-bas, .vs-izgara-bolum) {
  max-width: none !important; margin-left: 0 !important; margin-right: 0 !important;
  padding-left: var(--ic) !important; padding-right: var(--ic) !important; box-sizing: border-box;
}
@media (min-width: 901px) {
  .ust-sayfa > :is(.mektup-bolum, .kapanis, .liste-basi, .manset, .kronik, .arsiv-basi, .arsiv),
  .ust-sayfa :is(section.mektup-bolum) {
    max-width: none !important; margin-left: 0 !important; margin-right: 0 !important;
  }
  article.yazi .yazi-kapak, article.proje .proje-gorsel { max-width: 66rem; margin-left: 0 !important; margin-right: 0 !important; }
}
/* 03.10 (Enes) — Gündem, Fotoğraflar, Videolar'daki büyük sayfa başlıkları kaldırıldı ("gereksiz büyük, başka sayfada yok").
   Başlık arama motoru ve ekran okuyucu için yerinde, yalnız görünmez. Merhaba'nın altındaki Güzel İşler kartı ve İletişim'deki
   fotoğraflı kutu eski boyuna/yerine döndü (fotoğraftaki "Güzel İşler" yazısı görünsün diye). */
:is(.ust-sayfa h1.sayfa-adi, .vd-bas h1) {
  position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important;
  clip: rect(0 0 0 0) !important; white-space: nowrap !important; margin: -1px !important; padding: 0 !important;
}
/* Güzel İşler başlığı (rozetli) tek büyük başlık olarak kalır */
:is(.gi-giris .gi-baslik) {
  font-size: clamp(2.75rem, 5.5vw, 5rem) !important; line-height: 1 !important; letter-spacing: -0.03em; font-weight: 500 !important;
}

/* Ana sayfa Özgeçmiş bölümü (04.10): buton "Devamı", metnin sonunda sağda; metin konumu eski hâlinde */
section.ozgecmis .ozgecmis-metin .dugme-cizgi { display: flex; width: fit-content; margin: 1.25rem 0 1.5rem 0; }
/* başkan biraz büyük: alttan sabit, yukarı ve yanlara doğru (yerleşimi etkilemez) */
@media (min-width: 1025px) { section.ozgecmis .ozgecmis-gorsel img.portre-dekupe { transform: scale(1.07); transform-origin: 50% 100%; } }
@media (max-width: 1100px) { section.ozgecmis .ozgecmis-metin .dugme-cizgi { margin-inline: auto; } }

/* Ana sayfa Gündem / Anılarımız (04.10): düğme "Tümü", mobilde de başlıkla aynı satırda, sağda */
@media (max-width: 1024px) {
  section .haberler-ust, section .serit-ust { flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 1rem; }
  section .haberler-ust > a, section .serit-ust > a { flex: none; min-height: 0; padding: .7rem 1.1rem; gap: .6rem; }
}

/* Merhaba (04.10, Enes): sayfa tam genişlik değil — eski dar yerleşim (72rem, ortada) ve eski büyük yazı boyları geri.
   Diğer sayfalar logo çizgisinde / 20px kalır. */
@media (min-width: 901px) {
  .ust-sayfa > section.mektup-bolum.mb-yeni { max-width: 72rem !important; margin-left: auto !important; margin-right: auto !important; }
  main .mb-yeni .mb-buyuk, main .mb-yeni .mb-giris .mektup-metin { font-size: clamp(1.3rem, 1.75vw, 1.7rem) !important; line-height: 1.5 !important; }
  main .mb-yeni.mb-alt .mektup-metin, main .mb-alt .mektup-metin { font-size: clamp(1.2rem, 1.5vw, 1.4rem) !important; line-height: 1.7 !important; }
}

/* Güzel İşler (04.10): açıklama cümlesi sağda değil, başlığın altında */
.gi-giris { grid-template-columns: 1fr !important; gap: 1rem; align-items: start; }
.gi-giris .gi-metin { max-width: 40rem; margin: 0; text-align: left; }

/* ═══ Güzel İşler üst görsel (04.10, Enes): mavi banner kalktı; ana sayfa hero'sunun 1. slayt fotoğrafı, hero ile AYNI çerçeve:
   masaüstü 100svh − 1.5rem, köşe --r-bolum; telefonda hero'nun kadrajı (baş header'ın altında, altı lacivert). ═══ */
.gi-ust { position: relative; margin: 0; padding: 0; background: #0a2450; border-radius: var(--r-bolum); overflow: hidden;
  min-height: calc(100svh - 1.5rem); height: auto; max-height: none; }
.gi-ust .gi-gorsel { position: absolute; inset: 0; }
.gi-ust .gi-gorsel picture { display: contents; }
.gi-ust .gi-banner { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; aspect-ratio: auto; object-fit: cover; object-position: 50% 50%;
  transform: none; border-radius: 0; }
.gi-ust .gi-perde { display: none; }
@media (max-width: 768px) {
  .gi-ust { margin: 0; height: auto; min-height: calc(100svh - 1.5rem); max-height: none; border-radius: var(--r-bolum); background: #0a2450; }
  .gi-ust .gi-banner { top: calc(var(--hb-ust, 5.3rem)); bottom: auto; left: 0; right: auto; width: 100% !important; height: auto !important;
    aspect-ratio: 1080 / 2400; object-fit: cover; transform: translateY(-22%) !important; }
  .gi-ust .gi-perde { display: block; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(to top, #0a2450 0%, #0a2450 22%, rgb(10 36 80 / .88) 34%, rgb(10 36 80 / .45) 47%, rgb(10 36 80 / .12) 58%, rgb(10 36 80 / 0) 66%); }
  .gi-ust .asagi-ok { bottom: 3.4rem; }
}

/* ═══ Güzel İşler üst görsel: slogan = Enes'in hazırladığı SVG (04.10, "Güzel İşlere Devam.svg"; beyaz, eğriye çevrilmiş) ═══
   Solda ortada, kenardan içeride; fotoğrafın soluna okunurluk için hafif lacivert degrade. Telefonda alttaki lacivert alanda. */
.gi-ust .gi-perde { display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to right, rgb(10 36 80 / .72) 0%, rgb(10 36 80 / .5) 28%, rgb(10 36 80 / 0) 56%); }
.gi-ust .gi-slogan { position: absolute; z-index: 2; display: block; height: auto; pointer-events: none;
  left: clamp(4rem, 8vw, 10rem); top: 50%; width: clamp(20rem, 33vw, 40rem); transform: translateY(-50%);
  filter: drop-shadow(0 .3rem 1.2rem rgb(5 20 50 / .35)); }
@media (max-width: 768px) {
  .gi-ust .gi-perde { background: linear-gradient(to top, #0a2450 0%, #0a2450 22%, rgb(10 36 80 / .88) 34%, rgb(10 36 80 / .45) 47%, rgb(10 36 80 / .12) 58%, rgb(10 36 80 / 0) 66%); }
  .gi-ust .gi-slogan { left: 50%; top: auto; bottom: 7rem; width: min(78vw, 22rem); transform: translateX(-50%); }
}

/* ═══ Videolar mobil (04.10, Enes: "dikey videolar küçük"): başlık satırı kalktı (h1 yalnız ekran okuyucuya; sayaç kartın üstünde),
   kart header'ın hemen altından alt düğme satırına kadar uzar ve en çok %94 genişliğe çıkar. Masaüstü değişmedi.
   Üstteki 02.10 !important katmanını geçmek için aynı özgüllükte !important. → video.css ═══ */
@media (max-width: 767px) {
  .vd-sayfa .vd-mobil .vr-bas { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .vd-sayfa .vd-mobil .vr-sayac { top: calc(4.75rem + .85rem) !important; right: 1.35rem !important; z-index: 30; color: #fff; text-shadow: 0 1px 6px rgb(0 0 0 / .55); font-size: .9rem; opacity: .95; }
  .vd-sayfa .vd-mobil .vr-kart { top: auto !important; bottom: calc(4.4rem + env(safe-area-inset-bottom, 0px)) !important;
    height: calc(100svh - 4.75rem - .6rem - 4.4rem - env(safe-area-inset-bottom, 0px)) !important; max-height: 190vw !important;
    width: min(94vw, calc((100svh - 4.75rem - .6rem - 4.4rem - env(safe-area-inset-bottom, 0px)) * .67)) !important; aspect-ratio: auto !important; }
  .vd-sayfa .vd-mobil .vr-yan { top: calc(4.75rem + .6rem + (100svh - 4.75rem - .6rem - 4.4rem) / 2) !important; }
}

/* ═══ Fotoğraflar mobil (04.10, Enes: "üstten çok boşluk, kenarlar boş"): lacivert panel header'ın hemen altından başlar,
   kenarlara .6rem kala yayılır; alttaki fotoğraf ağı da aynı kenar boşluğunda. Masaüstü değişmedi. ═══ */
@media (max-width: 767px) {
  .ust-sayfa.arsiv-sayfa { padding-top: 5.4rem !important; padding-left: .6rem !important; padding-right: .6rem !important; }
  .arsiv-sayfa .arsiv-basi { margin-top: 0; }
  .arsiv-sayfa .arsiv { padding-left: .6rem; padding-right: .6rem; }
}

/* ═══ Anılarımız yıl/ay bölümleri (05.10, Enes: "Gündem gibi 2026 — Ocak, Şubat… diye gitsin").
   Fotoğraflar EXIF çekim tarihine göre aylara ayrılır (_araclar/anilar_olustur.py üretir); ay etiketi Gündem'deki gibi
   solda kaydırırken yapışık kalır, telefonda üstte şerit olur. Henüz açılmamış (hidden) kareleri olan ay/yıl gizli kalır,
   kaydırdıkça açılır. Tarihsiz eski galeri en altta "Arşivden". → src/components/FotoListesi.astro ═══ */
.ani-aylar { display: block; }
.ani-yil { margin: 4.5rem 0 0; font-size: clamp(3rem, 7vw, 6rem); line-height: .9; font-weight: 500; letter-spacing: -.04em;
  font-variant-numeric: tabular-nums; color: var(--metin, currentColor); }
.ani-aylar > .ani-yil:first-child { margin-top: 0; }
.ani-ay { display: grid; grid-template-columns: 10rem minmax(0, 1fr); column-gap: 3rem; margin-top: 3.5rem; padding-top: 2.5rem;
  border-top: 1px solid var(--cizgi); }
.ani-yil + .ani-ay { margin-top: 2rem; }
.ani-ay-etiket { position: sticky; top: 7rem; align-self: start; display: grid; margin: 0; line-height: 1.05; font-weight: 500; }
.ani-ay-etiket .ay-ad { font-size: 1.75rem; letter-spacing: -.02em; }
.ani-ay-etiket .ay-yil { font-size: 1rem; opacity: .55; margin-top: .25rem; font-variant-numeric: tabular-nums; }
.ani-ay-sayi { margin-top: .9rem; font-size: .875rem; font-weight: 400; opacity: .55; }
.ani-ay:not(:has(.foto:not([hidden]))),
.ani-yil:not(:has(+ .ani-ay .foto:not([hidden]))) { display: none; }
@media (max-width: 1024px) {
  .ani-ay { grid-template-columns: 1fr; margin-top: 2.5rem; padding-top: 0; border-top: 0; }
  .ani-ay-etiket { top: 5.25rem; z-index: 2; display: flex; align-items: baseline; gap: .6rem; padding: .75rem 0; margin-bottom: 1rem;
    background: var(--yuzey); border-bottom: 1px solid var(--cizgi); box-shadow: 0 -2rem 0 0 var(--yuzey); }
  .ani-ay-etiket .ay-yil { margin-top: 0; }
  .ani-ay-sayi { margin: 0 0 0 auto; }
  .ani-yil { margin-top: 3rem; }
}
@media (max-width: 767px) { .ani-ay-etiket { top: 4.75rem; } }
/* Aynı satırda orta + küçük kare olunca küçükler satır yüksekliğine uzayıp (aspect-ratio) sağa taşıyordu → genişlik sabit. */
.ani-aylar .foto a { width: 100%; }

/* ═══ Gündem kategori düğmeleri (05.10, Enes: "en üstte olmasın, fotoğraf kutusunun altına"): süzgeç manşetin altına
   taşındı (haberler/index.html). Manşetle ve ilk ayla arasında boşluk; telefonda yatay kayan şerit aynı kaldı.
   → src/pages/haberler/index.astro ═══ */
.ust-sayfa > .suzgec { margin-top: 1.5rem; }
@media (max-width: 1024px) { .ust-sayfa > .suzgec { margin-top: 1rem; } }

/* ═══ Hero 1 masaüstü = Güzel İşler üst görseli (05.10, Enes: "anasayfada fotoğraf daha yukarıda, Güzel İşler gibi aşağı çek").
   02.10'daki "alta otur" kuralı fotoğrafı kutudan 18px uzun ve alta hizalı çiziyordu → başkan Güzel İşler'e göre yukarıda.
   Artık görüntü kutusu tam hero kutusu kadar (katman top -2% / height 114% → içte 2/114 aşağı, 100/114 boy), ortalı (50% 50%):
   kaydırma başındayken Güzel İşler'deki .gi-banner ile aynı kadraj. Parallax kaydırınca yine aşağı kaydırır. → src/components/Hero.astro ═══ */
@media (min-width: 769px) {
  .hero .hero-kat:nth-child(1) img { position: absolute; left: 0; top: calc(100% * 2 / 114); width: 100%;
    height: calc(100% * 100 / 114) !important; object-position: 50% 50% !important; }
}

/* ═══ Güzel İşler ALTERNATİF üst görsel (05.10, Enes'in Photoshop tasarımı: baret + yelekli başkan ortada, iki yanda proje eskizleri).
   Sayfa: /guzel-isler-alternatif/ (asıl /guzel-isler/ değişmedi). Yatay "Yatay 2" 2560×1600 (baş boşluğu tasarımda; üstten hizalı), dikey "Dikey 2" 1080×2400.
   Enes (05.10): masaüstünde slogan asıl Güzel İşler'deki yerinde (solda ortada, aynı boy) + soldan GÜÇLÜ mavi degrade;
   telefonda SVG büyük + aşağıdan yukarı degrade (diğer sayfalardaki gibi). ═══ */
.gi-ust-tasarim .gi-banner { object-position: 50% 0%; }
.gi-ust-tasarim .gi-perde { display: block !important;
  background: linear-gradient(to right, rgb(10 36 80 / .82) 0%, rgb(10 36 80 / .62) 18%, rgb(10 36 80 / .3) 31%, rgb(10 36 80 / 0) 41%) !important; }  /* yüze (≈%45) ulaşmaz */
@media (max-width: 768px) {
  /* Kutu ve yerleşim asıl Güzel İşler'deki gibi (Enes: "kutu yüksekliğini bozma, binsin"); yalnız kadraj: baret header'ın hemen altında. */
  .gi-ust-tasarim .gi-banner { aspect-ratio: 1080 / 2400; transform: translateY(-6%) !important; }
  .gi-ust-tasarim .gi-perde { background: linear-gradient(to top, #0a2450 0%, #0a2450 16%, rgb(10 36 80 / .9) 28%, rgb(10 36 80 / .55) 40%, rgb(10 36 80 / .15) 52%, rgb(10 36 80 / 0) 62%) !important; }
  .gi-ust-tasarim .gi-slogan { width: min(70vw, 20rem); bottom: 6.6rem; }
}

/* 06.10 — İletişim: "Doğrudan ulaşın" başlığı kaldırıldı, iletişim listesi ortada (tek sütun).
   Başlık "Kapımız herkese açık" → "Birlikte yönetiyoruz" (İletişim + ana sayfa footer).
   Header ve mobil menüye NSosyal ikonu eklendi. → src/pages/iletisim.astro, Header.astro, Footer */
.izgara.izgara-orta { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.izgara-orta .kanal-listesi { width: 100%; max-width: 46rem; }

/* ═══ 07.10 (Enes) — İletişim: liste üstünde iki çizgi vardı; bölümün geniş üst çizgisi kalktı, listenin kendi çizgisi kaldı.
   → src/pages/iletisim.astro (.izgara border-top) */
.izgara.izgara-orta { border-top: 0; padding-top: 0; }

/* ═══ 07.10 (Enes) — Ana sayfa alt bölüm (footer): genişlik Gündem bölüm kutusu kadar (1344px, ortalı — Enes: mavi alan gerekirse biraz geniş olabilir; panel yüksekliği ve başkan büyüdü, üst boşluk = başın taşma payı; başkan ortada kalır),
   adres iki satır. → src/pages/index.astro (iletisim bölümü) */
.ilt-adres > span { display: block; }
/* adres satırında ok alt satıra iner; yazı ok sütununa kadar uzanabilir (ilk satır oka binmez) */
.ilt-kanal:has(.ilt-adres) .ilt-yazi { grid-column: 2 / 4; grid-row: 1; }
.ilt-kanal:has(.ilt-adres) .ilt-ok { grid-column: 3; grid-row: 1; align-self: end; margin-bottom: .2rem; }
@media (max-width: 700px) { .ilt-adres { font-size: 1rem; } }
@media (min-width: 1101px) { .ilt-yeni .ilt-adres { font-size: min(1.05rem, 1.25vw); } }
@media (min-width: 1101px) {
  .iletisim.ilt-yeni { width: min(1344px, calc(100% - 48px)); margin-left: auto; margin-right: auto;
    --ow: clamp(23rem, 30vw, 27rem); --pt: clamp(3rem, 4vw, 4.25rem);
    column-gap: 3rem; padding-left: 3rem; padding-right: 3rem; margin-top: 7.5rem; }
}
@media (min-width: 1101px) and (max-width: 1220px) { .iletisim.ilt-yeni { --ow: 20.5rem; column-gap: 2.25rem; padding-left: 2.25rem; padding-right: 2.25rem; } }

/* ═══ 07.10 (Enes) — Özgeçmiş mobil: yıl + metin (ve yanındaki ⌃ butonu) biraz aşağı; kayma ekran yüksekliğine göre
   (680px iPhone ≈ 20px, 844px ≈ 4rem, ≤640px hiç — en uzun paragraf hep sığar). Paragraf sonunda tek kelimelik kısa satır
   kalmasın (text-wrap: pretty); "Kaydırdıkça hikâye ilerler" tek satır. → src/pages/ozgecmis.astro */
@media (max-width: 900px) {
  .oh-sahne { --oh-kay: clamp(0px, (100svh - 640px) / 2, 4rem); }
  .oh-metin { margin-top: var(--oh-kay); }
  .oh-yukari { top: calc(var(--oh-ust) + var(--oh-dh) + var(--oh-ara) + var(--oh-kay) - 2px); }
  .oh-paragraf { text-wrap: pretty; }
  .oh-ipucu { white-space: nowrap; }
}

/* 08.10 — 4. slayt "En Sağlam / Kalemiz, Ailemiz": telefonda 3 satır (En Sağlam / Kalemiz, / Ailemiz), yoksa 16 harflik satır yazıyı çok küçültüyor */
@media (max-width: 768px) {
  .hero .hero-baslik-3m { --harf: 9 !important; }
  .hero .hero-baslik-3m .hb-p { display: block; }
  .hero .hero-baslik-3m .hb-p + .hb-p { margin-top: -.27em; }
}

/* 08.10 — Özgeçmiş metni başkanın Word dosyasındaki 1. tekil şahıs metniyle değişti; 2004 paragrafı telefonda 1 satır uzadı.
   Metnin aşağı kayması 640px yerine 690px'ten sonra başlar (680px'te kayma yok → en uzun paragraf altta ~21px payla sığar). */
@media (max-width: 900px) {
  .oh-sahne { --oh-kay: clamp(0px, (100svh - 690px) / 2, 4rem); }
}
/* 09.10 — Merhaba paragrafları oturtuldu (Enes: "paragraflar garip duruyor"):
   • iki yana yaslama kalktı (kelime araları açılıyordu) → sola yaslı, son satırda tek kelime kalmaz
   • alttaki uzun metin tam genişlik (~130 harf/satır) yerine ortada okunur mektup sütunu (~70 harf), imzayla aynı eksende
   → src/pages/merhaba.astro */
main .mb-yeni .mektup-metin { text-align: left !important; hyphens: manual !important; text-wrap: pretty; }
main .mb-yeni .mb-giris .mektup-metin { text-wrap: pretty; }
@media (min-width: 769px) {
  main .mb-alt { max-width: 46rem; margin-left: auto; margin-right: auto; }
  main .mb-yeni.mb-alt .mektup-metin, main .mb-alt .mektup-metin {
    font-size: clamp(1.125rem, 1.3vw, 1.25rem) !important; line-height: 1.75 !important; margin-bottom: 1.35em;
  }
}
/* 09.10 — Güzel İşler üst görseli "Yatay 3" (başkan masaya eğilmiş): masaüstünde ALTTAN hizalı, masa görünsün (Enes).
   Önceki "Yatay 2" üstten hizalıydı (50% 0%). Telefon ayrı dikey görsel, değişmedi. → src/pages/guzel-isler.astro */
@media (min-width: 769px) { .gi-ust-tasarim .gi-banner { object-position: 50% 100% !important; } }

/* 10.10 (Enes: "özgeçmiş mobil — fotoğraflar büyüyebilir, metinler rahat sığıyor") — Özgeçmiş destesi telefonda büyür.
   Deste yüksekliği: eski sınır %27 svh idi; ekran uzadıkça artan pay eklendi.
   DÜZELTME (10.10, Enes: "yazılar ve fotoğraflar sağa kaymış"): genişlik sınırı sahnenin gerçek iç genişliğine (100vw − 4.25rem: sayfa kenarı 2×13px + sahne payı 2×1.25rem)
   bağlandı ve ızgara sütunu minmax(0,1fr) yapıldı — uzun telefonlarda (393–430 px) deste sütundan taşıp sayfayı sağa genişletiyordu (scrollWidth > ekran). → src/pages/ozgecmis.astro */
@media (max-width: 900px) and (min-height: 641px) {
  .oh-sahne { grid-template-columns: minmax(0, 1fr); --oh-dh: min((100vw - 4.25rem) * .775, 100svh * .27 + max(0px, 100svh - 680px) * .25); }
}
@media (max-width: 900px) {
  .oh-sahne { grid-template-columns: minmax(0, 1fr); }
}

/* 10.10 (Enes: "mobilde fotoğraf çerçeveleri çok kalın") — Özgeçmiş destesi telefonda ince çerçeve: yan/üst .45 → .22 rem, alt 1.15 → .4 rem.
   Genişlik formülü --oh-pad'i kullandığı için fotoğrafın kendisi de hafif büyür. → src/pages/ozgecmis.astro */
@media (max-width: 900px) {
  .oh-kart { --oh-pad: .22rem; padding: .22rem .22rem .4rem; }
}

/* 10.10 (Enes: "fotoğraflar hâlâ küçük, boşluk var, biraz daha büyüsün") — Özgeçmiş destesi telefonda ekranın görünür yüksekliğine göre en büyük boya çıkar.
   Neden öncekiler küçük kaldı: iPhone Safari'de 100svh ≈ 680 px; önceki formül yalnız 750+ px ekranlarda büyütüyordu. Şimdi boy,
   kullanılabilir yükseklikten en uzun paragrafın (2004, 423 harf; dar ekranda daha çok satır) payı ve emniyet payı düşülerek bulunur:
   üst pay 4,75rem+2vh → 4,5rem+1vh, alt pay 3rem → 2,4rem, "kay" payı (yılı aşağı iten) 0, ara 0,85rem. Deste, kenar boşluğuna 0,9rem taşar (daha geniş foto).
   Ölçüm: en uzun paragraf altında ≥ ~20 px boşluk kalır. ≤640 px yükseklikte dokunulmaz. → src/pages/ozgecmis.astro */
@media (max-width: 900px) and (min-height: 641px) {
  .oh-sahne { --oh-ust: calc(4.5rem + 1vh); --oh-ara: .85rem; --oh-kay: 0px; padding-bottom: calc(2.4rem + env(safe-area-inset-bottom));
    --oh-dh: min((100vw - 2.5rem) * .775, 100svh * .99 - 8rem - var(--oh-th, calc(277px + max(0px, 390px - 100vw) * .85)) - 1.65rem); }
  .oh-deste { margin-inline: -.9rem; width: min(calc(100% + 1.8rem), calc(var(--oh-dh) / .775)); max-width: none; }
  .oh-yil { margin-bottom: .35rem; }
}

/* 10.10 — Deste boyu adımın kendi metin boyuna göre (revize.js `--oh-th`): kısa metinli adımlarda foto büyür, uzunda küçülür; geçiş yumuşak. */
@media (max-width: 900px) and (min-height: 641px) {
  .oh-deste { transition: width .45s cubic-bezier(.3, .8, .3, 1); }
  .oh-yukari { transition: top .45s cubic-bezier(.3, .8, .3, 1), opacity .3s; }
}

/* Güzel İşler yol haritası — kaydırmaya bağlı animasyon kareleri (11.10: revize.js 08.10'da bu adları kuruyordu, kareleri eksikti → harita hiç ilerlemiyordu) */
@keyframes yh-kay { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(var(--yh-fark, 0px) * -1), 0, 0); } }
@keyframes yh-ciz { from { stroke-dashoffset: var(--L, 0); } to { stroke-dashoffset: 0; } }
@keyframes yh-gor { from { opacity: 0; } to { opacity: 1; } }
@keyframes yh-belir { from { opacity: 0; } to { opacity: 1; } }
@keyframes yh-baloncuk { from { opacity: 0; transform: scale(.35); } to { opacity: 1; transform: none; } }