/* ÜRETİLMİŞ DOSYA — elle düzenlenmez.
* Kaynak: src/designs/10-aks-hatti/section.css
*
* Her bildirime `!important` eklendi. Sebep:
* florax teması `.post-entry h2 { font-size: 36px !important }` gibi
* kurallar taşıyor ve `!important` özgüllüğü dinlemiyor. Ayrıntı:
* scripts/gs-important.mjs başlığı ve assets/base.css.
*/
/* ─── `.gs-10-aks-hatti` ─────────────────────────────────────────────────────
*
* Tez: SAYFA BİR TAKİP ÇEKİMİDİR. Dikey kaydırma kamerayı bir holün içinde
* aks aks yürütür; sabit bir okuma hattının önüne gelen aks aydınlanır.
*
* `03`ün ekseni + `06`nın koyu galvaniz paleti; mekanizma yeni. Üç düzlem
* farklı hızda akar (uzak duvar 0,55× · kapak ~0,86× · aks 1,00×) ve odak
* bir zaman çizgisinden değil, her karede AKSIN OKUMA HATTINA UZAKLIĞINDAN
* hesaplanır.
*
* ── TEK BİR ÇERÇEVE SİSTEMİ ──────────────────────────────────────────────
* Sayfada dört yerde görsel var: açılış videosu, hattın altı kapağı, roll
* form fotoğrafı, altı proje kartı. Hepsi AYNI `.ax-cerceve`yi kullanır —
* aynı kenar, aynı köşe kesim işaretleri, aynı damga plakası. Dört ayrı
* gösteri değil, tek bir sistemin dört kullanımı. Ölçü şeridi de header'ın
* alt kenarında bir kez daha görünür: sayfanın ilerlemesi de kumpasla okunur.
*
* ── Ölçülen kontrastlar (zemin #1B1E20 — `06`dan devralındı) ─────────────
* beyaz 16.76:1 ✓✓ · #E6E9EA 13.73:1 ✓✓ · #B9BFC2 9.01:1 ✓
* #8E9599 5.51:1 ✓ · #B40404 2.36:1 ✗ · #C14800 (logo) 3.35:1 ✗
* ⚠️ KIRMIZI metin ya da çizgi OLAMAZ; yalnız dolgu düğme (beyaz üzerinde
* #B40404 → 7.10:1).
* ⚠️ LOGO TURUNCUSU da metin rengi değildir — yalnız logo görseli olarak
* durur (WCAG logotype istisnası; grafik olarak 3:1 eşiğini geçiyor).
* ⚠️ Odak metni SÖNDÜRMEZ, yalnız fotoğrafı. Metne opaklık kontrastı düşürür.
* ⚠️ Video üzerindeki metin ÖLÇÜLDÜ, hesaplanmadı: video BEMBEYAZ bir kareyle
* değiştirilip her metin alanının EN AÇIK pikseli tarandı (en kötü durum).
* etiket 9.53:1 · manşet 5.53:1 (≥24px, büyük metin) · gövde 7.53:1
* alt şerit 9.39:1 — hepsi eşiğinin ÜSTÜNDE (küçük metin AA 4.5 / AAA 7,
* büyük metin AA 3 / AAA 4.5). Gerçek karelerin çoğu bundan çok daha koyu.
*
* ⚠️ `!important` yazılmaz (köprü ekler) · başlangıç gizleme CSS'e yazılmaz.
* ⚠️ Koyu palet YEREL tanımlıdır: Elementor kitinde koyu zemin tokenı yok.
*
* ── VARSAYILAN DURUM JAVASCRIPT'SİZ ÇALIŞIR ──────────────────────────────
* `.ax-etkin` yoksa: hat sıradan bir yatay kaydırma şerididir, video kendi
* `controls` çubuğuyla oynatılır, kesit çizimi son hâlinde (C profil) durur,
* header açılır menüsü `:hover`/`:focus-within` ile çalışır. İçerik eksiksiz.
*/
.gs-10-aks-hatti {
/* Palet — `06-numune-panosu`dan devralındı (kullanıcı isteği). */
--ax-zemin: #1b1e20;
--ax-zemin-rgb: 27 30 32;
--ax-yuzey: #24282a;
--ax-yuzey-ust: #2c3134;
--ax-metin: #e6e9ea;
--ax-ikincil: #b9bfc2;
--ax-silik: #8e9599;
--ax-hat: #363b3e;
--ax-eylem: var(--gs-primary);
--ax-beyaz: var(--gs-white);
--ax-aralik: 0.14em;
/* ── DİKİŞİ OKUYAN TARAF ────────────────────────────────────────────
* Bu bölüm header'ı TANIMAZ. Yalnız `base.css`teki iki NÖTR dikişi okur:
*
* `--gs-ust-h` yapışkan header'ın yüksekliği — yapışkan cam buna göre
* konumlanır. Yapışkan header yoksa 0.
* `--gs-ust-yer` ilk ekranda üstte harcanan TOPLAM yer (header + üstüne
* konan bant). Açılışın `min-height` hesabı içindir.
*
* İkisi de `0rem` varsayılanıyla gelir, yani bu bölüm TEK BAŞINA da doğru
* çalışır: `/d/10-aks-hatti` açılışı tam ekran olur. Değerleri komşu
* seçiciyle üstteki bölümler verir (`12-ust` · `11-duyuru-bandi`).
*
* 🔴 Ö-083'ün kök sebebi bu ikisinin TEK değişkende toplanmasıydı ve M-089
* onları ayırdı; F3.3 aynı ayrımı ortak isimlerle taşıdı. Eski yerel
* `--ax-ust-yer: 10.25rem` (dar ekranda header'ın 164 px'i) ARTIK YOK:
* header o yüksekliği taşımıyor, kendi sözleşmesini kendi bildiriyor. */
/* Bir aksın genişliği. Şerit ile ÖLÇÜ ŞERİDİ bu tek değeri paylaşır —
* ayrışırlarsa kumpas yalan söyler. Okuma hattı da buna göre konur. */
--ax-aks-w: min(86vw, 30rem);
--ax-son-w: min(70vw, 19rem);
/* Galvaniz zemin: iki eğik tarama. Görsel dosya yok. */
background-color: var(--ax-zemin) !important;
background-image:
repeating-linear-gradient(72deg, rgb(255 255 255 / 0.014) 0 2px, rgb(0 0 0 / 0.02) 2px 5px),
repeating-linear-gradient(-18deg, rgb(255 255 255 / 0.01) 0 3px, rgb(0 0 0 / 0.014) 3px 7px) !important;
color: var(--ax-ikincil) !important;
font-family: var(--gs-font) !important;
}
@media (min-width: 768px) {
.gs-10-aks-hatti {
--ax-aks-w: clamp(21rem, 44vw, 28rem);
--ax-son-w: clamp(15rem, 28vw, 20rem);
}
}
@media (min-width: 1025px) {
.gs-10-aks-hatti {
--ax-aks-w: clamp(23rem, 33vw, 28rem);
--ax-son-w: clamp(16rem, 22vw, 21rem);
}
}
.gs-10-aks-hatti .ax-sinir {
max-width: var(--gs-container) !important;
margin-inline: auto !important;
padding-inline: var(--gs-gutter) !important;
}
.gs-10-aks-hatti .ax-etiket {
margin-bottom: 0.75rem !important;
font-size: var(--gs-fs-1) !important;
font-weight: 700 !important;
letter-spacing: var(--ax-aralik) !important;
text-transform: uppercase !important;
color: var(--ax-silik) !important;
}
/* ⚠️ VİDEONUN ÜSTÜNDEKİ ETİKET BİR BASAMAK AÇIK. Sayfanın her yerinde etiket
* `--ax-silik`tir ve düz koyu zeminde 5.19–5.51 verir; açılışta zemin videodur
* ve perde onu ancak bir yere kadar bastırır. Ö-029 yöntemiyle ölçüldü
* (2026-09-01, F2.4 kilidi): `--ax-silik` ile beyaz en kötü karede **4.01–4.49**,
* GERÇEK videonun 10 karesinin 4'ünde de eşiğin altında (en kötü **4.07**) —
* yani kuramsal bir sınır değil, izlenen karede oluyordu.
* `--ax-ikincil` ile aynı ölçüm **6.5–7.6** veriyor ve etiket manşetten
* (`--ax-metin`) hâlâ bir basamak sessiz kalıyor, yani hiyerarşi bozulmuyor.
* ⚠️ Perde her ayarlandığında bu ölçüm TEKRARLANIR (Ö-029). */
.gs-10-aks-hatti .ax-acilis .ax-etiket {
color: var(--ax-ikincil) !important;
}
.gs-10-aks-hatti .ax-h2 {
font-size: var(--gs-fs-6) !important;
font-weight: 700 !important;
line-height: 1.15 !important;
letter-spacing: -0.012em !important;
color: var(--ax-metin) !important;
}
/* Koyu zeminde odak halkası beyaz olmalı — kırmızı görünmez (2.36:1). */
.gs-10-aks-hatti :focus-visible {
outline: 2px solid var(--ax-metin) !important;
outline-offset: 3px !important;
}
/* Sayfadaki tek kırmızı — ve yalnız DOLGU olarak. */
.gs-10-aks-hatti .ax-dugme {
display: inline-flex !important;
align-items: center !important;
gap: 0.7rem !important;
padding: 0.9rem 1.6rem !important;
background: var(--ax-eylem) !important;
color: var(--ax-beyaz) !important;
font-size: var(--gs-fs-4) !important;
font-weight: 700 !important;
white-space: nowrap !important;
transition: transform 0.18s ease !important;
}
.gs-10-aks-hatti .ax-dugme::after {
content: "→" !important;
font-weight: 400 !important;
}
.gs-10-aks-hatti .ax-dugme:hover {
transform: translateX(3px) !important;
}
.gs-10-aks-hatti .ax-dugme-kucuk {
padding: 0.62rem 1.05rem !important;
font-size: var(--gs-fs-3) !important;
}
.gs-10-aks-hatti .ax-bag {
display: inline-block !important;
padding-bottom: 0.15rem !important;
border-bottom: 1px solid var(--ax-hat) !important;
font-size: var(--gs-fs-3) !important;
font-weight: 700 !important;
letter-spacing: 0.04em !important;
color: var(--ax-metin) !important;
}
.gs-10-aks-hatti .ax-bag:hover {
border-bottom-color: var(--ax-metin) !important;
}
.gs-10-aks-hatti .ax-ipucu {
margin-top: 1.25rem !important;
font-size: var(--gs-fs-1) !important;
font-weight: 700 !important;
letter-spacing: var(--ax-aralik) !important;
text-transform: uppercase !important;
color: var(--ax-metin) !important;
}
/* ── ÇERÇEVE — sayfadaki TEK açıklık biçimi ────────────────────────────────
* Açılış videosu, hattın altı kapağı, roll form fotoğrafı ve altı proje
* kartı AYNI çerçeveyi kullanır. */
.gs-10-aks-hatti .ax-cerceve {
position: relative !important;
display: block !important;
overflow: hidden !important;
background: var(--ax-yuzey) !important;
border: 1px solid var(--ax-hat) !important;
border-top-color: rgb(255 255 255 / 0.09) !important;
transition: border-top-color 0.35s ease !important;
}
/* Köşe işaretleri — teknik çizimin kesim işareti. */
.gs-10-aks-hatti .ax-cerceve::before,
.gs-10-aks-hatti .ax-cerceve::after {
content: "" !important;
position: absolute !important;
z-index: 2 !important;
width: 1.25rem !important;
height: 1.25rem !important;
pointer-events: none !important;
}
.gs-10-aks-hatti .ax-cerceve::before {
inset-block-start: 0.55rem !important;
inset-inline-end: 0.55rem !important;
border-top: 1px solid rgb(255 255 255 / 0.34) !important;
border-right: 1px solid rgb(255 255 255 / 0.34) !important;
}
.gs-10-aks-hatti .ax-cerceve::after {
inset-block-end: 0.55rem !important;
inset-inline-start: 0.55rem !important;
border-bottom: 1px solid rgb(255 255 255 / 0.34) !important;
border-left: 1px solid rgb(255 255 255 / 0.34) !important;
}
/* Damga — çerçeveye perçinlenmiş plaka. Zemini KATI: fotoğrafın üstünde
* durduğu için kontrastı ölçülebilir olmalı (metin 13.73:1). */
.gs-10-aks-hatti .ax-damga {
position: absolute !important;
z-index: 2 !important;
inset-block-start: 0 !important;
inset-inline-start: 0 !important;
display: flex !important;
align-items: baseline !important;
gap: 0.4rem !important;
padding: 0.42rem 0.7rem !important;
background: var(--ax-zemin) !important;
border-inline-end: 1px solid var(--ax-hat) !important;
border-block-end: 1px solid var(--ax-hat) !important;
font-size: var(--gs-fs-1) !important;
font-weight: 800 !important;
letter-spacing: var(--ax-aralik) !important;
text-transform: uppercase !important;
color: var(--ax-silik) !important;
font-variant-numeric: tabular-nums !important;
}
.gs-10-aks-hatti .ax-damga-no {
font-size: var(--gs-fs-2) !important;
color: var(--ax-metin) !important;
}
/* Açılışta damga bir çerçevenin içinde değil, sayfanın kendi akışında. */
.gs-10-aks-hatti .ax-damga-duz {
position: static !important;
border: 1px solid var(--ax-hat) !important;
}
/* Perde — fotoğrafın üstüne inen gölge.
*
* 🔴 ÖLÇÜLDÜ — BURAYA `opacity` YAZILAMAZ. Köprü (`gs-important`) her
* bildirime `!important` ekler ve bunu hem WordPress'e hem laboratuvara
* uygular; `!important` satır içi stili yener, yani `motion.ts`'in her karede
* yazdığı `style.opacity` sessizce ÖLÜR (ölçüldü: satır içi 0.679,
* hesaplanan 0.14). Kural: hareketin her karede yazdığı özellik burada
* TANIMLANMAZ; JS'siz varsayılan gradyanın kendi alfasından gelir. */
.gs-10-aks-hatti .ax-perde {
position: absolute !important;
z-index: 1 !important;
inset: 0 !important;
background: linear-gradient(
176deg,
rgb(var(--ax-zemin-rgb) / 0.08),
rgb(var(--ax-zemin-rgb) / 0.2)
) !important;
pointer-events: none !important;
}
/* ── AÇILIŞ — tam ekran arka plan videosu ────────────────────────────────── */
.gs-10-aks-hatti .ax-acilis {
position: relative !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-end !important;
min-height: calc(100svh - var(--gs-ust-yer)) !important;
/* ⚠️ DAR EKRANIN kendi ritmi. Buradaki değerler ≥768'de bugünkü hâline
* geri açılır (aşağıdaki kırılım) — yani masaüstü kompozisyonu KAYMAZ.
* Sıkışma yalnız telefon boyunda uygulanır çünkü sorun oradadır: 375×667'de
* üst dolgu tek başına 80 px yiyordu ve açılışın alt şeridini kadraj
* dışına itiyordu (Ö-083 · F2.5.4). */
padding-block: clamp(1.5rem, 4.5vh, 3.5rem) clamp(0.85rem, 2vh, 1.5rem) !important;
overflow: hidden !important;
}
.gs-10-aks-hatti .ax-sahne {
position: absolute !important;
z-index: 0 !important;
inset: 0 !important;
}
.gs-10-aks-hatti .ax-video {
display: block !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: 50% 50% !important;
background: var(--ax-zemin) !important;
}
/* Perde — metnin okunurluğunu GARANTİ eder, atmosfer için değil.
*
* ⚠️ Bu değerler HESAPLANMADI, ÖLÇÜLDÜ. Üst üste binen üç katmanın bir
* noktadaki etkin opaklığını kâğıt üstünde kestirmek işe yaramadı: 100deg'lik
* gradyanın çizgisi kutunun köşegenine göre uzuyor ve tahmin 40 birime kadar
* saptı. Doğru yol: video yerine BEMBEYAZ bir yüzey koyup ekran görüntüsünün
* piksellerini taramak. Perde ayarlanırken o ölçüm yeniden yapılmalı —
* dosyanın başındaki sayılar oradan geliyor. */
.gs-10-aks-hatti .ax-sahne-perde {
position: absolute !important;
inset: 0 !important;
background:
linear-gradient(
100deg,
rgb(var(--ax-zemin-rgb) / 0.86) 0%,
rgb(var(--ax-zemin-rgb) / 0.78) 30%,
rgb(var(--ax-zemin-rgb) / 0.5) 56%,
rgb(var(--ax-zemin-rgb) / 0.12) 86%
),
linear-gradient(
180deg,
rgb(var(--ax-zemin-rgb) / 0.45) 0%,
rgb(var(--ax-zemin-rgb) / 0.1) 32%,
rgb(var(--ax-zemin-rgb) / 0.62) 78%,
rgb(var(--ax-zemin-rgb) / 0.93) 100%
),
rgb(var(--ax-zemin-rgb) / 0.24) !important;
pointer-events: none !important;
}
.gs-10-aks-hatti .ax-acilis-ic {
position: relative !important;
z-index: 1 !important;
width: 100% !important;
margin-top: auto !important;
}
.gs-10-aks-hatti .ax-baslik {
max-width: 15ch !important;
font-size: var(--gs-fs-7) !important;
font-weight: 800 !important;
line-height: 1.02 !important;
letter-spacing: -0.028em !important;
color: var(--ax-metin) !important;
}
/* Hareket kelimeleri çalışma anında sarmalar; CSS yalnız kutuyu verir. */
.gs-10-aks-hatti .ax-soz {
display: inline-block !important;
white-space: pre !important;
}
.gs-10-aks-hatti .ax-giris {
max-width: 48ch !important;
margin-top: 1.5rem !important;
font-size: var(--gs-fs-4) !important;
line-height: 1.65 !important;
color: var(--ax-metin) !important;
}
.gs-10-aks-hatti .ax-acilis-eylem {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 1rem !important;
margin-top: 2rem !important;
}
/* JS yokken gizli: videonun kendi `controls` çubuğu iş görür. */
.gs-10-aks-hatti .ax-video-dur {
display: none !important;
}
.gs-10-aks-hatti.ax-etkin .ax-video-dur {
display: inline-flex !important;
align-items: center !important;
gap: 0.5rem !important;
padding: 0.62rem 1.05rem !important;
background: rgb(var(--ax-zemin-rgb) / 0.8) !important;
border: 1px solid var(--ax-hat) !important;
color: var(--ax-metin) !important;
font-size: var(--gs-fs-1) !important;
font-weight: 700 !important;
letter-spacing: var(--ax-aralik) !important;
text-transform: uppercase !important;
cursor: pointer !important;
}
.gs-10-aks-hatti .ax-video-dur[data-durum="durdu"] .ax-video-dur-durdur,
.gs-10-aks-hatti .ax-video-dur[data-durum="oynuyor"] .ax-video-dur-oynat {
display: none !important;
}
/* ── DEFTER — açılışın sağ sütunu (F9.2) ──────────────────────────────────
*
* Açılışın içi bir IZGARA. Dar ekranda tek sütun ve DOM sırası: metin → alt
* şerit → defter — defter ilk ekranın ALTINDA başlar, 375×667'de ölçülerek
* oturtulmuş ilk ekran (Ö-083 · K-135) yerinden oynamaz. ≥1025'te defter sağ
* sütuna çıkar (aşağıdaki kırılım).
*
* ⚠️ `opacity`/`transform` BURADA YOK: hareket defterin girişini satır içi
* yazıyor (Ö-023). Dolgunun `transform`u da öyle.
* ⚠️ Metin yalnız `--ax-metin` / `--ax-ikincil`. Zemin yarı saydam ve arkası
* video — `--ax-silik` en kötü karede eşik altına düşer (Ö-029 yöntemiyle
* ölçülür, hesaplanmaz). */
.gs-10-aks-hatti .ax-acilis-ic {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
}
.gs-10-aks-hatti .ax-defter {
margin-top: var(--gs-bo-5) !important;
padding: var(--gs-bo-4) var(--gs-bo-4) var(--gs-bo-3) !important;
background: rgb(var(--ax-zemin-rgb) / 0.86) !important;
border: 1px solid var(--ax-hat) !important;
}
.gs-10-aks-hatti .ax-defter-bas {
/* Düğmenin kenarı. Satır bu yüksekliği JS'siz de TAŞIR: düğme `init`te
* belirince satır 18 px büyüyor ve açılışı her yüklemede kaydırıyordu
* (1440'ta CLS 0.008, M-275). Yer baştan ayrılır, kayma olmaz. */
--ax-dur-kenar: 2.25rem;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: var(--gs-bo-3) !important;
/* `content-box`: taban `border-box` — alt dolgu ve çizgi pay yemesin. */
box-sizing: content-box !important;
min-height: var(--ax-dur-kenar) !important;
padding-bottom: var(--gs-bo-3) !important;
border-bottom: 1px solid var(--ax-hat) !important;
}
.gs-10-aks-hatti .ax-defter-baslik {
font-size: var(--gs-fs-1) !important;
font-weight: 700 !important;
letter-spacing: var(--ax-aralik) !important;
text-transform: uppercase !important;
color: var(--ax-ikincil) !important;
}
/* JS yokken döngü de yok → düğme de yok. Düğme kendi kutusunu yazar (Ö-118). */
.gs-10-aks-hatti .ax-defter-dur {
display: none !important;
}
.gs-10-aks-hatti .ax-defter-canli .ax-defter-dur {
display: inline-flex !important;
flex-shrink: 0 !important;
align-items: center !important;
justify-content: center !important;
width: var(--ax-dur-kenar) !important;
height: var(--ax-dur-kenar) !important;
padding: 0 !important;
background: transparent !important;
/* Sınır 3:1 ister (WCAG 1.4.11) — `--ax-hat` değil, `.ax-vitrin-ok` gibi. */
border: 1px solid var(--ax-silik) !important;
border-radius: 0 !important;
color: var(--ax-ikincil) !important;
cursor: pointer !important;
transition: border-color 0.25s ease, color 0.25s ease !important;
}
.gs-10-aks-hatti .ax-defter-dur:hover {
border-color: var(--ax-metin) !important;
color: var(--ax-metin) !important;
}
.gs-10-aks-hatti .ax-defter-dur svg {
width: 1rem !important;
height: 1rem !important;
}
.gs-10-aks-hatti .ax-defter-dur[data-durum="oynuyor"] .ax-defter-dur-oynat,
.gs-10-aks-hatti .ax-defter-dur[data-durum="durdu"] .ax-defter-dur-durdur {
display: none !important;
}
.gs-10-aks-hatti .ax-defter-gizli {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
clip-path: inset(50%) !important;
white-space: nowrap !important;
}
.gs-10-aks-hatti .ax-defter-oge + .ax-defter-oge {
border-top: 1px solid var(--ax-hat) !important;
}
.gs-10-aks-hatti .ax-defter-bag {
position: relative !important;
display: grid !important;
grid-template-columns: auto minmax(0, 1fr) !important;
column-gap: var(--gs-bo-3) !important;
min-height: var(--gs-hedef) !important;
padding: var(--gs-bo-3) 0 var(--gs-bo-3) var(--gs-bo-4) !important;
color: var(--ax-metin) !important;
}
/* İlerleme hattı yalnız döngü varken görünür. */
.gs-10-aks-hatti .ax-defter-hat {
display: none !important;
}
.gs-10-aks-hatti .ax-defter-canli .ax-defter-hat {
position: absolute !important;
top: var(--gs-bo-3) !important;
bottom: var(--gs-bo-3) !important;
left: 0 !important;
display: block !important;
width: 2px !important;
overflow: hidden !important;
background: var(--ax-hat) !important;
}
.gs-10-aks-hatti .ax-defter-dolgu {
display: block !important;
width: 100% !important;
height: 100% !important;
background: var(--ax-metin) !important;
transform-origin: 50% 0 !important;
}
.gs-10-aks-hatti .ax-defter-no {
padding-top: 0.2em !important;
font-size: var(--gs-fs-2) !important;
font-weight: 700 !important;
font-variant-numeric: tabular-nums !important;
color: var(--ax-ikincil) !important;
}
.gs-10-aks-hatti .ax-defter-ad {
display: block !important;
font-size: var(--gs-fs-4) !important;
font-weight: 700 !important;
line-height: 1.35 !important;
color: var(--ax-metin) !important;
transition: color 0.3s ease !important;
}
.gs-10-aks-hatti .ax-defter-bag:hover .ax-defter-ad {
text-decoration: underline !important;
text-decoration-thickness: 1px !important;
text-underline-offset: 0.2em !important;
}
/* Etkin olmayan satır SÖNMEZ (opaklık kontrastı düşürür), bir basamak
* ikincil renge iner — iki renk de ölçülmüş eşiğin üstünde. */
.gs-10-aks-hatti .ax-defter-canli .ax-defter-oge:not(.ax-defter-etkin) .ax-defter-ad {
color: var(--ax-ikincil) !important;
}
.gs-10-aks-hatti .ax-defter-meta {
display: flex !important;
flex-wrap: wrap !important;
align-items: baseline !important;
gap: var(--gs-bo-1) var(--gs-bo-2) !important;
margin-top: var(--gs-bo-1) !important;
font-size: var(--gs-fs-2) !important;
font-variant-numeric: tabular-nums !important;
color: var(--ax-ikincil) !important;
}
/* Konu isteğe bağlı: boşsa ayraçla birlikte düşer (Ö-066 deseni). */
.gs-10-aks-hatti .ax-defter-konu:empty {
display: none !important;
}
.gs-10-aks-hatti .ax-defter-konu::after {
content: "·" !important;
margin-left: var(--gs-bo-2) !important;
}
.gs-10-aks-hatti .ax-defter-bos {
padding-block: var(--gs-bo-3) !important;
font-size: var(--gs-fs-3) !important;
color: var(--ax-ikincil) !important;
}
.gs-10-aks-hatti .ax-defter-tum {
margin-top: var(--gs-bo-2) !important;
}
.gs-10-aks-hatti .ax-acilis-alt {
position: relative !important;
z-index: 1 !important;
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: space-between !important;
gap: 0.75rem 1.5rem !important;
width: 100% !important;
margin-top: clamp(0.9rem, 2.6vh, 4rem) !important;
padding-top: 1rem !important;
border-top: 1px solid var(--gs-darkdivider) !important;
}
.gs-10-aks-hatti .ax-kaydir {
display: flex !important;
align-items: center !important;
gap: 0.6rem !important;
font-size: var(--gs-fs-1) !important;
font-weight: 700 !important;
letter-spacing: var(--ax-aralik) !important;
text-transform: uppercase !important;
color: var(--ax-metin) !important;
}
.gs-10-aks-hatti .ax-kaydir::after {
content: "↓" !important;
font-weight: 400 !important;
}
/* ── HAT — sayfanın tek gösterisi ────────────────────────────────────────── */
.gs-10-aks-hatti .ax-hat {
border-top: 1px solid var(--ax-hat) !important;
padding-top: clamp(2.5rem, 6vw, 4rem) !important;
}
/* ⚠️ Buraya `max-width` YAZMA: `.ax-sinir` zaten `margin-inline: auto`
* veriyor, daha dar bir max-width onu SAYFANIN ORTASINA kaydırır ve blok
* açılışın sol kenarıyla hizasını kaybeder (ölçüldü: 104px → 390px).
* Ölçü sınırı metnin KENDİSİNE konur. */
.gs-10-aks-hatti .ax-hat-bas {
margin-bottom: clamp(1.75rem, 4vw, 2.5rem) !important;
}
.gs-10-aks-hatti .ax-hat-giris {
max-width: 62ch !important;
margin-top: 1rem !important;
font-size: var(--gs-fs-4) !important;
line-height: 1.7 !important;
}
/* Varsayılan: JavaScript'siz yatay kaydırma şeridi. */
.gs-10-aks-hatti .ax-cam {
position: relative !important;
overflow-x: auto !important;
scroll-snap-type: x mandatory !important;
scrollbar-width: thin !important;
scrollbar-color: var(--ax-hat) transparent !important;
border-block: 1px solid var(--ax-hat) !important;
}
.gs-10-aks-hatti .ax-serit {
display: flex !important;
width: max-content !important;
}
.gs-10-aks-hatti .ax-aks {
display: flex !important;
flex: 0 0 var(--ax-aks-w) !important;
flex-direction: column !important;
scroll-snap-align: start !important;
padding: clamp(1.25rem, 2.6vw, 2rem) !important;
border-inline-end: 1px solid var(--ax-hat) !important;
}
.gs-10-aks-hatti .ax-kare {
margin: 0 !important;
}
.gs-10-aks-hatti .ax-kare .ax-cerceve {
aspect-ratio: 4 / 3 !important;
}
.gs-10-aks-hatti .ax-kare-gorsel {
position: absolute !important;
inset-block: 0 !important;
inset-inline-start: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: 50% 48% !important;
}
.gs-10-aks-hatti .ax-aks-govde {
margin-top: clamp(1rem, 1.8vw, 1.4rem) !important;
}
.gs-10-aks-hatti .ax-aks-ad {
font-size: var(--gs-fs-5) !important;
font-weight: 700 !important;
line-height: 1.15 !important;
letter-spacing: -0.015em !important;
color: var(--ax-metin) !important;
}
.gs-10-aks-hatti .ax-aks-metin {
max-width: 42ch !important;
margin-top: 0.7rem !important;
font-size: var(--gs-fs-4) !important;
line-height: 1.6 !important;
color: var(--ax-ikincil) !important;
}
.gs-10-aks-hatti .ax-aks-govde .ax-bag {
margin-top: 1rem !important;
}
/* Hattın sonu — hem kompozisyon hem mekanik: son öğenin okuma hattına
* gelebilmesi için şeridin arkasında bir boy daha yol gerekiyor. */
.gs-10-aks-hatti .ax-son {
flex-basis: var(--ax-son-w) !important;
justify-content: flex-end !important;
border-inline-end: 0 !important;
}
/* Ölçü çizgisinin SONLANDIRMA işareti. */
.gs-10-aks-hatti .ax-son-isaret {
position: relative !important;
display: block !important;
width: 100% !important;
height: 1px !important;
margin-block: auto 1.35rem !important;
background: linear-gradient(90deg, var(--ax-metin) 0 2.5rem, var(--ax-hat) 2.5rem 100%) !important;
}
.gs-10-aks-hatti .ax-son-isaret::before {
content: "" !important;
position: absolute !important;
inset-block-start: -0.45rem !important;
inset-inline-start: 0 !important;
width: 1px !important;
height: 0.9rem !important;
background: var(--ax-metin) !important;
}
/* Kapanış cümlesi, altı aksın başlıklarıyla AYNI ölçekte: yedi panelin de
* metni aynı taban çizgisinde ve aynı boyda durur. */
.gs-10-aks-hatti .ax-son-metin {
max-width: 26ch !important;
font-size: var(--gs-fs-5) !important;
font-weight: 700 !important;
line-height: 1.3 !important;
letter-spacing: -0.012em !important;
color: var(--ax-metin) !important;
}
.gs-10-aks-hatti .ax-son-govde .ax-dugme {
margin-top: 1.25rem !important;
}
.gs-10-aks-hatti .ax-olcu,
.gs-10-aks-hatti .ax-hatti,
.gs-10-aks-hatti .ax-duvar {
display: none !important;
}
/* ── HAREKET ETKİN: kamera hat boyunca ilerler ───────────────────────────── */
.gs-10-aks-hatti.ax-etkin .ax-ray {
position: relative !important;
}
.gs-10-aks-hatti.ax-etkin .ax-cam {
position: sticky !important;
top: var(--gs-ust-h) !important;
display: flex !important;
align-items: stretch !important;
height: calc(100svh - var(--gs-ust-h)) !important;
min-height: 30rem !important;
overflow: hidden !important;
}
.gs-10-aks-hatti.ax-etkin .ax-serit {
position: relative !important;
z-index: 1 !important;
height: 100% !important;
will-change: transform !important;
}
/* Uzak duvar — holün öbür ucu. 0,55× akar: yakın olan hızlı geçer, uzak olan
* oyalanır. Derinlik burada başlar. */
.gs-10-aks-hatti.ax-etkin .ax-duvar {
position: absolute !important;
z-index: 0 !important;
inset-block: 0 !important;
inset-inline-start: 0 !important;
display: block !important;
background-image:
repeating-linear-gradient(90deg, rgb(255 255 255 / 0.045) 0 1px, transparent 1px, transparent 7.5rem),
linear-gradient(180deg, transparent 0 58%, rgb(255 255 255 / 0.022) 58% 100%) !important;
will-change: transform !important;
pointer-events: none !important;
}
.gs-10-aks-hatti.ax-etkin .ax-aks {
height: 100% !important;
padding-block: clamp(2.5rem, 7vh, 4.5rem) clamp(5.5rem, 11vh, 7rem) !important;
}
/* Kapak artık sabit oranlı değil: çerçeve kalan yüksekliği doldurur, fotoğraf
* da çerçeveden GENİŞTİR — böylece karşı-öteleme için pay kalır. */
.gs-10-aks-hatti.ax-etkin .ax-kare {
flex: 1 1 auto !important;
min-height: 0 !important;
}
.gs-10-aks-hatti.ax-etkin .ax-kare .ax-cerceve {
height: 100% !important;
aspect-ratio: auto !important;
}
.gs-10-aks-hatti.ax-etkin .ax-kare-gorsel {
width: 126% !important;
inset-inline-start: -13% !important;
will-change: transform !important;
}
/* Hareket varken perde tam gücündedir; ne kadarının görüneceğini `motion.ts`
* `opacity` ile söyler. Yalnız HATTIN kapakları — roll form fotoğrafı ve
* proje kartları kendi sabit perdelerinde kalır. */
.gs-10-aks-hatti.ax-etkin .ax-aks .ax-perde {
background: linear-gradient(
176deg,
rgb(var(--ax-zemin-rgb) / 0.72),
rgb(var(--ax-zemin-rgb) / 0.94)
) !important;
}
/* 🔴 Gövde SABİT YÜKSEKLİKTE. Serbest bırakılınca metin uzunluğu her aksta
* farklı olduğu için çerçeveler farklı kotta bitiyor ve başlıklar hizasını
* kaybediyordu (ölçüldü: 24 px kayma). Bir holde açıklıklar aynı kotta biter.
* Taşan bir gövde alttaki boşluğa sarkar — ölçü şeridine değmez. */
.gs-10-aks-hatti.ax-etkin .ax-aks-govde {
flex: 0 0 13rem !important;
}
/* Okuma hattına gelen aks: yakın kenarı ışık alır. Bu sınıf HER KAREDE değil,
* yalnız eşik geçildiğinde değişir — boya maliyeti orada kalsın. */
.gs-10-aks-hatti.ax-etkin .ax-odakta .ax-cerceve {
border-top-color: rgb(255 255 255 / 0.32) !important;
}
.gs-10-aks-hatti.ax-etkin .ax-odakta .ax-damga-no {
color: var(--ax-beyaz) !important;
}
.gs-10-aks-hatti.ax-etkin .ax-son {
padding-block-end: clamp(6rem, 12vh, 8rem) !important;
/* Duvarın yüzü: üstten gelen ışık. Zeminle birebir aynı kalırsa boşluk
* "bitmemiş" okunuyordu; bu gradyan onu bir DUVAR yapıyor. */
background: linear-gradient(180deg, rgb(255 255 255 / 0.03), transparent 62%) !important;
}
/* 🔴 GEOMETRİ — kompozisyon değil, MATEMATİK. Hareket varken şerit, son
* öğenin SOL KENARI okuma hattına gelene kadar sürer. O anda hattın sağında
* `camW − hatX` kadar yer kalır; kapanış paneli TAM O GENİŞLİKTE olmazsa
* orada boş bir koridor açılır (ölçüldü: 1440'ta 650–1050 px). Bu yüzden
* panel bir kart değil, holün KAPANIŞ DUVARIDIR. */
.gs-10-aks-hatti.ax-etkin {
--ax-son-w: calc(100vw - var(--ax-aks-w) * 0.5);
}
.gs-10-aks-hatti.ax-etkin .ax-son-govde {
max-width: 34ch !important;
}
/* ── ÖLÇÜ ŞERİDİ — ilerleme çubuğu değil, KUMPAS ────────────────────────── */
.gs-10-aks-hatti.ax-etkin .ax-olcu {
position: absolute !important;
z-index: 2 !important;
inset-inline: 0 !important;
inset-block-end: 0 !important;
display: block !important;
height: 3.5rem !important;
overflow: hidden !important;
border-top: 1px solid var(--ax-hat) !important;
background: rgb(var(--ax-zemin-rgb) / 0.94) !important;
pointer-events: none !important;
}
.gs-10-aks-hatti.ax-etkin .ax-olcu-serit {
position: relative !important;
display: flex !important;
width: max-content !important;
height: 100% !important;
will-change: transform !important;
}
.gs-10-aks-hatti.ax-etkin .ax-olcu-bolme {
position: relative !important;
flex: 0 0 var(--ax-aks-w) !important;
/* ⚠️ Aralık YÜZDE OLAMAZ: yüzde bölmenin kendi genişliğine göre ölçülür
* ve kapanış duvarının bölmesi çok daha geniş olduğu için çentikler orada
* üç kat seyrekleşir (ölçüldü). Kumpasın bölüntüsü her yerde AYNI. */
background-image: repeating-linear-gradient(
90deg,
var(--ax-hat) 0 1px,
transparent 1px,
transparent calc(var(--ax-aks-w) / 8)
) !important;
background-repeat: no-repeat !important;
background-position: 0 100% !important;
background-size: 100% 0.6rem !important;
}
.gs-10-aks-hatti.ax-etkin .ax-olcu-bolme-son {
flex-basis: var(--ax-son-w) !important;
}
.gs-10-aks-hatti.ax-etkin .ax-olcu-bolme::before {
content: "" !important;
position: absolute !important;
inset-block-end: 0 !important;
inset-inline-start: 50% !important;
width: 1px !important;
height: 1.6rem !important;
background: var(--ax-metin) !important;
opacity: 0.5 !important;
}
.gs-10-aks-hatti.ax-etkin .ax-olcu-bolme-son::before {
display: none !important;
}
.gs-10-aks-hatti.ax-etkin .ax-olcu-damga {
position: absolute !important;
inset-block-end: 1.85rem !important;
inset-inline-start: calc(50% + 0.5rem) !important;
font-size: var(--gs-fs-1) !important;
font-weight: 800 !important;
letter-spacing: var(--ax-aralik) !important;
color: var(--ax-silik) !important;
font-variant-numeric: tabular-nums !important;
}
/* ── OKUMA HATTI — odak da ölçü de bu TEK çizgide okunur ─────────────────── */
.gs-10-aks-hatti.ax-etkin .ax-hatti {
position: absolute !important;
z-index: 3 !important;
inset-block: 0 !important;
inset-inline-start: calc(var(--ax-aks-w) * 0.5) !important;
display: block !important;
width: 1px !important;
background: linear-gradient(
180deg,
rgb(255 255 255 / 0) 0,
rgb(255 255 255 / 0.24) 9%,
rgb(255 255 255 / 0.24) 100%
) !important;
pointer-events: none !important;
}
.gs-10-aks-hatti.ax-etkin .ax-hatti-okuma {
position: absolute !important;
inset-block-start: 0 !important;
inset-inline-start: 0 !important;
display: flex !important;
align-items: baseline !important;
gap: 0.4rem !important;
padding: 0.42rem 0.7rem !important;
background: var(--ax-zemin) !important;
border: 1px solid var(--ax-hat) !important;
border-top: 0 !important;
font-size: var(--gs-fs-1) !important;
font-weight: 800 !important;
letter-spacing: var(--ax-aralik) !important;
color: var(--ax-silik) !important;
font-variant-numeric: tabular-nums !important;
white-space: nowrap !important;
transform: translateX(-50%) !important;
}
.gs-10-aks-hatti.ax-etkin .ax-hatti-no {
font-size: var(--gs-fs-2) !important;
color: var(--ax-metin) !important;
}
/* ── C PROFİL ─────────────────────────────────────────────────────────────
* Sessiz bölüm: giriş animasyonu YOK. Tek hareket kesit çiziminin bükülmesi
* ve o da kaydırmaya bağlı, kendi başına oynamıyor. */
.gs-10-aks-hatti .ax-urun {
padding-block: clamp(2.5rem, 6vw, 4.5rem) !important;
}
.gs-10-aks-hatti .ax-urun-bas {
margin-bottom: clamp(1.75rem, 4vw, 2.75rem) !important;
}
.gs-10-aks-hatti .ax-urun-giris {
max-width: 62ch !important;
margin-top: 1rem !important;
font-size: var(--gs-fs-4) !important;
line-height: 1.7 !important;
}
.gs-10-aks-hatti .ax-urun-govde {
display: grid !important;
gap: clamp(1.5rem, 3vw, 2.5rem) !important;
margin-bottom: clamp(1.5rem, 3vw, 2.5rem) !important;
}
.gs-10-aks-hatti .ax-roll {
margin: 0 !important;
}
.gs-10-aks-hatti .ax-roll .ax-cerceve {
aspect-ratio: 1023 / 595 !important;
}
.gs-10-aks-hatti .ax-roll-gorsel {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
.gs-10-aks-hatti .ax-roll-alt {
display: flex !important;
flex-wrap: wrap !important;
align-items: baseline !important;
gap: 0.3rem 1rem !important;
margin-top: 0.75rem !important;
font-size: var(--gs-fs-1) !important;
letter-spacing: 0.06em !important;
}
.gs-10-aks-hatti .ax-roll-ad {
font-weight: 700 !important;
color: var(--ax-metin) !important;
}
.gs-10-aks-hatti .ax-roll-not {
color: var(--ax-silik) !important;
}
.gs-10-aks-hatti .ax-kesit {
display: flex !important;
flex-direction: column !important;
padding: clamp(1.25rem, 2.4vw, 1.85rem) !important;
background: var(--ax-yuzey) !important;
border: 1px solid var(--ax-hat) !important;
border-top-color: rgb(255 255 255 / 0.09) !important;
}
.gs-10-aks-hatti .ax-kesit-ad {
font-size: var(--gs-fs-5) !important;
font-weight: 700 !important;
line-height: 1.2 !important;
letter-spacing: -0.012em !important;
color: var(--ax-metin) !important;
}
/* Çizim kâğıdı: sabit bir milimetrik zemin. Çizim onun üstünde bükülür —
* hareketin neye göre olduğu görünsün diye referans duruyor. */
.gs-10-aks-hatti .ax-kesit-cizim {
display: block !important;
width: 100% !important;
height: auto !important;
margin-block: 1.35rem !important;
background-image:
repeating-linear-gradient(90deg, rgb(255 255 255 / 0.05) 0 1px, transparent 1px, transparent 1.5rem),
repeating-linear-gradient(0deg, rgb(255 255 255 / 0.05) 0 1px, transparent 1px, transparent 1.5rem) !important;
background-position: center !important;
}
.gs-10-aks-hatti .ax-kesit-yol {
stroke: var(--ax-metin) !important;
}
/* Oval delik — sac DÜZKEN deliniyor, sonra bükülüyor. Çizim de öyle:
* delik şeritle birlikte yer değiştirir. */
.gs-10-aks-hatti .ax-kesit-delik {
fill: var(--ax-zemin) !important;
stroke: var(--ax-silik) !important;
stroke-width: 2 !important;
}
.gs-10-aks-hatti .ax-kesit-adim {
display: flex !important;
flex-wrap: wrap !important;
gap: 0.5rem 1.25rem !important;
margin-top: auto !important;
padding-top: 1rem !important;
border-top: 1px solid var(--ax-hat) !important;
}
.gs-10-aks-hatti .ax-kesit-adim-oge {
display: flex !important;
align-items: baseline !important;
gap: 0.45rem !important;
font-size: var(--gs-fs-2) !important;
font-weight: 700 !important;
letter-spacing: 0.04em !important;
color: var(--ax-silik) !important;
transition: color 0.3s ease !important;
}
.gs-10-aks-hatti .ax-kesit-adim-no {
font-size: var(--gs-fs-1) !important;
font-weight: 800 !important;
letter-spacing: var(--ax-aralik) !important;
font-variant-numeric: tabular-nums !important;
}
/* Bükülme ilerledikçe adım yanar — sınıfı `motion.ts` eşik geçişinde koyar. */
.gs-10-aks-hatti .ax-kesit-adim-oge.ax-adim-etkin {
color: var(--ax-metin) !important;
}
.gs-10-aks-hatti .ax-kesit-ipucu {
margin-top: 0.9rem !important;
}
/* JS yoksa "kaydırdıkça bükülür" ipucu YALAN olur — yalnız hareket varken. */
.gs-10-aks-hatti .ax-kesit-ipucu {
display: none !important;
}
.gs-10-aks-hatti.ax-etkin .ax-kesit-ipucu {
display: block !important;
}
/* ── ÖLÇÜ BENTO'SU (F9.3) ─────────────────────────────────────────────────
*
* Eski şeridin çizgi dili korunur: 1px aralık `--ax-hat` zemin üzerinde kılcal
* çizgi çizer. Yerleşim üç kırılımda:
* <768 2 sütun — malzeme, ölçüler, kaplama, kullanım tam genişlik
* 768…1024 6 sütun — malzeme 3 · ölçüler 3 / 2 · 2 · 2 / kullanım 6
* ≥1025 6 sütun — malzeme 3×2 satır (bento), sağda ölçüler 3 ·
* kalınlık 1 + delik 2, altta kaplama 3 · kullanım 3
* 768'de 1 sütunluk kutu ~77 px içerik taşır — "KALINLIĞI" oraya sığmaz; bento
* bu yüzden 1025'te açılır. */
.gs-10-aks-hatti .ax-bento {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 1px !important;
background: var(--ax-hat) !important;
border: 1px solid var(--ax-hat) !important;
}
.gs-10-aks-hatti .ax-bento-kutu {
display: flex !important;
flex-direction: column !important;
gap: var(--gs-bo-2) !important;
min-width: 0 !important;
padding: var(--gs-bo-4) 1.1rem !important;
background: var(--ax-yuzey) !important;
}
.gs-10-aks-hatti .ax-bento-malzeme,
.gs-10-aks-hatti .ax-bento-olculer,
.gs-10-aks-hatti .ax-bento-kaplama,
.gs-10-aks-hatti .ax-bento-kullanim {
grid-column: 1 / -1 !important;
}
.gs-10-aks-hatti .ax-bento-kutu dt {
font-size: var(--gs-fs-1) !important;
font-weight: 700 !important;
letter-spacing: var(--ax-aralik) !important;
text-transform: uppercase !important;
color: var(--ax-silik) !important;
}
.gs-10-aks-hatti .ax-bento-kutu dd {
font-size: var(--gs-fs-4) !important;
font-weight: 700 !important;
color: var(--ax-metin) !important;
font-variant-numeric: tabular-nums !important;
}
/* Malzeme — bento'nun TEK kırmızısı, yalnız DOLGU. Beyaz / #B40404 = 7.10:1;
* tarama beyazın %14'ü ve sağ üst köşede maskelenir, en kötü piksel ölçülür. */
.gs-10-aks-hatti .ax-bento-malzeme {
position: relative !important;
justify-content: space-between !important;
min-height: 9rem !important;
overflow: hidden !important;
background: var(--ax-eylem) !important;
}
.gs-10-aks-hatti .ax-bento-malzeme::before {
content: "" !important;
position: absolute !important;
inset: 0 !important;
background: repeating-linear-gradient(
45deg,
color-mix(in srgb, var(--ax-beyaz) 14%, transparent) 0 1px,
transparent 1px 10px
) !important;
mask-image: radial-gradient(ellipse 80% 60% at 100% 0%, var(--ax-zemin) 40%, transparent 75%) !important;
pointer-events: none !important;
}
.gs-10-aks-hatti .ax-bento-malzeme dt,
.gs-10-aks-hatti .ax-bento-malzeme dd {
position: relative !important;
color: var(--ax-beyaz) !important;
}
.gs-10-aks-hatti .ax-bento-malzeme dd {
font-size: var(--gs-fs-7) !important;
font-weight: 800 !important;
line-height: 1 !important;
letter-spacing: -0.02em !important;
}
/* Ölçüler — beş profil, beş çubuk. Çubuğun boyu `--ax-boy` (Section.tsx,
* profil adından türetilir). Hareket `transform`u satır içi yazar. */
.gs-10-aks-hatti .ax-bento-olculer dd {
display: flex !important;
flex: 1 !important;
align-items: flex-end !important;
}
.gs-10-aks-hatti .ax-bento-profiller {
display: grid !important;
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
align-items: end !important;
gap: var(--gs-bo-2) !important;
width: 100% !important;
}
.gs-10-aks-hatti .ax-bento-profil {
display: flex !important;
flex-direction: column !important;
gap: var(--gs-bo-2) !important;
}
/* İnce sütun: blok değil bir PROFİL kesitinin gövdesi gibi okunur. */
.gs-10-aks-hatti .ax-bento-cubuk {
display: block !important;
width: 0.625rem !important;
height: calc(var(--ax-boy) * 5rem) !important;
background: var(--ax-ikincil) !important;
transform-origin: 50% 100% !important;
}
.gs-10-aks-hatti .ax-bento-profil-ad {
font-size: var(--gs-fs-3) !important;
letter-spacing: 0.05em !important;
}
.gs-10-aks-hatti .ax-bento-kalinlik dd {
font-size: var(--gs-fs-5) !important;
font-weight: 800 !important;
}
.gs-10-aks-hatti .ax-bento-delik dd {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: var(--gs-bo-2) !important;
}
.gs-10-aks-hatti .ax-bento-oval {
flex-shrink: 0 !important;
width: 2.75rem !important;
height: 1.5rem !important;
color: var(--ax-ikincil) !important;
}
.gs-10-aks-hatti .ax-bento-kullanim dd {
font-weight: 400 !important;
color: var(--ax-ikincil) !important;
}
.gs-10-aks-hatti .ax-katalog {
display: flex !important;
flex-wrap: wrap !important;
align-items: baseline !important;
gap: 0.5rem 1rem !important;
margin-top: 1.25rem !important;
}
.gs-10-aks-hatti .ax-katalog-et {
font-size: var(--gs-fs-1) !important;
font-weight: 700 !important;
letter-spacing: var(--ax-aralik) !important;
text-transform: uppercase !important;
color: var(--ax-silik) !important;
}
/* ── KAYIT — proje kartları ──────────────────────────────────────────────── */
.gs-10-aks-hatti .ax-kayit {
padding-block: clamp(2.5rem, 6vw, 4.5rem) !important;
border-top: 1px solid var(--ax-hat) !important;
}
.gs-10-aks-hatti .ax-kayit-bas {
margin-bottom: clamp(1.75rem, 4vw, 2.75rem) !important;
}
.gs-10-aks-hatti .ax-kayit-metin {
max-width: 56ch !important;
margin-top: 0.9rem !important;
font-size: var(--gs-fs-4) !important;
line-height: 1.7 !important;
}
.gs-10-aks-hatti .ax-kayit-bas .ax-bag {
margin-top: 1.25rem !important;
}
/* ── VİTRİN — iki hâl, ikisi de tam ─────────────────────────────────────────
*
* ① VARSAYILAN (JavaScript yok / reduced-motion — `init` hiç çağrılmaz, Ö-018):
* sıradan bir ızgara. 1×6 · 2×3 · 3×2; her kart kendi künyesini taşır.
* ② `.ax-vitrin-etkin` (hareket sahneyi devraldı): 3B yelpaze. Kartlar mutlak
* konumlanır, künye sahnenin altına iner, kumanda görünür.
*
* Sınıfı YALNIZ `motion.ts` ekler ve yalnız ≥2 kart varsa. Yani coverflow'a
* özgü hiçbir kural, çalışmadığı bir dünyada devreye giremez.
*
* 🔴 Ö-023 — `transform`, `opacity` ve `z-index` bu dosyada `.ax-kart` için
* TANIMLI DEĞİL: üçünü de hareket her karede satır içi yazıyor, köprü ise her
* bildirime `!important` ekliyor ve `!important` satır içini yener. Buraya bir
* `transform` yazmak yelpazeyi sessizce dondurur. */
/* Izgara hâlinde cam sıradan bir sarmalayıcıdır ve KONTEYNERE oturur;
* yelpaze hâlinde ise sahnenin kendisi olur ve kenardan kenara açılır
* (aşağıdaki `.ax-vitrin-etkin` kuralı sınırı kaldırır). */
.gs-10-aks-hatti .ax-vitrin-cam {
max-width: var(--gs-container) !important;
margin-inline: auto !important;
padding-inline: var(--gs-gutter) !important;
}
.gs-10-aks-hatti .ax-kayit-liste {
display: grid !important;
gap: clamp(1.25rem, 2.5vw, 2rem) !important;
}
.gs-10-aks-hatti .ax-kart-bag {
display: block !important;
}
.gs-10-aks-hatti .ax-kart .ax-cerceve {
aspect-ratio: 4 / 3 !important;
}
.gs-10-aks-hatti .ax-kart-gorsel {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: 50% 50% !important;
}
/* Kapaksız kayıt — ÖLÇÜLDÜ (KARAR.md Ö-076).
* Panelden öne çıkan görsel seçmeden yayımlanan bir proje `src=""` üretir.
* Chromium bunun için istek ATMIYOR (ölçüldü: köke giden tek istek belgenin
* kendisi) ama boş `![]()
` yine de kutuda durur ve tarayıcıya göre kırık
* görsel işareti çizilebilir. Kural onu tümüyle kaldırır: geriye çerçevenin
* kendisi, köşe işaretleri ve damga kalır — "kapak yok" hâli boş bir kadraj
* olarak okunur, kaza eseri bir boşluk olarak değil.
* ⚠️ Çözüm burada değil PANELDE: kapak içerik sözleşmesinde ZORUNLU. */
.gs-10-aks-hatti .ax-kart-gorsel[src=""] {
display: none !important;
}
.gs-10-aks-hatti .ax-kart-bag:hover .ax-cerceve {
border-top-color: rgb(255 255 255 / 0.32) !important;
}
.gs-10-aks-hatti .ax-kart-govde {
display: block !important;
margin-top: 0.9rem !important;
}
.gs-10-aks-hatti .ax-kart-ad {
display: block !important;
font-size: var(--gs-fs-5) !important;
font-weight: 700 !important;
line-height: 1.25 !important;
letter-spacing: -0.012em !important;
color: var(--ax-metin) !important;
}
.gs-10-aks-hatti .ax-kart-kunye {
display: flex !important;
flex-wrap: wrap !important;
gap: 0.5rem 1.75rem !important;
margin-top: 0.7rem !important;
padding-top: 0.7rem !important;
border-top: 1px solid var(--ax-hat) !important;
}
.gs-10-aks-hatti .ax-kart-alan {
display: flex !important;
flex-direction: column !important;
gap: 0.2rem !important;
}
.gs-10-aks-hatti .ax-kart-et {
font-size: var(--gs-fs-1) !important;
font-weight: 700 !important;
letter-spacing: var(--ax-aralik) !important;
text-transform: uppercase !important;
color: var(--ax-silik) !important;
}
.gs-10-aks-hatti .ax-kart-deger {
font-size: var(--gs-fs-3) !important;
font-weight: 600 !important;
color: var(--ax-ikincil) !important;
font-variant-numeric: tabular-nums !important;
}
/* Boş hâl — hiç yayımlanmış proje yoksa. WordPress kayıt varsa bunu HİÇ
* basmaz; laboratuvarda `base.css`'teki `:has` kuralı gizler (Ö-061). */
.gs-10-aks-hatti .ax-kart-bos {
padding: clamp(2rem, 5vw, 3rem) !important;
border: 1px dashed var(--ax-hat) !important;
text-align: center !important;
color: var(--ax-silik) !important;
font-size: var(--gs-fs-4) !important;
}
/* ── ② Yelpaze ──────────────────────────────────────────────────────────── */
.gs-10-aks-hatti .ax-vitrin-etkin {
/* Kartın genişliği TEK ölçüdür: adım aralığı, derinlik, perspektif ve
* sahne yüksekliği hep bundan türer. Yelpaze böylece kırılımla birlikte
* kendiliğinden ölçekleniyor. */
--ax-kart-w: clamp(15rem, 46vw, 32.5rem);
}
.gs-10-aks-hatti .ax-vitrin-etkin .ax-vitrin-cam {
/* Yelpaze kenardan kenara açılır: konteyner sınırı kalkar. */
max-width: none !important;
padding-inline: 0 !important;
/* Dikey pay: eğik kartların köşesi ve gölgesi kırpılmasın. */
padding-block: clamp(1.25rem, 3vw, 2.5rem) !important;
/* Yelpazenin uçları ekranın dışında kalır — yatay taşmayı BU keser. */
overflow: hidden !important;
perspective: calc(var(--ax-kart-w) * 3) !important;
cursor: grab !important;
/* Yatay sürükleme bizim, dikey kaydırma sayfanın: parmakla aşağı inen
* kullanıcı yelpazeye takılmaz. */
touch-action: pan-y !important;
}
.gs-10-aks-hatti .ax-vitrin-etkin .ax-vitrin-cam:active {
cursor: grabbing !important;
}
.gs-10-aks-hatti .ax-vitrin-etkin .ax-kayit-liste {
position: relative !important;
display: block !important;
height: calc(var(--ax-kart-w) * 0.75) !important;
transform-style: preserve-3d !important;
/* Sürüklerken metin seçilmesin. */
user-select: none !important;
}
.gs-10-aks-hatti .ax-vitrin-etkin .ax-kart {
position: absolute !important;
inset-block-start: 0 !important;
inset-inline-start: 50% !important;
width: var(--ax-kart-w) !important;
will-change: transform !important;
}
/* Derinliğin okunması için: yelpazede kartlar üst üste biner, gölge hangisinin
* önde olduğunu söyler. Izgarada gölge YOK — orada üst üste binen bir şey de
* yok, gölge yalnız gürültü olurdu. */
.gs-10-aks-hatti .ax-vitrin-etkin .ax-kart .ax-cerceve {
box-shadow: 0 1.5rem 3.75rem -1.125rem rgb(var(--ax-zemin-rgb) / 0.9) !important;
}
/* Perdenin gövdesi yelpazede DAHA GÜÇLÜ. Hattaki perde bir gradyandır ve
* yalnız %8–20 karartır — orada doğru, çünkü kapaklar zaten yan yana. Burada
* kartlar üst üste biner ve derinliği okutan şey karartmanın kendisidir.
* ⚠️ Yalnız `background`: `opacity` hâlâ hareketin her karede yazdığı özellik,
* bu dosyada TANIMLI DEĞİL (Ö-023). */
.gs-10-aks-hatti .ax-vitrin-etkin .ax-kart .ax-perde {
background: rgb(var(--ax-zemin-rgb) / 0.92) !important;
}
/* Künye yelpazede GÖRSEL olarak gizlenir ama erişilebilirlik ağacında KALIR:
* kart bağlantısının adı buradan geliyor. `display: none` olsaydı yelpazedeki
* her kart adsız bir bağlantıya dönerdi. */
.gs-10-aks-hatti .ax-vitrin-etkin .ax-kart-govde {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
clip-path: inset(50%) !important;
white-space: nowrap !important;
}
/* ── Merkezdeki kartın künyesi ──────────────────────────────────────────── */
.gs-10-aks-hatti .ax-vitrin-kunye {
display: none !important;
}
.gs-10-aks-hatti .ax-vitrin-etkin .ax-vitrin-kunye {
display: block !important;
margin-top: clamp(1.25rem, 3vw, 2rem) !important;
text-align: center !important;
}
.gs-10-aks-hatti .ax-vitrin-ad {
/* İki satırlık kutu, içinde ORTALI: tek satırlık bir ad kutunun dibine
* yapışıp altında boşluk bırakmaz, pay iki yana dağılır. */
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: var(--gs-fs-5) !important;
font-weight: 700 !important;
line-height: 1.2 !important;
letter-spacing: -0.015em !important;
color: var(--ax-metin) !important;
/* İki satırlık yer PEŞİNEN ayrılır: adlar 10–33 karakter arasında değişiyor
* (ornekler.ts, içerik sözleşmesi) ve dar ekranda kimi ad sarıyor. Yer
* ayrılmazsa kart değiştikçe altındaki kumanda zıplar. */
min-height: 2.4em !important;
}
.gs-10-aks-hatti .ax-vitrin-alanlar {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: 0.5rem 2.5rem !important;
max-width: 26rem !important;
margin-top: 0.85rem !important;
margin-inline: auto !important;
padding-top: 0.85rem !important;
border-top: 1px solid var(--ax-hat) !important;
}
.gs-10-aks-hatti .ax-vitrin-alan {
display: flex !important;
flex-direction: column !important;
gap: 0.2rem !important;
}
.gs-10-aks-hatti .ax-vitrin-alanlar dt {
font-size: var(--gs-fs-1) !important;
font-weight: 700 !important;
letter-spacing: var(--ax-aralik) !important;
text-transform: uppercase !important;
color: var(--ax-silik) !important;
}
.gs-10-aks-hatti .ax-vitrin-alanlar dd {
margin: 0 !important;
font-size: var(--gs-fs-3) !important;
font-weight: 600 !important;
color: var(--ax-ikincil) !important;
font-variant-numeric: tabular-nums !important;
}
/* ── Kumanda ────────────────────────────────────────────────────────────── */
/* JS'siz hiçbir işi yok — çalışmayan düğme göstermek yalan olurdu (Ö-018). */
.gs-10-aks-hatti .ax-vitrin-kumanda {
display: none !important;
}
.gs-10-aks-hatti .ax-vitrin-etkin .ax-vitrin-kumanda {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: center !important;
gap: clamp(1rem, 3vw, 1.75rem) !important;
margin-top: clamp(1.25rem, 3vw, 1.75rem) !important;
}
.gs-10-aks-hatti .ax-vitrin-ok {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 2.75rem !important;
height: 2.75rem !important;
padding: 0 !important;
background: transparent !important;
/* ⚠️ Kenarlık `--ax-hat` DEĞİL. Ölçüldü: #363B3E / #1B1E20 = 1.48:1 ve
* WCAG 1.4.11 bir arayüz bileşeninin sınırından 3:1 ister. `--ax-hat`
* sayfanın her yerinde AYIRICI çizgi olarak doğru (dekoratif), ama burada
* düğmenin kendisini çiziyor. `--ax-silik` 5.51:1 — geçiyor. */
border: 1px solid var(--ax-silik) !important;
color: var(--ax-ikincil) !important;
cursor: pointer !important;
transition: border-color 0.25s ease, color 0.25s ease, background-color 0.25s ease !important;
}
.gs-10-aks-hatti .ax-vitrin-ok svg {
width: 1.125rem !important;
height: 1.125rem !important;
}
.gs-10-aks-hatti .ax-vitrin-ok:hover {
background: var(--ax-yuzey) !important;
border-color: var(--ax-metin) !important;
color: var(--ax-metin) !important;
}
/* Sayaç sayfanın kendi aletiyle yazılır: kumpas, nokta dizisi değil. */
.gs-10-aks-hatti .ax-vitrin-sayac {
display: flex !important;
align-items: center !important;
gap: 0.7rem !important;
font-size: var(--gs-fs-3) !important;
font-weight: 700 !important;
letter-spacing: var(--ax-aralik) !important;
color: var(--ax-silik) !important;
font-variant-numeric: tabular-nums !important;
}
.gs-10-aks-hatti .ax-vitrin-simdi {
color: var(--ax-metin) !important;
}
.gs-10-aks-hatti .ax-vitrin-cizgi {
width: 2.25rem !important;
height: 1px !important;
background: var(--ax-hat) !important;
}
.gs-10-aks-hatti .ax-vitrin-ipucu {
flex-basis: 100% !important;
text-align: center !important;
font-size: var(--gs-fs-1) !important;
letter-spacing: var(--ax-aralik) !important;
text-transform: uppercase !important;
color: var(--ax-silik) !important;
}
/* ── TEKNİK NOTLAR — bir revizyon tablosu, kart ızgarası değil ──────────────
*
* Sayfanın cümlesi: hat NE YAPTIĞIMIZI, ürün NE ÜRETTİĞİMİZİ, vitrin NE İNŞA
* ETTİĞİMİZİ söylüyor; bu şerit NE BİLDİĞİMİZİ. Kapanıştan önceki son
* yavaşlama olduğu için sayfanın EN SESSİZ bölümü olmak zorunda (DESIGN.md ②):
* az önce 3B bir yelpazede altı büyük fotoğraf geçti, hemen ardından ikinci
* bir gösteri gürültü olurdu.
*
* Bu yüzden form bir tablodur: yatay çizgiler, hizalı sütunlar, sayısal tarih.
* Sayfanın kendi dünyasının belgesi — teknik çizim takımının revizyon cetveli.
*
* 🔴 GÖRSEL YOK ve bu ölçülmüş bir karardır (KARAR.md Ö-095), eksik değil:
* 68 yazının 10'unda kapak yok, kalanların oranı 768×307 – 768×576 arasında
* dağılıyor ve son üç yazının ikisinin kapağı metin yüklü bir SEO afişi.
* Üç satırlık bir listede bunların hiçbiri çerçeveye oturmuyor.
*
* ⚠️ HAREKET YOK — Ö-023 kısıtı bu bölümde geçerli değil, çünkü hiçbir
* özelliği satır içi yazan bir `motion.ts` yolu yok. Şerit sunucuda basılıyor,
* yani reduced-motion'da da eksiksiz (Ö-060 deseni). */
.gs-10-aks-hatti .ax-notlar {
padding-block: clamp(2.5rem, 6vw, 4.5rem) !important;
border-top: 1px solid var(--ax-hat) !important;
}
.gs-10-aks-hatti .ax-notlar-bas {
margin-bottom: clamp(1.5rem, 3.5vw, 2.25rem) !important;
}
.gs-10-aks-hatti .ax-notlar-metin {
max-width: 56ch !important;
margin-top: 0.9rem !important;
font-size: var(--gs-fs-4) !important;
line-height: 1.7 !important;
}
/* Cetvelin alt kenarı. Üst kenarları satırların kendisi taşıyor, böylece boş
* hâl tek başına kaldığında da tablo kapanıyor. */
.gs-10-aks-hatti .ax-not-liste {
border-bottom: 1px solid var(--ax-hat) !important;
}
.gs-10-aks-hatti .ax-not {
border-top: 1px solid var(--ax-hat) !important;
}
/* Satırın TAMAMI bağlantıdır: dokunma hedefi bir metin değil, bir cetvel
* satırı (—48 px'in üstünde, `--gs-hedef` tabanının çok üstü).
*
* Dar ekranda iki satır: üstte numara ve tarih, altta konu + başlık.
* ≥768'de tek satır: numara · gövde · tarih. Aynı DOM, iki yerleşim. */
.gs-10-aks-hatti .ax-not-bag {
display: grid !important;
grid-template-areas:
"no tarih"
"govde govde" !important;
grid-template-columns: auto 1fr !important;
gap: 0.5rem 1rem !important;
padding-block: 1.15rem !important;
padding-inline: 0.75rem !important;
margin-inline: -0.75rem !important;
transition:
background-color 0.18s ease,
color 0.18s ease !important;
}
.gs-10-aks-hatti .ax-not-bag:hover {
background-color: var(--ax-yuzey) !important;
}
/* Sıra damgası. Sayfa iki basamaklı damgayı zaten konuşuyor (AKS 00, kayıt
* 01–06); not da aynı alfabeyi kullanıyor. `aria-hidden` — sıra bilgisini
* `` zaten taşıyor, ekran okuyucuda iki kez duyulmasın. */
.gs-10-aks-hatti .ax-not-no {
grid-area: no !important;
font-size: var(--gs-fs-1) !important;
font-weight: 700 !important;
font-variant-numeric: tabular-nums !important;
letter-spacing: var(--ax-aralik) !important;
color: var(--ax-silik) !important;
transition: color 0.18s ease !important;
}
.gs-10-aks-hatti .ax-not-bag:hover .ax-not-no {
color: var(--ax-metin) !important;
}
.gs-10-aks-hatti .ax-not-govde {
grid-area: govde !important;
display: block !important;
min-width: 0 !important;
}
/* Konu ISTEĞE BAĞLI: kural hiçbir terim bırakmazsa sağlayıcı boş döner ve
* rozet JavaScript'siz kaybolur (Ö-066 deseni). Kutu da kapanır, ölü boşluk
* kalmaz — `display: block` + `margin-bottom` yalnız doluyken uygulanıyor.
*
* ⚠️ Büyük harf DOĞRUDAN metni taşıyan elemana yazılıyor: `base.css`
* `.gs span`a `text-transform: none !important` veriyor ve doğrudan seçici
* mirası keser (Ö-081). Burada `.ax-not-konu` (0,2,0) onu yener. */
.gs-10-aks-hatti .ax-not-konu {
display: block !important;
font-size: var(--gs-fs-1) !important;
font-weight: 700 !important;
letter-spacing: var(--ax-aralik) !important;
text-transform: uppercase !important;
color: var(--ax-ikincil) !important;
}
.gs-10-aks-hatti .ax-not-konu:empty {
display: none !important;
}
.gs-10-aks-hatti .ax-not-konu:not(:empty) {
margin-bottom: 0.4rem !important;
}
/* Başlıklar SEO başlığıdır: 14–112 karakter (ölçüldü, 68 yazının tamamı).
* Kırpılmaz — sarar. `max-width` satır uzunluğunu okunur tutar, `min-width: 0`
* ise ızgara sütununun uzun kelimeyle şişmesini engeller. */
.gs-10-aks-hatti .ax-not-baslik {
display: block !important;
max-width: 52ch !important;
font-size: var(--gs-fs-5) !important;
font-weight: 700 !important;
line-height: 1.3 !important;
letter-spacing: -0.008em !important;
color: var(--ax-metin) !important;
transition: color 0.18s ease !important;
}
.gs-10-aks-hatti .ax-not-bag:hover .ax-not-baslik {
color: var(--ax-beyaz) !important;
}
/* Tarih sayısaldır ve DİLDEN BAĞIMSIZ (`22.06.2026`): ay adı yazılsaydı
* sitenin yerel ayarına bağlı kalırdı, üstelik şantiye belgesinin tarihi
* zaten sayısaldır. Makine biçimi `datetime` özniteliğinde ayrıca duruyor. */
.gs-10-aks-hatti .ax-not-tarih {
grid-area: tarih !important;
justify-self: end !important;
font-size: var(--gs-fs-2) !important;
font-weight: 700 !important;
font-variant-numeric: tabular-nums !important;
letter-spacing: 0.04em !important;
color: var(--ax-silik) !important;
}
.gs-10-aks-hatti .ax-not-bos {
border-top: 1px solid var(--ax-hat) !important;
padding-block: 1.15rem !important;
font-size: var(--gs-fs-4) !important;
color: var(--ax-silik) !important;
}
.gs-10-aks-hatti .ax-notlar-tum {
margin-top: 1.5rem !important;
}
/* ── Kapanış ────────────────────────────────────────────────────────────── */
.gs-10-aks-hatti .ax-kapanis {
padding-block: clamp(2.5rem, 6vw, 4rem) !important;
border-top: 1px solid var(--ax-hat) !important;
}
.gs-10-aks-hatti .ax-kapanis-ic {
display: grid !important;
gap: clamp(1.75rem, 4vw, 3rem) !important;
}
.gs-10-aks-hatti .ax-kapanis-baslik {
max-width: 20ch !important;
font-size: var(--gs-fs-6) !important;
font-weight: 800 !important;
line-height: 1.1 !important;
color: var(--ax-metin) !important;
}
.gs-10-aks-hatti .ax-kapanis-metin {
max-width: 46ch !important;
margin-top: 1rem !important;
font-size: var(--gs-fs-4) !important;
line-height: 1.7 !important;
}
.gs-10-aks-hatti .ax-kapanis-ic .ax-dugme {
margin-top: 0 !important;
}
.gs-10-aks-hatti .ax-iletisim {
display: flex !important;
flex-wrap: wrap !important;
gap: 1.25rem 2.5rem !important;
margin-top: 1.75rem !important;
padding-top: 1.25rem !important;
border-top: 1px solid var(--ax-hat) !important;
}
.gs-10-aks-hatti .ax-iletisim dt {
font-size: var(--gs-fs-1) !important;
font-weight: 700 !important;
letter-spacing: var(--ax-aralik) !important;
text-transform: uppercase !important;
color: var(--ax-silik) !important;
}
.gs-10-aks-hatti .ax-iletisim dd {
margin-top: 0.25rem !important;
font-size: var(--gs-fs-4) !important;
font-weight: 600 !important;
color: var(--ax-metin) !important;
font-variant-numeric: tabular-nums !important;
}
/* Alt çizgi metnin hemen altında kalsın diye kutu `inline-flex` DEĞİL
* `inline-block`: burada metin zaten 16 px ve satır kutusu 24 px'e yakın;
* eksik olan tek şey garantidir. */
.gs-10-aks-hatti .ax-iletisim a {
display: inline-block !important;
min-height: var(--gs-hedef) !important;
padding-bottom: 0.1rem !important;
border-bottom: 1px solid var(--ax-hat) !important;
}
/* ── 768px ve üzeri ─────────────────────────────────────────────────────── */
@media (min-width: 768px) {
/* Açılışın ferah ritmi — Ö-079/Ö-082'de ölçülen masaüstü kompozisyonu. */
.gs-10-aks-hatti .ax-acilis {
padding-block: clamp(4rem, 12vh, 8rem) clamp(1.25rem, 3vh, 2rem) !important;
}
.gs-10-aks-hatti .ax-acilis-alt {
margin-top: clamp(2rem, 6vh, 4rem) !important;
}
.gs-10-aks-hatti .ax-bento {
grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}
.gs-10-aks-hatti .ax-bento-malzeme,
.gs-10-aks-hatti .ax-bento-olculer {
grid-column: span 3 !important;
}
.gs-10-aks-hatti .ax-bento-kalinlik,
.gs-10-aks-hatti .ax-bento-delik,
.gs-10-aks-hatti .ax-bento-kaplama {
grid-column: span 2 !important;
}
.gs-10-aks-hatti .ax-bento-kullanim {
grid-column: 1 / -1 !important;
}
.gs-10-aks-hatti .ax-kayit-liste {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
/* Cetvel tek satıra açılır: numara · gövde · tarih. `minmax(0, 1fr)` şart —
* `1fr` uzun bir kelimeyle sütunu şişirir ve tarihi kadraj dışına iter. */
.gs-10-aks-hatti .ax-not-bag {
grid-template-areas: "no govde tarih" !important;
grid-template-columns: auto minmax(0, 1fr) auto !important;
align-items: baseline !important;
gap: 0 clamp(1rem, 3vw, 2.5rem) !important;
padding-block: 1.4rem !important;
}
}
/* ── 1025px ve üzeri ────────────────────────────────────────────────────── */
@media (min-width: 1025px) {
.gs-10-aks-hatti .ax-acilis-ic .ax-baslik {
max-width: 17ch !important;
}
.gs-10-aks-hatti .ax-urun-govde {
grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) !important;
align-items: stretch !important;
}
/* Defter sağ sütunda. İlk satır `1fr`: defter metinden uzunsa artan pay
* oraya gider, etiket ile manşetin arası AÇILMAZ. */
.gs-10-aks-hatti .ax-acilis-ic {
grid-template-columns: minmax(0, 1fr) minmax(20rem, 25rem) !important;
grid-template-rows: 1fr repeat(5, auto) !important;
column-gap: clamp(2rem, 4vw, 4rem) !important;
}
.gs-10-aks-hatti .ax-acilis-ic > .ax-etiket { grid-area: 2 / 1 !important; }
.gs-10-aks-hatti .ax-acilis-ic > .ax-baslik { grid-area: 3 / 1 !important; }
.gs-10-aks-hatti .ax-acilis-ic > .ax-giris { grid-area: 4 / 1 !important; }
.gs-10-aks-hatti .ax-acilis-ic > .ax-acilis-eylem { grid-area: 5 / 1 !important; }
.gs-10-aks-hatti .ax-acilis-ic > .ax-acilis-alt {
grid-row: 6 !important;
grid-column: 1 / -1 !important;
}
.gs-10-aks-hatti .ax-defter {
grid-row: 1 / 6 !important;
grid-column: 2 !important;
align-self: end !important;
margin-top: 0 !important;
}
.gs-10-aks-hatti .ax-bento-malzeme {
grid-row: span 2 !important;
}
.gs-10-aks-hatti .ax-bento-kalinlik {
grid-column: span 1 !important;
}
.gs-10-aks-hatti .ax-bento-kaplama,
.gs-10-aks-hatti .ax-bento-kullanim {
grid-column: span 3 !important;
}
.gs-10-aks-hatti .ax-bento-kalinlik dd {
font-size: var(--gs-fs-6) !important;
}
.gs-10-aks-hatti .ax-kayit-liste {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.gs-10-aks-hatti .ax-kapanis-ic {
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr) !important;
align-items: center !important;
}
}
/* ── 360px ve ALTI — açılışın dikey ritmi bir basamak daha sıkışır ────────
*
* 🔴 NEDEN VAR (A21 · K-135). Ölçüldü (gurtesv2, 320×640, duyuru bandı
* AÇIKKEN): açılışın alt şeridi EN'de **+59.6**, DE'de **+18.8** px kadrajın
* dışında kalıyordu. Bantsız hâlde üçü de geçiyor (−13.6), yani kusur yalnız
* bir duyuru yayındayken görünüyor — ama görününce sayfanın ilk ekranı
* eksik açılıyor ve `ax-kaydir` ("aşağı") kaybolduğu için okuma sırası kopuyor.
*
* İki kaynağı vardı: ① alt şerit EN/DE'de iki satıra sarıyor (+29.6, çünkü
* damga+çağrı 320'nin 288 px'lik içerik genişliğine sığmıyor: TR 276.7 ✅,
* EN 308.3 ❌, DE 349.9 ❌) · ② EN'de `h1` dördüncü satırı alıyor (+40.8).
*
* 🔒 KAPATMA BİÇİMİ BİR KARARDIR (K-135): tipografi ölçeğine, metne ve
* damgaya DOKUNULMADI. Yalnız boşluklar bir basamak iniyor ve manşetin satır
* yüksekliği 1.02 → 0.96 oluyor. Hiçbir şey kaybolmuyor, hiçbir punto
* değişmiyor. ⚠️ Kapsam bilerek `max-width: 360px`: 375 ve üstü kilitli
* yerleşimdir ve bu blok oraya hiç girmez.
*
* 🔵 Yazılan her yeni değer BOŞLUK ÖLÇEĞİNDEN (`--gs-bo-*`). K-122 ölçeği
* yalnız yeni yüzeyler için bağlayıcı saymıştı; burada eski yüzeye dokunmak
* gerekti ve dokunulan değerler ölçeğe **eşlendi** — ara değer üretilmedi.
*
* ⚠️ Ö-091'İN DERSİ GEÇERLİ: bu blok açılışın içerik yüksekliğini değiştirir.
* Değiştirilirse `--db-h` ve `--ax-ust-yer` YENİDEN ÖLÇÜLÜR; tip denetimi
* bunu yakalamaz.
*/
@media (max-width: 360px) {
/* Manşet: 4 satırlı EN başlığında 9.6 px, 3 satırlı TR/DE'de 7.2 px.
Ölçek değişmiyor — `--gs-fs-7` aynı, yalnız satırlar sıkışıyor. */
.gs-10-aks-hatti .ax-acilis-ic .ax-baslik {
line-height: 0.96 !important;
}
.gs-10-aks-hatti .ax-acilis .ax-etiket {
margin-bottom: var(--gs-bo-2) !important; /* 12 → 8 */
}
.gs-10-aks-hatti .ax-acilis-ic .ax-giris {
margin-top: var(--gs-bo-3) !important; /* 24 → 12 */
}
.gs-10-aks-hatti .ax-acilis-eylem {
gap: var(--gs-bo-2) !important; /* 16 → 8 */
margin-top: var(--gs-bo-4) !important; /* 32 → 16 */
}
/* ⚠️ `clamp(0.9rem, 2.6vh, 4rem)` yerine sabit basamak: `vh` birimi
kadrajın yüksekliğine bağlıydı ve 640'ta 16.64 px çözülüyordu — yani
değer ekrandan ekrana kayıyordu. Burada kayması istenmiyor. */
.gs-10-aks-hatti .ax-acilis-alt {
margin-top: var(--gs-bo-2) !important; /* 16.64 → 8 */
padding-top: var(--gs-bo-2) !important; /* 16 → 8 */
}
}