ve taban `p { margin: 0 0 1.1em }`
* kuralını miras alıyor. O 16px'lik alt boşluk satırın altına ekleniyor ve
* üstteki mesafeyle eşitlenmesini engelliyordu. (Aynı tuzak .ticker__label
* için de vardı.)
*/
.hero__fact { font-size: var(--fs-sm); color: var(--c-soft); margin-block: 0; }
.hero__fact strong { display: block; font-family: var(--f-head); font-size: 1.28rem; font-weight: 600; color: var(--c-ink); letter-spacing: -.01em; }
/*
* Görselin üst kenarı, sol sütundaki H1 başlığın üst kenarıyla hizalanır.
*
* Izgara `align-items: center` olduğu için fotoğraf metin sütununun
* ortasına düşüyordu. `align-self: start` onu satırın tepesine alır — ama
* satır H1'den değil, onun üstündeki küçük etiketten (.kicker) başlar.
* Bu yüzden etiket bloğu kadar aşağı indiriliyor:
*
* kicker satır yüksekliği = var(--fs-xs) x 1.7 (gövde satır yüksekliği)
* + kicker alt boşluğu = 14px
*
* Sabit piksel yerine değişkenle yazıldı: yazı ölçeği değişirse hizalama
* kendiliğinden takip eder.
*/
.hero__media {
position: relative;
align-self: start;
margin-block-start: calc(var(--fs-xs) * 1.7 + 14px);
}
/*
* Oran 3:2. Sanayi ekipmanı yatay olduğu için 5:4 (neredeyse kare) hat
* fotoğraflarını sıkıştırıyordu. Değiştirilirse aşağıdaki width/height
* öznitelikleri de (front-page.php) aynı orana güncellenmeli — onlar CSS
* yüklenmeden önce yer ayırıyor, uyuşmazlarsa sayfa zıplar.
*/
.hero__media img {
width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
border: 1px solid var(--c-line); border-radius: var(--radius);
background: var(--c-bg-2);
display: block;
}
/* ---- Giriş slaytı (iki ve daha çok görselde devreye girer) ------------- */
/*
* Kaydırma CSS scroll-snap ile yapılır; dış kütüphane yoktur. JavaScript
* yalnızca otomatik ilerletme, duraklatma ve noktaları yönetir — kapalıysa
* slaytlar parmakla/dokunarak yine kaydırılabilir.
*/
.slayt__ray {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
border-radius: var(--radius);
}
.slayt__ray::-webkit-scrollbar { display: none; }
/*
* Ray, çekirdeğin Galeri bloğu da olabilir — sayfa düzenleyende slayt eklemenin
* en kolay yolu o (tek seferde çoklu fotoğraf seçilir). Ama Galeri kendi düzen
* kurallarını getiriyor ve ikisi slaytı bozuyordu:
* flex-wrap: wrap → slaytlar yan yana değil ALT ALTA diziliyordu
* (ölçüm: ray 554 px yerine 1712 px)
* gap: 24px → slaytlar arasında boşluk kalıyor, snap kayıyordu
*
* flex-wrap'i iki sınıflı seçici (0-2-0) yeniyor. gap'i YENMİYOR: çekirdek her
* galeri için sayfaya ".wp-block-gallery-1 { gap: … }" diye satır içi kural
* basıyor, o da 0-2-0 ve benden SONRA geliyor. Özgüllüğü artırmak yerine
* kuralın beslendiği değişkeni sıfırlıyorum — böylece çekirdeğin kendi kuralı
* 0 hesaplıyor ve kavga hiç çıkmıyor.
*/
.slayt {
--wp--style--gallery-gap-default: 0px;
--gallery-block--gutter-size: 0px;
}
.slayt .slayt__ray { flex-wrap: nowrap; gap: 0; }
/* Slayt = rayın doğrudan çocukları; sınıfı JS ekler. Çekirdek görsel bloğu
(figure.wp-block-image) da bu sayede ek işaretleme olmadan slayt olur. */
.slayt__kare { flex: 0 0 100%; scroll-snap-align: start; min-width: 0; margin: 0; }
.slayt__kare img { display: block; width: 100%; }
/* Okların konumlandığı kap. Slaytların kendisi kaydırma kabı olduğu için
oklar onun DIŞINDA, bu sarmalayıcıda durur; yoksa fotoğrafla kayarlardı. */
.slayt { position: relative; }
/*
* İleri/geri okları.
*
* Etrafında kutu, daire veya zemin YOK — yalnızca okun kendisi. Görünmez bir
* 44 px'lik alan dokunma hedefi olarak duruyor; zemini olmadığı için ekranda
* iz bırakmıyor.
*
* Gölge süs değil, okunabilirlik için: ok fotoğrafın üstünde duruyor ve açık
* renkli bir fotoğrafta beyaz ok kaybolurdu. drop-shadow okun kendi biçimini
* takip eder, arkasına kutu koymaz.
*/
.slayt__ok {
position: absolute; inset-block-start: 50%;
transform: translateY(-50%);
display: grid; place-items: center;
width: 44px; height: 44px; padding: 0;
border: 0; background: none;
color: #fff; cursor: pointer;
opacity: .55;
filter: drop-shadow(0 1px 3px rgba(22, 34, 43, .6));
transition: opacity .22s var(--ease);
}
.slayt__ok svg { width: 30px; height: 30px; fill: currentColor; display: block; }
.slayt__ok:hover,
.slayt__ok:focus-visible { opacity: 1; }
.slayt__ok:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.slayt__ok--geri { inset-inline-start: 4px; }
.slayt__ok--ileri { inset-inline-end: 4px; }
/*
* Oklar mutlak konumlu ama blok editöründeki kap "is-layout-constrained"
* olduğu için çekirdek, doğrudan çocuklarına 24 px blok aralığı veriyor;
* bu da translateY(-50%) ile ortalanan oku 24 px aşağı kaydırıyordu.
* ".slayt .slayt__ok" (0-2-0) çekirdeğin :where'li (0-1-0) kuralını yener.
*/
.slayt .slayt__ok { margin: 0; }
/* Noktalar fotoğrafın altında, ortalanmış durur. */
.slayt__noktalar {
display: flex; justify-content: center; align-items: center;
gap: 10px; margin-top: 18px;
}
/*
* Aktif slayt renkle değil BİÇİMLE gösterilir: nokta yatay bir çizgiye
* uzar. Geçiş `width` üzerinden animasyonlanır; border-radius yarım
* yükseklikte sabit kaldığı için uçlar her genişlikte yuvarlak kalır ve
* uzama akıcı görünür.
*
* Renk farkı da korundu — biçim tek başına ayırt edici olsa da, renk
* körlüğü olmayan kullanıcı için hangi noktanın etkin olduğu daha hızlı
* okunuyor. Tersi de geçerli: renk göremeyen kullanıcı biçimden anlıyor.
*/
/*
* Görünen nokta düğmenin kendisi değil, ::before'udur; düğme yalnızca
* dokunma/tıklama alanıdır. Bu ayrım dar ekranda hedef alanı görünen daireyi
* büyütmeden 44 px'e çıkarmak için gerekli (bkz. responsive.css, madde 10).
*/
.slayt__nokta {
display: flex; align-items: center; justify-content: center;
width: auto; height: auto; padding: 0;
border: 0; background: none;
cursor: pointer;
}
.slayt__nokta::before {
content: ""; display: block;
width: 8px; height: 8px;
border-radius: 999px;
background-color: var(--c-line-2);
transition: width .38s var(--ease), background-color .38s var(--ease);
}
.slayt__nokta:hover::before { background-color: var(--c-soft); }
.slayt__nokta[aria-selected="true"]::before {
width: 30px;
background-color: var(--c-blue);
}
.slayt__nokta:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 3px; }
/* .hero__cap (görsel altı künye şeridi) tasarımdan çıkarıldı. */
.hero__body, .case__body { min-width: 0; }
/* Kayan referans şeridi — saf CSS, bağımlılık yok */
/* Şerit üstten VE alttan çizgili: iki yandan kapalı bir bant olarak
okunsun. Alt çizgi eksikti; şerit aşağıdaki bölüme sızıyor gibi
duruyordu. */
.ticker { border-block: 1px solid var(--c-line); background: #fff; }
/*
* `stretch` bilinçli: etiketin sağındaki dikey çizgi şeridin TAMAMINI
* kaplasın diye. `center` olsaydı çizgi yalnızca etiketin kendi yüksekliği
* kadar uzardı ve şerit yüksekliği değiştiğinde (logo büyütüldüğünde
* olduğu gibi) çizgi kısa kalırdı.
*
* Bu haliyle çizginin boyu logo ölçüsüne, yazı puntosuna veya dolguya
* bağlı değil — hangisi şeridi uzatırsa çizgi de onunla uzar.
*/
.ticker__in { display: flex; align-items: stretch; gap: 0; }
.ticker__label {
flex: 0 0 auto;
display: flex; align-items: center; /* metin dikeyde ortalı kalsın */
padding: 22px var(--gutter) 22px 0;
/*
* margin-block: 0 ŞART.
*
* Etiket bir
; taban kural `p { margin: 0 0 1.1em }` ona da işliyor. * `p:last-child` istisnası kurtarmıyor çünkü etiketten sonra logo alanı * geliyor — son çocuk değil. * * Esnek kutuda stretch, öğeyi kabın yüksekliğine uzatırken KENDİ kenar * boşluklarını düşer. O 14px'lik alt boşluk yüzünden etiketin kutusu * şeritten kısa kalıyor ve sağındaki dikey çizgi alt kenara ulaşmıyordu. */ margin-block: 0; margin-inline-start: var(--gutter); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--c-soft); border-inline-end: 1px solid var(--c-line); white-space: nowrap; } /* * `display: flex; align-items: center` logoları dikeyde ortalar. * * Maske .ticker__in içinde stretch ile şeridin tamamına gerilir (65,8px) * ama içindeki .ticker__track yalnızca logo yüksekliğindedir (48px). Blok * akışında hizalama kuralı olmadığı için şerit maskenin tepesine yapışıyor * ve boşluğun tamamı altta kalıyordu. * * Ortalama burada yapılmalı, .ticker__group'ta değil: oradaki align-items * logoları KENDİ satırı içinde ortalar, satırın maske içindeki yerini * belirlemez. */ .ticker__mask { overflow: hidden; flex: 1; position: relative; display: flex; align-items: center; } .ticker__mask::before, .ticker__mask::after { content: ""; position: absolute; inset-block: 0; width: 72px; z-index: 2; pointer-events: none; } .ticker__mask::before { inset-inline-start: 0; background: linear-gradient(to right, #fff, transparent); } .ticker__mask::after { inset-inline-end: 0; background: linear-gradient(to left, #fff, transparent); } /* * `flex: 0 0 auto` ŞART: maske artık esnek kutu, şerit de onun öğesi. * Varsayılan flex-shrink:1 olsaydı ~7700px genişliğindeki şerit maskenin * genişliğine sıkıştırılır, logolar ezilirdi. */ .ticker__track { display: flex; flex: 0 0 auto; width: max-content; animation: ticker 55s linear infinite; } .ticker:hover .ticker__track { animation-play-state: paused; } .ticker__group { display: flex; align-items: center; gap: clamp(44px, 5vw, 72px); padding-inline-end: clamp(44px, 5vw, 72px); } /* * Logo ölçüsü %15 büyütüldü (42x120 -> 48x138). Kaynak dosyalar 286x124 * olduğu için bu ölçüde hâlâ 2,6 kat çözünürlük payı var; bulanıklaşma yok. * Şerit yüksekliğini .ticker__label'ın 22px'lik dolgusu belirliyor, logo * onun içinde kalıyor — bant yüksekliği değişmedi. * * Logolar kendi renklerinde duruyor. Önce gri (grayscale(1), opacity .68) idi * ve yalnızca imleç üzerine gelince renkleniyordu; referans markaları hep * renkli görünsün diye kaldırıldı. Şeridin imleçle duraklaması bundan bağımsız * bir kural (.ticker:hover .ticker__track) ve yerinde duruyor. */ .ticker__logo { height: 48px; width: 138px; object-fit: contain; } @keyframes ticker { to { transform: translateX(-50%); } } /* ========================================================================== 06 — SAYILAR ========================================================================== */ .stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } .stat { padding: 8px 28px; border-inline-start: 1px solid var(--c-line-2); } .stat:first-child { border-inline-start: 0; padding-inline-start: 0; } .stat__n { display: block; font-family: var(--f-head); font-size: clamp(2.2rem, 3.6vw, 3.2rem); font-weight: 700; color: var(--c-ink); letter-spacing: -.02em; line-height: 1; margin-bottom: 8px; font-variant-numeric: tabular-nums; } .stat__t { font-size: var(--fs-sm); color: var(--c-soft); } /* ========================================================================== 07 — ÇÖZÜMLER ========================================================================== */ .sols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--c-line); border-inline-start: 1px solid var(--c-line); } .sol { position: relative; padding: clamp(26px, 3vw, 40px); border-inline-end: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); transition: background .25s var(--ease); } .sol:hover { background: var(--c-bg-2); } .sol__no { display: block; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .1em; color: var(--c-soft); margin-bottom: 18px; } .sol__title { font-size: var(--fs-h3); } .sol__title a::after { content: ""; position: absolute; inset: 0; } .sol__title a:hover { color: var(--c-blue); } .sol__text { font-size: var(--fs-sm); margin-bottom: 20px; } .sol__spec { font-size: var(--fs-xs); color: var(--c-soft); border-top: 1px solid var(--c-line); padding-top: 14px; display: block; } .sol__arrow { position: absolute; inset-block-start: clamp(26px, 3vw, 40px); inset-inline-end: clamp(26px, 3vw, 40px); width: 18px; height: 18px; fill: var(--c-line-2); transition: fill .25s var(--ease), transform .25s var(--ease); } .sol:hover .sol__arrow { fill: var(--c-blue); transform: translate(3px, -3px); } /* ========================================================================== 08 — ENTEGRASYON / HAKKINDA BANDI ========================================================================== */ .about__grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(36px, 5vw, 80px); align-items: center; } /* Görsel yüklenmemişse iki sütunlu ızgara tek sütuna düşer; boş yarım sütun kalmaz. Görsel eklendiği an eski düzen kendiliğinden geri gelir. */ .hero__main.is-solo, .about__grid.is-solo { grid-template-columns: minmax(0, 1fr); } .about__grid.is-solo { max-width: 76ch; } .about__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--c-line); border-radius: var(--radius); background: #fff; } .about__quote { font-family: var(--f-head); font-size: clamp(1.25rem, 1.8vw, 1.55rem); font-weight: 600; color: var(--c-ink); line-height: 1.4; letter-spacing: -.01em; border-inline-start: 3px solid var(--c-blue); padding-inline-start: 22px; margin-block: 26px 30px; } .about__list { display: grid; gap: 14px; margin-bottom: 30px; } .about__list li { display: flex; gap: 12px; font-size: var(--fs-sm); } .about__list svg { flex: 0 0 auto; width: 18px; height: 18px; fill: var(--c-blue); margin-top: 3px; } /* ========================================================================== 09 — ENDÜSTRİLER ========================================================================== */ .inds { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--c-line); border-inline-start: 1px solid var(--c-line); } .ind { /* İç boşluk kutunun kendisinde değil .ind__link'te durur: bağlantının tıklanabilir alanı kutunun tamamını kaplasın diye. */ padding: 0; border-inline-end: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); background: #fff; transition: background .25s var(--ease); } .ind:hover { background: var(--c-blue-tint); } .ind__title { font-size: 1.02rem; margin-bottom: 4px; } .ind__meta { font-size: var(--fs-xs); color: var(--c-soft); } /* ========================================================================== 10 — SÜREÇ ========================================================================== */ .steps { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 26px; counter-reset: step; } .step { border-top: 2px solid var(--c-line-2); padding-top: 18px; position: relative; } .step::before { counter-increment: step; content: counter(step, decimal-leading-zero); display: block; font-family: var(--f-head); font-size: var(--fs-sm); font-weight: 600; color: var(--c-blue); margin-bottom: 10px; } /* * Süreç çizgisi. * * Her adımın üst kenarlığı gri durur; üzerine aynı kalınlıkta mavi bir örtü * konur ve bölüm görünüme girince soldan sağa açılır. Adımlar 110 ms arayla * tetiklenir, yani yedi parça sırayla çizilir — ilerleyen bir süreç gerçekten * ilerleyerek anlatılır. * * Neden her adım kendi parçasını çiziyor: adımlar 7 / 4 / 2 / 1 sütun olmak * üzere dört düzene giriyor. Tek parça bir SVG çizgi olsaydı her kırılım için * ayrı yol tanımı ve uzunluk hesabı gerekirdi. Parça parça çizilince dört * düzende de kendiliğinden doğru çalışır. * * scaleX kullanılıyor (width değil): dönüşüm ekran kartında işlenir, sayfa * yeniden yerleşime girmez, kaydırma takılmaz. * * .steps.is-cizili sınıfını main.js'teki initSurecCizgisi() ekler. JavaScript * çalışmazsa çizgiler gri kalır — yani bugünkü görünüm. */ .step::after { content: ""; position: absolute; inset-block-start: -2px; inset-inline: 0; height: 2px; background: var(--c-blue); transform: scaleX(0); transform-origin: left; transition: transform .55s var(--ease); } .steps.is-cizili .step::after { transform: scaleX(1); } /* Kartın kendi beliriş animasyonu (data-rv, .55 sn) otursun diye 250 ms gecikmeyle başlar; sonra her adım 110 ms arayla devam eder. */ .steps.is-cizili .step:nth-child(1)::after { transition-delay: 250ms; } .steps.is-cizili .step:nth-child(2)::after { transition-delay: 360ms; } .steps.is-cizili .step:nth-child(3)::after { transition-delay: 470ms; } .steps.is-cizili .step:nth-child(4)::after { transition-delay: 580ms; } .steps.is-cizili .step:nth-child(5)::after { transition-delay: 690ms; } .steps.is-cizili .step:nth-child(6)::after { transition-delay: 800ms; } .steps.is-cizili .step:nth-child(7)::after { transition-delay: 910ms; } .step__title { font-size: .98rem; margin-bottom: 6px; } .step__text { font-size: var(--fs-xs); line-height: 1.55; color: var(--c-soft); } /* ========================================================================== 11 — VAKA ÇALIŞMASI ========================================================================== */ .case { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(36px, 5vw, 72px); align-items: start; } .case__item + .case__item { margin-top: 26px; } .case__label { display: block; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--c-blue); margin-bottom: 8px; } .case__item p { font-size: var(--fs-sm); } .case__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-bg-2); margin-bottom: 22px; } .case__specs { border-top: 1px solid var(--c-line); } .case__specs div { display: flex; justify-content: space-between; gap: 20px; padding-block: 12px; border-bottom: 1px solid var(--c-line); font-size: var(--fs-sm); } .case__specs dt { color: var(--c-soft); } .case__specs dd { color: var(--c-ink); font-weight: 500; text-align: end; } /* ========================================================================== 12 — KOYU CTA BANDI (sayfadaki tek koyu yüzey) ========================================================================== */ .cta { background: var(--c-navy); padding-block: clamp(56px, 7vw, 96px); } .cta__in { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 36px; } .cta__title { color: #fff; font-size: var(--fs-h2); max-width: 22ch; margin-bottom: 10px; } .cta__text { color: var(--c-navy-text); max-width: 52ch; margin: 0; } .cta__side { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; } .cta__tel { color: #fff; font-family: var(--f-head); font-size: 1.3rem; font-weight: 600; } .cta__tel:hover { color: var(--c-navy-text); } .cta__note { color: var(--c-navy-text); font-size: var(--fs-xs); margin: 0; } /* ========================================================================== 13 — İLETİŞİM VE FORM ========================================================================== */ .contact { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(36px, 5vw, 80px); align-items: start; } .chs { border-top: 1px solid var(--c-line); margin-top: 30px; } .ch { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 16px; padding-block: 15px; border-bottom: 1px solid var(--c-line); font-size: var(--fs-sm); } .ch dt { color: var(--c-soft); } .ch dd a { color: var(--c-ink); font-weight: 500; } .ch dd a:hover { color: var(--c-blue); } .form { border: 1px solid var(--c-line); border-radius: var(--radius); padding: clamp(24px, 3vw, 40px); background: #fff; } .form__title { font-family: var(--f-head); font-size: 1.25rem; font-weight: 600; color: var(--c-ink); margin: 0 0 22px; padding-bottom: 16px; border-bottom: 1px solid var(--c-line); } .form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .fld { margin-bottom: 16px; } .fld__label { display: block; font-size: var(--fs-xs); font-weight: 600; color: var(--c-ink); margin-bottom: 7px; } .fld__in { width: 100%; padding: 12px 14px; background: #fff; border: 1px solid var(--c-line-2); border-radius: var(--radius); font-size: var(--fs-sm); color: var(--c-ink); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); } /* * Tek satırlık alanlar aynı yükseklikte olsun. * * Dolgu hepsinde aynı olmasına rağmen tarayıcı, bazı alan türlerinin İÇİNE * kendi aracını koyuyor ve alan yükseliyor: * metin/e-posta/telefon : 51,0 px * tarih (takvim aracı) : 53,0 px * dosya (seç düğmesi) : 52,5 px * * Ölçüldü: kariyer formunun ilk satırında "Adınız Soyadınız" ile "Doğum * Tarihiniz" yan yana duruyor ve alt kenarları 2 px kaçıktı. * * line-height sabitlenerek içerik yüksekliği türlerden bağımsız hâle * getiriliyor; satır sonrası boyut yalnızca dolgu ve kenarlıktan geliyor. * Çok satırlı alan (textarea) hariç tutuldu — onun yüksekliği satır sayısına * göre büyümeli. */ .fld__in:not(.fld__in--area) { line-height: 1.5; height: 51px; } .fld__in--file { height: 51px; } .fld__in::placeholder { color: #A6AFB6; } .fld__in:focus { outline: none; border-color: var(--c-blue); box-shadow: 0 0 0 3px rgba(11, 79, 121, .12); } .fld__in--area { resize: vertical; min-height: 104px; } .fld__in--select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--c-soft) 50%), linear-gradient(135deg, var(--c-soft) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; cursor: pointer; } .fld__err { display: none; font-size: var(--fs-xs); color: #C0392B; margin-top: 6px; } .fld.is-bad .fld__in { border-color: #C0392B; } .fld.is-bad .fld__err { display: block; } .fld--check { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; align-items: start; margin-block: 20px; } .fld__box { width: 16px; height: 16px; margin-top: 4px; accent-color: var(--c-blue); } .fld__check-t { font-size: var(--fs-xs); color: var(--c-soft); } .fld__check-t a { color: var(--c-blue); text-decoration: underline; } .fld--check .fld__err { grid-column: 2; } .form__status { font-size: var(--fs-sm); margin: 14px 0 0; text-align: center; min-height: 1.3em; } .form__status.is-ok { color: var(--c-blue); } .form__status.is-err { color: #C0392B; } .form__note { font-size: var(--fs-xs); color: var(--c-soft); text-align: center; margin: 14px 0 0; } /* ========================================================================== 14 — FOOTER ========================================================================== */ .ft { background: var(--c-bg-2); border-top: 1px solid var(--c-line); } .ft__top { display: grid; grid-template-columns: minmax(0, 1.25fr) repeat(4, minmax(0, .85fr)); gap: 36px; padding-block: clamp(48px, 6vw, 80px); } .ft__more { font-weight: 600; color: var(--c-blue) !important; } .ft__logo img { height: 46px; width: auto; margin-bottom: 20px; } .ft__about { font-size: var(--fs-sm); max-width: 38ch; } .ft__h { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink); margin-bottom: 18px; } .ft__list li + li { margin-top: 10px; } .ft__list a { font-size: var(--fs-sm); color: var(--c-text); } .ft__list a:hover { color: var(--c-blue); } .ft__addr { font-size: var(--fs-sm); margin-bottom: 14px; } .ft__bot { border-top: 1px solid var(--c-line); } .ft__bot-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 20px; } .ft__copy { font-size: var(--fs-xs); color: var(--c-soft); margin: 0; } .ft__legal { display: flex; flex-wrap: wrap; gap: 22px; } .ft__legal a { font-size: var(--fs-xs); color: var(--c-soft); } .ft__legal a:hover { color: var(--c-ink); } /* Çerez tercihlerini yeniden açan düğme — yasal bağlantılarla aynı görünür. */ .ft__prefs { font: inherit; font-size: var(--fs-xs); color: var(--c-soft); background: none; border: 0; padding: 0; cursor: pointer; } .ft__prefs:hover { color: var(--c-ink); } /* ========================================================================== 15 — ERİŞİLEBİLİRLİK / HAREKET ========================================================================== */ :where(a, button, input, select, textarea):focus-visible { outline: 2px solid var(--c-blue); outline-offset: 3px; border-radius: 2px; } body.no-scroll { overflow: hidden; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } html.js [data-rv] { opacity: 1; transform: none; transition: none; } .ticker__track { animation: none; } .ticker__mask { overflow-x: auto; } /* Slayt kendiliğinden ilerlemez (JS tarafında da durdurulur); kaydırma ani olur, yumuşak geçiş yapılmaz. */ .slayt__ray { scroll-behavior: auto; } /* Süreç çizgisi çizilmez, doğrudan yerinde durur. Aşağıdaki genel kural süreyi sıfırlıyor ama gecikmeyi sıfırlamıyor; 910 ms'lik bekleme kalırsa çizgi geç belirirdi. */ .steps.is-cizili .step::after { transition-delay: 0s !important; } *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; } } @media print { .hd, .ticker, .cta, .form { display: none !important; } body { color: #000; } } /* ========================================================================== 16 — ÜST YARDIMCI ÇUBUK VE DİL SEÇİMİ ========================================================================== */ :root { --topbar-h: 38px; } .topbar { /* * Üst şerit ekranın tepesine sabitlenir: dil seçimi ve telefon her an * erişilebilir kalır. Başlıktan bir üstte durması için z-index 200'ün * (.hd) hemen üzerindedir; mega panel .hd'nin içinde olduğu için aşağı * doğru açılır, çakışma olmaz. */ position: sticky; top: 0; z-index: 201; height: var(--topbar-h); background: var(--c-bg-2); border-bottom: 1px solid var(--c-line); font-size: var(--fs-xs); } .topbar__in { display: flex; align-items: center; justify-content: space-between; height: 100%; } .topbar__contact { display: flex; align-items: center; gap: 14px; } .topbar__contact a { color: var(--c-soft); font-weight: 500; } .topbar__contact a:hover { color: var(--c-blue); } .topbar__sep { width: 1px; height: 12px; background: var(--c-line-2); } .lang { display: flex; align-items: center; gap: 12px; } .lang__item { color: var(--c-soft); font-weight: 600; letter-spacing: .06em; padding: 4px 2px; } .lang__item:hover { color: var(--c-ink); } .lang__item.is-on { color: var(--c-blue); } /* ========================================================================== 17 — STANDARTLAR VE UYGUNLUK ========================================================================== */ .stds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--c-line); border-inline-start: 1px solid var(--c-line); } .std { background: #fff; padding: 26px 28px; border-inline-end: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); } .std__code { display: block; font-family: var(--f-head); font-weight: 600; font-size: 1.06rem; color: var(--c-ink); letter-spacing: -.01em; margin-bottom: 10px; } .std__text { font-size: var(--fs-sm); color: var(--c-text); margin: 0; } /* ========================================================================== 18 — HARİTA ========================================================================== */ .map { margin-top: clamp(44px, 6vw, 72px); border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; } .map iframe { display: block; width: 100%; filter: grayscale(.2); } /* ========================================================================== 19 — KVKK ÇEREZ BİLDİRİMİ ========================================================================== */ .cookie { position: fixed; inset-block-end: 20px; inset-inline-start: 20px; z-index: 260; max-width: 480px; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); box-shadow: 0 16px 48px rgba(22, 34, 43, .14); } /* Metin üstte, düğmeler altta. Şerit dar (max 480px) olduğu için yatay dizilimde düğmeler sıkışıyordu; dikey her ekran boyutunda okunaklı. */ .cookie__in { display: flex; flex-direction: column; align-items: stretch; gap: 14px; padding: 18px 20px; } .cookie__text { font-size: var(--fs-xs); margin: 0; } .cookie__text a { color: var(--c-blue); text-decoration: underline; } /* Dolgu .chan__btn ile aynı: ikisi de "küçük buton" ve sitede tek bir küçük ölçü olmalı. Önceden 10px 18px idi ve 37,3 px yükseklik veriyordu — kanal butonlarından 2 px farklı, yani karar değil sapma. */ .cookie__btn { flex: 0 0 auto; padding: 11px 16px; font-size: var(--fs-xs); } /* ========================================================================== 20 — FORM BAL KÜPÜ (görünmez, ekran okuyucudan gizli) ========================================================================== */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; margin: 0; } /* ========================================================================== 21 — MENÜ: AÇILIR PANELLER VE MEGA MENÜ Masaüstünde hover/klavye (focus-within) ile açılır; JS gerekmez. Mobil davranış responsive.css'te akordeona döner. ========================================================================== */ .hd__item { position: relative; } .hd__item--mega { position: static; } .hd__row { display: flex; align-items: center; } .hd__caret { display: none; } .hd__panel { position: absolute; top: 100%; left: 0; inset-block-start: 100%; inset-inline-start: 0; min-width: 300px; background: #fff; border: 1px solid var(--c-line); border-top: 2px solid var(--c-blue); box-shadow: 0 18px 44px rgba(22, 34, 43, .12); padding: 10px 0; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s; z-index: 210; } .hd__panel--end { left: auto; right: 0; inset-inline-start: auto; inset-inline-end: 0; min-width: 220px; } .hd__item--has:hover > .hd__panel, .hd__item--has:focus-within > .hd__panel { opacity: 1; visibility: visible; transform: none; } /* Dar açılır liste (Kurumsal, İletişim) */ .drop { text-align: left; } .drop li > a { display: block; padding: 9px 22px; font-size: var(--fs-sm); font-weight: 500; color: var(--c-ink); } .drop li > a:hover { background: var(--c-blue-tint); color: var(--c-blue); } /* Mega panel — header genişliğinde */ .hd__panel--mega { left: 0; right: 0; inset-inline: 0; border-inline: 0; padding: 0; } .mega { display: grid; text-align: left; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px clamp(28px, 3vw, 56px); padding-block: 30px 38px; max-height: calc(100vh - var(--header-h) - var(--topbar-h) - 24px); overflow-y: auto; } .mega__parent { display: block; font-family: var(--f-head); font-weight: 600; font-size: .95rem; color: var(--c-ink); padding-bottom: 10px; margin-bottom: 8px; border-bottom: 1px solid var(--c-line); } .mega__parent:hover { color: var(--c-blue); } .mega__list > li > a { display: block; padding: 6px 0; font-size: .88rem; color: var(--c-text); } .mega__list > li > a:hover { color: var(--c-blue); } .mega__all { display: inline-block; margin-top: 14px; font-size: var(--fs-sm); font-weight: 600; color: var(--c-blue); } /* ========================================================================== 22 — DİĞER HİZMET BAŞLIKLARI (etiket listesi) ========================================================================== */ .svc { margin-top: clamp(28px, 4vw, 44px); border-top: 1px solid var(--c-line); padding-top: 26px; } .svc__label { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--c-soft); margin-bottom: 16px; } .svc__list { display: flex; flex-wrap: wrap; gap: 10px; } .svc__list a { display: inline-block; padding: 8px 16px; border: 1px solid var(--c-line-2); border-radius: 100px; font-size: var(--fs-xs); font-weight: 500; color: var(--c-ink); transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease); } .svc__list a:hover { border-color: var(--c-blue); color: var(--c-blue); background: var(--c-blue-tint); } /* Endüstri karoları artık bağlantı — kutunun iç boşluğu buraya taşındı, .ind tanımına bakınız (bölüm 07). */ .ind__link { display: block; padding: 24px 22px; height: 100%; } /* Sadeleştirilmiş menü ekleri: grup etiketi ve iki sütunlu endüstri paneli */ .mega__label { display: block; font-family: var(--f-head); font-weight: 600; font-size: .95rem; color: var(--c-ink); padding-bottom: 10px; margin-bottom: 8px; border-bottom: 1px solid var(--c-line); } .topbar__outlet { color: var(--c-blue) !important; font-weight: 600; } /* Çerez — iki eylemli (dizilim .cookie__in tanımında, bölüm 19) */ .cookie__actions { display: flex; gap: 10px; justify-content: flex-end; } /* Hizmet etiketleri — 3 grup */ .svc__group + .svc__group { margin-top: 20px; } /* Klavye: Escape ile kapatılan panel, odak içeride kalsa da açılmaz */ .hd__item--has.is-suppressed > .hd__panel { opacity: 0 !important; visibility: hidden !important; transform: translateY(8px) !important; } /* Harita — onay kapısı (iframe onaydan önce DOM'a girmez) */ .map__gate { display: grid; justify-items: center; gap: 12px; padding: clamp(40px, 6vw, 72px) 24px; background: var(--c-bg-2); text-align: center; } .map__addr { font-weight: 500; color: var(--c-ink); margin: 0; } .map__note { font-size: var(--fs-xs); color: var(--c-soft); max-width: 56ch; margin: 0 0 4px; } /* Onay vermek istemeyen ziyaretçi için haritasız çıkış yolu */ .map__alt { font-size: var(--fs-xs); margin: 4px 0 0; } .map__alt a { color: var(--c-blue); text-decoration: underline; } /* Footer sosyal ikonlar */ .ft__social { display: flex; gap: 10px; margin-top: 20px; } .ft__social a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--c-line-2); border-radius: var(--radius); color: var(--c-soft); transition: color .2s var(--ease), border-color .2s var(--ease); } .ft__social a:hover { color: var(--c-blue); border-color: var(--c-blue); } .ft__social svg { width: 17px; height: 17px; fill: currentColor; } /* ========================================================================== 23 — İLETİŞİM KANALLARI (niyet yönlendirici) Eski sitede yedi eşit ağırlıklı kutu vardı; burada dört niyet ve her birinin tek net eylemi bulunur. ========================================================================== */ .chan { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--c-line); border-inline-start: 1px solid var(--c-line); } .chan__card { display: flex; flex-direction: column; padding: clamp(24px, 2.6vw, 34px); border-inline-end: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); background: #fff; } .chan__no { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .1em; color: var(--c-soft); margin-bottom: 16px; } .chan__title { font-size: var(--fs-h3); margin-bottom: 8px; } .chan__text { font-size: var(--fs-sm); margin-bottom: 20px; } .chan__acts { display: grid; gap: 8px; margin-top: auto; } .chan__btn { width: 100%; padding: 11px 16px; font-size: var(--fs-xs); } .chan__meta { font-size: var(--fs-xs); color: var(--c-soft); margin: 14px 0 0; } /* * Kartların bölümlerini satır satır hizalar. * * SORUN: margin-top:auto eylem bloğunu kartın ALTINA yaslıyordu, ama kartlar * eşitlenmiyordu. İki sebep: * - buton sayısı farklı (1 ve 2); tek butonlu kartın butonu, iki butonlu * kartın İKİNCİ butonuyla aynı hizaya geliyordu * - 02 numaralı kartın butonlarının altında ek bir not satırı var, o da * butonlarını yukarı itiyordu * * ÇÖZÜM: kart, üst ızgaranın satırlarını devralır (subgrid). Böylece numara, * başlık, metin, eylemler ve not blokları bütün kartlarda AYNI satırda başlar * — metin uzunlukları ve buton sayıları farklı olsa bile. * * @supports ile sarmalandı: subgrid desteklemeyen tarayıcıda kural hiç * uygulanmaz ve kartlar mevcut esnek dizilimiyle (alta yaslama) çalışmaya * devam eder. Yani destek yoksa bugünkü görünüm korunur, bozulma olmaz. */ @supports (grid-template-rows: subgrid) { .chan { grid-auto-rows: auto; } .chan__card { display: grid; grid-template-rows: subgrid; grid-row: span 5; /* numara · başlık · metin · eylemler · not */ align-content: start; } /* Eylem bloğu artık satırın kendisiyle hizalı; alta yaslamaya gerek yok. */ .chan__acts { margin-top: 0; align-self: start; } .chan__meta { align-self: start; } } /* ========================================================================== 24 — İÇ SAYFA BAŞLIĞI ========================================================================== Sınıf adı ".page" DEĞİL ".pagehead" olmalı: WordPress `body_class()` her statik sayfada
etiketine "page" sınıfını ekler. ".page" adı kullanılırsa bu kural gövdeye de uygulanır ve tüm sayfa 44px aşağı kayar (üst şeridin üstünde beyaz bant, altta fazladan çizgi). Bu blok içinde WordPress'in gövdeye eklediği adlardan hiçbiri kullanılmamalı: home, blog, archive, search, single, page, error404, attachment... ========================================================================== */ .pagehead { padding-block: clamp(28px, 4vw, 44px) clamp(24px, 3vw, 36px); border-bottom: 1px solid var(--c-line); } .crumbs { font-size: var(--fs-xs); color: var(--c-soft); margin-bottom: 14px; } .crumbs a { color: var(--c-soft); } .crumbs a:hover { color: var(--c-blue); } .crumbs span[aria-current] { color: var(--c-ink); } .pagehead__title { font-size: clamp(2rem, 3.4vw, 3rem); margin: 0; } .sec--flush { border-top: 0; } .wrap--narrow { max-width: 880px; } /* ========================================================================== 25 — SEKMELER (kariyer: beyaz yaka / mavi yaka) JS yoksa iki form da alt alta görünür ve çalışır; sekme çubuğu yalnızca JS hazır olduğunda görünür. ========================================================================== */ .tabs__bar { display: none; } .tabs.is-ready .tabs__bar { display: inline-flex; gap: 4px; padding: 4px; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); margin-bottom: 26px; } .tabs__btn { padding: 11px 22px; font-size: var(--fs-sm); font-weight: 600; color: var(--c-soft); border-radius: var(--radius); transition: background .2s var(--ease), color .2s var(--ease); } .tabs__btn:hover { color: var(--c-ink); } .tabs__btn[aria-selected="true"] { background: var(--c-blue); color: #fff; } .tabs.is-ready .tabs__panel[hidden] { display: none; } .tabs__panel + .tabs__panel { margin-top: 40px; } .tabs.is-ready .tabs__panel + .tabs__panel { margin-top: 0; } .tabs__desc { font-size: var(--fs-sm); color: var(--c-soft); margin-bottom: 18px; } /* ========================================================================== 26 — FORM EKLERİ (dosya, onay kutusu grubu, opsiyonel etiketi) ========================================================================== */ .fld__opt { font-weight: 500; color: var(--c-soft); text-transform: none; letter-spacing: 0; } .fld__note { display: block; font-size: var(--fs-xs); color: var(--c-soft); margin-top: 6px; } /* * Karakter sayacı — serbest metin alanının sağ altında. * * Hata mesajı (.fld__err) aynı kutuda ve sola yaslı olduğu için sayaç * sağa alındı; ikisi aynı satırda yan yana durabilir, çakışmaz. * JavaScript kapalıysa boş kalır ve hiç görünmez. */ .fld--count { position: relative; } .fld__count { display: block; text-align: end; font-size: var(--fs-xs); color: var(--c-soft); margin-top: 6px; font-variant-numeric: tabular-nums; } .fld__count:empty { display: none; } .fld__count.is-low { color: #C0392B; } .fld__in--file { padding: 10px 12px; background: var(--c-bg-2); cursor: pointer; } .fld__in--file::file-selector-button { margin-inline-end: 12px; padding: 7px 14px; border: 1px solid var(--c-line-2); border-radius: var(--radius); background: #fff; font-size: var(--fs-xs); font-weight: 600; color: var(--c-ink); cursor: pointer; } /* ========================================================================== 27 — KARİYER: NEDEN NOVATEK ========================================================================== */ .why { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--c-line); border-inline-start: 1px solid var(--c-line); } .why__item { padding: 26px 28px; border-inline-end: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); } .why__title { font-size: 1.02rem; margin-bottom: 6px; } .why__text { font-size: var(--fs-sm); margin: 0; } /* ========================================================================== 17 — İÇ SAYFA İÇERİĞİ (.entry) Düzenleyiciden gelen metnin tipografisi. Ana sayfadaki ölçek ve renklerle aynı sistemi kullanır; yeni bir görsel dil getirmez. ========================================================================== */ .entry { font-size: var(--fs-lead); line-height: 1.72; color: var(--c-text); } .entry > *:first-child { margin-top: 0; } .entry > *:last-child { margin-bottom: 0; } .entry p { margin: 0 0 1.15em; } /* Giriş paragrafı. İki seçici aynı kuralı paylaşır: `.lead` elle yazılan sayfalarda, `.is-style-nv-lead` blok düzenleyicinin stil seçiminden gelir (bkz. inc/editor.php). İkisi de birebir aynı görünmelidir — biri değişirse diğeri de değişmeli. */ .entry .lead, .entry .is-style-nv-lead { font-size: 1.1em; color: var(--c-soft); } .entry h2 { font-family: var(--f-head); font-size: clamp(1.35rem, 2vw, 1.75rem); font-weight: 600; color: var(--c-ink); letter-spacing: -.01em; margin: 2.2em 0 .7em; padding-top: 1.4em; border-top: 1px solid var(--c-line); } .entry h2:first-child { padding-top: 0; border-top: 0; margin-top: 0; } .entry h3 { font-family: var(--f-head); font-size: var(--fs-h3); font-weight: 600; color: var(--c-ink); margin: 1.8em 0 .5em; } .entry ul, .entry ol { margin: 0 0 1.3em; padding-inline-start: 1.3em; } .entry li { margin-bottom: .5em; } .entry li::marker { color: var(--c-blue); } .entry a { color: var(--c-blue); text-decoration: underline; text-underline-offset: 2px; } .entry a:hover { color: var(--c-ink); } .entry strong { color: var(--c-ink); font-weight: 600; } .entry blockquote { margin: 1.6em 0; padding-inline-start: 22px; border-inline-start: 2px solid var(--c-blue); font-size: 1.06em; color: var(--c-ink); } .entry img { max-width: 100%; height: auto; border-radius: var(--radius); } .entry figure { margin: 1.8em 0; } .entry figcaption { font-size: var(--fs-xs); color: var(--c-soft); margin-top: 8px; } /* Teknik veri tablosu — şartname ve ölçü listeleri için */ .entry table { width: 100%; border-collapse: collapse; margin: 0 0 1.5em; font-size: var(--fs-sm); } .entry th, .entry td { padding: 11px 14px; border-bottom: 1px solid var(--c-line); text-align: start; } .entry th { font-weight: 600; color: var(--c-ink); background: var(--c-bg-2); } .entry td { color: var(--c-text); } /* Geniş tablolar dar ekranda sayfayı yatay kaydırmasın */ /* Geniş tablolar dar ekranda sayfayı yatay kaydırmasın. `.wp-block-table` blok düzenleyicinin tablo bloğunda kendiliğinden gelir — yazarın bir şey yapmasına gerek yok. `.table-scroll` ise elle HTML yazılan yerler için aynı işi görür. */ .entry .table-scroll, .entry .wp-block-table { overflow-x: auto; margin: 0 0 1.5em; } .entry .table-scroll table, .entry .wp-block-table table { margin: 0; } .entry hr { border: 0; border-top: 1px solid var(--c-line); margin: 2.4em 0; } /* Sayfa altı yönlendirme kutusu. `.note` elle yazılan sayfalarda, `.is-style-nv-note` blok düzenleyicideki grup bloğu stilinden gelir (bkz. inc/editor.php). */ .entry .note, .entry .is-style-nv-note { padding: 20px 22px; background: var(--c-bg-2); border-inline-start: 2px solid var(--c-blue); font-size: var(--fs-sm); margin: 1.8em 0; } .entry .note p:last-child, .entry .is-style-nv-note p:last-child { margin-bottom: 0; } .entry__pages { margin-top: 2em; font-size: var(--fs-sm); } .entry__item + .entry__item { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--c-line); } /* ========================================================================== 18 — UZUN FORM BÖLÜMLERİ Kariyer başvuru formu 70'ten fazla alan içerir; bölüm başlıkları olmadan okunmaz hâle gelir. Diğer formlar (teklif, iletişim) bu sınıfları kullanmaz, görünümleri değişmez. ========================================================================== */ .form__group { font-family: var(--f-head); font-size: 1.02rem; font-weight: 600; color: var(--c-ink); letter-spacing: -.01em; margin: 34px 0 4px; padding-top: 20px; border-top: 1px solid var(--c-line); } .form__title + .form__group { margin-top: 8px; padding-top: 0; border-top: 0; } .form__groupnote { font-size: var(--fs-xs); color: var(--c-soft); margin: 0 0 14px; line-height: 1.6; } .form__group + .fld, .form__group + .form__row { margin-top: 14px; } .form__sub { font-size: var(--fs-sm); font-weight: 600; color: var(--c-soft); margin: 20px 0 8px; } /* Uzun formda onay kutuları birbirine yapışmasın */ .fld--check + .fld--check { margin-top: 12px; } /* ========================================================================== 19 — GÖMÜLÜ VİDEO (onay kapısı arkasında) Harita kapısıyla aynı görsel dili kullanır: gri zemin, ince çerçeve, açıklama + tek eylem düğmesi. ========================================================================== */ .video { margin: 2em 0; border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; background: var(--c-bg-2); } .video__gate { position: relative; display: grid; } .video__poster { grid-area: 1 / 1; width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; /* Önizleme arka planda kalır; üstündeki panel okunabilir olmalı. */ filter: grayscale(.35) brightness(.55); } .video__panel { grid-area: 1 / 1; display: grid; justify-items: center; align-content: center; gap: 10px; padding: clamp(28px, 5vw, 56px) 24px; text-align: center; /* * Kendi karartma katmanı. Önizleme görseli yüklenmezse ya da hiç yoksa * beyaz metin açık gri zeminde okunmaz kalırdı; bu gradyan panelin * kendisine ait olduğu için görselden bağımsız çalışır. */ background: linear-gradient(180deg, rgba(16, 41, 58, .78), rgba(16, 41, 58, .88)); } .video__title { font-family: var(--f-head); font-weight: 600; font-size: clamp(1.05rem, 1.8vw, 1.3rem); line-height: 1.3; color: #fff; margin: 0; max-width: 34ch; } .video__meta { font-size: var(--fs-xs); color: rgba(255,255,255,.75); margin: 0; } .video__note { font-size: var(--fs-xs); color: rgba(255,255,255,.75); max-width: 52ch; margin: 4px 0 0; line-height: 1.6; } .video__alt { font-size: var(--fs-xs); margin: 2px 0 0; } .video__alt a { color: #fff; text-decoration: underline; } .video__alt a:hover { color: var(--c-blue-tint); } /* Yüklendikten sonra iframe kutuyu doldurur */ .video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; } /* İçerik alanındaki videonun kenar boşlukları .entry ile uyumlu olsun */ .entry .video { margin: 2.2em 0; } /* ========================================================================== 28 — BAŞA DÖN BUTONU ========================================================================== Sağ altta sabit durur. Görünürlüğü .totop--on sınıfıyla JavaScript verir; sınıf gelmezse buton hiç görünmez. Çerez şeridiyle çakışma: şerit masaüstünde sol altta (max 480px), bu buton sağ altta — çakışmazlar. Mobilde şerit tam genişliğe yayıldığı için buton onun üstüne biner; aşağıdaki :has() kuralı butonu yukarı iter. :has() desteklenmezse şerit z-index 260 ile butonun (250) üstünde kalır, yani en kötü ihtimalle buton şeridin arkasında kaybolur — okunamaz bir üst üste binme oluşmaz. ========================================================================== */ .totop { position: fixed; inset-block-end: 20px; inset-inline-end: 20px; z-index: 250; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1px solid var(--c-line-2); border-radius: 50%; background: #fff; color: var(--c-blue); cursor: pointer; box-shadow: 0 8px 24px rgba(22, 34, 43, .14); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s, background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); } .totop--on { opacity: 1; visibility: visible; transform: none; } .totop:hover, .totop:focus-visible { background: var(--c-blue); border-color: var(--c-blue); color: #fff; } .totop:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 3px; } .totop:active { transform: translateY(1px); } .totop__ico { width: 22px; height: 22px; fill: currentColor; display: block; } /* Dar ekranda çerez şeridi tam genişliğe yayılır ve butonun üstüne biner. Şeridin yüksekliği metne göre değiştiği için sabit bir kaydırma payı güvenilir olmaz; şerit açıkken butonu hiç göstermiyoruz. Şerit tek seferlik ve kapatılınca buton normal davranışına döner. */ @media (max-width: 640px) { body:has(.cookie:not([hidden])) .totop { opacity: 0; visibility: hidden; } } /* Hareketi azalt tercihi: geçiş yok, ani görünsün. */ @media (prefers-reduced-motion: reduce) { .totop { transition: none; transform: none; } .totop--on { transform: none; } } /* ========================================================================== 30 — VAKA ANALİZLERİ -------------------------------------------------------------------------- Kart ızgarası. Tekil kart sayfası ayrı CSS kullanmaz; ana sayfadaki kart bölümünün .case sınıflarını olduğu gibi kullanır (bkz. single-nv_vaka.php). Burada yalnızca liste görünümü tanımlıdır. Kartlar .ind ve .sol karolarıyla aynı dili konuşur: kenarlıklar ızgaranın üstünden ve solundan başlar, her karo kendi sağ/alt kenarlığını çizer. Böylece aralarda çift çizgi oluşmaz. ========================================================================== */ .kartlar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--c-line); border-inline-start: 1px solid var(--c-line); } /* * Dört sütunlu değişke — Hizmetlerimiz sayfası için. * * Endüstriler 10, Hizmetlerimiz 22 karttır. Aynı ızgarada 22 kart üçerli * dizilince sekiz satır oluyor ve sayfa gereksiz uzuyor; dörderli dizilim * kart genişliğini 397'den 298 px'e düşürüp satır sayısını altıya indiriyor. * * Kırılımlar 3'lü ızgarayla ORTAK (aşağıda responsive.css): 1024 px altında * ikisi de 2 sütuna, 640 px altında 1 sütuna iner. Yani fark yalnızca geniş * masaüstünde görünür; dar ekranda iki sayfa aynı davranır. */ .kartlar--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .kart { border-inline-end: 1px solid var(--c-line); border-block-end: 1px solid var(--c-line); background: #fff; transition: background .25s var(--ease); } .kart:hover { background: var(--c-blue-tint); } .kart__link { display: block; height: 100%; } /* Görsel oranı sabit: farklı ölçülerde yüklenen fotoğraflar ızgarayı bozmasın. */ .kart__media img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--c-bg-2); border-block-end: 1px solid var(--c-line); } /* Görseli olmayan kart — aynı oranı tutar, ızgara bozulmaz. */ .kart__media--bos { display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--c-bg-2); color: var(--c-line-2); border-block-end: 1px solid var(--c-line); } .kart__body { padding: 24px 22px 28px; } .kart__etiket { display: block; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--c-blue); margin-bottom: 10px; } .kart__title { font-size: 1.05rem; margin-bottom: 8px; } .kart__ozet { font-size: var(--fs-sm); color: var(--c-soft); margin: 0; } /* * KART, MAKALE TİPOGRAFİSİNDEN YALITILIR. * * Kart iki farklı bağlamda kullanılıyor: * arşiv sayfaları → .entry YOK, kart kendi stillerini alır * sayfa içeriği → .entry VAR ([nv_kartlar] kısa kodu orada çalışıyor) * * .entry, makale metni için yazılmış kurallar taşıyor ve bunlar karta * sızıyordu. Ölçüldüğünde şunlar çıktı: * .entry h2 → başlık 16,8 px yerine 25,6 px, üstüne 17,9 px boşluk * (ayrıca border-top ve padding-top veriyor) * .entry p → özetin altına 16,9 px boşluk * .entry a → kart bağlantısı MAVİ ve ALTI ÇİZİLİ * * Yani aynı bileşen iki sayfada farklı görünüyordu. Aşağıdaki kurallar * hedefi arşivdeki değerlere sabitler. * * Seçiciler ".kart" ile başlıyor (0-2-0): ".entry h2" (0-1-1) kuralını * yener ve .entry dışında da aynı sonucu verir, yani tek kaynak kalır. */ .kart .kart__title { font-size: 1.05rem; font-weight: 600; color: var(--c-ink); margin: 0 0 8px; padding: 0; border: 0; } .kart .kart__ozet { margin: 0; } .kart .kart__link { color: var(--c-soft-2); text-decoration: none; } /* * LİSTELEME SAYFALARI TAM GENİŞLİK. * * Kart ızgarası içeren sayfalarda (.nv-liste gövde sınıfı, bkz. * inc/kartlar.php) içerik sütunu dar kalmamalı. * * Önce yalnızca ızgara negatif kenar boşluğuyla dışarı çekiliyordu * (margin-inline: -180px). Izgara arşivle aynı genişliğe geliyordu ama * BAŞLIKLAR ve not kutusu dar sütunda kaldığı için H1 36 px'ten, H2'ler * 216 px'ten başlıyordu — sayfa kayık görünüyordu. * * Şimdi kapsayıcının kendisi genişletiliyor: H1, H2, kartlar ve kutu aynı * hizadan başlıyor. Negatif kenar boşluğu, sabit 180 px ve ona bağlı kırılım * noktası tamamen kalktı. * * Paragraflar ayrıca sınırlanıyor: 1192 px'lik satır okunmaz olurdu. Yalnızca * max-width verildiği için SOL KENAR hizada kalır, satır kısalır. */ .nv-liste .entry { max-width: var(--w-max); } .nv-liste .entry > p { max-width: 70ch; } /* Sayfalama — WordPress'in kendi işaretlemesi. */ .sayfalama { margin-top: clamp(36px, 5vw, 56px); } .sayfalama .nav-links { display: flex; flex-wrap: wrap; gap: 8px; } .sayfalama .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 14px; border: 1px solid var(--c-line-2); border-radius: var(--radius); font-size: var(--fs-sm); font-weight: 500; color: var(--c-ink); transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease); } .sayfalama .page-numbers:hover { border-color: var(--c-blue); color: var(--c-blue); background: var(--c-blue-tint); } .sayfalama .page-numbers.current { background: var(--c-blue); border-color: var(--c-blue); color: #fff; } .sayfalama .page-numbers.dots { border-color: transparent; } /* Ana sayfadaki kart bölümünün "tamamını okuyun" bağlantısı. */ .case__devam { margin-top: 26px; } /* ========================================================================== 31 — WHATSAPP BUTONU -------------------------------------------------------------------------- Başa dön butonunun tam üstünde, aynı ölçüde (46 px) ve aynı sağ hizada. Konum SABİT, .totop'a göre değil: başa dön butonu yalnızca sayfa kaydırılınca görünür; göreli konumlansaydı WhatsApp butonu her kaydırmada zıplardı. Hesap: 20 (alt boşluk) + 46 (buton) + 10 (aralık) = 76 px. Seçenekler fareyle üzerine gelince açılır. Dokunmatikte hover yoktur, o yüzden JS ayrıca .is-open sınıfını yönetir (bkz. initWhatsapp). ========================================================================== */ /* * Kapsayıcı TAM OLARAK butonun ölçüsünde. * * Önce akış düzeni kullanılmıştı: seçenekler gizliyken bile yer kapladığı * için kapsayıcı 158 px yüksekliğindeydi ve imleç butonun epey üstündeyken * .wa:hover doğru oluyordu — menü "yaklaşınca" açılıyordu. Seçenekler mutlak * konumlandırılınca kapsayıcı yalnızca butonu kaplar, açılma da yalnızca * butonun üzerine gelince olur. */ .wa { position: fixed; inset-block-end: 76px; inset-inline-end: 20px; z-index: 250; width: 46px; height: 46px; } .wa__btn { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1px solid var(--c-line-2); border-radius: 50%; background: #fff; color: #25D366; /* WhatsApp yeşili yalnızca simgede */ cursor: pointer; box-shadow: 0 8px 24px rgba(22, 34, 43, .14); transition: background-color .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease), transform .22s var(--ease); } .wa__ico { width: 24px; height: 24px; fill: currentColor; display: block; } .wa__btn:hover, .wa__btn:focus-visible, .wa.is-open .wa__btn { background: #25D366; border-color: #25D366; color: #fff; } .wa__btn:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 3px; } .wa__btn:active { transform: translateY(1px); } /* * Seçenekler. * * Kapalıyken visibility:hidden — yalnızca opaklık kullanılsaydı görünmez * bağlantılar klavyeyle ve ekran okuyucuyla hâlâ gezilebilir olurdu. * * Her öğe kendi sırasına göre gecikir (--i). Alttaki önce gelir; göz butondan * yukarı doğru okuduğu için sıra bu yönde açılmalı. */ /* * Alttaki 10 px DOLGU, boşluk değil. * * Aralık margin ile verilseydi buton ile seçenekler arasında imlecin hiçbir * şeyin üzerinde olmadığı 10 px'lik ölü bir şerit kalırdı; imleci yavaş * yukarı götüren kullanıcıda menü tam o şeritte kapanırdı. (Aynı tuzağa * mega menüde de düşmüştük — bkz. .hd__list yorumu.) Dolgu öğenin kendi * kutusuna dahildir, imleç yolu kesintisiz olur. */ .wa__list { position: absolute; inset-block-end: 100%; inset-inline-end: 0; list-style: none; margin: 0; padding: 0 0 10px; display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 8px; /* * Kapalıyken imleci hiç yakalamaz. Gizlilik yalnızca .wa__item'da olduğu * için listenin KENDİSİ (ve alttaki dolgusu) görünmez ama tıklanabilir * kalıyordu; imleç butonun 60 px üstündeyken bile listeye değiyor, menü * açılıyordu. Açıldığında yeniden etkinleşir, böylece seçeneklere doğru * hareket menüyü kapatmaz. */ pointer-events: none; } .wa:hover .wa__list, .wa:focus-within .wa__list, .wa.is-open .wa__list { pointer-events: auto; } .wa__item { opacity: 0; visibility: hidden; transform: translateY(8px) scale(.96); transform-origin: right center; transition: opacity .26s var(--ease), transform .26s var(--ease), visibility .26s; transition-delay: 0ms; } .wa:hover .wa__item, .wa:focus-within .wa__item, .wa.is-open .wa__item { opacity: 1; visibility: visible; transform: none; transition-delay: calc(var(--i, 0) * 70ms); } .wa__link { display: block; padding: 10px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--c-line-2); box-shadow: 0 8px 24px rgba(22, 34, 43, .14); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; color: var(--c-ink); transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); } .wa__link:hover, .wa__link:focus-visible { background: #25D366; border-color: #25D366; color: #fff; } @media (prefers-reduced-motion: reduce) { /* Açılma anlık olur; gecikmeler sıfırlanır, yoksa seçenekler geç belirirdi. */ .wa__item { transform: none; } .wa:hover .wa__item, .wa:focus-within .wa__item, .wa.is-open .wa__item { transition-delay: 0s !important; } } /* Tekil kart sayfası. Görsel, metin ve künye tablosunun üçü de içerikte; burada yalnızca blok çıktısı sitenin diline uyduruluyor. */ .vaka__giris { max-width: 62ch; margin-top: 14px; } /* Geniş hizalı kapak görseli dar sütunun dışına taşar. */ .vaka__anlati .wp-block-image.alignwide img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-bg-2); } .vaka__anlati .wp-block-image.alignwide { margin-inline: calc(50% - 50vw); max-width: 100vw; padding-inline: var(--gutter); } @media (min-width: 1024px) { .vaka__anlati .wp-block-image.alignwide { margin-inline: calc((880px - var(--w-max)) / 2); max-width: var(--w-max); padding-inline: 0; } } /* Künye tablosu — sayfadaki .case__specs listesiyle aynı dil. */ .vaka__anlati .wp-block-table table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); } .vaka__anlati .wp-block-table td { padding-block: 12px; border-bottom: 1px solid var(--c-line); border-inline: 0; } .vaka__anlati .wp-block-table tr:first-child td { border-top: 1px solid var(--c-line); } .vaka__anlati .wp-block-table td:first-child { color: var(--c-soft); } .vaka__anlati .wp-block-table td:last-child { color: var(--c-ink); font-weight: 500; text-align: end; } /* Anlatıdaki Problem/Çözüm/Sonuç başlıkları — kart etiketleriyle aynı dil. */ .vaka__anlati h2 { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--c-blue); margin-top: 34px; margin-bottom: 10px; } .vaka__anlati h2:first-child { margin-top: 0; } /* İçerik içindeki slayt (blok deseni). Giriş bölümündeki ile aynı bileşen; burada yalnızca çerçeve ve boşluk veriliyor — .hero__media'nın karşılığı. */ .entry .slayt img, .entry .slayt__kare img { aspect-ratio: 3 / 2; object-fit: cover; border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-bg-2); } .entry .slayt__noktalar { margin-bottom: 28px; } /* Grup bloğunun kendi iç boşluğu slaytı bozmasın. */ .slayt.wp-block-group, .slayt__ray.wp-block-group { padding: 0; } /* * Slayt kutusunun alt boşluğu SIFIR olmalı. * * Çekirdek görsel bloğu ve tema içeriği ".entry figure" ile 1.8em alt boşluk * veriyor; ölçüldüğünde ray 586 px, kareler 555 px çıkıyordu — yani her * slaytın altında 31 px boşluk kalıyor ve ok/nokta hizası kayıyordu. * Seçici İKİ sınıflı: ".slayt__ray > *" (0-1-0) da ".slayt__kare" (0-1-0) da * ".entry figure" (0-1-1) kuralını yenemiyor. ".slayt .slayt__ray > *" (0-2-0) * yener ve .entry dışında da çalışır. */ .slayt .slayt__ray > * { margin: 0; } /* Gönderim sürerken düğme — çift tıklamayı JS engelliyor, bu görsel geri bildirim. disabled kullanılmıyor: disabled submit düğmesi POST'a girmez. */ .btn.is-busy { opacity: .6; cursor: progress; pointer-events: none; } /* * Başlıktaki arama alanının odak göstergesi. * * ".hd__ara-in-alan:focus { outline: 0 }" yazılıydı ve YERİNE HİÇBİR ŞEY * KONMAMIŞTI: klavyeyle gelen kullanıcı alanın odakta olduğunu göremiyordu. * Genel :focus-visible kuralı :where() içinde olduğu için 0 özgüllükte ve * bu kuralı ezemiyordu. * * Fare tıklamasında halka çıkmasın diye :focus-visible kullanılıyor. */ .hd__ara-in-alan:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 2px; border-radius: 4px; }