/* ===================================================================== STORY ROAD™ — SECTION VIII · INSTITUTIONAL VALIDATION section-08.css Bu dosya YALNIZCA yeni sınıflar tanımlar. Hiçbir global kural, token, tipografi, renk veya boşluk sistemi değiştirilmez. Mevcut değişkenler (--bone, --sand, --dust, --dawn, --hairline, --font-display, --font-body, --gutter, --ease-lux, --t-body, --t-meta, --t-micro) olduğu gibi kullanılır. Yerleşim: içinde animations.css'ten SONRA. ===================================================================== */ /* ── Ortak bölüm etiketi ───────────────────────────────────────────── */ .vsection-label{ margin-bottom:clamp(28px,3.8vh,46px); font-size:var(--t-micro); font-weight:500; letter-spacing:.32em; text-transform:uppercase; color:var(--dust); } /* ═══ BLOK 2 — KURUMSAL KRONOLOJİ ═══════════════════════════════════ */ .validation__chronology{margin-top:clamp(56px,7.4vh,110px)} .chron{border-top:1px solid var(--hairline)} .chron__step{ /* Ray konumu piksel cinsinden bilinsin diye tarih sütunu sabit genişliktir */ --date-col:clamp(72px,9vw,152px); --chron-gap:clamp(20px,2.6vw,46px); position:relative; display:grid; grid-template-columns:var(--date-col) 1px minmax(0,1fr); gap:var(--chron-gap); align-items:start; padding:clamp(22px,3vh,38px) 0; border-bottom:1px solid var(--hairline); } /* Kesintisiz dikey ray — adımlar arasında hiç kırılmaz */ .chron__step::before{ content:""; position:absolute; top:0;bottom:0; left:calc(var(--date-col) + var(--chron-gap)); width:1px; background:var(--hairline); } .chron__step:first-child::before{top:clamp(22px,3vh,38px)} .chron__step:last-child::before{bottom:auto;height:clamp(30px,4vh,48px)} .chron__date{ font-family:var(--font-display); font-size:clamp(14px,1.12vw,19px); line-height:1.5; letter-spacing:.01em; color:var(--dust); font-variant-numeric:tabular-nums lining-nums; text-align:right; } .chron__date span{display:block;color:var(--sand)} .chron__node{ position:relative; z-index:1; display:block; width:1px;height:1px; margin-top:.72em; } .chron__node::after{ content:""; position:absolute; left:-2.5px;top:-2.5px; width:6px;height:6px; border-radius:50%; background:var(--obsidian); box-shadow:inset 0 0 0 1px rgba(244,239,230,.34); } .chron__stage{ font-family:var(--font-display); font-weight:400; font-size:clamp(21px,2.15vw,38px); line-height:1.1; letter-spacing:-.024em; color:var(--sand); } .chron__note{ margin-top:clamp(9px,1.2vh,14px); max-width:54ch; font-size:var(--t-body); line-height:1.78; color:var(--dust); } /* Tarihli kayıtlar ve ufuk — ölçekle değil, tonla ayrışır */ .chron__step--record .chron__stage, .chron__step--horizon .chron__stage{color:var(--bone)} .chron__step--record .chron__date span, .chron__step--horizon .chron__date span{color:var(--bone)} .chron__step--record .chron__node::after, .chron__step--horizon .chron__node::after{ background:var(--dawn); box-shadow:none; } .chron__step--horizon .chron__stage{font-size:clamp(24px,2.6vw,46px)} .validation__chronology .footnote{margin-top:clamp(22px,2.8vh,32px)} /* ═══ BLOK 3 — KANIT SAYILARI ═══════════════════════════════════════ */ .validation__evidence{margin-top:clamp(88px,12vh,180px)} /* Kılcal ızgara: boşluklar hairline, hücreler obsidiyen — kart yok */ .vproof{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1px; background:var(--hairline); border-block:1px solid var(--hairline); } .vproof__cell{ display:grid; align-content:end; gap:clamp(12px,1.6vh,20px); min-height:clamp(190px,26vh,280px); padding:clamp(24px,3.4vh,46px) clamp(14px,1.4vw,30px) clamp(22px,3vh,38px); background:var(--obsidian); } /* Rakam uzunluğuna göre ölçek — hiçbir sayı hücresinden taşmaz */ .vproof dt{ font-family:var(--font-display); font-weight:400; font-size:clamp(40px,4.8vw,92px); line-height:.94; letter-spacing:-.038em; color:var(--bone); font-variant-numeric:tabular-nums lining-nums; white-space:nowrap; } .vproof dt.is-mid { font-size:clamp(30px,3.2vw,60px); letter-spacing:-.032em } .vproof dt.is-long{ font-size:clamp(24px,2.5vw,46px); letter-spacing:-.028em } .vproof dt.is-date{ font-size:clamp(22px,2.3vw,42px); letter-spacing:-.024em } .vproof dd{ font-size:var(--t-micro); line-height:1.7; letter-spacing:.24em; text-transform:uppercase; color:var(--dust); } .validation__evidence .footnote{margin-top:clamp(20px,2.6vh,30px)} /* ═══ BLOK 4 — TAM EKRAN BEYAN ══════════════════════════════════════ */ .validation__band{ margin-top:clamp(96px,13vh,190px); min-height:60vh; display:grid; place-items:center; padding:clamp(80px,11vh,150px) var(--gutter); background:#060505; border-block:1px solid var(--hairline); } .validation__band-line{ max-width:24ch; text-align:center; font-family:var(--font-display); font-weight:400; font-size:clamp(27px,3.9vw,70px); line-height:1.22; letter-spacing:-.03em; color:var(--bone); } /* ═══ BLOK 5 — KURUMSAL GÜVEN ═══════════════════════════════════════ */ .validation__confidence{margin-top:clamp(96px,13vh,190px)} .confidence{ display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); gap:clamp(40px,5.4vw,110px); align-items:start; } .confidence__text p{ max-width:44ch; font-size:var(--t-body); line-height:1.9; color:var(--sand); } .confidence__text p + p{ margin-top:clamp(20px,2.6vh,30px); color:var(--dust); } /* Resmî kayıt — kart değil, defter */ .vregister__label{ padding-bottom:clamp(12px,1.6vh,17px); font-size:var(--t-micro); font-weight:500; letter-spacing:.3em; text-transform:uppercase; color:var(--dawn); } .vregister__label--second{ margin-top:clamp(34px,4.4vh,56px); color:var(--dust); } .vregister{border-top:1px solid var(--hairline)} .vregister__row{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:20px; align-items:baseline; padding:clamp(13px,1.8vh,19px) 0; border-bottom:1px solid var(--hairline); } .vregister dt{ font-size:var(--t-meta); letter-spacing:.2em; text-transform:uppercase; color:var(--dust); } .vregister dd{ font-size:var(--t-body); letter-spacing:.01em; color:var(--bone); text-align:right; font-variant-numeric:tabular-nums lining-nums; } .confidence__register .footnote{margin-top:clamp(18px,2.4vh,26px)} /* ═══ BLOK 6 — KONSEPT ÇALIŞMASI NOTU ══════════════════════════════ */ .validation__note{ margin-top:clamp(80px,10.5vh,160px); padding-top:clamp(26px,3.4vh,40px); border-top:1px solid var(--hairline); } .vnote__title{ margin-bottom:clamp(18px,2.4vh,26px); font-size:var(--t-micro); font-weight:500; letter-spacing:.32em; text-transform:uppercase; color:var(--dust); } .vnote__body{ max-width:62ch; font-family:var(--font-display); font-weight:400; font-size:clamp(19px,1.85vw,30px); line-height:1.46; letter-spacing:-.018em; color:var(--bone); } .vnote__body sup{font-size:.32em;vertical-align:super;color:var(--sand)} .vnote__body--muted{ margin-top:clamp(18px,2.4vh,28px); font-family:var(--font-body); font-size:var(--t-body); line-height:1.85; letter-spacing:0; color:var(--dust); } /* ═══ BLOK 7 — KAPANIŞ ══════════════════════════════════════════════ */ .validation__closing{ margin-top:clamp(104px,14vh,210px); min-height:52vh; display:grid; place-items:center; padding:clamp(70px,10vh,140px) var(--gutter); } .validation__closing-line{ max-width:18ch; text-align:center; font-family:var(--font-display); font-weight:400; font-size:clamp(32px,5.2vw,104px); line-height:1.1; letter-spacing:-.04em; color:var(--bone); } /* ===================================================================== RESPONSIVE ===================================================================== */ /* ── ≤ 1024px ──────────────────────────────────────────────────────── */ @media (max-width:1024px){ .vproof{grid-template-columns:repeat(2, minmax(0,1fr))} .vproof__cell{min-height:clamp(160px,22vh,220px)} .confidence{grid-template-columns:1fr;gap:clamp(40px,6vh,64px)} .confidence__text p{max-width:60ch} } /* ── ≤ 768px ───────────────────────────────────────────────────────── */ @media (max-width:768px){ .validation__band{min-height:50vh} .validation__band-line{max-width:22ch} .validation__closing{min-height:44vh} .chron__step{ --date-col:clamp(66px,11vw,110px); --chron-gap:clamp(16px,2.6vw,28px); } } /* ── ≤ 640px — kronoloji tek sütuna iner ───────────────────────────── */ @media (max-width:640px){ .validation__chronology{margin-top:44px} .chron__step{ --date-col:0px; --chron-gap:20px; grid-template-columns:1px minmax(0,1fr); gap:20px; padding:20px 0; } .chron__step::before{left:0} .chron__date{ grid-column:2; grid-row:1; order:-1; text-align:left; font-size:12px; letter-spacing:.16em; text-transform:uppercase; margin-bottom:8px; } .chron__date span{display:inline;margin-right:.4em} .chron__node{grid-column:1;grid-row:1 / span 2;margin-top:.55em} .chron__body{grid-column:2;grid-row:2} .chron__stage{font-size:clamp(21px,5.8vw,29px)} .chron__note{font-size:14px;line-height:1.72} .vproof{grid-template-columns:1fr} .vproof__cell{ min-height:0; gap:9px; padding:20px 0; } .vproof dt{font-size:clamp(40px,12vw,60px)} .vproof dt.is-mid {font-size:clamp(36px,10.5vw,54px)} .vproof dt.is-long{font-size:clamp(32px,9.4vw,48px)} .vproof dt.is-date{font-size:clamp(28px,8.2vw,42px)} .vproof dd{letter-spacing:.2em} .validation__band-line{font-size:clamp(23px,6.6vw,34px);max-width:20ch} .vregister__row{ grid-template-columns:1fr; gap:6px; padding:12px 0; } .vregister dd{text-align:left} .vnote__body{font-size:clamp(18px,5vw,24px)} .validation__closing-line{font-size:clamp(28px,8.4vw,44px);max-width:14ch} } /* ── ≤ 380px ───────────────────────────────────────────────────────── */ @media (max-width:380px){ .vproof dt{font-size:clamp(34px,10.4vw,46px)} .vproof dt.is-long{font-size:clamp(28px,8.6vw,38px)} .validation__closing-line{font-size:clamp(26px,8vw,36px)} } /* ===================================================================== ERİŞİLEBİLİRLİK — hareket azaltma (mevcut .r motoru animations.css'te zaten kapatılır; burada yalnızca bu bölüme özgü hiçbir ek hareket olmadığı teyit edilir.) ===================================================================== */ @media (prefers-reduced-motion:reduce){ .validation__band-line, .validation__closing-line{transition:none} } /* ===================================================================== STORY ROAD™ — SECTION IX · DECISION ARCHITECTURE section-09.css Yalnızca yeni sınıflar. Hiçbir global kural, token, tipografi, renk, boşluk veya responsive davranış değiştirilmez. Mevcut değişkenler olduğu gibi kullanılır: --bone --sand --dust --dawn --hairline --hairline-hi --font-display --font-body --gutter --t-body --t-meta --t-micro --ease-lux Yerleşim: içinde section-08.css'ten SONRA. ===================================================================== */ /* ── Bölüm ritmi ───────────────────────────────────────────────────── */ .dx-block{margin-top:clamp(104px,14vh,210px)} .dx-block:first-of-type{margin-top:0} .dx-label{ margin-bottom:clamp(30px,4.2vh,52px); font-size:var(--t-micro); font-weight:500; letter-spacing:.32em; text-transform:uppercase; color:var(--dust); } /* Ortak anlatı ölçeği */ .dx-lead{ max-width:22ch; font-family:var(--font-display); font-weight:400; font-size:clamp(27px,3.5vw,64px); line-height:1.14; letter-spacing:-.03em; color:var(--bone); } .dx-prose{ margin-top:clamp(40px,5.4vh,82px); display:grid; gap:clamp(20px,2.6vh,30px); max-width:52ch; } .dx-prose p{ font-size:var(--t-body); line-height:1.9; color:var(--sand); } .dx-prose p + p{color:var(--dust)} /* ═══ BLOK 1 — MANİFESTO ════════════════════════════════════════════ */ .dx-manifesto{ min-height:94vh; display:grid; place-items:center; padding:clamp(90px,13vh,180px) var(--gutter); } .dx-manifesto__line{ max-width:20ch; text-align:center; font-family:var(--font-display); font-weight:400; font-size:clamp(30px,5.1vw,104px); line-height:1.12; letter-spacing:-.038em; color:var(--bone); } .dx-manifesto__line sup{ font-size:.24em; vertical-align:super; letter-spacing:0; color:var(--sand); } /* ═══ BLOK 3 — DİPTİK ═══════════════════════════════════════════════ */ .dx-diptych{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); } .dx-diptych__side{ padding:clamp(40px,6vh,86px) clamp(24px,3.4vw,72px) clamp(40px,6vh,86px) 0; } .dx-diptych__side + .dx-diptych__side{ padding-right:0; padding-left:clamp(24px,3.4vw,72px); border-left:1px solid var(--hairline); } .dx-diptych__side p{ font-family:var(--font-display); font-weight:400; font-size:clamp(22px,2.5vw,44px); line-height:1.2; letter-spacing:-.026em; color:var(--dust); } .dx-diptych__side--major p{ font-size:clamp(26px,3.1vw,56px); letter-spacing:-.032em; color:var(--bone); } .dx-aside{ margin-top:clamp(36px,5vh,66px); margin-left:auto; max-width:42ch; text-align:right; font-size:var(--t-body); line-height:1.85; color:var(--sand); } /* ═══ BLOK 5 — GELECEK ══════════════════════════════════════════════ */ .dx-horizon{border-top:1px solid var(--hairline)} .dx-horizon__row{ display:grid; grid-template-columns:minmax(0,.32fr) minmax(0,1fr); gap:clamp(26px,4vw,84px); align-items:baseline; padding:clamp(26px,3.6vh,48px) 0; border-bottom:1px solid var(--hairline); } .dx-year{ font-family:var(--font-display); font-weight:400; font-size:clamp(40px,5.2vw,108px); line-height:.92; letter-spacing:-.04em; color:var(--dust); font-variant-numeric:tabular-nums lining-nums; white-space:nowrap; } .dx-year-note{ max-width:46ch; font-size:var(--t-body); line-height:1.8; color:var(--dust); } .dx-horizon__row--end .dx-year{color:var(--bone)} .dx-horizon__row--end .dx-year-note{color:var(--sand)} .dx-block--horizon .footnote{margin-top:clamp(22px,2.8vh,32px)} /* ═══ BLOK 7 — SESSİZ SORU ══════════════════════════════════════════ */ .dx-question{ margin-top:clamp(104px,14vh,210px); min-height:58vh; display:grid; place-items:center; padding:clamp(80px,11vh,150px) var(--gutter); background:#060505; border-block:1px solid var(--hairline); } .dx-question__line{ max-width:26ch; text-align:center; font-family:var(--font-display); font-weight:400; font-size:clamp(24px,3.4vw,60px); line-height:1.26; letter-spacing:-.03em; color:var(--sand); } /* ═══ BLOK 8 — KAPANIŞ ══════════════════════════════════════════════ */ .dx-closing{ min-height:78vh; display:grid; place-items:center; padding:clamp(90px,13vh,180px) var(--gutter); } .dx-closing__line{ max-width:20ch; text-align:center; font-family:var(--font-display); font-weight:400; font-size:clamp(30px,4.8vw,96px); line-height:1.14; letter-spacing:-.038em; color:var(--bone); } /* ===================================================================== RESPONSIVE — mevcut kırılım noktalarıyla birebir aynı mantık ===================================================================== */ /* ── ≤ 1024px ──────────────────────────────────────────────────────── */ @media (max-width:1024px){ .dx-lead{max-width:26ch} .dx-prose{max-width:58ch} .dx-horizon__row{grid-template-columns:minmax(0,.38fr) minmax(0,1fr)} } /* ── ≤ 768px ───────────────────────────────────────────────────────── */ @media (max-width:768px){ .dx-manifesto{min-height:84vh} .dx-closing{min-height:66vh} .dx-question{min-height:48vh} .dx-diptych{grid-template-columns:1fr} .dx-diptych__side{padding:clamp(30px,4.6vh,50px) 0} .dx-diptych__side + .dx-diptych__side{ padding-left:0; border-left:0; border-top:1px solid var(--hairline); } .dx-aside{text-align:left;margin-left:0} } /* ── ≤ 640px — telefon ─────────────────────────────────────────────── */ @media (max-width:640px){ .dx-block{margin-top:clamp(72px,10vh,120px)} .dx-label{margin-bottom:24px} .dx-manifesto__line{font-size:clamp(26px,7.4vw,40px);max-width:17ch} .dx-lead{font-size:clamp(24px,6.6vw,34px);max-width:20ch} .dx-prose{margin-top:30px;gap:16px} .dx-prose p{font-size:14px;line-height:1.85} .dx-diptych__side p{font-size:clamp(21px,5.8vw,28px)} .dx-diptych__side--major p{font-size:clamp(24px,6.6vw,32px)} .dx-aside{font-size:14px;line-height:1.8} .dx-horizon__row{ grid-template-columns:1fr; gap:10px; padding:20px 0; } .dx-year{font-size:clamp(38px,11vw,56px)} .dx-year-note{font-size:14px;line-height:1.75} .dx-question{margin-top:clamp(72px,10vh,120px)} .dx-question__line{font-size:clamp(21px,5.8vw,30px);max-width:24ch} .dx-closing__line{font-size:clamp(26px,7.4vw,40px);max-width:17ch} } /* ── ≤ 380px ───────────────────────────────────────────────────────── */ @media (max-width:380px){ .dx-manifesto__line{font-size:clamp(24px,7vw,32px)} .dx-closing__line{font-size:clamp(24px,7vw,32px)} .dx-year{font-size:clamp(34px,10.4vw,46px)} } /* ===================================================================== ERİŞİLEBİLİRLİK — bu bölüme özgü ek hareket yoktur. Görünürlük, mevcut .r motoru ve animations.css tarafından yönetilir; JavaScript çalışmazsa tüm içerik görünür kalır. ===================================================================== */ @media (prefers-reduced-motion:reduce){ .dx-manifesto__line, .dx-question__line, .dx-closing__line{transition:none} } /* ===================================================================== STORY ROAD™ — SECTION X · THE MOMENT OF DECISION section-10.css Yalnızca yeni sınıflar. Hiçbir global kural, token, tipografi, renk, boşluk veya responsive davranış değiştirilmez. Mevcut değişkenler olduğu gibi kullanılır: --bone --sand --dust --dawn --hairline --hairline-hi --font-display --font-body --gutter --t-body --t-meta --t-micro Yerleşim: içinde section-09.css'ten SONRA. ===================================================================== */ /* ── Bölüm ritmi — kasıtlı olarak yavaş ────────────────────────────── */ .mx-block{margin-top:clamp(112px,15vh,230px)} .mx-label{ margin-bottom:clamp(30px,4.2vh,52px); font-size:var(--t-micro); font-weight:500; letter-spacing:.32em; text-transform:uppercase; color:var(--dust); } .mx-lead{ max-width:24ch; font-family:var(--font-display); font-weight:400; font-size:clamp(26px,3.4vw,62px); line-height:1.16; letter-spacing:-.03em; color:var(--bone); } .mx-prose{ margin-top:clamp(40px,5.4vh,82px); display:grid; gap:clamp(20px,2.6vh,30px); max-width:50ch; } .mx-prose p{ font-size:var(--t-body); line-height:1.9; color:var(--sand); } .mx-prose p + p{color:var(--dust)} /* Ritim değişimi: tek blok sağa hizalanır — sayfa hızlanmaz, salınır */ .mx-block--right{text-align:right} .mx-block--right .mx-lead, .mx-block--right .mx-prose{margin-left:auto} .mx-block--right .mx-prose{justify-items:end} /* ═══ BLOK 1 — MANİFESTO ════════════════════════════════════════════ */ .mx-manifesto{ min-height:94vh; display:grid; place-items:center; padding:clamp(90px,13vh,180px) var(--gutter); } .mx-manifesto__line{ max-width:22ch; text-align:center; font-family:var(--font-display); font-weight:400; font-size:clamp(29px,4.9vw,100px); line-height:1.14; letter-spacing:-.038em; color:var(--bone); } /* ═══ BLOK 4 — ™ ═══════════════════════════════════════════════════ */ .mx-lead sup{ font-size:.26em; vertical-align:super; letter-spacing:0; color:var(--sand); } /* ═══ BLOK 5 — ÜÇ OKUNUŞ ═══════════════════════════════════════════ */ .mx-reading{border-top:1px solid var(--hairline)} .mx-reading__row{ display:grid; grid-template-columns:minmax(0,.36fr) minmax(0,1fr); gap:clamp(26px,4vw,84px); align-items:baseline; padding:clamp(24px,3.4vh,44px) 0; border-bottom:1px solid var(--hairline); } .mx-reading dt{ font-size:var(--t-meta); letter-spacing:.24em; text-transform:uppercase; color:var(--dust); } .mx-reading dd{ font-family:var(--font-display); font-weight:400; font-size:clamp(24px,2.9vw,52px); line-height:1.14; letter-spacing:-.028em; color:var(--sand); } .mx-reading__row--end dd{color:var(--bone)} .mx-note{ margin-top:clamp(26px,3.4vh,42px); max-width:44ch; font-size:var(--t-body); line-height:1.85; color:var(--dust); } /* ═══ BLOK 6 — DÖNÜŞ ═══════════════════════════════════════════════ */ .mx-pivot{ margin-top:clamp(112px,15vh,230px); min-height:62vh; display:grid; place-items:center; padding:clamp(80px,11vh,150px) var(--gutter); background:#060505; border-block:1px solid var(--hairline); } .mx-pivot__line{ max-width:24ch; text-align:center; font-family:var(--font-display); font-weight:400; font-size:clamp(26px,3.6vw,66px); line-height:1.24; letter-spacing:-.032em; color:var(--bone); } /* ═══ BLOK 7 — KAPANIŞ ═════════════════════════════════════════════ */ .mx-closing{ min-height:82vh; display:grid; place-items:center; padding:clamp(90px,13vh,180px) var(--gutter); } .mx-closing__line{ max-width:22ch; text-align:center; font-family:var(--font-display); font-weight:400; font-size:clamp(28px,4.5vw,92px); line-height:1.16; letter-spacing:-.038em; color:var(--bone); } /* ===================================================================== RESPONSIVE — mevcut kırılım noktalarıyla birebir aynı mantık ===================================================================== */ /* ── ≤ 1024px ──────────────────────────────────────────────────────── */ @media (max-width:1024px){ .mx-lead{max-width:28ch} .mx-prose{max-width:56ch} .mx-reading__row{grid-template-columns:minmax(0,.42fr) minmax(0,1fr)} } /* ── ≤ 768px ───────────────────────────────────────────────────────── */ @media (max-width:768px){ .mx-manifesto{min-height:84vh} .mx-pivot{min-height:52vh} .mx-closing{min-height:68vh} /* Sağ hizalı blok mobilde sola döner — okuma ritmi bozulmasın */ .mx-block--right{text-align:left} .mx-block--right .mx-lead, .mx-block--right .mx-prose{margin-left:0} .mx-block--right .mx-prose{justify-items:start} } /* ── ≤ 640px — telefon ─────────────────────────────────────────────── */ @media (max-width:640px){ .mx-block{margin-top:clamp(76px,10.5vh,126px)} .mx-label{margin-bottom:24px} .mx-manifesto__line{font-size:clamp(25px,7.2vw,38px);max-width:19ch} .mx-lead{font-size:clamp(23px,6.4vw,33px);max-width:22ch} .mx-prose{margin-top:30px;gap:16px} .mx-prose p{font-size:14px;line-height:1.85} .mx-reading__row{ grid-template-columns:1fr; gap:9px; padding:18px 0; } .mx-reading dd{font-size:clamp(22px,6.2vw,30px)} .mx-note{font-size:14px;line-height:1.8} .mx-pivot{margin-top:clamp(76px,10.5vh,126px)} .mx-pivot__line{font-size:clamp(22px,6vw,32px);max-width:22ch} .mx-closing__line{font-size:clamp(25px,7.2vw,38px);max-width:19ch} } /* ── ≤ 380px ───────────────────────────────────────────────────────── */ @media (max-width:380px){ .mx-manifesto__line{font-size:clamp(23px,6.8vw,30px)} .mx-closing__line{font-size:clamp(23px,6.8vw,30px)} .mx-reading dd{font-size:clamp(20px,5.8vw,26px)} } /* ===================================================================== ERİŞİLEBİLİRLİK — bu bölüme özgü ek hareket yoktur. Görünürlük mevcut .r motoru ve animations.css tarafından yönetilir; JavaScript çalışmazsa tüm içerik görünür kalır. ===================================================================== */ @media (prefers-reduced-motion:reduce){ .mx-manifesto__line, .mx-pivot__line, .mx-closing__line{transition:none} } /* ===================================================================== STORY ROAD™ — SECTION XI · THE FUTURE EXPERIENCE section-11.css Yalnızca yeni sınıflar. Hiçbir global kural, token, tipografi, renk, boşluk veya responsive davranış değiştirilmez. Mevcut değişkenler olduğu gibi kullanılır: --bone --sand --dust --hairline --font-display --font-body --gutter --t-body --t-micro Yerleşim: içinde section-10.css'ten SONRA. ===================================================================== */ /* ── Ritim — keynote temposu, blok başına tek nefes ────────────────── */ .fx-block{margin-top:clamp(120px,17vh,260px)} .fx-block--first{margin-top:0} .fx-label{ margin-bottom:clamp(30px,4.2vh,54px); font-size:var(--t-micro); font-weight:500; letter-spacing:.34em; text-transform:uppercase; color:var(--dust); } .fx-head{ max-width:20ch; font-family:var(--font-display); font-weight:400; font-size:clamp(28px,3.8vw,74px); line-height:1.12; letter-spacing:-.034em; color:var(--bone); } .fx-head sup{ font-size:.24em; vertical-align:super; letter-spacing:0; color:var(--sand); } .fx-body{ margin-top:clamp(34px,4.6vh,64px); max-width:36ch; font-size:var(--t-body); line-height:1.9; color:var(--sand); } /* Salınım — iki blok sağa hizalanır, sayfa hızlanmaz */ .fx-block--right{text-align:right} .fx-block--right .fx-head, .fx-block--right .fx-body{margin-left:auto} /* ═══ BLOK 4 — BANT MANİFESTO ═══════════════════════════════════════ */ .fx-band{ margin-top:clamp(120px,17vh,260px); min-height:66vh; display:grid; place-items:center; padding:clamp(84px,12vh,160px) var(--gutter); background:#060505; border-block:1px solid var(--hairline); } .fx-band__line{ max-width:18ch; text-align:center; font-family:var(--font-display); font-weight:400; font-size:clamp(28px,4.4vw,86px); line-height:1.14; letter-spacing:-.036em; color:var(--bone); } /* ═══ BLOK 7 — AÇIK MANİFESTO ═══════════════════════════════════════ */ .fx-manifesto{ margin-top:clamp(120px,17vh,260px); min-height:88vh; display:grid; place-items:center; padding:clamp(90px,13vh,180px) var(--gutter); } .fx-manifesto__line{ max-width:19ch; text-align:center; font-family:var(--font-display); font-weight:400; font-size:clamp(29px,4.6vw,92px); line-height:1.14; letter-spacing:-.038em; color:var(--bone); } /* ═══ BLOK 10 — FİNAL ═══════════════════════════════════════════════ */ .fx-final{ margin-top:clamp(130px,18vh,280px); min-height:96vh; display:grid; place-items:center; padding:clamp(96px,14vh,200px) var(--gutter); } .fx-final__line{ max-width:20ch; text-align:center; font-family:var(--font-display); font-weight:400; font-size:clamp(30px,4.9vw,100px); line-height:1.16; letter-spacing:-.04em; color:var(--bone); } /* ===================================================================== RESPONSIVE — mevcut kırılım noktalarıyla birebir aynı mantık ===================================================================== */ /* ── ≤ 1024px ──────────────────────────────────────────────────────── */ @media (max-width:1024px){ .fx-head{max-width:22ch} .fx-body{max-width:40ch} } /* ── ≤ 768px ───────────────────────────────────────────────────────── */ @media (max-width:768px){ .fx-band{min-height:54vh} .fx-manifesto{min-height:74vh} .fx-final{min-height:80vh} /* Sağ hizalı bloklar mobilde sola döner — okuma ritmi bozulmasın */ .fx-block--right{text-align:left} .fx-block--right .fx-head, .fx-block--right .fx-body{margin-left:0} } /* ── ≤ 640px — telefon ─────────────────────────────────────────────── */ @media (max-width:640px){ .fx-block{margin-top:clamp(82px,11.5vh,140px)} .fx-label{margin-bottom:24px} .fx-head{font-size:clamp(25px,7vw,36px);max-width:19ch;line-height:1.16} .fx-body{margin-top:26px;font-size:14px;line-height:1.85;max-width:32ch} .fx-band{margin-top:clamp(82px,11.5vh,140px)} .fx-band__line{font-size:clamp(25px,7vw,36px);max-width:16ch} .fx-manifesto{margin-top:clamp(82px,11.5vh,140px)} .fx-manifesto__line{font-size:clamp(26px,7.2vw,38px);max-width:17ch} .fx-final{margin-top:clamp(92px,12.5vh,150px)} .fx-final__line{font-size:clamp(26px,7.4vw,40px);max-width:18ch} } /* ── ≤ 380px ───────────────────────────────────────────────────────── */ @media (max-width:380px){ .fx-head{font-size:clamp(23px,6.6vw,30px)} .fx-band__line{font-size:clamp(23px,6.6vw,30px)} .fx-manifesto__line{font-size:clamp(24px,6.8vw,32px)} .fx-final__line{font-size:clamp(24px,6.8vw,32px)} } /* ===================================================================== ERİŞİLEBİLİRLİK — bu bölüme özgü ek hareket yoktur. Görünürlük mevcut .r motoru ve animations.css tarafından yönetilir; JavaScript çalışmazsa tüm içerik görünür kalır. ===================================================================== */ @media (prefers-reduced-motion:reduce){ .fx-band__line, .fx-manifesto__line, .fx-final__line{transition:none} } /* ===================================================================== STORY ROAD™ — SECTION XII · LEGACY 2053 section-12.css Yalnızca yeni sınıflar. Hiçbir global kural, token, tipografi, renk, boşluk veya responsive davranış değiştirilmez. Mevcut değişkenler olduğu gibi kullanılır: --obsidian --bone --sand --dust --hairline --font-display --gutter --t-body --t-micro Yerleşim: içinde section-11.css'ten SONRA. ===================================================================== */ /* ── AÇILIŞ ────────────────────────────────────────────────────────── */ .lg-label{ margin-bottom:clamp(30px,4.2vh,54px); font-size:var(--t-micro); font-weight:500; letter-spacing:.34em; text-transform:uppercase; color:var(--dust); } .lg-lead{ max-width:18ch; font-family:var(--font-display); font-weight:400; font-size:clamp(28px,3.9vw,76px); line-height:1.12; letter-spacing:-.034em; color:var(--bone); } /* ── ZAMAN AKIŞI ─────────────────────────────────────────────────── Tek kesintisiz kılcal dikey ray; yıllar rayın üzerine oturur ve zemin rengiyle rayı böler. Kart, kutu, gölge, ikon yoktur. */ .lg-flow{ position:relative; margin-top:clamp(96px,13vh,190px); padding-inline:var(--gutter); } .lg-flow::before{ content:""; position:absolute; top:0;bottom:0;left:50%; width:1px; margin-left:-.5px; background:var(--hairline); } .lg-station{ position:relative; z-index:1; min-height:clamp(230px,33vh,380px); display:grid; align-content:center; justify-items:center; text-align:center; gap:clamp(14px,2vh,24px); } .lg-year{ padding-block:clamp(8px,1.2vh,14px); background:var(--obsidian); /* rayı böler */ font-family:var(--font-display); font-weight:400; font-size:clamp(42px,5.6vw,116px); line-height:.92; letter-spacing:-.042em; color:var(--dust); font-variant-numeric:tabular-nums lining-nums; transition:color .6s var(--ease-lux); } .lg-line{ padding-inline:clamp(14px,2vw,28px); background:var(--obsidian); max-width:34ch; font-size:var(--t-body); line-height:1.8; color:var(--dust); } /* Zaman ilerledikçe ton açılır — üç kademe, üç mevcut token */ .lg-station--mid .lg-year{color:var(--sand)} .lg-station--mid .lg-line{color:var(--sand)} .lg-station--end{min-height:clamp(280px,40vh,460px)} .lg-station--end .lg-year{ font-size:clamp(52px,7vw,150px); letter-spacing:-.046em; color:var(--bone); } .lg-station--end .lg-line{color:var(--bone)} /* ── FİNAL ─────────────────────────────────────────────────────────── */ .lg-final{ margin-top:clamp(110px,15vh,230px); min-height:96vh; display:grid; align-content:center; justify-items:center; gap:clamp(40px,5.6vh,84px); padding:clamp(96px,14vh,200px) var(--gutter); } .lg-final__line{ max-width:16ch; text-align:center; font-family:var(--font-display); font-weight:400; font-size:clamp(32px,5.4vw,116px); line-height:1.1; letter-spacing:-.042em; color:var(--bone); } .lg-final__rule{ display:block; width:56px;height:1px; background:var(--hairline); } .lg-final__coda{ font-family:var(--font-display); font-size:clamp(15px,1.25vw,21px); letter-spacing:.24em; color:var(--dust); font-variant-numeric:tabular-nums lining-nums; } /* ===================================================================== RESPONSIVE — mevcut kırılım noktalarıyla birebir aynı mantık ===================================================================== */ /* ── ≤ 1024px ──────────────────────────────────────────────────────── */ @media (max-width:1024px){ .lg-lead{max-width:20ch} .lg-line{max-width:32ch} } /* ── ≤ 768px ───────────────────────────────────────────────────────── */ @media (max-width:768px){ .lg-station{min-height:clamp(200px,28vh,280px)} .lg-station--end{min-height:clamp(240px,34vh,330px)} .lg-final{min-height:82vh} } /* ── ≤ 640px — telefon ─────────────────────────────────────────────── */ @media (max-width:640px){ .lg-label{margin-bottom:24px} .lg-lead{font-size:clamp(26px,7.2vw,38px);max-width:17ch} .lg-flow{margin-top:clamp(70px,10vh,110px)} .lg-station{min-height:190px;gap:12px} .lg-station--end{min-height:230px} .lg-year{font-size:clamp(40px,12.5vw,62px)} .lg-station--end .lg-year{font-size:clamp(48px,15vw,76px)} .lg-line{font-size:14px;line-height:1.75;max-width:28ch} .lg-final{ margin-top:clamp(80px,11vh,130px); min-height:76vh; gap:32px; } .lg-final__line{font-size:clamp(29px,8.4vw,46px);max-width:14ch} .lg-final__rule{width:44px} } /* ── ≤ 380px ───────────────────────────────────────────────────────── */ @media (max-width:380px){ .lg-year{font-size:clamp(36px,11.5vw,48px)} .lg-station--end .lg-year{font-size:clamp(42px,13.5vw,58px)} .lg-final__line{font-size:clamp(26px,7.8vw,36px)} } /* ===================================================================== ERİŞİLEBİLİRLİK — bu bölüme özgü ek hareket yoktur. Görünürlük mevcut .r motoru ve animations.css tarafından yönetilir; JavaScript çalışmazsa tüm içerik görünür kalır. ===================================================================== */ @media (prefers-reduced-motion:reduce){ .lg-year{transition:none} } /* ===================================================================== STORY ROAD™ — SECTION XIII · THE PRIVATE INVITATION section-13.css · FINAL LOCK Yalnızca yeni sınıflar. Hiçbir global kural, token, tipografi, renk, grid, boşluk veya responsive davranış değiştirilmez. Mevcut değişkenler olduğu gibi kullanılır: --obsidian --bone --sand --dust --dawn --hairline --font-display --font-body --gutter --t-body --t-meta --t-micro Yerleşim: içinde section-12.css'ten SONRA. ===================================================================== */ /* ── Ortak etiket ──────────────────────────────────────────────────── */ .pi-label{ margin-bottom:clamp(30px,4.2vh,54px); font-size:var(--t-micro); font-weight:500; letter-spacing:.34em; text-transform:uppercase; color:var(--dust); } /* ═══ BLOK 1 ═══════════════════════════════════════════════════════ */ .pi-open__line{ max-width:34ch; font-family:var(--font-display); font-weight:400; font-size:clamp(23px,2.6vw,46px); line-height:1.28; letter-spacing:-.026em; color:var(--sand); } /* ═══ BLOK 2 ═══════════════════════════════════════════════════════ */ .pi-statement{ margin-top:clamp(96px,13vh,190px); min-height:86vh; display:grid; place-items:center; padding:clamp(90px,13vh,180px) var(--gutter); } .pi-statement__line{ max-width:21ch; text-align:center; font-family:var(--font-display); font-weight:400; font-size:clamp(29px,4.7vw,94px); line-height:1.14; letter-spacing:-.038em; color:var(--bone); } /* ═══ BLOK 3 — MÜZE KAYIT DEFTERİ ══════════════════════════════════ */ .pi-ledger{margin-top:clamp(96px,13vh,190px)} .pi-ledger__head{ padding-bottom:clamp(22px,3vh,34px); border-bottom:1px solid var(--hairline); } .pi-ledger__title{ font-family:var(--font-display); font-weight:400; font-size:clamp(22px,2.1vw,36px); line-height:1.1; letter-spacing:-.024em; color:var(--bone); } .pi-ledger__title sup{font-size:.26em;vertical-align:super;color:var(--sand)} .pi-ledger__sub{ margin-top:clamp(9px,1.2vh,14px); font-size:var(--t-micro); letter-spacing:.32em; text-transform:uppercase; color:var(--dust); } /* Üç sütunlu register hizası korunur; boş konumların orta sütunu tamamen boştur — hiçbir işaret yoktur. */ .pi-entry{ display:grid; grid-template-columns:minmax(0,.2fr) minmax(0,1fr) minmax(0,.28fr); gap:clamp(20px,3vw,60px); align-items:baseline; padding:clamp(15px,2.1vh,24px) 0; border-bottom:1px solid var(--hairline); } .pi-entry__no{ grid-column:1; font-family:var(--font-display); font-size:clamp(16px,1.35vw,24px); line-height:1.2; letter-spacing:.01em; color:var(--dust); font-variant-numeric:tabular-nums lining-nums; white-space:nowrap; } .pi-entry__no span{font-size:.68em} .pi-entry__no em{font-style:normal;font-size:.7em;color:var(--dust)} .pi-entry__name{ grid-column:2; font-family:var(--font-display); font-size:clamp(17px,1.55vw,28px); line-height:1.2; letter-spacing:-.018em; color:var(--bone); } .pi-entry__name sup{font-size:.3em;vertical-align:super} .pi-entry__state{ grid-column:3; font-size:var(--t-micro); letter-spacing:.26em; text-transform:uppercase; color:var(--dust); text-align:right; white-space:nowrap; } /* No. 01 — tek dolu satır. Altın vurgu kaldırıldı; defter sakin kalır. */ .pi-entry--claimed .pi-entry__no{color:var(--bone)} /* Nefes — No. 12'den sonra tam ekran sessizlik */ .pi-breath{height:100vh} /* ═══ BLOK 4 — MANİFESTO ═══════════════════════════════════════════ */ .pi-manifesto{ min-height:76vh; display:grid; place-items:center; padding:clamp(84px,12vh,160px) var(--gutter); background:#060505; border-block:1px solid var(--hairline); } .pi-manifesto__line{ max-width:19ch; text-align:center; font-family:var(--font-display); font-weight:400; font-size:clamp(28px,4.3vw,84px); line-height:1.15; letter-spacing:-.036em; color:var(--bone); } /* ═══ BLOK 5 ═══════════════════════════════════════════════════════ */ .pi-quiet{margin-top:clamp(104px,14vh,210px)} .pi-quiet__line{ max-width:30ch; font-family:var(--font-display); font-weight:400; font-size:clamp(24px,2.9vw,52px); line-height:1.24; letter-spacing:-.028em; color:var(--sand); } /* ═══ BLOK 6 — GÖRÜŞME BİÇİMLERİ ═══════════════════════════════════ */ .pi-modes{margin-top:clamp(104px,14vh,210px)} .pi-mode-list{border-top:1px solid var(--hairline)} .pi-mode{ display:grid; grid-template-columns:minmax(0,.46fr) minmax(0,1fr); gap:clamp(22px,3.4vw,70px); align-items:baseline; padding:clamp(20px,2.8vh,34px) 0; border-bottom:1px solid var(--hairline); } .pi-mode dt{ font-family:var(--font-display); font-weight:400; font-size:clamp(19px,1.75vw,32px); line-height:1.2; letter-spacing:-.018em; color:var(--bone); } .pi-mode dd{ font-size:var(--t-body); line-height:1.8; color:var(--dust); } .pi-modes__note{ margin-top:clamp(26px,3.4vh,42px); font-size:var(--t-body); line-height:1.85; color:var(--sand); } /* ═══ KOLEKSİYON İMZASI ════════════════════════════════════════════ */ .pi-mark{ margin-top:clamp(120px,16vh,250px); min-height:92vh; display:grid; align-content:center; justify-items:center; gap:clamp(22px,3vh,40px); padding:clamp(96px,14vh,200px) var(--gutter); text-align:center; } .pi-mark__name{ font-family:var(--font-display); font-weight:400; font-size:clamp(38px,6.4vw,140px); line-height:1; letter-spacing:-.044em; color:var(--bone); } .pi-mark__name sup{font-size:.2em;vertical-align:super;color:var(--sand)} .pi-mark__sub{ font-size:var(--t-micro); font-weight:500; letter-spacing:.36em; text-transform:uppercase; color:var(--dust); } .pi-mark__last{ margin-top:clamp(16px,2.2vh,30px); font-family:var(--font-display); font-size:clamp(21px,2.3vw,42px); line-height:1.1; letter-spacing:-.022em; color:var(--dawn); } /* ═══ SON DÜŞÜNCE — bağımsız ekran ═════════════════════════════════ */ .pi-lastthought{ min-height:100vh; display:grid; place-items:center; padding:clamp(96px,14vh,200px) var(--gutter); } .pi-lastthought__line{ max-width:17ch; text-align:center; text-wrap:balance; font-family:var(--font-display); font-weight:400; font-size:clamp(31px,5.2vw,112px); line-height:1.1; letter-spacing:-.042em; color:var(--bone); } /* Tam siyah kare */ .pi-blackframe{height:100vh} /* ═══ KOLOFON — tek satır, neredeyse görünmez ══════════════════════ */ .pi-colophon{ display:grid; justify-items:center; gap:clamp(10px,1.4vh,16px); padding:0 var(--gutter) clamp(80px,11vh,150px); text-align:center; } .pi-colophon__note{ font-size:9px; line-height:1.75; letter-spacing:.3em; text-transform:uppercase; color:var(--dust); font-variant-numeric:tabular-nums lining-nums; } .pi-colophon__note{ max-width:74ch; font-size:11px; line-height:1.85; letter-spacing:.06em; text-transform:none; color:rgba(244,239,230,.52); } .pi-colophon sup{font-size:.72em;vertical-align:super;letter-spacing:0} /* ===================================================================== RESPONSIVE — mevcut kırılım noktalarıyla birebir aynı mantık ===================================================================== */ /* ── ≤ 1024px ──────────────────────────────────────────────────────── */ @media (max-width:1024px){ .pi-entry{grid-template-columns:minmax(0,.24fr) minmax(0,1fr) minmax(0,.32fr)} .pi-mode{grid-template-columns:minmax(0,.52fr) minmax(0,1fr)} } /* ── ≤ 768px ───────────────────────────────────────────────────────── */ @media (max-width:768px){ .pi-statement{min-height:72vh} .pi-breath{height:88vh} .pi-manifesto{min-height:60vh} .pi-mark{min-height:80vh} .pi-lastthought{min-height:88vh} .pi-blackframe{height:88vh} } /* ── ≤ 640px — telefon ─────────────────────────────────────────────── */ @media (max-width:640px){ .pi-label{margin-bottom:24px} .pi-open__line{font-size:clamp(21px,5.8vw,29px);max-width:28ch} .pi-statement{margin-top:clamp(80px,11vh,130px);min-height:64vh} .pi-statement__line{font-size:clamp(26px,7.4vw,40px);max-width:19ch} .pi-ledger{margin-top:clamp(80px,11vh,130px)} .pi-entry{ grid-template-columns:auto 1fr; gap:6px 16px; padding:14px 0; } .pi-entry__no{grid-column:1;grid-row:1;font-size:15px} .pi-entry__state{grid-column:2;grid-row:1;text-align:right;letter-spacing:.2em} .pi-entry__name{grid-column:1 / -1;grid-row:2;font-size:17px} .pi-breath{height:76vh} .pi-manifesto{min-height:52vh} .pi-manifesto__line{font-size:clamp(25px,7vw,38px);max-width:17ch} .pi-quiet{margin-top:clamp(84px,11.5vh,140px)} .pi-quiet__line{font-size:clamp(22px,6.2vw,32px);max-width:26ch} .pi-modes{margin-top:clamp(84px,11.5vh,140px)} .pi-mode{ grid-template-columns:1fr; gap:8px; padding:17px 0; } .pi-mode dt{font-size:19px} .pi-mode dd{font-size:14px;line-height:1.75} .pi-modes__note{font-size:14px;line-height:1.8} .pi-mark{ margin-top:clamp(92px,12.5vh,150px); min-height:72vh; gap:18px; } .pi-mark__name{font-size:clamp(34px,10vw,54px)} .pi-mark__last{font-size:clamp(19px,5.4vw,26px)} .pi-lastthought{min-height:76vh} .pi-lastthought__line{font-size:clamp(28px,8.2vw,44px);max-width:15ch} .pi-blackframe{height:76vh} .pi-colophon{ padding-bottom:clamp(64px,9vh,110px); gap:12px; } .pi-colophon__note{letter-spacing:.1em;line-height:1.9} } /* ── ≤ 380px ───────────────────────────────────────────────────────── */ @media (max-width:380px){ .pi-statement__line{font-size:clamp(24px,7vw,32px)} .pi-manifesto__line{font-size:clamp(23px,6.6vw,30px)} .pi-mark__name{font-size:clamp(30px,9vw,42px)} .pi-lastthought__line{font-size:clamp(25px,7.4vw,34px)} } /* ===================================================================== ERİŞİLEBİLİRLİK — bu bölüme özgü ek hareket yoktur. Kolofon animasyonsuzdur, etkileşimsizdir, vurgusuzdur. JavaScript çalışmazsa tüm içerik görünür kalır. ===================================================================== */ @media (prefers-reduced-motion:reduce){ .pi-statement__line, .pi-manifesto__line, .pi-mark__name, .pi-lastthought__line{transition:none} } /* ===================================================================== STORY ROAD™ — SECTION XIV · EPILOGUE section-14.css Yalnızca yeni sınıflar. Hiçbir global kural, token, tipografi, renk, grid, boşluk veya responsive davranış değiştirilmez. Mevcut değişkenler olduğu gibi kullanılır: --obsidian --bone --sand --dust --font-display --gutter --t-micro Bölümde çizgi, ayırıcı, kenarlık, arka plan katmanı, ikon veya grafik öğe YOKTUR. Yalnızca tipografi ve boşluk. Yerleşim: içinde section-13.css'ten SONRA. ===================================================================== */ .epilogue{padding-block:0} /* ── Boşluk — bu bölümün asıl malzemesi ────────────────────────────── */ .ep-void{height:100vh} .ep-void--threshold{height:92vh} .ep-void--long{height:118vh} .ep-void--tail{height:78vh} /* ── Plaka — her satır kendi ekranında yalnız durur ────────────────── */ .ep-plate{ min-height:76vh; display:grid; place-items:center; padding-inline:var(--gutter); text-align:center; } .ep-plate--final{min-height:92vh} /* ── Çıkış levhası ─────────────────────────────────────────────────── */ .ep-mark{ font-size:var(--t-micro); font-weight:500; letter-spacing:.42em; text-transform:uppercase; color:var(--dust); } /* ── Okumanın bitişi ───────────────────────────────────────────────── */ .ep-close{ max-width:22ch; font-family:var(--font-display); font-weight:400; font-size:clamp(22px,2.4vw,42px); line-height:1.24; letter-spacing:-.024em; color:var(--sand); } /* ── Son cümle ─────────────────────────────────────────────────────── */ .ep-final{ max-width:16ch; font-family:var(--font-display); font-weight:400; font-size:clamp(32px,5.6vw,124px); line-height:1.1; letter-spacing:-.044em; color:var(--bone); } /* ── Arşiv künyesi — belgedeki tek kolofon ─────────────────────────── */ .ep-colophon{ display:grid; place-items:center; padding-inline:var(--gutter); } .ep-colophon__list{ display:grid; justify-items:center; gap:clamp(7px,.9vh,11px); text-align:center; font-size:9px; line-height:1.4; letter-spacing:.36em; text-transform:uppercase; color:var(--dust); font-variant-numeric:tabular-nums lining-nums; } .ep-colophon__list span{display:block} .ep-colophon__list sup{font-size:.72em;vertical-align:super;letter-spacing:0} /* ===================================================================== RESPONSIVE — mevcut kırılım noktalarıyla birebir aynı mantık ===================================================================== */ /* ── ≤ 1024px ──────────────────────────────────────────────────────── */ @media (max-width:1024px){ .ep-final{max-width:17ch} } /* ── ≤ 768px ───────────────────────────────────────────────────────── */ @media (max-width:768px){ .ep-void{height:86vh} .ep-void--threshold{height:78vh} .ep-void--long{height:98vh} .ep-void--tail{height:64vh} .ep-plate{min-height:66vh} .ep-plate--final{min-height:80vh} } /* ── ≤ 640px — telefon ─────────────────────────────────────────────── */ @media (max-width:640px){ .ep-void{height:76vh} .ep-void--threshold{height:68vh} .ep-void--long{height:86vh} .ep-void--tail{height:56vh} .ep-plate{min-height:58vh} .ep-plate--final{min-height:70vh} .ep-mark{letter-spacing:.34em} .ep-close{font-size:clamp(20px,5.6vw,28px);max-width:20ch} .ep-final{font-size:clamp(29px,8.4vw,46px);max-width:14ch} .ep-colophon__list{ font-size:9px; letter-spacing:.3em; gap:8px; } } /* ── ≤ 380px ───────────────────────────────────────────────────────── */ @media (max-width:380px){ .ep-final{font-size:clamp(26px,7.8vw,36px)} .ep-close{font-size:clamp(19px,5.4vw,24px)} .ep-colophon__list{letter-spacing:.26em} } /* ===================================================================== ERİŞİLEBİLİRLİK — bu bölümde hareket yoktur. Görünürlük mevcut .r motoru ve animations.css tarafından yönetilir; JavaScript çalışmazsa tüm içerik görünür kalır. ===================================================================== */ @media (prefers-reduced-motion:reduce){ .ep-final, .ep-close{transition:none} }