/* ==========================================================================
Ekosistem tasarım dili v1 (29 Eyl 2026): altyapı.io · Kârmatik · Yanıt · cevap.io
Tek kaynak: /Users/macos/koordinasyon/tasarim-dili/ (TASARIM.md kuralları anlatır).
Kullanım: + bu dosya + fonts/robout-*.woff2
Açık zemin ANA plan, koyu zemin (#101529) İKİNCİ plan: bantlar, alt bilgi, vurgu blokları.
========================================================================== */
/* ---- Font: Robout (Casloop Studio). Dosyalar sitenin kendi /fonts/ dizininden. ---- */
@font-face { font-family: "Robout"; font-style: normal; font-weight: 300; font-display: swap; src: url("/fonts/robout-300.woff2") format("woff2"); }
@font-face { font-family: "Robout"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/robout-400.woff2") format("woff2"); }
@font-face { font-family: "Robout"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/robout-500.woff2") format("woff2"); }
@font-face { font-family: "Robout"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/robout-600.woff2") format("woff2"); }
@font-face { font-family: "Robout"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/robout-700.woff2") format("woff2"); }
@font-face { font-family: "Robout"; font-style: normal; font-weight: 800; font-display: swap; src: url("/fonts/robout-800.woff2") format("woff2"); }
/* Ölçüleri Robout'a eşitlenmiş yedek (29 Eyl): Robout geç gelirse satırlar yeniden dizilmesin (CLS).
Robout Regular'ın Türkçe metindeki ortalama genişliği Arial/Helvetica'dan %1,74 fazla; dikey ölçüler hhea'dan. */
@font-face { font-family: "Robout Yedek"; src: local("Arial"), local("Helvetica"), local("Helvetica Neue"), local("Roboto");
size-adjust: 101.74%; ascent-override: 102.23%; descent-override: 24.57%; line-gap-override: 24.57%; }
/* ---- Belirteçler ---- */
:root {
/* Marka renkleri (görseldeki değerler, değiştirilmez) */
--eko-altyapi: #1947C9;
--eko-karmatik: #087F66;
--eko-yanit: #7044D6;
--eko-cevap-gecis: linear-gradient(118deg, #1947C9 0%, #087F66 50%, #7044D6 100%);
/* Nötrler */
--eko-koyu: #101529; /* koyu zemin: ikinci plan */
--eko-koyu-yuzey: #1A2038; /* koyu bant içindeki kart */
--eko-acik: #F5F6F4; /* açık yüzey: ana zemin */
--eko-beyaz: #FFFFFF; /* kart yüzeyi */
/* Anlamsal (açık plan) */
--zemin: var(--eko-acik);
--yuzey: var(--eko-beyaz);
--murekkep: var(--eko-koyu); /* ana metin: 15,9:1 */
--murekkep-2: #4C505E; /* ikincil metin: beyazda 8,1:1, #F5F6F4 üzerinde 7,5:1 */
--soluk: #666A76; /* yardımcı metin: beyazda 5,4:1, #F5F6F4 üzerinde 5,0:1 */
--cizgi: color-mix(in srgb, var(--eko-koyu) 11%, transparent);
/* Sitenin markası: data-marka ile seçilir */
--marka: var(--eko-koyu);
--marka-uzeri: #FFFFFF; /* marka zemin üstündeki metin */
--marka-acik: color-mix(in srgb, var(--marka) 10%, var(--eko-acik));
--marka-dugme: var(--marka); /* cevap.io'da geçiş */
/* Tipografi */
--font: "Robout", "Robout Yedek", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--boy-govde: 1.0625rem;
--boy-h1: clamp(2.25rem, 1.4rem + 3.6vw, 4rem);
--boy-h2: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
--boy-h3: clamp(1.2rem, 1.05rem + .6vw, 1.5rem);
/* Biçim */
--yaricap: 20px; /* görseldeki kartlar */
--yaricap-kucuk: 12px;
--golge: 0 1px 2px rgba(16, 21, 41, .06), 0 8px 28px rgba(16, 21, 41, .08);
--yumusak: cubic-bezier(.2, .7, .2, 1);
--genislik: 1180px;
}
/* Türetilmiş değerler her data-marka öğesinde yeniden hesaplanır (yoksa üst öğenin sonucu miras kalır) */
[data-marka] { --marka-dugme: var(--marka); --marka-acik: color-mix(in srgb, var(--marka) 10%, var(--eko-acik)); }
[data-marka="altyapi"] { --marka: var(--eko-altyapi); }
[data-marka="karmatik"] { --marka: var(--eko-karmatik); }
[data-marka="yanit"] { --marka: var(--eko-yanit); }
[data-marka="cevap"] { --marka: #3F4FB8; --marka-dugme: var(--eko-cevap-gecis); } /* düz renk gereken yerde üçünün ortası */
/* Koyu plan: yalnız bir BANT ya da tema düğmesi olan sitede tüm sayfa */
.eko-koyu, [data-tema="koyu"] {
--zemin: var(--eko-koyu);
--yuzey: var(--eko-koyu-yuzey);
--murekkep: #EEF0F5;
--murekkep-2: color-mix(in srgb, #EEF0F5 76%, var(--eko-koyu));
--soluk: color-mix(in srgb, #EEF0F5 58%, var(--eko-koyu));
--cizgi: rgba(238, 240, 245, .12);
--marka-acik: color-mix(in srgb, var(--marka) 22%, var(--eko-koyu));
}
.eko-koyu { background: var(--zemin); color: var(--murekkep); }
/* Koyu zeminde marka rengi metin olarak okunur kalsın */
.eko-koyu [data-marka-metin], [data-tema="koyu"] [data-marka-metin] { color: color-mix(in srgb, var(--marka) 55%, #FFFFFF); }
/* ---- Taban ---- */
.eko-govde, body.eko {
margin: 0; background: var(--zemin); color: var(--murekkep);
font-family: var(--font); font-size: var(--boy-govde); line-height: 1.55;
letter-spacing: -0.005em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.eko h1, .eko-h1 { font-family: var(--font); font-size: var(--boy-h1); line-height: 1.02; font-weight: 700; letter-spacing: -0.035em; }
.eko h2, .eko-h2 { font-family: var(--font); font-size: var(--boy-h2); line-height: 1.08; font-weight: 700; letter-spacing: -0.03em; }
.eko h3, .eko-h3 { font-family: var(--font); font-size: var(--boy-h3); line-height: 1.25; font-weight: 600; letter-spacing: -0.015em; }
[data-marka-metin] { color: var(--marka); }
.eko-gecis-metin { background: var(--eko-cevap-gecis); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* ---- Düğmeler ---- */
.eko-dugme {
display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
min-height: 44px; padding: .7rem 1.25rem; border: 0; border-radius: 999px;
font: 600 .9375rem/1 var(--font); letter-spacing: -0.005em; text-decoration: none; cursor: pointer;
background: var(--marka-dugme); color: var(--marka-uzeri);
box-shadow: 0 1px 0 rgba(255, 255, 255, .22) inset, 0 6px 18px color-mix(in srgb, var(--marka) 28%, transparent);
transition: transform .2s var(--yumusak), box-shadow .2s var(--yumusak), filter .2s;
}
.eko-dugme:hover { transform: translateY(-1px); filter: brightness(1.06); }
.eko-dugme:active { transform: none; }
.eko-dugme--ikincil { background: var(--yuzey); color: var(--murekkep); box-shadow: 0 0 0 1px var(--cizgi) inset; }
.eko-dugme--ikincil:hover { filter: none; box-shadow: 0 0 0 1px color-mix(in srgb, var(--marka) 45%, transparent) inset; }
:where(.eko, .eko-govde) :focus-visible { outline: 2px solid var(--marka); outline-offset: 3px; border-radius: 10px; }
/* ---- Kart ---- */
.eko-kart { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--yaricap); box-shadow: var(--golge); }
/* ==========================================================================
SIVI CAM BAŞLIK: dört sitede birebir aynı yapı. Yalnız menü bağlantıları ve düğme metni değişir.
========================================================================== */
.eko-baslik-yeri, .eko-baslik-yeri *, .eko-baslik-yeri *::before, .eko-baslik-yeri *::after,
.eko-kahraman, .eko-kahraman * { box-sizing: border-box; }
.eko-baslik-yeri { position: sticky; top: 0; z-index: 60; padding: 12px 12px 0; pointer-events: none; }
.eko-baslik {
pointer-events: auto; position: relative; isolation: isolate;
display: flex; align-items: center; gap: .75rem;
max-width: var(--genislik); margin: 0 auto; min-height: 60px; padding: 8px 8px 8px 18px;
border-radius: 999px;
font-family: var(--font); color: var(--eko-koyu);
/* cam zemini ve bulanıklık ::before'da: başlığın kendisinde backdrop-filter olursa "backdrop root" olur ve
içindeki açılır liste yalnız başlığın içini görür, arkasını bulanıklaştıramaz (CEVAP'ın bulgusu, 29 Eyl) */
background: transparent;
border: 1px solid rgba(255, 255, 255, .72);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .95), /* üst parlama */
inset 0 -1px 0 rgba(16, 21, 41, .05), /* alt kenar */
0 1px 2px rgba(16, 21, 41, .06),
0 12px 36px rgba(16, 21, 41, .12);
transition: background .3s var(--yumusak), box-shadow .3s var(--yumusak);
}
/* Işık kırılması: sol üstte yumuşak parıltı, sağ altta marka tonu */
.eko-baslik::before {
content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
background:
radial-gradient(120% 140% at 12% -30%, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, 0) 45%),
radial-gradient(90% 120% at 100% 130%, color-mix(in srgb, var(--marka) 16%, transparent) 0%, transparent 55%),
linear-gradient(180deg, rgba(255, 255, 255, .74) 0%, rgba(255, 255, 255, .5) 100%);
-webkit-backdrop-filter: blur(22px) saturate(185%); backdrop-filter: blur(22px) saturate(185%);
transition: background .3s var(--yumusak);
}
/* İnce cam kenarı: marka tonunda ışıklı çizgi */
.eko-baslik::after {
content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; padding: 1px;
background: linear-gradient(120deg, rgba(255, 255, 255, .9), color-mix(in srgb, var(--marka) 30%, rgba(255, 255, 255, .2)) 60%, rgba(255, 255, 255, .6));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* İçerik, parıltı ve kenar katmanlarının ÜSTÜNDE kalır (yoksa marka imi ve düğme soluklaşır) */
.eko-baslik > * { position: relative; z-index: 1; }
.eko-baslik > .eko-gecis { z-index: 2; }
.eko-baslik[data-kaydirildi]::before {
background:
radial-gradient(120% 140% at 12% -30%, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, 0) 45%),
radial-gradient(90% 120% at 100% 130%, color-mix(in srgb, var(--marka) 16%, transparent) 0%, transparent 55%),
linear-gradient(180deg, rgba(255, 255, 255, .82) 0%, rgba(255, 255, 255, .62) 100%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.eko-baslik::before, .eko-baslik[data-kaydirildi]::before { background: rgba(255, 255, 255, .95); }
}
@media (prefers-reduced-transparency: reduce) { .eko-baslik::before, .eko-baslik[data-kaydirildi]::before { background: rgba(255, 255, 255, .97); } }
/* Koyu temalı sayfada koyu cam */
[data-tema="koyu"] .eko-baslik {
color: #EEF0F5;
border-color: rgba(255, 255, 255, .10);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 12px 36px rgba(0, 0, 0, .35);
}
[data-tema="koyu"] .eko-baslik::before, [data-tema="koyu"] .eko-baslik[data-kaydirildi]::before {
background: radial-gradient(90% 120% at 100% 130%, color-mix(in srgb, var(--marka) 30%, transparent) 0%, transparent 55%),
linear-gradient(180deg, rgba(26, 32, 56, .72) 0%, rgba(16, 21, 41, .55) 100%);
}
[data-tema="koyu"] .eko-baslik::after { background: linear-gradient(120deg, rgba(255, 255, 255, .22), color-mix(in srgb, var(--marka) 45%, transparent) 60%, rgba(255, 255, 255, .08)); }
/* Marka imi + yazı */
.eko-marka { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; color: inherit; font-weight: 700; font-size: 1.125rem; letter-spacing: -0.03em; white-space: nowrap; }
.eko-marka-im { width: 22px; height: 22px; border-radius: 7px; background: var(--marka-dugme); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 2px 6px color-mix(in srgb, var(--marka) 35%, transparent); flex: none; }
.eko-marka b { font-weight: 700; }
.eko-marka span:not(.eko-marka-im) { font-weight: 500; opacity: .55; } /* "cevap.io" gibi ek */
/* Site menüsü */
.eko-menu { display: flex; align-items: center; gap: .15rem; margin: 0 auto 0 .75rem; list-style: none; padding: 0; }
.eko-menu a { display: block; padding: .55rem .8rem; border-radius: 999px; text-decoration: none; color: inherit; font-size: .9375rem; font-weight: 500; opacity: .78; transition: opacity .2s, background .2s; }
.eko-menu a:hover, .eko-menu a[aria-current="page"] { opacity: 1; background: rgba(16, 21, 41, .06); }
[data-tema="koyu"] .eko-menu a:hover, [data-tema="koyu"] .eko-menu a[aria-current="page"] { background: rgba(255, 255, 255, .08); }
/* Ekosistem geçişi: dört sitede aynı sıra ve aynı etiket */
.eko-gecis { position: relative; }
.eko-gecis > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .45rem; min-height: 40px; padding: 0 .8rem; border-radius: 999px; font-size: .875rem; font-weight: 600; color: inherit; opacity: .85; }
.eko-gecis > summary::-webkit-details-marker { display: none; }
.eko-gecis > summary:hover, .eko-gecis[open] > summary { opacity: 1; background: rgba(16, 21, 41, .06); }
[data-tema="koyu"] .eko-gecis > summary:hover, [data-tema="koyu"] .eko-gecis[open] > summary { background: rgba(255, 255, 255, .08); }
.eko-noktalar { display: inline-flex; gap: 3px; }
.eko-noktalar i { width: 7px; height: 7px; border-radius: 50%; }
.eko-noktalar i:nth-child(1) { background: var(--eko-altyapi); }
.eko-noktalar i:nth-child(2) { background: var(--eko-karmatik); }
.eko-noktalar i:nth-child(3) { background: var(--eko-yanit); }
.eko-gecis-liste {
position: absolute; right: 0; top: calc(100% + 10px); width: min(320px, calc(100vw - 32px)); margin: 0; padding: 8px; list-style: none;
border-radius: 22px; color: var(--eko-koyu);
/* Açılır liste okunurluk için başlıktan daha opak */
background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .92));
-webkit-backdrop-filter: blur(28px) saturate(185%); backdrop-filter: blur(28px) saturate(185%);
border: 1px solid rgba(255, 255, 255, .8);
box-shadow: inset 0 1px 0 #fff, 0 18px 48px rgba(16, 21, 41, .18);
animation: eko-ac .22s var(--yumusak);
}
@keyframes eko-ac { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .eko-gecis-liste { animation: none; } .eko-dugme { transition: none; } }
.eko-gecis-liste a { display: grid; grid-template-columns: 12px 1fr; gap: 2px 10px; align-items: center; padding: 10px 12px; border-radius: 14px; text-decoration: none; color: inherit; }
.eko-gecis-liste a:hover { background: rgba(16, 21, 41, .05); }
.eko-gecis-liste a[aria-current="true"] { background: color-mix(in srgb, var(--renk) 10%, transparent); }
.eko-gecis-liste .nokta { width: 10px; height: 10px; border-radius: 50%; background: var(--renk); }
.eko-gecis-liste strong { font-size: .9375rem; font-weight: 700; letter-spacing: -0.015em; color: var(--renk); }
.eko-gecis-liste small { grid-column: 2; font-size: .8125rem; color: #5B5F6C; line-height: 1.35; }
.eko-gecis-liste [data-urun="altyapi"] { --renk: var(--eko-altyapi); }
.eko-gecis-liste [data-urun="karmatik"] { --renk: var(--eko-karmatik); }
.eko-gecis-liste [data-urun="yanit"] { --renk: var(--eko-yanit); }
.eko-gecis-liste [data-urun="cevap"] { --renk: #3F4FB8; }
.eko-gecis-liste [data-urun="cevap"] .nokta { background: var(--eko-cevap-gecis); }
.eko-gecis-liste [data-urun="cevap"] strong { background: var(--eko-cevap-gecis); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eko-baslik .eko-dugme { min-height: 44px; padding: .65rem 1.1rem; }
/* Mobil: menü ekosistem listesinin altına iner; başlık hap yerine yuvarlak dikdörtgen */
.eko-mobil-menu { display: none; }
@media (max-width: 860px) {
.eko-baslik { border-radius: 22px; padding: 6px 6px 6px 14px; }
.eko-menu { display: none; }
.eko-baslik > .eko-gecis { margin-left: auto; position: static; }
.eko-gecis-liste { left: 0; right: 0; width: auto; z-index: 3; }
.eko-gecis > summary .eko-gecis-yazi { display: none; }
.eko-mobil-menu { display: block; border-top: 1px solid rgba(16, 21, 41, .08); margin-top: 6px; padding-top: 6px; }
.eko-mobil-menu a { display: block; padding: 10px 12px; border-radius: 12px; text-decoration: none; color: inherit; font-weight: 500; }
}
@media (max-width: 420px) { .eko-baslik .eko-dugme { padding: .6rem .85rem; font-size: .875rem; } .eko-marka { font-size: 1.05rem; } }
/* ---- Koyu bant (ikinci plan) ve alt bilgi ---- */
.eko-bant { background: var(--eko-koyu); color: #EEF0F5; border-radius: calc(var(--yaricap) + 8px); padding: clamp(28px, 5vw, 64px); }
.eko-alt { background: var(--eko-koyu); color: rgba(238, 240, 245, .78); font-family: var(--font); padding: 48px 16px 32px; }
.eko-alt a { color: #EEF0F5; text-decoration: none; }
.eko-alt a:hover { text-decoration: underline; }
/* ---- Kahraman (ilk ekran): Higgsfield görseli sağda, metin solda; telefonda görsel metnin altında ----
h1 + p + düğmeler
*/
.eko-kahraman { position: relative; overflow: hidden; margin-top: -84px; padding: calc(84px + clamp(48px, 9vw, 128px)) 16px clamp(56px, 8vw, 112px); min-height: min(88vh, 860px); display: flex; align-items: center; }
.eko-kahraman-gorsel { position: absolute; inset: 0; z-index: 0; }
.eko-kahraman-gorsel img { width: 100%; height: 100%; object-fit: cover; object-position: right center;
-webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .35) 30%, #000 52%), linear-gradient(180deg, #000 72%, transparent 100%);
-webkit-mask-composite: source-in;
mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .35) 30%, #000 52%), linear-gradient(180deg, #000 72%, transparent 100%);
mask-composite: intersect; }
.eko-kahraman-ic { position: relative; z-index: 1; width: 100%; max-width: var(--genislik); margin: 0 auto; }
.eko-kahraman-ic > * { max-width: 40rem; }
.eko-kahraman-ic p { color: var(--murekkep-2); font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); }
@media (max-width: 860px) {
.eko-kahraman { flex-direction: column; align-items: stretch; min-height: 0; padding-bottom: 0; }
.eko-kahraman-gorsel { position: relative; order: 2; margin: 28px -16px 0; aspect-ratio: 4 / 3; }
.eko-kahraman-gorsel img { object-position: 82% center; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%); mask-image: linear-gradient(180deg, transparent 0%, #000 22%); }
}
/* ---- Ekosistem imzası: dört sitenin alt bilgisinde aynı satır, sıra sitenin kendi işiyle başlar ----
Sat. → altyapı.io · Kârını bil. → Kârmatik · Bulun. → Yanıt · sonda cevap.io (cevap.io'nun kendisinde yok) */
.eko-imza { margin: 0; font-family: var(--font); font-size: .9375rem; line-height: 1.6; color: rgba(238, 240, 245, .66); }
.eko-imza a { text-decoration: none; font-weight: 700; letter-spacing: -0.01em; }
.eko-imza a:hover { text-decoration: underline; text-underline-offset: 3px; }
.eko-imza .i-sat { color: #8FA9F2; } /* altyapı.io, koyu zeminde okunur ton */
.eko-imza .i-kar { color: #5CCDB0; } /* Kârmatik */
.eko-imza .i-bul { color: #B49BF3; } /* Yanıt */
.eko-imza .i-cevap { background: linear-gradient(118deg, #8FA9F2, #5CCDB0 50%, #B49BF3); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eko-imza .ayrac { margin: 0 .45em; opacity: .5; }
.eko-imza span.i-cevap { font-weight: 600; }
/* Açık zeminde kullanılırsa (ör. e-posta ya da açık alt bilgi) marka renginin kendisi */
.eko-imza--acik { color: var(--soluk); }
.eko-imza--acik .i-sat { color: var(--eko-altyapi); }
.eko-imza--acik .i-kar { color: var(--eko-karmatik); }
.eko-imza--acik .i-bul { color: var(--eko-yanit); }
.eko-imza--acik .i-cevap { background: var(--eko-cevap-gecis); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* ==========================================================================
HİZALI CAM KARTLAR (kullanıcı kararı 29 Eyl: "kutular hizalı ve liquid olsun")
Aynı satırdaki kartların görseli, başlığı, alt başlığı, metni, kutusu ve bağlantısı AYNI hizada:
kartlar üst ızgaranın satırlarını subgrid ile paylaşır. Bir gruptaki bütün kartlar aynı yuvaları taşır
(eksik olan boş bırakılır: değil, boş öğe).
![]()
Sat.
…
…
…
…
…
…
![]()
========================================================================== */
.eko-bolum { max-width: var(--genislik); margin: 0 auto; padding: clamp(48px, 8vw, 104px) 16px; }
.eko-bolum--gorselli { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); align-items: center; }
.eko-bolum--ters .eko-bolum-gorsel { order: -1; }
.eko-bolum-gorsel { margin: 0; position: relative; }
.eko-bolum-gorsel img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: calc(var(--yaricap) + 4px);
box-shadow: 0 1px 2px rgba(16, 21, 41, .06), 0 24px 60px rgba(16, 21, 41, .14); }
/* Görselin köşesinde küçük cam etiket (isteğe bağlı): … */
.eko-cam-etiket { position: absolute; left: 16px; bottom: 16px; padding: 10px 14px; border-radius: 14px; font: 600 .875rem/1.3 var(--font); color: var(--eko-koyu);
background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%);
border: 1px solid rgba(255, 255, 255, .8); box-shadow: 0 8px 24px rgba(16, 21, 41, .12); }
@media (max-width: 860px) {
.eko-bolum--gorselli { grid-template-columns: 1fr; }
.eko-bolum--ters .eko-bolum-gorsel, .eko-bolum-gorsel { order: 0; }
}
/* ==========================================================================
AÇILIR-KAPANIR SSS (kullanıcı kararı: "sss açılır kapanır olmalı")
FAQPage JSON-LD aynen kalır; içerik içinde de dizinlenir.
========================================================================== */
:root { interpolate-size: allow-keywords; }
.eko-sss { display: grid; gap: 10px; max-width: 820px; margin: 0 auto; font-family: var(--font); }
.eko-sss details { border-radius: 18px; background: linear-gradient(180deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .64));
-webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
border: 1px solid rgba(255, 255, 255, .85); box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(16, 21, 41, .05), 0 8px 24px rgba(16, 21, 41, .06);
transition: box-shadow .25s var(--yumusak); }
.eko-sss details[open] { box-shadow: inset 0 1px 0 #fff, inset 3px 0 0 var(--marka), 0 1px 2px rgba(16, 21, 41, .05), 0 12px 32px rgba(16, 21, 41, .09); }
.eko-sss summary { list-style: none; cursor: pointer; position: relative; padding: 18px 56px 18px 22px; min-height: 44px;
font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; color: var(--murekkep); border-radius: 18px; }
.eko-sss summary::-webkit-details-marker { display: none; }
.eko-sss summary::after { content: ""; position: absolute; right: 24px; top: 50%; width: 9px; height: 9px;
border-right: 2px solid var(--marka); border-bottom: 2px solid var(--marka); transform: translateY(-70%) rotate(45deg); transition: transform .25s var(--yumusak); }
.eko-sss details[open] > summary::after { transform: translateY(-25%) rotate(-135deg); }
.eko-sss .cevap { padding: 0 22px 20px; color: var(--murekkep-2); }
.eko-sss .cevap > :first-child { margin-top: 0; }
.eko-sss .cevap > :last-child { margin-bottom: 0; }
/* Yumuşak açılış (destekleyen tarayıcıda) */
.eko-sss details::details-content { block-size: 0; overflow: clip; transition: block-size .3s var(--yumusak), content-visibility .3s allow-discrete; }
.eko-sss details[open]::details-content { block-size: auto; }
@media (prefers-reduced-motion: reduce) { .eko-sss details::details-content { transition: none; } }
[data-tema="koyu"] .eko-sss details, [data-tema="koyu"] .eko-cam-kart { background: linear-gradient(180deg, rgba(26, 32, 56, .78), rgba(16, 21, 41, .6)); border-color: rgba(255, 255, 255, .08); }
/* ==========================================================================
HİZA KABI (kullanıcı kararı 29 Eyl: "alignlara dikkat et")
Sayfa içeriğinin sol kenarı, sıvı cam başlıktaki marka iminin sol kenarıyla BİREBİR aynı çizgide olur.
Başlık kutusu: min(--genislik, 100% - 24px) genişlikte ortalı; marka imi kutunun 19 px içinde (18 px dolgu + 1 px kenar).
Bütün bölümlerin içeriği .eko-kap içinde durur; bölüm başlıkları sola yaslı. Ortalı başlık yalnız kapanış bandında.
========================================================================== */
.eko-kap { box-sizing: border-box; width: min(var(--genislik), 100% - 24px); margin-inline: auto; padding-inline: 19px; }
@media (max-width: 860px) { .eko-kap { padding-inline: 15px; } } /* mobil başlık: 14 px dolgu + 1 px kenar */
/* İç sayfa ilk ekranı: kısa, iki sütun, sağda 3:2 insanlı görsel. Tam ekran yükseklik YOK (yalnız ana sayfa). */
.eko-sayfa-giris { padding: calc(84px + 40px) 0 clamp(40px, 5vw, 64px); margin-top: -84px; }
.eko-sayfa-giris .eko-kap { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.eko-sayfa-giris img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: calc(var(--yaricap) + 4px); box-shadow: 0 1px 2px rgba(16, 21, 41, .06), 0 20px 48px rgba(16, 21, 41, .12); }
@media (max-width: 860px) { .eko-sayfa-giris .eko-kap { grid-template-columns: 1fr; } }
/* Bölüm ritmi: sabit ve sıkı dikey boşluk */
.eko-bolum-aralik { padding-block: clamp(48px, 6vw, 88px); }
