/* Fatih Mehmet Yılmaz — kişisel site
   Renkler: dyslove Blacktop #0A0A0A + Fusion #D7EFFF (marka referansları/renk-paletleri).
   Dil: TinTo ailesiyle aynı — Instrument Sans, düz, keskin köşe, gölgesiz. */
:root {
  --blacktop: #0A0A0A; --zemin-2: #121314; --zemin-3: #1A1C1E; --cizgi: #26292C;
  --yazi: #F4F8FB; --gri: #9EA7B0; --fusion: #D7EFFF; --fusion-2: #C3E4F8; --fusion-koyu: #2A6E9C; --fusion-gri: #3C5466;
  --yazi-tipi: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --kenar: clamp(1.25rem, 5vw, 4.5rem); --olcu: 40rem;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--blacktop); color: var(--yazi); font-family: var(--yazi-tipi); font-size: 1.125rem; line-height: 1.55; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1; letter-spacing: -0.035em; }
h2 { font-size: clamp(2.5rem, 6vw, 4.75rem); }
h3 { font-size: 1.5rem; letter-spacing: -0.02em; }
p { margin: 0; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
:focus-visible { outline: 3px solid var(--fusion); outline-offset: 3px; }
::selection { background: var(--fusion); color: var(--blacktop); }
.atla { position: absolute; left: -999px; top: 0; background: var(--fusion); color: var(--blacktop); padding: .5rem 1rem; font-weight: 600; }
.atla:focus { left: 1rem; top: 1rem; z-index: 10; }

/* Üst */
.ust { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem var(--kenar); position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--blacktop) 90%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--cizgi); }
.logo { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; font-weight: 600; font-size: 1.15rem; letter-spacing: -0.02em; }
.logo img { width: 2.3rem; height: 2.3rem; }
.ust nav { display: flex; gap: clamp(.75rem, 2vw, 1.75rem); align-items: center; }
.ust nav a { font-weight: 500; font-size: 1rem; text-decoration: none; color: var(--gri); }
.ust nav a:hover { color: var(--yazi); }
.ust nav .nav-cta { color: var(--blacktop); background: var(--fusion); padding: .5rem 1rem; font-weight: 600; }
.ust nav .nav-cta:hover { background: var(--yazi); color: var(--blacktop); }

main > section { padding: clamp(4.5rem, 9vw, 7.5rem) var(--kenar); border-bottom: 1px solid var(--cizgi); }
.bolum-bas { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.bolum-bas p { margin-top: 1rem; max-width: var(--olcu); font-size: 1.2rem; color: var(--gri); }
.etiket { display: inline-flex; align-items: center; gap: .55rem; font-size: .9rem; font-weight: 600; color: var(--gri); }
.etiket::before { content: ""; width: .6rem; height: .6rem; background: var(--fusion); }
.etiket.koyu { color: var(--fusion-gri); }
.etiket.koyu::before { background: var(--blacktop); }

.dugme { display: inline-block; font-weight: 600; font-size: 1.0625rem; text-decoration: none; color: var(--blacktop); background: var(--fusion); padding: .9rem 1.5rem; border: 2px solid var(--fusion); transition: background .12s, color .12s; }
.dugme:hover { background: transparent; color: var(--fusion); }
.dugme.ikincil { background: transparent; color: var(--yazi); border-color: var(--cizgi); }
.dugme.ikincil:hover { border-color: var(--yazi); }

/* Giriş */
.kahraman { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: end; padding-top: clamp(3rem, 6vw, 5rem) !important; }
.kahraman h1 { margin-top: 1.25rem; font-size: clamp(3.25rem, 8.5vw, 8rem); line-height: .92; letter-spacing: -0.045em; }
.kahraman .unvan { margin-top: 1.25rem; font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 500; letter-spacing: -0.02em; }
.kahraman .unvan span { color: var(--fusion); }
.kahraman .giris { margin-top: 1.25rem; max-width: 34rem; font-size: 1.2rem; color: var(--gri); }
.dugmeler { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; }
.kahraman-foto { margin: 0; border: 1px solid var(--cizgi); }
.kahraman-foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(1); }

/* Hakkımda: Fusion açık blok */
.hakkimda { background: var(--fusion); color: var(--blacktop); border-bottom: 0 !important; }
.iki-sutun { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(2rem, 5vw, 5rem); }
.metin p + p { margin-top: 1.1rem; }
.metin .buyuk { font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 500; line-height: 1.25; letter-spacing: -0.02em; }
.hakkimda .metin p:not(.buyuk) { color: var(--fusion-gri); font-size: 1.2rem; }
.hakkimda a { font-weight: 600; text-underline-offset: 4px; }

/* Deneyim */
.deneyim h2 { margin-bottom: clamp(2rem, 4vw, 3rem); }
.deneyim-listesi { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--cizgi); border: 1px solid var(--cizgi); }
.is { background: var(--zemin-2); padding: clamp(1.5rem, 3vw, 2.25rem); }
.tarih { font-size: .95rem; font-weight: 600; color: var(--fusion); }
.is h3 { margin-top: .75rem; font-size: clamp(1.75rem, 3vw, 2.4rem); }
.yer { margin-top: .5rem; color: var(--gri); }
.is ul { margin: 1.25rem 0 0; padding: 0; list-style: none; }
.is li { padding: .6rem 0 .6rem 1.25rem; border-top: 1px solid var(--cizgi); position: relative; font-size: 1rem; }
.is li::before { content: ""; position: absolute; left: 0; top: 1.1rem; width: .45rem; height: .45rem; background: var(--fusion); }
.santiye-fotolar { display: grid; grid-template-columns: 1.2fr 1fr 1.2fr; gap: 1.25rem; margin-top: 1.25rem; }
.santiye-fotolar img { width: 100%; height: clamp(260px, 32vw, 460px); object-fit: cover; border: 1px solid var(--cizgi); }

/* Eğitim */
.egitim h2 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 1.5rem; }
.zaman { list-style: none; margin: 0; padding: 0; }
.zaman li { padding: .9rem 0; border-top: 1px solid var(--cizgi); color: var(--gri); font-size: 1rem; }
.zaman li span { display: block; font-size: .9rem; font-weight: 600; color: var(--fusion); margin-bottom: .2rem; }
.zaman li b { display: block; color: var(--yazi); font-size: 1.2rem; font-weight: 600; letter-spacing: -0.01em; }
.yetkinlik { margin: 0; }
.yetkinlik div { display: grid; grid-template-columns: 12rem 1fr; gap: 1rem; padding: .9rem 0; border-top: 1px solid var(--cizgi); }
.yetkinlik dt { color: var(--gri); font-size: 1rem; }
.yetkinlik dd { margin: 0; font-weight: 500; }

/* Kurduklarım */
.tinto-kart { display: flex; justify-content: space-between; align-items: end; gap: 2rem; flex-wrap: wrap; padding: clamp(1.75rem, 4vw, 3rem); background: var(--fusion); color: var(--blacktop); text-decoration: none; }
.tinto-kart h3 { margin-top: 1rem; font-size: clamp(3rem, 8vw, 6.5rem); letter-spacing: -0.05em; }
.tinto-kart p:not(.etiket) { margin-top: 1rem; max-width: 38rem; color: var(--fusion-gri); font-size: 1.15rem; }
.tinto-kart .git { font-weight: 600; font-size: 1.1rem; }
.tinto-kart:hover .git { text-decoration: underline; text-underline-offset: 4px; }
.kollar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--cizgi); border: 1px solid var(--cizgi); margin-top: 1.25rem; }
.kol { background: var(--zemin-2); padding: 1.25rem 1.5rem; text-decoration: none; }
.kol b { display: block; font-weight: 600; font-size: 1.25rem; letter-spacing: -0.02em; }
.kol span { display: block; margin-top: .3rem; color: var(--gri); font-size: .95rem; }
a.kol:hover { background: var(--zemin-3); }

/* Hayat */
.galeri { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(180px, 20vw, 300px); gap: 1.25rem; }
.galeri figure { margin: 0; position: relative; overflow: hidden; border: 1px solid var(--cizgi); }
.galeri figure.uzun { grid-row: span 2; }
.galeri img { width: 100%; height: 100%; object-fit: cover; }
.galeri figcaption { position: absolute; left: 0; bottom: 0; padding: .4rem .8rem; background: var(--blacktop); color: var(--yazi); font-size: .9rem; font-weight: 600; }

/* İletişim */
.iletisim { background: var(--fusion); color: var(--blacktop); border-bottom: 0 !important; }
.iletisim h2 { font-size: clamp(2.75rem, 8vw, 7rem); max-width: 14ch; }
.iletisim > p { margin-top: 1.25rem; font-size: 1.25rem; color: var(--fusion-gri); max-width: var(--olcu); }
.iletisim .dugme { margin-top: 2rem; background: var(--blacktop); color: var(--fusion); border-color: var(--blacktop); }
.iletisim .dugme:hover { background: transparent; color: var(--blacktop); }
.bilgi { margin: 3rem 0 0; padding-top: 1.5rem; border-top: 2px solid var(--blacktop); display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.bilgi dt { color: var(--fusion-gri); font-size: .95rem; }
.bilgi dd { margin: .25rem 0 0; font-weight: 600; }

/* Alt */
.alt { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding: 2rem var(--kenar); color: var(--gri); font-size: 1rem; }
.alt-logo { display: flex; align-items: center; gap: .6rem; color: var(--yazi); font-weight: 600; }
.alt a { color: var(--yazi); font-weight: 600; text-decoration: none; }
.alt a:hover { color: var(--fusion); }

@media (max-width: 900px) {
  .kahraman, .iki-sutun, .deneyim-listesi { grid-template-columns: 1fr; }
  .kahraman-foto { max-width: 26rem; }
  .santiye-fotolar { grid-template-columns: 1fr 1fr; }
  .santiye-fotolar img:last-child { display: none; }
  .kollar { grid-template-columns: 1fr; }
  .galeri { grid-template-columns: 1fr 1fr; }
  .bilgi { grid-template-columns: 1fr 1fr; }
  .yetkinlik div { grid-template-columns: 1fr; gap: .2rem; }
  .ust nav a:not(.nav-cta) { display: none; }
  .logo span { font-size: 1rem; }
}
.galeri figure.genis { grid-column: span 2; }
@media (max-width: 900px) { .galeri figure.genis { grid-column: span 2; } }
.galeri figure.genis img { object-position: center 72%; }

/* Kırpmasız düzen (kullanıcı isteği, 1 Kasım 2026): fotoğraflar tam hâliyle, küçültülerek */
.galeri { display: block; columns: 4 220px; column-gap: 1.25rem; }
.galeri figure, .galeri figure.uzun, .galeri figure.genis { display: block; break-inside: avoid; margin: 0 0 1.25rem; grid-row: auto; grid-column: auto; }
.galeri img, .galeri figure.genis img { width: 100%; height: auto; object-fit: initial; object-position: initial; }
.santiye-fotolar { align-items: start; }
.santiye-fotolar img { height: auto; object-fit: initial; }
.kahraman-foto img { aspect-ratio: auto; height: auto; object-fit: initial; }
@media (max-width: 900px) { .galeri { columns: 2 140px; } .santiye-fotolar img:last-child { display: block; } .santiye-fotolar { grid-template-columns: 1fr 1fr 1fr; gap: .6rem; } }

/* Şantiye satırı: kırpmasız ve eşit yükseklik (her fotoğraf en-boy oranı kadar yer kaplar) */
.santiye-fotolar { display: flex; gap: 1.25rem; align-items: flex-start; }
.santiye-fotolar img, .santiye-fotolar img:last-child { display: block; flex-shrink: 1; flex-basis: 0; width: 0; min-width: 0; height: auto; }
@media (max-width: 900px) { .santiye-fotolar { gap: .5rem; } }

/* ---------- TinTo yazısı: TinTo'nun kendi yazımı, işareti ve rengi (lime #C6FF3D, siyah #0A0A0A) ----------
   Koyu zeminde: Tin beyaz, To lime, işaret beyaz alev + lime tohum.
   Açık (Fusion) zeminde: siyah bir etiket içinde aynısı — lime açık zeminde okunmaz. */
.tinto-ad { display: inline-flex; align-items: center; gap: .18em; font-weight: 600; letter-spacing: -0.03em; white-space: nowrap; vertical-align: baseline; }
.tinto-ad .tm-isaret { width: .95em; height: .95em; flex: none; transform: translateY(.05em); }
.tinto-ad .tm-alev { fill: #F4F4EE; }
.tinto-ad .tm-tohum { fill: #C6FF3D; }
.tinto-ad .tm-tin { color: #F4F4EE; }
.tinto-ad .tm-to { color: #C6FF3D; }
a.tinto-bag { text-decoration: none; }
a.tinto-bag:hover .tm-tin { text-decoration: underline; text-underline-offset: 4px; }
/* açık zeminler */
.hakkimda .tinto-ad, .iletisim .tinto-ad { background: #0A0A0A; padding: .05em .4em .1em .3em; }
/* koyu düğmede (ikincil) yazı rengi korunur */
.dugme.ikincil .tinto-ad { font-weight: 600; }
/* TinTo kartı: artık TinTo'nun kendi renginde (siyah + lime) */
.tinto-kart { background: #0A0A0A; color: #F4F4EE; border: 2px solid #C6FF3D; }
.tinto-kart .etiket.koyu { color: #A3A39C; }
.tinto-kart .etiket.koyu::before { background: #C6FF3D; }
.tinto-kart p:not(.etiket) { color: #A3A39C; }
.tinto-kart .git { color: #C6FF3D; }
.tinto-baslik .tinto-ad { gap: .12em; }
.tinto-baslik .tm-isaret { width: .8em; height: .8em; }
/* kollar: kendi işaret ve renkleriyle */
.kol b { display: flex; align-items: center; gap: .5rem; }
.kol b img { width: 1.6rem; height: 1.6rem; }
.kol b i { font-style: normal; font-weight: 500; }
.kol-arc b i { color: #9AB4E3; } .kol-tech b i { color: #3FB8FF; } .kol-play b i { color: #C6FF3D; }
.kol-play b img { image-rendering: pixelated; }
/* TinTo yazısı düzeltme: Tin ile To bitişik; giriş satırındaki mavi span kuralı ezilmesin */
.tinto-ad { gap: 0; }
.tinto-ad .tm-isaret { margin-right: .22em; }
.kahraman .unvan .tinto-ad .tm-tin, .tinto-ad .tm-tin { color: #F4F4EE; }
.kahraman .unvan .tinto-ad .tm-to, .tinto-ad .tm-to { color: #C6FF3D; }

/* Galeri: 4 elle dizilmiş sütun (Kırgızistan ortada, boks kenarda ve küçük) — kırpma yok */
.galeri { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; columns: auto; align-items: start; }
.galeri .sutun { display: flex; flex-direction: column; gap: 1.25rem; }
.galeri .sutun figure { margin: 0; }
.galeri figure.kucuk { width: 62%; align-self: flex-end; }
@media (max-width: 900px) { .galeri { grid-template-columns: 1fr 1fr; gap: .75rem; } .galeri .sutun { gap: .75rem; } }

/* "TinTo · Arc · Tech · Play · COSALEMARKET" düğmesi */
.kurduklarim-dugme { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .55rem; }
.kurduklarim-dugme .ayrac { color: var(--gri); }
.kurduklarim-dugme .km { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; }
.kurduklarim-dugme .km img { width: 1.1rem; height: 1.1rem; }
.km-arc { color: #9AB4E3; } .km-tech { color: #3FB8FF; } .km-play { color: #C6FF3D; }
.km-play img { image-rendering: pixelated; }
.km-cm { color: #FAF9F4; letter-spacing: .02em; } .km-cm b { color: #85BB65; font-weight: 700; }
.km-cm img { border-radius: 0; }
/* COSALEMARKET kartı — kendi marka kiti: dolar yeşili #85BB65, banknot mürekkebi #1F3A2B, kâğıt #FAF9F4 */
.cm-kart { display: grid; grid-template-columns: auto 1fr auto; gap: 1.5rem; align-items: center; margin-top: 1.25rem; padding: clamp(1.5rem, 3vw, 2.25rem); background: #1F3A2B; color: #FAF9F4; text-decoration: none; border: 2px solid #85BB65; }
.cm-kart img { width: 88px; height: 88px; border-radius: 50%; }
.cm-kart .etiket { color: #CFE3C2; } .cm-kart .etiket::before { background: #85BB65; }
.cm-kart h3 { margin-top: .5rem; font-size: clamp(2rem, 4.5vw, 3.25rem); letter-spacing: .01em; font-weight: 800; }
.cm-kart h3 b, .cm-bag b { color: #85BB65; }
.cm-kart p:not(.etiket) { margin-top: .6rem; max-width: 40rem; color: #CFE3C2; }
.cm-kart .git { color: #85BB65; font-weight: 600; }
.cm-kart:hover .git { text-decoration: underline; text-underline-offset: 4px; }
a.cm-bag { font-weight: 700; text-decoration: none; background: #1F3A2B; color: #FAF9F4; padding: .05em .35em; letter-spacing: .02em; }
a.kol { color: inherit; }
@media (max-width: 900px) { .cm-kart { grid-template-columns: 1fr; } }
.kurduklarim-dugme .km-cm { gap: 0; }
.kurduklarim-dugme .km-cm img { margin-right: .3rem; }
.galeri { grid-auto-rows: auto !important; }
.tinto-baslik .tinto-ad { gap: 0; }
.tinto-baslik .tinto-ad .tm-isaret { margin-right: .15em; }
.galeri figure.kucuk { width: 50%; }

/* Galeri 3 sütun: sol su sporları + Philadelphia, orta Kırgızistan+kayak+New York, sağ fitness+boks+çöl (2026-11-01) */
.galeri { grid-template-columns: repeat(3, 1fr) !important; }
.galeri figure.kucuk { width: 100%; }
@media (max-width: 900px) { .galeri { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 900px) {
  .galeri { display: block !important; columns: 2; column-gap: .75rem; }
  .galeri .sutun { display: contents; }
  .galeri .sutun figure { break-inside: avoid; margin: 0 0 .75rem; }
}

/* Portfolyo (2026-11-01) */
.portfolyo-bas { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap; }
.portfolyo-bas .etiket { margin-bottom: 1rem; }
.portfolyo-bas .dugme span { font-weight: 500; opacity: .7; margin-left: .4rem; font-size: .9rem; }
.projeler { display: grid; gap: clamp(3rem, 7vw, 6rem); }
.proje { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.proje.ters .proje-kapak { order: 2; }
.proje-kapak { display: block; border: 1px solid var(--cizgi); overflow: hidden; background: var(--zemin-2); }
.proje-kapak img { display: block; width: 100%; height: auto; transition: transform .4s ease; }
.proje-kapak:hover img { transform: scale(1.025); }
.proje-no { font-size: 3.5rem; font-weight: 600; letter-spacing: -0.04em; line-height: 1; color: var(--fusion); }
.proje h3 { margin-top: .6rem; font-size: clamp(1.8rem, 3.2vw, 2.6rem); letter-spacing: -0.03em; line-height: 1.05; }
.proje-alt { margin-top: .4rem; font-size: 1.15rem; color: var(--yazi); }
.proje-ders { margin-top: .3rem; font-size: .95rem; color: var(--gri); }
.proje-yazi { margin-top: 1.1rem; color: var(--gri); max-width: 36rem; }
.kunye { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: .4rem 2rem; margin: 1.3rem 0 0; padding-top: 1rem; border-top: 1px solid var(--cizgi); }
.kunye dt { font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--fusion-gri); }
.kunye dd { margin: .15rem 0 0; font-size: .98rem; font-weight: 500; }
.proje-sayfalar { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin-top: 1.4rem; }
.proje-sayfalar a { display: block; border: 1px solid var(--cizgi); background: #ECEBE7; }
.proje-sayfalar a:hover { border-color: var(--fusion); }
.proje-sayfalar img { display: block; width: 100%; height: auto; }
.proje-git { display: inline-block; margin-top: 1.1rem; font-weight: 600; color: var(--fusion); text-decoration: none; }
.proje-git:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 900px) {
  .proje { grid-template-columns: 1fr; }
  .proje.ters .proje-kapak { order: 0; }
  .kunye { grid-template-columns: 1fr 1fr; }
  .proje-sayfalar { grid-template-columns: repeat(2, 1fr); }
}
.proje-yakinda { display: grid; grid-template-columns: auto 1fr auto; gap: 1.5rem; align-items: center; padding: clamp(1.5rem, 3vw, 2.25rem); border: 1px dashed var(--fusion-gri); }
.proje-yakinda .proje-no { font-size: 2.5rem; opacity: .6; }
.proje-yakinda h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -0.03em; }
.yakinda-etiket { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--fusion); }
.yakinda-etiket::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--fusion); animation: yanip 1.6s ease-in-out infinite; }
@keyframes yanip { 50% { opacity: .25; } }
@media (max-width: 600px) { .proje-yakinda { grid-template-columns: 1fr; gap: .5rem; } }

/* 05 Gökbahçeli İkiz Kule önizleme */
.proje-no .yakinda-etiket { font-size: 1rem; letter-spacing: 0; vertical-align: middle; margin-left: .75rem; }
.proje.ikiz .proje-kapak { border-style: dashed; border-color: var(--fusion-gri); }
.proje-not { margin-top: 1rem; font-size: .92rem; color: var(--fusion-gri); }

/* ---- Portfolyo v2: proje kimlikleri (KIMLIKLER.md) ---- */
@font-face { font-family: "Outfit"; src: url("portfolyo/r3/fontlar/Outfit.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("portfolyo/r3/fontlar/IBMPlexMono-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("portfolyo/r3/fontlar/CormorantGaramond-Italic.ttf") format("truetype"); font-style: italic; font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("portfolyo/r3/fontlar/BarlowCondensed-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }

.proje--flow     { --p-ana:#1D5560; --p-vurgu:#3A9480; --p-murekkep:#142529; --p-ara:#56696E; --p-kagit:#F3EEE4; --p-font:"Outfit", var(--font-baslik, sans-serif); }
.proje--haskoy   { --p-ana:#2B50B8; --p-vurgu:#C2CC2E; --p-murekkep:#1E2228; --p-ara:#5E6670; --p-kagit:#F6F6F3; --p-font:"IBM Plex Mono", ui-monospace, monospace; }
.proje--fikirtepe{ --p-ana:#56653A; --p-vurgu:#A8784A; --p-murekkep:#231E19; --p-ara:#6E6457; --p-kagit:#ECE4D5; --p-font:"Cormorant Garamond", Georgia, serif; }
.proje--sailing  { --p-ana:#172B47; --p-vurgu:#3FA0C4; --p-murekkep:#101A28; --p-ara:#5D6B78; --p-kagit:#EEF1F2; --p-font:"Barlow Condensed", "Arial Narrow", sans-serif; }

.proje[class*="proje--"] { --fusion: var(--p-ana); --cizgi: color-mix(in srgb, var(--p-ana) 22%, transparent); --zemin-2: var(--p-kagit); }
.proje[class*="proje--"] .proje-no { color: var(--p-ana); font-family: var(--p-font); }
.proje[class*="proje--"] h3 { font-family: var(--p-font); }
.proje--fikirtepe h3 { font-style: italic; font-weight: 500; letter-spacing: 0; }
.proje--haskoy h3, .proje--sailing h3 { text-transform: uppercase; letter-spacing: .02em; }
.proje[class*="proje--"] .proje-kapak { border-bottom: 6px solid var(--p-ana); }
.proje[class*="proje--"] .proje-sayfalar a { background: var(--p-kagit); }
.proje[class*="proje--"] .proje-sayfalar a:hover { border-color: var(--p-ana); }
.proje[class*="proje--"] .proje-git { color: var(--p-ana); }
/* motif: kart numarasının yanında küçük SVG (index.html'de <span class="proje-motif" aria-hidden="true"></span>) */
.proje-motif { display:inline-block; width:2.6em; height:.65em; margin-left:.4em; vertical-align: middle; background-color: var(--p-vurgu);
  -webkit-mask: var(--p-motif) center/contain no-repeat; mask: var(--p-motif) center/contain no-repeat; }
.proje--haskoy .proje-motif { background-color: var(--p-ana); }  /* limon açık zeminde okunmaz */
.proje--fikirtepe .proje-motif { background-color: var(--p-ana); }
.proje--flow     { --p-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 14'%3E%3Cpath d='M1 13h7V9h7V5h7V1c6 0 9 6 15 6s9-6 15-6' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E"); }
.proje--haskoy   { --p-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 14'%3E%3Cg stroke='%23000' stroke-width='1.4'%3E%3Cpath d='M7 2v10M2 7h10M30 2v10M25 7h10M53 2v10M48 7h10'/%3E%3C/g%3E%3C/svg%3E"); }
.proje--fikirtepe{ --p-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 14'%3E%3Crect x='1' y='2' width='18' height='12'/%3E%3Crect x='41' y='2' width='18' height='12'/%3E%3Crect x='24' y='1' width='12' height='7' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E"); }
.proje--sailing  { --p-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 14'%3E%3Ccircle cx='12' cy='6' r='5' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3Cpath d='M1 11h22l12 3M33 9q4-2 8 0t8 0t8 0' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E"); }

/* Koyu site zemini için okunur tonlar (zemin ≈ #0E0E0E üstünde kontrast ≥ 5:1) */
.proje--flow      { --p-ekran:#3A9480; }
.proje--haskoy    { --p-ekran:#7B95E6; }
.proje--fikirtepe { --p-ekran:#A3B077; }
.proje--sailing   { --p-ekran:#E2625A; }
.proje[class*="proje--"] .proje-no,
.proje[class*="proje--"] .proje-git { color: var(--p-ekran); }
.proje[class*="proje--"] .proje-kapak { border-bottom-color: var(--p-ekran); }
.proje[class*="proje--"] .proje-sayfalar a:hover { border-color: var(--p-ekran); }
.proje--flow .proje-motif, .proje--haskoy .proje-motif, .proje--fikirtepe .proje-motif, .proje--sailing .proje-motif { background-color: var(--p-ekran); }

/* Masanın dışında: Spor ve Yerler, eşit boylu iki sıra, kırpma yok (2026-11-08). --o = foto en/boy oranı */
.foto-seri h3 { margin: 2rem 0 .75rem; font-size: .85rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gri); }
.foto-satir { display: flex; gap: 1rem; }
.foto-satir figure { margin: 0; flex: var(--o) 1 0; min-width: 0; }
.foto-satir img { display: block; width: 100%; height: auto; }
.foto-satir figcaption { margin-top: .4rem; font-size: .8rem; color: var(--gri); }
@media (max-width: 700px) {
  .foto-satir { overflow-x: auto; scroll-snap-type: x proximity; gap: .75rem; padding-bottom: .5rem; }
  .foto-satir figure { flex: none; scroll-snap-align: start; }
  .foto-satir img { width: auto; height: 320px; }
  .foto-satir figcaption { width: 0; min-width: 100%; }
}

/* Ayrı sayfalar (2026-11-08): her bölüm kendi sayfasında */
main { min-height: calc(100vh - 12rem); }
.sayfa-baslik { font-size: clamp(2.5rem, 6vw, 4.75rem); }
.deneyim .sayfa-baslik { margin-bottom: clamp(2rem, 4vw, 3rem); }
.iletisim .sayfa-baslik { font-size: clamp(2.75rem, 8vw, 7rem); max-width: 14ch; }
.ust nav a[aria-current="page"]:not(.nav-cta) { color: var(--yazi); text-decoration: underline; text-underline-offset: .35em; }
@media (max-width: 900px) {
  .ust { flex-wrap: wrap; }
  .ust nav { width: 100%; flex-wrap: wrap; gap: .4rem 1rem; }
  .ust nav a:not(.nav-cta) { display: inline-block; white-space: nowrap; }
  .ust nav .nav-cta { white-space: nowrap; }
}

/* Hakkımda ana sayfada: koyu zemin, açık mavi İletişim'den ayrılsın (2026-11-08) */
main > section.hakkimda { background: var(--blacktop); color: var(--yazi); }
.hakkimda h2, .hakkimda .buyuk { color: var(--yazi); }
.hakkimda .metin p:not(.buyuk) { color: var(--gri); }

/* Sosyal medya simgeleri (15 Kasım 2026) */
.sosyal { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.sosyal a { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; border: 1px solid var(--cizgi); color: var(--yazi); transition: color .15s, border-color .15s, background .15s; }
.sosyal a:hover, .sosyal a:focus-visible { color: var(--blacktop); background: var(--fusion); border-color: var(--fusion); }
.sosyal svg { width: .95rem; height: .95rem; fill: currentColor; }
.sosyal-alt { margin-top: 0; gap: .5rem; }
.sosyal-alt a { width: 1.75rem; height: 1.75rem; border-color: transparent; color: var(--gri); }
.sosyal-alt svg { width: .85rem; height: .85rem; }
.iletisim .sosyal a { color: var(--blacktop); border-color: var(--blacktop); }
.iletisim .sosyal a:hover, .iletisim .sosyal a:focus-visible { color: var(--fusion); background: var(--blacktop); border-color: var(--blacktop); }
.sosyal-dd { margin-top: .15rem; gap: .35rem; }
.iletisim .sosyal-dd a { width: 1.6rem; height: 1.6rem; border-color: transparent; }
.sosyal-dd svg { width: .9rem; height: .9rem; }
/* 15 Kasım: daha da küçük */
.iletisim .sosyal-dd a { width: 1.3rem; height: 1.3rem; }
.sosyal-dd svg { width: .75rem; height: .75rem; }
.sosyal-alt a { width: 1.4rem; height: 1.4rem; }
.sosyal-alt svg { width: .72rem; height: .72rem; }
/* 15 Kasım: bir tık büyüt */
.iletisim .sosyal-dd a { width: 1.5rem; height: 1.5rem; }
.sosyal-dd svg { width: .85rem; height: .85rem; }
.sosyal-alt a { width: 1.6rem; height: 1.6rem; }
.sosyal-alt svg { width: .8rem; height: .8rem; }