/* Doruk Can Mutlu — kişisel site. Tasarım dili brewo.app'ten (açık zemin, koyu metin, Outfit),
   vurgu rengi çelik mavi (Doruk, 1 Kas 2026). Jetonlar :root'ta. */
:root {
  --zemin: #FBF9F5;
  --yuzey: #FFFFFF;
  --yuzey-mat: #F1EAE0;
  --kenar: #F0E8DC;
  --metin: #2B241F;
  --metin-soluk: #776A5D;   /* zemine 5:1 (küçük yazı AA); eski #8A7C6E 3,85:1 idi */
  --metin-silik: #9C8F82;
  --kum-1: #F3E7D0;   /* uzak tepe */
  --kum-2: #E4CDA6;   /* orta tepe (yolcu bunun sırtında yürür) */
  --kum-3: #DFC69E;   /* yakın tepe */
  --kum-golge: #B99A6E;
  --halo: 0 0 14px rgba(251, 249, 245, .95), 0 0 4px rgba(251, 249, 245, .95);
  --panel: 0 6px 20px rgba(43, 36, 31, .07), 0 2px 6px rgba(43, 36, 31, .04);
  --vurgu: #3A5F80;
  --vurgu-koyu: #2C4B67;
  --vurgu-yumusak: #E3EBF2;
  --vurgu-isik: rgba(255, 236, 196, .9);
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--zemin);
  color: var(--metin);
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 500;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }

/* ŞERİT: üste yapışık kum tepeleri + 3B yolcu + üst satır. Boyu yolculuk.js'in dünyasını belirler
   (1 birim = 1 px); svh: telefonda adres çubuğu açılıp kapanınca boy değişmesin. */
:root { --serit-boy: clamp(168px, 26vh, 240px); --kenar-bos: max(24px, env(safe-area-inset-left)); --alt-boy: 86px; }
@supports (height: 1svh) { :root { --serit-boy: clamp(168px, 26svh, 240px); } }
.serit {
  position: sticky; top: 0; z-index: 10;
  height: var(--serit-boy); overflow: hidden;
  background: var(--zemin);
  box-shadow: 0 1px 0 var(--kenar), 0 10px 24px rgba(43, 36, 31, .05);
}
.gok {
  position: absolute; inset: 0; z-index: 0;
  /* Doruk, 6 Kas 2026: "Gökyüzüne de biraz gökyüzü hissiyatı katalım ya. Çok yoğun olmasın ama hissettirsin":
     açık mavi, ufka inerken kumun sıcak pusuna döner */
  background: linear-gradient(180deg, #CDE3F3 0%, #DCEBF5 36%, #EDF2F1 62%, #F8F0E1 80%, #F6EAD6 100%);
}
/* ince bulutlar: tek şerit, yatayda tekrar eder; görüntü kayarken uzak tepelerden de yavaş akar (--bulut-x JS'ten) */
.bulut {
  position: absolute; top: 0; bottom: 0; left: 0; z-index: 0; pointer-events: none;
  width: calc(100% + var(--serit-boy) * 7.5);
  background: url(gorsel/gok-bulut.webp) 0 0 / auto 100% repeat-x;
  transform: translateX(var(--bulut-x, 0px)); will-change: transform;
}
/* kurum logosu: gökte, yolcunun arkasında. Kartı ekrana girerken tepelerin (.col) arkasından gelir, kaydırdıkça
   yükselir, kartı bitince üst satırda söner. Kutunun yeri ve boyu JS'ten (--lt, --lh, --lw); logonun kayması (translate) ve
   saydamlığı kaydırmaya bağlı, JS'ten, geçişsiz. */
.gok-logo { position: absolute; z-index: 1; pointer-events: none; left: calc(72% - var(--lw, 0px) / 2); top: var(--lt, 0px); width: var(--lw, 0px); height: var(--lh, 0px); }
.gok-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; }
/* aydınlanma: 18–24 yaş arasında gökten inen sıcak ışık. --aydin 0..1 JS'ten gelir. */
.aydinlik {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: var(--aydin, 0);
  background:
    radial-gradient(70% 90% at 50% -30%, var(--vurgu-isik), rgba(255, 236, 196, 0) 70%),
    linear-gradient(180deg, rgba(255, 250, 240, .9), rgba(255, 250, 240, 0) 70%);
}
.kum { position: absolute; left: 0; z-index: 2; pointer-events: none; will-change: transform; }
.col { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; display: block; }
.yolcu3b { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; display: block; pointer-events: none; opacity: 0; transition: opacity .6s ease; }
.yolcu3b.hazir { opacity: 1; }

/* üst satır: isim · yaş · LinkedIn */
.ust {
  position: absolute; inset: 0 0 auto 0; z-index: 5;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  padding: calc(14px + env(safe-area-inset-top, 0px)) max(24px, env(safe-area-inset-right)) 0 var(--kenar-bos);
}
.marka { justify-self: start; white-space: nowrap; font-weight: 700; font-size: 18px; text-decoration: none; letter-spacing: -0.01em; text-shadow: var(--halo); }
.ust-yas { margin: 0; font-size: 14px; font-weight: 600; color: #62564A; font-variant-numeric: tabular-nums; white-space: nowrap; text-shadow: var(--halo); }
.ust-yas #gYas { color: var(--vurgu); }
.ust-nav { justify-self: end; }
.ust-nav a { padding: 5px 13px; border-radius: 999px; background: var(--vurgu); color: #fff; font-weight: 700; font-size: 14px; text-decoration: none; transition: background .2s; }
.ust-nav a:hover { background: var(--vurgu-koyu); }

/* BÖLÜMLER: her adım bir bölüm, hepsi aynı kart (Doruk, 2 Kas 2026: "aynı yazı şeklinde", etiketsiz):
   solda yıl ve yaş, sağda başlık (iş kartında unvan), satır (kurum · tarih), metin, ek */
.bolumler { max-width: 1120px; margin: 0 auto; padding: 0 max(24px, env(safe-area-inset-right)) 0 var(--kenar-bos); }
.bolum { min-height: 56vh; min-height: 56svh; padding: 9vh 0 0; }
.kart { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 0 48px; align-content: start; }
.bolum.ilk { min-height: 50vh; min-height: 50svh; padding-top: 9vh; }   /* Doruk, 6 Kas 2026: "Başlangıç kısmımız çok boş"; sonraki kart ilk ekranda görünür */
.bolum.ilk + .bolum.tepe { min-height: 72vh; min-height: 72svh; }
.yil { margin: 0; font-size: 14px; font-weight: 600; color: var(--metin-soluk); font-variant-numeric: tabular-nums; }
.bolum-sol { padding-top: .9em; border-top: 2px solid var(--kenar); }
.bolum-sag h2 { margin: 0 0 14px; font-size: clamp(34px, 5vw, 62px); line-height: 1.04; font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; }
.bolum.ilk h2 { font-size: clamp(48px, 8vw, 104px); }
.satir { margin: -4px 0 14px; max-width: 52ch; font-size: clamp(15px, 1.3vw, 17px); line-height: 1.4; font-weight: 600; color: var(--vurgu-koyu); }
/* bağlantılar (Doruk, 5 Kas 2026: "Linkler daha belirgin olsun. Farklı bir tarzı olsun"): dolu hap; sonda ↗ */
.satir a, a.belge { display: inline-flex; align-items: center; gap: 7px; padding: 5px 13px; border-radius: 999px; background: var(--vurgu); color: #fff; font-weight: 700; text-decoration: none; box-shadow: 0 3px 8px color-mix(in srgb, var(--vurgu) 28%, transparent); transition: background .2s, transform .15s; }
.satir a::after, a.belge::after { content: '↗'; font-size: .95em; }
.satir a:hover, a.belge:hover { background: var(--vurgu-koyu); transform: translateY(-1px); }
.satir a.yt { padding-left: 9px; background: #fff; color: var(--metin); box-shadow: 0 0 0 1.5px #FF0000, 0 3px 10px rgba(255, 0, 0, .18); }
.satir a.yt:hover { background: #FFF1F0; }
.satir a.ud { padding-left: 9px; background: #fff; color: var(--vurgu-koyu); box-shadow: 0 0 0 1.5px var(--vurgu), 0 3px 10px color-mix(in srgb, var(--vurgu) 24%, transparent); }
.satir a.ud:hover { background: color-mix(in srgb, var(--vurgu) 10%, #fff); }
.ud-logo { display: block; flex: none; width: 19px; height: 19px; color: var(--vurgu); }
.yt-logo { display: block; flex: none; width: 30px; height: auto; }
.metin { margin: 0; max-width: 40ch; font-size: clamp(18px, 1.7vw, 22px); line-height: 1.5; }
/* ek: metnin altında küçük satırlar (ödül, eğitim, sertifika) */
.ek { margin: 18px 0 0; padding: 0; list-style: none; max-width: 52ch; font-size: 15px; line-height: 1.45; color: var(--metin-soluk); }
.ek li { padding: 7px 0; border-top: 1px solid var(--kenar); }
.metin + .metin { margin-top: 14px; }
.ek li:has(> a.belge) { padding: 12px 0 0; }
/* fotoğraflar (Doruk, 3 Kas 2026): dar ekranda metnin altında; geniş ekranda metnin sağında, başlığın altından başlayan
   220–300 px'lik sütunda. demog kartında iki fotoğraf, DcM'de yuvarlak tek fotoğraf. */
.fotolar { display: grid; gap: 12px; max-width: 520px; margin-top: 22px; }
.fotolar.cift { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; max-width: 640px; }
.fotolar.cift figure:last-child:nth-child(odd) { grid-column: 1 / -1; }
/* kumlu: fotoğraf çölün parçası. Katmanlar: .ic silik arka plan → canvas süpürülen kum (fotokum.js) → .kes keskin kişi → .kum-cerceve
   dökülmüş kum. Çerçeve kaynak/betik/kum_cerceve.py ile yükseklik alanından çizilir; ışığı ve gölgesi gerçek (Doruk, 6 Kas 2026: "Daha gerçekçi
   kumlar dök"). Kum her şeyin üstündedir; fotoğraf yığının altında solar (maske -m.webp), baş üstteki ince kumdan aşağıda kalsın diye görsel %93'e iner. */
.fotolar figure { margin: 0; }
.son-portre { filter: sepia(.24) saturate(.84) contrast(.94) brightness(1.03); }
.fotolar img { display: block; width: 100%; height: auto; }
.kumlu { position: relative; aspect-ratio: 3 / 2; --p: 0; }
.kumlu.dikey { aspect-ratio: 4 / 5; }
.kumlu .ic, .kumlu .kes-ic { position: absolute; inset: 0; overflow: hidden; visibility: hidden; pointer-events: none; }
.kumlu .ic, .kumlu .kes-ic, .kumlu canvas { mask-size: 100% 100%; -webkit-mask-size: 100% 100%; }
.kumlu.hazir .ic, .kumlu.hazir .kes-ic { visibility: visible; }
.kumlu .ic { background: #E3D6BF; }
.kumlu img { position: absolute; inset: 0; height: 100%; object-fit: cover; }
.kumlu .hayal { opacity: .44; filter: blur(1.2px) sepia(.3); transform: scale(.93); transform-origin: 50% 100%; }
.kumlu canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; cursor: crosshair; }
.kumlu .kes { filter: drop-shadow(-1px 2px 3px rgba(30, 20, 10, .22)); transform: translateY(calc((1 - var(--p)) * 84%)) scale(.93); transform-origin: 50% 100%; }
.kumlu img.kum-cerceve { z-index: 1; pointer-events: none; }
.kumlu.ters img.kum-cerceve { transform: scaleX(-1); }
.fotolar .yuvarlak { max-width: 220px; }
.fotolar .yuvarlak img { border-radius: 50%; }
.fotolar .dikey { width: 100%; max-width: 240px; }
.baslik-logo { display: block; height: clamp(46px, 5.4vw, 68px); width: auto; margin: 4px 0 2px; }
@media (min-width: 861px) {
  .fotolu .bolum-sag { display: grid; grid-template-columns: minmax(0, 1fr) clamp(220px, 26vw, 300px); grid-template-rows: repeat(4, auto) 1fr; column-gap: clamp(28px, 3vw, 40px); }
  .fotolu .bolum-sag > * { grid-column: 1; }
  .fotolu .bolum-sag > h2 { grid-column: 1 / -1; }
  .fotolu .fotolar { grid-column: 2; grid-row: 2 / -1; align-self: start; margin-top: 4px; }
  .fotolar.cift { grid-template-columns: minmax(0, 1fr); }
  .fotolar .yuvarlak, .fotolar .dikey { justify-self: center; }
}

/* engel (tepe): kart aynı; bölüm uzun (yolcu durup düşünür, tırmanır), kart bu sürede sayfadan yavaş kayar
   (translate, yolculuk.js akanKur). Küçük engelde yolcu durmaz: bölüm kısa. */
.bolum.tepe { min-height: 92vh; min-height: 92svh; }
.bolum.tepe.kucuk { min-height: 64vh; min-height: 64svh; }

/* bölümler ekrana girerken aşağıdan, parça parça belirir (.belirir JS'ten, görününce .gorundu) */
.belirir > *, .belirir .kart > *, .belirir .son-metin > * { transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1); }
.belirir:not(.gorundu) > *, .belirir:not(.gorundu) .kart > *, .belirir:not(.gorundu) .son-metin > * { opacity: 0; transform: translateY(28px); }
.belirir .kart > :nth-child(2), .belirir .son-metin > :nth-child(2) { transition-delay: .08s; }
.belirir .son-metin > :nth-child(n+3) { transition-delay: .16s; }
.belirir .kart, .belirir .son-metin { opacity: 1; transform: none; }

/* son: 31, bugün. Sayfanın sonunda alt bilgiyle birlikte şeridin altına tam sığar (yolcu o an yürüyerek kadrajdan çıkar). */
.son {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center;
  min-height: calc(100vh - var(--serit-boy) - var(--alt-boy)); min-height: calc(100svh - var(--serit-boy) - var(--alt-boy));
  padding: clamp(8px, 2vh, 32px) 0;
}
.son-portre {
  width: clamp(150px, 20vw, 240px); height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 50%;
  border: 8px solid var(--yuzey); box-shadow: 0 30px 60px rgba(43, 36, 31, .16), 0 8px 18px rgba(43, 36, 31, .08);
}
.son .yil { margin-bottom: 12px; }
.son h1 { margin: 0 0 14px; max-width: 22ch; font-size: clamp(30px, min(4.4vw, 6.2vh), 56px); line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; }
.son-aciklama { margin: 0 0 18px; font-size: clamp(17px, 1.7vw, 21px); }
.urun-etiket { margin: 0 0 8px; font-size: 14px; font-weight: 600; color: var(--metin-soluk); }
.urunler { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.urunler li { padding: 7px 14px; border-radius: 999px; background: var(--vurgu-yumusak); color: var(--vurgu-koyu); font-size: 14px; font-weight: 600; }
.urunler li:has(a) { background: var(--vurgu); }
.urunler li:has(a):hover { background: var(--vurgu-koyu); }
.urunler a { color: #fff; font-weight: 700; text-decoration: none; }
.urunler a::after { content: '\2009↗'; }   /* yalnız bağlantılı çip */
.son-not, .son-kunye { margin: -10px 0 22px; max-width: 58ch; font-size: 14px; line-height: 1.45; color: var(--metin-soluk); }
.son-kunye { margin-top: -14px; }
.son-kunye a { color: var(--vurgu); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.son-kunye a::after { content: ' ↗'; }
.son-kunye a:hover { color: var(--vurgu-koyu); }
.dugme {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border-radius: 999px;
  background: var(--vurgu); color: #fff; font-weight: 700; font-size: 16px; text-decoration: none;
  box-shadow: 0 6px 10px color-mix(in srgb, var(--vurgu) 30%, transparent); transition: background .2s, transform .15s;
}
.dugme:hover { background: var(--vurgu-koyu); }
.dugme:active { transform: scale(.97); }

/* alt: boyu --alt-boy (son bölüm bununla hesaplanır) */
.alt { display: flex; justify-content: space-between; align-items: center; box-sizing: border-box; height: var(--alt-boy); padding: 0 max(24px, env(safe-area-inset-right)) env(safe-area-inset-bottom, 0px) var(--kenar-bos); font-size: 14px; color: var(--metin-soluk); border-top: 1px solid var(--kenar); }
.alt a { padding: 5px 13px; border-radius: 999px; background: var(--vurgu); color: #fff; font-weight: 700; text-decoration: none; transition: background .2s; }
.alt a:hover { background: var(--vurgu-koyu); }

/* tablet ve telefon: tek sütun */
@media (max-width: 860px) {
  .bolum { padding-top: 7vh; }
  .kart { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .bolum-sol { padding-top: 12px; margin-bottom: 14px; }
}
@media (max-width: 720px) {
  :root { --kenar-bos: max(16px, env(safe-area-inset-left)); }
  .ust { padding-right: max(16px, env(safe-area-inset-right)); gap: 8px; padding-top: calc(12px + env(safe-area-inset-top, 0px)); }
  .marka { font-size: 16px; }
  .ust-yas { font-size: 13px; }
  .ust-nav a { font-size: 13px; padding: 4px 11px; }
  .bolumler { padding-right: max(16px, env(safe-area-inset-right)); }
  .bolum { min-height: 50vh; min-height: 50svh; }
  .bolum.ilk { min-height: 42vh; min-height: 42svh; padding-top: 6vh; }
  .bolum-sag h2 { font-size: clamp(32px, 9.5vw, 44px); }
  .bolum.ilk h2 { font-size: clamp(48px, 14vw, 68px); }
  .metin { font-size: 17px; }
  .satir { font-size: 15px; }
  /* son: portre küçük, yılın yanında; başlık ve gerisi altta tam genişlik */
  .son { grid-template-columns: 72px minmax(0, 1fr); gap: 0 14px; align-items: center; align-content: center; }
  .son-metin { display: contents; }
  .son-portre { grid-row: 1; width: 72px; border-width: 4px; box-shadow: 0 6px 14px rgba(43, 36, 31, .12); }
  .son .yil { grid-column: 2; grid-row: 1; margin-bottom: 0; }
  .son-metin > :nth-child(n+2) { grid-column: 1 / -1; }
  /* başlık üç satır; 375 × 812'de son bölüm şeridin altına sığsın (portre şeride girmesin) */
  .son { padding: 8px 0; }
  .son h1 { margin: 10px 0 8px; font-size: clamp(26px, 7vw, 32px); }
  .son-aciklama { margin-bottom: 12px; }
  .alt { padding-right: max(16px, env(safe-area-inset-right)); }
}
/* yatay telefon (alçak ekran): şerit inceltilir, okumaya yer kalsın; yolcu şeritle küçülür */
@media (max-height: 560px) and (orientation: landscape) {
  :root { --serit-boy: 140px; }
  .ust { padding-top: calc(8px + env(safe-area-inset-top, 0px)); }
  .bolum, .bolum.ilk { min-height: 70vh; min-height: 70svh; padding-top: 6vh; }
  .bolum.tepe { min-height: 70vh; min-height: 70svh; }
  .son { align-items: start; }
  .son-portre { width: 72px; border-width: 4px; box-shadow: 0 4px 10px rgba(43, 36, 31, .12); }
  .son h1 { font-size: 26px; max-width: none; margin-bottom: 8px; }
  .son-aciklama { font-size: 15px; margin-bottom: 12px; }
}
/* çok dar: isim kısalır, yaş sığsın */
@media (max-width: 370px) {
  .marka { font-size: 15px; }
  .ust-yas { font-size: 12px; }
}
@media (max-width: 340px) { .ust-yil { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .yolcu3b, .belirir > *, .belirir .kart > *, .belirir .son-metin > * { transition: none; }
  .belirir:not(.gorundu) > *, .belirir:not(.gorundu) .kart > *, .belirir:not(.gorundu) .son-metin > * { transform: none; }
}