/* ============================================================
CONSUMER-FOCUSED PROJECTS — sayfaya ozel katman
Bu dosya YALNIZ bu sayfanin ihtiyaci olan farklari tasir; bilesenlerin
kendisi paylasilan anasayfa.css (hp-*) ve for-businesses-en.css (fb-*)
icinde durur ve BURADAN DEGISTIRILMEZ.
============================================================ */
/* 01 · ACILIS — kompakt koyu kart.
Referans olculeri ve bilincli sapmalar sayfa markup'indaki yorumda.
Bant SABIT (position: fixed) oldugu icin ust dolgu onu temizlemek
zorunda: --bar-h yalnizca .header--pill kapsaminda tanimli, buradan
erisilemez; 72px'lik masaustu bandi icin space-24 (96px) guvenli pay. */
.cp-hero {
/* Zemin gradienti KURUCUNUN verdigi degerlerdir (token degil, ham hex):
linear-gradient(135deg, #0D2B2E, #1a3a2a 60%, #2d4a3e). Bilincli sapma. */
background: linear-gradient(135deg, #0D2B2E 0%, #1a3a2a 60%, #2d4a3e 100%);
/* Rozet kalkinca baslik bandin 32px altina dusuyordu (olculdu: rozetli
halde 78px). Sabit bant 64px; space-40 ile baslik bandin 96px altinda. */
/* Ust dolgu yine az geldi (kurucu, ikinci kez). Token olcegi space-40
(160px) ile bitiyor, o yuzden toplanarak buyutuldu: 160+32 = 192px,
yani baslik 64px'lik sabit bandin 128px altinda (onceki 96). */
padding-block: calc(var(--eco-space-40) + var(--eco-space-8)) var(--eco-space-20);
}
/* Kutu KALKTI (kurucu: "heroda bulunanlari box icine alma, orasi serbest
kalsin"). Koyu zemin bolumun kendisinde; icerik dogrudan .container'da. */
.cp-hero__title {
/* rozet kalkti: ust bosluk bolum dolgusundan gelir */
margin: 0;
/* HERO KADEMESI: site genelinde hero basligi 72px/40px (display 2xl) —
OLCULDU: anasayfa ve kardes sayfa for-businesses ikisi de oyle.
Burasi iki kademe asagida kalmisti (48/34).
max-width KALDIRILDI: 18ch (olculen 480px) satir sonunu kendi basina
bolup
'in yerini bozuyordu; kardes sayfada da max-width yok. */
max-width: none;
font-family: var(--eco-fontfamily-sans);
font-size: var(--eco-fontsize-display-2xl);
line-height: var(--eco-lineheight-display-2xl);
letter-spacing: var(--eco-letterspacing-display-2xl);
font-weight: var(--eco-fontweight-medium);
color: var(--eco-text-on-brand-strong);
}
.cp-hero__lede {
margin: var(--eco-space-4) 0 0;
/* 48rem: TARANDI — 720px ve altinda ucuncu satira tek kelime tasiyor,
736'dan itibaren iki satir. 768 esikten 48px uzak, son satir 696px. */
max-width: 48rem;
font-size: var(--eco-fontsize-body-lg);
line-height: var(--eco-lineheight-body-lg);
letter-spacing: var(--eco-letterspacing-body-lg);
color: var(--eco-text-on-dark);
}
.cp-hero__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--eco-space-4);
margin-top: var(--eco-space-6);
}
/* Logo seridi: referansta 32px'lik bosluk, bizde ritim space-8. */
.cp-hero__proof { margin-top: var(--eco-space-8); }
.cp-hero__proof-label {
margin: 0 0 var(--eco-space-4);
font-size: var(--eco-fontsize-body-sm);
line-height: var(--eco-lineheight-body-sm);
letter-spacing: var(--eco-letterspacing-body-sm);
/* Koyu zeminde SOLUK metin icin tokenimiz yok (--eco-text-on-dark tek
kademe, #EEEEEE). Etiketin govdeden geri durmasi icin dogrudan deger. */
color: rgba(255, 255, 255, .62);
}
.cp-hero__proof .hp-hero__strip { margin-top: 0; }
@media (max-width: 900px) {
/* Mobilde de ayni oranda: 128+24 = 152px -> baslik 56px'lik bandin 96px altinda. */
.cp-hero { padding-block: calc(var(--eco-space-32) + var(--eco-space-6)) var(--eco-space-16); }
/* mobilde de ayni kademe; satir yuksekligi ve harf araligi birimsiz,
masaustu tokenlariyla olcekleniyor — yalniz font-size degisir. */
.cp-hero__title { font-size: var(--eco-fontsizemobile-display-2xl); }
}
/* 02 · CAM KARTLAR — acilisin icinde, farkli yukseklikte ama hizali.
Izgara referansin sekli: SOLDA uzun kart (iki satir), SAGDA iki kisa kart. */
.cp-bento {
margin-top: var(--eco-space-20);
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--eco-space-4);
}
.cp-bento__head {
grid-column: 1 / -1;
/* Ayrac + simetrik bosluk: seritten ayraca 80px, ayractan basliga 40px,
basliktan kartlara 40px (24 + izgara boslugu 16). */
border-top: var(--eco-borderwidth-hairline) solid var(--eco-glass-border);
padding-top: var(--eco-space-10);
margin: 0 0 var(--eco-space-6);
font-size: var(--eco-fontsize-h2);
line-height: var(--eco-lineheight-h2);
letter-spacing: var(--eco-letterspacing-h2);
font-weight: var(--eco-fontweight-medium);
color: var(--eco-text-on-brand-strong);
}
.cp-tile {
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: 11rem;
padding: var(--eco-space-6);
border-radius: var(--eco-radius-lg);
/* Dolgu --eco-glass-bg (.07) DEGIL .12: kartlar duz #102A1B uzerinde
zeminden yeterince ayrismiyordu. OLCULEN ayrisma oranlari (zemin
ornegi iki kart arasindaki bosluktan, yani temiz):
glass .07 -> 1.231 dark-raised -> 1.237
dark-overlay -> 1.531 glass .12 -> 1.456
Referansta olculen 1.368; .12 en yakini ve CAM karakterini korur
(dark-overlay opak bir yuzey, hem hedefi asiyor hem blur hissini
kaybettiriyor). .12 bu depoda zaten kullanilan bir deger. */
/* KENARLIKSIZ — kurucu karari (2026-09-22): "gradient border hosuma
gitmedi, border kaldiralim". Kart artik zeminden YALNIZ cam dolgusuyla
ayrisiyor; dolgu degeri olcumle secilmisti (asagidaki not) ve aynen
korunuyor. Kenarliksiz kartta ayrisma tek dayanak oldugu icin dolguya
dokunulacaksa yeniden olculmeli. */
background: rgba(255, 255, 255, .12);
border: 0;
backdrop-filter: blur(var(--eco-glass-blur));
-webkit-backdrop-filter: blur(var(--eco-glass-blur));
/* AKICILIK: sure .28s -> .5s ve TUM hover ogeleri ayni sure/egride bitiyor.
OLCULDU: kart .28s'de kalkarken link rengi .2s'de bitiyordu; tek jestte iki
ayri bitis ani "duraksama" olarak okunuyordu. Egri zaten yumusak
(cubic-bezier(.16,1,.3,1)), degistirilmedi. */
transition: background-color .5s var(--ease-out), translate .5s var(--ease-out);
}
/* HOVER — kart bir yere GITMIYOR; amac yalnizca dinamizm (kurucu karari).
Hareket `translate` ile veriliyor: transform gibi bu da elemani backdrop
root yapabilir ve bu projede cam efekti bir kez boyle olmustu, o yuzden
yazim sonrasi blur HOVER HALINDE olculuyor. Imlec isareti yok: tiklanabilir
degil, pointer vermek yanlis vaat olurdu. */
.cp-tile:hover { background-color: rgba(255, 255, 255, .16); translate: 0 -3px; }
/* Uzun kart: iki satiri kaplar -> sagdaki ikisi yanina istiflenir.
Icine MEDYA girdi: olculdugunde metin kartin %75'inden sonra basliyordu,
yani ustteki ~250px bos cam olarak okunuyordu. Referansta bu konumdaki
buyuk kartin icinde de bir medya mock'u var. Gorsel: QR'li urun ambalaji
— hero'dan cikan, bu sayfanin konusunu birebir anlatan kare. */
.cp-tile { padding: var(--eco-space-4); }
.cp-tile__ui {
flex: 1 1 auto;
min-height: 9.5rem;
margin: 0 0 var(--eco-space-5);
overflow: hidden;
border-radius: var(--eco-radius-md);
background: var(--eco-surface-dark-deep);
}
.cp-tile--tall { grid-row: span 2; min-height: 23rem; }
.cp-tile--tall .cp-tile__ui { min-height: 0; }
.cp-tile__title,
.cp-tile__desc { padding-inline: var(--eco-space-2); }
.cp-tile__desc { padding-bottom: var(--eco-space-2); }
/* ============================================================
SENARYO SAHNELERI — kurucu karari (2026-09-22, ucuncu tur):
"hem ilk yaptigin animasyon gibi hem flow gibi". Yani soyut
dugum zinciri DEGIL: somut bir sahne oynar, ondan bir TOHUM
ayrilir, yolu kateder ve ucunda AGAC KENDINI CIZER.
buy ambalajdaki kod taranir -> tohum -> agac
service dijital hizmet acilir -> tohum -> agac
campaign kampanya maddeleri islenir -> tohum -> agac
Uc kart SOLDA/USTTE ayrisir, SAGDA/ALTTA ayni yere varir —
bolumun basligi ("katkinin nerede BASLADIGI") bu.
Agac Tabler `tree` ikonudur; path verisi degismedi, yalniz
CIZIM SIRASI icin govde one alindi (elle cizim yok).
stroke-dashoffset 1->0 ile ciziliyor; pathLength="1" sayesinde
her path'in uzunlugu normalize, sabit sayi tahmin etmiyoruz.
SUREKLI DONER — bu dosyada hicbir duraklatma kurali yok
(kurucu karari; ana sayfadaki hp-ui deseninden bilincli sapma).
============================================================ */
.cp-scene {
--cp-sure: 6.5s;
--cp-ray: rgba(255, 255, 255, .16);
--cp-pasif: rgba(255, 255, 255, .30);
height: 100%;
display: grid;
gap: var(--eco-space-4);
padding: var(--eco-space-5);
}
/* auto+align-content: uc parca ICERIGE gore kumelenir ve blok dikeyde
ortalanir. minmax(0,1fr) iken sahne ~250px bosluk yutuyor, ambalaj
yukarida, agac asagida, arada bos alan kaliyordu (kareye bakildi). */
.cp-scene--v { grid-template-rows: auto auto auto; align-content: center; justify-items: center; }
/* ZINCIR BITISIK KALMALI: ilk sutun 1fr iken artan yeri yutuyordu ve
maket ile iz arasinda bosluk aciliyordu. OLCULDU (maket-iz boslugu):
390:12px 600:95 768:172 899:233 1024:45 1440:89 — yani kusur
mobile ozgu degildi, masaustunde de vardi; kareye bakip "solda sahne,
sagda sonuc" diye kabul etmistim, sayilar kopuklugu gosterdi.
Sutunlar icerige gore boyutlanir, uclu blok halinde ortalanir;
minmax(0, auto) dar ekranda maketin daralmasina izin verir. */
/* Ray BELIRLI olmali: `minmax(0, auto)` ile maketin `width: min(100%, 11rem)`
yuzdesi belirsiz boyuta cozuluyor, tarayici auto sayip min-content'e
indiriyordu — OLCULDU: kampanya maket sutunu her genislikte 20px,
servis 41.6px (olmasi gereken 140-176). 11rem belirli ust sinir verir;
minmax(0, ...) dar ekranda daralmaya izin verir, justify-content
ucluyu blok halinde ortalar. */
.cp-scene--h { grid-template-columns: minmax(0, 11rem) auto auto; justify-content: center; align-items: center; }
.cp-scene__act { position: relative; min-width: 0; min-height: 0; width: 100%; display: grid; place-items: center; }
.cp-scene--h .cp-scene__act { height: 100%; }
/* -- yol + tohum -- */
.cp-scene__link { position: relative; }
.cp-scene--v .cp-scene__link { width: var(--eco-borderwidth-thick); height: var(--eco-space-16); }
.cp-scene--h .cp-scene__link { width: var(--eco-space-16); height: var(--eco-borderwidth-thick); }
.cp-scene__link::before {
content: ''; position: absolute; inset: 0; border-radius: var(--eco-radius-full);
background: var(--cp-ray);
}
/* YESIL IZ: tohum gectikce dolar ve DONGU SONUNA KADAR kalir — eylem ile
agaci baglayan tek gorsel ipucu bu. Iz yokken yol ve tohum kareye
"dokuntu" gibi giriyordu. */
.cp-scene__link::after {
content: ''; position: absolute; inset: 0; border-radius: var(--eco-radius-full);
background: var(--eco-surface-brand);
}
.cp-scene--v .cp-scene__link::after { transform-origin: top; animation: cp-iz-v var(--cp-sure) ease-in-out infinite backwards; }
.cp-scene--h .cp-scene__link::after { transform-origin: left; animation: cp-iz-h var(--cp-sure) ease-in-out infinite backwards; }
.cp-seed {
position: absolute; width: var(--eco-space-3); height: var(--eco-space-3);
border-radius: var(--eco-radius-full); background: var(--eco-surface-brand); opacity: 0;
}
.cp-scene--v .cp-seed { left: 50%; margin-left: calc(var(--eco-space-3) / -2); animation: cp-tohum-v var(--cp-sure) ease-in-out infinite backwards; }
.cp-scene--h .cp-seed { top: 50%; margin-top: calc(var(--eco-space-3) / -2); animation: cp-tohum-h var(--cp-sure) ease-in-out infinite backwards; }
/* -- agac: kendini cizer -- */
.cp-scene__grow { position: relative; display: grid; place-items: end center; }
/* YUVARLAK UCLAR (kurucu karari): "bu tarz animasyonlarin hatlari hep
rounded olmali, ikonlarda da oyle kullaniyoruz". Tabler kaynagi
stroke-linecap/linejoin="round" tasir ama depo inline gomerken bu
nitelikleri atiyor ve .eco-icon (anasayfa.css) bunlari vermiyor —
OLCULDU: agac ve sayfadaki diger inline ikonlar butt/miter ciziliyordu.
Paylasilan dosyaya dokunmadan sahne ikonlarina burada veriliyor. */
.cp-scene .eco-icon { stroke-linecap: round; stroke-linejoin: round; }
.cp-tree { color: var(--eco-surface-brand); overflow: visible; }
.cp-scene--v .cp-tree { width: 5.5rem; height: 5.5rem; }
.cp-scene--h .cp-tree { width: 3.5rem; height: 3.5rem; }
.cp-tree path {
stroke-dasharray: 1; stroke-dashoffset: 1;
animation: cp-ciz var(--cp-sure) ease-out infinite backwards;
}
.cp-tree path:nth-child(2) { animation-delay: .22s; }
.cp-tree path:nth-child(3) { animation-delay: .46s; }
.cp-tree path:nth-child(4) { animation-delay: .54s; }
.cp-ground {
position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
/* %150 iken agacin disina tasip basibos cetvel gibi okunuyordu */
width: 100%; height: var(--eco-borderwidth-hairline); background: rgba(255, 255, 255, .22);
border-radius: var(--eco-radius-full);
}
/* -- 1 · URUN: ambalaj + karekod + tarama -- */
.cp-pack {
position: relative; width: min(100%, 9rem); aspect-ratio: 5 / 6; max-height: 100%;
display: grid; place-items: center;
border-radius: var(--eco-radius-sm);
border: var(--eco-borderwidth-hairline) solid var(--cp-pasif);
}
.cp-scene--h .cp-pack { height: 100%; width: auto; }
.cp-pack::before {
content: ''; position: absolute; left: 0; right: 0; top: 21%;
height: var(--eco-borderwidth-hairline); background: var(--cp-ray);
}
.cp-qr { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; width: 52%; aspect-ratio: 1 / 1; }
.cp-qr i { border-radius: 2px; background: rgba(255, 255, 255, .30); animation: cp-kare var(--cp-sure) ease-in-out infinite; }
.cp-qr i:nth-child(5) { background: var(--eco-surface-brand); }
.cp-scan {
position: absolute; left: 24%; right: 24%;
height: var(--eco-borderwidth-thick); border-radius: var(--eco-radius-full);
background: var(--eco-surface-brand); animation: cp-tarama var(--cp-sure) ease-in-out infinite;
}
/* -- 2 · HIZMET: ekran + anahtar + islenen satirlar -- */
.cp-screen {
position: relative; width: min(100%, 11rem); aspect-ratio: 8 / 5; max-height: 100%;
display: flex; flex-direction: column; justify-content: center; gap: var(--eco-space-2);
padding: var(--eco-space-3);
border-radius: var(--eco-radius-sm);
border: var(--eco-borderwidth-hairline) solid var(--cp-pasif);
}
.cp-scene--h .cp-screen { height: 100%; width: auto; }
.cp-toggle {
position: relative; width: 46%; height: var(--eco-space-4);
border-radius: var(--eco-radius-full); background: var(--cp-ray);
animation: cp-anahtar-zemin var(--cp-sure) ease-in-out infinite;
}
.cp-toggle i {
position: absolute; top: 3px; left: 3px;
width: calc(var(--eco-space-4) - 6px); height: calc(var(--eco-space-4) - 6px);
border-radius: var(--eco-radius-full); background: rgba(255, 255, 255, .8);
/* left ile yurur: translateX(100%) topuzun kendi genisligi kadardir */
animation: cp-anahtar var(--cp-sure) ease-in-out infinite;
}
.cp-line {
height: var(--eco-space-2); border-radius: var(--eco-radius-full);
background: var(--cp-ray); animation: cp-satir var(--cp-sure) ease-in-out infinite backwards;
}
.cp-line:nth-of-type(2) { animation-delay: .18s; }
/* -- 3 · KAMPANYA: isaretlenen maddeler + dolan katilim -- */
.cp-list { display: grid; gap: var(--eco-space-2); width: min(100%, 11rem); }
.cp-item { display: flex; align-items: center; gap: var(--eco-space-2); }
.cp-item i {
position: relative; flex: none; width: var(--eco-space-3); height: var(--eco-space-3);
border-radius: 3px; border: var(--eco-borderwidth-hairline) solid var(--cp-pasif);
background: transparent; animation: cp-tik var(--cp-sure) ease-in-out infinite backwards;
}
/* tik koyu (#1A1A1A): marka yesili uzerine beyaz yasak */
.cp-item i::before {
content: ''; position: absolute; left: 2px; top: 2px; width: 6px; height: 3px;
border-left: 1.5px solid #1A1A1A; border-bottom: 1.5px solid #1A1A1A;
/* border ile cizilen bir isaretin UCLARI yuvarlatilamaz; birlesim kosesi
yuvarlaniyor. 1.5px kalinlikta fark alt piksel duzeyinde kaliyor. */
border-bottom-left-radius: 1px;
transform: rotate(-45deg); opacity: 0;
animation: cp-tik-isaret var(--cp-sure) ease-in-out infinite backwards;
}
.cp-item b { flex: 1 1 auto; height: var(--eco-space-2); border-radius: var(--eco-radius-full); background: var(--cp-ray); }
.cp-bar { height: var(--eco-space-2); border-radius: var(--eco-radius-full); background: var(--cp-ray); overflow: hidden; }
.cp-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--eco-surface-brand); animation: cp-dolum var(--cp-sure) ease-in-out infinite backwards; }
/* KADEME: kisayoldan SONRA gelmeli (kisayol animation-delay'i sifirlar) ve
ayni ozgullukte olmali — bir onceki turda (0,2,1) yazip (0,3,1) kurala
carpmis, gecikmeler sessizce dusmustu. */
.cp-list .cp-item:nth-child(1) i, .cp-list .cp-item:nth-child(1) i::before { animation-delay: 0s; }
.cp-list .cp-item:nth-child(2) i, .cp-list .cp-item:nth-child(2) i::before { animation-delay: .22s; }
.cp-list .cp-item:nth-child(3) i, .cp-list .cp-item:nth-child(3) i::before { animation-delay: .44s; }
/* ZAMANLAMA (6.5s): sahne 0-32 · tohum 34-58 · agac 56-82 · tutar 82-100 */
@keyframes cp-tarama { 0% { top: 26%; opacity: 0 } 4% { opacity: .9 } 20% { opacity: .9 } 28%, 100% { top: 82%; opacity: 0 } }
@keyframes cp-kare { 0% { opacity: .35 } 14% { opacity: 1 } 32%, 100% { opacity: .6 } }
@keyframes cp-anahtar { 0%, 6% { left: 3px } 20%, 100% { left: calc(100% - var(--eco-space-4) + 3px) } }
@keyframes cp-anahtar-zemin { 0%, 6% { background: rgba(255, 255, 255, .16) } 20%, 100% { background: color-mix(in srgb, var(--eco-surface-brand) 55%, transparent) } }
@keyframes cp-satir { 0%, 8% { width: 40% } 28%, 100% { width: 96% } }
@keyframes cp-tik { 0%, 6% { background: transparent; border-color: rgba(255, 255, 255, .30) } 18%, 100% { background: var(--eco-surface-brand); border-color: var(--eco-surface-brand) } }
@keyframes cp-tik-isaret { 0%, 8% { opacity: 0 } 20%, 100% { opacity: 1 } }
@keyframes cp-dolum { 0%, 4% { width: 0 } 30%, 100% { width: 100% } }
@keyframes cp-tohum-v { 0%, 32% { top: 0; opacity: 0 } 36% { opacity: 1 } 54% { top: calc(100% - var(--eco-space-3)); opacity: 1 } 58%, 100% { opacity: 0 } }
@keyframes cp-tohum-h { 0%, 32% { left: 0; opacity: 0 } 36% { opacity: 1 } 54% { left: calc(100% - var(--eco-space-3)); opacity: 1 } 58%, 100% { opacity: 0 } }
@keyframes cp-iz-v { 0%, 32% { transform: scaleY(0) } 54%, 100% { transform: scaleY(1) } }
@keyframes cp-iz-h { 0%, 32% { transform: scaleX(0) } 54%, 100% { transform: scaleX(1) } }
@keyframes cp-ciz { 0%, 56% { stroke-dashoffset: 1 } 80%, 100% { stroke-dashoffset: 0 } }
@media (prefers-reduced-motion: reduce) {
/* Hareket yoksa senaryonun SONUCU durur: sahne islenmis, agac cizilmis. */
/* ::after DE kapsanmali: yesil iz `.cp-scene__link::after` uzerinde.
Kapsanmadiginda azaltilmis harekette 3 animasyon kosmaya devam etti
(olculdu: cp-iz-v + 2x cp-iz-h, scaleY 0 -> 0.28 -> 1). Tek anlik
olcum "temiz" gosteriyordu cunku iz dongunun %54-100 arasinda zaten
birim olcekte; kusuru ZAMAN SERISI yakaladi. */
.cp-scene *, .cp-scene *::before, .cp-scene *::after { animation: none !important; }
.cp-tree path { stroke-dashoffset: 0; }
.cp-bar i { width: 100%; }
.cp-line { width: 96%; }
.cp-item i { background: var(--eco-surface-brand); border-color: var(--eco-surface-brand); }
.cp-item i::before { opacity: 1; }
.cp-toggle { background: color-mix(in srgb, var(--eco-surface-brand) 55%, transparent); }
.cp-toggle i { left: calc(100% - var(--eco-space-4) + 3px); }
.cp-seed { opacity: 0; }
.cp-tile { transition: none; }
.cp-tile:hover { translate: none; }
.cp-scene__link::after { transform: none; }
}
.cp-tile__title {
margin: 0;
font-size: var(--eco-fontsize-h3);
line-height: var(--eco-lineheight-h3);
letter-spacing: var(--eco-letterspacing-h3);
font-weight: var(--eco-fontweight-medium);
color: var(--eco-text-on-brand-strong);
}
.cp-tile__desc {
margin: var(--eco-space-3) 0 0;
font-size: var(--eco-fontsize-body);
line-height: var(--eco-lineheight-body);
letter-spacing: var(--eco-letterspacing-body);
color: var(--eco-text-on-dark);
}
/* 03 · sistem bolumunun ledesi basligin altinda kalsin */
/* Lede ucuncu satira tek kelime tasiyordu. Sinir PARAGRAFTA DEGIL: ata
zinciri olculdu, `.hp-sys__head` 736px (46rem) ile kilitliyor ve o sinif
paylasilan anasayfa.css'te. Paragrafin max-width'ini buyutmek bu yuzden
hicbir sey yapmiyordu (olculdu: max-width 832px, gercek genislik 736).
Cozum: bolume sayfaya ait `cp-sys` sinifi eklenip kapsayici burada
genisletiliyor; paylasilan dosyaya dokunulmuyor. */
/* 48rem: "ecording" ikinci satira insin diye. TARANDI — 820px ve ustunde
kelime 1. satirda kaliyor, 740 ve altinda paragraf 3 satira cikiyor;
kosulu saglayan bant 750-810px. 768px iki uctan da uzak. */
.cp-sys .hp-sys__head { max-width: 48rem; }
/* Paragrafin KENDI siniri da etkisizlestirilmeli: paylasilan .hp-desc
`max-width: 54ch` tasiyor ve bu OLCULDU = 540px. Etkili genislik iki
kisitin KUCUGU oldugu icin, kapsayiciyi 832'ye cikarip paragrafin
kisitini kaldirmak lede'yi 736'dan 540'a DUSURMUSTU. Genisligi artik
yalniz kapsayici belirliyor. */
.cp-sys__lede { margin: var(--eco-space-4) 0 0; max-width: none; }
/* 04 · SOMUT ORNEK — acik bolum.
fb-close__case KULLANILMADI: ust ayraci rgba(255,255,255,.17) ile koyu
kutuya gore kurgulanmis, acik zeminde gorunmez. */
/* Bolum zemini, case-studies sayfasindaki hikaye bolumuyle AYNI kaynaktan:
orada sarmalayici `data-bg="alt"` tasiyor ve style.css onu
`background: var(--eco-surface-subtle)` yapiyor (olculdu). Yani o bolum
CAMSI DEGIL, duz acik yuzey; camsi olan tek oge kartin kategori rozeti
(rgba(0,0,0,.4) + blur 8px) ve o aynen tasindi. */
.cp-example { background: var(--eco-surface-subtle); padding-block: var(--eco-space-24); }
/* UST BLOK TEK SUTUN: iki sutun denendi, kurucu "esit gelmedi gozume" deyip
geri aldirdi — lede yine basligin ALTINDA ve solda. */
.cp-example__head { max-width: 46rem; }
/* Paragrafin KENDI siniri etkisizlestiriliyor: paylasilan .hp-desc
`max-width: 54ch` tasiyor (olculdu = 540px) ve lede'yi uc satira
dusuruyordu. Genisligi kapsayici (46rem = 736px) belirlesin; o genislikte
iki satir, son satir 459px. */
.cp-example__head .hp-desc { margin: var(--eco-space-4) 0 0; max-width: none; }
/* KART KOMPLE TIKLANABILIR: kartin kendisi . Ic ice anchor olmasin diye
icerideki baglanti gorsel bir 'e cevrildi — main.js
`.hp-link`'i SINIF uzerinden secip zenginlestirdigi icin (a.hp-link degil)
ok animasyonu span'de de calisir; kod anchor'a ozgu API cagirmiyor.
Pseudo ile kaplama YAPILAMADI: .hp-link'in ::before ve ::after'inin IKISI de
ok, ayrica .hp-link position:relative oldugu icin icine konan mutlak kaplama
karti degil linki kaplardi. */
.cp-example__card {
text-decoration: none;
color: inherit;
transition: translate .5s var(--ease-out);
}
.cp-example__card:hover { translate: 0 -3px; }
/* Link rengi de kartla AYNI anda bitsin (paylasilan .hp-link .2s kullaniyor). */
.cp-example__card .hp-link { transition: color .5s var(--ease-out); }
.cp-example__card:hover .hp-link { color: var(--eco-text-link-hover); }
.cp-example__card:focus-visible {
outline: var(--eco-borderwidth-thick) solid var(--eco-border-focus);
outline-offset: 3px;
}
/* Azaltilmis hareket kurali, EZECEGI KURALLARDAN SONRA gelmeli. Ilk yazimda
dosyanin basindaki bloga koymustum; kart kurallari ondan sonra geldigi icin
esit ozgullukte sonraki kazandi ve override OLU kaldi — OLCULDU: reduce
modunda da translate 0px -3px uygulaniyordu. (.cp-tile ayni sorunu
yasamiyor, cunku onun kurallari o bloktan ONCE tanimli.) */
@media (prefers-reduced-motion: reduce) {
.cp-example__card { transition: none; }
.cp-example__card:hover { translate: none; }
}
/* max-width KALKTI: 26rem, kucuk story-card surumunden kalmisti ve zincir
kartini 416px'e kisiyordu — OLCULDU: kart 416x962, medya 312 alinca
govdeye 220px kaliyor ve kart 930px'e uzuyordu. Genisligi artik
.cp-example__chain (52rem) belirliyor. */
.cp-example__case { margin-top: var(--eco-space-10); }
/* VAKA KARTI — anasayfadaki (en/index.html) hp-chain carousel'inin TEKIL
karti. Kurucu: "carousel kartlar vardi ya, ordan tekil bir karti Garanti
BBVA icin kullanmak istiyorum". Bilesen paylasilan anasayfa.css'te; oraya
DOKUNULMUYOR, sinifi yuklenerek devralininiyor.
NOTRLENENLER (hepsi olculdu): carousel'de `.hp-chain__item` mutlak konumlu
ve olcusunu JS'in yazdigi --w/--h degiskenlerinden aliyor; govde mutlak ve
29.19rem sabit; medya mutlak ve aktif kartta 19.5rem panel. Burada o
sarmalayici hic kullanilmadi, geometri akisa cevrildi.
JS RISKI YOK: carousel kodu yalnizca en/index.html icinde inline duruyor
(main.js'te hp-chain gecisi 0 — olculdu), yani bu sayfada calismaz.
Anasayfada akis duzenine gecis 767px'te; bu sayfanin bandi 900px. Bu yuzden
notrleme TUM genisliklerde yazildi, bandin denk gelmesine guvenilmedi. */
/* Kart, bolum icerik genisligini doldurur: kurucu "digerlerine gore dar
kalmis" dedi — OLCULDU, kart 832px iken icerik kolonu 1120px. */
.cp-example__chain { max-width: none; }
.cp-example__chain .hp-chain__card { height: auto; }
/* ORAN: kurucu karari — metin %60, gorsel %40. Onceki kurguda govde
29.19rem'de sabitti ve artan yeri gorsel aliyordu; OLCULDU, 1440'ta
govde %41.7 / gorsel %55.4 ile gorsel daha genisti. */
.cp-example__chain .hp-chain__body {
position: static; width: auto; flex: 0 0 60%; min-width: 0;
padding: var(--eco-space-6);
}
.cp-example__chain .hp-chain__media {
position: relative; inset: auto; margin: 0;
flex: 0 0 40%; width: auto; min-width: 0;
}
/* Logo ve uzerindeki scrim carousel'de yalniz [data-aktif="evet"] ile aciliyor;
o sarmalayici burada yok, opaklik dogrudan veriliyor. */
.cp-example__chain .hp-chain__media::after,
.cp-example__chain .hp-chain__logo { opacity: 1; }
@media (max-width: 900px) {
.cp-bento { grid-template-columns: minmax(0, 1fr); }
.cp-tile--tall { grid-row: auto; min-height: 0; padding: var(--eco-space-4); }
/* ORAN DEGIL REM: tek kolon bandinda aspect-ratio kutuyu genislikle
buyutuyor, oysa zincir rem/min() ile sabit kaliyor. OLCULDU: 899px'te
uzun kart kutusu 793x991 iken icerik yalniz 365px yer istiyordu —
626px bos. Yukseklik bant boyunca sabit. */
.cp-tile__ui { height: 10rem; flex: none; min-height: 0; }
.cp-tile--tall .cp-tile__ui { height: 24rem; }
/* Maket YUKSEKLIK gudumluyken (height:100% + aspect-ratio) genisligi
patliyordu: OLCULDU, 390/600/899'da hepsinde yol sutununa sabit
113px biniyordu (sayfa tasmasi 0 oldugu icin kart kirpmasi altinda
gizli kalmisti). Bu bantta genislik gudumlu olmali. */
.cp-scene--h .cp-screen,
.cp-scene--h .cp-pack { height: auto; width: min(100%, 11rem); max-height: 100%; }
.cp-scene { padding: var(--eco-space-4); gap: var(--eco-space-3); }
.cp-scene--v .cp-tree { width: 4.5rem; height: 4.5rem; }
.cp-example { padding-block: var(--eco-space-16); }
/* Dar bantta kart alt alta: gorsel ustte, metin altta. */
.cp-example__chain .hp-chain__card { flex-direction: column-reverse; }
/* Istiflenmis bantta gorsel TAVANLI olmali: 4/3 oran tek basina, kart
genisken devlesiyor — OLCULDU, 899px'te medya 795x596 ve kart 984px
oluyordu. Anasayfa bu tuzagi yasamiyor cunku onun istifleme esigi
767px, yani istiflendiginde kart zaten dar. Tavan 390px'teki gorunumu
degistirmez (orada yukseklik 239px, tavanin altinda). */
.cp-example__chain .hp-chain__media { flex: 0 0 auto; aspect-ratio: 4 / 3; max-height: 15rem; }
}