içine al. */
.icerik__giris { font-size: 1.15rem; line-height: 1.7; color: var(--ink); }
.icerik__giris > p + p { margin-top: 1rem; }
@media (max-width: 640px) {
.icerik { font-size: 1rem; line-height: 1.75; }
.icerik h2 { margin-top: 2.25rem; font-size: 1.3rem; }
.icerik h3 { margin-top: 1.75rem; }
}
/* --- Galeri ızgarası — galeri sayfası (ana sayfadaki .serit'in yerine) --- */
.galeri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.galeri__kare {
border-radius: var(--r);
overflow: hidden;
aspect-ratio: 4 / 3;
background: var(--gray-2);
}
/* Ritmi kıran geniş hücre: İKİ KOLON GENİŞ ama satırdaki komşusuyla AYNI YÜKSEKLİK.
Kolon genişliği w, boşluk g iken geniş hücre 2w+g, normal hücre yüksekliği 0.75w →
oran (2w+g)/0.75w. Bu oran 3 ve 2 kolonlu düzenlerde 2.71–2.75 arasında kalıyor;
sabit 2.73 ile fark 2px'in altında. 4/3 bırakılırsa hücre iki kat yükseliyor ve
satırdaki komşu kareyi bozuyordu. */
.galeri__kare img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--t-soft) var(--ease);
}
.galeri__kare:hover img { transform: scale(1.04); }
.galeri + .galeri { margin-top: 1rem; }
@media (max-width: 900px) {
.galeri { grid-template-columns: repeat(2, 1fr); }
}
/* 375px'te iki kolon kareyi 164x123px'e düşürüyordu — fotoğraf sayfası için
ana sayfadaki şerit karesinden (293x219) bile küçük. Tek sütuna iner. */
@media (max-width: 640px) {
.galeri { grid-template-columns: 1fr; gap: 0.75rem; }
}
/* --- Yatay kart — öne çıkan blog yazısı (mevcut .card'ın varyantı) ------ */
/* Kartın yüksekliğini görselin doğal boyu (1200x900 → ~500px) belirliyordu; metin
sütununun altında ve üstünde ~350px boş alan kalıyordu. Görsel mutlak konumlanınca
içsel yüksekliğe katkı vermez, kart ölçüsünü min-height + metin belirler. */
.card--yatay { flex-direction: row; align-items: stretch; min-height: 22rem; }
.card--yatay .card__media { position: relative; flex: 0 0 46%; aspect-ratio: auto; }
.card--yatay .card__media img { position: absolute; inset: 0; }
.card--yatay .card__body { padding: var(--pad-kart); justify-content: center; }
.card--yatay .card__title { font-size: 1.35rem; letter-spacing: -0.022em; }
.card--yatay .card__body p { margin-top: 0.75rem; max-width: 58ch; font-size: 0.95rem; }
/* Dikeyde ortalanan gövdede bağlantı dibe itilmemeli */
.card--yatay .card__body .link-more { margin-top: 1.25rem; padding-top: 0; }
@media (max-width: 760px) {
.card--yatay { flex-direction: column; min-height: 0; }
.card--yatay .card__media { flex: none; aspect-ratio: 16 / 10; }
.card--yatay .card__body { padding: var(--pad-kart-sm); }
.card--yatay .card__title { font-size: 1.15rem; }
}
/* --- Özellik kutuları — hizmet detayında features[] --------------------- */
.ozellik { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
.ozellik li {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.85rem;
align-items: start;
padding: 1.1rem 1.25rem;
background: var(--white);
border: 1px solid var(--kart-kenar);
border-radius: var(--r);
font-size: 0.95rem;
line-height: 1.55;
transition: border-color var(--t-micro) var(--ease), transform var(--t-micro) var(--ease);
}
.ozellik li:hover { border-color: var(--kart-kenar-hover); transform: translateY(-2px); }
.ozellik svg { width: 16px; height: 16px; margin-top: 0.28rem; color: var(--dim); flex: none; }
@media (max-width: 640px) {
.ozellik { grid-template-columns: 1fr; gap: 0.625rem; }
}
/* --- Kapsam bloğu — solda gerçek ofis görseli, sağda özellik satırları --- */
/* "Hizmet Kapsamı" tipi listeler salt metin kalıyordu; blok artık görselli iki kolon.
Markup:
![…]()
Görsel DOM'da ÖNCE — mobilde üstte kalır (kontrat: mobil split'te görsel önce). */
.kapsam { display: grid; grid-template-columns: 1fr 1.15fr; gap: 3rem; align-items: center; }
.kapsam__gorsel {
border-radius: var(--r);
overflow: hidden;
aspect-ratio: 4 / 3;
background: var(--gray-2);
}
.kapsam__gorsel img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-soft) var(--ease); }
.kapsam__gorsel:hover img { transform: scale(1.04); }
.kapsam__ic { min-width: 0; }
.kapsam__ic > p { font-size: 1.02rem; line-height: 1.75; color: var(--dim); }
.kapsam__ic > p + .ozellik { margin-top: 1.5rem; }
/* Tek kolonluk sütunda özellik kutuları alt alta dizilir */
.kapsam .ozellik { grid-template-columns: 1fr; }
.kapsam .not-kutu { margin-top: 1.5rem; }
/* --- Yazı düzeni — blog detayı ve yasal metin --------------------------- */
/* Gövde sütunu 1fr iken .icerik 72ch'te durup sağında 189px ölü bant bırakıyordu.
Sütun okuma genişliğiyle sınırlanır, artan yer boşluğa gider (space-between). */
.yazi {
display: grid;
grid-template-columns: minmax(0, 76ch) 320px;
justify-content: space-between;
gap: 4rem;
align-items: start;
}
/* Kapak, altındaki okuma sütunuyla aynı ölçüde biter — 189px taşıp kırık sağ kenar
oluşturuyordu. Ölçü .icerik ile tek kaynaktan gelir. */
.yazi__kapak {
max-width: 72ch;
margin-bottom: 2.5rem;
border-radius: var(--r);
overflow: hidden;
aspect-ratio: 16 / 9;
background: var(--gray-2);
}
.yazi__kapak img { width: 100%; height: 100%; object-fit: cover; }
.yazi__yan {
position: sticky;
top: calc(var(--header-h-stuck) + 2rem);
display: grid;
gap: 1.25rem;
/* Uzun dizinlerde sütun ekrandan taşıp son bağlantıyı erişilemez bırakıyordu */
max-height: calc(100vh - var(--header-h-stuck) - 3rem);
overflow-y: auto;
scrollbar-width: thin;
}
/* Yan sütun DOM'da ÖNCE gelen varyant — yasal metinde dizin mobilde belgenin
üstünde kalsın diye. `order` hilesi değil: DOM sırası zaten yan → gövde,
masaüstünde grid alanları gövdeyi sola, yan sütunu sağa koyar.
Markup:
*/
.yazi--yan-once { grid-template-areas: 'govde yan'; }
.yazi--yan-once > * { grid-area: govde; }
.yazi--yan-once > .yazi__yan { grid-area: yan; }
@media (max-width: 1080px) {
.yazi { grid-template-columns: 1fr; gap: 3rem; }
.yazi__yan { position: static; max-height: none; overflow: visible; }
.yazi--yan-once { grid-template-areas: 'yan' 'govde'; }
}
@media (max-width: 640px) {
.yazi__kapak { margin-bottom: 1.75rem; aspect-ratio: 4 / 3; }
}
/* --- Yan sütun kutusu — yapışkan CTA ve liste --------------------------- */
.yan-kutu {
background: var(--ink);
color: var(--white);
border: 1px solid var(--ink);
border-radius: var(--r);
padding: var(--pad-kart-sm);
}
.yan-kutu h3 { font-size: 1.15rem; }
.yan-kutu p { margin-top: 0.6rem; font-size: 0.92rem; color: var(--dim-dark); }
.yan-kutu .btn { margin-top: 1.25rem; }
.yan-kutu--acik { background: var(--white); color: var(--ink); border-color: var(--line); }
.yan-kutu--acik p { color: var(--dim); }
.yan-kutu__liste { display: grid; margin-top: 1rem; }
.yan-kutu__liste a {
display: block;
padding: 0.8rem 0;
font-size: 0.9rem;
line-height: 1.45;
color: var(--dim);
border-top: 1px solid var(--line);
transition: color var(--t-micro) var(--ease), padding-left var(--t-micro) var(--ease);
}
.yan-kutu__liste a:hover { color: var(--ink); padding-left: 0.35rem; }
@media (max-width: 1080px) {
.yan-kutu { padding: var(--pad-kart); }
}
/* --- Yasal metin dizini — yapışkan bağlantı listesi --------------------- */
.dizin { position: sticky; top: calc(var(--header-h-stuck) + 2rem); }
.dizin__baslik { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em; color: var(--dim); }
.dizin ol { margin-top: 1rem; border-top: 1px solid var(--line); counter-reset: dizin; }
.dizin a {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.6rem;
padding: 0.7rem 0;
font-size: 0.9rem;
line-height: 1.45;
color: var(--dim);
border-bottom: 1px solid var(--line);
transition: color var(--t-micro) var(--ease), padding-left var(--t-micro) var(--ease);
}
.dizin a::before {
counter-increment: dizin;
content: counter(dizin) '.';
color: var(--line-strong);
font-variant-numeric: tabular-nums;
}
.dizin a:hover { color: var(--ink); padding-left: 0.35rem; }
/* Okunmakta olan madde — aria-current'ı app.js'teki IntersectionObserver taşır */
.dizin a[aria-current='true'] { color: var(--ink); font-weight: 500; }
.dizin a[aria-current='true']::before { color: var(--ink); }
@media (max-width: 1080px) {
.dizin { position: static; }
}
/* --- Not kutusu — kısa bilgi satırı ------------------------------------- */
.not-kutu {
display: grid;
grid-template-columns: auto 1fr;
gap: 1rem;
align-items: start;
padding: 1.25rem 1.5rem;
background: var(--gray);
border: 1px solid var(--line);
border-radius: var(--r);
font-size: 0.92rem;
line-height: 1.65;
color: var(--dim);
}
.not-kutu__ic {
flex: none;
width: 34px;
height: 34px;
display: grid;
place-items: center;
border-radius: var(--r-daire);
background: var(--ink);
color: var(--white);
}
.not-kutu__ic svg { width: 16px; height: 16px; }
.not-kutu strong { display: block; font-weight: 500; color: var(--ink); }
.section--gray .not-kutu { background: var(--white); }
@media (max-width: 640px) {
.not-kutu { padding: 1.1rem 1.15rem; gap: 0.85rem; }
}
/* --- Hareket azaltma: global kill-switch --------------------------------- */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.js .reveal { opacity: 1; transform: none; }
/* Katmanlı süreç yığını da sabitlenir */
.steps > div { position: static; box-shadow: none; }
.steps { padding-bottom: 0; }
}