/* ========================================================================== LYT Eğitim Akademisi — ÜÇ BOYUTLU SAHNELER (tanıtım sayfası) -------------------------------------------------------------------------- Saf CSS 3D + SVG. Harici kütüphane YOK, Three.js YOK, CDN YOK. Kaynak: lyt-sunum/assets/uc-boyut.css (koyu tema) — buraya AÇIK temaya uyarlanarak taşındı. Uyarlamada değişen üç şey: 1) Derinlik parlamayla değil, GÖLGE + ÖLÇEK ile kurulur. Açık zeminde color-mix'li parlama halkaları gri bir kir gibi görünüyordu. 2) Pembe (--a500) yalnız TEK anlamda kullanılır: akan veri vurgusu. Zemin, kenar ve kutu renkleri lacivert + nötrdür. 3) Cam paneller yerine beyaz yüzey + 1px nötr kenar + katmanlı gölge. Lacivert bant içinde (.sahne--koyu) cam geri gelir. MİMARİ — üç katman (uc-boyut.css'ten aynen korundu): 1) .sahne : perspective sahibi. transform-style YOK (düz). 2) .sahne__alan : transform-style: preserve-3d. SADECE transform. 3) yapraklar : translateZ ile derinlik. opacity animasyonu BURADA. ⚠ KRİTİK: preserve-3d bir atada opacity<1, filter, overflow!=visible, backdrop-filter, contain:paint varsa 3D DÜZLEŞİR. Giriş animasyonunun opacity'si asla .sahne__alan üstünde değil, yapraklarda durur. ⚠ Yalnız transform ve opacity animasyonu var. width/top/left/box-shadow animasyonu YOK — kaydırma sırasında düzen hesabı tetiklenmez. JS'in yazdığı değişkenler (assets/sahne.js): --fare-x, --fare-y : -1..1 işaretçi konumu (yumuşatılmış) --kaydir : -1..1 sahnenin görüş alanındaki konumu --giris : 0..1 IntersectionObserver girişi --ilerleme : 0..1 yapışkan yolun kaydırma ilerlemesi JS hiç çalışmazsa hepsi görünür varsayılana düşer (--giris: 1). ========================================================================== */ /* --ilerleme sayı olarak kaydedilir: kayıtlı özel özelliklerde motor değerin tipini bilir ve her karede yeniden ayrıştırmaz. @property desteklemeyen tarayıcıda bildirim sessizce düşer, davranış değişmez. */ @property --ilerleme { syntax: ""; inherits: true; initial-value: 0; } /* -------------------------------------------------------------------------- 0) SAHNE KÖKÜ + TOKEN YEDEKLERİ index.html'in :root token'ları yüklüyse onlar kazanır; parcalar/*.html tek başına açıldığında yedekler tutar. -------------------------------------------------------------------------- */ .sahne { /* etkileşim — JS yazmazsa nötr */ --fare-x: 0; --fare-y: 0; --kaydir: 0; --ilerleme: 0; /* JS yoksa giriş animasyonu ATLANIR: içerik görünür kalır. JS devralınca üzerine .sahne-js gelir ve bunu 0'a çeker. */ --giris: 1; --z: 1; /* derinlik ölçeği — dar ekranda küçülür */ --hareket: 1; /* açı ölçeği — prefers-reduced-motion'da 0 */ /* yüzey / mürekkep */ --sh-white: var(--white, #FFFFFF); --sh-n25: var(--n25, #F3F5FB); --sh-n50: var(--n50, #EAECF5); --sh-n100: var(--n100, #E3E7F3); --sh-n200: var(--n200, #DDE1EE); --sh-n300: var(--n300, #C3C9DE); --sh-n400: var(--n400, #7881A5); --sh-n500: var(--n500, #636A88); --sh-n600: var(--n600, #454C68); --sh-n900: var(--n900, #0B1020); --sh-b50: var(--b50, #EEF1FC); --sh-b100: var(--b100, #DDE3FA); --sh-b300: var(--b300, #8296E8); --sh-b400: var(--b400, #3D5BC9); --sh-b500: var(--b500, #1739AE); --sh-b600: var(--b600, #0A2A8C); --sh-b700: var(--b700, #011D6C); --sh-b800: var(--b800, #0A1F63); --sh-b900: var(--b900, #011145); --sh-a400: var(--a400, #FDB4D4); --sh-a500: var(--a500, #F06BA8); --sh-a600: var(--a600, #D13D78); --sh-good: var(--good, #097718); /* ders renkleri — konu takibi çubuklarında (tokens.css ile aynı) */ --sh-turkce: var(--su-turkce, #2269B4); --sh-matematik: var(--su-matematik, #B54012); --sh-fen: var(--su-fen, #00746E); --sh-sosyal: var(--su-felsefe, #A134C5); /* AÇIK ZEMİN DERİNLİK MERDİVENİ — üç kademe. filter:drop-shadow 3D'yi düzleştirir; box-shadow kullanılır. */ --d1: 0 1px 2px rgba(11,16,32,.05), 0 2px 6px rgba(11,16,32,.06); --d2: 0 4px 10px rgba(11,16,32,.05), 0 14px 28px rgba(11,16,32,.09); --d3: 0 10px 22px rgba(11,16,32,.07), 0 30px 60px rgba(11,16,32,.14); /* cam yüzey — açık zeminde neredeyse opak beyaz (kir yapmasın) */ --cam: rgba(255,255,255,.90); --cam-bd: rgba(11,16,32,.09); /* ızgara / hat rengi */ --cizgi: rgba(23,57,174,.20); --ff-b: var(--ff-display, 'Figtree', ui-sans-serif, system-ui, sans-serif); --ff-g: var(--ff-body, 'Inter', ui-sans-serif, system-ui, sans-serif); --ease3: var(--ease, cubic-bezier(.2,.8,.2,1)); position: relative; perspective: 1500px; perspective-origin: 50% 45%; font-family: var(--ff-g); color: var(--sh-n900); } /* Lacivert bandın (hero) içinde: cam geri gelir, kenarlar ışığa döner. Parlama değil — yarı saydam beyaz yüzey + ince ışık kenarı. */ .sahne--koyu { /* ⚠ Yarı saydam beyaz DEĞİL: bu pastiller cihaz maketinin BEYAZ ekranının üstünden geçiyor ve orada beyaz yazı beyaz zeminde kayboluyordu. Koyu ve yeterince opak bir zemin hem lacivert bantta hem ekranın üstünde okunur (beyaz / #071038 ≈ 16:1). */ --cam: rgba(7, 16, 56, .88); --cam-bd: rgba(255,255,255,.30); --cizgi: rgba(255,255,255,.22); --d2: 0 6px 14px rgba(1,10,44,.30), 0 18px 40px rgba(1,10,44,.38); --d3: 0 12px 26px rgba(1,10,44,.34), 0 34px 70px rgba(1,10,44,.46); color: #FFFFFF; } .sahne__alan { position: relative; transform-style: preserve-3d; } /* Görüş alanı dışındaki sahne: sonsuz animasyonlar duraklar (bkz. sahne.js). YALNIZ animation-play-state — transition'a, opaklığa, düzene dokunmaz, dolayısıyla hiçbir içerik gizlenmez. Sahne geri girince kaldığı yerden. */ .sahne--dur, .sahne--dur *, .sahne--dur *::before, .sahne--dur *::after { animation-play-state: paused !important; } /* JS devraldı: giriş animasyonu 0'dan başlar */ .sahne-js .sahne { --giris: 0; } /* Kare üretilmiyor (arka plan sekmesi, ekran görüntüsü, PDF): gizleme kapalı */ .kare-yok .sahne, .kare-yok.sahne-js .sahne { --giris: 1 !important; } @media print { .sahne, .sahne-js .sahne { --giris: 1; --hareket: 0; --fare-x: 0; --fare-y: 0; --kaydir: 0; } .sahne *, .sahne *::before, .sahne *::after { animation: none !important; transition: none !important; } } /* -------------------------------------------------------------------------- 0b) HAREKET AZALTMA + DAR EKRAN -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .sahne, .sahne-js .sahne { /* .sahne-js özgüllüğünü yenmek için ikinci seçici şart */ --hareket: 0; --fare-x: 0; --fare-y: 0; --kaydir: 0; --giris: 1; } .sahne *, .sahne *::before, .sahne *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } @media (max-width: 900px) { .sahne { --z: .60; perspective: 1100px; } } @media (max-width: 560px) { .sahne { --z: .40; perspective: 900px; } } /* -------------------------------------------------------------------------- 0c) GİRİŞ — yalnız yapraklarda, asla preserve-3d atada .gir : opacity + geçiş (kendi transform'u olan öğeler için) .gir--kay : ek olarak aşağıdan yukarı kayma (düz öğeler için) -------------------------------------------------------------------------- */ .gir { opacity: calc(.001 + var(--giris)); transition: opacity 620ms var(--ease3), transform 620ms var(--ease3); transition-delay: calc(var(--sira, 0) * 90ms); } .gir--kay { transform: translate3d(0, calc((1 - var(--giris)) * 18px), 0); } /* Son durak garantisi: geçiş bitmese bile son hâl yazılır (bkz. sahne.js) */ .gir.gir-bitti { opacity: 1; } .gir--kay.gir-bitti { transform: none; } /* -------------------------------------------------------------------------- 0d) ORTAK KÜÇÜK ARAYÜZ PARÇALARI (kartların içindeki mini ekranlar) Sabit px ölçüler: kart genişlikleri clamp'le sınırlı, container-query ölçeklemesine gerek yok — daha az hesap, daha hızlı boyama. -------------------------------------------------------------------------- */ .mini { display: flex; flex-direction: column; gap: 9px; } .mini__b { font: 700 10.5px/1.2 var(--ff-g); letter-spacing: .09em; text-transform: uppercase; color: var(--sh-n500); margin: 0; } .sahne--koyu .mini__b { color: rgba(255,255,255,.66); } .mini__sat { display: flex; align-items: center; gap: 9px; padding: 7px 0; border-bottom: 1px solid var(--sh-n200); font-size: 12.5px; line-height: 1.35; color: var(--sh-n600); } .mini__sat:last-child { border-bottom: 0; } .mini__sat > span:not([class]) { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mini__kutu { width: 15px; height: 15px; border-radius: 5px; flex: none; border: 1.5px solid var(--sh-n400); position: relative; } .mini__kutu--dolu { background: var(--sh-good); border-color: var(--sh-good); } .mini__kutu--dolu::after { content: ""; position: absolute; left: 4px; top: 1.5px; width: 4px; height: 8px; border: solid #fff; border-width: 0 1.6px 1.6px 0; transform: rotate(42deg); } .mini__sure { font-size: 11px; color: var(--sh-n500); font-variant-numeric: tabular-nums; flex: none; } .mini__nokta { width: 7px; height: 7px; border-radius: 50%; background: var(--n2, var(--sh-b500)); flex: none; } /* ilerleme çubuğu */ .mini__bar { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .mini__bar i { font-style: normal; font-size: 11px; color: var(--sh-n500); white-space: nowrap; } .mini__bar b { display: block; height: 7px; border-radius: 999px; background: var(--sh-n100); position: relative; overflow: hidden; } .mini__bar b::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--p, 50) * 1%); border-radius: 999px; background: var(--r, var(--sh-b500)); } /* halka (yüzde / kronometre) — tek conic boyama */ .mini__halka { width: var(--c, 92px); height: var(--c, 92px); border-radius: 50%; flex: none; display: grid; place-items: center; position: relative; background: conic-gradient(var(--sh-b500) calc(var(--p, 62) * 1%), var(--sh-n100) 0); } .mini__halka::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--sh-white); box-shadow: inset 0 0 0 1px var(--sh-n100); } .mini__halka > span { position: relative; z-index: 1; text-align: center; line-height: 1.15; } .mini__halka b { display: block; font: 800 21px/1 var(--ff-b); font-variant-numeric: tabular-nums; color: var(--sh-n900); } .mini__halka i { display: block; font-style: normal; font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--sh-n500); margin-top: 3px; } /* haftalık çubuk grafik */ /* ⚠ ÇUBUK YÜKSEKLİĞİ HÜCRENİN DEĞİL, BOŞ RAYIN YÜZDESİ OLMALI (ölçüldü). Eskiden `height: calc(var(--h) * 1%)` hücrenin (66px) yüzdesiydi; ama hücre bir sütun flex kutusu ve altında gün etiketi + 5px boşluk var. Çubuk esnek alanı aşamadığı için %69'un üstündeki her değer AYNI yükseklikte çiziliyordu: 72, 88 ve 96 üçü de 45,8px çıkıyordu — grafiğin en yüksek günü ortadaki günden ayırt edilemiyordu. Değer artık doğrudan --tepe rayına oranlanıyor, böylece çizim veriye birebir sadık. */ .mini__cubuklar { display: flex; align-items: flex-end; gap: 6px; height: 66px; --tepe: 44px; } .mini__cubuk { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; justify-content: flex-end; height: 100%; } .mini__cubuk b { display: block; flex: none; width: 100%; height: calc(var(--h, 50) / 100 * var(--tepe)); min-height: 3px; border-radius: 4px 4px 2px 2px; background: var(--sh-b500); } .mini__cubuk--bos b { background: var(--sh-n100); } .mini__cubuk i { font-style: normal; font-size: 9.5px; color: var(--sh-n500); } /* net tablosu */ .mini__net { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; } .mini__net span { background: var(--sh-n25); border-radius: 9px; padding: 7px 9px; } .mini__net i { display: block; font-style: normal; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--sh-n500); } .mini__net b { display: block; font: 800 17px/1.2 var(--ff-b); font-variant-numeric: tabular-nums; color: var(--sh-n900); } /* rozet */ .mini__rozet { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 4px 10px; border-radius: 999px; background: var(--sh-b50); font-size: 11px; font-weight: 600; color: var(--sh-b600); white-space: nowrap; } /* -------------------------------------------------------------------------- 1) SAHNE 1 — HERO: DİZÜSTÜ + TELEFON MAKETİ -------------------------------------------------------------------------- */ .sahne--cihazlar { padding: 10px 0 34px; } .sahne--cihazlar .sahne__alan { display: flex; align-items: flex-end; justify-content: center; width: 100%; transform: rotateX(calc(5deg + var(--fare-y) * -4deg * var(--hareket))) rotateY(calc(var(--fare-x) * 7deg * var(--hareket))) translate3d(0, calc(var(--kaydir) * -14px * var(--hareket)), 0); transition: transform 420ms var(--ease3); will-change: transform; } .dizustu { position: relative; width: min(100%, 780px); min-width: 0; /* esnek satırda daralabilsin; yoksa taşar */ transform-style: preserve-3d; transform: translate3d(0, calc((1 - var(--giris)) * 20px), calc(6px * var(--z))); } .dizustu__kapak { position: relative; border-radius: 16px 16px 6px 6px; padding: 11px 11px 15px; background: linear-gradient(158deg, #2A3352 0%, #171D33 52%, #0B1020 100%); box-shadow: var(--d3), 0 0 0 1px rgba(11,16,32,.55); transform-origin: 50% 100%; /* -4deg TABAN duruş: hareket kapalıyken de kapak açık görünür */ transform: rotateX(calc(-4deg + var(--fare-y) * -3deg * var(--hareket))); transition: transform 420ms var(--ease3); } .dizustu__ekran { position: relative; overflow: hidden; aspect-ratio: 1448 / 955; /* ekran görüntüsünün gerçek oranı */ border-radius: 7px; background: var(--sh-n50); box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); } .dizustu__ekran img { width: 100%; height: 100%; object-fit: cover; object-position: top center; /* alt kenar kesik değil, sonlanıyor görünsün (index.html .browser-view ile aynı) */ -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 44px), transparent 100%); mask-image: linear-gradient(to bottom, #000 calc(100% - 44px), transparent 100%); } .dizustu__kamera { position: absolute; top: 4px; left: 50%; width: 5px; height: 5px; border-radius: 50%; background: #3B455F; transform: translateX(-50%); } /* taban — gerçek 3D: X ekseninde yatırılmış plaka */ .dizustu__taban { height: 14px; border-radius: 0 0 4px 4px; background: linear-gradient(180deg, #262E49 0%, #10162A 100%); transform-origin: 50% 0; transform: rotateX(76deg); box-shadow: 0 18px 34px rgba(11,16,32,.30); } .dizustu__ayak { position: absolute; left: 50%; bottom: -6px; width: 34%; height: 9px; border-radius: 0 0 12px 12px; background: linear-gradient(180deg, #1B2138, #0D1224); transform: translateX(-50%) translateZ(-14px); } .telefon { position: relative; flex: none; width: clamp(124px, 15vw, 200px); margin-left: clamp(-34px, -3vw, -12px); margin-bottom: clamp(4px, 2vw, 22px); transform-style: preserve-3d; --tel-z: 96px; transform: translate3d(0, calc((1 - var(--giris)) * 20px), calc(var(--tel-z) * var(--z))) rotateY(calc(-11deg + var(--fare-x) * 5deg * var(--hareket))) rotateZ(1.4deg); transition: transform 420ms var(--ease3); will-change: transform; } .telefon__govde { position: relative; border-radius: 28px; padding: 7px; background: linear-gradient(150deg, #333C5A 0%, #1A2036 48%, #0B1020 100%); box-shadow: var(--d3), 0 0 0 1px rgba(11,16,32,.5); } .telefon__ekran { position: relative; overflow: hidden; aspect-ratio: 780 / 1280; /* mobil ekran görüntüsünün gerçek oranı */ border-radius: 21px; background: var(--sh-n50); box-shadow: inset 0 0 0 1px rgba(255,255,255,.10); } .telefon__ekran img { width: 100%; height: 100%; object-fit: cover; object-position: top center; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 30px), transparent 100%); mask-image: linear-gradient(to bottom, #000 calc(100% - 30px), transparent 100%); } .telefon__ada { position: absolute; top: 13px; left: 50%; z-index: 2; width: 30%; height: 11px; border-radius: 999px; background: #0B1020; transform: translateX(-50%); } .telefon__tus { position: absolute; right: -2px; width: 2px; border-radius: 0 2px 2px 0; background: #39415C; transform: translateZ(-3px); } .telefon__tus--a { top: 21%; height: 8%; } .telefon__tus--b { top: 33%; height: 12%; } /* zemin gölgesi — ayrı, yatırılmış düzlem */ .cihaz__golge { position: absolute; left: 50%; bottom: -16px; width: 74%; height: 40px; border-radius: 50%; background: radial-gradient(closest-side, rgba(11,16,32,.24), rgba(11,16,32,0)); transform: translateX(-50%) translateZ(calc(-60px * var(--z))); pointer-events: none; } .sahne--koyu .cihaz__golge { background: radial-gradient(closest-side, rgba(1,10,44,.55), rgba(1,10,44,0)); } /* ön düzlemdeki etiketler */ .cihaz__etiketler { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; } .etiket { position: absolute; display: flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: 999px; background: var(--cam); border: 1px solid var(--cam-bd); box-shadow: var(--d2); font: 600 12.5px/1.2 var(--ff-g); color: inherit; white-space: nowrap; /* ⚠ backdrop-filter BİLEREK YOK: 3B sıralamasından düşürüp cihaz ekranını etiketin üstüne bindiriyor (sunumda ölçüldü). Cam etkisi --cam ile. */ } .etiket i { width: 7px; height: 7px; border-radius: 50%; background: var(--n2, var(--sh-b500)); flex: none; } .sahne--koyu .etiket { color: #FFFFFF; } .sahne--koyu .etiket i { background: var(--n2, var(--sh-a400)); } .etiket--1 { left: 3%; top: 55%; transform: translate3d(0, calc((1 - var(--giris)) * 14px), calc(112px * var(--z))); } .etiket--2 { right: 6%; top: 3%; transform: translate3d(0, calc((1 - var(--giris)) * 14px), calc(146px * var(--z))); } .etiket--3 { left: 12%; bottom: 1%; transform: translate3d(0, calc((1 - var(--giris)) * 14px), calc(100px * var(--z))); } /* Tablet: telefon en öndeki düzlemde olduğu için perspektif onu büyütüp bölümün dışına itiyordu. Sahne daraltılır, telefonun derinliği azalır. */ @media (min-width: 761px) and (max-width: 1100px) { .sahne--cihazlar .sahne__alan { width: 92%; margin: 0 auto; } .telefon { --tel-z: 56px; } } @media (max-width: 760px) { .sahne--cihazlar { padding-bottom: 6px; } .sahne--cihazlar .sahne__alan { flex-direction: column; align-items: center; gap: 18px; } .dizustu { width: 100%; } .telefon { width: min(172px, 46vw); margin: 0; transform: translate3d(0, calc((1 - var(--giris)) * 20px), calc(24px * var(--z))) rotateY(-6deg); } .cihaz__golge { display: none; } .cihaz__etiketler { position: static; transform: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: 100%; margin-top: 14px; } .etiket { position: static; transform: none; font-size: 12px; padding: 7px 12px; white-space: normal; } } /* -------------------------------------------------------------------------- 2) SAHNE 2 — ÖĞRENCİNİN GÜNÜ: kaydırmayla ilerleyen kart destesi -------------------------------------------------------------------------- ⚠ AŞAMALI ZENGİNLEŞTİRME — sıralama bilerek TERSİNE kuruldu. TABAN (JS yok, dar ekran, hareket azaltma): kartlar sıradan bir liste. DESTE yalnız varken ve 861px üstünde açılır. İlk sürümde deste tabandı; JS çalışmayan tarayıcıda --ilerleme 0'da kalıyor, beş kartın ÜÇÜ opacity:0 ile kayboluyor ve 300vh boş koşu yolu kalıyordu (ölçüldü: 1200px genişlikte 5 kartın yalnız 2'si görünür). .sahne-js sınıfı prefers-reduced-motion açıkken hiç eklenmez; yani hareket azaltma da bu kapıdan kendiliğinden tabana düşer. ⚠ .yol ve .yapis üzerinde overflow OLMAMALI: overflow!=visible bir kaydırma kabı yaratır ve position:sticky sayfa yerine o kutuya göre çalışır (hiç yapışmaz). Kırpma yalnız .sahne üzerindedir. -------------------------------------------------------------------------- */ .yol { position: relative; } .yapis { position: static; } .sahne--gun { padding: 8px 0 4px; } .sahne--gun .sahne__alan { display: block; } /* ⚠ minmax(0, 1fr) ŞART: çıplak `1fr` sütunu min-content'e şişiriyor. 320px'te 2. kartın yan yana dizilmiş halka+liste satırı 275,5px min-content istiyor, kart 313,5px'e büyüyor ve sayfa 14px yatay kayıyordu (ölçüldü). minmax(0, 1fr) sütunu kabına kilitler; içerideki metin zaten ellipsis'li. */ .deste { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); } .deste__kart { --n: 5; min-width: 0; position: relative; background: var(--sh-white); border: 1px solid var(--sh-n200); border-radius: 20px; box-shadow: var(--d2); padding: 18px 18px 16px; } .deste__kart:nth-child(1) { --i: 0; } .deste__kart:nth-child(2) { --i: 1; } .deste__kart:nth-child(3) { --i: 2; } .deste__kart:nth-child(4) { --i: 3; } .deste__kart:nth-child(5) { --i: 4; } .deste__ust { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; } .deste__saat { display: inline-flex; align-items: center; gap: 7px; font: 700 11px/1 var(--ff-g); letter-spacing: .08em; text-transform: uppercase; color: var(--sh-b500); } .deste__saat::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sh-a500); flex: none; } /* ⚠ Sayaç ÖNCEDEN --sh-n300 (#C3C9DE) idi: beyaz üstünde 1,65:1 — piksel ölçümüyle doğrulandı, pratikte okunmuyordu. aria-hidden olması onu görsel olarak muaf kılmaz; gören kullanıcı "01/05"i okur. --sh-n500 beyazda 5,32:1 verir ve AA'yı geçer. */ .deste__no { font: 800 12px/1 var(--ff-b); color: var(--sh-n500); font-variant-numeric: tabular-nums; } .deste__kart h3 { font: 800 18px/1.25 var(--ff-b); margin: 0 0 6px; letter-spacing: -.015em; color: var(--sh-n900); } .deste__kart p { margin: 0 0 12px; font-size: 13px; line-height: 1.5; color: var(--sh-n600); } .deste__ekran { border: 1px solid var(--sh-n200); border-radius: 13px; padding: 12px 13px; background: var(--sh-n25); } /* Halka + liste yan yana (2. kart). Satır içi stilden buraya alındı: 320px'te halkayı küçültebilmek için kaskada ihtiyaç var, satır içi stil ezilemiyordu. */ .deste__ekran--yan { display: flex; align-items: center; gap: 14px; } .deste__ekran--yan > .mini { flex: 1 1 0; min-width: 0; } .deste__ekran--yan .mini__halka { --c: 86px; } @media (max-width: 400px) { .deste__ekran--yan .mini__halka { --c: 66px; } } @media (max-width: 340px) { .deste__ekran--yan { gap: 10px; } .deste__ekran--yan .mini__halka { --c: 58px; } .deste__ekran--yan .mini__halka b { font-size: 15px; } .deste__ekran--yan .mini__halka i { font-size: 8.5px; letter-spacing: .04em; } } /* Ray ve ilerleme çizgisi yalnız deste açıkken anlamlıdır */ .ray, .yol__cizgi { display: none; } /* ======================= DESTE (yalnız JS + geniş ekran) ================== */ @media (min-width: 861px) { /* Koşu mesafesi: 5 kart için ~2,4 ekran boyu. Daha uzunu sayfayı yorar, daha kısası kartlar arasında sıçrama hissi verir. */ .sahne-js .yol--gun { height: 300vh; } /* Yapışkan kutu ekran boyudur ve sahne dikeyde ORTALANIR: deste kaydırma boyunca gözün ortasında durur. Üst iç boşluk sayfanın yapışkan başlık çubuğunu (68px) açıkta bırakır. */ .sahne-js .yapis { position: sticky; top: 0; min-height: 100vh; min-height: 100svh; display: grid; align-content: start; /* Üst boşluk yalnız yapışkan başlık çubuğunu (68px) açar. `center` idi: deste ekranın dikey ortasına oturuyor, bölüm başlığıyla arasında ~400px ölü boşluk kalıyordu (ekran görüntüsüyle görüldü). */ padding-block: 84px 28px; } .sahne-js .sahne--gun { overflow: hidden; } .sahne-js .sahne--gun .sahne__alan { min-height: clamp(340px, 40vw, 430px); display: grid; place-items: center; transform: rotateX(calc(3deg + var(--fare-y) * -3deg * var(--hareket))) rotateY(calc(var(--fare-x) * 5deg * var(--hareket))); transition: transform 420ms var(--ease3); will-change: transform; } .sahne-js .deste { position: relative; display: block; width: 100%; height: clamp(340px, 40vw, 430px); transform-style: preserve-3d; } .sahne-js .deste__kart { /* d: kartın sıradaki uzaklığı. 0 = en önde. */ --d: calc(var(--i) - var(--ilerleme) * (var(--n) - 1)); --ad: max(var(--d), -1 * var(--d)); /* |d| — abs() yerine */ --kg: clamp(268px, 31vw, 392px); position: absolute; left: 50%; top: 50%; width: var(--kg); margin: 0 0 0 calc(var(--kg) / -2); /* ⚠ KOMŞU KARTLAR "ARKADA" DEĞİL "KIRPILMIŞ" GÖRÜNÜYORDU (ölçüldü). Eski değerlerde komşu 0,93 ölçek + 0,73 opaklıktaydı; öndekiyle aynı ağırlıkta okunuyor, üstelik yazısı öndeki kartın kenarında cümle ortasından kesiliyordu — derinlik değil, bozuk düzen izlenimi. Derinlik açık zeminde parlamayla kurulamaz; ÜÇ ipucu birlikte verilir: 1) Z'ye itme (-240px, perspektif 1500 → ayrıca ×0,86 küçülme) 2) ölçek (×0,90) → ikisi birleşince komşu öndekinin ~%78'i 3) opaklık (0,45) → göz komşudaki yazıyı okumaya çalışmaz rotateY -24° foreshortening verir: kesilen yazı artık "yana dönmüş kart" olarak okunur. ⚠ 20.08 ÖLÇÜM — YATAY AÇIKLIK 72% YETMİYORDU. Yukarıdaki üç ipucu kartlar DURURKEN doğru çalışıyor (|d| = 0 ve 1). Ama deste zamanının çoğunu iki kart ARASINDA geçirir: |d| her ikisi için de ~0,5 olur ve opaklık formülü ikisini birden ~0,86'ya çıkarır. 72% açıklıkta iki kart ~110px üst üste biniyor, iki metin aynı yerde okunuyordu — ekran görüntüsüyle doğrulandı, "bozuk sayfa" gibi duruyordu. 98% kartın kendi genişliği kadar itiyor: |d| = 0,5'te bile kutular yan yana durur, ÜST ÜSTE BİNMEZ. (1440px'de komşu 536px'e ulaşır, kullanılabilir yarı genişlik 538px — sığar; taşarsa zaten kırpılır.) */ transform: translate3d(calc(var(--d) * 98%), calc(-50% + var(--ad) * 12px), calc(var(--ad) * -240px * var(--z))) rotateY(calc(var(--d) * -24deg)) scale(max(.72, calc(1 - var(--ad) * .1))); /* ±1 komşu soluk arka katman, ±2 tamamen söner */ opacity: clamp(0, calc(1.27 - var(--ad) * .82), 1); box-shadow: var(--d3); will-change: transform, opacity; } /* Adım rayı — hangi adımdayız. ⚠ Etkin adım RENKLE değil, OPAKLIKLA gösterilir: renk bir BOYAMA özelliğidir; color-mix ile her karede beş pastil yeniden boyanıyordu. Opaklık ve transform bileşiktedir. */ .sahne-js .ray { display: flex; gap: 6px; justify-content: center; margin-top: 22px; flex-wrap: wrap; } .sahne-js .ray__ad { --d: calc(var(--i) - var(--ilerleme) * 4); --ad: max(var(--d), -1 * var(--d)); --etkin: clamp(0, calc(1 - var(--ad)), 1); display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--sh-n200); background: var(--sh-white); font-size: 12.5px; font-weight: 600; color: var(--sh-b700); box-shadow: var(--d1); opacity: calc(.42 + var(--etkin) * .58); } .ray__ad:nth-child(1) { --i: 0; } .ray__ad:nth-child(2) { --i: 1; } .ray__ad:nth-child(3) { --i: 2; } .ray__ad:nth-child(4) { --i: 3; } .ray__ad:nth-child(5) { --i: 4; } .sahne-js .ray__ad::before { content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--sh-a500); transform: scale(calc(.62 + var(--etkin) * .58)); } /* İnce ilerleme çizgisi — genişlik DEĞİL, ölçek animasyonu */ /* ⚠ .sahne__alan bir grid ve place-items:center; genişlik verilmezse çizgi içeriğine göre 0'a çöküyor ve hiç görünmüyordu. */ .sahne-js .yol__cizgi { display: block; position: relative; height: 3px; border-radius: 3px; background: var(--sh-n100); margin: 18px auto 0; width: 420px; max-width: 100%; overflow: hidden; } .sahne-js .yol__cizgi span { position: absolute; inset: 0; border-radius: 3px; background: var(--sh-b500); transform-origin: 0 50%; transform: scaleX(var(--ilerleme)); } } /* Hareket azaltma zaten .sahne-js'i engelliyor; yine de emniyet kemeri: kullanıcı ayarı sayfa açıkken değişirse deste anında tabana düşsün. */ @media (prefers-reduced-motion: reduce) { .yol--gun, .sahne-js .yol--gun { height: auto; } .yapis, .sahne-js .yapis { position: static; min-height: 0; padding-block: 0; display: block; } .sahne-js .sahne--gun { overflow: visible; } .sahne-js .sahne--gun .sahne__alan { min-height: 0; transform: none; display: block; } .sahne-js .deste { display: grid; height: auto; transform-style: flat; } .sahne-js .deste__kart { position: relative; left: auto; top: auto; width: auto; margin: 0; transform: none; opacity: 1; box-shadow: var(--d2); will-change: auto; } .sahne-js .ray, .sahne-js .yol__cizgi { display: none; } } /* ⚠ KARE ÜRETİLMEYEN ORTAM ve BASKI — DESTE DE DÜZLEŞMELİ (ölçüldü). Üstteki .kare-yok kuralı yalnız --giris'i açıyordu; kart destesinin görünürlüğü --giris'e değil --ilerleme'ye bağlı ve --ilerleme'yi yalnız requestAnimationFrame yazıyor. Kare üretmeyen bir ortamda (ekran görüntüsü, PDF/baskı, arka plan sekmesi) --ilerleme 0'da kalıyor ve beş kartın DÖRDÜ opacity:0 ile kayboluyordu — sayfanın anlatı bölümü boş çıkıyordu. Ölçüm: rAF iptal edilmiş sayfada 12 metin öğesi opacity 0.000'da kaldı. Çözüm: bu iki ortamda deste, hareket azaltmadaki tabana düşer. */ html.kare-yok .yol--gun, html.kare-yok.sahne-js .yol--gun { height: auto; } html.kare-yok .yapis, html.kare-yok.sahne-js .yapis { position: static; min-height: 0; padding-block: 0; display: block; } html.kare-yok.sahne-js .sahne--gun { overflow: visible; } html.kare-yok.sahne-js .sahne--gun .sahne__alan { min-height: 0; transform: none; display: block; } html.kare-yok.sahne-js .deste { display: grid; height: auto; transform-style: flat; } html.kare-yok.sahne-js .deste__kart { position: relative; left: auto; top: auto; width: auto; margin: 0; transform: none; opacity: 1; box-shadow: var(--d2); will-change: auto; } html.kare-yok.sahne-js .ray, html.kare-yok.sahne-js .yol__cizgi { display: none; } @media print { .yol--gun, .sahne-js .yol--gun { height: auto; } .yapis, .sahne-js .yapis { position: static; min-height: 0; padding-block: 0; display: block; } .sahne-js .sahne--gun { overflow: visible; } .sahne-js .sahne--gun .sahne__alan { min-height: 0; transform: none; display: block; } .sahne-js .deste { display: grid; height: auto; transform-style: flat; } .sahne-js .deste__kart { position: relative; left: auto; top: auto; width: auto; margin: 0; transform: none; opacity: 1; box-shadow: none; will-change: auto; break-inside: avoid; } .sahne-js .ray, .sahne-js .yol__cizgi { display: none; } } /* -------------------------------------------------------------------------- 3) SAHNE 3 — VERİ TEK YERDE TOPLANIYOR Dört kaynak → merkez panel → üç görünüm. Açık zeminde ızgara zemin ve ince lacivert hatlar; akan ışık YALNIZ pembedir (tek vurgu rengi). -------------------------------------------------------------------------- */ .sahne--akis { padding: 14px 0 6px; } .sahne--akis .sahne__alan { transform: rotateX(calc(9deg + var(--fare-y) * -4deg * var(--hareket))) rotateY(calc(var(--fare-x) * 7deg * var(--hareket))) translate3d(0, calc(var(--kaydir) * -10px * var(--hareket)), 0); transition: transform 420ms var(--ease3); will-change: transform; } /* Yatırılmış ızgara. ⚠ Eğik düzlem kutusundan taşar ve SAYFAYI YATAY KAYDIRIR; kendi kabına kırpılır. Kap kendi perspektifini taşır ki kırpma 3B'yi düzleştirdiğinde kaçış noktası kaybolmasın. */ .zemin { position: absolute; inset: 0; overflow: hidden; perspective: 900px; perspective-origin: 50% 0%; pointer-events: none; } .zemin svg { position: absolute; left: 50%; top: 66%; display: block; width: 132%; height: 460px; transform: translate(-50%, -50%) rotateX(74deg); transform-origin: 50% 50%; -webkit-mask-image: radial-gradient(ellipse 64% 68% at 50% 50%, #000 14%, transparent 80%); mask-image: radial-gradient(ellipse 64% 68% at 50% 50%, #000 14%, transparent 80%); } .zemin path { fill: none; stroke: color-mix(in srgb, var(--sh-b500) 26%, transparent); stroke-width: 1; } .akis { --bosluk: clamp(14px, 3vw, 40px); --disk: clamp(120px, 15vw, 168px); position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr) minmax(0, 1fr); align-items: center; gap: var(--bosluk); transform-style: preserve-3d; } /* --- sol: dört kaynak, en önde --- */ .akis__kaynaklar { display: grid; gap: 9px; transform-style: preserve-3d; } .kaynak { position: relative; display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: 13px; background: var(--sh-white); border: 1px solid var(--sh-n200); box-shadow: var(--d2); transform: translate3d(0, calc((1 - var(--giris)) * 14px), calc(var(--zk, 120) * 1px * var(--z))); } .kaynak:nth-child(1) { --zk: 92; } .kaynak:nth-child(2) { --zk: 84; } .kaynak:nth-child(3) { --zk: 76; } .kaynak:nth-child(4) { --zk: 68; } .kaynak__ad { flex: 1 1 auto; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--sh-n900); } .kaynak__d { font: 800 13px/1 var(--ff-b); color: var(--sh-b600); font-variant-numeric: tabular-nums; flex: none; } .kaynak__im { width: 26px; height: 26px; border-radius: 8px; flex: none; display: grid; place-items: center; background: var(--sh-b50); color: var(--sh-b500); } .kaynak__im svg { width: 15px; height: 15px; display: block; } /* --- orta: tek kayıt paneli --- */ .akis__merkez { position: relative; display: grid; place-items: center; min-height: 200px; transform-style: preserve-3d; } .disk { position: relative; width: var(--disk); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; text-align: center; color: #fff; background: radial-gradient(circle at 34% 26%, rgba(255,255,255,.22), transparent 58%), linear-gradient(150deg, var(--sh-b800) 0%, var(--sh-b500) 58%, var(--sh-b400) 100%); /* açık zeminde derinlik: parlama değil, sert olmayan katmanlı gölge */ box-shadow: 0 8px 18px rgba(1,29,108,.20), 0 24px 48px rgba(1,29,108,.26); transform: translate3d(0, calc((1 - var(--giris)) * 14px), calc(56px * var(--z))); } .disk b { display: block; font: 800 15px/1.2 var(--ff-b); padding: 0 14px; } .disk i { display: block; font-style: normal; font-size: 10.5px; opacity: .82; margin-top: 4px; } /* yörünge — yalnız transform döner */ .yorunge { position: absolute; left: 50%; top: 50%; width: clamp(160px, 21vw, 240px); aspect-ratio: 1; border-radius: 50%; border: 1.5px dashed color-mix(in srgb, var(--sh-b500) 30%, transparent); transform: translate(-50%, -50%) rotateX(66deg) translateZ(calc(28px * var(--z))); animation: yorungeDon 26s linear infinite; pointer-events: none; } @keyframes yorungeDon { from { transform: translate(-50%, -50%) rotateX(66deg) rotateZ(0deg) translateZ(calc(28px * var(--z))); } to { transform: translate(-50%, -50%) rotateX(66deg) rotateZ(360deg) translateZ(calc(28px * var(--z))); } } /* --- sağ: üç görünüm, kademeli derinlik --- */ .akis__cikis { position: relative; display: flex; flex-direction: column; gap: 10px; transform-style: preserve-3d; } .gorunum { position: relative; border-radius: 15px; padding: 13px 15px; background: var(--sh-white); border: 1px solid var(--sh-n200); box-shadow: var(--d2); } /* ⚠ Burada 3px'lik renkli ÜST KENAR vardı. Yuvarlatılmış köşede kalın düz bir çizgi olarak oturuyor ve bir çizim hatası gibi okunuyordu (390px'de özellikle belirgin). Rol rengini zaten h4'teki nokta taşıyor; ikinci kez söylemeye gerek yok. Yerine sol kenarda ince bir imza: akışın soldan geldiğini de pekiştirir. */ .gorunum::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--rol, var(--sh-b500)); } .gorunum h3 { font: 700 14px/1.3 var(--ff-b); margin: 0 0 5px; display: flex; align-items: center; gap: 7px; color: var(--sh-n900); } .gorunum h3::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--rol, var(--sh-b500)); flex: none; } .gorunum p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--sh-n600); } .akis__cikis .gorunum:nth-of-type(1) { --rol: var(--sh-b400); transform: translate3d(0, calc((1 - var(--giris)) * 14px), calc(26px * var(--z))) rotateY(-7deg); } .akis__cikis .gorunum:nth-of-type(2) { --rol: var(--sh-b500); transform: translate3d(0, calc((1 - var(--giris)) * 14px), calc(8px * var(--z))) rotateY(-7deg); } .akis__cikis .gorunum:nth-of-type(3) { --rol: var(--sh-b700); transform: translate3d(0, calc((1 - var(--giris)) * 14px), calc(-10px * var(--z))) rotateY(-7deg); } /* --- bağlantı hatları --- */ /* Her hat BAĞLANDIĞI ÖĞENİN ÇOCUĞUDUR; uzunluğu --bosluk ve --disk'ten türer, yüzdeyle tahmin edilmez. Akan ışık ::after'dır ve hattın tamamı kadar geniştir: translateX(-100%) → (100%) ile uçtan uca geçer. */ .hat { position: absolute; height: 2px; border-radius: 2px; overflow: hidden; background: linear-gradient(90deg, color-mix(in srgb, var(--sh-b500) 20%, transparent), color-mix(in srgb, var(--sh-b500) 62%, transparent)); pointer-events: none; } .hat::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 40%, var(--sh-a500) 50%, transparent 60%); animation: hatNokta 2.8s var(--ease3) infinite; animation-delay: var(--gec, 0s); will-change: transform; } @keyframes hatNokta { 0% { transform: translateX(-100%); opacity: 0; } 14% { opacity: 1; } 84% { opacity: 1; } 100% { transform: translateX(100%); opacity: 0; } } /* dikey toplayıcı — kaynaklardan gelenleri tek hatta bindirir */ .omurga { position: absolute; top: 6%; bottom: 6%; width: 2px; border-radius: 2px; pointer-events: none; transform: translateZ(calc(var(--zo, 0) * 1px * var(--z))); background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--sh-b500) 40%, transparent) 20%, color-mix(in srgb, var(--sh-b500) 40%, transparent) 80%, transparent); } /* kaynak → sol omurga */ .akis__kaynaklar .omurga { right: calc(-1 * var(--bosluk) / 2); --zo: 80; } .kaynak > .hat { top: 50%; margin-top: -1px; right: calc(-1 * var(--bosluk) / 2); width: calc(var(--bosluk) / 2); } .kaynak:nth-child(1) > .hat { --gec: 0s; } .kaynak:nth-child(2) > .hat { --gec: .18s; } .kaynak:nth-child(3) > .hat { --gec: .36s; } .kaynak:nth-child(4) > .hat { --gec: .54s; } /* omurga → disk */ .hat--g { top: 50%; margin-top: -1px; left: calc(-1 * var(--bosluk) / 2); right: calc(50% + var(--disk) / 2 - 6px); --gec: .62s; transform: translateZ(calc(68px * var(--z))); } /* disk → sağ omurga */ .hat--d { top: 50%; margin-top: -1px; left: calc(50% + var(--disk) / 2 - 6px); right: calc(-1 * var(--bosluk) / 2); --gec: .92s; transform: translateZ(calc(30px * var(--z))); } .akis__cikis .omurga { left: calc(-1 * var(--bosluk) / 2); --zo: 8; } .gorunum > .hat { top: 50%; margin-top: -1px; left: calc(-1 * var(--bosluk) / 2); width: calc(var(--bosluk) / 2); } .akis__cikis .gorunum:nth-of-type(1) > .hat { --gec: 1.16s; } .akis__cikis .gorunum:nth-of-type(2) > .hat { --gec: 1.30s; } .akis__cikis .gorunum:nth-of-type(3) > .hat { --gec: 1.44s; } @media (max-width: 860px) { .akis { grid-template-columns: minmax(0, 1fr); gap: 16px; } .akis__merkez { min-height: 0; padding: 4px 0; } .kaynak, .disk { transform: translate3d(0, calc((1 - var(--giris)) * 14px), calc(34px * var(--z))); } .akis__cikis .gorunum:nth-of-type(1), .akis__cikis .gorunum:nth-of-type(2), .akis__cikis .gorunum:nth-of-type(3) { transform: translate3d(0, calc((1 - var(--giris)) * 14px), 0); } .hat, .omurga { display: none; } .zemin svg { height: 320px; top: 56%; } } /* -------------------------------------------------------------------------- 4) SAHNE 4 — MÜFREDAT: sistemde tanımlı konu sayısı Sayaçların saydığı şey GERÇEKTİR: LGS 57 · TYT 171 · AYT 148 = 376. Uydurma oran / uydurma öğrenci sayısı yok. -------------------------------------------------------------------------- */ .sahne--mufredat { padding: 10px 0 6px; } .sahne--mufredat .sahne__alan { display: grid; gap: clamp(14px, 2vw, 22px); grid-template-columns: repeat(3, minmax(0, 1fr)); transform: rotateX(calc(6deg + var(--fare-y) * -4deg * var(--hareket))) rotateY(calc(var(--fare-x) * 6deg * var(--hareket))) translate3d(0, calc(var(--kaydir) * -10px * var(--hareket)), 0); transition: transform 420ms var(--ease3); will-change: transform; } .levha { position: relative; padding: 20px 20px 18px; border-radius: 18px; background: var(--sh-white); border: 1px solid var(--sh-n200); box-shadow: var(--d3); transform: translate3d(0, calc((1 - var(--giris)) * 18px), calc(var(--zl, 0) * 1px * var(--z))) rotateY(calc(var(--ry, 0) * 1deg)); transition: transform 620ms var(--ease3); transition-delay: calc(var(--sira, 0) * 90ms); } .levha:nth-child(1) { --zl: 40; --ry: 7; --sira: 0; } .levha:nth-child(2) { --zl: 76; --ry: 0; --sira: 1; } .levha:nth-child(3) { --zl: 40; --ry: -7; --sira: 2; } .levha__b { font: 700 11px/1 var(--ff-g); letter-spacing: .09em; text-transform: uppercase; color: var(--sh-b500); margin: 0 0 10px; } .levha__d { font: 800 clamp(34px, 5vw, 52px)/1 var(--ff-b); letter-spacing: -.03em; margin: 0; color: var(--sh-n900); font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: .28em; } .levha__d span:not(.sayac) { font-size: .40em; font-weight: 700; letter-spacing: 0; color: var(--sh-n500); } .levha__e { margin: 8px 0 0; font-size: 13px; line-height: 1.55; color: var(--sh-n600); } .toplam { margin: clamp(18px, 3vw, 28px) auto 0; max-width: 640px; text-align: center; } .toplam__bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--sh-n100); } .toplam__bar span { display: block; height: 100%; } .toplam__ad { display: flex; gap: 16px; justify-content: center; margin: 10px 0 0; font-size: 12px; color: var(--sh-n500); flex-wrap: wrap; } .toplam__ad span { display: inline-flex; align-items: center; gap: 6px; } .toplam__ad i { width: 9px; height: 9px; border-radius: 3px; background: var(--r, var(--sh-b500)); flex: none; } .toplam__not { margin: 12px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--sh-n600); } .toplam__not strong { color: var(--sh-n900); font-weight: 700; } @media (max-width: 760px) { .sahne--mufredat .sahne__alan { grid-template-columns: minmax(0, 1fr); transform: none; } .levha { transform: translate3d(0, calc((1 - var(--giris)) * 18px), 0); } } /* -------------------------------------------------------------------------- 5) ORTAK -------------------------------------------------------------------------- */ .sahne-not { margin: 22px auto 0; max-width: 62ch; text-align: center; font-size: 14.5px; line-height: 1.6; color: var(--sh-n600); } .sahne-not strong { color: var(--sh-n900); font-weight: 600; } .sahne--koyu .sahne-not { color: #C3CCEE; } .sahne--koyu .sahne-not strong { color: #FFFFFF; } .yalniz-okur { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .sahne :focus-visible { outline: 2px solid var(--sh-b500); outline-offset: 2px; border-radius: 6px; } .sahne--koyu :focus-visible { outline-color: #FFFFFF; }