/* =====================================================
   idil's book of works — marka kimliği kitabından alınan tasarım dili

   İçindekiler
   1. Değişkenler (renkler, ölçüler, yazı tipleri)
   2. Temel
   3. Ortak parçalar (bölüm, etiket, buton, "next" linki)
   4. Menü
   5. Alt bilgi
   6. "let's work together"
   7. Ana sayfa
   8. Kategori sayfası (kapak, proje kartları, kaydırılabilir görseller)
   9. Proje detay sayfası (galeri, büyük görsel görüntüleyici)
  10. About
  11. Contact
  12. Belirme animasyonu
  13. Ekran boyutlarına göre ayarlar
   ===================================================== */

/* ---------- 1. Değişkenler ---------- */
:root {
  --bg: #f5f5f5; /* kitap görsellerinin zeminiyle aynı: görseller çerçevesiz durur */
  --surface: #ffffff;
  --text: #1a1a1a;
  --text-soft: #3d3d3d;
  --muted: #6e6e6e;
  --line: #e2e2e2;
  --red: #d94f5c;
  --yellow: #f3c64e;
  --orange: #e27a55;
  --navy: #3b3f8f;
  --lavender: #c7c9f4;
  --peach: #f6c9b0;
  --radius: 22px;
  --gutter: clamp(16px, 3.5vw, 48px);
  --max: 1360px;
  --sans: "Geist", system-ui, -apple-system, sans-serif;
  --mono: "Geist Mono", ui-monospace, Menlo, monospace;
  --grad: linear-gradient(90deg, var(--red) 0%, #e98a83 55%, var(--peach) 100%);
  --btn-shadow: 0 0 0 4px #fff, 0 6px 24px rgba(217, 79, 92, .18);
  --btn-shadow-hover: 0 0 0 4px #fff, 0 10px 30px rgba(217, 79, 92, .3);
}

/* ---------- 2. Temel ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--sans); font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; overflow-x: clip; /* clip'i desteklemeyen tarayıcılar için hidden yedek */
}
a { color: inherit; text-decoration: none; }
img, video { max-width: 100%; display: block; }
b { font-weight: 600; }
main { padding-top: 76px; }

/* ---------- 3. Ortak parçalar ---------- */
.mono { font-family: var(--mono); font-size: 13px; letter-spacing: .01em; }
.section { max-width: var(--max); margin: 0 auto; padding: clamp(80px, 10vw, 140px) var(--gutter) 0; }
.section__label {
  display: flex; justify-content: flex-end; color: var(--muted);
  border-bottom: 1px solid var(--line); padding-bottom: 14px; margin-bottom: 8px;
}
.display { margin: 0; font-size: clamp(56px, 10vw, 150px); font-weight: 600; letter-spacing: -.05em; line-height: .92; }
.h2 { margin: 56px 0 8px; font-size: clamp(28px, 3.4vw, 44px); font-weight: 600; letter-spacing: -.03em; }

/* Beyaz hap (pill) — kitaptaki "nurus.com" etiketleri gibi */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 18px; border-radius: 999px;
  background: var(--surface); border: 1.5px solid var(--line);
  font-size: 15px; font-weight: 500; white-space: nowrap;
  transition: border-color .2s, transform .2s;
}
a.pill:hover { border-color: var(--text); }
.pill--sm { padding: 5px 12px; font-size: 13px; font-weight: 400; border-width: 1px; }
.pill--muted { color: var(--muted); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tags--center { justify-content: center; }

/* Renk geçişli buton — kitaptaki "All Projects →" */
.btn-grad {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 12px 18px 12px 22px; border-radius: 999px;
  background: var(--grad); color: #fff; font-weight: 500; font-size: 16px;
  box-shadow: var(--btn-shadow);
  transition: transform .25s, box-shadow .25s;
}
.btn-grad:hover { transform: translateY(-2px); box-shadow: var(--btn-shadow-hover); }
.btn-grad--lg { font-size: clamp(18px, 2.2vw, 26px); padding: 16px 24px 16px 30px; }
.arrow { width: 20px; height: 20px; flex: none; }

/* Sayfa sonundaki "next →" bağlantısı */
.next {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 96px;
  padding: 28px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.next .mono { color: var(--muted); }
.next__title { display: inline-flex; align-items: center; gap: 14px; font-size: clamp(28px, 4vw, 56px); font-weight: 600; letter-spacing: -.04em; }
.next__title .arrow { width: 36px; height: 36px; transition: transform .3s; }
.next:hover .arrow { transform: translateX(8px); }

/* ---------- 4. Menü ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px var(--gutter);
  background: rgba(245, 245, 245, .85);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.nav__links { display: flex; align-items: center; gap: clamp(20px, 4vw, 56px); }
/* seçili sayfanın çizgisi yazının hemen altında */
.nav__link {
  background: none; border: 0; padding: 6px 0; cursor: pointer;
  font: inherit; font-size: 16px; color: var(--text);
  text-decoration: underline 1.5px transparent; text-underline-offset: 4px;
  transition: text-decoration-color .2s;
}
.nav__link:hover, .nav__link[aria-current] { text-decoration-color: currentColor; }
/* works: çizgi sadece kelimenin altında, okun altında değil */
#worksBtn { text-decoration: none; }
#worksBtn .nav__label { text-decoration: underline 1.5px transparent; text-underline-offset: 4px; transition: text-decoration-color .2s; }
#worksBtn:hover .nav__label, #worksBtn[aria-current] .nav__label { text-decoration-color: currentColor; }
#worksBtn[aria-expanded="true"] .caret { transform: rotate(180deg); }
.caret { font-size: 11px; display: inline-block; transition: transform .25s; }
.nav__works { position: relative; }
.works-menu {
  position: absolute; top: calc(100% + 12px); left: -18px; min-width: 230px;
  display: grid; padding: 10px; border-radius: 18px; background: var(--surface);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .08);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .2s, transform .2s, visibility .2s;
}
.works-menu.is-open { opacity: 1; visibility: visible; transform: none; }
.works-menu a { display: flex; gap: 12px; align-items: baseline; padding: 10px 12px; border-radius: 10px; }
.works-menu a:hover, .works-menu a[aria-current] { background: var(--bg); }
.works-menu .mono { color: var(--muted); font-size: 12px; }

/* ---------- 5. Alt bilgi ---------- */
.footer { max-width: var(--max); margin: clamp(100px, 12vw, 180px) auto 0; padding: 0 var(--gutter) 28px; }
.footer__top { display: grid; grid-template-columns: 1fr auto; gap: 32px; padding: 40px 0; border-top: 1px solid var(--line); }
.footer__mail { font-size: clamp(26px, 4vw, 56px); font-weight: 600; letter-spacing: -.04em; line-height: 1; align-self: start; }
.footer__mail:hover { color: var(--red); }
.footer__cols { display: flex; gap: 56px; }
.footer__cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; align-content: start; }
.footer__cols a:hover { text-decoration: underline; }
.footer__bottom { display: grid; grid-template-columns: 1fr auto 1fr; font-size: 14px; color: var(--muted); padding-top: 20px; }
.footer__bottom a { justify-self: end; }

/* ---------- 6. "let's work together" ---------- */
.cta {
  max-width: var(--max); margin: clamp(90px, 11vw, 160px) auto 0; padding: 0 var(--gutter);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 5vw, 80px); align-items: center;
}
.cta__img { display: grid; place-items: center; } /* kutu görseli çerçevesiz, tam haliyle */
.cta__img img { width: auto; max-width: 100%; max-height: min(78vh, 720px); height: auto; }
.cta__title { margin: 0; font-size: clamp(52px, 8vw, 128px); font-weight: 600; letter-spacing: -.05em; line-height: .92; }
.cta__sub { margin: 20px 0 32px; color: var(--muted); font-size: 15px; }

/* ---------- 7. Ana sayfa ---------- */
.hero { padding: 0 var(--gutter); max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; }
.hero__video {
  border-radius: var(--radius); overflow: hidden; background: #fff;
  aspect-ratio: 16 / 9; max-height: calc(100vh - 110px); width: 100%;
}
.hero__video video { width: 100%; height: 100%; object-fit: cover; }

.intro { max-width: var(--max); margin: 0 auto; padding: clamp(80px, 10vw, 140px) var(--gutter) 0; }
.intro__text {
  margin: 0 auto; max-width: 30ch; text-align: center;
  font-size: clamp(26px, 3.6vw, 50px); font-weight: 400; letter-spacing: -.03em; line-height: 1.12;
}

/* 01–04 açılır liste; açıkken "+" "−" olur ama renk değişmez */
.disciplines { list-style: none; margin: 0; padding: 0; }
.disc { border-bottom: 1px solid var(--line); }
.disc__head {
  width: 100%; display: grid; grid-template-columns: 64px 1fr 44px; align-items: center;
  background: none; border: 0; padding: 26px 0; cursor: pointer; text-align: left; font: inherit; color: inherit;
}
.disc__num { color: var(--muted); font-size: 14px; }
.disc__title { font-size: clamp(36px, 6.4vw, 92px); font-weight: 600; letter-spacing: -.045em; line-height: 1; transition: transform .35s ease; }
.disc__head:hover .disc__title { transform: translateX(8px); }
.disc__icon { position: relative; width: 44px; height: 44px; border-radius: 50%; background: var(--surface); border: 1.5px solid var(--line); transition: border-color .2s; }
.disc__icon::before, .disc__icon::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.6px; background: var(--text);
  transform: translate(-50%, -50%); transition: transform .3s;
}
.disc__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.disc__head:hover .disc__icon { border-color: var(--text); }
.disc.is-open .disc__icon::after { transform: translate(-50%, -50%) rotate(0); }
.disc__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s ease; }
.disc.is-open .disc__body { grid-template-rows: 1fr; }
.disc__inner { overflow: hidden; padding-left: 64px; }
/* açılan içeriğin tamamı tıklanabilir, ilgili kategori sayfasına gider */
.disc__content { display: block; padding-bottom: 36px; max-width: 640px; }
.disc__content p { margin: 0 0 24px; max-width: 46ch; font-size: 18px; color: var(--text-soft); transition: color .2s; }
.disc__content:hover p { color: var(--text); }
.disc__content:hover .btn-grad { transform: translateY(-2px); box-shadow: var(--btn-shadow-hover); }

/* ---------- 8. Kategori sayfası ---------- */
.banner { padding: 0 var(--gutter); max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; }
/* kapak kırpılmadan, tam haliyle; zemini sayfayla aynı olduğu için çerçevesiz görünür */
.banner img { width: 100%; height: auto; }

/* Kapak görseli olmayan kategori için kitap stilinde çizilmiş kapak (16:10) */
.cover-css {
  position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden;
  background: var(--bg); display: grid; place-items: center;
}
.cover-css__orb { position: absolute; border-radius: 50%; filter: blur(14px); }
.cover-css__orb--1 { width: 38%; aspect-ratio: 1; left: 12%; top: 16%;
  background: radial-gradient(circle at 50% 20%, var(--red), rgba(217, 79, 92, .35) 50%, transparent 72%); }
.cover-css__orb--2 { width: 34%; aspect-ratio: 1; left: 38%; top: 30%;
  background: radial-gradient(circle at 50% 80%, var(--yellow), rgba(243, 198, 78, .35) 50%, transparent 72%); }
.cover-css__orb--3 { width: 36%; aspect-ratio: 1; right: 10%; top: 12%;
  background: radial-gradient(circle at 60% 75%, var(--navy), rgba(59, 63, 143, .35) 50%, rgba(199, 201, 244, .2) 62%, transparent 74%); }
.cover-css__title {
  position: relative; font-size: clamp(30px, 10.5vw, 150px); font-weight: 600;
  letter-spacing: -.045em; line-height: 1; color: var(--text); text-align: center; padding: 0 4%;
}
.cover-css__foot {
  position: absolute; left: 4%; right: 4%; bottom: 5%;
  display: flex; justify-content: space-between; font-size: clamp(10px, 1.1vw, 15px); color: var(--text);
}

.cat-head { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 40px; align-items: end; margin-bottom: 72px; }
.cat-head .mono { grid-column: 1 / -1; color: var(--muted); }
.cat-head__title { margin: 0; font-size: clamp(48px, 7vw, 104px); font-weight: 600; letter-spacing: -.05em; line-height: .95; }
.cat-head__summary { margin: 0; font-size: 18px; color: var(--text-soft); max-width: 46ch; }

/* Proje kartları: görsel sırayla solda / sağda; "wide" olanlar tam genişlik */
.projects { display: grid; gap: clamp(80px, 10vw, 150px); margin-top: 56px; }
.project { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.project--right { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.project--right .carousel { order: 2; }
.project--wide { grid-template-columns: 1fr; }
.project--wide .project__meta { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 8px 40px; align-items: start; }
.project--wide .project__desc, .project--wide .tags, .project--wide .project__link { grid-column: 2; }
.project--wide .project__head { grid-row: 1 / span 3; }
.project__meta { padding: 0 4px; }
/* yan yana kartlarda yazı bloğu görselin alt kenarıyla hizalı biter */
.project--left .project__meta, .project--right .project__meta { align-self: end; }
.project__num { display: block; color: var(--muted); margin-bottom: 10px; }
.project__title { margin: 0; font-size: clamp(22px, 2.2vw, 30px); font-weight: 600; letter-spacing: -.025em; }
.project__title a:hover { color: var(--red); }
.project__sub { margin: 4px 0 12px; color: var(--muted); }
.project__desc { margin: 0 0 14px; color: var(--text-soft); max-width: 56ch; }
.project__view { margin-top: 22px; }
.project__link { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-weight: 500; border-bottom: 1.5px solid currentColor; padding-bottom: 2px; }
.project__link .arrow { width: 16px; height: 16px; }

/* Detay sayfası olan projenin kartı: sadece ana görsel, tıklanınca sayfaya gider */
.project__cover { display: block; position: relative; }
.project__cover .slide { position: relative; overflow: hidden; border-radius: var(--radius); }
.project__cover img { transition: transform .6s ease; }
.project__cover:hover img { transform: scale(1.02); }
.project--left .project__cover .slide, .project--right .project__cover .slide { width: fit-content; max-width: 100%; }
.project--right .project__cover .slide { margin-left: auto; }
.project__count {
  position: absolute; left: 14px; bottom: 14px; padding: 4px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, .9); font-size: 11px;
}

/* Kaydırılabilir görseller — kırpma yok: yükseklik o an görünen görsele göre ayarlanır */
.carousel { position: relative; }
.track {
  display: flex; align-items: flex-start; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none; transition: height .45s ease;
  border-radius: var(--radius);
}
.track::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 100%; scroll-snap-align: start; display: flex; justify-content: center; }
.project--left .slide { justify-content: flex-start; }
.project--right .slide { justify-content: flex-end; }
/* dikey görseller ekrandan taşmasın: yükseklik sınırlı, oran korunur */
.slide img { width: auto; max-width: 100%; height: auto; max-height: 80vh; border-radius: var(--radius); }
.car-btn {
  position: absolute; top: calc(50% - 14px); transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .9); color: var(--text); font-size: 26px; line-height: 1;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .1); opacity: 0; transition: opacity .25s;
}
.carousel:hover .car-btn, .car-btn:focus-visible { opacity: 1; }
.car-btn--prev { left: 14px; }
.car-btn--next { right: 14px; }
.dots { display: flex; justify-content: center; gap: 6px; margin-top: 14px; }
.dots span { width: 7px; height: 7px; border-radius: 50%; background: rgba(26, 26, 26, .25); transition: background .25s, width .25s; }
.dots span.on { background: var(--text); width: 20px; border-radius: 999px; }

/* Görseli olmayan proje: marka renklerinde bulanık küreler */
.carousel--ph { aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; }
.ph { position: absolute; inset: 0; background: var(--bg); overflow: hidden; }
.ph__orb { position: absolute; border-radius: 50%; filter: blur(18px); opacity: .9; }
.ph__orb--1 { width: 58%; aspect-ratio: 1; left: 12%; top: 14%; background: radial-gradient(circle at 40% 30%, var(--a), transparent 70%); }
.ph__orb--2 { width: 50%; aspect-ratio: 1; right: 10%; top: 26%; background: radial-gradient(circle at 60% 70%, var(--b), transparent 70%); }
.ph__label { position: absolute; left: 20px; bottom: 16px; color: var(--muted); }

/* ---------- 9. Proje detay sayfası ---------- */
.pd-head { padding-top: clamp(24px, 4vw, 48px); }
.pd-head--compact { padding-bottom: 0; }
.pd-back { display: inline-block; color: var(--muted); margin-bottom: 28px; }
.pd-back:hover { color: var(--text); }
.pd-head__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 24px clamp(28px, 5vw, 80px); align-items: end; }
.pd-head__vol { color: var(--muted); }
.pd-head__title { margin: 10px 0 8px; font-size: clamp(44px, 7vw, 108px); font-weight: 600; letter-spacing: -.05em; line-height: .95; }
.pd-head__sub { margin: 0; color: var(--muted); }
/* açıklama birden fazla paragraf olabilir; kalın satırlar ara başlıktır */
.pd-head__desc { margin: 0 0 18px; font-size: 18px; color: var(--text-soft); max-width: 50ch; }
.pd-head__desc p { margin: 0 0 14px; }
.pd-head__desc p:last-child { margin-bottom: 18px; }
.pd-head__desc b { color: var(--text); font-weight: 600; }
.pd-head__info .project__link { margin-top: 18px; }

/* Galeri: ana görsel tam genişlik, diğerleri ikişerli; kırpma yok, tıklanınca büyür */
.pd-gallery {
  max-width: var(--max); margin: clamp(48px, 6vw, 88px) auto 0; padding: 0 var(--gutter);
  display: grid; gap: clamp(16px, 2.2vw, 28px);
}
.pd-head--compact + .pd-gallery { margin-top: 24px; }
.pd-row { display: grid; gap: clamp(16px, 2.2vw, 28px); align-items: center; }
.pd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.2vw, 28px); align-items: center; }
.pd-img {
  display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in;
  border-radius: var(--radius); overflow: hidden;
}
.pd-img img { width: 100%; height: auto; object-fit: contain; transition: transform .6s ease; }
.pd-img:hover img { transform: scale(1.015); }
.pd-row--full .pd-img img { max-height: none; }
.pd-grid .pd-img img { max-height: 80vh; }
/* dikey ana görsel: biraz küçük, proje yazıları yanındaki boşlukta */
.pd-row--feature { grid-template-columns: auto minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.pd-row--feature .pd-img { width: auto; justify-self: start; }
.pd-row--feature .pd-img.is-portrait img { width: auto; max-width: 100%; max-height: 78vh; }
.pd-side .pd-head__grid { grid-template-columns: 1fr; align-items: start; gap: 28px; }
.pd-side .pd-head__title { font-size: clamp(40px, 5vw, 80px); }

/* Büyük görsel görüntüleyici */
.lightbox {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
  background: rgba(245, 245, 245, .97); padding: 56px 72px;
}
.lightbox[hidden], .lightbox [hidden] { display: none; }
.lightbox__img { max-width: 100%; max-height: calc(100vh - 112px); width: auto; height: auto; border-radius: 12px; }
.lightbox__close, .lightbox__nav {
  position: absolute; border: 1.5px solid var(--line); background: #fff; color: var(--text);
  border-radius: 50%; width: 46px; height: 46px; font-size: 26px; line-height: 1; cursor: pointer;
}
.lightbox__close:hover, .lightbox__nav:hover { border-color: var(--text); }
.lightbox__close { top: 18px; right: 18px; }
.lightbox__nav { top: 50%; transform: translateY(-50%); }
.lightbox__nav--prev { left: 16px; }
.lightbox__nav--next { right: 16px; }
.lightbox__count { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); color: var(--muted); }

/* ---------- 10. About ---------- */
.about-hero {
  position: relative; max-width: var(--max); margin: 0 auto; padding: 40px var(--gutter) 0;
  overflow-x: clip; /* ışık yana taşmasın */
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(28px, 6vw, 96px); align-items: start;
}
.about-hero__text { position: relative; z-index: 1; max-width: 820px; }
.about-hero__lead { margin: 24px 0 28px; max-width: 34ch; font-size: clamp(20px, 2.2vw, 28px); line-height: 1.25; letter-spacing: -.02em; color: var(--red); font-weight: 500; }
.about-hero__body { columns: 2; column-gap: 32px; color: var(--text-soft); font-size: 15.5px; margin-bottom: 24px; }
.about-hero__body p { margin: 0 0 14px; break-inside: avoid; }
.about-hero .pill { transition: transform .25s, border-color .25s; }
.about-hero .pill:hover { transform: translateY(-3px); border-color: var(--text); }

/* "hello !" harfleri üzerine gelince zıplar */
.about-hero__hello { cursor: default; }
.about-hero__hello .ch { display: inline-block; transition: transform .45s cubic-bezier(.3, 1.6, .5, 1), color .3s; }
.about-hero__hello .ch:hover { transform: translateY(-14px) rotate(-6deg); color: var(--red); }

/* İmleci takip eden ışık: sadece transform ile (GPU'da) kayar, filtre yok.
   translate(-50%,-50%) ışığın merkezini her boyutta imlecin tam altına getirir. */
.about-hero__glow {
  position: absolute; left: 0; top: 0; width: 520px; height: 520px;
  border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(243, 198, 78, .33) 0%, rgba(217, 79, 92, .16) 38%, rgba(217, 79, 92, .06) 55%, transparent 70%);
  transform: translate3d(75vw, 260px, 0) translate(-50%, -50%);
  will-change: transform;
}

/* Çerçevesiz portre (portrait.png zemini şeffaf); alt kenarı solar, fareye göre eğilir */
.portrait {
  position: relative; z-index: 0; margin: -8px calc(-1 * var(--gutter)) 0 0; justify-self: end;
  width: clamp(240px, 30vw, 420px);
}
.portrait img {
  width: 100%; height: auto;
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 98%);
  mask-image: linear-gradient(to bottom, #000 72%, transparent 98%);
  transform: perspective(900px) rotateX(0deg) rotateY(0deg);
  will-change: transform;
}

.numbers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.num { position: relative; aspect-ratio: 1; display: grid; place-items: center; align-content: center; gap: 6px; text-align: center; }
.num__orb { position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle at 50% 35%, var(--c), transparent 72%); filter: blur(10px); opacity: .9; }
.num__value { position: relative; font-size: clamp(56px, 7vw, 104px); font-weight: 600; letter-spacing: -.05em; line-height: 1; }
.num__title { position: relative; }

.rows { list-style: none; margin: 0; padding: 0; }
.row { display: grid; grid-template-columns: 1.1fr 1.4fr auto; gap: 8px 24px; padding: 18px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.row__title { font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.row__role { color: var(--text-soft); }
.row__date { color: var(--muted); text-align: right; }

.skills { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 28px; }
.skill__title { margin: 0 0 14px; font-size: 26px; font-weight: 600; letter-spacing: -.03em; }

/* ---------- 11. Contact ---------- */
.contact-hero {
  position: relative; max-width: var(--max); margin: 0 auto; padding: clamp(80px, 12vw, 160px) var(--gutter) 40px;
  text-align: center; display: grid; justify-items: center; gap: 22px;
}
.contact-hero > * { position: relative; }
.contact-hero .mono { color: var(--muted); margin: 0; }
.contact-hero__sub { margin: 0; max-width: 46ch; font-size: 18px; color: var(--text-soft); }
.contact-hero__orbs { position: absolute; inset: 0 0 -240px 0; pointer-events: none; overflow: hidden; }
.contact-hero__orbs span { position: absolute; border-radius: 50%; filter: blur(20px); opacity: .55; }
.contact-hero__orbs span:nth-child(1) { width: 420px; height: 420px; left: -80px; top: 40px; background: radial-gradient(circle, var(--red), transparent 70%); }
.contact-hero__orbs span:nth-child(2) { width: 380px; height: 380px; right: -60px; top: 120px; background: radial-gradient(circle, var(--navy), transparent 70%); }
.contact-hero__orbs span:nth-child(3) { width: 320px; height: 320px; left: 40%; bottom: -160px; background: radial-gradient(circle, var(--yellow), transparent 70%); }

/* ---------- 12. Belirme animasyonu ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- 13. Ekran boyutlarına göre ayarlar ---------- */

/* Tablet */
@media (max-width: 1000px) {
  .numbers { grid-template-columns: repeat(2, 1fr); }
  .skills { grid-template-columns: repeat(2, 1fr); }
  .about-hero__body { columns: 1; }
}

/* Dar ekran (panel / tablet / telefon) */
@media (max-width: 760px) {
  main { padding-top: 68px; }

  /* Menü: hamburger yok, tüm linkler görünür; sığmazsa satır yana kayar */
  .nav { gap: 24px; padding-right: 0; justify-content: flex-start; }
  .nav__home { flex: none; }
  .nav__links {
    flex: 1; min-width: 0; gap: 24px; justify-content: flex-start;
    overflow-x: auto; white-space: nowrap; padding-right: var(--gutter);
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .nav__links::-webkit-scrollbar { display: none; }
  .nav__links.has-more { /* sağda gizli link varsa kenar hafifçe solar */
    -webkit-mask-image: linear-gradient(90deg, #000 80%, transparent);
    mask-image: linear-gradient(90deg, #000 80%, transparent);
  }
  .nav__link { flex: none; font-size: 15px; }
  /* works listesi menünün altında açılır (kayan satır onu kesmesin diye) */
  .nav__works { position: static; flex: none; }
  .works-menu { top: 100%; left: var(--gutter); right: var(--gutter); min-width: 0; }

  .footer__top { grid-template-columns: 1fr; }
  .footer__bottom { grid-template-columns: 1fr 1fr; gap: 8px; }
  .footer__bottom span:nth-child(2) { display: none; }

  .cta { grid-template-columns: 1fr; }
  .cta__img img { max-height: 60vh; }

  .disc__head { grid-template-columns: 40px 1fr 40px; padding: 20px 0; }
  .disc__icon { width: 38px; height: 38px; }
  .disc__inner { padding-left: 0; }
  .disc__content p { font-size: 16px; }

  .cat-head { grid-template-columns: 1fr; margin-bottom: 40px; }
  .projects { grid-template-columns: 1fr; }
  /* kartlar alt alta (dikey görselli kartlar için aşağıdaki istisnaya bak) */
  .project, .project--right, .project--wide .project__meta { grid-template-columns: 1fr; }
  .project--right .carousel { order: 0; }
  .project--wide .project__desc, .project--wide .tags, .project--wide .project__link { grid-column: auto; }
  .project--wide .project__head { grid-row: auto; }
  .project--left .project__cover .slide, .project--right .project__cover .slide { width: auto; }
  .car-btn { opacity: 1; width: 36px; height: 36px; font-size: 22px; }

  .pd-head__grid { grid-template-columns: 1fr; }
  .pd-grid { gap: 10px; }
  .lightbox { padding: 64px 12px; }
  .lightbox__nav { top: auto; bottom: 12px; transform: none; }
  .lightbox__nav--prev { left: 12px; }
  .lightbox__nav--next { right: 12px; }

  /* about: portre sağ üstte; metin, solmuş alt kısmının üzerine hafifçe biner */
  .about-hero { grid-template-columns: 1fr; padding-top: 24px; }
  .portrait { position: absolute; top: 0; right: 0; width: clamp(150px, 38vw, 300px); margin: 0; }
  .about-hero__hello, .about-hero__lead { position: relative; }
  .about-hero__lead { margin-top: clamp(40px, 12vw, 110px); max-width: 30ch; }
  .about-hero__glow { width: 300px; height: 300px; }
  .numbers { grid-template-columns: repeat(2, 1fr); gap: 0; }
  .row { grid-template-columns: 1fr; gap: 2px; }
  .row__date { text-align: left; }
  .skills { grid-template-columns: 1fr; }

  .contact-hero__orbs span:nth-child(1) { width: 260px; height: 260px; }
  .contact-hero__orbs span:nth-child(2) { width: 240px; height: 240px; }
}

/* Panel / tablet genişliği: ana görseli dikey olan kartlar ve detay sayfaları
   yan yana kalır, yazı görselin yanındaki boşluğa gelir */
@media (max-width: 760px) and (min-width: 561px) {
  .project--portrait, .project--portrait.project--right { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
  .project--portrait.project--right .carousel { order: 2; }
  .project--portrait .project__cover .slide { width: fit-content; }
  .project--portrait.project--right .project__cover .slide { margin-left: auto; }
  .project--portrait .slide img { max-height: 70vh; }
  .project--portrait .project__title { font-size: 22px; }
  .project--portrait .project__desc { font-size: 15px; }
  .pd-row--feature .pd-img.is-portrait img { max-height: 70vh; }
  .pd-side .pd-head__title { font-size: 40px; }
}

/* Telefon: detay sayfasında yazılar üstte, dikey ana görsel altında tam genişlik */
@media (max-width: 560px) {
  .pd-row--feature { grid-template-columns: 1fr; gap: 28px; }
  .pd-row--feature .pd-side { order: -1; }
  .pd-row--feature .pd-img { width: 100%; }
  .pd-row--feature .pd-img.is-portrait img { width: 100%; max-height: none; }
}