pembe; nötr palete çekiliyor. */
.feat2 code {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: .92em;
color: var(--ink);
background: var(--hover-wash);
border-radius: 6px;
padding: 1px 6px;
}
/* MADDE LİSTELERİ (modül sayfalarındaki ✅ listesi).
2026-08-20 gecesi, Dilek'in düzeltmesi: eski sayfalarda `` bilerek
açılmamıştı, çünkü o hâliyle maddeler alt alta değil YAN YANA akıyordu ve
istenen görünüm buydu. İlk geçişte alt alta "kayıt satırı"na çevrilmişti
(ince ayırıcı çizgiler); geri alındı. Düzgün ` ` duruyor, akış saran bir
sıra: `display: flex` + `flex-wrap`.
✅ EMOJİSİ MARKUP'TAN KALKTI. Emoji her platformda YEŞİL çiziliyor ve
renkli emojiye CSS `color` işlemiyor — paletin dışındaki tek renkti.
Yerine düz metin ✓ (U+2713) `::before` ile geliyor ve lacivert.
(Mühür kırmızısı bilerek kullanılmadı: 20 kırmızı onay işareti aksanı
aksan olmaktan çıkarırdı — §15.1'deki "on üç bağlantı" gerekçesinin aynısı.) */
.feat2__rows {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 14px 34px;
margin: 0;
padding: 0;
max-width: var(--measure);
}
.feat2__rows li {
font-size: 17px;
line-height: 1.47;
letter-spacing: -0.022em;
color: var(--ink-soft);
}
/* Onay işareti: lacivert ve gövdeden bir tık koyu, madde başlangıcını
işaretlesin diye. Outfit'te ✓ yoksa tarayıcı yalnız o glifte yedek
fonta düşer — metin etkilenmez. */
.feat2__rows li::before {
content: "\2713";
margin-right: 9px;
color: var(--ink);
font-weight: 600;
}
.feat2__rows li strong {
color: var(--ink);
font-weight: 500;
}
/*--------------------------------------------------------------------------
Tepe: ortalanmış iri başlık + tek satır özet + ürün görseli
(İnsan fotoğrafı YOK — o yalnız sayfa sonundaki .photo-cta kartında.)
--------------------------------------------------------------------------*/
/* `overflow: hidden` YOK (bilerek): fotoğraf beyaz bandın tam dibinde
bitiyor ve gölgesinin bir kısmı alttaki gri banda taşıyor. Kırpılırsa
kart "kesilmiş" gibi duruyor; taşınca bant sınırını geçen yumuşak bir
gölge oluyor ve kasıtlı görünüyor. */
.feat2--a .fhero {
background: var(--paper);
padding: 76px 0 0;
text-align: center;
}
.feat2--a .fhero h1 {
font-size: clamp(34px, 5vw, 62px);
line-height: 1.06;
font-weight: 700;
letter-spacing: -0.022em;
color: var(--ink);
margin: 0 0 20px;
}
.feat2--a .fhero__lead {
font-size: clamp(19px, 2vw, 24px);
line-height: 1.35;
letter-spacing: -0.02em;
font-weight: 400;
color: var(--ink-soft);
max-width: 760px;
margin: 0 auto;
}
/* TEPE GÖRSELİ = İNSAN FOTOĞRAFI (2026-08-20 akşamı, Dilek'in kararı).
§11'de "şablon A'da tepede insan fotoğrafı yok" yazıyordu; o karar
DEĞİŞTİ. Gerekçe: özellik sayfasının işi yeteneği İSTETMEK, mekanizmayı
anlatmak değil — insan faydayı, ekran görüntüsü mekanizmayı anlatır.
Ekran görüntüsü artık gövdede, kanıtladığı cümlenin yanında duruyor
(aşağıdaki `.shot`). Ayrıca her eski sayfanın zaten bir breadcrumb
fotoğrafı var, ekran görüntüsü ise yalnız bazılarında — kalan ~30 sayfa
böylece mekanik biçimde taşınabiliyor.
Kutu fotoğrafların KENDİ oranında (1770x650 = 2.723), böylece kırpma yok. */
.feat2--a .fhero__art {
position: relative;
width: 100%;
margin: 56px auto 0;
aspect-ratio: 2.723;
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--lift-1);
}
.feat2--a .fhero__art img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
max-width: none;
margin: 0;
}
/* MODÜL SAYFALARI (2026-08-20 akşamı) — tepede insan fotoğrafı DEĞİL, modülün
kendi ekran görüntüsü var. Dilek: "Modüller farklı. Kendi resimleri var."
Kullanılan görsel `module-cards/1..12.png` (1920x1080 çıplak pencere);
eşleme ana sayfadaki modül rayının bağlantılarından doğrulandı.
Eski `images/work/2.jpg` görselleri MONİTÖRLÜ olduğu için bırakıldı. */
.feat2--a .fhero__art--window {
aspect-ratio: 16 / 9;
}
/* EKRAN GÖRÜNTÜSÜ SONRAKİ BANDIN ALTINA GİRİYOR (2026-08-20 gecesi, Dilek:
"tepedeki ekran görüntüsünü biraz alttan keser misin... sanki birazı
sonraki section'ın altında kalmış gibi").
Kırpma DEĞİL, örtme: görsel tam 16/9 duruyor, sonraki bant negatif üst
boşlukla yukarı çekilip üstüne biniyor. Fark şu: kırpsaydık pencere
"kesilmiş" görünürdü; örtünce sayfanın altına doğru DEVAM ediyormuş gibi
duruyor ve gölgesi de bandın altında kalıyor.
Üç şey gerekiyor:
1. `background`: `.feat2__section` normalde ŞEFFAF, kapsayıcının grisini
gösteriyor. Şeffaf kalırsa örtmez, görsel içinden görünür.
2. `z-index`: görselin `![]()
`i mutlak konumlu, yani BOYAMA SIRASINDA
sonraki kardeşlerin zemininden sonra çiziliyor. Konumlandırılmış bir
bağlam olmadan bant görselin ALTINDA kalır.
3. Örtme payı orana bağlı olmalı: `min(1152px, 100vw - 2*pad)` görselin
genişliği, yüksekliği bunun %56.25'i (16/9). Genişliğin %8'i =
görselin ~%14'ü, ekran boyutundan bağımsız olarak sabit. Sabit px
verilseydi telefonda görselin yarısını yer, geniş ekranda kaybolurdu. */
.feat2--tuck .fhero + .feat2__section {
position: relative;
z-index: 1;
background: var(--canvas);
margin-top: calc(min(1152px, 100vw - 2 * var(--pad)) * -0.08);
}
/* Bant beyazsa da aynı kural geçerli — zemin `--white` sınıfından gelir,
burada yalnız örtme ve sıralama var. */
.feat2--tuck .fhero + .feat2__section--white {
background: var(--paper);
}
/* Modül sayfasının başlık altındaki dört etiketi. Tema bunları `h5` olarak
yazıyordu; yeni dilde nötr haplar — kromatik aksan değil, sayfanın ne
anlattığını bir bakışta veren bir özet satırı. */
.fhero__tags {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin: 24px 0 0;
}
.fhero__tags span {
font-size: 15px;
line-height: 1.2;
font-weight: 400;
padding: 9px 16px;
border-radius: 980px;
background: var(--hover-wash);
color: var(--ink);
}
/* Bölüm başlığının altındaki alt başlık cümlesi. Temada `h3`; başlık
düzeyi korunuyor (SEO), ölçek gövdeye yaklaştırılıyor. */
.feat2__subtitle {
font-size: clamp(19px, 1.8vw, 21px);
line-height: 1.42;
letter-spacing: -0.02em;
font-weight: 400;
color: var(--ink-soft);
max-width: var(--measure);
margin: -10px 0 32px;
}
/* VİDEO KARTI. Temanın kurgusu korundu: kapak görseli + oynat düğmesi +
`data-lity` ile açılan YouTube lightbox'ı (lity site genelinde yüklü,
`_Layout.cshtml`). Kapak 1770x700 — kutu o oranda, kırpma yok. */
/* Video kartı da ortalı — gerekçe aşağıda, `.shot` notunda. */
.vshot {
position: relative;
display: block;
width: min(1020px, 100%);
margin: 36px auto 0;
aspect-ratio: 1770 / 700;
border-radius: 14px;
overflow: hidden;
box-shadow: var(--lift-1);
transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.vshot:hover {
transform: translateY(-4px);
box-shadow: var(--lift-2);
text-decoration: none;
}
.vshot__cover {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Perde: oynat düğmesi her kapakta seçilsin diye. */
.vshot::after {
content: "";
position: absolute;
inset: 0;
background: rgba(17,26,51,.28);
transition: background .3s var(--ease);
}
.vshot:hover::after {
background: rgba(17,26,51,.18);
}
.vshot__play {
position: absolute;
z-index: 1;
top: 50%;
left: 50%;
width: 76px;
height: 76px;
transform: translate(-50%, -50%);
transition: transform .3s var(--ease);
}
.vshot:hover .vshot__play {
transform: translate(-50%, -50%) scale(1.08);
}
/* ÜRÜN GÖRSELİ — gövde bölümlerinde, iddiayı kanıtladığı yerde durur.
`aspect-ratio` YOK: kutu görselin kendi oranını alır (`height: auto`).
Böylece tek kural hem yeni 1920x1080 çıplak pencereleri (16/9 zaten
kendiliğinden çıkıyor) hem de eski sayfalardaki `images/work/*.jpg`
ürün görsellerini KIRPMADAN gösteriyor. Sabit bir oran verilseydi
eski görsellerin bir kısmı kesilirdi — onlar içerik, kesilemez. */
/* ORTALI (2026-08-30, Dilek: "her resim veya video bölümünü yatay olarak
sayfada ortala"). Önceden `margin: 36px 0 0` ile sola yaslıydı; kutu
1020px, kabuk 1200px, yani sağda 180px'lik tek yanlı bir boşluk kalıyordu.
23 Ağustos'ta metin sütunu `--measure: 100%` ile kabuğun tamamına açılınca
görsel artık ne metnin sağ kenarına ne de ızgaranınkine yetişiyordu —
hizasız duran bir blok. `auto` boşluğu iki yana eşit paylaştırıyor.
Aynı karar dört yerde: `.vshot`, `.shot`, `.feat2__rich img`,
`page2.css` içindeki `.diagram`. */
.feat2 .shot {
position: relative;
width: min(1020px, 100%);
margin: 36px auto 0;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(17,26,51,.10), 0 34px 70px -30px rgba(17,26,51,.45);
}
.feat2 .shot img {
display: block;
width: 100%;
height: auto;
max-width: none;
margin: 0;
}
/* DAR GÖRSEL (2026-09-30, Dilek: PersonalConfidentialData'daki güvenlik
ayarları görseli "%60'ı kadar olsun"). Küçük bir diyalog penceresi tam
1020px'e büyütülünce yazısı iri ve bulanık duruyordu. 1020 × 0.6 = 612px;
dar ekranda yine %100'e iner. */
.feat2 .shot--narrow {
width: min(612px, 100%);
}
/*--------------------------------------------------------------------------
ESKİ İÇERİK BLOKLARI (2026-08-20 akşamı)
--------------------------------------------------------------------------
Kalan özellik sayfalarının metni `LocalizationWeb.xlsx`ten geliyor ve
Dilek'in kararı NET: "içeriğe dokunma." Metin, sırası ve görselleri aynen
kalıyor; değişen yalnız kabuk.
Satın alınan tema ``ü PARAGRAF yerine, ``yi bölüm başlığı yerine
kullanıyor. Sayfaları yeniden yazarken bunlar `.feat2__title` + `
`ye
çevrildi; ama `Html.Raw` ile gelen bloklarda (PetabyteArchiving) etiketleri
biz seçmiyoruz — hatta xlsx'teki HTML yer yer bozuk (`
` gibi).
`.feat2__rich` o ham HTML'i olduğu gibi alıp yeni ölçeklere oturtuyor.
--------------------------------------------------------------------------*/
.feat2 .feat2__rich {
max-width: var(--measure);
}
.feat2 .feat2__rich > h2,
.feat2 .feat2__rich h2 {
font-size: clamp(26px, 2.6vw, 32px);
line-height: 1.14;
font-weight: 600;
letter-spacing: 0.007em;
color: var(--ink);
margin: 0 0 28px;
}
.feat2 .feat2__rich h3 {
font-size: 20px;
line-height: 1.25;
font-weight: 600;
letter-spacing: 0.011em;
color: var(--ink);
margin: 40px 0 12px;
}
/* Temanın "paragraf yerine h4" alışkanlığı: gövde ölçeğine indiriliyor. */
.feat2 .feat2__rich h4,
.feat2 .feat2__rich p {
font-size: 17px;
line-height: 1.47;
letter-spacing: -0.022em;
font-weight: 400;
color: var(--ink-soft);
margin: 0 0 20px;
}
.feat2 .feat2__rich strong {
color: var(--ink);
font-weight: 500;
}
/* Listeler: nokta yerine ince ayırıcı satırlar — `.feat2__rows` ile
aynı dil. `h4 > ul` iç içe geldiği için seçici gevşek tutuldu.
İKİ SÜTUN (2026-08-20 gecesi). Bu bloğun maddeleri üç-beş kelimelik
teknik satırlar ("OCR görevleri", "Küme desteği"); tek sütunda her biri
1000px'lik bir satırın solunda tek başına duruyordu ve sayfa 4.151px'e
çıkıyordu. `columns` kullanıldı, ızgara değil: madde sayısı bilinmiyor
(ham HTML) ve sütunlar kendiliğinden dengeleniyor.
`break-inside: avoid` madde ortadan bölünmesin diye. */
.feat2 .feat2__rich ul,
.feat2 .feat2__rich ol {
list-style: none;
margin: 0 0 20px;
padding: 0;
columns: 2;
column-gap: 40px;
}
/* ÖZGÜLLÜK NOTU (yol boyunca üç kez çarptık): ham blok kendi içinde
`class="portfolio-details__content"` taşıyor, yani temanın liste
kuralları burada da geçerli. Üçü de tek tek yenilmek zorunda:
.portfolio-details__content ul li → padding-left: 26px, font-weight: 600
.portfolio-details__content ul li::before → siyah 11px madde noktası
.portfolio-details__content ul li:not(:last-child) → margin-bottom: 25px
Bu yüzden seçiciler `.feat2 .feat2__rich ...` biçiminde iki sınıflı
yazıldı; sonuncusu için ayrıca `ul li:not(:last-child)` gerekiyor. */
.feat2 .feat2__rich li {
font-size: 17px;
line-height: 1.47;
letter-spacing: -0.022em;
font-weight: 400;
color: var(--ink-soft);
padding: 13px 0;
margin: 0;
border-top: 1px solid rgba(28,39,76,.12);
break-inside: avoid; /* iki sütunlu akışta madde ortadan bölünmesin */
}
.feat2 .feat2__rich ul li:not(:last-child),
.feat2 .feat2__rich ol li:not(:last-child) {
margin-bottom: 0;
}
/* Temanın siyah 11px madde noktası kaldırıldı: yeni dilde listeyi
nokta değil ince ayırıcı çizgi taşıyor (`.feat2__rows` ile aynı).
Nokta mutlak konumlu bir ::before olduğu için `list-style: none`
onu kaldırmıyordu — ayrıca gövde metninin biraz üstünde duruyor
ve hizasız görünüyordu. */
.feat2 .feat2__rich li::before {
display: none;
}
.feat2 .feat2__rich li:last-child {
border-bottom: 1px solid rgba(28,39,76,.12);
}
/* Ham blokta gelen görsel de pencere gibi görünsün; `.shot` ile aynı
gerekçeyle ORTALI (bkz. yukarıdaki `.shot` notu). */
.feat2 .feat2__rich img {
display: block;
width: 100%;
max-width: min(1020px, 100%);
height: auto;
margin: 36px auto;
border-radius: 14px;
box-shadow: 0 1px 3px rgba(17,26,51,.10), 0 34px 70px -30px rgba(17,26,51,.45);
}
/* Giriş paragrafı: gövdeden bir ölçek büyük ve koyu — sayfanın ilk
cümlesi başlıkla gövde arasında bir köprü kuruyor. */
.lede p {
font-size: clamp(19px, 1.8vw, 21px);
line-height: 1.42;
letter-spacing: -0.02em;
color: var(--ink);
max-width: var(--measure);
}
/* Düz metin bölümleri: satır uzunluğu `--measure` ile yönetiliyor. */
.feat2__prose {
max-width: var(--measure);
}
/* Izgaranın önündeki giriş cümlesi / ardından gelen kapanış paragrafı */
.feat2__intro {
margin-bottom: 32px;
}
.feat2__outro {
margin-top: 32px;
}
/*--------------------------------------------------------------------------
Kartlar
--------------------------------------------------------------------------*/
.spec-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.spec-grid--3 {
grid-template-columns: repeat(3, 1fr);
}
.spec {
background: var(--paper);
border-radius: var(--radius);
padding: 28px;
min-height: 260px;
display: flex;
flex-direction: column;
}
.spec img {
width: 30px;
height: 30px;
margin-bottom: 18px;
}
.spec h3 {
font-size: 20px;
line-height: 1.2;
font-weight: 600;
letter-spacing: 0.011em;
color: var(--ink);
margin: 0 0 8px;
}
.spec p {
font-size: 14px;
line-height: 1.42;
letter-spacing: -0.016em;
color: var(--ink-soft);
margin: 0;
}
/* İkili geniş kart — ana sayfadaki duo kurgusunun aynısı */
.duo {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.wide-card {
background: var(--paper);
border-radius: var(--radius);
padding: 40px;
}
.wide-card h3 {
font-size: 24px;
line-height: 1.16;
font-weight: 600;
letter-spacing: 0.007em;
color: var(--ink);
margin: 0 0 16px;
}
/* AYRIM KARTI — sayfanın en kritik cümlesi.
2026-08-20: eskiden marka sarısıydı (#ffda7a); palet sarıyı bıraktı.
Yerine ana sayfadaki KOYU KART geldi: lacivert zemin, beyaz başlık,
üst etiket mühür kırmızısı. Vurguyu artık renk lekesi değil, bandın
içinde açılan koyu bir yüzey veriyor. */
.callout {
background: var(--navy-deep);
border-radius: var(--radius);
padding: 44px;
box-shadow: var(--lift-1);
}
/* Üst etiket İSTEĞE BAĞLI: başlığı "Bir ayrım: ..." gibi bir önekle
başlayan kartlarda önek buraya taşınır, başlık kısalır.
KONTRAST TUZAĞI: koyu yüzeyde her zaman --seal-light kullan;
--seal (#C8442F) lacivert üstünde yalnız 3.55:1 eder. */
.callout__eyebrow {
display: block;
font-size: 12px;
font-weight: 500;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--seal-light);
margin: 0 0 12px;
}
.callout h3 {
font-size: 24px;
line-height: 1.16;
font-weight: 600;
letter-spacing: 0.007em;
margin: 0 0 16px;
color: #fff;
}
.callout .feat2__body p {
color: rgba(255,255,255,.82);
}
.callout .feat2__body strong {
color: #fff;
}
.callout a {
color: var(--link-dark);
}
.callout code {
background: rgba(255,255,255,.14);
color: #fff;
}
/* Fotoğraf kartı — ana sayfadaki .pcard--photo kurgusu (yazı fotoğrafın
üstünde, karartma perdesi). Perde, mevcut fotoğrafların üst kısmı dolu
olduğu için var; tepesi boş fotoğraf gelirse kaldırılabilir.
Perde artık saf siyah değil lacivert kırıklı — fotoğrafın üstündeki
karartma da paletin içinde kalsın diye. */
.photo-cta {
position: relative;
display: flex;
align-items: flex-start;
min-height: 380px;
border-radius: var(--radius);
overflow: hidden;
text-decoration: none;
}
.photo-cta img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 22%;
}
.photo-cta::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(17,26,51,.72) 0%, rgba(17,26,51,.40) 42%, rgba(17,26,51,0) 68%);
}
.photo-cta > div {
position: relative;
z-index: 1;
padding: 36px 40px;
max-width: 620px;
}
.photo-cta h3 {
font-size: 26px;
line-height: 1.16;
font-weight: 600;
letter-spacing: 0.007em;
color: #fff;
margin: 0 0 10px;
}
.photo-cta p {
font-size: 15px;
line-height: 1.45;
color: rgba(255,255,255,.86);
margin: 0 0 12px;
}
/* Bağlantı metni beyaz, OK kırmızı — ana sayfadaki kural.
(Eskiden metnin kendisi Apple mavisiydi: #2997ff.) */
.photo-cta span {
font-size: 15px;
color: var(--link-dark);
}
.photo-cta span::after {
content: "\00a0\00a0\203A";
display: inline-block;
color: var(--seal-light);
transition: transform .25s ease;
}
.photo-cta:hover span::after {
transform: translateX(4px);
}
/*--------------------------------------------------------------------------
ÖZELLİK LİSTESİ KARTI (Feature/Index) — görsel üstte, metin altta
--------------------------------------------------------------------------*/
.fgrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.fcard {
display: flex;
flex-direction: column;
background: var(--paper);
border-radius: var(--radius);
overflow: hidden;
text-decoration: none;
color: inherit;
}
.fcard:hover {
color: inherit;
text-decoration: none;
}
/* Kart görselleri dekoratif başlık afişleri ve HEPSİ 1920x1048 (ölçüldü).
Kutu o oranı alıyor; 16/9 verilseydi her afişten ~%3 kırpılırdı. */
.fcard__media {
aspect-ratio: 1920 / 1048;
overflow: hidden;
}
/* Modül listesindeki görseller farklı oranda (740x500). */
.fcard__media--portfolio {
aspect-ratio: 740 / 500;
}
/* Modül listesi kartında BAŞLIK VAR (özellik listesinde yoktu — orada
başlıklar görselin içine yazılıydı ve markup'ta yorumdaydı). */
.fcard__body h3 {
font-size: 20px;
line-height: 1.2;
font-weight: 600;
letter-spacing: 0.011em;
color: var(--ink);
margin: 0 0 14px;
}
.fcard__media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.fcard__body {
display: flex;
flex-direction: column;
flex: 1;
padding: 24px 28px 28px;
}
.fcard__body p {
font-size: 15px;
line-height: 1.45;
letter-spacing: -0.016em;
color: var(--ink-soft);
margin: 0 0 18px;
}
.fcard__link {
margin-top: auto;
font-size: 15px;
color: var(--link);
}
.fcard__link::after {
content: "\00a0\00a0\203A";
display: inline-block;
color: var(--seal);
transition: transform .25s ease;
}
.fcard:hover .fcard__link::after {
transform: translateX(4px);
}
/*--------------------------------------------------------------------------
DERİNLİK ve HAREKET (2026-08-20) — home2.css'teki sistemin aynısı
--------------------------------------------------------------------------*/
/* Kartlar artık yüzey değil nesne: dururken çok hafif bir gölge taşır. */
.feat2 .spec,
.feat2 .wide-card,
.feat2 .fcard,
.feat2 .photo-cta {
box-shadow: var(--lift-1);
transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
/* Tıklanabilir kartlar: tam yükselme. */
a.photo-cta:hover,
a.fcard:hover {
transform: translateY(-4px);
box-shadow: var(--lift-2);
}
/* 2026-08-23 (Dilek): ana sayfadaki `.process__item` kararının aynısı burada
da uygulandı — "alttaki kartlarda da hover'da bir hareket olsun."
Buradaki eski kural `.spec`/`.wide-card`ı bilerek sabit tutuyordu: bunlar
bağlantı değil, tıklanabilir kartlarla birebir aynı 4px'lik yükselme
"buraya tıklanır" diye yanlış söz verirdi. Gerekçe hâlâ geçerli, o yüzden
hareket VAR ama bir tık daha yumuşak: 3px + aynı gölge kademesi.
`.callout` BİLEREK DIŞARIDA: sayfa genişliğinde tek bir koyu bant o —
3px bile oynadığında kart değil SAYFA seğirmiş gibi duruyor. Hareket
ızgara içindeki kartlara ait. */
.feat2 .spec:hover,
.feat2 .wide-card:hover {
transform: translateY(-3px);
box-shadow: var(--lift-2);
}
/* İkonlar ![]()
olarak geldiği (ve SVG dolgusu #212121/#1A1919 olduğu)
için renk CSS'ten doğrudan verilemiyor; filtreyle çevriliyor. Değerler
tahmin DEĞİL: canvas üstünde sayısal çözüldü, sapma 0.00 → #1C274C.
Baştaki brightness(0) normalleştirme: kaynak hangi koyu ton olursa olsun
önce saf siyaha iner, zincir oradan hedefe taşır. */
.feat2 .spec img {
filter: brightness(0) invert(0.116) sepia(0.556) saturate(26.77) hue-rotate(216.6deg) brightness(0.681) contrast(0.863);
transition: transform .3s var(--ease);
}
/* İkon kartla aynı ritimde hafifçe büyür (ana sayfayla birebir aynı ölçü). */
.feat2 .spec:hover img {
transform: scale(1.08);
}
/* --- Beliriş: tek dilbilgisi. 18px yükselme + opaklık, 600ms, 70ms kademeli.
Gizleme sınıfını (.m-reveal) motion2.js ekler ve YALNIZ ekran dışındaki
öğelere ekler — böylece açılışta hiçbir şey yanıp sönmez ve betik hiç
çalışmazsa sayfa tamamen normal görünür. */
.feat2 .m-reveal {
opacity: 0;
transform: translateY(34px);
}
.feat2 .m-reveal.is-in {
opacity: 1;
transform: none;
transition: opacity .95s var(--ease), transform .95s var(--ease);
}
/* --- Tepe girişi: scroll beklemez, ilk karede sırayla girer. Saf CSS
animasyonu (`both` dolgusuyla) — JS'e bağlı olmadığı için yanıp sönme
riski yok. @keyframes m-rise home2.css'te tanımlı; keyframe'ler belge
genelinde geçerli olduğu için burada tekrar edilmiyor. */
.feat2--a .fhero h1 {
animation: m-rise 1.05s var(--ease) both;
}
.feat2--a .fhero__lead {
animation: m-rise 1.05s var(--ease) .14s both;
}
.feat2--a .fhero__art {
animation: m-rise 1.25s var(--ease) .42s both;
}
/* --- Klavye erişilebilirliği */
.feat2 a:focus-visible,
.feat2 button:focus-visible {
outline: 2px solid var(--seal);
outline-offset: 3px;
border-radius: 6px;
}
/* --- Hareketi azaltılmış tercih: HER ŞEY durur, sayfa eksiksiz görünür. */
@media (prefers-reduced-motion: reduce) {
.feat2 .m-reveal,
.feat2 .m-reveal.is-in {
opacity: 1;
transform: none;
transition: none;
}
.feat2--a .fhero h1,
.feat2--a .fhero__lead,
.feat2--a .fhero__art {
animation: none;
}
.feat2 .spec,
.feat2 .spec img,
.feat2 .wide-card,
.feat2 .fcard,
.feat2 .photo-cta {
transition: none;
}
a.photo-cta:hover,
a.fcard:hover,
.feat2 .spec:hover,
.feat2 .spec:hover img,
.feat2 .wide-card:hover {
transform: none;
}
}
/*--------------------------------------------------------------------------
Duyarlılık
--------------------------------------------------------------------------*/
@media (max-width: 1100px) {
.spec-grid,
.spec-grid--3,
.fgrid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 780px) {
.feat2__section {
padding: 64px 0;
}
.spec-grid,
.spec-grid--3,
.duo,
.fgrid {
grid-template-columns: 1fr;
}
.wide-card,
.callout {
padding: 28px;
}
/* Telefonda iki sütun okunmuyor — tek sütuna dön. */
.feat2 .feat2__rich ul,
.feat2 .feat2__rich ol {
columns: 1;
}
/* NOT (2026-08-20, denendi ve GERİ ALINDI): telefonda 17 kartlık liste
kısalsın diye kart yan yatırılmıştı (görsel solda %40, metin sağda).
ÇALIŞMADI — bu sayfadaki kart görselleri fotoğraf değil, üstünde
özelliğin ADI yazan afişler. %40'lık sütuna `cover` ile sığdırılınca
ad ortadan kesiliyor ("MULTI COMPANY" → "I COM"). Kart dikey kalıyor:
sayfa uzun ama okunuyor. Yatay ray de uygun değil — dizin sayfasında
17 seçeneğin çoğunun gizli kalması işin amacına ters.
Kısaltmak gerekirse doğru yer görselin kendisi (dar ekran için ayrı
kadraj), CSS değil. */
/* Telefonda 2.723 oranındaki fotoğraf ince bir şeride iniyor ve
içindeki insan seçilmiyor. Kutu dikleşiyor; kadraj kişinin durduğu
tarafa (sağ) kaydırılıyor — üç fotoğrafta da insan sağda.
`:not(--window)` ŞART (2026-08-20 gecesi düzeltildi): bu iki kural
modül sayfalarının ekran görüntüsünü de yakalıyordu ve telefonda
arayüzü yanlardan kesiyordu (16/10 kutu + %74 kadraj). Fotoğrafta
doğru olan şey ekran görüntüsünde yanlış: fotoğrafta özne bir kişi,
ekran görüntüsünde bütün çerçeve. */
.feat2--a .fhero__art:not(.fhero__art--window) {
aspect-ratio: 16 / 10;
}
.feat2--a .fhero__art:not(.fhero__art--window) img {
object-position: 74% center;
}
}
/*--------------------------------------------------------------------------
TELEFONDA YATAY RAY (2026-08-20) — ana sayfadaki kararın aynısı.
Sorun: kart ızgaraları telefonda tek sütuna inince her kart tam boy bir
blok oluyor ve sayfa uzayıp gidiyor. Çözüm: dikey yığın yerine YATAY RAY.
Kart genişliği 78vw — sağdaki kartın bir dilimi görünsün ve kaydırılabildiği
anlaşılsın diye (tam genişlik verilirse ray gizli kalır).
780px bloğundaki `1fr` kuralını ezmesi için bu blok ONDAN SONRA gelmeli.
Masaüstünde hiçbir şey değişmiyor.
--------------------------------------------------------------------------*/
@media (max-width: 700px) {
.feat2 .spec-grid,
.feat2 .spec-grid--3,
.feat2 .duo {
display: grid;
grid-template-columns: none;
grid-auto-flow: column;
grid-auto-columns: 78vw;
gap: 14px;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x proximity;
scroll-padding-left: var(--pad);
/* sarmalayıcının iç boşluğunu kırıp kenardan kenara aksın */
margin: 0 calc(-1 * var(--pad));
padding: 6px var(--pad) 24px;
scrollbar-width: none;
-ms-overflow-style: none;
touch-action: pan-x pan-y;
}
.feat2 .spec-grid::-webkit-scrollbar,
.feat2 .spec-grid--3::-webkit-scrollbar,
.feat2 .duo::-webkit-scrollbar {
display: none;
}
.feat2 .spec,
.feat2 .wide-card {
scroll-snap-align: start;
}
.feat2 .wide-card {
padding: 28px;
}
.feat2 .photo-cta {
min-height: 320px;
}
}