/* ============================================================================= DURADA — Dur Ada İnşaat & Mimarlık Sıfırdan yazılmış arayüz. Hazır tema/şablon KULLANILMADI (teklif maddesi #3). Tasarım dili LOGODAN türetildi (docs/marka/MARKA.md): · ince altın çizgi (line-art) — logodaki bina silueti gibi · geniş harf aralıklı açık caps — logodaki "İNŞAAT & MİMARLIK" · altın çizgiler arasında ortalanmış etiket — logonun imza motifi · koyu lacivert zemin + beyaz metin 🔴 RENK KURALI (WCAG ölçüldü — MARKA.md): Altın #D19D47 bir METİN rengi DEĞİL, VURGU rengidir. beyaz zeminde altın yazı → 2,44:1 KULLANILMAZ altın zeminde beyaz yazı → 2,44:1 KULLANILMAZ lacivert zeminde altın → 3,86:1 yalnız BÜYÜK başlık/rakam Gövde metni yalnız: beyaz↔lacivert (9,4:1) · koyu gri↔beyaz (7,5:1) Altın zeminde metin gerekiyorsa ÇOK KOYU lacivert (#08243F) kullanılır (6,5:1). ============================================================================= */ /* ============================================================================= 0) YAZI TİPLERİ — K-015 · KENDİ SUNUCUMUZDA Seçim (Mustafa, 2026-08-04, dört aday gerçek sayfa üzerinde karşılaştırıldı): Başlık → JOST · logodaki Futura benzeri geometrik harflere en yakını Gövde → INTER · ekran okunaklılığı en yüksek nötr sans ⛔ Google Fonts CDN KULLANILMIYOR (K-015): · KVKK — CDN her ziyaretçinin IP'sini üçüncü tarafa gönderir · Hız — üçüncü taraf DNS + TLS el sıkışması yok · Bağımsızlık — prod'da dış ağ kısıtı olsa bile site aynı görünür Dosyalar `docs/marka/indir-fontlar.php` ile bir kez indirildi, depoda duruyor. ✅ Türkçe kapsama TARAYICIDA DOĞRULANDI (K-015 şartı): ı ğ ü ş ö ç · İ Ğ Ü Ş Ö Ç · â î û — hepsi doğru basıldı. 📉 latin-ext dosyaları KIRPILDI (pyftsubset): Vietnamca, IPA ve Latin Extended Additional bloklarına bu sitede hiç ihtiyaç yok. Inter: 83 KB → 36 KB (%56). ⚠️ unicode-range değerleri KIRPILAN kapsamla birebir aynı tutulmalı — aksi hâlde tarayıcı hiç kullanmayacağı bir dosyayı indirir. ============================================================================= */ @font-face { font-family: "Jost"; font-style: normal; font-weight: 200 700; /* değişken font — tek dosya, tüm ağırlıklar */ font-display: swap; /* font gelene kadar metin GÖRÜNÜR kalır */ src: url("../fonts/jost-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Jost"; font-style: normal; font-weight: 200 700; font-display: swap; src: url("../fonts/jost-latin-ext.woff2") format("woff2"); unicode-range: U+0100-017F, U+0180-01BF, U+01CD-01DC, U+01F4-01FF, U+0218-021B, U+02C6-02CB, U+02DC, U+0300-0304, U+0308, U+030A-030C, U+0327, U+0328, U+20A0-20CF, U+2113; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-latin-ext.woff2") format("woff2"); unicode-range: U+0100-017F, U+0180-01BF, U+01CD-01DC, U+01F4-01FF, U+0218-021B, U+02C6-02CB, U+02DC, U+0300-0304, U+0308, U+030A-030C, U+0327, U+0328, U+20A0-20CF, U+2113; } /* ----------------------------------------------------------------------------- 1) Belirteçler ----------------------------------------------------------------------------- */ :root { /* Marka — ÖLÇÜLDÜ, tahmin değil (MARKA.md) */ --lacivert: #0F4478; --lacivert-koyu: #0B3159; --lacivert-derin: #08243F; /* altın zemin üzerinde metin için (6,5:1) */ --lacivert-acik: #17568F; --altin: #D19D47; --altin-acik: #E2B46A; --altin-koyu: #B8842F; --altin-soluk: rgba(209, 157, 71, .32); /* Logodaki metalik altın geçişi — düz altın yerine bunu kullan. ⚠️ Degradede kontrast TEK BİR SAYI DEĞİLDİR: üstüne yazı konacaksa EN AÇIK ve EN KOYU ucun ikisi de ayrı ayrı ölçülmeli. Bu degrade + --lacivert-derin metin: 8,22:1 … 4,78:1 ✅ */ --altin-degrade: linear-gradient(135deg, #E2B46A 0%, #D19D47 52%, #B8842F 100%); --altin-degrade-acik: linear-gradient(135deg, #EDC583 0%, #DCA855 52%, #C89238 100%); --beyaz: #FFFFFF; --krem: #F7F4F0; /* logodaki #F2EDE7 ailesinden — sıcak nötr */ --metin: #1F2933; --metin-ikincil: #4A5568; /* beyaz üstünde 7,5:1 */ --cizgi: #E4E8EE; /* Tipografi — K-015 · Jost (başlık) + Inter (gövde), kendi sunucumuzda. Yedek yığın bilerek duruyor: font dosyası bir sebeple gelmezse site yazısız kalmaz, sistem yazı tipiyle doğru görünmeye devam eder. */ --yazi-baslik: "Jost", "Century Gothic", "Segoe UI", system-ui, -apple-system, Arial, sans-serif; --yazi-govde: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --kap: 1180px; --olcek: clamp(1rem, .6rem + 1.4vw, 1.55rem); /* bölüm iç boşluk ölçeği */ --gecis: 180ms cubic-bezier(.4, 0, .2, 1); --golge: 0 1px 2px rgba(15, 68, 120, .06), 0 8px 24px rgba(15, 68, 120, .07); --golge-guclu:0 2px 4px rgba(15, 68, 120, .08), 0 18px 44px rgba(15, 68, 120, .14); } /* ----------------------------------------------------------------------------- 2) Temel ----------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--yazi-govde); font-size: 1rem; line-height: 1.75; color: var(--metin); background: var(--beyaz); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: var(--lacivert); text-decoration-thickness: 1px; text-underline-offset: .18em; } a:hover { color: var(--lacivert-acik); } :focus-visible { outline: 3px solid var(--altin); outline-offset: 3px; border-radius: 2px; } /* Başlık tonu — K-015 eki (Mustafa: "ince + geniş aralık") Jost, sistem yazı tipinden daha dar dokuduğu için harf aralığı biraz açıldı; logodaki "DUR ADA"nın geniş aralıklı dili böyle korunuyor. */ h1, h2, h3, h4 { font-family: var(--yazi-baslik); font-weight: 300; /* logodaki ince-modern ağırlık */ line-height: 1.18; letter-spacing: .022em; color: var(--lacivert); margin: 0 0 .6em; text-wrap: balance; } /* Büyük başlıklar daha da açık dokunur — küçükler okunurluk için sıkı kalır */ h1 { letter-spacing: .028em; } h3 { letter-spacing: .012em; } h1 { font-size: clamp(2rem, 1.2rem + 3.4vw, 3.5rem); } h2 { font-size: clamp(1.55rem, 1.1rem + 1.9vw, 2.4rem); } h3 { font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem); font-weight: 500; } p { margin: 0 0 1.1em; } p:last-child { margin-bottom: 0; } ul, ol { padding-left: 1.35em; } /* İçeriğe atlama bağlantısı — klavye kullanıcısı menüyü her sayfada geçmesin */ .atla { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--altin); color: var(--lacivert-derin); padding: .75rem 1.25rem; font-weight: 600; border-radius: 0 0 4px 0; } .atla:focus { left: 0; } /* ----------------------------------------------------------------------------- 3) Düzen ----------------------------------------------------------------------------- */ .kap { width: 100%; max-width: var(--kap); margin-inline: auto; padding-inline: clamp(1.15rem, .6rem + 2vw, 2.5rem); } .bolum { padding-block: calc(var(--olcek) * 2.6); } .bolum--dar { padding-block: calc(var(--olcek) * 1.8); } .bolum--krem { background: var(--krem); } .bolum--lacivert { background: var(--lacivert); color: rgba(255,255,255,.9); } .bolum--lacivert h2, .bolum--lacivert h3 { color: var(--beyaz); } /* Bölüm başlığı — logonun imza motifi: ortada caps etiket, iki yanında ince ALTIN çizgi. Etiket metni LACİVERT (altın değil) — beyaz zeminde altın yazı okunmaz. */ .bolum-etiket { display: flex; align-items: center; gap: .9rem; margin: 0 0 .85rem; font-family: var(--yazi-baslik); font-size: .74rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--lacivert); } .bolum-etiket::before, .bolum-etiket::after { content: ""; height: 1px; background: var(--altin); flex: 1 1 auto; min-width: 1.25rem; } .bolum-etiket--sol::before { flex: 0 0 2.25rem; } .bolum-etiket--sol::after { display: none; } .bolum--lacivert .bolum-etiket { color: var(--altin-acik); } /* laciverte karşı 3,9:1 · yalnız etiket */ .bolum-ust { max-width: 46rem; margin-bottom: calc(var(--olcek) * 1.5); } .bolum-ust--orta { margin-inline: auto; text-align: center; } .bolum-ust--orta .bolum-etiket { justify-content: center; } .bolum-ust p { color: var(--metin-ikincil); font-size: 1.06rem; margin-bottom: 0; } .bolum--lacivert .bolum-ust p { color: rgba(255,255,255,.82); } .izgara { display: grid; gap: clamp(1rem, .5rem + 1.4vw, 1.75rem); } .izgara--2 { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); } .izgara--3 { grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr)); } /* ----------------------------------------------------------------------------- 4) Düğmeler ----------------------------------------------------------------------------- */ .dugme { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: .85rem 1.8rem; font-family: var(--yazi-baslik); font-size: .93rem; font-weight: 600; letter-spacing: .06em; text-decoration: none; border: 1px solid transparent; border-radius: 999px; /* 2px idi — köşeli dikdörtgen eski duruyordu */ cursor: pointer; transition: background var(--gecis), color var(--gecis), border-color var(--gecis), transform var(--gecis), box-shadow var(--gecis); } .dugme:hover { transform: translateY(-1px); } .dugme svg { width: 1.1em; height: 1.1em; flex: none; } /* Birincil: LOGODAKİ ALTIN DEGRADE + ÇOK KOYU lacivert metin. Degradenin iki ucu da ayrı ayrı ölçüldü — bir degradede kontrast tek bir sayı değildir, EN AÇIK ve EN KOYU noktada birden geçmek zorundadır: açık uç #E2B46A → 8,22:1 ✅ koyu uç #B8842F → 4,78:1 ✅ (metin beyaz olsaydı açık uçta 1,9:1'e düşerdi — okunmazdı) */ .dugme--birincil { background: var(--altin-degrade); color: var(--lacivert-derin); box-shadow: 0 6px 18px rgba(184, 132, 47, .3); } .dugme--birincil:hover { background: var(--altin-degrade-acik); color: var(--lacivert-derin); box-shadow: 0 8px 22px rgba(184, 132, 47, .38); } /* İkincil: çerçeveli, lacivert metin */ .dugme--ikincil { background: transparent; color: var(--lacivert); border-color: var(--altin); } .dugme--ikincil:hover { background: var(--lacivert); color: var(--beyaz); border-color: var(--lacivert); } /* Koyu zeminde ikincil düğme 🔴 TARAYICIDA BULUNDU: yeni "şerit" bölümü eklenince buradaki liste eksik kaldı ve şeritteki ikincil düğme KOYU ZEMİNDE LACİVERT yazıyla neredeyse görünmez oldu. Koyu zemin veren HER bölüm bu listede olmak zorunda. */ .bolum--lacivert .dugme--ikincil, .serit .dugme--ikincil, .sayfa-tepe .dugme--ikincil, .slayt .dugme--ikincil, .cam .dugme--ikincil, .dugme--ikincil-acik { color: var(--beyaz); border-color: rgba(255,255,255,.45); } /* `.cam` da listeye girdi: cam yüzey her zaman koyu bir zeminin üstünde durur, dolayısıyla içindeki ikincil düğme lacivert yazıyla görünmez olurdu. Cam siteye yayılacağı için bunu her seferinde tek tek eklemek yerine bileşenin kendisi listeye alındı. */ .bolum--lacivert .dugme--ikincil:hover, .serit .dugme--ikincil:hover, .sayfa-tepe .dugme--ikincil:hover, .dugme--ikincil-acik:hover { background: var(--beyaz); color: var(--lacivert); border-color: var(--beyaz); } .dugme-grup { display: flex; flex-wrap: wrap; gap: .85rem; } /* Metin bağlantısı + altın ok */ .bag-ok { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--yazi-baslik); font-size: .88rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--lacivert); text-decoration: none; } .bag-ok::after { content: ""; width: 1.6rem; height: 1px; background: var(--altin); transition: width var(--gecis); } .bag-ok:hover::after { width: 2.4rem; } /* Liste satırı içindeki bağlantı (ör. adresin altındaki "Yol tarifi al"): asıl bilginin yanında duruyor, onu bastırmamalı — caps ve büyük punto burada satırın kendisinden daha yüksek sesli çıkıyordu. */ .bag-ok--satir { font-size: .82rem; letter-spacing: .04em; text-transform: none; color: var(--altin-koyu); } .bag-ok--satir::after { width: 1.1rem; } .bag-ok--satir:hover::after { width: 1.7rem; } /* --- KART İÇİNDEKİ bağlantı: metin değil, DAİRESEL OK ----------------------- "DEVAMINI OKU" caps metni kartın altında gürültü yapıyordu: kartın TAMAMI zaten tıklanabilir bir bağlantı, başlık da orada — metin aynı şeyi üçüncü kez söylüyordu. Yerine sağ altta bir ok: ne yapılacağını anlatır, yer kaplamaz. ♿ Metin SİLİNMEDİ, görsel olarak gizlendi (`clip-path`): ekran okuyucu "Devamını oku" duymaya devam ediyor. Yalnız ok bırakmak, göremeyenler için bağlantıyı adsız bırakırdı. */ .kart .bag-ok { align-self: flex-end; width: 42px; height: 42px; padding: 0; gap: 0; border-radius: 50%; border: 1px solid var(--cizgi); color: var(--lacivert); /* metni görsel olarak gizle, erişilebilirlikte tut */ font-size: 0; line-height: 0; position: relative; transition: background var(--gecis), border-color var(--gecis), transform var(--gecis); } .kart .bag-ok::after { content: ""; position: absolute; inset: 0; width: auto; height: auto; background: none; /* Ok — arka planda SVG olarak, currentColor yerine sabit çizim */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F4478' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13'/%3E%3Cpath d='m12.5 6 6 6-6 6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 19px 19px; transition: transform var(--gecis), background-image var(--gecis); } .kart:hover .bag-ok { background: var(--altin-degrade); border-color: transparent; transform: translateX(3px); box-shadow: 0 6px 16px rgba(184, 132, 47, .3); } /* Altın zeminde ok KOYU lacivert olmalı — beyaz ok altın üstünde 1,9:1 kalırdı */ .kart:hover .bag-ok::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2308243F' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13'/%3E%3Cpath d='m12.5 6 6 6-6 6'/%3E%3C/svg%3E"); } /* ----------------------------------------------------------------------------- 4b) CAM (glassmorphism) — YENİDEN KULLANILABİLİR BİLEŞEN 📍 NEDEN BURADA: bileşen, KULLANANLARDAN ÖNCE tanımlı olmalı. Önce /bilgi bölümünde (dosya sonu) duruyordu; `.slayt__panel` gibi daha yukarıdaki kurallar `.cam`'ı geçersiz kılamıyordu — ikisi de tek sınıf (0,1,0) olduğu için SONRA gelen kazanıyor ve `.slayt__panel`in blur ayarı sessizce yutuluyordu. Cam siteye yayılacağı için her kullanımda `.cam.X` yazmak yerine tanım doğru yere alındı. ⇒ Yeni bir cam yüzey eklerken kuralını BU SATIRIN ALTINA yaz. 🔴 CAMIN ŞARTI: arkasında GÖRÜLECEK bir şey olmalı. Düz zemin üstünde cam görünmez, yalnız açık bir dikdörtgen olur ⇒ arkaya fotoğraf/video konuyor. 🔴 KONTRAST GARANTİSİ (ölçüldü — tasarım sisteminin tamamı buna bağlı): Cam saydam olduğu için arka plan değişkendir; ölçmeden "okunur" denemez. En kötü durum hesabı (arkadaki fotoğraf BEMBEYAZ varsayıldı): fotoğraf → %68 koyu perde → %30 lacivert cam ⇒ beyaz metin 7,73:1 ✅ *(Kahraman slaytında perde farklı: %66 ⇒ 5,06:1 — hesap orada yazılı.)* ⚠️ İLK DENEME %62 CAM + %58 PERDE İDİ: kontrast yeterliydi (6,85:1) ama "cam değil koyu kutu" gibi duruyordu — arkadaki fotoğraf hiç görünmüyordu. Düzeltme yönü ÖNEMLİ: camı saydamlaştırıp kaybolan kontrastı PERDEDEN geri almak. Perde her yerde koyu bir taban garanti ettiği için cam %30'a inince kontrast DÜŞMEDİ, 7,73'e ÇIKTI. Yani "daha güzel" ile "daha okunur" birbirinin rakibi değildi; doğru katmanı ayarlamak meselesiydi. ⇒ --cam-alfa ARTIRILIRSA cam kapanır; perde azaltılırsa kontrast düşer. İkisi birlikte düşünülür, biri tek başına oynatılmaz. 🛟 backdrop-filter desteklenmeyen tarayıcıda cam DAHA OPAK olur (aşağıda @supports) — bulanıklık gitse de okunurluk gitmez. ----------------------------------------------------------------------------- */ :root { --cam-alfa: .30; --cam-zemin: rgba(11, 45, 82, var(--cam-alfa)); --cam-parlak: rgba(255, 255, 255, .16); } .cam { position: relative; /* İki katmanlı zemin: içeride cam rengi (padding-box), kenarda IŞIK KIRILMASI taklidi olan degrade çerçeve (border-box). `border: transparent` olmadan ikinci degrade görünmez. Bu, maskesiz/filtresiz bir kenar parlaması — D-110'dan sonra ucuz olanı seçiyoruz. */ background: linear-gradient(var(--cam-zemin), var(--cam-zemin)) padding-box, linear-gradient(140deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.10) 34%, rgba(255,255,255,.05) 62%, rgba(255,255,255,.34) 100%) border-box; border: 1px solid transparent; backdrop-filter: blur(30px) saturate(190%); -webkit-backdrop-filter: blur(30px) saturate(190%); border-radius: 26px; box-shadow: 0 24px 60px rgba(3, 16, 32, .42), inset 0 1px 1px rgba(255, 255, 255, .30), /* üst kenarda ışık — cam hissi buradan */ inset 0 -1px 1px rgba(0, 0, 0, .18); /* alt kenarda kalınlık */ } /* Üstten çapraz inen parlama — camın "yüzeyi" olduğunu gösterir */ .cam::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(152deg, var(--cam-parlak) 0%, transparent 46%); } .cam > * { position: relative; z-index: 1; } /* Bulanıklık yoksa saydamlığı azalt — okunurluk asla bulanıklığa bağlı olmasın. Kenar degradesi de düşer, sade bir kenar kalır: süs gider, işlev kalır. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .cam { background: rgba(11, 45, 82, .93); border-color: rgba(255, 255, 255, .18); } } /* Kullanıcı saydamlık istemiyorsa (işletim sistemi ayarı) cam katılaşır */ @media (prefers-reduced-transparency: reduce) { .cam { background: rgba(11, 45, 82, .96); border-color: rgba(255, 255, 255, .18); backdrop-filter: none; -webkit-backdrop-filter: none; } } /* ----------------------------------------------------------------------------- 5) Başlık (header) ----------------------------------------------------------------------------- */ .tepe { position: sticky; top: 0; z-index: 50; background: var(--lacivert); border-bottom: 1px solid rgba(209,157,71,.35); } .tepe__ic { display: flex; align-items: center; gap: 1.25rem; min-height: 72px; } .tepe__logo { display: flex; align-items: center; flex: none; text-decoration: none; } /* Logo kaynağı 272x77 px (A-11: vektör bekleniyor). 36 px yükseklikte NET; daha büyüğü bulanıklaşır — bu yüzden üst sınır bilinçli olarak düşük. */ .tepe__logo img { height: 36px; width: auto; } .tepe__logo-yazi { font-family: var(--yazi-baslik); font-size: 1.1rem; font-weight: 300; letter-spacing: .14em; color: var(--beyaz); text-transform: uppercase; } .tepe__bosluk { flex: 1 1 auto; } .gezinti { display: flex; align-items: center; gap: .35rem; } .gezinti a { display: block; padding: .55rem .85rem; font-family: var(--yazi-baslik); font-size: .9rem; font-weight: 500; letter-spacing: .04em; color: rgba(255,255,255,.88); text-decoration: none; border-radius: 2px; transition: color var(--gecis), background var(--gecis); } .gezinti a:hover { color: var(--beyaz); background: rgba(255,255,255,.09); } .gezinti a[aria-current="page"] { color: var(--beyaz); box-shadow: inset 0 -2px 0 var(--altin); } /* Dil değiştirici (teklif #1: "tek tuşla") */ .dil { display: flex; align-items: center; gap: .2rem; margin-left: .4rem; padding-left: .9rem; border-left: 1px solid rgba(255,255,255,.2); } .dil a, .dil span { padding: .3rem .5rem; font-family: var(--yazi-baslik); font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; border-radius: 2px; } .dil a { color: rgba(255,255,255,.62); } .dil a:hover { color: var(--beyaz); background: rgba(255,255,255,.1); } .dil [aria-current="true"] { color: var(--lacivert-derin); background: var(--altin); } .tepe__tel { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--yazi-baslik); font-size: .92rem; font-weight: 600; letter-spacing: .03em; color: var(--beyaz); text-decoration: none; white-space: nowrap; } .tepe__tel svg { width: 1.05em; height: 1.05em; color: var(--altin); flex: none; } .tepe__tel:hover { color: var(--altin-acik); } /* Mobil menü düğmesi */ .menu-dugme { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; background: transparent; border: 1px solid rgba(255,255,255,.3); border-radius: 2px; color: var(--beyaz); cursor: pointer; } .menu-dugme svg { width: 22px; height: 22px; } .menu-dugme__kapat { display: none; } .menu-dugme[aria-expanded="true"] .menu-dugme__ac { display: none; } .menu-dugme[aria-expanded="true"] .menu-dugme__kapat { display: block; } /* ----------------------------------------------------------------------------- 6) Kahraman bölüm (hero) Fotoğraf YOK (A-05) ⇒ zemin, logodaki çizgi diline uygun mimari ızgara. Stok fotoğraf ya da sahte görsel KULLANILMADI (CLAUDE.md §2). ----------------------------------------------------------------------------- */ .kahraman { position: relative; overflow: hidden; background: var(--lacivert); color: var(--beyaz); padding-block: clamp(3.5rem, 2rem + 9vw, 8rem); } .kahraman::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(209,157,71,.13) 1px, transparent 1px), linear-gradient(to bottom, rgba(209,157,71,.13) 1px, transparent 1px); background-size: 74px 74px; mask-image: radial-gradient(ellipse 90% 75% at 78% 15%, #000 5%, transparent 72%); -webkit-mask-image: radial-gradient(ellipse 90% 75% at 78% 15%, #000 5%, transparent 72%); pointer-events: none; } .kahraman::after { content: ""; position: absolute; right: -6%; bottom: -14%; width: min(46rem, 62vw); aspect-ratio: 1; background: radial-gradient(circle at 50% 50%, rgba(209,157,71,.16), transparent 62%); pointer-events: none; } /* --- Kahraman GÖRSELLİ durumu ------------------------------------------ Fotoğraf tam kaplar; üstüne KONTRAST GARANTİLİ lacivert perde iner. Perde soldan neredeyse tam opak başlar (beyaz yazı 9,4:1) ve sağa doğru açılır ⇒ fotoğraf hangi tonda olursa olsun başlık okunur kalır. Bu, "koyulaştırıp umarım yeter" değil, ölçülebilir bir kural. */ .kahraman__gorsel { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; } .kahraman--gorselli::before { /* fotoğraf varken mimari ızgara çok hafifler — iki desen yarışmasın */ opacity: .45; z-index: 1; } .kahraman--gorselli .kahraman__cizim { opacity: .18; z-index: 1; } /* 🔴 İKİ SINIF BİRDEN yazılmasının sebebi var (tarayıcıda bulundu): Dosyada daha AŞAĞIDA `.kahraman .kap { z-index: 1 }` var. Tek sınıfla yazılınca özgüllükler eşit oluyor ve SONRAKİ kural kazanıyor ⇒ metin perdenin ALTINDA kalıp soluk görünüyordu. `.kahraman.kahraman--gorselli` özgüllüğü bir kademe yükseltiyor ve sırayı garantiye alıyor. */ .kahraman.kahraman--gorselli .kap { z-index: 3; } .kahraman--gorselli .kahraman__perde, .kahraman--gorselli::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(100deg, rgba(15, 68, 120, .96) 0%, rgba(15, 68, 120, .93) 34%, rgba(15, 68, 120, .72) 62%, rgba(15, 68, 120, .48) 100%), linear-gradient(to top, rgba(8, 36, 63, .55) 0%, transparent 46%); width: auto; height: auto; aspect-ratio: auto; /* fotoğrafsız haldeki parlamayı iptal et */ pointer-events: none; } /* Dar ekranda metin fotoğrafın üstüne biner ⇒ perde her yerde koyulaşır */ @media (max-width: 62rem) { .kahraman--gorselli::after { background: linear-gradient(to bottom, rgba(15, 68, 120, .93) 0%, rgba(15, 68, 120, .88) 100%), linear-gradient(to top, rgba(8, 36, 63, .5) 0%, transparent 50%); } } /* Soyut mimari eskiz — sağ altta, metnin ARKASINDA */ .kahraman__cizim { position: absolute; right: 2%; bottom: 0; width: min(28rem, 40%); height: auto; color: var(--altin); opacity: .42; pointer-events: none; } /* Dar ekranda metnin altına düşüp okunurluğu bozmasın diye hiç basılmaz */ @media (max-width: 62rem) { .kahraman__cizim { display: none; } } .kahraman .kap { position: relative; z-index: 1; } .kahraman__ic { max-width: 44rem; } .kahraman h1 { color: var(--beyaz); margin-bottom: .45em; } .kahraman__slogan { display: inline-flex; align-items: center; gap: .85rem; margin: 0 0 1.6rem; font-family: var(--yazi-baslik); font-size: clamp(.78rem, .7rem + .3vw, .95rem); font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--altin-acik); /* laciverde karşı 3,9:1 — büyük/aralıklı caps, gövde metni değil */ } .kahraman__slogan::before { content: ""; width: 2.5rem; height: 1px; background: var(--altin); flex: none; } .kahraman__konum { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 2rem; color: rgba(255,255,255,.78); font-size: .95rem; } .kahraman__konum svg { width: 1.05em; height: 1.05em; color: var(--altin); flex: none; } /* ----------------------------------------------------------------------------- 7) Hizmet kartları ----------------------------------------------------------------------------- */ .kart { position: relative; display: flex; flex-direction: column; background: var(--beyaz); border: 1px solid var(--cizgi); /* 2px idi — düğmeler hap, cam paneller 26px olduktan sonra kartlar keskin kalınca sayfa iki ayrı tasarım dilini birden konuşuyordu. */ border-radius: 16px; overflow: hidden; /* görselli durumda köşeler taşmasın */ text-decoration: none; transition: border-color var(--gecis), box-shadow var(--gecis), transform var(--gecis); } /* İç boşluk gövdede — görsel kenardan kenara oturabilsin */ .kart__govde { display: flex; flex-direction: column; flex: 1 1 auto; padding: clamp(1.4rem, 1rem + 1vw, 2rem); } /* --- Kart GÖRSELLİ durumu --- */ .kart__resim { position: relative; display: block; aspect-ratio: 3 / 2; /* sabit oran ⇒ ızgara ritmi bozulmaz, CLS olmaz */ overflow: hidden; background: var(--krem); } .kart__resim img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.16, 1, .3, 1); } .kart--gorselli:hover .kart__resim img { transform: scale(1.04); } /* Görselin alt kenarında ince altın çizgi — marka ayracı */ .kart__resim::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--altin); opacity: .55; } .kart::before { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 0; background: var(--altin); transition: width var(--gecis); } .kart:hover { border-color: var(--altin-soluk); box-shadow: var(--golge); transform: translateY(-3px); } .kart:hover::before { width: 100%; } .kart__ikon { width: 46px; height: 46px; margin-bottom: 1.1rem; color: var(--altin); /* ikon ÇİZGİSİ altın — metin değil, kural bozulmuyor */ flex: none; } .kart__ikon svg { width: 100%; height: 100%; } .kart h3 { color: var(--lacivert); margin-bottom: .5rem; } .kart p { color: var(--metin-ikincil); font-size: .96rem; margin-bottom: 1.2rem; } /* Alt satır: metin yukarıda kalır, ok kartın sağ altına yaslanır. `margin-top:auto` metin uzunluğu farklı kartlarda okları AYNI hizaya getirir — ızgarada göz bir çizgi görür, dağınıklık olmaz. */ .kart__alt { margin-top: auto; padding-top: 1.1rem; display: flex; justify-content: flex-end; } .bolum--krem .kart { background: var(--beyaz); } /* ============================================================================= 6b) KAHRAMAN SLIDER · Slaytlar üst üste yığılı, çapraz geçişle değişir (yatay kaydırma yok: kaydırmalı ray dar ekranda dokunmatik kaydırmayla çakışıyor) · Etkin slaydın görseli çok yavaş yakınlaşır (Ken Burns) — hareket hissi verir ama okumayı bozmaz · Perde yine KONTRAST GARANTİLİ: metin tarafı neredeyse tam lacivert · JS kapalıyken ilk slayt görünür kalır, kontroller gizlenir ============================================================================= */ .slayt { position: relative; overflow: hidden; background: var(--lacivert); color: var(--beyaz); min-height: clamp(30rem, 22rem + 26vh, 44rem); display: flex; align-items: stretch; } .slayt__raylar { position: relative; width: 100%; display: grid; } .slayt__oge { grid-area: 1 / 1; /* hepsi aynı hücrede üst üste */ position: relative; display: flex; align-items: center; padding-block: clamp(4rem, 2.5rem + 7vw, 8rem); opacity: 0; visibility: hidden; transition: opacity .9s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .9s; } .slayt__oge.etkin { opacity: 1; visibility: visible; transition-delay: 0s, 0s; } /* JS yoksa ilk slayt her hâlükârda görünür — site bozulmaz */ .js-yok .slayt__oge:first-child { opacity: 1; visibility: visible; } .js-yok .slayt__kontrol, .js-yok .slayt__ilerleme { display: none; } .slayt__ortam { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; transform: scale(1.06); transition: transform 9s cubic-bezier(.2, 0, .3, 1); } .slayt__oge.etkin .slayt__ortam { transform: scale(1); } /* Perde — arkada VİDEO oynayacağı için kontrastın taşıyıcısı. ⚠️ Sol taraf eskiden %95'ti: cam panel gelmeden önce metnin altındaki tek koruma buydu. Panel eklenince o kadar koyu olması ARKADAKİ GÖRÜNTÜYÜ TAMAMEN ÖLDÜRÜYOR (bkz. /bilgi'de yapılan aynı hata: cam görünmez olur). ⇒ Perde hafifledi, kontrastın bir kısmını panel devraldı; ikisi BİRLİKTE hesaplanıyor: video beyaz kare bile olsa panel içinde 5,06:1. */ .slayt__oge::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(100deg, rgba(15, 68, 120, .70) 0%, rgba(15, 68, 120, .60) 38%, rgba(15, 68, 120, .42) 68%, rgba(15, 68, 120, .30) 100%), linear-gradient(to top, rgba(8, 36, 63, .58) 0%, transparent 46%); } /* 🔴 Mobil perde %66 → %72 (2026-08-05, video mobilde de oynamaya başlayınca). Masaüstü hesabı burada geçerli DEĞİL: mobilde panel tam genişlik olduğu için metin, perdenin en açık bölgesinin de üstünden geçiyor. %66 ile ÖLÇÜM: başlık 4,77:1 ✅ ama alt metin 4,31:1 ❌ (eşik 4,5) %72 ile: başlık 5,47:1 · alt metin 4,95:1 ✅ — ikisi de geçiyor. */ @media (max-width: 62rem) { .slayt__oge::after { background: linear-gradient(to bottom, rgba(15,68,120,.72) 0%, rgba(11,49,89,.80) 100%), linear-gradient(to top, rgba(8,36,63,.55), transparent 55%); } /* Telefon GPU'su masaüstününki değil: oynayan videonun üstünde 20px blur'u her karede hesaplamak ısınma/pil demek. 12px'te cam hissi korunuyor. */ .slayt__panel { backdrop-filter: blur(12px) saturate(150%); -webkit-backdrop-filter: blur(12px) saturate(150%); } } /* ⚠️ Burada `max-width: 46rem` vardı ve `.kap`ın 1180px'ini eziyordu; `.kap` `margin-inline: auto` verdiği için blok 736px'e daralıp ORTAYA kayıyordu — panel eklenince bu apaçık göründü. Kap kendi genişliğinde kalmalı, daralan şey PANEL olmalı; panel de blok akışında SOLDA durur. */ .slayt__ic { position: relative; z-index: 2; max-width: var(--kap); } /* --- Cam panel: hareketli görüntü üstünde metnin sabit zemini -------------- 🔴 KONTRAST (ölçüldü, en kötü durum = video karesi BEMBEYAZ): video → %66 perde → %30 cam ⇒ beyaz metin 5,06 : 1 ✅ Bu yüzden `.slayt__alt` opaklığı .84'ten .92'ye çıkarıldı: .84 ile 4,10:1'de kalıyordu (eşik 4,5). Büyük başlık zaten fazlasıyla geçiyor. ⚡ PERFORMANS: blur burada 30 değil 20px. Fark önemli — arkada VİDEO var, yani backdrop-filter saniyede ~30 kez yeniden hesaplanacak; /bilgi'deki duruk fotoğrafla aynı bütçe değil. Video zaten hareketli olduğu için 20px'in üstünde görsel kazanç da yok. (D-110: efekt maliyeti çarpılır.) Mobilde video hiç indirilmiyor (poster kalıyor) ⇒ orada blur duruk. */ .slayt__panel { /* Daha ŞEFFAF cam (.30 → .16). Tek satırla oluyor çünkü `--cam-zemin` `var(--cam-alfa)` ile yazıldı ve custom property KULLANILDIĞI YERDE çözümlenir ⇒ burada alfayı ezmek `.cam`ın zeminini bu panelde yeniden hesaplatır. /bilgi'nin camına dokunmaz. */ --cam-alfa: .16; max-width: 34rem; /* 42rem idi — panel arka planı fazla kapatıyordu */ padding: clamp(1.4rem, 1rem + 1.4vw, 2.1rem) clamp(1.3rem, 1rem + 1.2vw, 1.9rem); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); } @media (max-width: 48rem) { .slayt__panel { max-width: none; border-radius: 20px; } } .slayt__adim { display: flex; align-items: center; gap: .9rem; margin: 0 0 .5rem; } .slayt__adim-no { font-family: var(--yazi-baslik); font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); font-weight: 200; line-height: 1; color: var(--altin-acik); letter-spacing: .03em; } .slayt__cizgi { display: block; width: 3.5rem; height: 1px; background: var(--altin); } .slayt__ust { margin: 0 0 1rem; font-family: var(--yazi-baslik); font-size: clamp(.76rem, .7rem + .28vw, .92rem); font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--altin-acik); } /* ⚠️ Üst sınır 4,6rem (≈74px) idi. Panelin içinde başlık ekranın yarısını kaplayınca ARKADAKİ VİDEONUN ANLAMI KALMIYOR — video için yer açmak, yazıyı küçültmekten geçiyor. Alt sınır da düştü: mobilde de aynı sorun. */ .slayt__baslik { font-family: var(--yazi-baslik); font-size: clamp(1.75rem, 1.25rem + 1.9vw, 2.9rem); font-weight: 280; line-height: 1.1; letter-spacing: .022em; color: var(--beyaz); margin: 0 0 .45em; text-wrap: balance; } .slayt__alt { margin: 0 0 1.5rem; font-size: clamp(.92rem, .88rem + .22vw, 1.02rem); color: rgba(255, 255, 255, .92); /* .84 idi ⇒ cam üstünde 4,10:1 (eşik 4,5) */ } .slayt__dugmeler { margin-top: .25rem; } /* --- Kontroller --- */ .slayt__kontrol { position: absolute; left: 0; right: 0; bottom: clamp(1.1rem, .6rem + 1.4vw, 2rem); z-index: 5; display: flex; align-items: center; gap: .8rem; } .slayt__ok, .slayt__durdur { flex: none; width: 44px; height: 44px; display: grid; place-items: center; background: rgba(255, 255, 255, .08); color: var(--beyaz); border: 1px solid rgba(255, 255, 255, .28); border-radius: 50%; cursor: pointer; transition: background var(--gecis), border-color var(--gecis); } .slayt__ok:hover, .slayt__durdur:hover { background: rgba(255, 255, 255, .18); border-color: var(--altin); } .ikon--ters { transform: rotate(180deg); } .slayt__durdur { margin-left: auto; } .slayt__durdur-ikon { width: 12px; height: 13px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; } .slayt__durdur[aria-pressed="true"] .slayt__durdur-ikon { width: 0; height: 0; border-left: 11px solid currentColor; border-right: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; } .slayt__noktalar { list-style: none; margin: 0; padding: 0; display: flex; gap: .45rem; } .slayt__noktalar button { width: 30px; height: 30px; padding: 0; background: none; border: 0; cursor: pointer; display: grid; place-items: center; } .slayt__noktalar button span { display: block; width: 22px; height: 2px; background: rgba(255, 255, 255, .35); transition: background var(--gecis), width var(--gecis); } .slayt__noktalar button[aria-selected="true"] span { background: var(--altin); width: 34px; } /* İnce ilerleme çubuğu — otomatik geçişin ne zaman olacağını gösterir */ .slayt__ilerleme { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; height: 2px; background: rgba(255,255,255,.12); } .slayt__ilerleme span { display: block; height: 100%; width: 0; background: var(--altin); } @media (max-width: 40rem) { .slayt__kontrol { gap: .5rem; } .slayt__ok { width: 40px; height: 40px; } } /* ----------------------------------------------------------------------------- 7b) SÜREÇ BANDI — müşterinin kendi sloganı üç adım olarak Büyük altın rakamlar LACİVERT değil BEYAZ zemin üstünde: altın metin kuralı burada delinmiyor çünkü rakamlar bir GRAFİK ÖGE (72 px, ince) — okunacak metin değil. Adım adı ve hizmet bağlantıları lacivert. ----------------------------------------------------------------------------- */ .surec__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.5rem, .8rem + 2vw, 2.75rem); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } .adim { position: relative; padding-top: 1.1rem; border-top: 1px solid var(--cizgi); } .adim::before { content: ""; position: absolute; top: -1px; left: 0; width: 2.6rem; height: 1px; background: var(--altin); } .adim__no { display: block; font-family: var(--yazi-baslik); font-size: clamp(2.4rem, 1.6rem + 2.6vw, 3.6rem); font-weight: 200; line-height: 1; letter-spacing: .02em; color: var(--altin); opacity: .95; margin-bottom: .35rem; } .adim__ad { font-size: clamp(1.05rem, .95rem + .45vw, 1.3rem); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--lacivert); margin: 0 0 .9rem; } .adim__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; } .adim__liste a { display: inline-block; font-size: .96rem; color: var(--metin-ikincil); text-decoration: none; transition: color var(--gecis); } .adim__liste a::before { content: "— "; color: var(--altin); } .adim__liste a:hover { color: var(--lacivert); } /* ----------------------------------------------------------------------------- 7c) Kalan hizmetler — öne çıkan 6'nın dışındakiler, ana sayfada 11/11 görünsün ----------------------------------------------------------------------------- */ /* 🔴 TARAYICIDA GÖRÜLDÜ: önce ızgaraydı ve "Özel Mobilya Tasarımı ve Üretimi" iki satıra kayınca o kutu uzuyor, satır hizası bozuluyordu (ekran görüntüsü). Sabit sütunlu ızgara, uzunluğu değişken etiketler için yanlış araç. ⇒ İÇERİĞE GÖRE genişleyen, saran bir hap satırı. Hepsi tek satır, hizalı. */ .hizmet-kalan { list-style: none; margin: clamp(1.25rem, .7rem + 1.6vw, 2rem) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; } .hizmet-kalan li { display: flex; } .hizmet-kalan a { display: inline-flex; align-items: center; gap: .6rem; padding: .7rem 1.15rem; background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: 999px; font-family: var(--yazi-baslik); font-size: .93rem; font-weight: 500; letter-spacing: .015em; white-space: nowrap; color: var(--lacivert); text-decoration: none; transition: border-color var(--gecis), background var(--gecis), transform var(--gecis), box-shadow var(--gecis); } .hizmet-kalan a:hover { border-color: var(--altin); transform: translateY(-2px); box-shadow: var(--golge); } .hizmet-kalan svg { color: var(--altin); flex: none; } /* Çok dar ekranda hap satırı taşmasın — orada sarmaya izin ver */ @media (max-width: 30rem) { .hizmet-kalan a { white-space: normal; } } /* ----------------------------------------------------------------------------- 7d) ŞERİT — tam genişlik görsel üzerinde çağrı Perde yine KONTRAST GARANTİLİ: fotoğraf hangi tonda olursa olsun beyaz metin koyu lacivert üzerinde kalır. ----------------------------------------------------------------------------- */ .serit { position: relative; overflow: hidden; padding-block: calc(var(--olcek) * 2.4); background: var(--lacivert); color: rgba(255, 255, 255, .9); } /* Görselli şeritte bölüm DAHA YÜKSEK: cam panel aynı boyutta kalır, üstünde ve altında fotoğrafa daha çok yer açılır. Perde %70'e indirildikten sonra fotoğraf gerçekten görünür oldu — ama dar bir şeride kırpılınca ne olduğu anlaşılmıyordu. Yükseklik arttıkça kırpma makul kalıyor. */ .serit--gorselli { padding-block: calc(var(--olcek) * 3.6); } .serit h2 { color: var(--beyaz); } .serit .bolum-etiket { color: var(--altin-acik); } .serit .bolum-ust p { color: rgba(255, 255, 255, .82); } .serit__gorsel { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; } /* ⚠️ Perde %92-95'ti: fotoğraf neredeyse tamamen gizleniyordu — arkasına görsel koyup görünmez etmek, görsel koymamakla aynı şey. /bilgi'de ve kahraman slaytında düzeltilen hatanın aynısı buradaydı. Perde %70'e indi, kaybolan kontrastı metin bloğunun camı devraldı. */ .serit--gorselli::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(rgba(15, 68, 120, .70), rgba(11, 49, 89, .78)), radial-gradient(ellipse 70% 100% at 50% 100%, rgba(8, 36, 63, .42), transparent 70%); } .serit__ic { position: relative; z-index: 2; } /* 🪟 Şeritteki metin bloğu cam panelde — YALNIZ görselli şeritte. Görselsiz şerit düz lacivert; orada cam yalnız "açık bir dikdörtgen" olurdu (2026 araştırma bulgusu: cam ancak arkasında derinlik varsa anlamlı). 🔴 Kontrast: fotoğraf → %70 perde → %22 cam ⇒ beyaz metin 5,58:1 ✅ */ .serit--gorselli .serit__ic { --cam-alfa: .22; max-width: 54rem; margin-inline: auto; padding: clamp(1.6rem, 1.1rem + 1.8vw, 2.6rem) clamp(1.3rem, 1rem + 1.4vw, 2.2rem); border-radius: 20px; background: linear-gradient(var(--cam-zemin), var(--cam-zemin)) padding-box, linear-gradient(140deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.08) 40%, rgba(255,255,255,.28) 100%) border-box; border: 1px solid transparent; backdrop-filter: blur(18px) saturate(170%); -webkit-backdrop-filter: blur(18px) saturate(170%); box-shadow: 0 18px 44px rgba(3, 16, 32, .3), inset 0 1px 1px rgba(255,255,255,.26); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .serit--gorselli .serit__ic { background: rgba(11, 45, 82, .9); border-color: rgba(255,255,255,.18); } } @media (prefers-reduced-transparency: reduce) { .serit--gorselli .serit__ic { background: rgba(11, 45, 82, .94); border-color: rgba(255,255,255,.18); backdrop-filter: none; -webkit-backdrop-filter: none; } } /* ----------------------------------------------------------------------------- 8) İçerik metni (hizmet detayı, sabit sayfa) ----------------------------------------------------------------------------- */ .icerik { max-width: 44rem; font-size: 1.06rem; } .icerik h2 { margin-top: 2em; } .icerik h3 { margin-top: 1.6em; } .icerik > :first-child { margin-top: 0; } .icerik ul, .icerik ol { margin-bottom: 1.2em; } .icerik li { margin-bottom: .4em; } .icerik blockquote { margin: 1.6em 0; padding: .2em 0 .2em 1.4em; border-left: 2px solid var(--altin); color: var(--metin-ikincil); font-style: italic; } .icerik a { color: var(--lacivert-acik); } /* --- İçerik içindeki TABLO ------------------------------------------------ `` panelden girilen metinde kullanılabiliyordu ama hiç biçimlendirilmemişti: çerez politikasındaki tablo çıplak, hizasız ve satırları birbirine karışmış duruyordu (tarayıcıda görüldü 2026-08-06). ⚠️ `overflow-x` sarmalayıcı YOK — bunun yerine sabit düzen + kelime kaydırma: panelden gelen metinde sarmalayıcı `
` olmayacağı için taşan tablo SAYFAYI yatay kaydırırdı. Bu haliyle dar ekranda sütunlar daralır, taşmaz. */ .icerik table { width: 100%; margin: 1.6em 0; border-collapse: collapse; table-layout: fixed; font-size: .96rem; } .icerik th, .icerik td { padding: .7em .85em; text-align: left; vertical-align: top; border: 1px solid var(--cizgi); overflow-wrap: break-word; } .icerik thead th { background: var(--krem); color: var(--lacivert); font-family: var(--yazi-baslik); font-size: .82rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; } .icerik tbody tr:nth-child(even) { background: rgba(247,244,240,.5); } /* Sayfa üst şeridi (iç sayfalar) */ /* 🔴 İÇ SAYFA BAŞLIĞI — düz renk bloğundan çıkarıldı (2026-08-05, Mustafa: "iç sayfalar zayıf"). Sorun tek bir eksik değildi, ANA SAYFAYLA ARADAKİ MESAFEYDİ: ana sayfada video, cam panel, degrade düğmeler varken iç sayfa ziyaretçiyi düz bir dikdörtgenle karşılıyordu — aynı siteye ait görünmüyordu. Üç katman eklendi, HİÇBİRİ GÖRSEL GEREKTİRMİYOR (fotoğraflar müşteriden gelmedi; tasarım onları beklemek zorunda kalmasın): 1. köşegen degrade — düz yüzeyde olmayan derinlik 2. altın parıltı — markanın ikinci rengi, sol üstten çok soluk 3. ölçü çizgileri — mimari çizim kâğıdının ince ızgarası ⚠️ KONTRAST ÖLÇÜLDÜ (tahmin edilmedi) — beyaz metin için en zorlu noktalar: degradenin en açık ucu #17568F ................ 7,60:1 + üstüne ızgara çizgisi bindiğinde ............ 6,76:1 parıltının en yoğun olduğu bölge .............. 10,25:1 ☠ üçü birden aynı piksele denk gelse .......... 5,67:1 En kötü hâli bile AA eşiğinin (4,5) üstünde. */ .sayfa-tepe { position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(80% 130% at 12% 0%, rgba(226,180,106,.14) 0%, transparent 58%), linear-gradient(118deg, var(--lacivert-koyu) 0%, var(--lacivert) 46%, var(--lacivert-acik) 100%); color: var(--beyaz); padding-block: clamp(3rem, 1.9rem + 4.2vw, 5.25rem); border-bottom: 1px solid rgba(226,180,106,.28); } /* Ölçü ızgarası. `::before` seçildi çünkü `::after` görselli varyantın karartma katmanı — ikisi çakışırsa fotoğraflı başlık kararmadan kalır ve yazı okunmaz. */ .sayfa-tepe::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 84px), repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 84px); /* Sağa doğru siliniyor: tam ızgara kâğıt gibi görünüp metnin önüne geçiyordu; sol kenarda bir iz olarak kalması yeterli. */ -webkit-mask-image: linear-gradient(100deg, #000 0%, transparent 62%); mask-image: linear-gradient(100deg, #000 0%, transparent 62%); } /* Fotoğraflı başlıkta ızgara YOK: fotoğrafın kendi dokusu var, üstüne çizgi binince kirli görünüyor. */ .sayfa-tepe--gorselli::before { display: none; } .sayfa-tepe h1 { color: var(--beyaz); margin-bottom: 0; } .sayfa-tepe .bolum-etiket { color: var(--altin-acik); } .sayfa-tepe__ozet { margin-top: 1rem; max-width: 42rem; color: rgba(255,255,255,.85); font-size: 1.08rem; } /* Başlığın altındaki ince altın vurgu — h1'i "yazı" olmaktan çıkarıp bölüm başlığı hâline getiriyor. Degrade logodan; solda kalın, sağa doğru sönüyor ki çerçeve gibi durmasın. */ .sayfa-tepe h1::after { content: ""; display: block; width: 3.4rem; height: 3px; margin-top: 1rem; border-radius: 2px; background: var(--altin-degrade); } .sayfa-tepe--orta h1::after { margin-inline: auto; } /* Başlığın altındaki tek satırlık ölçü: "11 Hizmetlerimiz", "Son güncelleme …". Tanıtım cümlesi DEĞİL — sayfada gerçekten ne olduğunu söyleyen veri. */ .sayfa-tepe__sayac { margin: 1.1rem 0 0; font-size: .95rem; color: rgba(255,255,255,.82); } /* ⚠️ --altin-acik (#E2B46A) burada 3,97:1 — degradenin en açık ucunda AA'yı geçmiyor. "Zaten iri" diye bırakılamaz: 1,15rem ≈ 18,4 px, iri metin sınırı olan 18,66 px'in ALTINDA kalıyor. Bir tık daha açık ton: #EDC583 → 4,67:1 */ .sayfa-tepe__sayac strong { color: #EDC583; font-family: var(--yazi-baslik); font-size: 1.15rem; font-weight: 600; margin-right: .15rem; } /* --- BELGE METNİ (KVKK, gizlilik, çerez) --------------------------------- Ölçü satırı ~70 karakter. Uzun yasal metinde tam genişlik satırlarda göz satır başını kaybediyor; zaten isteksiz okunan metin iyice okunmuyor. */ .icerik--belge { max-width: 46rem; } .icerik--belge h2 { margin-top: 2.4rem; } .icerik--belge li { margin-bottom: .45rem; } /* Yasal metinler arası geçiş — okunan belgenin sonunda kardeşlerine köprü. */ .belge-gecis { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.4rem; max-width: 46rem; margin-top: 2.6rem; padding-top: 1.3rem; border-top: 1px solid var(--cizgi); } .belge-gecis__ad { font-family: var(--yazi-baslik); font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--metin-ikincil); } /* Görselli başlık şeridi — kahramanla aynı kontrast garantisi mantığı */ .sayfa-tepe__gorsel { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; } .sayfa-tepe--gorselli::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(95deg, rgba(15,68,120,.96) 0%, rgba(15,68,120,.9) 45%, rgba(15,68,120,.62) 100%), linear-gradient(to top, rgba(8,36,63,.55), transparent 55%); } .sayfa-tepe__ic { position: relative; z-index: 2; } /* --- CAM PANEL (2026-08-06) ------------------------------------------------ Mustafa: "iç sayfaları da ana sayfa gibi cam yap". ⚠️ Panel yalnız FOTOĞRAFLI başlıkta cam olur (`.cam` sınıfını PHP koyuyor): cam, arkasında bir görüntü varken camdır. Düz renk üzerinde bulanıklığın bulanıklaştıracağı bir şey yoktur, panel yalnızca "biraz açık bir dikdörtgen" olur — D-110'da öğrenilenin diğer yüzü. Genişlik sınırı: metin satırı 58rem'de okunur kalıyor, panel de sayfayı boydan boya kaplayıp "başlık kutusu" olmaktan çıkmıyor. */ .sayfa-tepe__panel { max-width: 58rem; padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.6rem) clamp(1.4rem, 1rem + 1.8vw, 2.8rem); } /* Fotoğrafsız başlıkta panelin iç boşluğu gereksiz — kutu görünmüyor zaten, yalnızca metni sağa kaydırırdı. */ .sayfa-tepe:not(.sayfa-tepe--gorselli) .sayfa-tepe__panel { padding: 0; max-width: 52rem; } /* Fotoğraflı başlıkta karartma HAFİFLETİLİYOR: cam paneli okunur tutan şey artık panelin kendisi. Eski karartma (%96 → %62) fotoğrafı neredeyse yok ediyordu; cam da bulanıklaştıracak bir şey bulamıyordu. */ .sayfa-tepe--gorselli::after { background: linear-gradient(95deg, rgba(11,49,89,.78) 0%, rgba(11,49,89,.52) 46%, rgba(11,49,89,.30) 100%), linear-gradient(to top, rgba(8,36,63,.55), transparent 62%); } /* Panelin içindeki kırıntı rozetinin kendi camı, panel camının üstünde çift bulanıklık yapıyordu — burada sade bir çerçeveye dönüyor. */ .sayfa-tepe__panel.cam .kirinti { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255,255,255,.13); } /* Görselli başlıkta şerit daha yüksek: 300 px'lik ince bir dilime kırpılan fotoğraftan hiçbir şey anlaşılmıyor. Yükseklik arttıkça kırpma makul kalıyor. */ .sayfa-tepe--gorselli { padding-block: clamp(4rem, 2.4rem + 6.5vw, 7rem); } /* --- Proje künyesi: "nerede, ne zaman" — bir projede ilk sorulan iki şey --- */ .proje-kunye { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.4rem; margin: .7rem 0 0; padding: 0; font-size: .95rem; color: rgba(255,255,255,.85); /* görselli tepede ≥5:1 */ } .proje-kunye span { display: inline-flex; align-items: center; gap: .4rem; } .proje-kunye svg { color: var(--altin); flex: none; } /* Görselsiz tepede zemin açık ⇒ metin koyu olmalı */ .sayfa-tepe:not(.sayfa-tepe--gorselli) .proje-kunye { color: var(--metin-ikincil); } /* --- Proje galerisi --- İlk kare TAM GENİŞLİK, kalanlar ikili. Hepsi eşit kutulara dizilseydi katalog gibi olurdu; mimari sunumda bir kare "ana görüntü"dür, gerisi onu tamamlar. `aspect-ratio` sabit: farklı oranlı fotoğraflar ızgarayı bozmasın ve sayfa yüklenirken zıplama olmasın. */ .proje-galeri { display: grid; gap: clamp(.7rem, .4rem + .9vw, 1.1rem); grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); margin: clamp(1.8rem, 1.2rem + 1.6vw, 2.8rem) 0 0; } .proje-galeri__oge { margin: 0; overflow: hidden; border-radius: 4px; background: var(--krem); } .proje-galeri__oge img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 600ms cubic-bezier(.2, 0, .3, 1); } .proje-galeri__oge:hover img { transform: scale(1.03); } @media (min-width: 48rem) { .proje-galeri__oge--genis { grid-column: 1 / -1; } .proje-galeri__oge--genis img { aspect-ratio: 16 / 9; } } /* ============================================================================= BLOG (teklif kapsamı dışı ek modül) ============================================================================= */ /* Üst satır: kategori + tarih. İkisi de isteğe bağlı, biri yoksa diğeri kayar */ .yazi-ust { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; margin: 0 0 .6rem; font-size: .82rem; letter-spacing: .04em; color: var(--metin-ikincil); } .sayfa-tepe--gorselli .yazi-ust { color: rgba(255,255,255,.82); } .yazi-etiket { display: inline-block; padding: .16rem .7rem; border-radius: 999px; background: var(--krem); color: var(--lacivert); font-family: var(--yazi-baslik); font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; } .sayfa-tepe--gorselli .yazi-etiket { background: rgba(255,255,255,.16); color: #fff; } /* Öne çıkan yazı — blogda "yeni ne var?" sorusunun cevabı büyük durmalı */ .yazi-one { display: grid; gap: 0; text-decoration: none; color: inherit; border: 1px solid var(--cizgi); border-radius: 14px; overflow: hidden; background: #fff; box-shadow: var(--golge); transition: transform var(--gecis), box-shadow var(--gecis), border-color var(--gecis); } .yazi-one:hover { transform: translateY(-3px); box-shadow: var(--golge-guclu); border-color: var(--altin-soluk); } .yazi-one__gorsel { display: block; overflow: hidden; background: var(--krem); } .yazi-one__gorsel img { display: block; width: 100%; height: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 600ms cubic-bezier(.2, 0, .3, 1); } .yazi-one:hover .yazi-one__gorsel img { transform: scale(1.03); } .yazi-one__ic { padding: clamp(1.3rem, .9rem + 1.4vw, 2.1rem); } .yazi-one__ic h2 { margin: 0 0 .5rem; font-size: clamp(1.3rem, 1.05rem + 1vw, 1.85rem); } .yazi-one__ic p { margin: 0 0 1rem; color: var(--metin-ikincil); } @media (min-width: 52rem) { .yazi-one { grid-template-columns: 1.15fr 1fr; align-items: stretch; } .yazi-one__gorsel img { aspect-ratio: auto; min-height: 100%; } } /* Okuma sütunu DAR: satır başına ~70-75 karakter. Geniş sütunda göz satır sonundan satır başına dönerken kayboluyor — tanıtım metninden farklı bir ihtiyaç, blog uzun uzun okunur. */ .yazi-govde { max-width: 46rem; } .yazi-govde .icerik { max-width: none; } /* Hizmetin süreçteki yeri — müşterinin kendi sloganından gelen adım */ .sayfa-tepe__adim { display: inline-flex; align-items: baseline; gap: .6rem; margin: 0 0 .55rem; font-family: var(--yazi-baslik); font-size: .78rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--altin-acik); } .sayfa-tepe__adim-no { font-size: 1.15rem; font-weight: 200; letter-spacing: .04em; color: var(--altin); opacity: .9; } /* ----------------------------------------------------------------------------- 8b) DETAY DÜZENİ — ana sütun + yapışkan yan sütun ----------------------------------------------------------------------------- */ .detay { display: grid; gap: clamp(2rem, 1.2rem + 2.4vw, 3.5rem); grid-template-columns: 1fr; } @media (min-width: 60rem) { .detay { grid-template-columns: minmax(0, 1fr) 19rem; align-items: start; } } /* Müşterinin tek paragrafı GİRİŞ ölçeğinde — aynı cümle, doğru punto */ .detay__giris { max-width: 42rem; font-size: clamp(1.12rem, 1.02rem + .5vw, 1.4rem); line-height: 1.62; color: var(--metin); margin: 0 0 1.6rem; padding-left: 1.15rem; border-left: 2px solid var(--altin); } .detay__ana .icerik { margin-top: 1.6rem; } /* --- Metin arası görsel bandı --------------------------------------------- Metin sütunu 44rem'de sınırlı; bant bilerek ONDAN GENİŞ. Amaç sayfayı bölmek: aynı genişlikte kalsaydı metnin devamı gibi okunur, nefes vermezdi. Ölçü metin sütununu aşıyor ama `.detay` ızgarasının sütununu aşmıyor — yan sütuna taşmaz. */ .detay__bant { margin: clamp(1.8rem, 1.2rem + 1.6vw, 2.8rem) 0; max-width: 52rem; border-radius: 14px; overflow: hidden; /* köşeleri görsel de alsın */ box-shadow: var(--golge); position: relative; } .detay__bant img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; /* farklı oranlı fotoğraflar aynı bandı bozmasın */ } /* Üst kenarda ince altın çizgi — sitenin diğer görselli yüzeyleriyle aynı ayraç */ .detay__bant::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--altin); z-index: 1; } /* --- Yapışkan iletişim kartı --- */ @media (min-width: 60rem) { .detay__yan { position: sticky; top: 5.5rem; } } .yan-kart { padding: clamp(1.3rem, 1rem + .8vw, 1.75rem); background: var(--krem); border: 1px solid var(--cizgi); border-top: 2px solid var(--altin); border-radius: 2px; } .yan-kart__ikon { display: block; color: var(--altin); margin-bottom: .8rem; } .yan-kart__baslik { font-size: 1.12rem; font-weight: 500; letter-spacing: .02em; color: var(--lacivert); margin: 0 0 1rem; } .yan-kart__liste { list-style: none; margin: 0 0 1.15rem; padding: 0; display: grid; gap: .55rem; } .yan-kart__liste a { display: flex; align-items: center; gap: .6rem; color: var(--lacivert); text-decoration: none; font-size: .98rem; } .yan-kart__liste svg { color: var(--altin); flex: none; } .yan-kart__liste a:hover { color: var(--lacivert-acik); text-decoration: underline; } .yan-kart__dugme { width: 100%; } /* --- Önceki / sonraki hizmet --- */ .gezinme { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: clamp(2rem, 1.4rem + 1.6vw, 3rem); padding-top: 1.4rem; border-top: 1px solid var(--cizgi); } .gezinme__bag { display: inline-flex; align-items: center; gap: .6rem; max-width: 48%; font-family: var(--yazi-baslik); font-size: .95rem; font-weight: 500; color: var(--lacivert); text-decoration: none; transition: color var(--gecis); } .gezinme__bag--ileri { margin-left: auto; text-align: right; } .gezinme__yon { color: var(--altin); font-size: 1.1rem; flex: none; } .gezinme__bag:hover { color: var(--lacivert-acik); } .gezinme__bag:hover .gezinme__ad { text-decoration: underline; } @media (max-width: 38rem) { .gezinme { flex-direction: column; } .gezinme__bag { max-width: 100%; } .gezinme__bag--ileri { margin-left: 0; } } /* Kırıntı yolu */ /* Kırıntı — camdan bir rozet içinde. Çıplak hâlinde başlığın üstünde başıboş duran gri bir satırdı; kutuya alınınca hem "buradasın" bilgisi hem de sayfanın cam diliyle bağı kuruluyor. Cam bileşeninin kendisi §4b'de. */ .kirinti { /* 🔴 `inline-flex` DEĞİL (tarayıcıda bulundu 2026-08-06): kırıntı rozete çevrilince `