/* Yazı tipleri — hepsi yerel dosya, CDN yok. Bricolage Grotesque başlıklar, Inter metin, JetBrains Mono etiketler. */ @font-face { font-family: "Bricolage"; font-weight: 200 800; font-stretch: 75% 100%; font-display: fallback; src: url("../fonts/bricolage-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Bricolage"; font-weight: 200 800; font-stretch: 75% 100%; font-display: fallback; src: url("../fonts/bricolage-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Inter"; font-weight: 100 900; font-display: fallback; src: url("../fonts/inter-var-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Inter"; font-weight: 100 900; font-display: fallback; src: url("../fonts/inter-var-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Mono"; font-weight: 100 800; font-display: fallback; src: url("../fonts/jetbrains-mono-var-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Mono"; font-weight: 100 800; font-display: fallback; src: url("../fonts/jetbrains-mono-var-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ====================================================================== Final yön: Kinetik'in iskeleti ve açılışı + Renk Odaları'nın renk ailesi (ölçülü) + Kolaj'ın el çizgisi ve dağınık etiketleri. ====================================================================== */ :root { --bg: #fbfaf7; --ink: #121110; --ink-2: #6b6862; --line: #e3e0d9; --hot: #ff4d1c; /* ana renk: Kinetik'in kırmızımsı turuncusu */ /* Proje panelleri: Tek aile, ana renkten gün batımı rampası: sarı, kehribar, ana turuncu, şarap, sonra siyah. Ayrı ayrı seçilen tonlar "birbiriyle alakasız" bulundu (Meyrem, 31 Eki 2026). Sarı, kobalt ve nane ayrıca "Ne yapıyorum" bölümünde kalır: "ufak da olsa canlılık katar". */ --kehribar: #7f9d86; /* Ad eski, renk adaçayı: Meyrem seçti, referans kapılardan (2 Kasım 2026). Yazı mürekkep, kontrast 6,35. */ --sarap: #7a1c1a; --sand: #e9dfcf; --clay: #eebfa6; --deep: #2b2622; --sun: #ffc845; --cobalt: #3d5afe; --mint: #3cc49a; --ease: cubic-bezier(.16, 1, .3, 1); --spring: cubic-bezier(.34, 1.56, .64, 1); --pad: clamp(18px, 2.4vw, 36px); } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--ink); font: 400 17px/1.55 "Inter", sans-serif; overflow-x: clip; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } .mono { font: 500 13px/1.45 "Mono", monospace; } /* Klavyeyle gezenin yerini görmesi için. Yalnız Tab'la gelince görünür, fareyle tıklayınca çıkmaz. Renkli zeminlerde turuncu kaybolduğu için orada yazı rengi. */ :focus-visible { outline: 2px solid var(--hot); outline-offset: 3px; } .panel :focus-visible, .back:focus-visible { outline-color: var(--pfg); } .top.over :focus-visible { outline-color: var(--hdr); } /* ---------- Üst bar ------------------------------------------------- */ .top { position: fixed; inset: 0 0 auto; z-index: 40; display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; align-items: start; padding: 22px var(--pad); color: var(--ink-2); font: 500 14px/1.4 "Inter", sans-serif; transition: background .4s, padding .4s, color .4s; } .top.scrolled { background: rgba(251, 250, 247, .86); backdrop-filter: blur(10px); padding-block: 14px; } .top b, .top nav { color: var(--ink); transition: color .4s; } /* Çalışmalar bölümünde bar şeffaflaşır ve o anki sayfanın rengini alır. */ .top.over { background: transparent; backdrop-filter: none; color: var(--hdr); } .top.over b, .top.over nav { color: var(--hdr); } .top .a { grid-column: 1 / 6; } .top .a a:hover b { color: var(--hot); } .top .a a { display: block; } .top .b { grid-column: 6 / 10; } .top nav { grid-column: 10 / 13; justify-self: end; display: flex; gap: 22px; } .top nav a { position: relative; } .top nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; background: var(--hot); transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease); } .top nav a:hover::after { transform: scaleX(1); transform-origin: left; } .menu { display: none; } /* İç sayfalarda üst bar: sayfadan kopuk, gölgeli beyaz kapsül. Şeffaf hâli hangi renkli bandın üstüne gelse onunla kaynaşıyordu ("sayfayla bitişik"). Bulunulan sayfa dolu. */ .top--solid { inset: 12px var(--pad) auto; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 8px 8px 8px 10px; border-radius: 999px; background: #fff; color: var(--ink-2); box-shadow: 0 0 0 1px rgba(18, 17, 16, .09), 0 16px 34px -18px rgba(18, 17, 16, .4); } .top--solid .a br, .top--solid .b { display: none; } .top--solid .a a { display: flex; align-items: center; gap: 10px; } .top--solid .a span { margin-left: 2px; } /* Karikatür yerine gerçek yüz (Meyrem, 3 Kasım 2026; Şanlıurfa fotoğrafından yakın kesit). Sekme simgesi küçük olduğu için karikatür kaldı. */ .top__mark { flex: none; width: 34px; height: 34px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px color-mix(in srgb, var(--ink) 14%, transparent); transition: transform .5s var(--spring); } .top--solid .a a:hover .top__mark { transform: rotate(-8deg) scale(1.08); } .top--solid .a a:hover b { color: var(--hot); } .top--solid nav { display: flex; gap: 4px; } .top--solid nav a { padding: 11px 16px; border-radius: 999px; transition: background .3s, color .3s; } .top--solid nav a::after { display: none; } .top--solid nav a:hover { background: #f1ece2; } .top--solid nav a[aria-current="page"] { background: var(--ink); color: var(--bg); } /* Çalışmalar, Hakkımda, İşbirliği sayfa başlıkları: ismin geldiği gibi alttan yükselir. */ .phead { padding: 116px var(--pad) clamp(30px, 4vw, 54px); } /* -0,05em'de harfler birbirine değip kesişim çizgisi bırakıyordu; bu boyutta -0,03em yeter. */ .ptitle { font: 800 clamp(64px, 15.2vw, 290px)/.86 "Bricolage", sans-serif; font-stretch: 86%; letter-spacing: -0.03em; } .ptitle span { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; } .ptitle i { font-style: normal; display: block; transform: translateY(105%); animation: up 1.1s var(--ease) .1s forwards; } .ptitle span + span i { animation-delay: .2s; } .phead__say { margin-top: clamp(16px, 2vw, 26px); font: 500 clamp(22px, 2.2vw, 34px)/1.2 "Bricolage", sans-serif; letter-spacing: -0.015em; } /* ---------- 1. Sahne: isim → fotoğraf → etiketler ------------------- Bölüm 185vh boyunda, içi ekrana yapışık. JS kaydırma ilerlemesini --p1 (0→1, ilk yarı) ve --p2 (0→1, ikinci yarı) olarak yazar; her şey bu iki sayıdan hesaplanır. Geri kaydırınca her şey geri gelir. 270vh'ten indi (Meyrem: "4 kaydırışta geliyordu, 2'ye düşürelim"). Kapı odası gelirken --cik 0→1: her şey toz ve küçük tüyler gibi aşağı dökülür (melek.js çizer, CSS söndürür). */ .stage { position: relative; height: 185vh; --p1: 0; --p2: 0; --cik: 0; } /* Zemin sabitlenen kutuda da: kapı odasına girerken site.js bu kutuya brightness verir, zemin içerikle birlikte sönsün. */ .stage__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--bg); } .name { position: absolute; left: var(--pad); right: var(--pad); top: 15vh; font-family: "Bricolage", sans-serif; font-weight: 800; text-transform: uppercase; line-height: .8; letter-spacing: -0.045em; transform-origin: 50% 0; transform: translateY(calc(var(--p1) * -9vh)) scale(calc(1 - var(--p1) * .08)); /* Tam söner: fotoğrafın ve etiketlerin arkasında soluk harf kalması karışık duruyordu. */ opacity: calc(1 - var(--p1) * 1.15); } .name span { display: flex; overflow: hidden; padding: .06em 0 .16em; margin-bottom: -.2em; white-space: nowrap; } .name .last { justify-content: flex-end; color: var(--hot); } .name i { font-style: normal; display: inline-block; font-stretch: 75%; transform: translateY(105%); animation: up 1.1s var(--ease) forwards, widen 1.6s var(--ease) forwards; animation-delay: calc(var(--i) * 45ms + .1s), calc(var(--i) * 45ms + .7s); } @keyframes up { to { transform: none; } } @keyframes widen { from { font-stretch: 75%; } to { font-stretch: 100%; } } .intro { position: absolute; left: var(--pad); right: var(--pad); bottom: 7vh; display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; align-items: end; opacity: calc(1 - var(--p1) * 3); transform: translateY(calc(var(--p1) * 40px)); } .intro p { grid-column: 1 / 8; font: 500 clamp(22px, 2.2vw, 34px)/1.2 "Bricolage", sans-serif; letter-spacing: -0.015em; } /* Kolaj'dan: başlık yerleşince altı elle çizilir. */ .scribble { position: relative; white-space: nowrap; } .scribble svg { position: absolute; left: -3%; bottom: -.22em; width: 106%; height: .36em; overflow: visible; } .scribble path { fill: none; stroke: var(--hot); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 320; stroke-dashoffset: 320; } .scribble.on path { animation: ink 1.1s ease forwards; } @keyframes ink { to { stroke-dashoffset: 0; } } .intro .hint { grid-column: 10 / 13; justify-self: end; display: flex; align-items: center; gap: 12px; color: var(--ink-2); font-family: "Inter", sans-serif; } .intro .hint i { width: 1px; height: 46px; background: var(--ink); position: relative; overflow: hidden; } .intro .hint i::after { content: ""; position: absolute; left: 0; top: -50%; width: 1px; height: 50%; background: var(--hot); animation: drip 1.8s var(--ease) infinite; } @keyframes drip { to { top: 100%; } } /* Fotoğraf: alttan yükselir, düzelir, büyür. Yuvarlak, ince beyaz çerçeveli; çevresinde dalgalı çizgi döner. Kareydi: köşeleri (merkezden 0,74 genişlik) dalgalı halkanın (0,65) üstüne biniyordu, çizgi köşelerde kayboluyordu. Yuvarlakta halkayla eş merkezli, boşluk her yönde eşit. Dönen yazı halkası kaldırıldı: baş aşağı harfler alttaki cümleye biniyor, göze batıyordu (Büşra). Boyut ekran yüksekliğine de bağlı: kısa ekranda halka cümleye değmesin. Fotoğrafı değiştirmek için yalnızca değişir. */ .photo { position: absolute; left: 50%; top: 43%; z-index: 3; width: min(29vw, 44vh, 380px); aspect-ratio: 1; transform: translate(-50%, calc(-50% + (1 - var(--p1)) * 85vh + var(--cik) * 12vh)) rotate(calc((1 - var(--p1)) * 9deg)) scale(calc(.86 + var(--p1) * .14)); /* Çıkışta söner ve bulanıklaşır; yerinden dökülen tozu melek.js çizer. */ opacity: calc(1 - var(--cik) * 2.2); filter: blur(calc(var(--cik) * 7px)); } .photo__frame { position: absolute; inset: 0; padding: 9px; background: #fff; border-radius: 50%; box-shadow: 0 50px 80px -40px rgba(30, 20, 10, .45), 0 0 0 1px rgba(0, 0, 0, .05); } .photo__frame img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 20%; } /* Kanatlar portrenin arkasında, harflerin altında: yazıyı örtmesin. Çizimi melek.js. */ .melek-tuval { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } /* Karanlıkta kanatlar hafif parlar (Meyrem: önce "çok az", sonra "biraz daha"); aydınlıkta mürekkep, parlamaz. */ .karanlik .melek-tuval { filter: drop-shadow(0 0 6px rgba(255, 250, 240, .4)); } .panel--more li a.dahasi__kapi { color: var(--hot); } @keyframes spin { to { rotate: 360deg; } } /* Etiketler: ikinci yarıda sırayla çevresine dağılır; her biri kanattan kopan bir tüyle gelir (melek.js). Teknoloji etiketleri kalktı (3 Kasım 2026), dört kart kaldı. */ .chip { position: absolute; z-index: 4; left: var(--x); top: var(--y); padding: 12px 16px; border-radius: 14px; background: #fff; color: var(--ink); font: 600 15px/1.2 "Bricolage", sans-serif; letter-spacing: -0.01em; box-shadow: 0 18px 30px -18px rgba(30, 20, 10, .35), 0 0 0 1px rgba(0, 0, 0, .04); display: flex; align-items: center; gap: 10px; opacity: 0; transform: translateY(16px) scale(.85) rotate(0); transition: opacity .35s, transform .6s var(--spring); } .chip small { display: block; font: 500 12px/1.3 "Inter", sans-serif; color: var(--ink-2); } .chip::before { content: ""; flex: none; width: 12px; height: 12px; border-radius: 4px; background: var(--hot); } .chip.on { opacity: calc(1 - var(--cik) * 2.6); transform: rotate(var(--r)) translateY(calc(var(--cik) * 10vh)); } /* Kanattan sarkan yazılar: küçük, sönük, tüyün yönünde yan yatık; karanlıkta hafif parlar. Konumu melek.js yazar (sol orta noktası tüyün ucunda). Kanatlar açılırken sırayla belirir, kapılara geçerken söner. */ .sarkan { position: absolute; inset: 0; z-index: 2; list-style: none; pointer-events: none; } .sarkan li { position: absolute; left: 0; top: 0; white-space: nowrap; transform-origin: 0 0; font: 500 11.500px/1 "Mono", monospace; letter-spacing: .04em; color: var(--ink-2); opacity: 0; transition: opacity .7s; } .sarkan li.on { opacity: calc(.75 * (1 - var(--cik) * 2.6)); } /* Karta ya da ekran kenarına değen yazı o an görünmez (kısa ekranda kanadın iç tüyleri karta iniyor). */ .sarkan li.on.carp { opacity: 0; } .karanlik .sarkan li { color: #ece9e3; text-shadow: 0 0 6px rgba(255, 250, 240, .5), 0 0 14px rgba(255, 250, 240, .22); } .karanlik .sarkan li.on { opacity: calc(.62 * (1 - var(--cik) * 2.6)); } /* Ayraçlı kart: portrenin altında. Üstte spiral halkalar; dokununca sayfa üst kenarından takvim gibi geriye çevrilir, sondan sonra deste başa döner. Kanatlar açılırken belirir, çıkışta söner. */ .ayrac { position: absolute; z-index: 5; left: 50%; top: calc(43% + min(14.5vw, 22vh, 190px) + 3vh); transform: translate(-50%, calc(var(--cik) * 10vh)); display: flex; flex-direction: column; align-items: center; gap: 12px; width: max-content; max-width: 92vw; text-align: center; opacity: calc((var(--p2) * 2.4 - .4) * (1 - var(--cik) * 2.6)); } .ayrac__giris { margin-bottom: 10px; font: 600 clamp(17px, 1.700vw, 23px)/1 "Bricolage", sans-serif; letter-spacing: -0.01em; color: var(--ink-2); } .ayrac__giris b { color: var(--ink); } .ayrac-kart { position: relative; display: block; width: min(420px, 84vw); height: clamp(58px, 8.500vh, 80px); padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; perspective: 900px; } .ayrac__halka { position: absolute; z-index: 3; left: 18px; right: 18px; top: -9px; height: 18px; display: flex; justify-content: space-between; pointer-events: none; } .ayrac__halka i { width: 9px; height: 18px; border: 2px solid #b9b5ad; border-radius: 6px; background: linear-gradient(90deg, #8d8981, #e7e3db 50%, #8d8981); box-shadow: 0 2px 3px rgba(0, 0, 0, .3); } .ayrac__sayfa { position: absolute; inset: 0; display: grid; place-items: center; padding: 10px 18px 0; border-radius: 12px; background: #fbfaf7; color: #121110; font: 700 clamp(22px, 2.400vw, 34px)/1 "Bricolage", sans-serif; letter-spacing: -0.025em; font-stretch: 90%; box-shadow: 0 1px 0 #e3e0d9, 0 0 0 1px rgba(0, 0, 0, .05), 0 18px 30px -16px rgba(30, 20, 10, .45); transform-origin: 50% 0; backface-visibility: hidden; transition: transform .75s var(--ease), opacity .4s, translate .3s var(--ease); } /* Alttakiler hafif kayık: kartın bir deste olduğu belli olur. */ .ayrac__sayfa:nth-child(3) { translate: 0 3px; } .ayrac__sayfa:nth-child(4) { translate: 0 6px; } .ayrac__sayfa.gecti { transform: rotateX(-118deg); opacity: 0; } .ayrac__sayfa.on { z-index: 2; translate: 0 0; } .ayrac-kart:hover .ayrac__sayfa.on { translate: 0 -2px; box-shadow: 0 1px 0 #e3e0d9, 0 0 0 1px rgba(0, 0, 0, .05), 0 24px 36px -14px rgba(30, 20, 10, .55); } .ayrac-kart:focus-visible { outline: 2px solid var(--hot); outline-offset: 8px; border-radius: 12px; } /* Yeni gelen kartın döndüğünü bilmez (Meyrem): kanatlar tam açılınca üst sayfa çevriliyormuş gibi kalkar, geri düşer; yanında "kartı çevir" belirir ve ilk tıklamaya kadar kalır (site.js .tanit, .ipucu). */ .ayrac-kart.tanit .ayrac__sayfa.on { animation: kart-tanit 1.5s var(--ease); } @keyframes kart-tanit { 0% { transform: none; } 32% { transform: rotateX(-42deg); } 48% { transform: rotateX(-46deg); } 70% { transform: rotateX(7deg); } 84% { transform: rotateX(-3deg); } 100% { transform: none; } } .ayrac__ipucu { position: absolute; left: calc(100% + 20px); top: 50%; z-index: 4; display: flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 13px; color: var(--ink-2); opacity: 0; transform: translate(-6px, -50%); transition: opacity .6s, transform .6s var(--ease); pointer-events: none; } .ayrac__ipucu i { font-style: normal; font-size: 17px; color: var(--hot); } .ayrac.ipucu .ayrac__ipucu { opacity: 1; transform: translate(0, -50%); } .ayrac.ipucu .ayrac__ipucu i { animation: ipucu-don 2.4s var(--ease) infinite; } @keyframes ipucu-don { 0%, 55% { rotate: 0deg; } 80%, 100% { rotate: 360deg; } } .ayrac__alt { min-height: 1.4em; font-size: 13px; color: var(--ink-2); } .ayrac__alt b { color: var(--hot); font-weight: 500; } /* Ortak: bant, üst etiket, bölüm başlığı. */ .band { padding: clamp(90px, 12vw, 170px) var(--pad); } .eyebrow { color: var(--ink-2); display: flex; gap: 10px; align-items: center; font: 500 13px/1.45 "Inter", sans-serif; } .eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--hot); } h2 { margin-top: 18px; font: 800 clamp(40px, 5vw, 78px)/.96 "Bricolage", sans-serif; font-stretch: 86%; letter-spacing: -0.035em; } /* Telefon: gerçek iki ekran; dokunma alanları görselin üstündeki düğmelerle aynı yerde. */ .telefon { position: relative; height: 88%; aspect-ratio: 800 / 1734; overflow: hidden; border: 7px solid #0e111b; border-radius: 30px; background: #fff; box-shadow: 0 30px 50px -20px rgba(0, 0, 40, .55); box-sizing: content-box; } .telefon__ekran { position: absolute; inset: 0; background: #fff; transition: transform .55s var(--ease); } .telefon__ekran img { display: block; width: 100%; height: 100%; object-fit: cover; } .telefon__ekran--iki { transform: translateX(100%); } .telefon.ileri .telefon__ekran--iki { transform: none; } .telefon.ileri .telefon__ekran:first-child { transform: translateX(-24%); } .telefon__dokun { position: absolute; padding: 0; background: none; border: 0; border-radius: 8px; cursor: pointer; } .telefon__dokun--al { left: 4%; top: 42%; width: 92%; height: 6%; } .telefon__dokun--al::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgba(183, 28, 28, .6); } /* Yalnız görünürken atar: kapalı katmanda boşuna boyama yapmasın. */ @keyframes dokun { to { box-shadow: 0 0 0 14px rgba(183, 28, 28, 0); } } .telefon__dokun--geri { left: 2%; top: 7%; width: 16%; height: 8%; } /* Denenen parçalar: resim değil, kâğıt zeminli çalışan pencereler. Renkli kutunun ortasında yüzen gölgeli kart şablon gibi duruyordu; geniş ekranda pencere sağ alt köşeye yaslanıp kenardan taşar (aşağıdaki media bloğu). */ .dene { position: relative; z-index: 1; width: min(86%, 640px); padding: clamp(14px, 2.4vh, 24px); border-radius: 10px; background: var(--bg); color: var(--ink); text-align: left; } .dene button, .dene input { font: inherit; color: inherit; } .dene__not { color: var(--ink-2); font-size: 12px; } .dene__not, .rls__ust .mono, .rls__alt output, .fatura label .mono, .fatura legend { font-family: "Inter", sans-serif; } .dene__dipnot { margin-top: 10px; color: var(--ink-2); font-size: 13px; line-height: 1.35; } .dene__arka { position: absolute; top: 9%; left: 6%; width: 78%; border-radius: 8px; } /* Satır düzeyinde yalıtım */ .rls__ust { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 10px; padding-bottom: clamp(8px, 1.6vh, 14px); border-bottom: 1px solid var(--line); } .rls__ust .mono { color: var(--ink-2); font-size: 12px; } .rls__firmalar { display: flex; gap: 6px; } .rls__firmalar button { padding: 6px 13px; font-size: 14px; font-weight: 500; background: none; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; transition: background .25s, color .25s, border-color .25s; } .rls__firmalar button:hover { border-color: var(--ink); } .rls__firmalar button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); } /* Engellenen satır gerçekten kaybolur, altındakiler yukarı akar. Çizgili şerit "henüz yüklenmedi" gibi duruyordu. */ .rls__satirlar { --satir: clamp(28px, 4.9vh, 46px); min-height: calc(3 * var(--satir)); list-style: none; font-size: 14px; } /* Tutar sütunu sabit: "auto" olunca her satır kendi genişliğini hesaplıyor, firma adları aynı hizaya gelmiyordu. */ .rls__satirlar li > :last-child { text-align: right; } .rls__satirlar li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 88px; align-items: center; height: var(--satir); padding: 0 8px; overflow: hidden; border-bottom: 1px solid var(--line); transition: height .5s var(--ease) calc(var(--s) * 18ms), opacity .25s, background .3s, border-color .3s; } .rls__satirlar li.gizli { height: 0; opacity: 0; border-bottom-width: 0; } .rls__satirlar li.sizdi { background: #ffe2d8; color: #8f230a; } .rls__satirlar .mono { font-size: 13px; } .rls__alt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin-top: clamp(8px, 1.6vh, 14px); } .rls__alt output { font-size: 12px; color: var(--ink-2); } .rls.acikta .rls__alt output { color: #b3300e; font-weight: 600; } .rls__anahtar { display: inline-flex; align-items: center; gap: 8px; padding: 0; font-size: 14px; font-weight: 500; background: none; border: 0; cursor: pointer; } .rls__anahtar i { position: relative; width: 34px; height: 20px; border-radius: 999px; background: var(--ink-2); transition: background .25s; } .rls__anahtar i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--bg); transition: transform .35s var(--spring); } .rls__anahtar[aria-checked="true"] i { background: var(--ink); } .rls__anahtar[aria-checked="true"] i::after { transform: translateX(14px); } /* Fatura */ .fatura { width: min(84%, 560px); } .fatura__alanlar { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 10px; margin-top: 10px; } .fatura__alanlar label { min-width: 0; } .fatura .mono { display: block; color: var(--ink-2); font-size: 12px; } .fatura__alanlar input { width: 100%; margin-top: 4px; padding: 7px 10px; font-size: 15px; background: #fff; border: 1px solid var(--line); border-radius: 8px; } .fatura__alanlar input:hover { border-color: var(--ink-2); } .fatura__alanlar input[aria-invalid="true"] { border-color: var(--hot); background: #fff1ec; } .fatura__kdv { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding: 0; border: 0; } .fatura__kdv legend { float: left; margin-right: 8px; padding: 0; } .fatura__kdv label { cursor: pointer; } .fatura__kdv input { position: absolute; opacity: 0; } .fatura__kdv span { display: block; padding: 5px 12px; font-size: 14px; font-weight: 500; border: 1px solid var(--line); border-radius: 999px; transition: background .25s, color .25s, border-color .25s; } .fatura__kdv label:hover span { border-color: var(--ink); } .fatura__kdv input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--bg); } .fatura__kdv input:focus-visible + span { outline: 2px solid var(--hot); outline-offset: 2px; } .fatura__sonuc { margin-top: 10px; border-top: 1px solid var(--line); } .fatura__sonuc > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 6px; font-size: 14px; } .fatura__sonuc dd.mono { color: var(--ink); font-size: 14px; } .fatura__genel { font-weight: 600; } .fatura__genel dd { font: 800 clamp(26px, min(2.8vw, 5.4vh), 42px)/1.05 "Bricolage", sans-serif; font-stretch: 86%; letter-spacing: -0.03em; } /* Model sonucu: her görüntü bir nokta. Seçili derecede doğru bilinen dolu, kaçan boş halka. */ .vdx__dereceler { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; } .vdx__dereceler button, .soru__sekmeler button, .soru__secenekler button { padding: 5px 11px; font-size: 13px; font-weight: 500; background: none; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; transition: background .25s, color .25s, border-color .25s; } .vdx__dereceler button:hover, .soru__sekmeler button:hover, .soru__secenekler button:hover { border-color: var(--ink); } .vdx__dereceler button[aria-pressed="true"], .soru__sekmeler button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); } .vdx__noktalar { display: grid; grid-template-columns: repeat(38, 1fr); gap: 2px; margin-top: 12px; } .vdx__noktalar i { aspect-ratio: 1; border-radius: 50%; background: var(--line); transition: background .3s, box-shadow .3s; } .vdx__noktalar i.sec { background: #1f9a75; } .vdx__noktalar i.sec.kacti { background: none; box-shadow: inset 0 0 0 1.5px var(--hot); } .vdx__sonuc { display: flex; align-items: center; gap: 14px; margin-top: 12px; } .vdx__sonuc strong { flex: none; font: 800 clamp(30px, min(3.2vw, 6vh), 48px)/1 "Bricolage", sans-serif; font-stretch: 86%; letter-spacing: -0.03em; } .vdx__sonuc output { font-size: 14px; line-height: 1.35; } /* Ders sorusu */ .soru__sekmeler, .soru__secenekler { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .soru__govde > p { margin-top: 12px; font-size: 15px; font-weight: 500; line-height: 1.35; } .soru pre { margin-top: 8px; padding: clamp(8px, 1.6vh, 14px); overflow-x: auto; font-size: 13px; line-height: 1.45; color: var(--bg); background: #2a2724; border-radius: 8px; } .soru__secenekler button { min-width: 52px; font-size: 14px; } .soru__secenekler button.dogru { color: var(--bg); background: #1f7a5e; border-color: #1f7a5e; } .soru__secenekler button.yanlis { color: #8f230a; background: #ffe2d8; border-color: #ffe2d8; } .soru__sonuc { display: block; min-height: 2.7em; margin-top: 10px; font-size: 14px; line-height: 1.35; color: var(--ink-2); } /* Randevu müsaitliği: üstte uzmanın günü (09–18) şerit olarak, altında motorun verdiği başlangıç saatleri. */ .randevu__hizmet { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .randevu__hizmet button, .randevu__slotlar button { padding: 5px 11px; font-size: 13px; font-weight: 500; background: none; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; transition: background .25s, color .25s, border-color .25s; } .randevu__hizmet button:hover, .randevu__slotlar button:hover { border-color: var(--ink); } .randevu__hizmet button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); } .randevu__gun { margin-top: 14px; } .randevu__serit { position: relative; height: 26px; border-radius: 6px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); } .randevu__serit i { position: absolute; top: 0; bottom: 0; } .randevu__serit .kapali { background: repeating-linear-gradient(135deg, var(--line) 0 2px, transparent 2px 7px); } .randevu__serit .dolu { background: var(--ink-2); } .randevu__serit .alindi { background: var(--hot); } .randevu__serit .aday { background: none; box-shadow: inset 0 0 0 2px var(--hot); border-radius: 4px; } .randevu__saat { display: flex; justify-content: space-between; margin-top: 4px; color: var(--ink-2); font-size: 11px; } .randevu__say { margin-top: 12px; font-size: 13px; color: var(--ink-2); } .randevu__slotlar { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; min-height: 30px; } .randevu__slotlar button { padding: 4px 8px; font-size: 12px; } .randevu__slotlar button:hover { background: var(--ink); color: var(--bg); } /* ---------- 2. Ne yapıyorum: kapılar -------------------------------- Meyrem'in Instagram referansından (deneme: ../sitem/tasarim-yonleri/11-modern-kapi.html): koyu odada beş kemerli, oluklu kapı; pirinç tabela ve kol. Görsel yok: oluk, pirinç ve ışık CSS geçişleri. Kapı seçilince sola geçer, aralık kalır, sağda o alanın denenebilir örneği açılır (oda.js). Zemin karanlık kipten bağımsız hep koyu (Meyrem: "arka plan rengi çok iyi"); içerideki uygulama pencereleri kâğıt kalsın diye oda kendi renk değişkenlerini kullanır, --bg/--ink'e dokunmaz. "Beş kapı" sayfasının .kapi sınıfı ana sayfada da yüklü (sahne.css); bu kapılar .mkapi. */ .oda { --oz: #141210; --oy: #f3efe7; --oy2: #a39d93; --oc: #2e2a26; --pirinc: linear-gradient(165deg, #f8e7aa 0%, #dcb45c 30%, #a97c2c 58%, #e9c872 80%, #8a6220 100%); position: relative; min-height: 100vh; min-height: 100svh; overflow-x: clip; display: flex; flex-direction: column; justify-content: center; padding: 96px 0 40px; color: var(--oy); background: radial-gradient(80% 55% at 50% 0%, #241f1a, rgba(36, 31, 26, 0) 70%), var(--oz); } .oda__bas { padding: 0 var(--pad); margin-bottom: clamp(24px, 5vh, 56px); text-align: center; } .oda__bas .eyebrow { justify-content: center; color: var(--oy2); } .oda__bas h2 { margin-top: 14px; font-size: clamp(38px, min(5.4vw, 9vh), 84px); } .oda__bas h2 em { font-style: normal; color: #e2c06d; } /* Kapı boyu hem genişliğe hem yüksekliğe bağlı: 1280×640 gibi kısa ekranda başlıkla birlikte sığsın. */ .oda__ic { --w: clamp(120px, min(13vw, 24vh), 200px); position: relative; } .mkapilar { position: relative; display: flex; justify-content: center; align-items: flex-end; gap: clamp(18px, 3vw, 48px); padding: 24px var(--pad) calc(var(--w) * .28); } /* Zemin: kapıların bastığı çizgi ve önlerine düşen loş ışık. */ .mkapilar::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--w) * .28); background: linear-gradient(#1f1b17, rgba(20, 18, 16, 0)); border-top: 1px solid #2c2824; pointer-events: none; } .mkapi { --h: calc(var(--w) * 2.1); position: relative; flex: none; width: var(--w); height: var(--h); padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: opacity .32s var(--ease), transform .32s var(--ease); transition-delay: calc(var(--i) * 45ms); } .mkapi.cik { opacity: 0; transform: translateY(22px) scale(.96); pointer-events: none; } /* Kasa: koyu taş kemer. Yarıçap 999px; tarayıcı onu genişliğin yarısına indirir, kemer tam yarım daire olur. */ .mkapi__kasa { position: absolute; inset: 0; border-radius: 999px 999px 3px 3px; padding: calc(var(--w) * .065) calc(var(--w) * .065) 0; background: linear-gradient(90deg, #22201d 0%, #46423d 20%, #36322e 50%, #46423d 80%, #22201d 100%); box-shadow: inset 0 3px 2px rgba(255, 255, 255, .10), inset 0 0 0 1px rgba(255, 255, 255, .04), 0 30px 40px -24px rgba(0, 0, 0, .95); } .mkapi:focus-visible { outline: none; } .mkapi:focus-visible .mkapi__kasa { outline: 2px solid #e2c06d; outline-offset: 6px; } /* Perspektif ortada: aralanan kanadın köşesi zemine doğru iner. Alt kenara sabitlemek denendi, kanat yukarı büyüyüp kemerden taştı; Meyrem: "yukarı doğru açıldığında çirkinleşmiş, aşağı doğru açılsın". */ .mkapi__ic { position: relative; display: block; width: 100%; height: 100%; border-radius: 999px 999px 0 0; perspective: calc(var(--w) * 6); background: #0a0806; box-shadow: inset 0 4px 10px rgba(0, 0, 0, .8); } /* Kapının ardındaki ışık: kanat kapalıyken görünmez, aralanınca sızar. */ .mkapi__isik { position: absolute; inset: 0; border-radius: inherit; opacity: 0; transition: opacity .6s var(--ease); background: radial-gradient(75% 55% at 64% 70%, #fff4d8 0%, #ffd27f 20%, #ff9a3c 46%, #8a3510 78%, #2a1206 100%); } /* Kanat: menteşe solda. Oluklar 7 px'lik tekrar eden geçiş: sol kenar ışık, sağ kenar gölge; üstteki katmanlar kanadı hafif silindir gibi gösterir. */ .mkapi__kanat { position: absolute; inset: 0; border-radius: inherit; transform-origin: 0 50%; transition: transform .9s var(--ease) .06s; background: linear-gradient(90deg, rgba(0, 0, 0, .40), rgba(0, 0, 0, 0) 22%, rgba(255, 255, 255, .05) 50%, rgba(0, 0, 0, 0) 76%, rgba(0, 0, 0, .44)), radial-gradient(110% 45% at 50% 0%, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 70%), linear-gradient(rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, .28)), repeating-linear-gradient(90deg, rgba(0, 0, 0, .30) 0, rgba(255, 255, 255, .11) 1px, rgba(255, 255, 255, 0) 3px, rgba(0, 0, 0, .10) 5.5px, rgba(0, 0, 0, .30) 7px), var(--k); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .3); } .mkapi__tabela { position: absolute; left: 50%; top: 34%; width: 64%; transform: translateX(-50%); padding: calc(var(--w) * .035) 0; border-radius: 2px; text-align: center; font: 700 max(8px, calc(var(--w) * .056))/1.3 "Mono", monospace; letter-spacing: .1em; color: #4b3511; text-shadow: 0 1px 0 rgba(255, 238, 190, .6); /* İki vida: pirincin üstünde koyu nokta, çevresinde açık halka. */ background: radial-gradient(circle at 7% 50%, #6d4f17 0 1.4px, #f4dc98 1.7px 2.4px, rgba(0, 0, 0, 0) 2.7px), radial-gradient(circle at 93% 50%, #6d4f17 0 1.4px, #f4dc98 1.7px 2.4px, rgba(0, 0, 0, 0) 2.7px), var(--pirinc); box-shadow: 0 3px 4px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(0, 0, 0, .35); } .mkapi__tabela span { display: block; } /* Kol: yuvarlak gül ve sola uzanan manivela; manivela gülün merkezinden döner, üzerine gelince basılmış gibi iner. */ .mkapi__kol { position: absolute; right: 11%; top: 58%; width: calc(var(--w) * .12); aspect-ratio: 1; border-radius: 50%; background: var(--pirinc); box-shadow: 0 3px 5px rgba(0, 0, 0, .5), inset 0 1px 1px rgba(255, 255, 255, .6); } .mkapi__kol i { position: absolute; right: 50%; top: 50%; width: calc(var(--w) * .34); height: calc(var(--w) * .05); margin-top: calc(var(--w) * -.025); border-radius: 99px; transform-origin: 100% 50%; background: linear-gradient(#fbecb8, #d8ae55 45%, #9a6e25); box-shadow: 0 4px 5px rgba(0, 0, 0, .45); transition: transform .35s var(--spring); } .mkapi__kol::after { content: ""; position: absolute; inset: 24%; border-radius: 50%; background: var(--pirinc); box-shadow: 0 1px 2px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .7); } .mkapi__anahtar { position: absolute; right: calc(11% + var(--w) * .03); top: calc(58% + var(--w) * .17); width: calc(var(--w) * .06); height: calc(var(--w) * .13); border-radius: 99px; background: radial-gradient(circle at 50% 36%, #1c140a 0 22%, rgba(0, 0, 0, 0) 26%), linear-gradient(#1c140a, #1c140a) 50% 64% / 16% 30% no-repeat, var(--pirinc); box-shadow: 0 2px 3px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .5); } /* Kapı önündeki gölge ve aralanınca yere düşen ışık. */ .mkapi__zemin { position: absolute; left: -20%; right: -45%; top: 100%; height: calc(var(--w) * .34); pointer-events: none; background: radial-gradient(50% 50% at 42% 0%, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 70%); } .mkapi__zemin::after { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .7s var(--ease); background: radial-gradient(42% 60% at 62% 0%, rgba(255, 190, 110, .42), rgba(255, 154, 60, 0) 72%); } .mkapi__ipucu { position: absolute; left: 66%; top: 41%; padding: 6px 12px; border-radius: 99px; white-space: nowrap; font: 600 12px/1 "Inter", sans-serif; color: #141210; background: var(--oy); box-shadow: 0 6px 16px rgba(0, 0, 0, .45); pointer-events: none; opacity: 0; transform: translate(-6px, 4px) scale(.94); transition: opacity .25s var(--ease), transform .35s var(--spring); } /* Üzerine gelince: kol iner, ardından kanat aralanır, ışık sızar. Dokunmatikte üzerine gelme yok, dokunmak seçer. */ @media (hover: hover) { .oda[data-hal="liste"] .mkapi:is(:hover, :focus-visible) .mkapi__kol i { transform: rotate(-16deg); } .oda[data-hal="liste"] .mkapi:is(:hover, :focus-visible) .mkapi__kanat { transform: rotateY(-26deg); transition-delay: .14s; } .oda[data-hal="liste"] .mkapi:is(:hover, :focus-visible) .mkapi__isik, .oda[data-hal="liste"] .mkapi:is(:hover, :focus-visible) .mkapi__zemin::after { opacity: 1; } .oda[data-hal="liste"] .mkapi:is(:hover, :focus-visible) .mkapi__ipucu { opacity: 1; transform: none; } /* Açık kapıya yeniden tıklamak "Kapılara dön" ile aynı (Meyrem); üzerine gelince kanat kapanmaya yeltenir. */ .mkapi.secili:is(:hover, :focus-visible) .mkapi__kanat { transform: rotateY(-9deg); transition-delay: 0s; } .mkapi.secili:is(:hover, :focus-visible) .mkapi__ipucu { opacity: 1; transform: none; } } /* Seçilince: kapı solda aralık kalır, sağda alanın başlığı ve gerçek iş listesi; listenin en sağında işin küçük çizimi. Denenebilir pencereler burada yok (Meyrem: "Demo görüntü koymana gerek yok", deneme dosyasındaki gibi olsun). */ .oda[data-hal="secim"] .oda__ic { --w: clamp(150px, min(17vw, 30vh), 240px); display: grid; grid-template-columns: auto minmax(0, 1100px); justify-content: center; align-items: end; gap: clamp(28px, 4vw, 72px); padding: 0 var(--pad); } .oda[data-hal="secim"] .mkapilar { padding-inline: 0; } /* Kapı sütunu dar; zemin yine ekranın bir ucundan öbürüne uzansın (.oda yatay taşmayı keser). */ .oda[data-hal="secim"] .mkapilar::before { left: -100vw; right: -100vw; } .oda[data-hal="secim"] .mkapi:not(.secili) { display: none; } .mkapi.secili .mkapi__kanat { transform: rotateY(-20deg); } .mkapi.secili .mkapi__isik, .mkapi.secili .mkapi__zemin::after { opacity: 1; } .oda[data-hal="liste"] .oda__katlar { display: none; } .oda[data-hal] .oda__kat:not(.on) { display: none; } .oda__katlar { position: relative; padding-bottom: calc(var(--w) * .28 + 4px); } .oda__kat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); align-items: center; gap: clamp(28px, 4vw, 64px); } .oda__kat + .oda__kat { margin-top: 48px; } .oda[data-hal] .oda__kat + .oda__kat { margin-top: 0; } .oda__sayi { color: var(--oy2); font-size: 13px; } .oda__kat h3 { margin-top: 10px; font: 800 clamp(34px, min(4vw, 7vh), 58px)/1 "Bricolage", sans-serif; font-stretch: 86%; letter-spacing: -0.035em; outline: none; } .oda__alt { margin: 10px 0 20px; color: #d9b866; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; } .oda__liste { list-style: none; border-top: 1px solid var(--oc); } .oda__liste li { display: flex; align-items: baseline; gap: 12px; padding: clamp(8px, 1.4vh, 11px) 0; border-bottom: 1px solid var(--oc); color: #ddd7cc; } /* Referanstaki daire içinde tik: pirinç daire, tik kenarlıkla çizilir. */ .oda__tik { position: relative; top: 3px; flex: none; width: 17px; height: 17px; border-radius: 50%; background: var(--pirinc); } .oda__tik::after { content: ""; position: absolute; left: 6px; top: 3px; width: 4px; height: 8px; border: solid #3d2a0b; border-width: 0 2px 2px 0; transform: rotate(45deg); } .oda__dug { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 22px; } .oda__dug .oda__btn + .oda__btn { margin-left: -8px; } .oda__git { color: var(--oy2); font: 500 13px/1 "Mono", monospace; white-space: nowrap; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; } .oda__git:hover { color: var(--oy); } .oda__git i { display: inline-block; font-style: normal; transition: transform .3s var(--spring); } .oda__git:hover i { transform: translateX(4px); } .oda__btn { padding: 10px 16px; color: var(--oy); font: 500 14px/1 "Inter", sans-serif; background: none; border: 1px solid #3a3530; border-radius: 99px; cursor: pointer; transition: background .2s, border-color .2s; } .oda__btn:hover { background: #221e1a; border-color: #5a524a; } .oda__btn:focus-visible, .oda__git:focus-visible { outline: 2px solid #e2c06d; outline-offset: 3px; } /* Sağda o alanın küçültülmüş denemesi (dene.js): renkli kutu ve uygulama penceresi yok, odanın zemininde açık yazıyla (Meyrem: "renkli arka planlara gerek yok", "minimalize edilmiş hali sağ tarafa"). Denemelerin kendi stilleri --bg/--ink'i kullandığı için burada yalnız o değişkenler odanın renklerine çevrilir; seçili düğme açık zeminde koyu yazı olur. */ .oda__dene { --bg: #141210; --ink: #f3efe7; --ink-2: #a39d93; --line: #3a3530; display: grid; place-items: center; color: var(--ink); font-size: 14px; } .oda__dene .dene { width: 100%; padding: 0; background: none; } .oda__dene .fatura__alanlar input { color: var(--ink); background: #1c1916; } .oda__dene .fatura__alanlar input[aria-invalid="true"] { background: #3a1a12; } .oda__dene .rls__satirlar li.sizdi { background: #3a1a12; color: #ffb59c; } .oda__dene .rls.acikta .rls__alt output { color: #ff8a63; } .oda__dene .soru pre { color: var(--ink); background: #1c1916; } .oda__dene .soru__secenekler button.yanlis { color: #ffb59c; background: #3a1a12; border-color: #3a1a12; } .oda__dene .vdx__noktalar i.sec.kacti { box-shadow: inset 0 0 0 1.5px #ff8a63; } .oda__dene .fatura__genel dd { font-size: clamp(24px, 2.4vw, 34px); } .oda__dene .telefon { height: min(400px, 44vh); border-color: #2a2622; box-shadow: 0 30px 50px -24px rgba(0, 0, 0, .9); } .oda__kat.on .telefon:not(.ileri) .telefon__dokun--al::after { animation: dokun 2s ease-out infinite; } .oda__kat.on .oda__dene { animation: oda-gir .8s var(--ease) .35s backwards; } .oda__kat.on .oda__metin > * { animation: oda-gir .6s var(--ease) backwards; animation-delay: calc(var(--g, 0) * 60ms + 150ms); } .oda__kat.on .oda__metin > :nth-child(2) { --g: 1; } .oda__kat.on .oda__metin > :nth-child(3) { --g: 2; } .oda__kat.on .oda__metin > :nth-child(4) { --g: 3; } .oda__kat.on .oda__metin > :nth-child(5) { --g: 4; } @keyframes oda-gir { from { opacity: 0; transform: translateX(14px); } } @media (max-height: 720px) and (min-width: 901px) { .oda { padding-block: 76px 20px; } .oda__bas { margin-bottom: 12px; } .oda[data-hal="secim"] .oda__ic { --w: clamp(140px, min(17vw, 26vh), 240px); } .oda__alt { margin-bottom: 12px; } .oda__dug { margin-top: 14px; } } /* ---------- İp ve karanlık kip ------------------------------------ Yalnız ilk üç ekran kararır; sonraki paneller zaten kendi renginde, zaman çizgisi zaten gece. Değişkenler :root'ta değil bölümde değişir: site.js'in okuduğu panel renkleri ve iç sayfalar etkilenmesin. Zemin çiçek sahnesinin gecesiyle aynı. */ /* --ipb: 0 dolu ip, 1 içi boş ip. Kenar rengi altındaki zeminden okunur (ip.js zeminOlc). */ .ip-kat { --ipb: 0; --ip-kenar: #121110; position: fixed; inset: 0; z-index: 39; pointer-events: none; } .ip-kat--koyu { --ip-kenar: #f6f1e9; } .ip { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .ip path { fill: none; stroke: var(--ip-kenar); stroke-linecap: round; transition: stroke .35s; } .ip__dolu { stroke-width: 2; opacity: calc(1 - var(--ipb)); } .ip__bos { stroke-width: 1.300; opacity: var(--ipb); } .ip__uc { position: absolute; left: 0; top: 0; width: 48px; height: 76px; margin-left: -24px; padding: 0; background: none; border: 0; cursor: grab; pointer-events: auto; touch-action: none; transform-origin: 50% 0; } .ip__uc:active { cursor: grabbing; } .ip__uc i { position: absolute; left: 50%; top: 0; width: 15px; height: 52px; margin-left: -7.5px; border-radius: 8px; transition: scale .3s var(--spring); } .ip__uc i::before, .ip__uc i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } .ip__uc i::before { background: var(--hot); opacity: calc(1 - var(--ipb)); transition: opacity .25s; } .ip__uc i::after { border: 1.300px solid var(--ip-kenar); opacity: var(--ipb); transition: border-color .35s; } /* Boş uç üzerine gelince dolar: tutulacak yer olduğu anlaşılır. */ .ip__uc:hover i::before, .ip__uc:focus-visible i::before { opacity: max(.9, calc(1 - var(--ipb))); } .ip__uc:hover i { scale: 1.12; } @media print { .ip-kat { display: none; } } .ip__uc:focus-visible { outline: 2px solid var(--hot); outline-offset: -2px; border-radius: 10px; } /* Karanlık ilk ekran antrasit (Meyrem seçti, 3 Kasım 2026; gönderdiği örnekteki füme koyusu, ../sitem/tasarim-yonleri/19): nötr, ısıtılmamış; portrenin arkasında hafif aydınlık, kenarlara doğru koyulaşır. Üstündeki sim gibi parıltı melek.js'in tozu. */ .karanlik .stage, .karanlik .top:not(.over) { --bg: #1d1e20; --ink: #f3f1ed; --ink-2: #a3a19c; --line: #34353a; } .karanlik .stage { background: var(--bg); color: var(--ink); } .karanlik .stage__pin { background: radial-gradient(62% 58% at 50% 44%, #2b2c2f 0%, #1d1e20 52%, #141516 100%); } .karanlik .top.scrolled:not(.over) { background: rgba(29, 30, 32, .86); } /* Beyaz etiketler kâğıt kalır. */ .karanlik .chip { --bg: #fbfaf7; --ink: #121110; --ink-2: #6b6862; --line: #e3e0d9; } .karanlik .chip { color: var(--ink); } .ip-gecis::view-transition-old(root), .ip-gecis::view-transition-new(root) { animation: none; mix-blend-mode: normal; } /* Panellerin adlı geçişleri sayfa değişimi için; kip değişirken ekran dışındaki görselleri yakalamak boşa iş. */ .ip-gecis .panel[data-case] .panel__visual, .ip-gecis .panel[data-case] h3 { view-transition-name: none; } @media (max-width: 900px) { .ip__uc i { width: 11px; height: 40px; margin-left: -5.5px; } .ip__dolu { stroke-width: 1.5; } } /* ---------- 3. Çalışmalar: tüm ekran yana akar --------------------- Her proje tam ekran bir sayfa. Dikey kaydırma yatay harekete çevrilir; bölümün yüksekliği JS'te yatay mesafeye eşitlenir, yani bir piksel aşağı = bir piksel yana. Renkler açıktan koyuya: sarı, yeşil, mavi, kırmızı, siyah — sonunda beyaz bir sayfa bir sonraki bölümün başlığını taşır. Bir piksel aşağı = iki piksel yana: 1:1 oranında yedi tam ekran fazla uzun sürüyordu. */ .work { position: relative; height: 700vh; } /* clip, hidden değil: hidden'lı kutu kodla ve Tab odağıyla yana kayabiliyor, akış bozuluyordu. */ .work__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip; } .track { display: flex; height: 100%; width: max-content; transform: translateX(var(--tx, 0px)); will-change: transform; } .panel { position: relative; flex: none; width: 100vw; height: 100%; overflow: hidden; background: var(--pbg); color: var(--pfg); display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; align-items: center; padding: 110px var(--pad) 90px; --d: 0; } /* Peri tozu (toz.js): zeminin üstünde, içeriğin altında. */ [data-toz] { isolation: isolate; } .toz { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; } /* Randevu panelinde saat ızgarası bütün zemini kaplar (Meyrem). Noktalar ince, dolan hücreler yazının altında kalır. */ article.panel[data-toz="takvim"] .toz { -webkit-mask-image: none; mask-image: none; } /* Satır ve takvim çizgileri metnin arkasından geçince yazı bozulmuş gibi duruyordu; metin sütununda silinirler. Telefonda metin görselin altında (panel) ya da üstünde (dosya), maske ona göre döner. */ [data-toz="satir"] .toz, [data-toz="takvim"] .toz { -webkit-mask-image: linear-gradient(90deg, transparent 42%, #000 60%); mask-image: linear-gradient(90deg, transparent 42%, #000 60%); } .case-hero__band[data-toz] .toz { -webkit-mask-image: none; mask-image: none; } /* Ana turuncu zeminde .82 opaklık okunurluğu düşürüyor. */ .panel[data-case="2"] .panel__text p { opacity: 1; } .panel__num { /* Metnin akışında, etiketle aynı satırda: mutlak konumda dev hâli kesiliyor, küçültülünce de kısa ekranda etiketin üstüne biniyordu. Akıştayken hiçbir yükseklikte çakışamaz. */ display: inline-block; vertical-align: middle; margin-right: 16px; font: 800 clamp(52px, 10vh, 92px)/.9 "Bricolage", sans-serif; color: transparent; -webkit-text-stroke: 1.5px var(--pfg); opacity: .4; } .panel__num + .panel__tag { vertical-align: middle; } .panel__text { position: relative; z-index: 2; grid-column: 1 / 6; transform: translateX(calc(var(--d) * 12vw)); } .panel__tag { display: inline-block; padding: 8px 12px; border-radius: 999px; border: 1.5px solid currentColor; } .panel__text h3 { margin-top: 22px; font: 800 clamp(48px, 6vw, 100px)/.92 "Bricolage", sans-serif; font-stretch: 88%; letter-spacing: -0.04em; } .panel__text p { margin-top: 20px; max-width: 26em; font-size: 18px; opacity: .82; } /* Kobalt zeminde .82 opaklık 3,83:1 kalıyordu (ölçüldü, gereken 4,5). */ .panel--dark .panel__text p { opacity: 1; } .panel__chips { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 6px; list-style: none; } .panel__chips li { padding: 5px 10px; border-radius: 6px; background: rgba(255, 255, 255, .22); font: 500 12px/1.2 "Mono", monospace; } .panel--dark .panel__chips li { background: rgba(255, 255, 255, .12); } .panel__open { margin-top: 30px; display: inline-flex; align-items: center; gap: 12px; cursor: pointer; padding: 15px 22px; border-radius: 999px; border: 0; background: var(--pfg); color: var(--pbg); font: 600 15px/1 "Inter", sans-serif; transition: transform .4s var(--spring); } .panel__open:hover { transform: translateY(-3px) rotate(-2deg); } .panel__open i { font-style: normal; transition: transform .4s var(--ease); } .panel__open:hover i { transform: translateX(5px); } .panel__site { display: inline-block; margin-left: 18px; color: var(--pfg); font: 600 15px/1 "Inter", sans-serif; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; } .step b a { text-decoration: underline; text-decoration-color: var(--hot); text-decoration-thickness: 2px; text-underline-offset: 3px; } .panel__visual { position: relative; z-index: 1; grid-column: 6 / 13; height: min(64vh, 620px); border-radius: 26px; overflow: hidden; background: rgba(255, 255, 255, .2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); transform: translateX(calc(var(--d) * 26vw)) rotate(calc(var(--d) * 4deg)); } /* Galeri duvarı iki kipte (Meyrem, 2 Kasım 2026): karanlıkta kapı odasının koyu duvarı sürer; aydınlıkta krem duvar, kapı kanatlarındaki oluğun seyrek ve soluk hâli, altta süpürgelik, tablo lambasının ışığı duvara düşer. Kapı odası iki kipte de kahve kalır. Odadan kreme geçiş .work__pin::before ile yumuşak (site.js --karar). */ .work { --duvar: #efe7da; --duvar-yazi: #121110; --duvar-ink2: #6b6862; --duvar-cizgi: #ddd3c2; } .karanlik .work { --duvar: #141210; --duvar-yazi: #f3efe7; --duvar-ink2: #a39d93; --duvar-cizgi: #2e2a26; } .panel--intro, .panel[data-case], .panel--more { --pbg: var(--duvar); --pfg: var(--duvar-yazi); } .panel--intro { --bg: var(--duvar); --ink: var(--duvar-yazi); --ink-2: var(--duvar-ink2); --line: var(--duvar-cizgi); } /* Salon (3 Kasım 2026, ../sitem/tasarim-yonleri/17-galeri-2): duvar, süpürgelik ve parke panellerin arkasında; paneller saydam. Karanlıkta da duvar çizgili kalır (Meyrem: "düz siyah olmasın"). Parke salon.js'te hesapla çizilir. */ .work { --zemin: 20vh; --supurge: 58px; --ust: max(15vh, 118px); --cw: min(50vw, calc((80vh - 88px - var(--ust)) * 1.55)); --oluk1: rgba(110, 86, 54, .075); --oluk2: rgba(255, 255, 255, .55); --oluk3: rgba(110, 86, 54, .05); --supurge-renk: #e5dac7; --supurge-cizgi: rgba(92, 70, 44, .22); } .karanlik .work { --oluk1: rgba(255, 240, 215, .05); --oluk2: rgba(255, 240, 215, .09); --oluk3: rgba(0, 0, 0, .34); --supurge-renk: #1b1714; --supurge-cizgi: rgba(255, 240, 215, .07); } .work__pin { background: var(--duvar); } .salon { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .salon__duvar { position: absolute; left: 0; top: 0; bottom: var(--zemin); width: calc(100% + 128px); will-change: transform; background: repeating-linear-gradient(90deg, var(--oluk1) 0, var(--oluk2) 1.500px, transparent 7px, transparent 50px, var(--oluk3) 58px, var(--oluk1) 64px); } .salon__supurge { position: absolute; left: 0; right: 0; bottom: var(--zemin); height: var(--supurge); background: linear-gradient(var(--supurge-cizgi) 0 3px, transparent 3px), var(--supurge-renk); box-shadow: 0 2px 6px rgba(0, 0, 0, .25); } #salonZemin { position: absolute; left: 0; right: 0; bottom: 0; display: block; width: 100%; height: var(--zemin); } .track { position: relative; z-index: 1; } .panel--intro, .panel[data-case] { background: none; } .panel--intro { padding-bottom: calc(var(--zemin) + var(--supurge) + 5vh); } /* "Ve dahası" salonun ön duvarı: parke yok, liste kısa ekranda zemine taşıyordu. Duvarın izleyiciye dönen kısmı aradaki .salon-kose. */ .salon__tavan { position: absolute; left: 0; right: 0; top: 0; height: 14px; background: var(--supurge-renk); box-shadow: 0 1px 0 var(--supurge-cizgi); } .salon-kose { position: relative; flex: none; width: clamp(70px, 8vw, 150px); height: 100%; pointer-events: none; } .salon-kose canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; } /* Ön duvar: altında ince parke şeridi (salonZemin görünür, --on). Süpürgelik yakın olduğu için salondakinden yüksek. */ .panel--more { --on: 6vh; --on-sup: calc(var(--supurge) * 1.25); background: linear-gradient(180deg, transparent calc(100% - var(--on-sup)), var(--supurge-cizgi) calc(100% - var(--on-sup)), var(--supurge-cizgi) calc(100% - var(--on-sup) + 3px), var(--supurge-renk) calc(100% - var(--on-sup) + 3px)) 0 0 / 100% calc(100% - var(--on)) no-repeat, repeating-linear-gradient(90deg, var(--oluk1) 0, var(--oluk2) 1.500px, transparent 7px, transparent 50px, var(--oluk3) 58px, var(--oluk1) 64px) 0 0 / 100% calc(100% - var(--on)) no-repeat, linear-gradient(var(--duvar), var(--duvar)) 0 0 / 100% calc(100% - var(--on)) no-repeat; } .panel--more::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--on); pointer-events: none; background: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 70%); } html:not(.karanlik) .tablo__cerceve { box-shadow: 0 30px 46px -18px rgba(70, 48, 26, .6), inset 0 0 0 2px rgba(255, 255, 255, .07); } html:not(.karanlik) .tablo__isik { mix-blend-mode: normal; background: radial-gradient(55% 100% at 50% 0%, rgba(255, 214, 140, .4), rgba(255, 214, 140, 0) 72%); } /* Odadan galeriye: bölümün üst kenarı odanın rengiyle başlar, bölüm yükseldikçe krem açılır; sınırda çizgi kalmaz. */ html:not(.karanlik) .work__pin::before { content: ""; position: absolute; z-index: 5; left: 0; right: 0; top: 0; height: 100vh; pointer-events: none; background: linear-gradient(180deg, #141210 0, rgba(20, 18, 16, 0) calc(var(--karar, 0) * 170%)); opacity: min(1, calc(var(--karar, 0) * 5)); } /* Kısa galeri (Meyrem: "5 ekran yerine 3-4"): geniş ekranda proje panelleri tam ekran değil, duvarda yan yana; bir sonraki panel sağdan yaklaşır. "Ve dahası" ve kapanış tam ekran (Meyrem). Yatay yol 6 ekrandan 4,1 ekrana indi; dikey yol site.js'te (SPEED). Telefonda ve hareket azaltmada paneller eskisi gibi tam genişlik. */ @media (min-width: 901px) and (prefers-reduced-motion: no-preference) { .panel--intro { width: 82vw; } .track .panel--intro h2 { font-size: clamp(90px, 14vw, 250px); } /* İki iş arası Meyrem'le ayarlandı: 80 ve 88vw yakın, 100vw uzak. Yandaki tablo durakta tamamen söner. */ .panel[data-case] { width: 94vw; } /* Yandaki panelden yalnız tablo görünsün: yazısı ortadan uzaklaştıkça söner, kenarda harf parçası kalmaz. */ .panel .panel__text { opacity: clamp(0, calc(1 - max(var(--d), -1 * var(--d)) * 1.7), 1); } } /* Galeri (Meyrem seçti, 2 Kasım 2026): kapı odasının devamı. Koyu duvarda çerçeveli gerçek ekran, üstünde pirinç tablo lambası; proje ekrana gelince lamba kısa titreyip yanar (site.js .yandi). Proje rengi yalnız paspartuda, künye müze etiketi gibi kâğıt. */ /* Yazı ve tablo ortada tek grup, duvarda kutusuz; vaka düğmesi baştan görünür (Meyrem: "ben fark etmediysem yeni giren de fark etmez"). */ .panel[data-case] { --pirinc: linear-gradient(165deg, #f8e7aa 0%, #dcb45c 30%, #a97c2c 58%, #e9c872 80%, #8a6220 100%); } .panel[data-case], .panel--more { grid-template-columns: minmax(0, 440px) var(--cw); justify-content: center; align-content: start; align-items: end; column-gap: clamp(48px, 6.500vw, 124px); padding: var(--ust) var(--pad) 0; } /* Yazı ve liste solda tek sütun; ortası ve sağı denizanalarının (Meyrem: "köşeye sıkışmış gibi"). */ .panel--more { grid-template-columns: minmax(0, 440px); justify-content: start; align-content: center; align-items: start; row-gap: clamp(14px, 3.400vh, 36px); padding: var(--ust) var(--pad) calc(var(--on) + var(--on-sup)) max(var(--pad), 7vw); } :is(.panel[data-case], .panel--more) .panel__text { grid-column: auto; transform: translateX(calc(var(--d) * 6vw)); } :is(.panel[data-case], .panel--more) .panel__text > .mono { display: block; color: var(--duvar-ink2); font-size: 13px; } :is(.panel[data-case], .panel--more) .panel__text h3 { margin-top: 10px; font-size: clamp(42px, min(5vw, 10vh), 88px); line-height: .94; font-stretch: 84%; letter-spacing: -0.03em; } :is(.panel[data-case], .panel--more) .panel__text p { margin-top: 14px; color: var(--duvar-ink2); font-size: clamp(15px, 1.150vw, 17.500px); line-height: 1.5; opacity: 1; } .panel__alt { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: clamp(16px, 3vh, 26px); } .panel__alt .panel__site { margin-left: 0; } /* Vaka düğmesi: sağındaki küçük daire işin rengi; üzerine gelince renk bütün düğmeyi doldurur. */ .vaka { position: relative; display: inline-flex; align-items: center; gap: 14px; padding: 6px 6px 6px 22px; overflow: hidden; isolation: isolate; color: var(--pbg); font: 600 clamp(15px, 1.200vw, 17.500px)/1 "Inter", sans-serif; background: var(--pfg); border-radius: 99px; transition: color .3s; } .vaka::before { content: ""; position: absolute; z-index: -1; right: 6px; top: 6px; width: 40px; height: 40px; background: var(--mat); border-radius: 50%; transition: transform .55s var(--ease); } .vaka i { display: grid; place-items: center; width: 40px; height: 40px; color: var(--mat-y); font-style: normal; font-size: 18px; transition: transform .45s var(--ease); } .vaka:hover, .vaka:focus-visible { color: var(--mat-y); } .vaka:hover::before, .vaka:focus-visible::before { transform: scale(9); } .vaka:hover i, .vaka:focus-visible i { transform: translateX(3px); } .panel__visual.tablo { grid-column: auto; justify-self: auto; width: var(--cw); height: auto; overflow: visible; background: none; border-radius: 0; box-shadow: none; transform: translateX(calc(var(--d) * -1.600vw)); opacity: clamp(0, calc(1.700 - max(var(--d), -1 * var(--d)) * 2.400), 1); } /* Duvara düşen ışık tablonun arkasında; yerdeki yansıma fizikle hesaplanır (salon.js --yansi). Karanlıkta lambası yanmayan tablo seçilmez. */ .tablo::before { content: ""; position: absolute; z-index: 0; left: -34%; right: -34%; top: -20%; height: 154%; pointer-events: none; opacity: 0; transition: opacity .6s; background: radial-gradient(52% 68% at 50% 13%, rgba(255, 222, 165, .55), rgba(255, 214, 150, .16) 58%, rgba(255, 214, 150, 0) 76%); -webkit-mask-image: linear-gradient(transparent, #000 13%); mask-image: linear-gradient(transparent, #000 13%); } .panel.yandi .tablo::before { opacity: .55; } .karanlik .panel.yandi .tablo::before { opacity: 1; } .tablo__cerceve { -webkit-box-reflect: below var(--yansi, 120px) linear-gradient(transparent 62%, rgba(255, 255, 255, .26)); } .tablo__cerceve::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: 4px; background: #0a0807; opacity: 0; pointer-events: none; transition: opacity .6s; } .karanlik .panel:not(.yandi) .tablo__cerceve::after { opacity: .9; } .tablo__git { position: absolute; inset: 0; z-index: 3; } .tablo__cerceve { position: relative; padding: clamp(8px, 1.100vw, 16px); border-radius: 4px; background: linear-gradient(145deg, #2d2823, #0c0a09); box-shadow: 0 34px 60px -14px rgba(0, 0, 0, .9), inset 0 0 0 2px rgba(255, 255, 255, .07); } .tablo__paspartu { aspect-ratio: 16 / 10; padding: clamp(14px, 2.200vw, 34px); overflow: hidden; background: var(--mat); box-shadow: inset 0 3px 9px rgba(0, 0, 0, .35); } .tablo__paspartu > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; box-shadow: 0 4px 12px rgba(0, 0, 0, .3); } .tablo__paspartu > svg { display: block; width: 100%; height: 100%; } .tablo__tel { display: flex; justify-content: center; gap: 6%; height: 100%; } .tablo__tel img { display: block; width: auto; height: 100%; border: 5px solid #17120e; border-radius: 20px; } /* Lamba kasanın üstünden kolla uzanır; ışığı aşağı, ekrana düşer. */ .tablo__lamba { position: absolute; z-index: 3; left: 50%; top: clamp(-52px, -3.400vw, -30px); width: 40%; height: clamp(14px, 1.400vw, 22px); transform: translateX(-50%); border-radius: 16px 16px 6px 6px; background: var(--pirinc); box-shadow: 0 6px 12px rgba(0, 0, 0, .6); } .tablo__lamba::before { content: ""; position: absolute; left: calc(50% - 4px); top: 90%; width: 8px; height: clamp(18px, 2.200vw, 34px); background: linear-gradient(90deg, #8a6220, #e9c872, #8a6220); } .tablo__lamba::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: -2px; height: 4px; border-radius: 99px; background: #fff3d2; opacity: 0; box-shadow: 0 0 16px 5px rgba(255, 220, 150, .8); transition: opacity .5s; } .tablo__isik { position: absolute; z-index: 2; left: -8%; right: -8%; top: clamp(-34px, -2vw, -20px); height: 88%; pointer-events: none; mix-blend-mode: screen; opacity: 0; transition: opacity .6s; background: radial-gradient(55% 100% at 50% 0%, rgba(255, 226, 170, .44), rgba(255, 210, 140, 0) 72%); } .panel.yandi .tablo__isik, .panel.yandi .tablo__lamba::after { opacity: 1; animation: lamba-yan .9s ease-out .15s backwards; } @keyframes lamba-yan { 0% { opacity: 0; } 15% { opacity: .8; } 25% { opacity: .1; } 45% { opacity: 1; } 55% { opacity: .5; } } @media (prefers-reduced-motion: reduce) { .tablo__isik, .tablo__lamba::after { opacity: 1; } } /* Üstten başlar: alta yaslıyken geniş ekranda kutunun yarısı boş kalıyordu. */ .panel__visual > img.shot { position: absolute; left: 6%; top: 8%; width: 110%; max-width: none; border-radius: 12px; box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .5); } .panel__visual > svg { position: absolute; inset: 0; width: 100%; height: 100%; } .phones { position: absolute; inset: 0; display: flex; gap: 26px; justify-content: center; align-items: flex-start; padding-top: 7%; } .phones img { width: clamp(130px, 13vw, 200px); border-radius: 28px; border: 6px solid #0e111b; box-shadow: 0 30px 50px -20px rgba(0, 0, 40, .55); } .phones img:last-child { margin-top: 70px; } .panel--intro { align-content: end; } .panel--intro .panel__text { grid-column: 1 / -1; transform: translateX(calc(var(--d) * 40vw)); } .panel--intro h2 { font-size: clamp(90px, 17vw, 300px); line-height: .84; letter-spacing: -0.03em; margin-top: 10px; } .panel--intro .lead { margin-top: 26px; display: flex; align-items: center; gap: 14px; color: var(--ink-2); } .panel--intro .lead i { width: 60px; height: 2px; background: var(--hot); position: relative; overflow: hidden; } .panel--intro .lead i::after { content: ""; position: absolute; inset: 0; background: var(--bg); animation: slide 1.6s var(--ease) infinite; } @keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(100%); } } .dahasi { position: relative; z-index: 2; list-style: none; transform: translateX(calc(var(--d) * 6vw)); } .panel--more li { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: clamp(6px, 1.500vh, 16px) 0; border-top: 1px solid color-mix(in srgb, var(--pfg) 18%, transparent); font: 700 clamp(20px, min(2.200vw, 3.800vh), 34px)/1 "Bricolage", sans-serif; letter-spacing: -0.025em; } .panel--more li:last-child { border-bottom: 1px solid color-mix(in srgb, var(--pfg) 18%, transparent); } .panel--more li span { font: 500 13px/1 "Mono", monospace; opacity: .6; } /* Listedeki ad, denizanasıyla aynı pencereye gider; üzerine gelince denizanası da açılır (sahne-denizanasi.js). */ .dahasi a[data-dz] { transition: color .3s; } .dahasi a[data-dz]:hover, .dahasi a[data-dz]:focus-visible { color: var(--dz-renk); } /* Denizanası rengi kipe göre; çizimdeki ACIK ve KOYU ile aynı. */ .panel--more { --dz-renk: #7a1c1a; --dz-hale: #c44832; } .karanlik .panel--more { --dz-renk: #ffbeb2; --dz-hale: #ff786e; } /* "Tüm çalışmalar": büyük denizanasının altında ilk bakışta düğme (Meyrem: denizanası tek başına "kimse anlamaz"). Denizanası dilinden ince çizgi ve hale; üzerine gelince düğme denizanasının rengiyle dolar, büyük denizanası açılır. */ .dahasi__tum { /* Yatayda büyük denizanasının altında ortalı (sahne-denizanasi.js GENIS: x .8). */ position: absolute; z-index: 2; left: 80%; transform: translateX(-50%); bottom: calc(var(--on) + var(--on-sup) + 8vh); display: inline-flex; align-items: center; gap: 16px; padding: 8px 8px 8px 26px; border-radius: 99px; color: var(--pfg); font: 600 clamp(15px, 1.250vw, 18px)/1 "Inter", sans-serif; border: 1.5px solid var(--dz-renk); background: color-mix(in srgb, var(--duvar) 70%, transparent); box-shadow: 0 0 34px 6px color-mix(in srgb, var(--dz-hale) 22%, transparent); transition: box-shadow .5s, color .3s, background-color .3s; } .dahasi__tum i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--dz-renk); color: var(--duvar); font-style: normal; font-size: 18px; transition: transform .45s var(--ease); } .dahasi__tum:hover, .dahasi__tum:focus-visible { background: var(--dz-renk); color: var(--duvar); box-shadow: 0 0 60px 16px color-mix(in srgb, var(--dz-hale) 34%, transparent); } .dahasi__tum:hover i, .dahasi__tum:focus-visible i { background: var(--duvar); color: var(--dz-renk); transform: translateX(3px); } /* Son sayfa: beyaz. Bir sonraki bölümün başlığı burada durur; yatay akış bitince sayfa dikey devam eder ve zaman çizgisi tam altından gelir. */ .panel--outro { align-content: end; padding-bottom: 6vh; } .panel--outro .panel__text { grid-column: 1 / -1; } .panel--outro h2 { font-size: clamp(56px, 8vw, 132px); } .hud { position: absolute; left: var(--pad); right: var(--pad); bottom: 30px; z-index: 5; display: flex; align-items: center; gap: 18px; color: var(--hdr, var(--ink)); transition: color .4s, opacity .4s; } .hud__fill { position: absolute; left: 0; top: 0; height: 2px; width: calc(var(--w, 0) * 100%); background: currentColor; } .hud__bar { flex: 1; position: relative; height: 2px; } .hud__bar::before { content: ""; position: absolute; inset: 0; background: currentColor; opacity: .22; } .hud.off { opacity: 0; } /* ---------- 4. Yol: zaman çizelgesi -------------------------------- */ .path { padding: 10px var(--pad) clamp(100px, 12vw, 170px); } .path__line { position: relative; margin-top: 30px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 20px; } .path__line::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: var(--line); } .path__line::after { content: ""; position: absolute; left: 0; top: 7px; height: 2px; width: 100%; background: var(--hot); transform: scaleX(var(--d, 0)); transform-origin: left; transition: transform 1.8s var(--ease); } .path__line.on::after { --d: 1; } .step { position: relative; padding-top: 38px; opacity: 0; transform: translateY(18px); transition: opacity .6s, transform .8s var(--ease); transition-delay: calc(var(--i) * 130ms + .2s); } .path__line.on .step { opacity: 1; transform: none; } .step::before { content: ""; position: absolute; left: 0; top: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); border: 3px solid var(--hot); } .step .y { color: var(--ink-2); } .step b { display: block; margin-top: 8px; font: 700 19px/1.15 "Bricolage", sans-serif; letter-spacing: -0.015em; } .step p { margin-top: 6px; font-size: 14px; color: var(--ink-2); } .path__more { margin-top: 60px; display: inline-flex; gap: 10px; font-weight: 600; border-bottom: 2px solid var(--ink); padding-bottom: 4px; transition: color .3s, border-color .3s; } .path__more:hover { color: var(--hot); border-color: var(--hot); } /* ---------- 5. Kapanış --------------------------------------------- */ .cta { background: var(--ink); color: var(--bg); padding: clamp(90px, 12vw, 160px) var(--pad) 40px; overflow: hidden; } .cta .eyebrow { color: #a9a49b; } .cta__big { display: block; margin-top: 26px; font: 800 clamp(64px, 13vw, 220px)/.86 "Bricolage", sans-serif; letter-spacing: -0.05em; text-transform: uppercase; } .cta__big span { display: inline-block; transition: transform .5s var(--spring), color .3s; } .cta__big:hover span { color: var(--hot); transform: translateY(-.06em); } .cta__big:hover span:nth-child(2n) { transform: translateY(.04em); } .cta__row { margin-top: 60px; padding-top: 26px; border-top: 1px solid #2c2a27; display: flex; flex-wrap: wrap; gap: 14px 34px; justify-content: space-between; color: #a9a49b; } .cta__row a { color: var(--bg); } .cta__row a:hover { color: var(--hot); } /* Kısa alt bilgi: vaka sayfaları ve İşbirliği. */ .case-foot { display: flex; flex-wrap: wrap; gap: 14px 34px; justify-content: space-between; padding: 28px var(--pad); background: var(--ink); color: #a9a49b; } .case-foot a { color: var(--bg); } .case-foot a:hover { color: var(--hot); } /* ---------- Telefon menüsü ------------------------------------------ Düğmenin olduğu köşeden açılan bir daire tüm ekranı kaplar, başlıklar ismin geldiği gibi alttan yükselir. Zemin kâğıt: büyük renk blokları yalnızca proje panellerinde. */ .drawer { position: fixed; inset: 0; width: 100%; height: 100dvh; max-width: none; max-height: none; border: 0; padding: 16px var(--pad) 24px; overflow-y: auto; color: var(--ink); /* Galeri duvarının oluğu, çok soluk: menü de aynı evin bir odası. */ background: repeating-linear-gradient(90deg, rgba(110, 86, 54, .045) 0, rgba(255, 255, 255, .5) 1.500px, transparent 7px, transparent 50px, rgba(110, 86, 54, .03) 58px, rgba(110, 86, 54, .045) 64px), var(--bg); } .drawer[open] { display: flex; flex-direction: column; animation: drawer-in .7s var(--ease) both; } .drawer.closing { animation: drawer-out .35s ease-in both; } .drawer::backdrop { background: transparent; } @keyframes drawer-in { from { clip-path: circle(0 at calc(100% - 50px) 36px); } to { clip-path: circle(150vmax at calc(100% - 50px) 36px); } } @keyframes drawer-out { from { clip-path: circle(150vmax at calc(100% - 50px) 36px); } to { clip-path: circle(0 at calc(100% - 50px) 36px); } } /* Menü açıkken arkadaki sayfa kaymasın; konumu da korunur. */ html:has(.drawer[open]) { overflow: hidden; } .drawer__head { display: flex; justify-content: space-between; align-items: center; color: var(--ink-2); } .drawer__head b { color: var(--ink); } .drawer__ben { display: flex; align-items: center; gap: 10px; font-size: 13px; line-height: 1.35; } .drawer__ben img { flex: none; width: 34px; height: 34px; border-radius: 50%; object-fit: cover; } .drawer nav { margin-block: auto; padding-block: 24px; } .drawer ul { list-style: none; } /* Ana bağlantılar: ince çizgiyle ayrılmış satırlar, sağda sayfa numarası. Bulunulan sayfa turuncu, numarası nokta olur. */ .drawer__main li { overflow: hidden; border-bottom: 1px solid var(--line); } .drawer__main a { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 4px 0 6px; font: 800 clamp(42px, 12.500vw, 66px)/1.04 "Bricolage", sans-serif; font-stretch: 86%; letter-spacing: -0.035em; transform: translateY(105%); animation: up .9s var(--ease) forwards; animation-delay: calc(var(--i) * 60ms + .12s); } .drawer__main small { font-size: 12px; font-stretch: 100%; letter-spacing: 0; color: var(--ink-2); transition: transform .4s var(--ease); } .drawer__main a:hover small, .drawer__main a:focus-visible small { transform: translateX(-6px); color: var(--hot); } .drawer__main a:hover { color: var(--hot); } .drawer__main a[aria-current="page"] small { font-size: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--hot); align-self: center; } /* Projeler: 2x2 kart; her işin rengi yalnız küçük bir daire ve üzerine gelince kenar (renk ölçülü). */ .drawer__etiket { margin-top: 26px; color: var(--ink-2); font-size: 12px; } .drawer__projects { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; } .drawer__projects a { position: relative; display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 34px 14px 14px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--bg) 82%, transparent); transition: border-color .3s, transform .4s var(--ease); } .drawer__projects a::before { content: ""; position: absolute; left: 14px; top: 14px; width: 12px; height: 12px; border-radius: 50%; background: var(--p); box-shadow: 0 0 0 1px rgba(18, 17, 16, .12); } .drawer__projects a:hover, .drawer__projects a:focus-visible { border-color: var(--p); transform: translateY(-2px); } .drawer__projects b { font: 700 18px/1.1 "Bricolage", sans-serif; letter-spacing: -0.015em; } .drawer__projects small { color: var(--ink-2); font-size: 11px; line-height: 1.35; } .drawer__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; color: var(--ink-2); } .drawer__foot a { color: var(--ink); } /* ---------- 404 ------------------------------------------------------ */ .lost { --pfg: var(--ink); --pbg: var(--bg); min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; gap: clamp(24px, 4vh, 44px); padding: 100px var(--pad) clamp(32px, 7vh, 64px); overflow: hidden; } .lost__big { font: 800 min(49vw, 62vh)/.8 "Bricolage", sans-serif; letter-spacing: 0; } .lost__big span { display: flex; justify-content: center; overflow: hidden; padding: .06em 0 .04em; } .lost__big i { font-style: normal; display: inline-block; transform: translateY(105%); animation: up 1.1s var(--ease) forwards; animation-delay: calc(var(--i) * 70ms + .1s); } .lost__big i:nth-child(2) { color: var(--hot); } .lost__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 22px 40px; } .lost h1 { font: 800 clamp(30px, 4vw, 60px)/1.05 "Bricolage", sans-serif; font-stretch: 88%; letter-spacing: -0.035em; } .lost .panel__open { margin-top: 0; } .lost .scribble path { animation: ink 1.1s ease .9s forwards; } /* Sayfalar arası geçiş: aynı adı taşıyan öğeler eski sayfadaki yerinden yenisindeki yerine akar. Ana sayfadaki proje paneli ↔ vaka sayfasının girişi. Desteklemeyen tarayıcı sayfayı normal açar. */ @view-transition { navigation: auto; } .panel[data-case="0"] .panel__visual { view-transition-name: ahenya-shot; } .panel[data-case="0"] h3 { view-transition-name: ahenya-title; } .panel[data-case="1"] .panel__visual { view-transition-name: randevu-shot; } .panel[data-case="1"] h3 { view-transition-name: randevu-title; } .panel[data-case="2"] .panel__visual { view-transition-name: erp-crm-shot; } .panel[data-case="2"] h3 { view-transition-name: erp-crm-title; } .panel[data-case="3"] .panel__visual { view-transition-name: kocluk-shot; } .panel[data-case="3"] h3 { view-transition-name: kocluk-title; } ::view-transition-group(ahenya-shot), ::view-transition-group(ahenya-title), ::view-transition-group(randevu-shot), ::view-transition-group(randevu-title), ::view-transition-group(erp-crm-shot), ::view-transition-group(erp-crm-title), ::view-transition-group(kocluk-shot), ::view-transition-group(kocluk-title) { animation-duration: .8s; animation-timing-function: cubic-bezier(.16, 1, .3, 1); } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .5s; } /* ---------- Telefon -------------------------------------------------- */ @media (max-width: 900px) { .top { display: flex; justify-content: space-between; align-items: center; padding-block: 16px; } .top .b, .top nav { display: none; } .top--solid { inset: 10px 12px auto; padding: 6px 6px 6px 8px; } .top--solid .a span { display: none; } .phead { padding-top: 92px; } .drawer__main a[aria-current="page"] { color: var(--hot); } .menu { display: inline-flex; padding: 10px 14px; border: 0; border-radius: 999px; background: var(--ink); color: var(--bg); font: 600 13px/1 "Inter", sans-serif; cursor: pointer; } .top.over .menu { background: var(--hdr); color: var(--hbg, var(--bg)); } /* Telefonda isim üstte kalınca ortada boşluk açılıyordu; ekranın üçte birine iner, tanıtım cümlesi de büyür. */ .name { top: 30vh; } .intro { grid-template-columns: 1fr; bottom: 12vh; } .intro p { grid-column: auto; font-size: 25px; } .intro .hint { display: none; } .photo { width: 62vw; top: 47%; } .ring { width: 138%; } /* Dar ekranda etiketler fotoğraf ve birbiriyle çakışıyordu; kendi telefon yerleri var. */ .chip { left: var(--mx, var(--x)); top: var(--my, var(--y)); padding: 9px 12px; font-size: 13px; border-radius: 12px; white-space: nowrap; } .chip small { font-size: 10px; } .photo { top: 45%; } .ayrac { top: calc(45% + 31vw + 3vh); } /* Telefonda kartın yanında yer yok: ipucu alttaki satırın altında, ortada. */ .ayrac__ipucu { left: 50%; top: calc(100% + 44px); transform: translate(-50%, -6px); } .ayrac.ipucu .ayrac__ipucu { transform: translate(-50%, 0); } /* Telefonda kanat çok küçük, yazılar birbirine ve karta biniyordu: gösterilmez, aynı dört iş kartta. */ .sarkan { display: none; } .ayrac__giris { margin-bottom: 6px; } /* Kapılar yana kayan sıra; seçilince kapı üstte küçük, alanın yazısı ve örneği altında. */ .oda { min-height: 0; padding: 84px 0 48px; } .oda__bas { text-align: left; } .oda__bas .eyebrow { justify-content: flex-start; } /* Beş kapı tek ekranda: üstte üç, altta iki. Yana kayan sıra telefonda "sığmıyor" gibi duruyordu (Meyrem, 2 Kas 2026). Kapı genişliği ekrandan hesaplanır; her sıranın kendi zemin çizgisi var. */ .oda__ic { --w: min(132px, calc((100vw - 2 * var(--pad) - 2 * 16px) / 3)); } .mkapilar { flex-wrap: wrap; justify-content: center; gap: calc(var(--w) * .3) 16px; padding-top: 8px; } .mkapilar::before { display: none; } .oda[data-hal="liste"] .mkapi::before { content: ""; position: absolute; left: -9px; right: -9px; top: 100%; height: calc(var(--w) * .22); background: linear-gradient(#1f1b17, rgba(20, 18, 16, 0)); border-top: 1px solid #2c2824; pointer-events: none; } .mkapi__ipucu { display: none; } .oda[data-hal="secim"] .oda__ic { --w: 96px; grid-template-columns: minmax(0, 1fr); gap: 4px; } .oda[data-hal="secim"] .mkapilar { overflow: visible; padding-bottom: calc(var(--w) * .26); } .oda[data-hal="secim"] .mkapilar::before { display: block; width: auto; } /* Deneme listenin altında, tam genişlik. */ .oda__katlar { padding-bottom: 0; } .oda__kat { grid-template-columns: minmax(0, 1fr); } .oda__dene .telefon { width: 52vw; height: auto; } .dene, .fatura { width: 100%; } .dene__arka { display: none; } .telefon { width: 52vw; height: auto; } .telefon__dokun--al { min-height: 32px; } .telefon__dokun--geri { min-height: 40px; } /* Metin içi küçük bağlantılar 18 px'ti; görünüş aynı kalır, dokunma alanı görünmez katmanla büyür. */ .row__body a, .orbit__foot a, dd a, .ch__lead a { position: relative; } .row__body a::after, .orbit__foot a::after, dd a::after, .ch__lead a::after { content: ""; position: absolute; inset: -8px -4px; } /* Telefonda da tüm ekran yana akar; sayfa düzeni üst üste dizilir. */ .panel { grid-template-columns: 1fr; align-content: center; gap: 22px; padding: 86px var(--pad) 80px; } .panel__text, .panel__visual { grid-column: 1 / -1; } .panel__visual { order: -1; height: 40vh; } /* Galeri: tablo üstte tam genişlik, künye altında. */ .work { --zemin: 13vh; --supurge: 30px; --ust: max(13vh, 92px); --cw: 100%; } .panel[data-case] { grid-template-columns: minmax(0, 1fr); align-items: start; row-gap: 18px; padding: var(--ust) var(--pad) 0; } .panel--intro { padding-bottom: calc(var(--zemin) + var(--supurge) + 5vh); } .panel__visual.tablo { width: 100%; height: auto; order: -1; } .tablo__paspartu { padding: 12px; } .tablo__tel img { border-width: 3px; border-radius: 12px; } .panel[data-case] .panel__text h3 { font-size: clamp(34px, 10vw, 46px); margin-top: 4px; } .panel[data-case] .panel__text p { margin-top: 8px; font-size: 15px; } .panel[data-toz] .toz { -webkit-mask-image: linear-gradient(180deg, #000 34%, transparent 46%); mask-image: linear-gradient(180deg, #000 34%, transparent 46%); } .panel__text h3 { font-size: 46px; margin-top: 14px; } .panel__text p { font-size: 16px; margin-top: 12px; } .panel__open { margin-top: 18px; } .panel__num { font-size: 52px; margin-right: 12px; } .phones img { width: 30vw; } .phones img:last-child { margin-top: 40px; } .panel--more { grid-template-columns: minmax(0, 1fr); align-content: start; align-items: start; row-gap: 14px; padding: var(--ust) var(--pad) 0; } .dahasi__tum { left: auto; right: var(--pad); transform: none; bottom: calc(var(--on) + var(--on-sup) + 5vh); font-size: 15px; } .dahasi__tum i { width: 38px; height: 38px; } .dahasi { width: 100%; } .panel--more .panel__text h3 { font-size: clamp(34px, 10vw, 46px); margin-top: 4px; } .panel--more .panel__text p { margin-top: 8px; font-size: 15px; } .path__line { grid-template-columns: 1fr; gap: 28px; padding-left: 30px; } .path__line::before, .path__line::after { left: 7px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; } .path__line::after { transform: scaleY(var(--d, 0)); transform-origin: top; } .step { padding-top: 0; } .step::before { left: -30px; } } @media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } *, *::before, *::after { animation: none !important; transition: none !important; } .name i { transform: none; font-stretch: 100%; } .lost__big i, .drawer__main a, .ptitle i { transform: none; } .scribble path { stroke-dashoffset: 0; } /* Kaydırma hesabı çalışmaz; sahne son hâliyle durağan: fotoğraf yerinde, cümle görünür. */ .stage { height: auto; --p1: 1; --p2: 1; } .name { transform: none; opacity: 1; } /* İki ekran alt alta: ilkinde isim ve cümle, ikincisinde fotoğraf ve etiketler. Aynı ekranda fotoğraf isme, iki cümle birbirine biniyordu. */ .intro { opacity: 1; transform: none; bottom: auto; top: 84vh; } .photo { top: 147vh; } .ayrac { top: calc(147vh + min(14.5vw, 22vh, 190px) + 3vh); } .chip { top: calc(100vh + var(--y) / 2); } .stage__pin { position: relative; height: 200vh; } .chip, .step { opacity: 1; transform: rotate(var(--r, 0)); } /* Yatay akış yerine sayfalar alt alta. */ .work { height: auto !important; } .work__pin { position: static; height: auto; overflow: visible; } .track { flex-direction: column; width: auto; transform: none !important; } .panel { height: auto; min-height: 100vh; } /* Salon hareket azaltmada yok: duvar rengi kalır, işler alt alta, lambalar yanık. */ .salon, .salon-kose { display: none; } .panel--more { background: var(--duvar); } .panel--more::after { display: none; } .panel[data-case], .panel--more { padding: 90px var(--pad); align-content: center; } .panel--intro { padding-bottom: 90px; } .tablo__cerceve { -webkit-box-reflect: unset; } .tablo::before { opacity: .55; } .karanlik .panel:not(.yandi) .tablo__cerceve::after { opacity: 0; } .hud { display: none; } } @media (prefers-reduced-motion: reduce) and (max-width: 900px) { .chip { top: calc(100vh + var(--my, var(--y)) / 2); } .photo { top: 147vh; } .ayrac { top: calc(147vh + 31vw + 3vh); } } /* ====================================================================== Şaşırtmacalar: dalga.js, harf.js, sir.js, yercekimi.js. Ayrıntı dosyalarında. ====================================================================== */ /* Yeni sayfanın ilk karesi dalganın son rengiyle başlar. Betik bozulursa 2,5 sn sonra kendiliğinden kalkar. */ html.dalga-bekle::after { content: ""; position: fixed; inset: 0; z-index: 2147483000; background: #7a1c1a; animation: dalga-kalk 0s linear 2.5s forwards; } @keyframes dalga-kalk { to { visibility: hidden; } } .dalga { position: fixed; inset: 0; z-index: 2147483001; width: 100%; height: 100%; pointer-events: none; } /* Canlı harfler: renk harfin yakınlığından (--f) gelir. */ .hf { --f: 0; display: inline-block; text-align: center; color: color-mix(in srgb, var(--hf-c, var(--hot)) calc(var(--f) * 100%), currentcolor); } .hf-k { display: inline-block; white-space: nowrap; } /* .ptitle span genel kuralı (blok, kesme, dolgu) harf kutularına işlemesin. */ .ptitle .hf, .ptitle .hf-k { display: inline-block; overflow: visible; padding: 0; margin: 0; } .name .last { --hf-c: var(--ink); } .top__mark.selam { animation: selam 1.1s var(--ease); } @keyframes selam { 20% { transform: rotate(-14deg) translateY(-2px); } 45% { transform: rotate(11deg); } 70% { transform: rotate(-6deg); } } /* Yerçekimi: kapsayıcılar düşen cismi kesmesin; sayfa bu sırada kaymaz. */ html.yercekimi { overflow: hidden !important; } html.yercekimi body *:not(svg, svg *, .masa__log) { overflow: visible !important; } .yc { transition: none !important; will-change: translate, rotate; position: relative; z-index: 800; } .yc-ipucu { position: fixed; left: 50%; top: 22px; z-index: 950; translate: -50% 0; margin: 0; padding: 9px 14px; border-radius: 8px; background: #0d1020; color: #fff; font-size: 13px; white-space: nowrap; pointer-events: none; } @media (max-width: 900px) { .yc-ipucu { white-space: normal; width: calc(100vw - 32px); text-align: center; } } @media (prefers-reduced-motion: reduce) { .top__mark.selam { animation: none; } } ::selection { background: var(--sun); color: var(--ink); } .gecen-roket { position: fixed; left: 0; top: 0; z-index: 850; width: 72px; height: 156px; margin: -78px 0 0 -36px; pointer-events: none; filter: drop-shadow(0 6px 14px rgba(18, 17, 16, .3)); } .gecen-roket__alev { transform-origin: 0 90px; animation: alev .14s linear infinite alternate; } @keyframes alev { to { transform: scaleY(.72); } } /* ---------- Yazdırınca CV: Ctrl+P sayfanın yerine bunu basar ---------------- */ .baski { display: none; } @media print { @page { size: A4; margin: 13mm 14mm; } html, html:has(body.fp), body, .fp { background: #fff !important; height: auto !important; overflow: visible !important; } html.dalga-bekle::after { display: none; } body > *:not(.baski) { display: none !important; } .baski { display: block; color: #121110; font: 400 9.6pt/1.38 "Inter", sans-serif; } .baski__bas { display: flex; justify-content: space-between; gap: 24px; align-items: flex-end; padding-bottom: 9pt; border-bottom: 2pt solid #ff4d1c; } body .baski h2 { margin: 0; font: 800 28pt/1 "Bricolage", sans-serif; font-stretch: 86%; letter-spacing: -0.03em; } .baski__bas p { margin: 4pt 0 0; } .baski .baski__ile { margin: 0; text-align: right; font: 500 8pt/1.4 "Mono", monospace; } .baski__ozet { margin: 9pt 0 0; font-size: 10.4pt; } body .baski h3 { margin: 12pt 0 5pt; font: 700 13pt/1.1 "Bricolage", sans-serif; font-stretch: 88%; color: #c8370f; break-after: avoid; } .baski ul { margin: 0; padding: 0; list-style: none; } .baski__yol li { display: grid; grid-template-columns: 94pt 1fr; gap: 8pt; padding: 1.6pt 0; break-inside: avoid; } .baski__yol span, .baski__is p span, .baski__kucuk span, .baski__kuc, .baski__bec dt, .baski__son { font: 500 7.8pt/1.4 "Mono", monospace; color: #55524c; } .baski__is { padding: 3pt 0; break-inside: avoid; } .baski__is p { margin: 0; } .baski__kucuk { columns: 2; column-gap: 18pt; } .baski__kucuk li { padding: 1.4pt 0; break-inside: avoid; } .baski__kucuk span { display: block; } .baski__bec { margin: 0; } .baski__bec div { display: grid; grid-template-columns: 94pt 1fr; gap: 8pt; padding: 1.6pt 0; break-inside: avoid; } .baski__bec dd { margin: 0; display: flex; flex-wrap: wrap; gap: 0 9pt; } .baski__son { margin: 10pt 0 0; } }