/* Siluet ana sayfa B6 Kurumsal. Sahibi WP7. Şartname: ANA-SAYFA-KURGU.md 2.6, 2.10 (G5), 2.11 (İ4); defter R88, R100, R102, R114; orta üçte bir kurgusu 2026-10-25 "Malzeme". Bölüm izdir (ORTAK.md 4): 100svh sahne + giriş devri G5 (--devir-giris) + 145svh yol + G6 için çıkış devri (--devir-cikis); sahne yapışık, pin yok. Yol (vh): 0-32 netleşme · 32-48 bekleme · 48-65 eşleşmeli çözülme · 65-145 dört ilke, her biri 20vh (js/b-kurumsal.js). A planı (.kur__a): katmanlı Yaşamkent-03; görsel katmanları solda 14vw içinde zemine erir (yalnız görsellere maske, yazıya değil), yazı gök ile kule arasında. B planı (.kur__b): her ilke kendi malzemesinin geometrisiyle sahnenin bir kenarına taşar; köşe, gölge, kenar erimesi yok, kenarlar temiz; yazı hep zeminde. 01 sağ kenarda tam boy video sütunu · 02 sol alt köşede kendi zemininde duran levha · 03 sağ üstte bant · 04 sol kenarda tam boy video sütunu. Ölçüler yoğunluk sınırından (yükseltilmemiş dosyalar; DPR 2'de cihaz/dosya en çok 1,6 kat, iç ölçek 1,03 dahil; DPR 1'de en çok 1,0): video 720x1280: sütun 100svh boyunda (DPR 2'de 1080 css ve üstünde 992 px ile sınırlı), 900'de 506 css, DPR 2'de 1,41 Bestekar levhası 760x971: en çok 570x728 css (DPR 2'de 1,5 x 1,03); Pera bandı 1600x600: en çok 1160 css (1,45 x 1,03) Telefon (<= 599 px): A planı akışta; B planı yapışık iç sahne (.kur__bs), üstte tam genişlik malzeme bandı, altta yazı, en altta hap şeridi. Hareket azaltma: yapışma yok. Tablet (600-899 px): aynı yapışık iç sahne; malzeme yoğunluk sınırında (DPR >= 1,25'te video en çok 508 css, levha bandı en çok 720 css yüksek) bir kenara yaslanır, ad yanındaki boşlukta görselin alt kenarına oturur, cümle alt kenarın altında; 03 tam genişlik bant, ad bandın alt kenarının arkasından iner. */ @property --kur-o { syntax: ''; inherits: true; initial-value: 1; } .kurumsal { --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; --kur-zemin: #F1F0EC; --kur-yazi: #192025; --kur-th: 150px; /* telefonda başlığın zeminde durduğu üst bölge */ --kur-col-h: 100svh; /* video sütunu boyu */ --kur-col: min(calc(var(--kur-col-h) * 9 / 16), 40vw); --kur-lev-h: min(728px, calc(100svh - 172px)); /* Bestekar levhası */ --kur-lev-w: calc(var(--kur-lev-h) * 760 / 971); --kur-bant-w: min(1160px, calc(100vw - var(--kenar) - 15vw), calc(46svh * 1600 / 600)); /* Pera bandı */ --kur-bant-h: calc(var(--kur-bant-w) * 600 / 1600); --kur-ad: min(12.5vw, 20svh); /* ilke adı (JS en dar ilkeye sığdırır) */ position: relative; height: calc(100svh + var(--devir-giris, 0px) + 145svh + var(--devir-cikis, 0px)); background: transparent; scroll-margin-top: calc(-1 * (var(--devir-giris, 0px) + 40svh)); } @media (min-resolution: 1.7dppx) and (min-height: 1000px) { .kurumsal { --kur-col-h: 992px; } } /* DPR 2'de video sütunu 1280 x 0,775'i aşmaz */ .kur__sahne { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; overflow: clip; pointer-events: none; } /* sahne zemini ayrı katmanda (jüri 3 bulgu 27: yazılım rasterizasyonunda saydamlaşan düz zeminli grup siyah kare veriyordu) */ .kur__sahne::before { content: ""; position: absolute; inset: 0; z-index: 0; background: #F2EFEA; pointer-events: none; } .kur__capa { position: absolute; left: 0; top: calc(var(--devir-giris, 0px) + 40svh + 52px); width: 1px; height: 1px; pointer-events: none; } /* ---------- A planı ---------- */ .kur__a { position: absolute; inset: 0; z-index: 2; pointer-events: none; } .kur__a .kt { position: absolute; inset: 0; background: transparent; } .kur__a .kt__gok, .kur__a .kt__on { transform: scale(var(--kur-o, 1)); transform-origin: var(--kur-ox, 88%) var(--kur-oy, 111%); -webkit-mask-image: linear-gradient(to right, transparent 0, transparent 6vw, rgba(0,0,0,.16) 9.5vw, rgba(0,0,0,.5) 13vw, rgba(0,0,0,.84) 16.5vw, #000 20vw); mask-image: linear-gradient(to right, transparent 0, transparent 6vw, rgba(0,0,0,.16) 9.5vw, rgba(0,0,0,.5) 13vw, rgba(0,0,0,.84) 16.5vw, #000 20vw); } .kur__a .kt__metin .s { clip-path: inset(0 -100vw 0 -100vw); } .kur__a .kt__metin .s-i { transform: translateY(calc(var(--kt-m, 0) * 112% - var(--kur-cy, 0) * 135%)); } .kur__kunye { position: absolute; left: var(--kenar); bottom: 34px; margin: 0; font: 400 12px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; font-variant-numeric: tabular-nums; color: var(--metin); white-space: nowrap; } /* ---------- B planı ---------- */ .kur__b { position: absolute; inset: 0; z-index: 1; opacity: 0; pointer-events: none; background: var(--kur-zemin); color: var(--kur-yazi); transition: background-color .9s var(--e-yumusak), color .9s var(--e-yumusak); } .kurumsal.kur--b .kur__b { pointer-events: auto; } .kur__bs { position: absolute; inset: 0; } /* maske: dış kap (.kur__m) yalnız dikeyde kırpar; .kur__c çıkış, içteki span giriş kaymasını taşır (iki ayrı tween aynı öğeye yazmaz) */ .kur__m { display: block; clip-path: inset(0 -100vw 0 -100vw); padding: .1em 0 .2em; margin: -.1em 0 -.2em; } .kur__c, .kur__c > span { display: block; } .kur__ilkeler { position: absolute; inset: 0; } .kur__ilke { position: absolute; inset: 0; pointer-events: none; } .kur__metin { position: absolute; margin: 0; } .kur__sayac { margin: 0 0 clamp(14px, 2.2vh, 24px); font: 400 12px/1.3 var(--mono); letter-spacing: .08em; font-variant-numeric: tabular-nums; } .kur__ad { margin: 0; font-size: var(--kur-ad); line-height: .92; font-weight: 300; letter-spacing: -.045em; white-space: nowrap; } .kur__ad .kur__m { width: max-content; } .kur__ad .kur__c > span { display: inline-block; } .kur__cumle { margin: max(26px, calc(var(--kur-ad) * .27)) 0 0; font-size: 20px; line-height: 1.45; letter-spacing: -.014em; max-width: 30ch; } .kur__alt { margin: 12px 0 0; font-size: 13px; line-height: 1.4; opacity: .86; } /* görsel: silme (clip-path) giriş için .kur__klip'te, çıkış için figürün kendisinde; saydamlık .kur__kutu'da (A planından çözülme), iç ölçek ve imleç kayması .kur__ic'te */ .kur__yakin { position: absolute; margin: 0; } .kurumsal.kur--b .kur__ilke--etkin .kur__yakin { pointer-events: auto; } .kur__klip, .kur__kutu, .kur__ic { position: absolute; inset: 0; } .kur__klip { clip-path: inset(0 0 0 0); overflow: hidden; overflow: clip; } .kur__ic { transform: scale(1.03); } .kur__yakin--video .kur__ic { transform: none; } .kur__ic img, .kur__ic video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; } /* 01 Teslim sonrası: sağ kenarda tam boy sütun; yazı solda, sütuna 64 px kala biter */ .kur__ilke--0 .kur__yakin { right: 0; top: 0; width: var(--kur-col); height: var(--kur-col-h); } .kur__ilke--0 .kur__metin { left: var(--kenar); right: calc(var(--kur-col) + 64px); top: 50%; transform: translateY(-50%); } /* 02 Malzeme seçimi: sol alt köşede, kendi zemininde duran levha (alt kenarı sokak ve bahçe, sahnenin tabanına basar); yazı sağ üstte */ .kur__ilke--1 .kur__yakin { left: 0; bottom: 0; width: var(--kur-lev-w); height: var(--kur-lev-h); } .kur__ilke--1 .kur__metin { left: calc(var(--kur-lev-w) + 64px); right: var(--kenar); top: clamp(96px, 15svh, 150px); } /* 03 Tek elden yönetim: sağ üstte bant; ad tek satır, bandın alt kenarının arkasından iner; cümle bandın sol kenarı hizasında */ .kur__ilke--2 .kur__yakin { right: 0; top: 0; width: var(--kur-bant-w); height: var(--kur-bant-h); } .kur__ilke--2 .kur__metin { left: var(--kenar); right: var(--kenar); top: var(--kur-bant-h); } .kur__ilke--2 .kur__sayac { position: absolute; left: 0; bottom: calc(100% + 18px); margin: 0; } .kur__ilke--2 .kur__m--bant { padding-top: 0; margin-top: 0; } /* maskenin üst kenarı bandın alt kenarı */ .kur__ilke--2 .kur__ad { padding-top: clamp(14px, 2.4vh, 26px); } .kur__ilke--2 .kur__cumle, .kur__ilke--2 .kur__alt { margin-left: calc(100vw - var(--kur-bant-w) - var(--kenar)); } .kur__ilke--2 .kur__cumle { max-width: 36ch; } /* 04 Süreç şeffaflığı: sol kenarda tam boy sütun (şantiyeye açılan aralık, B5'in kapısıyla kafiyeli); yazı sağda */ .kur__ilke--3 .kur__yakin { left: 0; top: 0; width: var(--kur-col); height: var(--kur-col-h); } .kur__ilke--3 .kur__metin { left: calc(var(--kur-col) + 64px); right: var(--kenar); top: 50%; transform: translateY(-50%); } /* segment: numaralı cam hap şeridi, görsellerin dışında kalan ortak boşluğun altında (02 levhası ile 01 sütunu arası); etkin hap adını da taşır */ .kur__seg { position: absolute; z-index: 4; bottom: 28px; left: calc((var(--kur-lev-w) + 100vw - var(--kur-col)) / 2); transform: translateX(-50%); display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .5); -webkit-backdrop-filter: saturate(140%) blur(16px); backdrop-filter: saturate(140%) blur(16px); pointer-events: auto; } .kur__seg button { position: relative; z-index: 1; min-width: 40px; min-height: 38px; padding: 0 12px; border-radius: 999px; font: 400 12px/1 var(--mono); letter-spacing: .06em; font-variant-numeric: tabular-nums; color: inherit; white-space: nowrap; } .kur__seg button::before { content: attr(data-n); } .kur__seg button > span { display: none; font: 500 14px/1 var(--sans, inherit); letter-spacing: -.01em; margin-left: 8px; } .kur__seg button[aria-pressed="true"] > span { display: inline; } .kur__seg button:focus-visible { outline-offset: 1px; } .kur__seg button { transition: background-color .45s var(--e-yumusak); } .kur__seg button[aria-pressed="true"] { background: #fff; } .kur__seg button:not([aria-pressed="true"]):hover { background: rgba(255, 255, 255, .6); } .kur__isik { display: none; } .kurumsal.kur--sabit .kur__seg { opacity: 0; transition: opacity .6s var(--e-yumusak); } .kurumsal.kur--sabit.kur--m .kur__seg { opacity: 1; } .kurumsal.kur--sabit:not(.kur--m) .kur__seg { pointer-events: none; } /* ---------- dar masaüstü (900-1180 px): levha ve sütun daralır ki ortadaki boşluk segmenti alsın; segment yalnız numara (ad aria-label'da) ---------- */ @media (min-width: 900px) and (max-width: 1180px) { .kurumsal { --kur-lev-h: min(728px, calc(100svh - 172px), calc(36vw * 971 / 760)); --kur-col: min(calc(var(--kur-col-h) * 9 / 16), 36vw); } .kur__seg button[aria-pressed="true"] > span { display: none; } } /* ---------- telefon ve tablet (<= 899 px): A planı akışta; B planı yapışık iç sahne (4 x 35svh yol). Üstte tam genişlik malzeme bandı (menünün altına taşar), altta yazı ---------- */ @media (max-width: 899px) { .kurumsal { height: auto; scroll-margin-top: 56px; --kur-tb: min(56svh, calc(100svh - 330px)); --kur-ad: 40px; } .kur__sahne { position: relative; height: auto; overflow: visible; pointer-events: auto; } .kur__capa { top: 0; } .kur__a { position: relative; inset: auto; } .kur__a .kt { position: relative; inset: auto; height: calc(var(--kur-th) + 64svh); } .kur__a .kt__gok, .kur__a .kt__on { -webkit-mask-image: none; mask-image: none; } .kur__a .kt__gok { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--kt-erime, 0px), #000 calc(100% - 16svh), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 var(--kt-erime, 0px), #000 calc(100% - 16svh), transparent 100%); } .kur__a .kt__on { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 16svh), transparent 100%); mask-image: linear-gradient(to bottom, #000 calc(100% - 16svh), transparent 100%); } .kur__kunye { left: var(--kenar); bottom: 26px; } .kur__b { position: relative; inset: auto; opacity: 1; pointer-events: auto; height: calc(100svh + 140svh); } .kur__bs { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; overflow: clip; } .kur__ilke .kur__yakin, .kur__ilke[class] .kur__yakin { left: 0; right: 0; top: 0; bottom: auto; width: 100%; height: var(--kur-tb); } .kur__ilke .kur__metin, .kur__ilke[class] .kur__metin { left: var(--kenar); right: var(--kenar); top: calc(var(--kur-tb) + 22px); transform: none; } .kur__ilke--2 .kur__sayac { position: static; margin: 0 0 12px; } .kur__ilke--2 .kur__ad { padding-top: 0; } .kur__ilke--2 .kur__cumle, .kur__ilke--2 .kur__alt { margin-left: 0; } .kur__sayac { margin-bottom: 12px; } .kur__ad .kur__m { display: inline-block; } .kur__cumle, .kur__ilke--2 .kur__cumle { font-size: 16px; margin-top: 14px; max-width: 38ch; } .kur__ic img { object-position: 50% 62%; } .kur__ilke--2 .kur__ic img { object-position: 50% 40%; } /* telefonda Pera'nın dikey kırpımı (pera-palace-08-dikey-760,