@font-face { font-family: "PP Eiko"; src: url("PPEiko-Thin.ttf") format("truetype"); font-weight: 100; font-style: normal; font-display: swap; } /* SEO / a11y: arama motorları ve ekran okuyucular okur, gözle görünmez. Tasarımı etkilemez — sayfa akışı dışında, 1px clip ile gizlenir. */ .sr-only, .sr-only-wrap { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; scrollbar-gutter: stable; /* splash lock'ta scrollbar kaybolunca layout shift olmasın */ } html, body { width: 100%; background: #000; color: #fff; font-family: "PP Eiko", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; } /* Splash sırasında scroll kilidi — videolar yüklensin ve intro tamamlansın. JS, sayfa açılışında 'a 'splash-locked' class'ı ekler, 3.5sn sonra kaldırır. */ html.splash-locked, html.splash-locked body { overflow: hidden; height: 100%; } /* Global hover değişkenleri — Soft Roll Up için */ :root { --hover-stagger: 45ms; --hover-duration: 480ms; --hover-easing: cubic-bezier(.2, .8, .2, 1); } /* overflow-x: hidden, sticky'yi bozar (spec gereği overflow-y'yi auto'ya promote eder ve body'i scroll container'a dönüştürür). clip kullan — modern, sticky'i etkilemez. */ body { overflow-x: clip; } /* Her ekran = 1 viewport */ .screen { position: relative; width: 100%; height: 100vh; height: 100svh; overflow: hidden; } /* Opak (siyah bg) ekranlar daha yüksek stacking. */ #s1, #s4, #s5, #s8 { z-index: 1; } /* Katman temeli */ .layer { position: absolute; inset: 0; width: 100%; height: 100%; /* Universal parallax — JS --parallax-y'yi günceller (px) */ translate: 0 var(--parallax-y, 0px); will-change: translate; } /* Bazı section'ların overflow'u görünür olmalı (paylaşılan bg için) */ .screen.no-clip { overflow: visible; } /* ============================ s23-bg — TEK bg.png, 2s+3s'i kapsar position: fixed → viewport'a yapışır (donmuş) JS, s2 veya s3 görünürse .visible class ekler. ============================ */ .s23-bg { --s23-bg-x: 50%; --s23-bg-y: 50%; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; object-fit: cover; object-position: var(--s23-bg-x) var(--s23-bg-y); z-index: 0; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .s23-bg.visible { opacity: 1; } /* ============================ 1s — Sayfa 1 ============================ */ /* ---------------------------------------------------------- LOGO AYARLARI — eraypiskin.png boyut ve konumunu buradan değiştir ---------------------------------------------------------- */ #s1 { /* Başlangıç (ortada) */ --logo-start-width: 100vw; /* başlangıç genişliği */ --logo-start-top: 50%; /* dikey konum (ortalı için 50%) */ --logo-start-x: 0; /* yatay kayma (sola/sağa offset) */ /* Final (üstte) */ --logo-end-width: 100vw; /* üste kayınca genişlik (örn: 60vw küçültmek için) */ --logo-end-top: 15%; /* üst kenardan mesafe (örn: 20px) */ --logo-end-x: 0; /* yatay kayma */ /* Animasyon zamanlaması */ --logo-fade-duration: 1s; /* başta fade-in süresi */ --logo-move-delay: 1s; /* üste kayma ne zaman başlasın */ --logo-move-duration: 2s; /* üste kayma süresi */ --video-fade-delay: 1s; /* video ne zaman görünmeye başlasın */ --video-fade-duration: 1.2s; /* video fade-in süresi */ /* ---- Intro text (açılışta logo altındaki tek satır) ---- */ --intro-text-top: calc(100% + 10vw); /* logo merkezinin altında — vw bağlı, mobilde de tutar */ --intro-text-size: clamp(11px, 1.1vw, 14px); --intro-text-letter: 0.15em; /* ---- Nav buttons (logo üste yerleştikten sonra altında) ---- */ --nav-top: calc(var(--logo-end-top) + 10dvw); /* logo final konumunun altında */ --nav-font-size: clamp(13px, 1.2vw, 16px); --nav-letter: 0.2em; --nav-fade-delay: 3s; /* logo-move-delay (1s) + logo-move-duration (2s) */ --nav-fade-duration: 1s; /* ---- Hover: Wave Lift (harfler soldan sağa stagger ile yukarı) ---- */ --hover-lift: -8px; /* harflerin yükseliş mesafesi */ --hover-stagger: 35ms; /* harfler arası gecikme */ --hover-duration: 380ms; /* her harfin animasyon süresi */ --hover-easing: cubic-bezier(.2, .8, .2, 1); /* eğri (smooth out) */ } /* 0k — siyah arkaplan */ #s1 .k0 { background: #000; z-index: 0; } /* 1k — video, fade-in */ #s1 .k1 { object-fit: cover; z-index: 1; opacity: 0; animation: videoFadeIn var(--video-fade-duration) ease-in var(--video-fade-delay) forwards; } @keyframes videoFadeIn { to { opacity: 1; } } /* 2k — logo: önce fade-in ile görünür, sonra üste kayar */ #s1 .k2 { position: absolute; left: 0; top: var(--logo-start-top); width: var(--logo-start-width); height: auto; object-fit: contain; z-index: 2; opacity: 0; transform: translate(var(--logo-start-x), -50%); animation: logoFadeIn var(--logo-fade-duration) ease-out 0s forwards, logoSlideUp var(--logo-move-duration) cubic-bezier(0.65, 0, 0.35, 1) var(--logo-move-delay) forwards; } @keyframes logoFadeIn { to { opacity: 1; } } @keyframes logoSlideUp { 0% { top: var(--logo-start-top); width: var(--logo-start-width); transform: translate(var(--logo-start-x), -50%); } 100% { top: var(--logo-end-top); width: var(--logo-end-width); transform: translate(var(--logo-end-x), -50%); /* her zaman merkezden konumla */ } } /* Intro text — açılışta logonun altında belirir, logo kayarken kaybolur */ #s1 .intro-text { position: absolute; left: 0; width: 100%; text-align: center; top: var(--intro-text-top); transform: translateY(-50%); font-family: "PP Eiko", sans-serif; font-weight: 100; font-size: var(--intro-text-size); letter-spacing: var(--intro-text-letter); color: #fff; z-index: 3; opacity: 0; pointer-events: none; animation: introFadeIn var(--logo-fade-duration) ease-out 0s forwards, introFadeOut 0.5s ease-in var(--logo-move-delay) forwards; } @keyframes introFadeIn { to { opacity: 1; } } @keyframes introFadeOut { to { opacity: 0; } } /* Nav buttons — logo yerine oturduktan sonra fade-in */ #s1 .nav-buttons { position: absolute; left: 0; width: 100%; top: var(--nav-top); transform: translateY(-50%); display: flex; justify-content: space-evenly; align-items: center; z-index: 3; opacity: 0; animation: navFadeIn var(--nav-fade-duration) ease-out var(--nav-fade-delay) forwards; } #s1 .nav-buttons a { color: #fff; text-decoration: none; font-family: "PP Eiko", sans-serif; font-weight: 100; font-size: var(--nav-font-size); letter-spacing: var(--nav-letter); text-transform: lowercase; padding: 8px 16px; display: inline-flex; line-height: 1; } /* (Eski Wave Lift kuralları kaldırıldı — global .letter / .letter-top / .letter-bot kullanılıyor) */ @keyframes navFadeIn { to { opacity: 1; } } /* ============================ 2s — Sayfa 2 ============================ */ /* ---------------------------------------------------------- 2s AYARLARI — buradan tüm değerleri değiştir ---------------------------------------------------------- */ #s2 { /* red.webp boyut ve konumu */ --red-width: 100vw; /* yatay tam ekran */ --red-top: 65%; /* dikey konum (merkez) */ --red-left: 50%; /* yatay konum */ --red-rotate: 0deg; /* döndürme */ /* 2s text */ --s2-text-size: clamp(14px, 2vw, 26px); --s2-text-top: 90%; --s2-text-left: 50%; --s2-text-letter: 0.1em; --s2-text-color: #fff; --s2-text-weight: 100; } #s2 { background: transparent; } /* (s2-bg kaldırıldı — bg.png artık global s23-bg fixed image) */ /* 1k — red.webp */ #s2 .k1 { position: absolute; top: var(--red-top); left: var(--red-left); width: var(--red-width); height: auto; transform: translate(-50%, -50%) rotate(var(--red-rotate)); object-fit: contain; z-index: 1; pointer-events: none; } /* 2k — text */ #s2 .s2-text { position: absolute; top: var(--s2-text-top); left: var(--s2-text-left); transform: translate(-50%, -50%); width: 100%; text-align: center; font-family: "PP Eiko", sans-serif; font-weight: var(--s2-text-weight); font-size: var(--s2-text-size); letter-spacing: var(--s2-text-letter); color: var(--s2-text-color); line-height: 1.1; z-index: 2; padding: 0 16px; } /* ============================ 3s — Sayfa 3 (pinned matryoshka) ============================ */ /* ---------------------------------------------------------- 3s AYARLARI ---------------------------------------------------------- */ #s3 { --photo-width: clamp(330px, 40vw, 570px); /* taban fotoğraf genişliği (4:5 oran) */ --photo-bg-1: #1a1a1a; --photo-bg-2: #2a2a2a; --photo-bg-3: #3a3a3a; --photo-label-color: rgba(255, 255, 255, 0.55); --caption-size: clamp(12px, 1.1vw, 15px); --caption-color: rgba(255, 255, 255, 0.75); --caption-gap: 0px; /* fotoğraf ile metin arası boşluk */ /* Arka plan metni — fotoğrafların arkasında */ --s3-bg-text-size: clamp(14px, 2vw, 26px); --s3-bg-text-color: rgba(255, 255, 255, 0.9); --s3-bg-text-letter: 0.1em; --s3-bg-text-weight: 100; --s3-bg-text-top: 50%; --s3-bg-text-left: 50%; --s3-bg-text-max-width: 80vw; } .screen-pinned { position: relative; width: 100%; height: 400vh; /* dış kap — 100vh pin + 300vh scroll range (her foto = 100vh = 1 tam ekran) */ background: transparent; } /* Ortak — tüm .screen-pinned section'ları için (s3, s5, s6, s7) */ .screen-pinned .pin-content { position: sticky; top: 0; width: 100%; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 2; } .screen-pinned .photo-stack { position: relative; z-index: 1; display: block; /* kullanıldığında da boyut kuralları çalışsın */ text-decoration: none; color: inherit; } .screen-pinned .photo { position: absolute; inset: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-family: "PP Eiko", sans-serif; font-weight: 100; font-size: clamp(14px, 1.6vw, 20px); letter-spacing: 0.25em; text-transform: lowercase; color: rgba(255, 255, 255, 0.55); will-change: transform; transform-origin: center center; overflow: hidden; } .screen-pinned .p1 { z-index: 1; transform: scale(0); } .screen-pinned .p2 { z-index: 2; transform: scale(0); } .screen-pinned .p3 { z-index: 3; transform: scale(0); } .screen-pinned .photo img { width: 100%; height: 100%; object-fit: cover; display: block; } /* S3'e özel — 4:5 portrait stack + s3 bg renkleri */ #s3 .photo-stack { width: var(--photo-width); aspect-ratio: 4 / 5; } #s3 .p1 { background: var(--photo-bg-1); } #s3 .p2 { background: var(--photo-bg-2); } #s3 .p3 { background: var(--photo-bg-3); } #s3 .photo { color: var(--photo-label-color); } #s3 .s3-bg-text { position: absolute; top: var(--s3-bg-text-top); left: var(--s3-bg-text-left); transform: translate(-50%, -50%); width: 100%; max-width: var(--s3-bg-text-max-width); text-align: center; font-family: "PP Eiko", sans-serif; font-weight: var(--s3-bg-text-weight); font-size: var(--s3-bg-text-size); letter-spacing: var(--s3-bg-text-letter); color: var(--s3-bg-text-color); line-height: 1.3; padding: 0 16px; z-index: 0; pointer-events: none; } #s3 .s3-caption { margin-top: var(--caption-gap); font-family: "PP Eiko", sans-serif; font-weight: 100; font-size: var(--caption-size); letter-spacing: 0.2em; color: var(--caption-color); text-transform: lowercase; text-align: center; max-width: 80vw; } /* ============================ Sticky navbar — sadece text, arkaplan/blur YOK ============================ */ .sticky-nav { position: fixed; top: 0; left: 0; width: 100%; padding: 22px 24px; display: flex; justify-content: space-evenly; align-items: center; /* background YOK, backdrop-filter YOK */ z-index: 1000; opacity: 0; pointer-events: none; transform: translateY(-100%); transition: opacity 0.4s ease, transform 0.4s ease; } .sticky-nav.visible { opacity: 1; pointer-events: auto; transform: translateY(0); } .sticky-nav a { color: #fff; text-decoration: none; font-family: "PP Eiko", sans-serif; font-weight: 100; font-size: clamp(13px, 1.2vw, 16px); letter-spacing: 0.2em; text-transform: lowercase; padding: 8px 16px; display: inline-flex; line-height: 1; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); /* okunabilirlik için ince gölge */ } /* ============================ Soft Roll Up — GLOBAL hover (hem #s1 nav-buttons hem .sticky-nav) Yapı: içinde + Hover'da ikisi de translateY(-100%) → üst kaybolur, alt yerine geçer Soldan sağa stagger (--i * --hover-stagger) ============================ */ /* Kelime kutusu: harfler arası kırılmayı engeller; satır sonu sadece kelimeler arasındaki boşlukta olur ("SIGNAL CLUB" gibi çok kelimeli isimler) */ .nav-buttons a .word, .sticky-nav a .word, .venture-name .word { display: inline-block; white-space: nowrap; } .nav-buttons a .letter, .sticky-nav a .letter, .venture-name .letter { position: relative; display: inline-block; overflow: hidden; height: 1em; line-height: 1em; vertical-align: bottom; } .nav-buttons a .letter-top, .nav-buttons a .letter-bot, .sticky-nav a .letter-top, .sticky-nav a .letter-bot, .venture-name .letter-top, .venture-name .letter-bot { display: block; height: 1em; line-height: 1em; transition: transform var(--hover-duration) var(--hover-easing); transition-delay: calc(var(--i) * var(--hover-stagger)); will-change: transform; } .nav-buttons a .letter-bot, .sticky-nav a .letter-bot, .venture-name .letter-bot { position: absolute; top: 100%; /* başta wrap'in altında, görünmez */ left: 0; } .nav-buttons a:hover .letter-top, .nav-buttons a:hover .letter-bot, .sticky-nav a:hover .letter-top, .sticky-nav a:hover .letter-bot, .venture-link:hover .venture-name .letter-top, .venture-link:hover .venture-name .letter-bot { transform: translateY(-100%); /* üst yukarı kaybolur, alt yerini alır */ } /* ============================ 4s — Sayfa 4 ============================ */ /* ---------------------------------------------------------- 4s AYARLARI — buradan tüm değerleri değiştir ---------------------------------------------------------- */ #s4 { /* black.webp arka plan konum/ölçek */ --s4-bg-fit: cover; /* cover | contain */ --s4-bg-pos-x: 50%; --s4-bg-pos-y: 50%; --s4-bg-scale: 130%; /* parallax kayması kenarları açmasın diye yükseklik > 100% */ /* 4s text */ --s4-text-size: clamp(14px, 2vw, 26px); --s4-text-top: 100%; --s4-text-left: 50%; --s4-text-letter: 0.1em; --s4-text-color: #fff; --s4-text-weight: 100; } #s4 { background: #000; } /* 1k — black.webp arka plan (parallax: .layer k1 → speed 0.7) */ #s4 .k1 { position: absolute; top: 50%; left: 50%; width: 100%; height: var(--s4-bg-scale); transform: translate(-50%, -50%); object-fit: var(--s4-bg-fit); object-position: var(--s4-bg-pos-x) var(--s4-bg-pos-y); z-index: 1; pointer-events: none; } /* 2k — text */ #s4 .s4-text { position: absolute; top: var(--s4-text-top); left: var(--s4-text-left); transform: translate(-50%, -50%); width: 100%; text-align: center; font-family: "PP Eiko", sans-serif; font-weight: var(--s4-text-weight); font-size: var(--s4-text-size); letter-spacing: var(--s4-text-letter); color: var(--s4-text-color); line-height: 1.1; z-index: 2; padding: 0 16px; } /* ============================ 5s — Ventures editorial index (III projeler) Sinematik dergi jeneriği: numara / isim / tagline / ok ============================ */ #s5.ventures-index { background: #000; height: auto; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; justify-content: center; padding: clamp(80px, 12vh, 140px) clamp(20px, 5vw, 48px); overflow: visible; } .ventures-inner { width: 100%; max-width: 1120px; } .ventures-list { list-style: none; padding: 0; margin: 0; } .venture { border-top: 1px solid rgba(255, 255, 255, 0.14); } .venture:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.14); } .venture-link { display: grid; grid-template-columns: minmax(180px, 1.2fr) 2fr auto; gap: clamp(20px, 3vw, 48px); align-items: baseline; padding: clamp(32px, 5vw, 56px) 0; text-decoration: none; color: #fff; } .venture-name { font-family: "PP Eiko", sans-serif; font-weight: 100; font-size: clamp(30px, 4.5vw, 56px); letter-spacing: 0.03em; line-height: 1.05; text-transform: uppercase; color: #fff; min-width: 0; /* grid hücresi daralabilsin → isim boşlukta sağlıklı sarılır */ } .venture-tag { font-family: "PP Eiko", sans-serif; font-weight: 100; font-size: clamp(14px, 1.35vw, 17px); letter-spacing: 0.02em; line-height: 1.45; color: rgba(255, 255, 255, 0.65); text-transform: lowercase; transition: color .3s ease; } .venture-arrow { font-family: "PP Eiko", sans-serif; font-weight: 100; font-size: clamp(20px, 1.8vw, 24px); color: rgba(255, 255, 255, 0.6); justify-self: end; display: inline-block; transition: transform .35s cubic-bezier(.2,.8,.2,1), color .3s ease; } .venture-link:hover .venture-tag { color: rgba(255, 255, 255, 0.95); } .venture-link:hover .venture-arrow { color: #fff; transform: translate(6px, -6px); } /* Scroll reveal — mevcut IO tarafından eklenen .in-view ile tetiklenir */ .ventures-index .venture { opacity: 0; transform: translateY(28px); transition: opacity 720ms cubic-bezier(.2,.8,.2,1), transform 720ms cubic-bezier(.2,.8,.2,1); } .ventures-index.in-view .venture { opacity: 1; transform: translateY(0); } .ventures-index.in-view .venture:nth-child(1) { transition-delay: 80ms; } .ventures-index.in-view .venture:nth-child(2) { transition-delay: 220ms; } .ventures-index.in-view .venture:nth-child(3) { transition-delay: 360ms; } /* Mobil — dikey stack, ok sağ üstte */ @media (max-width: 760px) { .venture-link { grid-template-columns: 1fr; gap: 14px; padding: 36px 0 32px; position: relative; } .venture-name { font-size: clamp(34px, 9vw, 44px); } .venture-tag { font-size: 15px; max-width: 36ch; } .venture-arrow { position: absolute; top: 34px; right: 0; font-size: 22px; } } /* ============================ 8s — Contact (s1'in splash sonrası hali) ============================ */ /* ---------------------------------------------------------- 8s AYARLARI — logo, sosyal butonlar, copyright konumları ---------------------------------------------------------- */ #s8 { /* Logo (s1'in final konumu ile aynı default) */ --s8-logo-width: 100vw; /* logo genişliği */ --s8-logo-top: 15%; /* üstten mesafe */ --s8-logo-x: 0; /* yatay offset */ /* Sosyal butonlar — logonun altında */ --s8-social-top: calc(var(--s8-logo-top) + 15dvw); --s8-social-icon-size: clamp(22px, 2vw, 28px); --s8-social-gap: clamp(28px, 5vw, 56px); /* Copyright — en altta */ --s8-copy-bottom: 24px; --s8-copy-size: clamp(11px, 1vw, 13px); --s8-copy-letter: 0.2em; --s8-copy-color: rgba(255, 255, 255, 0.7); } #s8 { background: #000; } /* 0k — siyah arkaplan */ #s8 .k0 { background: #000; z-index: 0; } /* 1k — video (s1 ile aynı, fade-in YOK — direkt görünür) */ #s8 .k1 { object-fit: cover; z-index: 1; } /* 2k — logo (s1 final konumu ile aynı) */ #s8 .k2 { position: absolute; left: 0; top: var(--s8-logo-top); width: var(--s8-logo-width); height: auto; object-fit: contain; z-index: 2; transform: translate(var(--s8-logo-x), -50%); } /* Sosyal butonlar — s1 nav-buttons ile aynı dizilim */ #s8 .social-buttons { position: absolute; left: 0; right: auto; bottom: auto; width: 100%; height: auto; top: var(--s8-social-top); transform: translateY(-50%); display: flex; justify-content: center; align-items: center; gap: var(--s8-social-gap); z-index: 3; } #s8 .social-buttons a { color: #fff; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; width: var(--s8-social-icon-size); height: var(--s8-social-icon-size); transition: opacity 0.3s ease, transform 0.3s ease; } #s8 .social-buttons a:hover { opacity: 0.6; transform: translateY(-3px); } #s8 .social-buttons svg { width: 100%; height: 100%; display: block; } /* Copyright — en altta */ #s8 .s8-copyright { position: absolute; left: 0; bottom: var(--s8-copy-bottom); width: 100%; text-align: center; font-family: "PP Eiko", sans-serif; font-weight: 100; font-size: var(--s8-copy-size); letter-spacing: var(--s8-copy-letter); color: var(--s8-copy-color); text-transform: lowercase; z-index: 3; pointer-events: none; /* .layer üzerinden gelen inset:0 / height:100%'ü ezelim — bottom konumu çalışsın */ top: auto; height: auto; } /* ============================ BLOG — /blog/ ve /blog// sayfaları Tek sayfa scroll deneyimiyle çakışmaz; ayrı route, sade okuma. ============================ */ .blog-body { background: #000; color: #fff; min-height: 100vh; min-height: 100svh; overflow-x: hidden; /* tek sayfa cinematic akışın aksine — burada düz scroll */ scroll-behavior: auto; } /* Üst gezinti — minik, sade, sabit değil */ .blog-nav { display: flex; justify-content: space-between; align-items: center; padding: 28px clamp(20px, 5vw, 48px); font-family: "PP Eiko", sans-serif; font-weight: 100; font-size: clamp(12px, 1.1vw, 14px); letter-spacing: 0.2em; text-transform: lowercase; } .blog-nav a { color: #fff; text-decoration: none; opacity: 0.85; transition: opacity 0.25s ease; } .blog-nav a:hover { opacity: 1; } /* İçerik kabı — okumaya odaklı genişlik */ .blog-shell { max-width: 680px; margin: 0 auto; padding: clamp(40px, 8vw, 80px) clamp(20px, 5vw, 32px) 120px; } /* /blog/ — liste sayfası */ .blog-index__header { margin-bottom: clamp(48px, 8vw, 80px); } .blog-index__title { font-family: "PP Eiko", sans-serif; font-weight: 100; font-size: clamp(56px, 10vw, 96px); letter-spacing: -0.01em; line-height: 1; text-transform: lowercase; color: #fff; } .blog-index__subtitle { margin-top: 16px; font-family: "PP Eiko", sans-serif; font-weight: 100; font-size: clamp(14px, 1.3vw, 16px); letter-spacing: 0.05em; color: rgba(255, 255, 255, 0.55); } .blog-list { list-style: none; padding: 0; margin: 0; } .blog-list__item { border-top: 1px solid rgba(255, 255, 255, 0.12); } .blog-list__item:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .blog-list__link { display: block; padding: clamp(28px, 4vw, 40px) 0; color: #fff; text-decoration: none; transition: opacity 0.3s ease; } .blog-list__link:hover { opacity: 0.7; } .blog-list__date { display: block; font-family: "PP Eiko", sans-serif; font-weight: 100; font-size: 13px; letter-spacing: 0.15em; text-transform: lowercase; color: rgba(255, 255, 255, 0.5); margin-bottom: 10px; } .blog-list__title { font-family: "PP Eiko", sans-serif; font-weight: 100; font-size: clamp(24px, 3vw, 34px); letter-spacing: -0.005em; line-height: 1.15; color: #fff; } .blog-list__summary { margin-top: 12px; font-family: "PP Eiko", sans-serif; font-weight: 100; font-size: clamp(15px, 1.4vw, 17px); line-height: 1.55; color: rgba(255, 255, 255, 0.65); } .blog-list__empty { font-family: "PP Eiko", sans-serif; font-weight: 100; font-size: 16px; letter-spacing: 0.05em; color: rgba(255, 255, 255, 0.5); text-align: center; padding: 80px 0; } /* /blog// — tek yazı sayfası */ .blog-post__header { margin-bottom: clamp(40px, 6vw, 64px); } .blog-post__meta { font-family: "PP Eiko", sans-serif; font-weight: 100; font-size: 13px; letter-spacing: 0.15em; text-transform: lowercase; color: rgba(255, 255, 255, 0.5); margin-bottom: 24px; } .blog-post__sep { margin: 0 10px; } .blog-post__title { font-family: "PP Eiko", sans-serif; font-weight: 100; font-size: clamp(34px, 5.5vw, 56px); letter-spacing: -0.01em; line-height: 1.1; color: #fff; } /* Yazı gövdesi — okumaya optimize, geniş line-height */ .blog-post__content { font-family: "PP Eiko", sans-serif; font-weight: 100; font-size: clamp(17px, 1.6vw, 19px); line-height: 1.75; color: rgba(255, 255, 255, 0.88); } .blog-post__content > * + * { margin-top: 1.4em; } .blog-post__content h2 { font-family: "PP Eiko", sans-serif; font-weight: 100; font-size: clamp(24px, 2.6vw, 30px); letter-spacing: -0.005em; line-height: 1.2; color: #fff; margin-top: 2.2em; } .blog-post__content h3 { font-family: "PP Eiko", sans-serif; font-weight: 100; font-size: clamp(20px, 2.1vw, 24px); letter-spacing: 0; line-height: 1.25; color: #fff; margin-top: 2em; } .blog-post__content a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.4); text-underline-offset: 4px; transition: text-decoration-color 0.25s ease; } .blog-post__content a:hover { text-decoration-color: #fff; } .blog-post__content strong { font-weight: 400; color: #fff; } .blog-post__content em { font-style: italic; color: rgba(255, 255, 255, 0.95); } .blog-post__content blockquote { border-left: 1px solid rgba(255, 255, 255, 0.4); padding-left: 24px; margin-left: 0; color: rgba(255, 255, 255, 0.7); font-style: italic; } .blog-post__content ul, .blog-post__content ol { padding-left: 24px; } .blog-post__content li + li { margin-top: 0.5em; } .blog-post__content code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.88em; background: rgba(255, 255, 255, 0.08); padding: 2px 6px; border-radius: 3px; } .blog-post__content pre { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); padding: 20px 24px; border-radius: 4px; overflow-x: auto; font-size: 14px; line-height: 1.6; } .blog-post__content pre code { background: transparent; padding: 0; font-size: inherit; } .blog-post__content hr { border: none; border-top: 1px solid rgba(255, 255, 255, 0.15); margin: 3em 0; } .blog-post__content img { max-width: 100%; height: auto; display: block; margin: 1.5em auto; } .blog-post__back { margin-top: clamp(60px, 10vw, 100px); padding-top: 32px; border-top: 1px solid rgba(255, 255, 255, 0.12); } .blog-post__back a { font-family: "PP Eiko", sans-serif; font-weight: 100; font-size: 14px; letter-spacing: 0.15em; text-transform: lowercase; color: rgba(255, 255, 255, 0.7); text-decoration: none; transition: color 0.25s ease; } .blog-post__back a:hover { color: #fff; } .blog-footer { text-align: center; padding: 40px 24px; font-family: "PP Eiko", sans-serif; font-weight: 100; font-size: 11px; letter-spacing: 0.2em; text-transform: lowercase; color: rgba(255, 255, 255, 0.4); }