/* ---------- İç sayfalar: ortak ---------- */
.sayfa { padding: clamp(120px, 20vh, 220px) var(--kenar) 0; }
.sayfa__baslik { font-family: var(--font-baslik); font-weight: 700; letter-spacing: -.03em; font-size: var(--fs-bolum); line-height: 1.02; margin-bottom: clamp(28px, 5vh, 56px); }
.sayfa__giris { font-size: var(--fs-giris); max-width: 40ch; margin-bottom: 32px; }
.sayfa__giris--roman { max-width: 34em; font-family: var(--font-vurgu); font-style: italic; font-weight: 400; font-size: clamp(22px, 2vw, 34px); line-height: 1.45; letter-spacing: -.005em; }
.sayfa__metin p { max-width: 62ch; }
.sayfa__metin p + p { margin-top: 1.1em; }
.sayfa__dugmeler { display: flex; flex-wrap: wrap; gap: 12px; }

.sayfa--iki { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.sayfa__gorsel img { display: block; width: 100%; height: auto; max-height: 76svh; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 0; filter: contrast(1.05); }
/* Geniş ekranda Hakkımda portresi kutu değil: yazının bittiği yerden ekranın sağ kenarına, üst çubuğun altından ekranın
   dibine kadar olan alanın tamamını kaplar; ortadan büyür, şapka hep görünür, ekran oranına göre altı kırpılabilir. Kenarları
   ve altı sayfanın karanlığına erir; açılışta gölgenin içinden aydınlanarak çıkar. Metin sol sütunda, kendi eninde, dikey ortada. */
@media (min-width: 821px) {
  .sayfa--iki { --ust-bosluk: clamp(120px, 20vh, 220px); --alt-bosluk: clamp(48px, 8vh, 96px);
    grid-template-columns: minmax(0, 62ch) minmax(0, 1fr); min-height: 100svh; padding-top: var(--ust-bosluk); padding-bottom: var(--alt-bosluk); }
  .sayfa--iki .sayfa__gorsel { grid-column: 2; grid-row: 1; align-self: stretch; position: relative; pointer-events: none; container-type: size;
    margin: calc(var(--ust-h) - var(--ust-bosluk)) calc(-1 * var(--kenar)) calc(-1 * var(--alt-bosluk)) 0; }
  /* En fazla 90cqh genişler: portrenin (≈0,56) boyunun en az üçte ikisi görünür kalır, geniş ekranda yalnız yüze inmez */
  .sayfa--iki .sayfa__gorsel img { position: absolute; inset: 0; margin-inline: auto; width: min(100cqw, 90cqh); height: 100%; max-height: none; aspect-ratio: auto; object-fit: cover; object-position: 50% 0;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 16%, #000 84%, transparent), linear-gradient(to bottom, transparent, #000 5%, #000 62%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent, #000 16%, #000 84%, transparent), linear-gradient(to bottom, transparent, #000 5%, #000 62%, transparent);
    mask-composite: intersect;
    animation: portre-golgeden 1.8s var(--ease-cikis, ease-out) both .15s; }
}
@keyframes portre-golgeden { from { opacity: 0; filter: contrast(1.05) brightness(.15) blur(6px); transform: translateY(18px) scale(1.02); }
  to { opacity: 1; filter: contrast(1.05) brightness(1) blur(0); transform: none; } }
@media (prefers-reduced-motion: reduce) { .sayfa--iki .sayfa__gorsel img { animation: none; } }
@media (max-width: 820px) {
  .sayfa--iki { grid-template-columns: 1fr; padding-top: 88px; }
  .sayfa__gorsel { order: -1; }
  .sayfa__gorsel img { aspect-ratio: auto; height: 46svh; }  /* başlık ilk ekranda kalsın */
}

.sayfa--hata { min-height: 70svh; }

/* ---------- Proje detayı ---------- */
.proje__bas { padding: clamp(120px, 20vh, 220px) var(--kenar) clamp(48px, 8vh, 96px); }
.proje__ad { font-family: var(--font-baslik); font-weight: 700; letter-spacing: -.03em; font-size: var(--fs-dev); line-height: 1.02; letter-spacing: -.01em; }
.proje__ad::after { content: ""; display: block; width: 1.4em; height: 6px; margin-top: .18em; background: var(--vurgu); }
.proje__hikaye { max-width: 46ch; margin-top: clamp(28px, 5vh, 48px); font-size: var(--fs-giris); }
.proje__hesaplar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 32px; }
.proje__izle { color: var(--sis); margin-right: 4px; }

/* Sosyal medya videoları: hepsi aynı düzende, kendi oranlarında. Dikey projelerde 5 sütun (daralınca 3, 2); yatay projede
   ilk video geniş, kalanlar 2 sütun. Telefonda dikeyler 2 sütun, yataylar tek sütun. */
.videolar { display: grid; gap: clamp(14px, 1.6vw, 28px); padding: 0 var(--kenar); }
.videolar--dikey { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.videolar--yatay { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.videolar--yatay .video:first-child { grid-column: 1 / -1; justify-self: center; width: min(100%, 1180px); }
.video { position: relative; aspect-ratio: var(--oran, .5625); overflow: hidden; border-radius: 14px; background: var(--sahne);
  box-shadow: 0 0 0 1px rgba(232, 226, 212, .08), 0 24px 50px -24px rgba(0, 0, 0, .7); }
.video video { display: block; width: 100%; height: 100%; object-fit: cover; background: transparent; }
.video:focus-within { box-shadow: 0 0 0 2px var(--vurgu), 0 24px 50px -24px rgba(0, 0, 0, .7); }
@media (max-width: 1100px) { .videolar--dikey { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .videolar--dikey { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .videolar--yatay { grid-template-columns: minmax(0, 1fr); }
}

/* Galeri: fotoğrafçının kontak baskısı gibi, görseller kendi oranlarında */
.proje__kapak { position: relative; overflow: hidden; margin: 0 var(--kenar) clamp(48px, 8vh, 96px);
  width: min(calc(100% - 2 * var(--kenar)), calc(82vh * var(--oran))); aspect-ratio: var(--oran); background: var(--vurgu); }
.proje__kapak img { width: 100%; height: 100%; object-fit: cover; }

.galeri { columns: 3 320px; column-gap: clamp(12px, 1.6vw, 24px); padding: 0 var(--kenar); }
.galeri__oge { display: block; margin-bottom: clamp(12px, 1.6vw, 24px); break-inside: avoid; overflow: hidden; background: var(--sahne); cursor: zoom-in; }
.galeri__oge--dongu { position: relative; cursor: auto; }
.galeri__oge--dongu img { height: 100%; object-fit: cover; }
.galeri__oge img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-cikis), filter .6s var(--ease-cikis); filter: brightness(.92); }
.galeri__oge:hover img, .galeri__oge:focus-visible img { transform: scale(1.025); filter: brightness(1); }

.proje__sonraki { padding: var(--bolum-arasi) var(--kenar) 0; }
.proje__sonraki a { display: inline-block; text-decoration: none; }
.proje__sonraki-etiket { display: block; color: var(--sis); margin-bottom: 8px; }
.proje__sonraki-ad { display: block; font-family: var(--font-baslik); font-weight: 700; letter-spacing: -.03em; font-size: var(--fs-bolum); line-height: 1.02;
  background: linear-gradient(var(--vurgu), var(--vurgu)) 0 100% / 0 6px no-repeat; transition: background-size .6s var(--ease-cikis); }
.proje__sonraki a:hover .proje__sonraki-ad, .proje__sonraki a:focus-visible .proje__sonraki-ad { background-size: 100% 6px; }

/* ---------- Lightbox ---------- */
.lightbox { margin: auto; padding: 0; border: 0; background: transparent; max-width: 94vw; max-height: 92vh; overflow: visible; }
.lightbox::backdrop { background: rgb(8 9 10 / .92); }
.lightbox__gorsel { max-width: 94vw; max-height: 92vh; width: auto; height: auto; object-fit: contain; }
.lightbox__kapat { position: fixed; top: 16px; right: 16px; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--kagit);
  background: var(--karanlik-oda); color: var(--kagit); font-size: 28px; line-height: 1; cursor: pointer; }
.lightbox__kapat:hover { background: var(--kagit); color: var(--karanlik-oda); }

/* Proje sayfasında hesap düğmeleri projenin vurgu rengini alır (çerçeve ve üzerine gelince dolgu). */
.proje .dugme { box-shadow: inset 0 0 0 1px var(--vurgu); }
.proje .dugme::before { background: var(--vurgu); }