/* ========================================================================== Mustafa Nayir — tasarım sistemi Renkler ve tipografi mevcut siteden korundu: zemin #f7f7f7 · metin #101010 · gri #908c8c · Sofia Sans Condensed + Spline Sans Mono ========================================================================== */ /* --- fontlar (kendi sunucumuzda) ---------------------------------------- */ @font-face{font-family:"Sofia Cond";src:url("SofiaSansCondensed-SemiBold.woff2") format("woff2"); font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:"Sofia Cond";src:url("SofiaSansCondensed-Bold.woff2") format("woff2"); font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:"Sofia";src:url("SofiaSans.woff2") format("woff2"); font-weight:100 900;font-style:normal;font-display:swap} @font-face{font-family:"Spline Mono";src:url("SplineSansMono-Light.woff2") format("woff2"); font-weight:300;font-style:normal;font-display:swap} @font-face{font-family:"Spline Mono";src:url("SplineSansMono-Regular.woff2") format("woff2"); font-weight:400;font-style:normal;font-display:swap} /* --- değişkenler --------------------------------------------------------- */ :root{ --zemin:#f7f7f7; --yuzey:#ffffff; --yuzey-2:#f1f1f0; --murekkep:#101010; --gri:#908c8c; --gri-acik:#aaa8a8; --cizgi:#dedede; --cizgi-ince:#e9e9e8; /* durum renkleri — anlam taşıdıkları için var, süs değil */ --satilik:#1f6b45; --kiralik:#1f4f7a; --arsa:#8a5a12; --ticari:#6b3a72; --dar:"Sofia Cond","Sofia",system-ui,-apple-system,sans-serif; --duz:"Sofia",system-ui,-apple-system,"Segoe UI",sans-serif; --mono:"Spline Mono",ui-monospace,"SF Mono",Menlo,monospace; --gecis:cubic-bezier(.11,.82,.39,.92); --kenar:min(6vw,72px); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--zemin); color:var(--murekkep); font-family:var(--duz); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img,svg,video{max-width:100%;display:block} a{color:inherit;text-decoration:none} :focus-visible{outline:2px solid var(--murekkep);outline-offset:3px} /* --- yerleşim ------------------------------------------------------------ */ .kabuk{max-width:1360px;margin:0 auto;padding:0 var(--kenar)} .kabuk-dar{max-width:780px;margin:0 auto;padding:0 var(--kenar)} .bolum{padding-block:clamp(56px,8vw,120px)} .bolum-ince{padding-block:clamp(36px,5vw,64px)} /* --- tipografi ----------------------------------------------------------- */ .devasa,.buyuk-baslik,h1,h2,h3,h4{ font-family:var(--dar); font-weight:700; line-height:1.02; letter-spacing:-.015em; margin:0; text-wrap:balance; } .devasa{font-size:clamp(52px,11vw,168px);line-height:.92;letter-spacing:-.03em} h1,.h1{font-size:clamp(34px,5.6vw,72px);line-height:1.02} h2,.h2{font-size:clamp(26px,3.6vw,44px)} h3,.h3{font-size:clamp(20px,2.2vw,26px);line-height:1.15} h4,.h4{font-size:19px;line-height:1.25} p{margin:0 0 1em} p:last-child{margin-bottom:0} .metin{max-width:66ch;font-size:17px;line-height:1.7;color:#2a2a2a} .metin p+p{margin-top:0} .metin h2{margin:1.8em 0 .5em} .metin h3{margin:1.6em 0 .4em} .metin ul,.metin ol{padding-left:1.3em;margin:0 0 1em} .metin li{margin-bottom:.4em} .metin a{border-bottom:1px solid var(--gri);transition:border-color .2s;overflow-wrap:anywhere} .metin a:hover{border-color:var(--murekkep)} .solgun{color:var(--gri)} .kucuk{font-size:14.5px} /* mono etiket — "// hizmetler" gibi */ .etiket{ font-family:var(--mono); font-weight:400; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--gri); display:flex; align-items:center; gap:9px; } .etiket::before{content:"//";color:var(--murekkep)} .etiket.yalin::before{content:none} .cizgi{height:1px;background:var(--cizgi);border:0;margin:0} /* --- düğmeler ------------------------------------------------------------ */ .dugme{ display:inline-flex;align-items:center;gap:10px; font-family:var(--dar);font-weight:700;font-size:16px; letter-spacing:.02em;text-transform:uppercase; padding:14px 26px; background:var(--murekkep);color:var(--zemin); border:1.5px solid var(--murekkep); cursor:pointer; transition:background .2s var(--gecis),color .2s var(--gecis); } .dugme:hover{background:transparent;color:var(--murekkep)} .dugme-ikincil{background:transparent;color:var(--murekkep)} .dugme-ikincil:hover{background:var(--murekkep);color:var(--zemin)} .dugme-kucuk{padding:9px 16px;font-size:14px} /* alt çizgili bağlantı — sitenin karakteristik ögesi */ .baglanti-cizgi{ font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase; display:inline-flex;align-items:center;gap:8px; padding-bottom:4px;position:relative; } .baglanti-cizgi::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:1px; background:var(--murekkep);transform-origin:right;transform:scaleX(1); transition:transform .35s var(--gecis); } .baglanti-cizgi:hover::after{transform:scaleX(0)} /* --- üst menü ------------------------------------------------------------ */ .ustbar{ position:sticky;top:0;z-index:60; background:color-mix(in srgb,var(--zemin) 88%,transparent); backdrop-filter:blur(10px); border-bottom:1px solid transparent; transition:border-color .3s,background .3s; } .ustbar.kaydirildi{border-bottom-color:var(--cizgi)} .ustbar-ic{ display:flex;align-items:center;gap:28px; min-height:68px; max-width:1360px;margin:0 auto;padding:0 var(--kenar); } .marka{font-family:var(--dar);font-weight:700;font-size:15px;letter-spacing:.02em; line-height:1.05;max-width:7ch;text-transform:uppercase} /* --- kartlar (ilan) ------------------------------------------------------ */ .izgara{display:grid;gap:26px} .izgara-3{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))} .izgara-2{grid-template-columns:repeat(auto-fill,minmax(340px,1fr))} /* 5 hizmet için özel: geniş ekranda tek sıra, dar ekranda öksüz kart kalmaz */ .izgara-hizmet{grid-template-columns:repeat(5,1fr);gap:18px} @media (max-width:1240px){.izgara-hizmet{grid-template-columns:repeat(3,1fr)}} @media (max-width:820px){.izgara-hizmet{grid-template-columns:repeat(2,1fr)}} @media (max-width:560px){.izgara-hizmet{grid-template-columns:1fr}} .kart{ background:var(--yuzey); border:1px solid var(--cizgi-ince); display:flex;flex-direction:column; transition:border-color .25s,transform .25s var(--gecis); } .kart:hover{border-color:var(--murekkep);transform:translateY(-3px)} .kart-gorsel{aspect-ratio:4/3;background:var(--yuzey-2);overflow:hidden;position:relative} .kart-gorsel img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--gecis)} .kart:hover .kart-gorsel img{transform:scale(1.04)} .kart-gorsel .bos{ width:100%;height:100%;display:grid;place-items:center; font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gri-acik) } .kart-govde{padding:18px 20px 20px;display:flex;flex-direction:column;gap:9px;flex:1} .kart-baslik{font-family:var(--dar);font-weight:700;font-size:20px;line-height:1.15} .kart-fiyat{font-family:var(--dar);font-weight:700;font-size:23px;letter-spacing:-.01em} .kart-satir{ display:flex;flex-wrap:wrap;gap:14px;margin-top:auto;padding-top:10px; border-top:1px solid var(--cizgi-ince); font-family:var(--mono);font-size:11.5px;color:var(--gri);letter-spacing:.03em; } /* tür rozeti */ .rozet{ position:absolute;left:12px;top:12px; font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase; background:var(--yuzey);color:var(--murekkep); padding:5px 10px;border:1px solid var(--cizgi); } .rozet[data-tur="satilik"]{color:var(--satilik);border-color:var(--satilik)} .rozet[data-tur="kiralik"]{color:var(--kiralik);border-color:var(--kiralik)} .rozet[data-tur="arsa"]{color:var(--arsa);border-color:var(--arsa)} .rozet[data-tur="ticari"]{color:var(--ticari);border-color:var(--ticari)} /* --- formlar ------------------------------------------------------------- */ .alan{display:flex;flex-direction:column;gap:7px;margin-bottom:18px} .alan label{font-family:var(--mono);font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--gri)} .alan label .zorunlu{color:var(--murekkep)} input[type=text],input[type=tel],input[type=email],input[type=password], input[type=number],input[type=url],select,textarea{ width:100%;font-family:var(--duz);font-size:16px;color:var(--murekkep); background:var(--yuzey);border:1px solid var(--cizgi); padding:12px 14px;transition:border-color .2s; } input:focus,select:focus,textarea:focus{outline:none;border-color:var(--murekkep)} textarea{resize:vertical;min-height:110px;line-height:1.55} select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--murekkep) 50%), linear-gradient(135deg,var(--murekkep) 50%,transparent 50%); background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%; background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:40px} .uyari{border:1px solid var(--cizgi);border-left:3px solid var(--murekkep); background:var(--yuzey);padding:14px 18px;margin-bottom:20px;font-size:15.5px} .uyari.iyi{border-left-color:var(--satilik)} .uyari.kotu{border-left-color:#a33b26} /* --- alt bilgi ----------------------------------------------------------- */ .altbilgi{background:var(--murekkep);color:var(--zemin);padding:clamp(44px,6vw,76px) 0 28px;margin-top:0} .altbilgi a{color:var(--zemin)} .altbilgi-ust{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:34px; padding-bottom:34px;border-bottom:1px solid rgba(247,247,247,.16)} .altbilgi h4{font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.15em; text-transform:uppercase;color:var(--gri-acik);margin-bottom:14px} .altbilgi ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px} .altbilgi ul a{font-size:15.5px;opacity:.85;transition:opacity .2s} .altbilgi ul a:hover{opacity:1} .altbilgi-alt{display:flex;flex-wrap:wrap;gap:14px;padding-top:22px; font-family:var(--mono);font-size:11.5px;color:var(--gri-acik);letter-spacing:.04em} .altbilgi-alt .sag{margin-left:auto} /* --- sayfa başlığı (iç sayfalar) ---------------------------------------- */ .sayfa-tepe{padding:clamp(40px,6vw,86px) 0 clamp(26px,3vw,40px);border-bottom:1px solid var(--cizgi)} .kirintili{font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase; color:var(--gri);margin-bottom:16px;display:flex;gap:8px;flex-wrap:wrap} .kirintili a:hover{color:var(--murekkep)} /* ========================================================================== ANİMASYONLAR — kütüphanesiz ========================================================================== */ /* --- açılış perdesi ------------------------------------------------------ */ body.kilitli{overflow:hidden} .acilis{ position:fixed;inset:0;z-index:200; background:var(--zemin); display:grid;place-items:center; transition:opacity .45s .12s var(--gecis),visibility .57s; } .acilis.kapaniyor{opacity:0;visibility:hidden} .acilis.kapaniyor .acilis-ic{opacity:0;transform:translateY(-16px); transition:opacity .28s var(--gecis),transform .45s var(--gecis)} .acilis-ic{text-align:center;display:grid;place-items:center;gap:26px; animation:acilis-bel .7s var(--gecis) both} /* --- dönen yazı halkaları ------------------------------------------------ */ .halkalar{ position:relative; width:min(86vw,560px); height:min(86vw,560px); max-height:52vh; perspective:1100px; display:grid;place-items:center; } .halka{ position:absolute;inset:0; transform-style:preserve-3d; will-change:transform; } .halka span{ position:absolute;left:50%;top:50%; font-family:var(--dar);font-weight:700; text-transform:uppercase; white-space:pre; color:var(--murekkep); } .halka-dis{animation:halka-don 19s linear infinite} .halka-ic{animation:halka-don 15s linear infinite reverse} .halka-ic span{color:var(--gri)} @keyframes halka-don{ from{transform:rotateX(-16deg) rotateY(0deg)} to {transform:rotateX(-16deg) rotateY(360deg)} } .halka-ic{--egim:24deg} @keyframes halka-don-ic{ from{transform:rotateX(24deg) rotateY(0deg)} to {transform:rotateX(24deg) rotateY(-360deg)} } .halka-ic{animation-name:halka-don-ic} .acilis-alt{ font-family:var(--mono);font-size:11.5px;letter-spacing:.24em;text-transform:uppercase; color:var(--gri); animation:acilis-bel .8s .25s var(--gecis) both; } .acilis-gec{ font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase; color:var(--gri-acik);margin:0; animation:acilis-bel .8s 1.6s var(--gecis) both; } @keyframes acilis-bel{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){ .halka{animation:none!important} } /* --- harflerin dağılıp toplanması ---------------------------------------- Kaydırmaya bağlı: --p 0 iken harfler dağınık, 1 iken yerinde. Yukarı kaydırınca --p küçülür ve harfler tekrar dağılır. Kırpma (overflow:hidden) KULLANMIYORUZ — eski sitede ğ, İ ve Ü harflerinin üst işaretleri o yüzden kesiliyordu ("DEĞERLEME"→"DEGERLEME", "MÜLKE"→"MULKE"). */ .anim-baslik{--p:1} /* JS yoksa yazı düz görünür */ .anim-baslik .anim-kelime{display:inline-block;vertical-align:top} .anim-baslik .anim-harf{ /* her harfin kendi ilerlemesi — sırayla toplansınlar */ --lp:clamp(0, calc((var(--p) - var(--go,0)) * 2.1), 1); --t:calc(1 - var(--lp)); display:inline-block; opacity:var(--lp); transform:translate(calc(var(--kx,0em) * var(--t)), calc(var(--ky,0em) * var(--t))) rotate(calc(var(--ka,0deg) * var(--t))); will-change:transform,opacity; } /* --- kaydırdıkça renklenen satırlar (koyu bölümlerde) -------------------- */ .anim-vurgu{color:var(--sonuk,#4a4a4a);transition:color .45s var(--gecis)} .anim-vurgu.gorundu{color:var(--parlak,#f7f7f7)} /* --- satır satır beliren metin ------------------------------------------ */ .anim-satir{ opacity:0;transform:translateY(26px); transition:opacity .7s var(--gecis),transform .7s var(--gecis); } .anim-satir.gorundu{opacity:1;transform:none} /* --- genel giriş --------------------------------------------------------- */ .anim-gir{ opacity:0;transform:translateY(18px); transition:opacity .6s var(--gecis),transform .6s var(--gecis); } .anim-gir.gorundu{opacity:1;transform:none} /* ========================================================================== AKIŞ — tam ekran bölümler, dev yazılar, koyu/açık geçişler ========================================================================== */ .perde{ min-height:100svh; display:flex;flex-direction:column;justify-content:center; padding-block:clamp(80px,10vh,120px) clamp(56px,8vh,90px); position:relative; } .perde-kisa{min-height:auto;padding-block:clamp(64px,9vw,128px)} .perde-koyu{background:var(--murekkep);color:var(--zemin);--sonuk:#4a4a4a;--parlak:#f7f7f7} .perde-koyu .etiket{color:#6e6e6e} .perde-koyu .etiket::before{color:var(--zemin)} .perde-koyu .metin{color:#b9b9b9} .perde-koyu .solgun{color:#7d7d7d} .perde-koyu .cizgi{background:#2a2a2a} /* ekranı dolduran yazı */ .dev{ font-family:var(--dar);font-weight:700; font-size:clamp(46px,13.5vw,190px); line-height:.88;letter-spacing:-.035em; margin:0;text-transform:uppercase; } .dev-kucuk{font-size:clamp(38px,9vw,120px);line-height:.92;letter-spacing:-.03em} /* geniş harf aralıklı alt satır — "P E N D İ K , İ S T A N B U L" */ .acik-yazi{ font-family:var(--mono);font-weight:300; font-size:clamp(10px,1.35vw,15px); letter-spacing:.42em;text-transform:uppercase;color:var(--gri); margin-top:14px; } /* köşeli parantezli bağlantı — "[ MÜLKÜ İNCELE ]" */ .parantez{ font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase; display:inline-block;transition:letter-spacing .3s var(--gecis),opacity .2s; } .parantez::before{content:"[ "} .parantez::after{content:" ]"} .parantez:hover{letter-spacing:.2em} /* oklu küçük etiket — "ÖNE ÇIKAN İLAN ↘" */ .ok-etiket{ font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase; color:var(--gri);display:flex;align-items:center;gap:8px;margin-bottom:6px; } .ok-etiket::after{content:"↘";font-size:13px} /* eğik bölü listesi — "/ KONUT / ARSA / TİCARİ" */ .bolu-liste{list-style:none;margin:0;padding:0} .bolu-liste li{ font-family:var(--dar);font-weight:700;font-size:clamp(15px,1.7vw,20px); line-height:1.28;letter-spacing:-.005em; } .bolu-liste li::before{content:"/";color:var(--gri);margin-right:5px} /* Mustafa'nın fotoğrafı */ .portre{width:min(300px,52vw);height:auto;filter:grayscale(1) contrast(1.05)} /* ── ortalanmış giriş bölümü ─────────────────────────────────────────────── Unvan, fotoğraf ve bağlantılar tek sütun halinde ortada duruyor. */ .giris{text-align:center} /* Unvan iki-üç kelime olabiliyor. Boyut ekran YÜKSEKLİĞİNE de bakıyor ki başlık + fotoğraf + bağlantılar ilk ekrana birlikte sığsın. */ .giris .dev{ font-size:clamp(34px, min(9.2vw, 12.2vh), 128px); line-height:.96; } .giris .acik-yazi{margin-top:clamp(12px,1.8vw,20px)} .giris .portre{ display:block; width:min(210px, 26vh, 42vw); margin:clamp(16px,2.6vw,30px) auto 0; } .giris .bolu-liste{ display:flex;justify-content:center;flex-wrap:wrap; gap:clamp(12px,2.6vw,30px);margin-top:clamp(12px,1.8vw,20px); } .giris .ok-etiket{justify-content:center} .giris-baglantilar{ display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start; gap:clamp(22px,6vw,80px);margin-top:clamp(22px,3.6vw,44px); } /* alçak ekranda giriş 100svh'ye sığsın */ @media (max-height:740px){ .giris{padding-block:clamp(56px,9vh,80px) clamp(30px,5vh,50px)} .giris .bolu-liste{gap:clamp(10px,2vw,20px)} .giris-baglantilar{gap:clamp(18px,5vw,48px);margin-top:clamp(16px,2.6vw,28px)} } /* ── tanıtım videosu (ana sayfa) ─────────────────────────────────────────── Oynatıcı tıklanmadan yüklenmez; başlangıçta yalnızca kapak görseli var. */ .tanitim{text-align:center} .tanitim .etiket{justify-content:center} .tanitim-cerceve{ position:relative;overflow:hidden; width:100%;max-width:940px;aspect-ratio:16/9; margin:clamp(16px,2.6vw,28px) auto 0; background:#101010;border:1px solid var(--cizgi); } /* Instagram reel'leri dikey — çerçeve de dikey olsun */ .tanitim-cerceve[data-oran="dikey"]{max-width:390px;aspect-ratio:9/16} .tanitim-ac{ all:unset;box-sizing:border-box; position:absolute;inset:0;display:block;cursor:pointer; } .tanitim-ac:focus-visible{outline:2px solid var(--zemin);outline-offset:-5px} .tanitim-ac img{ width:100%;height:100%;object-fit:cover; transition:transform .55s var(--gecis); } .tanitim-ac:hover img,.tanitim-ac:focus-visible img{transform:scale(1.03)} .tanitim-bos{ position:absolute;inset:0;display:grid;place-items:center; font-family:var(--mono);font-size:11px;letter-spacing:.14em; text-transform:uppercase;color:var(--gri-acik); } .tanitim-oynat{ position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:clamp(54px,6.5vw,76px);aspect-ratio:1;border-radius:50%; background:rgba(255,255,255,.94);color:var(--murekkep); display:grid;place-items:center; font-size:clamp(17px,2vw,23px);padding-left:3px; transition:transform .35s var(--gecis); } .tanitim-ac:hover .tanitim-oynat{transform:translate(-50%,-50%) scale(1.09)} .tanitim-cerceve iframe{position:absolute;inset:0;width:100%;height:100%;border:0} @media (prefers-reduced-motion:reduce){ .tanitim-ac img,.tanitim-oynat{transition:none} } /* numaralı hizmet listesi */ .sira-liste{border-top:1px solid var(--cizgi)} .sira-liste a,.sira-liste div{ display:flex;align-items:baseline;gap:clamp(14px,3vw,40px); padding:clamp(15px,2.2vw,26px) 0;border-bottom:1px solid var(--cizgi); transition:padding-left .35s var(--gecis); } .sira-liste a:hover{padding-left:14px} .sira-liste .no{ font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--gri); flex:none;width:34px; } .sira-liste .ad{ font-family:var(--dar);font-weight:700; font-size:clamp(21px,3.4vw,42px);line-height:1.06;letter-spacing:-.015em; } .sira-liste .aciklama{margin-left:auto;max-width:34ch;font-size:14.5px;color:var(--gri);text-align:right} @media (max-width:760px){ .sira-liste a,.sira-liste div{flex-wrap:wrap;gap:4px 14px} .sira-liste .aciklama{margin-left:48px;text-align:left;flex-basis:100%;max-width:none;font-size:13.5px} } /* footer'daki dev imza */ .imza{ font-family:var(--dar);font-weight:700; font-size:clamp(44px,15vw,230px);line-height:.82;letter-spacing:-.045em; text-transform:uppercase;margin:clamp(30px,5vw,60px) 0 18px; } /* --- menü katmanı -------------------------------------------------------- */ .menu-ac{ margin-left:auto;background:none;border:0;cursor:pointer;padding:8px 0; font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase; color:inherit;display:flex;align-items:flex-start;gap:2px; } .menu-ac sup{font-size:9px;line-height:1} .katman{ position:fixed;inset:0;z-index:120; background:var(--zemin); display:flex;flex-direction:column; padding:18px var(--kenar) 26px; opacity:0;visibility:hidden; overflow-y:auto; /* çok sığmazsa kaydırılabilsin */ overscroll-behavior:contain; transition:opacity .35s var(--gecis),visibility .35s; } .katman.acik{opacity:1;visibility:visible} .katman-ust{display:flex;align-items:center;min-height:46px} .katman-liste{ list-style:none;margin:auto 0;padding:0; display:flex;flex-direction:column;gap:clamp(0px,.6vh,8px); } .katman-liste a{ font-family:var(--dar);font-weight:700; /* Boyut hem genişliğe hem YÜKSEKLİĞE bakıyor. Sekiz madde + alt başlıklar dizüstü ekranda da tam sığsın diye yükseklik sınırı belirleyici. */ font-size:clamp(24px, min(7.4vw, 6.1vh), 56px); line-height:1.04;letter-spacing:-.02em; text-transform:uppercase;display:inline-block; transform:translateY(16px);opacity:0; transition:transform .5s var(--gecis),opacity .5s var(--gecis),color .2s; } .katman.acik .katman-liste a{transform:none;opacity:1} .katman.acik .katman-liste li:nth-child(1) a{transition-delay:.06s} .katman.acik .katman-liste li:nth-child(2) a{transition-delay:.10s} .katman.acik .katman-liste li:nth-child(3) a{transition-delay:.14s} .katman.acik .katman-liste li:nth-child(4) a{transition-delay:.18s} .katman.acik .katman-liste li:nth-child(5) a{transition-delay:.22s} .katman.acik .katman-liste li:nth-child(6) a{transition-delay:.26s} .katman.acik .katman-liste li:nth-child(7) a{transition-delay:.30s} .katman.acik .katman-liste li:nth-child(8) a{transition-delay:.34s} .katman-liste a:hover{color:var(--gri)} /* Dikey denge: liste ortada, alt bilgi en dipte. auto pay doğrudan .katman'ın çocuğuna verilmeli — liste bir