/* ===========================================================================
TRAMA Surface v4
Design read: B2B yüzey-kaplama mümessilliği; alıcı = mimar / müteahhit / bayi.
Dil: fotoğraf öncelikli, sakin, kurumsal-editoryal. Referans: müşterinin verdiği
2tec2 ekran görüntüsü (yalnız tasarım dili alındı, kompozisyon TRAMA'ya özgü).
Dials: VARIANCE 6 / MOTION 5 / DENSITY 5.
İki kural bu dosyanın omurgası:
1) BİÇİM KİLİDİ - kumanda öğeleri (buton, input, etiket, sayfalama) TAM HAP;
görsel/kart/panel/tablo KESKİN (radius 0). Karışık değil, kurallı.
2) RENK KİLİDİ - arayüz monokrom. Renk yalnız üründen gelir (kartela, swatch).
Kobalt sadece odak halkası ve numune rozetinde; dekoratif kullanılmaz.
Tip: Hanken Grotesk 300/400/500/700 + Geist Mono (teknik veri).
İmza tipografik hamle: tek başlık içinde 300 + 700 karşıtlığı
("Yüzey, projenin ilk kararı."). Vurgu aynı ailenin kalını ile yapılır.
=========================================================================== */
/* ---------- TOKENLAR ---------- */
:root {
--bone: #FFFFFF; /* gövde zemini */
--white: #FFFFFF;
--paper: #F2F1EE; /* tonlu bölüm zemini */
--mist: #E7E4DD; /* görsel bekleme zemini */
--ink: #141518;
--ink-2: #1E1F23;
--steel: #6B6E73;
--steel-2: #9B9DA1;
--cobalt: #1F3FD1; /* yalnız odak + rozet */
--cobalt-2:#16309B;
--line: rgba(20,21,24,.14);
--line-2: rgba(20,21,24,.07);
--onDark: rgba(255,255,255,.62);
--onDark-2:rgba(255,255,255,.28);
/* Referansın tipografik hamlesi: başlığın hafif kısmı SERİF (Zodiak Light),
vurgulanan kelime aynı satırda KALIN GROTESK (Switzer Bold).
Gövde, arayüz ve teknik veri sans/mono. Inter ve türevleri dışarıda. */
--display: 'Zodiak', 'Times New Roman', Georgia, serif;
--sans: 'Switzer', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
--mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
--container: 1560px;
--gutter: clamp(16px, 3.2vw, 56px);
--nav-h: 96px;
--pill: 999px;
--ease: cubic-bezier(.22, 1, .36, 1);
--ease-2: cubic-bezier(.6, .02, .1, 1);
--sh-2: 0 26px 70px rgba(20,21,24,.14);
}
*, *::before, *::after { box-sizing: border-box; }
/* scroll-behavior: smooth KULLANILMIYOR - ScrollTrigger pin'leriyle kavga edip
"tekerlek tutmuyor / sayfa kendi kendine kayiyor" hatasina yol aciyor.
Yumusak gecis gereken yerlerde JS ile scrollIntoView cagrilir.
overflow-x: clip -> hidden GIBI keser ama kaydirma kabi OLUSTURMAZ;
hidden kullanilirsa body scroll container olur ve sticky/pin bozulur. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; overflow-x: clip; }
@supports not (overflow-x: clip) { html { overflow-x: hidden; } }
body {
margin: 0; background: var(--bone); color: var(--ink);
font-family: var(--sans); font-size: 16px; line-height: 1.62; font-weight: 400;
-webkit-font-smoothing: antialiased; overflow-x: clip;
}
img, picture, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--ink); color: #fff; }
:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; }
/* ---------- TİPOGRAFİ ----------
Başlıklar hafif (300). Vurgu ile gelir: italik DEĞİL, aynı ailenin 700'ü. */
h1, h2 {
font-family: var(--display); margin: 0;
font-weight: 300; letter-spacing: -.008em; line-height: 1.1;
}
h3, h4 { font-family: var(--sans); margin: 0; letter-spacing: -.015em; line-height: 1.25; }
h1 { font-size: clamp(2.2rem, 3.7vw, 3.9rem); }
h2 { font-size: clamp(1.85rem, 2.9vw, 3rem); }
h3 { font-size: clamp(1.05rem, 1.35vw, 1.3rem); font-weight: 500; }
h4 { font-size: 1rem; font-weight: 600; letter-spacing: -.01em; }
/* vurgu: serif satırın içinde kalın grotesk - referansın imza hamlesi */
h1 i, h2 i, h1 em, h2 em {
font-family: var(--sans); font-style: normal; font-weight: 700;
letter-spacing: -.028em; color: inherit;
}
h3 i, h4 i, h3 em, h4 em { font-style: normal; font-weight: 700; color: inherit; }
h1 b, h2 b { font-family: var(--sans); font-weight: 700; letter-spacing: -.028em; }
h3 b { font-weight: 700; }
p { margin: 0 0 1.1em; }
.lead { font-size: clamp(.98rem, 1.05vw, 1.08rem); color: var(--steel); line-height: 1.7; max-width: 56ch; font-weight: 400; }
.mono { font-family: var(--mono); font-size: .73rem; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.label, .eyebrow { font-family: var(--mono); font-size: .66rem; letter-spacing: .13em; text-transform: uppercase; color: var(--steel-2); }
/* ---------- YERLEŞİM ---------- */
.wrap { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.wrap--tight { max-width: 1060px; }
.section { padding: clamp(56px, 6.6vw, 112px) 0; position: relative; }
.section--flush, .section--flush-top { padding-top: 0; }
.section--dark { background: var(--ink); color: #fff; }
.section--dark .lead { color: var(--onDark); }
.section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
.section--paper { background: var(--paper); }
.section--white { background: var(--white); }
.section--cobalt { background: var(--ink); color: #fff; }
.section--cobalt h2, .section--cobalt h3 { color: #fff; }
.g12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(14px, 1.7vw, 28px); }
@media (max-width: 900px) { .g12 { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 620px) { .g12 { grid-template-columns: 1fr; } }
.head { max-width: 60ch; margin-bottom: clamp(28px, 3.4vw, 48px); }
.head h2 + p { margin-top: 16px; }
.head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; flex-wrap: wrap; margin-bottom: clamp(26px, 3.2vw, 44px); }
.head-row h2 { max-width: 18ch; }
/* ---------- DÜĞMELER (HAP) ---------- */
.btn {
display: inline-flex; align-items: center; gap: 12px;
padding: 13px 26px; border-radius: var(--pill);
font-family: var(--sans); font-size: .86rem; font-weight: 500; letter-spacing: -.005em;
border: 1px solid transparent; white-space: nowrap; line-height: 1.2;
transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .18s var(--ease);
}
.btn:active { transform: scale(.985); }
.btn svg, .btn i { transition: transform .35s var(--ease); }
.btn:hover svg, .btn:hover i { transform: translateX(4px); }
.btn--fill,
.btn--cobalt { background: var(--ink); color: #fff; }
.btn--fill:hover,
.btn--cobalt:hover { background: var(--ink-2); }
.btn--line { border-color: var(--line); color: var(--ink); background: transparent; }
.btn--line:hover { border-color: var(--ink); background: var(--ink); color: #fff; }
.btn--ghost { border-color: rgba(255,255,255,.55); color: #fff; background: rgba(20,21,24,.14); backdrop-filter: blur(2px); }
.btn--ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }
.btn--onDark { border-color: var(--onDark-2); color: #fff; }
.btn--onDark:hover { background: #fff; color: var(--ink); }
.btn--onCobalt { background: #fff; color: var(--ink); }
.btn--onCobalt:hover { background: var(--paper); }
.btn--sm { padding: 9px 18px; font-size: .78rem; }
.btn--block { width: 100%; justify-content: center; }
/* gövde metni içi bağlantı: renk değil, alt çizgi taşır (renk kilidi) */
.tl { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
text-decoration-color: var(--steel-2); transition: text-decoration-color .25s; }
.tl:hover { text-decoration-color: var(--ink); }
.section--dark .tl, .split-body .tl, .band .tl { color: #fff; text-decoration-color: rgba(255,255,255,.5); }
.finder-count { font-size: .85rem; color: var(--steel); }
.finder-count strong { font-weight: 600; color: var(--ink); }
/* metin bağlantısı: uzayan çizgi + ok */
.tlink { display: inline-flex; align-items: center; gap: 10px; font-size: .88rem; font-weight: 500; color: var(--ink); }
.tlink svg { transition: transform .4s var(--ease); }
.tlink:hover svg { transform: translateX(6px); }
.section--dark .tlink, .tlink--onDark { color: #fff; }
/* ---------- GÖRSEL KAPLARI ----------
satır içi bir sarmalayıcıdır; kabı doldurması için mutlak konumlanır.
Aksi halde img'in height:100% değeri auto yüksekliğe göre çözülür ve kap yarım kalır. */
/* Evrensel: picture kabını doldurur. Kabın yüksekliği belirliyse (aspect-ratio ya da
mutlak konum) görsel tam oturur; belirsizse doğal yüksekliğine döner - iki durumda da güvenli.
Böylece satır içi style="aspect-ratio:.." kullanan iç sayfalar da doğru çalışır. */
picture { display: block; width: 100%; height: 100%; }
picture > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ccard-media, .appcell-media, .proj-media, .pan-card, .split-media, .hpanel, .fam-media .lay { position: relative; }
/* katmanlı kaplar: görsel perdenin ve metnin altında kalmalı */
.band-media > picture, .split-media > picture, .fam-media .lay > picture,
.pan-card-media > picture, .phead-media > picture { position: absolute; inset: 0; }
.hpanel > picture { position: absolute; inset: 0; z-index: -2; }
/* ---------- GÖRSEL BEKLEME ---------- */
.ph { position: relative; overflow: hidden; width: 100%; height: 100%;
background: linear-gradient(160deg, var(--ph-tone, #E7E4DD), color-mix(in srgb, var(--ph-tone, #E7E4DD) 62%, #141518)); }
.ph-grain { position: absolute; inset: 0; opacity: .22; mix-blend-mode: overlay;
background-image: repeating-linear-gradient(41deg, rgba(255,255,255,.16) 0 1px, transparent 1px 6px); }
/* ---------- NAV (ana sayfada görselin üzerinde) ---------- */
.nav-sentinel { position: absolute; top: 0; height: 1px; width: 1px; }
.site-nav {
position: sticky; top: 0; z-index: 900; background: var(--white);
border-bottom: 1px solid var(--line-2);
transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.site-nav .wrap { display: flex; align-items: center; gap: 20px; height: var(--nav-h); }
body.is-home .site-nav { background: transparent; border-bottom-color: transparent; color: #fff; }
body.is-home .site-nav.is-stuck { background: var(--white); color: var(--ink); border-bottom-color: var(--line-2); box-shadow: 0 10px 34px rgba(20,21,24,.07); }
body.is-home .hero { margin-top: calc(-1 * var(--nav-h)); }
.brand { display: flex; align-items: center; gap: 12px; margin-right: auto; color: inherit; }
.brand svg { height: 39px; width: auto; }
.brand-word { font-family: var(--sans); font-weight: 700; font-size: 1.62rem; letter-spacing: .005em; text-transform: uppercase;
line-height: 1; display: inline-flex; align-items: baseline; gap: 8px; }
.brand-word em { font-family: var(--mono); font-style: normal; font-size: .66rem; letter-spacing: .2em;
text-transform: uppercase; opacity: .55; font-weight: 400; }
.menu { display: flex; align-items: center; gap: clamp(16px, 1.9vw, 34px); }
.menu a { font-size: 1.06rem; font-weight: 400; color: inherit; opacity: .8; padding: 8px 0; position: relative; transition: opacity .25s; }
.menu a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: 2px; height: 1px; background: currentColor; transition: right .4s var(--ease); }
.menu a:hover, .menu a.is-active { opacity: 1; }
.menu a:hover::after, .menu a.is-active::after { right: 0; }
.nav-tools { display: flex; align-items: center; gap: 10px; }
.nav-phone { font-family: var(--mono); font-size: .78rem; color: inherit; opacity: .75; }
@media (max-width: 1340px) { .nav-phone { display: none; } }
.tray-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: var(--pill);
border: 1px solid var(--line); color: inherit; font-size: .84rem; font-weight: 500;
transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
.tray-btn:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
body.is-home .site-nav:not(.is-stuck) .tray-btn { border-color: rgba(255,255,255,.45); }
body.is-home .site-nav:not(.is-stuck) .tray-btn:hover { background: #fff; color: var(--ink); border-color: #fff; }
.tray-count { min-width: 19px; height: 19px; padding: 0 5px; border-radius: var(--pill); background: var(--cobalt); color: #fff;
display: grid; place-items: center; font-family: var(--mono); font-size: .64rem; line-height: 1; font-variant-numeric: tabular-nums; }
.nav-cta { display: inline-flex; align-items: center; padding: 10px 20px; border-radius: var(--pill);
background: var(--ink); color: #fff; font-size: .84rem; font-weight: 500; transition: background .3s var(--ease); }
.nav-cta:hover { background: var(--ink-2); }
body.is-home .site-nav:not(.is-stuck) .nav-cta { background: #fff; color: var(--ink); }
@media (max-width: 1020px) { .nav-cta { display: none; } }
.burger { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; color: inherit; }
.burger span { display: block; width: 20px; height: 1.5px; background: currentColor; position: relative; }
.burger span::before, .burger span::after { content: ''; position: absolute; left: 0; width: 20px; height: 1.5px; background: currentColor; transition: transform .3s var(--ease); }
.burger span::before { top: -6px; } .burger span::after { top: 6px; }
body.nav-open .burger span { background: transparent; }
body.nav-open .burger span::before { transform: translateY(6px) rotate(45deg); }
body.nav-open .burger span::after { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 1020px) {
.burger { display: inline-flex; }
/* panel nav'ın kendisine göre konumlanır - sticky/şeffaf durumda da hizada kalır */
.menu { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0;
background: var(--white); color: var(--ink); padding: 8px var(--gutter) 26px; border-bottom: 1px solid var(--line);
transform: translateY(-14px); opacity: 0; pointer-events: none; transition: all .38s var(--ease); }
body.nav-open .menu { transform: none; opacity: 1; pointer-events: auto; }
.menu a { font-size: 1.45rem; font-weight: 300; letter-spacing: -.02em; padding: 14px 0; border-bottom: 1px solid var(--line-2); opacity: 1; }
.menu a::after { display: none; }
}
@media (max-width: 560px) {
.topbar .wrap { font-size: .62rem; gap: 12px; }
.topbar span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tray-btn { padding: 9px 14px; font-size: .78rem; }
.brand svg { height: 20px; }
.brand-word { font-size: .92rem; }
.brand-word em { display: none; }
}
/* ---------- HERO: tam ekran, iki panel ----------
Referanstaki gibi 100dvh iki panel; metin panelin ortasinda, altta kaydirma oku.
Merkezleme burada bilincli: kullanicinin verdigi referansin duzeni bu. */
.hero { display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: var(--ink); }
.hpanel { position: relative; overflow: hidden; background: var(--mist); isolation: isolate;
height: 100dvh; min-height: 560px; display: flex; align-items: center; justify-content: center; }
.hpanel > .ph { position: absolute; inset: 0; z-index: -2; }
.hpanel img, .hpanel .ph { width: 100%; height: 100%; object-fit: cover; }
.hpanel img { animation: heroIn 2.2s var(--ease-2) both; }
@keyframes heroIn { from { scale: 1.08; } to { scale: 1; } }
/* uc katmanli perde: ustte nav, ortada metin, altta ok okunurlugu (WCAG) */
.hpanel::after { content: ''; position: absolute; inset: 0; z-index: -1;
background:
linear-gradient(to bottom, rgba(12,12,14,.5) 0%, rgba(12,12,14,.2) 10%, transparent 24%),
linear-gradient(to top, rgba(12,12,14,.5) 0%, rgba(12,12,14,.16) 20%, transparent 42%),
radial-gradient(ellipse 92% 62% at 50% 50%, rgba(12,12,14,.46), transparent 78%); }
.hpanel-body { position: relative; z-index: 2; width: 100%; color: #fff; text-align: center;
padding: calc(var(--nav-h) + 24px) clamp(24px, 3vw, 56px) clamp(96px, 11vh, 140px);
display: flex; flex-direction: column; align-items: center; }
.hpanel h1, .hpanel h2 { color: #fff; max-width: 13ch; text-wrap: balance; text-shadow: 0 2px 34px rgba(10,10,12,.3); }
.hpanel--a h1 { font-size: clamp(2.4rem, 4.4vw, 4.5rem); }
.hpanel--b h2 { font-size: clamp(1.9rem, 3.2vw, 3.4rem); max-width: 13ch; }
.hpanel p { color: rgba(255,255,255,.86); font-size: clamp(.92rem, 1vw, 1.04rem); max-width: 42ch; margin: 18px 0 0; }
.hpanel .btn { margin-top: clamp(22px, 2.4vw, 34px); }
.hpanel-tag { position: absolute; top: calc(var(--nav-h) + 18px); left: 0; right: 0; z-index: 2; text-align: center;
font-family: var(--mono); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.58); }
/* kaydirma oku: isik raydan asagi iniyor - ziplamiyor, yavas ve sessiz */
.hero-cue { position: absolute; z-index: 3; left: 50%; bottom: clamp(26px, 4.5vh, 50px); transform: translateX(-50%);
width: 48px; height: 62px; display: flex; align-items: flex-end; justify-content: center;
color: rgba(255,255,255,.85); transition: color .35s var(--ease), transform .45s var(--ease); }
.hero-cue:hover { color: #fff; transform: translateX(-50%) translateY(3px); }
.hero-cue svg { overflow: visible; }
.hero-cue .cue-rail { stroke: rgba(255,255,255,.34); }
.hero-cue .cue-spark { stroke: currentColor; stroke-dasharray: 14 44; stroke-dashoffset: 58;
animation: cueSpark 2.8s cubic-bezier(.4,0,.2,1) infinite; }
.hero-cue .cue-head { stroke: currentColor; opacity: .62; transform-origin: 50% 100%;
animation: cueHead 2.8s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes cueSpark { 0% { stroke-dashoffset: 58; opacity: 0; } 16% { opacity: 1; }
72% { stroke-dashoffset: 2; opacity: 1; } 100% { stroke-dashoffset: -10; opacity: 0; } }
@keyframes cueHead { 0%, 52% { opacity: .6; transform: translateY(0); }
76% { opacity: 1; transform: translateY(3px); } 100% { opacity: .6; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
.hero-cue .cue-spark, .hero-cue .cue-head { animation: none; stroke-dashoffset: 0; opacity: .75; transform: none; }
}
@media (max-width: 940px) {
.hero { grid-template-columns: 1fr; gap: 0; }
.hpanel { height: auto; min-height: 92dvh; }
.hpanel--b { min-height: 72dvh; }
.hpanel--b .hpanel-body { padding-top: clamp(40px, 8vh, 80px); }
.hpanel--b .hpanel-tag { top: 20px; }
.hpanel--b .hero-cue { display: none; }
}
/* ---------- KARTELA DESTESI (imza) ----------
48 renk ailelerine gore gruplanmis. Rengin uzerine HIC yazi basilmaz;
ad/kod ustteki okuma satirinda gorunur -> kontrast catismasi imkansiz. */
.ribbon { background: var(--ink); color: #fff; padding: clamp(38px, 4.6vw, 74px) 0 clamp(34px, 4vw, 62px); }
.ribbon .eyebrow { color: rgba(255,255,255,.45); display: block; margin-bottom: 14px; }
.ribbon h2 { color: #fff; }
.ribbon-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; flex-wrap: wrap;
margin-bottom: clamp(26px, 3.2vw, 46px); }
.ribbon-side { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.readout { min-height: 62px; display: flex; flex-direction: column; gap: 4px;
border-left: 1px solid rgba(255,255,255,.2); padding-left: 18px; }
.readout-fam { color: rgba(255,255,255,.5); letter-spacing: .14em; text-transform: uppercase; font-size: .64rem; }
.readout-name { font-size: clamp(1.15rem, 1.7vw, 1.55rem); font-weight: 300; letter-spacing: -.02em; color: #fff;
transition: opacity .2s var(--ease); }
.readout-code { color: rgba(255,255,255,.55); font-size: .72rem; }
.ribbon .tlink { color: #fff; }
.deck { display: grid; grid-template-columns: repeat(8, 1fr); gap: clamp(12px, 1.5vw, 26px); }
.deck-fam { display: block; color: inherit; }
.deck-row { display: flex; height: clamp(88px, 9.5vw, 148px); overflow: hidden;
box-shadow: 0 0 0 1px rgba(255,255,255,.08); transition: box-shadow .35s var(--ease), transform .45s var(--ease); }
.deck-fam:hover .deck-row { box-shadow: 0 0 0 1px rgba(255,255,255,.42); transform: translateY(-4px); }
.deck-cell { flex: 1 1 0; transition: flex-grow .5s var(--ease); }
.deck-row:hover .deck-cell { flex-grow: .68; }
.deck-cell:hover { flex-grow: 3.2; }
.deck-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 12px 1px 0; }
.deck-name { font-size: .9rem; font-weight: 500; letter-spacing: .01em; color: rgba(255,255,255,.9); }
.deck-n { color: rgba(255,255,255,.38); font-size: .68rem; }
.deck-fam:hover .deck-name { color: #fff; }
@media (max-width: 1100px) { .deck { grid-template-columns: repeat(4, 1fr); row-gap: 22px; } }
@media (max-width: 560px) { .deck { grid-template-columns: repeat(2, 1fr); }
.deck-row { height: clamp(84px, 26vw, 120px); } }
/* ---------- YATAY GEZİNTİ (kartela karuseli / mekân rayı) ---------- */
.crsl-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; flex-wrap: wrap;
margin-bottom: clamp(26px, 3vw, 44px); }
.crsl-tools { display: flex; align-items: center; gap: 10px; }
.crsl-tools .mono { color: var(--steel-2); margin-right: 8px; }
.rail-btn { width: 46px; height: 46px; border-radius: var(--pill); display: inline-flex; align-items: center; justify-content: center;
border: 1px solid var(--line); color: var(--ink); transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
.rail-btn:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.rail-btn:disabled { opacity: .28; cursor: default; }
.rail-btn:disabled:hover { background: transparent; color: var(--ink); border-color: var(--line); }
.section--dark .rail-btn { border-color: var(--onDark-2); color: #fff; }
.section--dark .rail-btn:hover { background: #fff; color: var(--ink); }
.section--dark .crsl-tools .mono { color: rgba(255,255,255,.5); }
.rail-wrap { position: relative; margin: 0 calc(-1 * var(--gutter)); }
.rail { display: flex; align-items: stretch; gap: clamp(12px, 1.4vw, 22px); overflow-x: auto; scroll-snap-type: x mandatory;
padding: 0 var(--gutter) 8px; scrollbar-width: none; cursor: grab; scroll-behavior: smooth; }
.rail::-webkit-scrollbar { display: none; }
.rail.is-drag { cursor: grabbing; scroll-behavior: auto; }
/* eşit yükseklik: metin uzunluğu kart boyunu değiştirmesin */
/* flex kisayolunda clamp() bazi tarayicilarda dusuyor -> genislik ayri verilir */
.rail > * { scroll-snap-align: start; display: flex; flex: 0 0 auto; width: clamp(250px, 23vw, 356px); }
/* kartela kartı: görsel + üstte etiket, altta ailenin BÜTÜN renkleri */
.ccard { display: flex; flex-direction: column; width: 100%; color: inherit; }
.ccard-foot { margin-top: auto; }
.ccard-media { position: relative; overflow: hidden; background: var(--mist); aspect-ratio: 3/4; }
.ccard-media img, .ccard-media .ph { width: 100%; height: 100%; object-fit: cover; transition: transform 1.3s var(--ease); }
.ccard:hover .ccard-media img { transform: scale(1.045); }
.ccard-media::after { content: ''; position: absolute; inset: 0;
background: linear-gradient(to top, rgba(12,12,14,.72), rgba(12,12,14,.08) 46%, transparent 70%); }
.ccard-over { position: absolute; inset: auto 0 0 0; z-index: 2; padding: 18px; color: #fff; }
.ccard-over h3 { color: #fff; font-size: clamp(1.25rem, 1.8vw, 1.7rem); font-weight: 500; }
.ccard-tag { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: var(--pill);
background: rgba(255,255,255,.16); backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,.28);
font-family: var(--mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 10px; }
.ccard-strip { display: flex; height: 30px; }
.ccard-strip span { flex: 1; transition: flex .45s var(--ease); }
.ccard:hover .ccard-strip span { flex: .85; }
.ccard-strip span:hover { flex: 2.4; }
.ccard-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
padding: 11px 0 0; color: var(--steel); font-size: .82rem; }
.ccard-foot > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ccard-foot .mono { color: var(--steel-2); flex: 0 0 auto; }
/* mekân kartı (koyu ray) */
.pan-card { position: relative; overflow: hidden; background: var(--ink-2); aspect-ratio: 3/4; display: block; }
.pan-card img, .pan-card .ph { width: 100%; height: 100%; object-fit: cover; opacity: .82; transition: opacity .5s, transform 1.4s var(--ease); }
.pan-card:hover img { opacity: .6; transform: scale(1.05); }
.pan-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 42%, rgba(10,10,12,.9)); }
.pan-card-body { position: absolute; inset: auto 0 0 0; z-index: 2; padding: 20px; }
.pan-card-body h3 { color: #fff; font-weight: 500; }
.pan-card-body p { font-size: .82rem; color: rgba(255,255,255,.66); margin: 7px 0 0; }
.pan-card-body .mono { color: rgba(255,255,255,.5); display: block; margin-bottom: 9px; letter-spacing: .1em; text-transform: uppercase; font-size: .62rem; }
.pan-card-media { position: absolute; inset: 0; }
.pan-card-media img, .pan-card-media .ph { width: 100%; height: 100%; object-fit: cover; }
/* ---------- TAM GENİŞLİK BEYAN BANDI ---------- */
.band { position: relative; overflow: hidden; background: var(--ink); min-height: clamp(400px, 56vh, 620px);
display: flex; align-items: center; }
.band-media { position: absolute; inset: 0; }
.band-media img, .band-media .ph { width: 100%; height: 100%; object-fit: cover; }
.band-media::after { content: ''; position: absolute; inset: 0;
background: linear-gradient(100deg, rgba(10,10,12,.86) 0%, rgba(10,10,12,.6) 42%, rgba(10,10,12,.18) 78%, transparent 100%); }
.band .wrap { position: relative; z-index: 2; padding-top: clamp(44px,5vw,80px); padding-bottom: clamp(44px,5vw,80px); }
.band h2 { color: #fff; max-width: 15ch; text-wrap: balance; }
.band p { color: rgba(255,255,255,.76); max-width: 46ch; margin: 18px 0 0; }
.band .btn { margin-top: clamp(20px, 2.4vw, 32px); }
.band .eyebrow { color: rgba(255,255,255,.55); display: block; margin-bottom: 18px; }
/* ---------- MEKÂN IZGARASI (dört sütun, kutusuz) ---------- */
.appgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.8vw, 30px) clamp(14px, 1.6vw, 26px); }
@media (max-width: 1020px) { .appgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .appgrid { grid-template-columns: 1fr; } }
.appcell { display: block; color: inherit; }
.appcell-media { position: relative; overflow: hidden; background: var(--mist); aspect-ratio: 4/3; }
.appcell-media img, .appcell-media .ph { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.appcell:hover .appcell-media img { transform: scale(1.05); }
.appcell-body { padding: 14px 0 0; border-top: 1px solid var(--line); margin-top: 14px; }
.appcell h3 { font-weight: 500; }
.appcell p { font-size: .84rem; color: var(--steel); margin: 8px 0 0; }
.appcell .mono { display: block; margin-top: 10px; color: var(--steel-2); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; }
/* ---------- TEKNİK BLOK ---------- */
.tech-grid { display: grid; grid-template-columns: minmax(0,6fr) minmax(0,6fr); gap: clamp(26px, 4vw, 70px); align-items: center; }
@media (max-width: 900px) { .tech-grid { grid-template-columns: 1fr; } }
.tech-list { list-style: none; margin: 0; padding: 0; counter-reset: lyr; }
.tech-list li { display: grid; grid-template-columns: 46px 1fr; gap: 16px; padding: 16px 0;
border-top: 1px solid rgba(255,255,255,.13); cursor: default; transition: padding-left .35s var(--ease); }
.tech-list li:last-child { border-bottom: 1px solid rgba(255,255,255,.13); }
.tech-list li:hover, .tech-list li.is-on { padding-left: 10px; }
.tech-list li::before { counter-increment: lyr; content: counter(lyr, decimal-leading-zero);
font-family: var(--mono); font-size: .7rem; color: rgba(255,255,255,.42); padding-top: 5px; }
/* bazı sayfalarda madde numarası ayrıca ile geliyor;
ızgara 46px+1fr olduğu için üçüncü öğe metni 46px'e sıkıştırıyordu.
Numarayı ::before sayacı basar, span gizlenir. */
.tech-list .n { display: none; }
.tech-list h4 { font-weight: 600; font-size: 1rem; margin: 0 0 4px; color: #fff; }
.tech-list p { font-size: .85rem; color: rgba(255,255,255,.56); margin: 0; }
.tech-figure svg { width: 100%; height: auto; }
.tech-figure .lyr { transition: transform .8s var(--ease), opacity .5s; }
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(255,255,255,.16);
margin-top: clamp(34px, 4.4vw, 62px); }
.metrics > div { padding: clamp(18px,2vw,26px); border-right: 1px solid rgba(255,255,255,.16); }
.metrics > div:last-child { border-right: 0; }
.metrics strong { display: block; font-family: var(--display); font-weight: 300; font-size: clamp(1.9rem, 3.4vw, 3.1rem);
letter-spacing: -.03em; line-height: 1; color: #fff; }
.metrics span { display: block; font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase;
color: rgba(255,255,255,.46); margin-top: 10px; }
@media (max-width: 720px) { .metrics { grid-template-columns: 1fr 1fr; } .metrics > div { padding-bottom: 20px; } }
/* ---------- PROJE ---------- */
.projrow { display: grid; gap: clamp(14px, 1.7vw, 26px); }
.projrow-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 1.7vw, 26px); }
@media (max-width: 760px) { .projrow-2 { grid-template-columns: 1fr; } }
.proj { position: relative; display: block; overflow: hidden; background: var(--ink); }
.proj-media { aspect-ratio: 21/9; }
.projrow-2 .proj-media { aspect-ratio: 4/3; }
.proj-media img, .proj-media .ph { width: 100%; height: 100%; object-fit: cover; opacity: .9; transition: transform 1.6s var(--ease), opacity .5s; }
.proj:hover .proj-media { --hs: 1.035; }
.proj:hover img { opacity: .7; }
.proj-body { position: absolute; inset: auto 0 0 0; padding: clamp(20px, 2.6vw, 38px); color: #fff;
display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap;
background: linear-gradient(180deg, transparent, rgba(10,10,12,.86)); }
.proj-body h3 { color: #fff; font-size: clamp(1.25rem, 2.1vw, 2rem); font-weight: 500; }
.proj-facts { display: flex; gap: 22px; flex-wrap: wrap; font-family: var(--mono); font-size: .66rem;
letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.7); }
@media (max-width: 700px) { .proj-media { aspect-ratio: 4/3; } }
/* ---------- EDİTORYAL İKİLİ ---------- */
.editorial { display: grid; grid-template-columns: minmax(0,7fr) minmax(0,5fr); gap: clamp(26px, 4vw, 80px); align-items: start; }
@media (max-width: 860px) { .editorial { grid-template-columns: 1fr; } }
.editorial h2 { max-width: 14ch; text-wrap: balance; }
.editorial-side p { color: var(--steel); font-size: .96rem; line-height: 1.75; }
/* ---------- MARKA DİZİNİ ---------- */
.brand-index { border-top: 1px solid var(--line); margin-top: clamp(30px, 4vw, 56px); }
.brand-index a, .brand-index > div { display: grid; grid-template-columns: 44px minmax(0,3fr) minmax(0,4fr) minmax(0,3fr);
gap: 20px; align-items: baseline; padding: 19px 0; border-bottom: 1px solid var(--line-2);
transition: background .35s var(--ease), padding-left .35s var(--ease); }
.brand-index > div:hover { background: var(--white); padding-left: 12px; }
.brand-index .no { font-family: var(--mono); font-size: .68rem; color: var(--steel-2); }
.brand-index .nm { font-family: var(--display); font-weight: 500; font-size: clamp(1.05rem, 1.5vw, 1.32rem); letter-spacing: -.015em; }
.brand-index .sg { font-size: .88rem; color: var(--steel); }
.brand-index .ct { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--steel-2); text-align: right; }
@media (max-width: 780px) { .brand-index a, .brand-index > div { grid-template-columns: 34px 1fr; gap: 4px 14px; }
.brand-index .sg, .brand-index .ct { grid-column: 2; text-align: left; } }
/* ---------- NUMUNE BANDI (yarım / yarım) ---------- */
.split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.split-media { position: relative; overflow: hidden; background: var(--mist); min-height: clamp(300px, 42vh, 520px); }
.split-media img, .split-media .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split-body { background: var(--ink); color: #fff; padding: clamp(30px, 4.4vw, 76px); display: flex; flex-direction: column; justify-content: center; }
.split-body h2 { color: #fff; max-width: 14ch; }
.split-body p { color: rgba(255,255,255,.72); max-width: 46ch; }
.steps { list-style: none; margin: clamp(22px,2.6vw,34px) 0 0; padding: 0; border-top: 1px solid rgba(255,255,255,.2); }
.steps li { display: grid; grid-template-columns: 46px 1fr; gap: 16px; padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,.2); }
.steps .mono { color: rgba(255,255,255,.45); padding-top: 3px; }
.steps strong { display: block; font-weight: 600; font-size: .98rem; margin-bottom: 3px; }
.steps span.t { font-size: .85rem; color: rgba(255,255,255,.62); }
/* ---------- BÜLTEN ---------- */
.news { text-align: center; }
.news h2 { max-width: 20ch; margin: 0 auto; }
.news p { color: var(--steel); max-width: 52ch; margin: 16px auto 0; }
.news-form { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: clamp(24px,3vw,36px); }
.news-form input { flex: 1 1 300px; max-width: 400px; padding: 14px 22px; border-radius: var(--pill);
border: 1px solid var(--line); background: var(--white); font: inherit; font-size: .9rem; color: var(--ink); }
.news-form input:focus { outline: none; border-color: var(--ink); }
.news-note { font-family: var(--mono); font-size: .64rem; color: var(--steel-2); margin-top: 14px; }
/* ---------- KARTELA IZGARASI (koleksiyon detay) ---------- */
/* auto-fit: boş hücre bırakmaz, kalan yeri renkler doldurur */
.chart { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); }
.chart-cell { position: relative; background: var(--white); overflow: hidden; }
.chart-cell .sw { aspect-ratio: 1; background-size: cover; background-position: center; }
.chart-cell .meta { padding: 11px 13px 14px; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.chart-cell b { font-size: .85rem; font-weight: 500; }
.chart-cell .mono { color: var(--steel-2); }
.chart-cell .add { position: absolute; inset: auto 0 0 0; transform: translateY(101%); background: var(--ink); color: #fff;
padding: 11px; font-family: var(--sans); font-size: .78rem; font-weight: 500; text-align: center; transition: transform .35s var(--ease); }
.chart-cell:hover .add, .chart-cell:focus-within .add { transform: none; }
.chart-cell.is-added .add { background: var(--cobalt); transform: none; }
/* ---------- SPEC TABLO ---------- */
.spec { width: 100%; border-collapse: collapse; font-size: .88rem; }
.spec tr + tr { border-top: 1px solid var(--line-2); }
.spec td { padding: 12px 0; vertical-align: top; }
.spec td:first-child { color: var(--steel); width: 46%; }
.spec td:last-child { font-family: var(--mono); font-size: .78rem; text-align: right; }
/* ---------- SEKME ---------- */
.tabs { display: flex; gap: 8px; margin-bottom: 28px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { padding: 10px 20px; border-radius: var(--pill); border: 1px solid var(--line); font-size: .84rem; font-weight: 500;
color: var(--steel); white-space: nowrap; transition: all .3s var(--ease); }
.tabs button:hover { border-color: var(--ink); color: var(--ink); }
.tabs button.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.tab-panel { display: none; }
.tab-panel.is-on { display: block; animation: fade .45s var(--ease); }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* ---------- PROSE ---------- */
.prose { max-width: 68ch; }
.prose h2 { font-size: clamp(1.3rem, 2vw, 1.85rem); margin: 30px 0 12px; font-weight: 500; }
.prose h3 { margin: 24px 0 10px; }
.prose p { color: var(--steel); }
.prose ul { color: var(--steel); padding-left: 18px; }
.prose li { margin-bottom: 7px; }
/* ---------- SAYFA BAŞLIĞI ----------
includes/page-hero.php .page-hero kullanıyor; görselli varyantta koyu zemin + perde. */
.page-hero { background: var(--paper); position: relative; overflow: hidden;
padding: clamp(34px, 4.4vw, 74px) 0 clamp(28px, 3.2vw, 52px); }
.page-hero > .wrap { position: relative; z-index: 2; width: 100%; }
.page-hero h1 { max-width: 17ch; text-wrap: balance; }
.page-hero .lead { margin-top: 18px; }
.kicker { display: block; font-family: var(--mono); font-size: .66rem; letter-spacing: .13em;
text-transform: uppercase; color: var(--steel-2); margin-bottom: 14px; }
.page-hero--media { background: var(--ink); color: #fff; display: flex; align-items: flex-end;
min-height: clamp(330px, 44vh, 500px); padding-top: clamp(60px, 7vw, 110px); }
.page-hero--media h1 { color: #fff; }
.page-hero--media .lead { color: var(--onDark); }
.page-hero--media .crumbs { color: rgba(255,255,255,.55); }
.page-hero--media .crumbs a:hover { color: #fff; }
.kicker.eyebrow--light, .page-hero--media .kicker { color: rgba(255,255,255,.7); }
.phead { background: var(--paper); padding: clamp(34px, 4.4vw, 74px) 0 clamp(28px, 3.2vw, 50px); position: relative; overflow: hidden; }
.phead h1 { max-width: 17ch; }
.phead .lead { margin-top: 18px; }
.phead--dark { background: var(--ink); color: #fff; }
.phead--dark h1 { color: #fff; }
.phead--dark .lead { color: var(--onDark); }
.phead-media { position: absolute; inset: 0; }
.phead-media img, .phead-media .ph { width: 100%; height: 100%; object-fit: cover; }
.phead-media::after { content: ''; position: absolute; inset: 0;
background: linear-gradient(95deg, rgba(12,12,14,.9), rgba(12,12,14,.56) 62%, rgba(12,12,14,.24)); }
.phead--dark .wrap { position: relative; z-index: 2; }
.crumbs { display: flex; gap: 9px; align-items: center; font-family: var(--mono); font-size: .64rem; letter-spacing: .08em;
color: var(--steel-2); margin-bottom: 18px; text-transform: uppercase; }
.phead--dark .crumbs { color: rgba(255,255,255,.5); }
.crumbs a:hover { color: var(--ink); }
.phead--dark .crumbs a:hover { color: #fff; }
.crumbs i { font-style: normal; opacity: .45; }
/* ---------- FORM ---------- */
.field { display: grid; gap: 7px; margin-bottom: 16px; }
.field label { font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--steel); }
.field input, .field select, .field textarea { width: 100%; padding: 13px 18px; border: 1px solid var(--line); border-radius: var(--pill);
background: var(--white); color: var(--ink); font: inherit; font-size: .92rem; transition: border-color .25s, box-shadow .25s; }
.field textarea { border-radius: 18px; min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(20,21,24,.07); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.card, .form-card { background: var(--white); border: 1px solid var(--line-2); padding: clamp(22px, 2.8vw, 38px); }
.section--paper .card, .section--paper .form-card { border-color: var(--line); }
.note { font-family: var(--mono); font-size: .66rem; color: var(--steel-2); line-height: 1.65; }
.alert { padding: 14px 18px; border-left: 2px solid var(--ink); background: var(--white); font-size: .9rem; margin-bottom: 16px; }
.sum { list-style: none; margin: 0; padding: 0; }
.sum li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line-2); font-size: .87rem; }
.sum .dot { width: 26px; height: 26px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); flex: 0 0 auto; }
/* ---------- SSS ---------- */
.faq-item { border-bottom: 1px solid var(--line-2); }
.faq-q { width: 100%; text-align: left; display: flex; gap: 18px; align-items: baseline; padding: 21px 0;
font-family: var(--display); font-weight: 500; font-size: clamp(1rem, 1.35vw, 1.16rem); letter-spacing: -.015em; }
.faq-q .sign { margin-left: auto; font-family: var(--mono); color: var(--steel-2); transition: transform .35s var(--ease); }
.faq-item.is-open .sign { transform: rotate(45deg); color: var(--ink); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .45s var(--ease); }
.faq-item.is-open .faq-a { max-height: 520px; }
.faq-a p { color: var(--steel); padding-bottom: 22px; margin: 0; max-width: 72ch; }
/* ---------- NUMUNE TEPSİSİ ---------- */
.tray { position: fixed; z-index: 950; right: 16px; bottom: 16px; width: min(360px, calc(100vw - 32px));
background: var(--white); border: 1px solid var(--line); box-shadow: var(--sh-2); transform: translateY(150%); transition: transform .5s var(--ease); }
.tray.is-open { transform: none; }
.tray-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; background: var(--ink); color: #fff; }
.tray-head strong { font-family: var(--display); font-size: .96rem; font-weight: 500; }
.tray-list { list-style: none; margin: 0; padding: 4px 20px; max-height: 244px; overflow-y: auto; }
.tray-list li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-2); font-size: .84rem; }
.tray-list .dot { width: 28px; height: 28px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); flex: 0 0 auto; }
.tray-list .rm { margin-left: auto; color: var(--steel-2); font-size: 1.05rem; line-height: 1; }
.tray-list .rm:hover { color: var(--ink); }
.tray-foot { padding: 14px 20px 18px; }
.tray-empty { padding: 20px; color: var(--steel-2); font-size: .84rem; }
/* ---------- FOOTER ---------- */
.site-footer { background: var(--paper); color: var(--ink); border-top: 1px solid var(--line); }
.footer-ask { display: flex; align-items: center; justify-content: center; gap: clamp(18px, 2.4vw, 34px); flex-wrap: wrap;
text-align: center; padding: clamp(40px, 5vw, 76px) 0; border-bottom: 1px solid var(--line); }
.footer-ask h2 { font-size: clamp(1.5rem, 2.2vw, 2.2rem); }
.footer-grid { display: grid; grid-template-columns: minmax(0,4fr) repeat(4, minmax(0,2fr));
gap: clamp(22px, 3vw, 48px); padding: clamp(40px, 5vw, 72px) 0 clamp(28px, 3vw, 44px); }
@media (max-width: 1020px) { .footer-grid { grid-template-columns: 1fr 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 620px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer-brand p { max-width: 36ch; font-size: .89rem; line-height: 1.7; color: var(--steel); }
.footer-social { display: flex; gap: 10px; margin-top: 22px; }
.footer-social a { width: 38px; height: 38px; border-radius: var(--pill); border: 1px solid var(--line);
display: inline-flex; align-items: center; justify-content: center; font-size: .85rem; color: var(--steel);
transition: all .3s var(--ease); }
.footer-social a:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.site-footer h4 { font-family: var(--mono); font-size: .64rem; font-weight: 400; letter-spacing: .13em;
text-transform: uppercase; color: var(--steel-2); margin: 0 0 16px; }
.footer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: .87rem; color: var(--steel); }
.footer-list a { color: var(--steel); transition: color .25s; }
.footer-list a:hover { color: var(--ink); }
.footer-bottom { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center;
padding: 20px 0 26px; border-top: 1px solid var(--line);
font-family: var(--mono); font-size: .65rem; letter-spacing: .04em; color: var(--steel-2); }
.footer-bottom [data-powered-slot] { text-align: center; flex: 1 1 auto; }
.footer-bottom [data-powered-slot] a:hover { color: var(--ink); }
.footer-legal { display: flex; flex-wrap: wrap; gap: 18px; justify-content: flex-end; }
.footer-legal a:hover { color: var(--ink); }
@media (max-width: 700px) { .footer-bottom { justify-content: center; text-align: center; }
.footer-bottom [data-powered-slot], .footer-legal { flex: 1 1 100%; justify-content: center; } }
/* ===========================================================================
SCROLL SAHNELERİ (GSAP + ScrollTrigger + Lenis)
Motor varken CSS hiçbir şeyi gizlemez; başlangıç durumlarını GSAP kurar.
Motor yoksa (`html.no-scrub`) aşağıdaki CSS-only hareket devreye girer.
=========================================================================== */
/* --- sabitlenen kartela destesi --- */
.ribbon .deck-fam { transition: opacity .5s var(--ease); }
.deck-fam.is-active .deck-row { box-shadow: 0 0 0 1px rgba(255,255,255,.5); }
.deck-fam.is-active .deck-name { color: #fff; }
/* --- sabitlenen koleksiyon rayı: dikey kaydırma yatay ilerlemeye döner --- */
.section.is-pinning { padding-block: 0; min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; }
.section.is-pinning .crsl-head { margin-bottom: clamp(20px, 2.4vw, 34px); }
.section.is-pinning .crsl-head .lead { display: none; }
.section.is-pinning .rail > * { width: clamp(250px, 21vw, 322px); }
.rail.is-pinned { overflow: hidden; cursor: default; scroll-behavior: auto; scroll-snap-type: none; }
.pin-hint { display: none; }
.section.is-pinning .pin-hint { display: inline-flex; align-items: center; gap: 9px;
font-family: var(--mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
color: var(--steel-2); margin-top: 18px; }
.pin-hint span { display: block; width: 34px; height: 1px; background: var(--line); position: relative; overflow: hidden; }
.pin-hint span::after { content: ''; position: absolute; inset: 0; background: var(--ink);
transform: translateX(-100%); animation: hintRun 2.2s var(--ease) infinite; }
@keyframes hintRun { 0% { transform: translateX(-100%); } 60%,100% { transform: translateX(100%); } }
/* --- yığılan proje kartları --- */
.projstack { display: grid; gap: clamp(26px, 5vh, 70px); }
.projstack > .proj { position: sticky; top: calc(var(--nav-h) + 22px); will-change: transform; }
@media (max-width: 760px) { .projstack > .proj { position: static; } }
/* ---------- HAREKET (motor yokken devreye giren yedek) ---------- */
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease), transform 1s var(--ease);
transition-delay: var(--rd, 0s); }
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal-d="1"] { --rd: .07s; } [data-reveal-d="2"] { --rd: .14s; }
[data-reveal-d="3"] { --rd: .21s; } [data-reveal-d="4"] { --rd: .28s; }
/* PARALLAX: görsel kabın içinde ters yönde kayar - derinlik hissi */
[data-px] { overflow: hidden; }
html.no-scrub [data-px] img { will-change: transform; transform: translate3d(0, var(--px, 0%), 0) scale(calc(1.16 * var(--hs, 1))); }
[data-px] img { transition: opacity .5s var(--ease); }
/* HERO: kaydırdıkça içerik yükselip siliniyor, görsel hafifçe büyüyor */
html.no-scrub .hpanel-body { transform: translate3d(0, calc(var(--hp, 0) * -46px), 0); opacity: calc(1 - var(--hp, 0) * 1.15); }
html.no-scrub .hpanel img { transform: scale(calc(1 + var(--hp, 0) * .1)); }
html.no-scrub .hero-cue { opacity: calc(1 - var(--hp, 0) * 2.4); }
/* KARTELA DESTESİ: hücreler sırayla aşağıdan yükselir (imza an) */
html.no-scrub .deck-cell { transform: scaleY(0); opacity: 0; }
.deck-cell { transform-origin: 50% 100%;
transition: transform .7s var(--ease), opacity .5s linear, flex-grow .5s var(--ease);
transition-delay: var(--cd, 0s); }
.deck.is-in .deck-cell { transform: scaleY(1); opacity: 1; }
html.no-scrub .deck-foot { opacity: 0; transform: translateY(10px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--fd, 0s); }
.deck.is-in .deck-foot { opacity: 1; transform: none; }
/* okuma ilerlemesi: nav'ın altında ince şerit (destekleyen tarayıcıda) */
@supports (animation-timeline: scroll()) {
.site-nav::after { content: ''; position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%;
background: var(--ink); transform-origin: 0 50%; transform: scaleX(0);
animation: navProgress linear both; animation-timeline: scroll(root block); }
body.is-home .site-nav:not(.is-stuck)::after { background: rgba(255,255,255,.8); }
@keyframes navProgress { to { transform: scaleX(1); } }
}
/* .wipe eskiden clip-path ile açılıyordu; clip-path elemanın kesişim kutusunu da
sıfırladığı için IntersectionObserver hiç tetiklenmiyor ve içerik görünmez kalıyordu.
Kesme yerine kaydırma + saydamlık: gözlemciyi kilitlemez. */
html.has-motion .wipe { opacity: 0; transform: translateY(24px);
transition: opacity .9s var(--ease), transform 1s var(--ease); }
html.has-motion .wipe.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
[data-reveal] { opacity: 1; transform: none; transition: none; }
.hpanel img { animation: none; transform: none; }
[data-px] img { transform: none; }
.hpanel-body { transform: none; opacity: 1; }
.hero-cue { opacity: 1; }
.deck-cell { transform: none; opacity: 1; transition: flex-grow .5s var(--ease); }
.deck-foot { opacity: 1; transform: none; }
.site-nav::after { display: none; }
}
/* ---------- YARDIMCI ---------- */
.mt-s { margin-top: 10px; } .mt-m { margin-top: 24px; } .mt-l { margin-top: 44px; }
.center { text-align: center; }
.hr, .divider { height: 1px; background: var(--line); border: 0; margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: var(--pill);
border: 1px solid var(--line); background: transparent; font-size: .82rem; font-weight: 500; color: var(--steel);
transition: all .3s var(--ease); }
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.chipbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chipbar-label { font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--steel-2); margin-right: 6px; }
.finder-grid > .is-hidden { display: none; }
/* .g12 güvenlik ağı: iç sayfalar çocuklara açık span vermiyor.
Çocuk sayısına göre eşit paylaşım; :has() desteklenmezse hepsi tam satır olur. */
.g12 > * { grid-column: span 12; }
.g12:has(> :nth-child(2)) > * { grid-column: span 6; }
.g12:has(> :nth-child(3)) > * { grid-column: span 4; }
.g12:has(> :nth-child(4)) > * { grid-column: span 3; }
.g12:has(> :nth-child(5)) > * { grid-column: span 4; }
.g12:has(> :nth-child(7)) > * { grid-column: span 3; }
/* prose + aside ikilisi asimetrik kalsın (özgüllüğü yukarıdaki :has kuralını aşmalı) */
.g12:has(> .prose) > .prose { grid-column: span 7; }
.g12:has(> .prose) > aside { grid-column: span 5; }
@media (max-width: 900px) {
.g12 > * { grid-column: span 6; }
.g12:has(> :nth-child(4)) > *, .g12:has(> :nth-child(7)) > * { grid-column: span 3; }
.g12:has(> .prose) > .prose, .g12:has(> .prose) > aside { grid-column: span 6; }
}
@media (max-width: 620px) { .g12 > * { grid-column: 1 / -1 !important; } }
.fam { position: relative; background: var(--white); border: 1px solid var(--line-2); display: flex; flex-direction: column;
transition: border-color .4s var(--ease); }
.fam:hover { border-color: var(--ink); }
.fam-media { position: relative; overflow: hidden; background: var(--mist); aspect-ratio: 4/3; }
.fam--wide .fam-media { aspect-ratio: 16/9; }
.fam-media .lay { position: absolute; inset: 0; transition: opacity .7s var(--ease), transform 1.2s var(--ease); }
.fam-media .lay img, .fam-media .lay .ph { width: 100%; height: 100%; object-fit: cover; }
.fam-media .lay--room { opacity: 0; transform: scale(1.04); }
.fam:hover .lay--room { opacity: 1; transform: none; }
.fam:hover .lay--macro { opacity: 0; }
.fam-code, .fam-media .tag { position: absolute; top: 12px; left: 12px; z-index: 2; border-radius: var(--pill);
background: rgba(255,255,255,.9); color: var(--ink); padding: 5px 12px;
font-family: var(--mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; }
.fam-body { padding: 17px 19px 19px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.fam-body h3 { font-size: clamp(1.15rem, 1.7vw, 1.5rem); font-weight: 500; }
.fam-body p { font-size: .87rem; color: var(--steel); margin: 0; }
.fam-spec { font-family: var(--mono); font-size: .66rem; color: var(--steel-2); letter-spacing: .04em;
margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line-2); }
.fam-chips { display: flex; height: 28px; }
.fam-chips span { flex: 1; transition: flex .4s var(--ease); }
.fam-chips:hover span { flex: .8; }
.fam-chips span:hover { flex: 2.6; }
.fam-cta { background: var(--ink); color: #fff; padding: clamp(24px, 3vw, 44px);
display: flex; flex-direction: column; justify-content: space-between; gap: 24px; height: 100%; }
.fam-cta h3 { color: #fff; font-size: clamp(1.3rem, 2vw, 1.8rem); font-weight: 300; }
.fam-cta .lead { color: var(--onDark); }
.rails { background: var(--ink); color: #fff; }
.rails h2 { color: #fff; max-width: 14ch; }
.rails .lead { color: var(--onDark); max-width: 44ch; }
.rails-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; flex-wrap: wrap; margin-bottom: clamp(26px, 3vw, 42px); }
.rails-tools { display: flex; align-items: center; gap: 10px; }
.rails-tools .mono { color: rgba(255,255,255,.5); margin-right: 8px; }
.rails .rail-btn { border-color: var(--onDark-2); color: #fff; }
.rails .rail-btn:hover { background: #fff; color: var(--ink); }
.project-row { display: grid; gap: clamp(14px, 1.7vw, 26px); }
.size { font-family: var(--mono); font-size: .68rem; color: var(--steel-2); }
/* ---------- İÇ SAYFA PARÇALARI ---------- */
.brand-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1px; background: var(--line);
border: 1px solid var(--line); }
.brand-grid > div { background: var(--white); padding: clamp(20px, 2.4vw, 30px); transition: background .3s var(--ease); }
.brand-grid > div:hover { background: var(--paper); }
.brand-grid small { font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--steel-2); }
.brand-grid h4 { margin: 10px 0 8px; font-size: 1.15rem; font-weight: 500; }
.brand-grid p { font-size: .87rem; color: var(--steel); margin: 0; }
.serif-quote { font-size: clamp(1.15rem, 1.7vw, 1.5rem); font-weight: 300; line-height: 1.4; letter-spacing: -.02em;
color: var(--ink); border-left: 2px solid var(--ink); padding-left: 20px; margin: 28px 0; }
.app-card-reqs { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.app-card-reqs li { padding: 5px 11px; border-radius: var(--pill); border: 1px solid var(--line);
font-family: var(--mono); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; color: var(--steel); }
.col-card-family { position: absolute; top: 12px; left: 12px; z-index: 2; border-radius: var(--pill);
background: rgba(255,255,255,.9); color: var(--ink); padding: 5px 12px;
font-family: var(--mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; }
.chart-swatch { flex: 1; min-height: 26px; }
.project-media { position: relative; overflow: hidden; background: var(--mist); aspect-ratio: 4/3; }
.project-media > picture { position: absolute; inset: 0; }
.project-media img, .project-media .ph { width: 100%; height: 100%; object-fit: cover; }
.project-meta { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid var(--line); }
.project-meta li { display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
padding: 11px 0; border-bottom: 1px solid var(--line-2); font-size: .87rem; }
.project-meta span { color: var(--steel); }
.project-meta strong { font-weight: 500; font-family: var(--mono); font-size: .78rem; }
.foot-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: .88rem; color: var(--steel); }
.foot-list a:hover { color: var(--ink); }
.dl-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.dl-list li { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
padding: 16px 0; border-bottom: 1px solid var(--line-2); }
.demo-note { padding: 14px 18px; border: 1px dashed var(--line); background: var(--paper);
font-size: .86rem; color: var(--steel); margin: 18px 0; }
.demo-note strong { color: var(--ink); }
/* form eşanlamlıları (bazı sayfalar Bootstrap adlandırması kullanıyor) */
.form-group { display: grid; gap: 7px; margin-bottom: 16px; }
.form-group > label { font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--steel); }
.form-control { width: 100%; padding: 13px 18px; border: 1px solid var(--line); border-radius: var(--pill);
background: var(--white); color: var(--ink); font: inherit; font-size: .92rem; }
textarea.form-control { border-radius: 18px; min-height: 120px; resize: vertical; }
.form-control:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(20,21,24,.07); }
.help-text { font-family: var(--mono); font-size: .64rem; color: var(--steel-2); }
.alert-success { padding: 14px 18px; border-left: 2px solid var(--ink); background: var(--paper); font-size: .9rem; margin-bottom: 16px; }
.alert-danger { padding: 14px 18px; border-left: 2px solid #B23A2E; background: #FBF2F1; font-size: .9rem; margin-bottom: 16px; }
/* lisans / bakım / hata sayfaları */
.lp-wrap, .activation-container, .link-container { max-width: 560px; margin: 0 auto; padding: clamp(50px,7vw,110px) var(--gutter); }
.lp-box { background: var(--white); border: 1px solid var(--line); padding: clamp(24px,3vw,40px); }
.lp-meta, .maintenance-info { font-family: var(--mono); font-size: .68rem; color: var(--steel-2); line-height: 1.7; }
.lang-toggle { display: flex; gap: 6px; justify-content: center; margin-bottom: 22px; }
.lang-toggle a, .lang-toggle button { padding: 7px 14px; border-radius: var(--pill); border: 1px solid var(--line); font-size: .78rem; }
.lang-toggle .is-on, .lang-toggle .active { background: var(--ink); border-color: var(--ink); color: #fff; }
.error-page { min-height: 60vh; display: flex; align-items: center; }
.error-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.error-btn-primary { background: var(--ink); color: #fff; }
.error-btn-secondary { border: 1px solid var(--line); color: var(--ink); }
.error-links, .error-footer { margin-top: 34px; font-size: .86rem; color: var(--steel); }
.error-links-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
.error-links-list a { text-decoration: underline; text-underline-offset: 3px; }
.error-container { max-width: 620px; margin: 0 auto; text-align: center; padding: clamp(60px,9vw,140px) var(--gutter); }
.error-code { font-family: var(--display); font-weight: 300; font-size: clamp(4rem, 12vw, 9rem); line-height: 1; letter-spacing: -.04em; }
.error-title { margin: 14px 0 10px; }
.error-desc { color: var(--steel); max-width: 46ch; margin: 0 auto 26px; }
.error-icon { color: var(--steel-2); margin-bottom: 18px; font-size: 1.6rem; }
.error-btn { display: inline-flex; }
/* koyu bolumdeki metrik seridi kap kenarina hizali kalsin */
.section--dark .metrics > div { padding-left: 0; }
.section--dark .metrics > div:first-child { padding-left: 0; }
/* ===========================================================================
DESEN BÜYÜTECİ (lightbox) - "desenlerin görülmesi için"
=========================================================================== */
.zoomable { position: relative; cursor: zoom-in; }
.zoom-lens { position: absolute; z-index: 4; right: 12px; top: 12px; width: 34px; height: 34px;
display: inline-flex; align-items: center; justify-content: center; border-radius: var(--pill);
background: rgba(255,255,255,.9); color: var(--ink); box-shadow: 0 2px 14px rgba(10,10,12,.18);
opacity: 0; transform: scale(.82); pointer-events: auto; cursor: zoom-in;
transition: opacity .3s var(--ease), transform .35s var(--ease); }
.zoomable:hover .zoom-lens, .zoomable:focus-within .zoom-lens { opacity: 1; transform: none; }
.zoom-lens:hover { background: #fff; }
.chart-cell .zoom-lens { right: 8px; top: 8px; width: 30px; height: 30px; }
@media (hover: none) { .zoom-lens { opacity: .92; transform: none; } }
body.zoom-open { overflow: hidden; }
.zoom { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center;
padding: clamp(16px, 4vw, 56px);
background: rgba(10,10,12,.9); backdrop-filter: blur(14px) saturate(120%);
opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility .4s; }
.zoom.is-open { opacity: 1; visibility: visible; }
.zoom-fig { margin: 0; max-width: min(1180px, 100%); max-height: 100%; display: flex; flex-direction: column;
transform: scale(.965); transition: transform .5s var(--ease); }
.zoom.is-open .zoom-fig { transform: none; }
.zoom-fig img { max-width: 100%; max-height: calc(100dvh - clamp(120px, 18vh, 190px)); object-fit: contain;
background: var(--ink-2); opacity: 0; transition: opacity .35s var(--ease), transform .45s var(--ease); }
.zoom-fig img.in { opacity: 1; }
.zoom-fig figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
padding: 16px 2px 0; color: #fff; }
.zoom-cap { font-size: clamp(.95rem, 1.2vw, 1.12rem); font-weight: 400; }
.zoom-idx { color: rgba(255,255,255,.5); }
.zoom-close { position: absolute; top: clamp(14px, 2.4vw, 30px); right: clamp(14px, 2.4vw, 30px);
width: 46px; height: 46px; border-radius: var(--pill); display: inline-flex; align-items: center; justify-content: center;
border: 1px solid rgba(255,255,255,.26); color: #fff; transition: background .3s var(--ease), color .3s var(--ease); }
.zoom-close:hover { background: #fff; color: var(--ink); }
.zoom-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 54px; height: 54px;
border-radius: var(--pill); display: inline-flex; align-items: center; justify-content: center;
border: 1px solid rgba(255,255,255,.26); color: #fff; transition: background .3s var(--ease), color .3s var(--ease); }
.zoom-nav:hover { background: #fff; color: var(--ink); }
.zoom-prev { left: clamp(10px, 2.2vw, 30px); }
.zoom-next { right: clamp(10px, 2.2vw, 30px); }
@media (max-width: 700px) {
.zoom-nav { top: auto; bottom: 18px; transform: none; width: 46px; height: 46px; }
.zoom-prev { left: 18px; } .zoom-next { right: 18px; }
.zoom-fig figcaption { flex-direction: column; gap: 5px; padding-bottom: 66px; }
}
@media (prefers-reduced-motion: reduce) {
.zoom, .zoom-fig, .zoom-fig img { transition: none; }
}
/* yığılan proje kartı: her kart tam genişlik, bir öncekinin üzerine biner */
.projstack > .proj { border-radius: 0; overflow: hidden; }
.projstack .proj-media { aspect-ratio: 2/1; }
@media (max-width: 760px) { .projstack .proj-media { aspect-ratio: 4/3; } }
.proj-no { display: block; color: rgba(255,255,255,.55); margin-bottom: 8px; letter-spacing: .12em; }
/* sabitlenirken deste ekranı doldursun (yarım ekranda asılı kalmasın) */
html.has-scrub .ribbon { min-height: 100dvh; display: flex; align-items: center; }
html.has-scrub .ribbon > .wrap { width: 100%; }
html.has-scrub .ribbon .deck-row { height: clamp(120px, 15vh, 210px); }
/* ===========================================================================
YÜZEY NOTLARI (blog modülü)
Parçalar: includes/blog/*.php · veri: includes/blog-helpers.php
=========================================================================== */
/* --- yazı kartı --- */
.pgrid { display: grid; gap: clamp(18px, 2.2vw, 34px) clamp(16px, 1.8vw, 28px); }
.pgrid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1000px) { .pgrid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .pgrid--3 { grid-template-columns: 1fr; } }
.pcard-link { display: block; color: inherit; }
.pcard-media { position: relative; overflow: hidden; background: var(--mist); }
.pcard-media img { transition: transform 1.3s var(--ease); }
.pcard:hover .pcard-media img { transform: scale(1.045); }
.pcard-cat { position: absolute; z-index: 2; left: 12px; top: 12px; border-radius: var(--pill);
background: rgba(255,255,255,.92); color: var(--ink); padding: 6px 13px;
font-family: var(--mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; }
.pcard-body { padding: 16px 0 0; }
.pcard-title { font-family: var(--sans); font-weight: 500; font-size: clamp(1.02rem, 1.25vw, 1.2rem);
line-height: 1.3; letter-spacing: -.015em; transition: opacity .25s; }
.pcard:hover .pcard-title { opacity: .68; }
.pcard-excerpt { font-size: .89rem; color: var(--steel); margin: 10px 0 0; line-height: 1.65; }
/* öne çıkan: yatay, büyük */
.pcard--wide .pcard-link { display: grid; grid-template-columns: minmax(0,7fr) minmax(0,5fr);
gap: clamp(20px, 3vw, 52px); align-items: center; }
.pcard--wide .pcard-body { padding: 0; }
.pcard--wide .pcard-title { font-family: var(--display); font-weight: 300; letter-spacing: -.01em;
font-size: clamp(1.6rem, 2.6vw, 2.6rem); line-height: 1.12; }
.pcard--wide .pcard-excerpt { font-size: 1rem; margin-top: 16px; max-width: 46ch; }
@media (max-width: 900px) { .pcard--wide .pcard-link { grid-template-columns: 1fr; } .pcard--wide .pcard-body { padding-top: 16px; } }
/* --- künye --- */
.pmeta { display: flex; align-items: center; gap: 11px; margin-top: 14px; }
.pmeta-avatar { width: 30px; height: 30px; border-radius: var(--pill); overflow: hidden; flex: 0 0 auto; background: var(--mist); }
.pmeta-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pmeta-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pmeta-text b { font-size: .84rem; font-weight: 500; }
.pmeta-text .mono { font-size: .66rem; color: var(--steel-2); letter-spacing: .06em; }
.pmeta--compact { margin-top: 10px; }
/* --- sayfalama --- */
.pager { display: flex; gap: 8px; justify-content: center; margin-top: clamp(34px, 4.4vw, 62px); }
.pager-i { min-width: 44px; height: 44px; border-radius: var(--pill); border: 1px solid var(--line);
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--mono); font-size: .72rem; transition: all .3s var(--ease); }
.pager-i:hover { border-color: var(--ink); }
.pager-i.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
/* --- yazar kartı --- */
.alist { border-top: 1px solid var(--line); margin-top: clamp(26px, 3.4vw, 46px); }
.acard--row { display: grid; grid-template-columns: 54px minmax(0,1fr) auto; gap: 18px; align-items: center;
padding: 16px 0; border-bottom: 1px solid var(--line-2); color: inherit;
transition: background .3s var(--ease), padding-left .3s var(--ease); }
.acard--row:hover { background: var(--white); padding-left: 12px; }
.acard-photo { width: 54px; height: 54px; border-radius: var(--pill); overflow: hidden; background: var(--mist); }
.acard-photo img { width: 100%; height: 100%; object-fit: cover; }
.acard-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.acard-txt b { font-weight: 500; font-size: 1rem; }
.acard-txt span { font-size: .85rem; color: var(--steel); }
.acard-n { color: var(--steel-2); }
.acard--full { display: grid; grid-template-columns: 96px minmax(0,1fr); gap: clamp(18px, 2.4vw, 30px);
background: var(--paper); border: 1px solid var(--line); padding: clamp(20px, 2.6vw, 34px);
margin-top: clamp(34px, 4vw, 56px); }
@media (max-width: 600px) { .acard--full { grid-template-columns: 1fr; } }
.acard--full .acard-photo { width: 96px; height: 96px; }
.acard-kicker { display: block; color: var(--steel-2); letter-spacing: .14em; text-transform: uppercase; font-size: .62rem; }
.acard--full h3 { font-size: 1.3rem; font-weight: 500; margin: 8px 0 2px; }
.acard-role { font-size: .88rem; color: var(--steel); }
.acard--full p { font-size: .92rem; color: var(--steel); line-height: 1.7; margin: 12px 0 0; max-width: 62ch; }
.acard-links { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.acard-soc { width: 36px; height: 36px; border-radius: var(--pill); border: 1px solid var(--line);
display: inline-flex; align-items: center; justify-content: center; font-size: .82rem; color: var(--steel);
transition: all .3s var(--ease); }
.acard-soc:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
/* --- yazı başlık bandı --- */
.readbar { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 940; background: transparent; pointer-events: none; }
.readbar span { display: block; height: 100%; width: 0; background: var(--ink); transition: width .12s linear; }
.post-hero { position: relative; overflow: hidden; background: var(--ink); color: #fff; isolation: isolate;
padding: clamp(64px, 9vw, 130px) 0 clamp(34px, 4.4vw, 62px); display: flex; align-items: flex-end;
min-height: clamp(360px, 52vh, 560px); }
.post-hero-media { position: absolute; inset: 0; z-index: -2; }
.post-hero-media img, .post-hero-media .ph { width: 100%; height: 100%; object-fit: cover; }
.post-hero::after { content: ''; position: absolute; inset: 0; z-index: -1;
background: linear-gradient(to top, rgba(10,10,12,.92) 12%, rgba(10,10,12,.62) 52%, rgba(10,10,12,.34)); }
.post-hero .wrap { position: relative; z-index: 2; }
.post-hero h1 { color: #fff; max-width: 22ch; text-wrap: balance; }
.post-hero .lead { color: rgba(255,255,255,.8); margin-top: 18px; max-width: 60ch; }
.post-hero .crumbs { color: rgba(255,255,255,.55); }
.post-hero .crumbs a:hover { color: #fff; }
.post-hero-meta { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 30px); flex-wrap: wrap;
margin-top: clamp(20px, 2.6vw, 32px); padding-top: 18px; border-top: 1px solid rgba(255,255,255,.2); }
.post-hero-meta .mono { color: rgba(255,255,255,.6); font-size: .7rem; }
.phm-author { display: flex; align-items: center; gap: 12px; color: #fff; }
.phm-photo { width: 40px; height: 40px; border-radius: var(--pill); overflow: hidden; background: var(--ink-2); flex: 0 0 auto; }
.phm-photo img { width: 100%; height: 100%; object-fit: cover; }
.phm-author b { display: block; font-weight: 500; font-size: .92rem; }
.phm-author .mono { display: block; font-size: .64rem; color: rgba(255,255,255,.55); }
/* --- gövde + yan sütun --- */
.post-grid { display: grid; grid-template-columns: minmax(0,3fr) minmax(0,8fr); gap: clamp(24px, 4vw, 76px); align-items: start; }
@media (max-width: 940px) { .post-grid { grid-template-columns: 1fr; } }
.post-side { position: sticky; top: calc(var(--nav-h) + 24px); display: grid; gap: 26px; }
@media (max-width: 940px) { .post-side { position: static; } }
.toc-kicker { display: block; color: var(--steel-2); letter-spacing: .14em; text-transform: uppercase; font-size: .62rem; margin-bottom: 14px; }
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.toc li a { display: grid; grid-template-columns: 26px 1fr; gap: 10px; padding: 9px 0 9px 16px;
font-size: .88rem; color: var(--steel); line-height: 1.4; transition: color .25s, border-color .25s;
border-left: 1px solid transparent; margin-left: -1px; }
.toc li a .mono { font-size: .62rem; color: var(--steel-2); padding-top: 2px; }
.toc li a:hover, .toc li a.is-on { color: var(--ink); border-left-color: var(--ink); }
.share { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 22px; border-top: 1px solid var(--line); }
.share .mono { color: var(--steel-2); letter-spacing: .12em; text-transform: uppercase; font-size: .62rem; margin-right: 4px; }
.share a, .share button { width: 36px; height: 36px; border-radius: var(--pill); border: 1px solid var(--line);
display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; color: var(--steel);
transition: all .3s var(--ease); }
.share a:hover, .share button:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.share button.is-done { background: var(--ink); border-color: var(--ink); color: #fff; }
/* --- yazı gövdesi --- */
.post-body { max-width: 74ch; font-size: 1.04rem; line-height: 1.78; }
.post-body h2 { font-size: clamp(1.5rem, 2.1vw, 2rem); margin: clamp(38px,4.4vw,58px) 0 14px; scroll-margin-top: calc(var(--nav-h) + 24px); }
.post-body h3 { font-size: clamp(1.08rem, 1.4vw, 1.25rem); font-weight: 600; margin: 30px 0 10px; }
.post-body p { color: var(--steel); margin: 0 0 1.15em; }
.post-body strong { color: var(--ink); font-weight: 600; }
.post-body ul, .post-body ol { color: var(--steel); padding-left: 20px; margin: 0 0 1.3em; }
.post-body li { margin-bottom: 9px; }
.post-body li::marker { color: var(--steel-2); }
.post-body blockquote { margin: clamp(28px,3.4vw,42px) 0; padding: 0 0 0 24px; border-left: 2px solid var(--ink);
font-family: var(--display); font-weight: 300; font-size: clamp(1.15rem, 1.7vw, 1.45rem);
line-height: 1.4; letter-spacing: -.01em; color: var(--ink); }
.post-body blockquote p { color: inherit; margin: 0; }
.post-body figure { margin: clamp(28px,3.4vw,44px) 0; }
.post-body figure img { width: 100%; }
.post-body figcaption { font-family: var(--mono); font-size: .68rem; color: var(--steel-2); margin-top: 10px; }
.post-body table { width: 100%; border-collapse: collapse; font-size: .92rem; margin: clamp(24px,3vw,38px) 0; }
.post-body table th { text-align: left; font-weight: 600; font-size: .74rem; letter-spacing: .1em;
text-transform: uppercase; color: var(--steel-2); padding: 0 12px 12px 0; border-bottom: 1px solid var(--line); }
.post-body table td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line-2); color: var(--steel); vertical-align: top; }
.post-body table td:first-child { color: var(--ink); font-weight: 500; }
.post-body .note-box { background: var(--paper); border-left: 2px solid var(--ink); padding: clamp(18px,2.2vw,26px);
margin: clamp(24px,3vw,38px) 0; font-size: .95rem; }
.post-body .note-box p:last-child { margin-bottom: 0; }
.post-body .note-box strong { display: block; margin-bottom: 6px; }
.post-body a:not(.btn) { color: var(--ink); text-decoration: underline; text-underline-offset: 3px;
text-decoration-color: var(--steel-2); }
.post-body a:not(.btn):hover { text-decoration-color: var(--ink); }
.post-cta { display: flex; align-items: center; justify-content: space-between; gap: clamp(18px,2.4vw,34px);
flex-wrap: wrap; background: var(--ink); color: #fff; padding: clamp(24px,3vw,40px);
margin-top: clamp(38px,4.6vw,64px); }
.post-cta h3 { color: #fff; font-size: clamp(1.15rem,1.7vw,1.5rem); font-weight: 500; }
.post-cta p { color: rgba(255,255,255,.7); font-size: .92rem; margin: 8px 0 0; max-width: 44ch; }
.post-cta-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.post-cta .btn--fill { background: #fff; color: var(--ink); }
.post-cta .btn--fill:hover { background: var(--paper); }
.post-cta .btn--line { border-color: rgba(255,255,255,.34); color: #fff; }
.post-cta .btn--line:hover { background: #fff; color: var(--ink); border-color: #fff; }
/* --- önceki / sonraki --- */
.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px,1.8vw,26px);
margin-top: clamp(34px,4vw,58px); border-top: 1px solid var(--line); padding-top: clamp(22px,2.6vw,34px); }
@media (max-width: 700px) { .post-nav { grid-template-columns: 1fr; } }
.post-nav-i { display: block; color: inherit; padding: 18px 0; transition: opacity .25s; }
.post-nav-i:hover { opacity: .62; }
.post-nav-i .mono { display: block; color: var(--steel-2); letter-spacing: .12em; text-transform: uppercase; font-size: .62rem; margin-bottom: 8px; }
.post-nav-i b { font-weight: 500; font-size: 1.02rem; line-height: 1.35; }
.post-nav-i--next { text-align: right; }
@media (max-width: 700px) { .post-nav-i--next { text-align: left; } }
/* 7 menü öğesiyle orta genişliklerde taşmayı önle (burger 1020px'te devreye giriyor) */
@media (max-width: 1240px) {
.menu { gap: 14px; }
.menu a { font-size: .95rem; }
.brand-word { font-size: 1.4rem; }
.brand svg { height: 34px; }
}
/* ===========================================================================
ÜRÜN (KARTELA) SAYFASI
Her bölüm ayrı düzen ailesi: tam-kanama makro başlık, yapışkan ürün çubuğu,
kartela ızgarası, sürgülü ölçek karşılaştırması, koyu teknik föy,
çizgi kullanım listesi, karşılaştırma tablosu.
=========================================================================== */
/* --- 1 · makro başlık --- */
.pdp-hero { position: relative; overflow: hidden; background: var(--ink); color: #fff; isolation: isolate;
padding: clamp(58px, 8vw, 116px) 0 clamp(30px, 3.6vw, 54px); display: flex; align-items: flex-end;
min-height: clamp(420px, 60vh, 640px); }
.pdp-hero-media { position: absolute; inset: 0; z-index: -2; }
.pdp-hero-media img, .pdp-hero-media .ph { width: 100%; height: 100%; object-fit: cover; }
.pdp-hero::after { content: ''; position: absolute; inset: 0; z-index: -1;
background: linear-gradient(to top, rgba(10,10,12,.94) 8%, rgba(10,10,12,.6) 46%, rgba(10,10,12,.3)); }
.pdp-hero .wrap { position: relative; z-index: 2; width: 100%; }
.pdp-hero .crumbs { color: rgba(255,255,255,.55); }
.pdp-hero .crumbs a:hover { color: #fff; }
.pdp-hero h1 { color: #fff; font-size: clamp(2.4rem, 5vw, 5rem); letter-spacing: -.02em; }
.pdp-hero .lead { color: rgba(255,255,255,.8); margin-top: 16px; max-width: 44ch; }
.pdp-sku { display: block; color: rgba(255,255,255,.6); letter-spacing: .16em; text-transform: uppercase;
font-size: .66rem; margin-bottom: 14px; }
.pdp-hero-row { display: grid; grid-template-columns: minmax(0,7fr) minmax(0,5fr); gap: clamp(24px, 4vw, 70px);
align-items: end; margin-top: clamp(18px, 2.4vw, 34px); }
@media (max-width: 900px) { .pdp-hero-row { grid-template-columns: 1fr; } }
.pdp-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 0;
background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.18); }
.pdp-facts > div { background: rgba(14,14,16,.55); backdrop-filter: blur(6px); padding: 16px 18px; }
.pdp-facts dt { color: rgba(255,255,255,.5); letter-spacing: .14em; text-transform: uppercase; font-size: .6rem; }
.pdp-facts dd { margin: 7px 0 0; font-size: .95rem; font-weight: 500; line-height: 1.35; }
/* --- 2 · yapışkan ürün çubuğu --- */
.pdp-sentinel { display: block; height: 1px; }
.pdp-bar { position: sticky; top: var(--nav-h); z-index: 880; background: rgba(255,255,255,.94);
backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
transform: translateY(-101%); opacity: 0; pointer-events: none;
transition: transform .45s var(--ease), opacity .3s var(--ease); }
.pdp-bar.is-on { transform: none; opacity: 1; pointer-events: auto; }
.pdp-bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 62px; flex-wrap: wrap; }
.pdp-bar-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pdp-bar-swatch { width: 26px; height: 26px; border-radius: var(--pill); box-shadow: inset 0 0 0 1px rgba(0,0,0,.14); flex: 0 0 auto; }
.pdp-bar-id b { font-weight: 600; font-size: 1rem; }
.pdp-bar-id .mono { color: var(--steel-2); font-size: .68rem; }
.pdp-bar-act { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
@media (max-width: 700px) { .pdp-bar-act .tlink { display: none; } .pdp-bar .wrap { min-height: 56px; } }
/* --- 3 · kartela --- */
.chart-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; flex-wrap: wrap;
margin-bottom: clamp(24px, 3vw, 40px); }
.chart-head h2 { max-width: 16ch; }
.chart-head .lead { margin-top: 14px; max-width: 52ch; }
.chart-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chart-tools .chip .mono { color: inherit; opacity: .55; margin-left: 4px; }
.chart-cell.is-out { display: none; }
.chart-cell { transition: box-shadow .3s var(--ease); }
.chart-cell.is-added { box-shadow: inset 0 0 0 2px var(--ink); }
.chart-cell .sw { position: relative; }
.chart-cell.is-added .sw::after { content: ''; position: absolute; right: 10px; top: 10px; width: 22px; height: 22px;
border-radius: var(--pill); background: var(--ink);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat,
linear-gradient(#000, #000);
-webkit-mask-composite: xor; mask-composite: exclude; }
.chart-foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
margin-top: clamp(20px, 2.6vw, 34px); }
.chart-foot .note { max-width: 62ch; margin: 0; }
/* --- 4 · ölçek karşılaştırması --- */
.cmp { position: relative; overflow: hidden; background: var(--mist); aspect-ratio: 21/9;
cursor: ew-resize; user-select: none; touch-action: pan-y; }
@media (max-width: 760px) { .cmp { aspect-ratio: 4/3; } }
.cmp-a, .cmp-b { position: absolute; inset: 0; }
.cmp-a { width: 50%; overflow: hidden; border-right: 1px solid rgba(255,255,255,.85); }
.cmp-a img, .cmp-b img, .cmp-a .ph, .cmp-b .ph { width: 100%; height: 100%; object-fit: cover; }
.cmp-a picture, .cmp-b picture { position: absolute; inset: 0; }
.cmp-a picture img { width: 100vw; max-width: none; }
.cmp-tag { position: absolute; bottom: 16px; z-index: 4; border-radius: var(--pill);
background: rgba(255,255,255,.92); color: var(--ink); padding: 7px 14px;
font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; }
.cmp-tag--l { left: 16px; } .cmp-tag--r { right: 16px; }
.cmp-handle { position: absolute; z-index: 5; top: 50%; left: 50%; transform: translate(-50%, -50%);
width: 46px; height: 46px; border-radius: var(--pill); background: #fff; color: var(--ink);
display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 22px rgba(10,10,12,.28);
cursor: ew-resize; }
.cmp-handle::before { content: ''; position: absolute; left: 50%; top: 50%; width: 1px; height: 100vh;
background: rgba(255,255,255,.85); transform: translate(-50%, -50%); z-index: -1; }
/* --- 5 · teknik föy --- */
.sheet { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(24px, 4vw, 70px);
border-top: 1px solid rgba(255,255,255,.18); }
@media (max-width: 820px) { .sheet { grid-template-columns: 1fr; } }
.sheet dl { margin: 0; }
.sheet dl > div { display: grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr); gap: 16px;
padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,.13); }
.sheet dt { color: rgba(255,255,255,.55); font-size: .88rem; }
.sheet dd { margin: 0; font-family: var(--mono); font-size: .8rem; color: #fff; line-height: 1.55; text-align: right; }
@media (max-width: 520px) { .sheet dl > div { grid-template-columns: 1fr; gap: 4px; } .sheet dd { text-align: left; } }
.sheet-dl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: clamp(24px, 3vw, 40px); }
.sheet-dl > .mono { color: rgba(255,255,255,.45); letter-spacing: .14em; text-transform: uppercase; font-size: .62rem; margin-right: 6px; }
.sheet-dl-i { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: var(--pill);
border: 1px solid rgba(255,255,255,.24); color: #fff; font-size: .84rem; transition: all .3s var(--ease); }
.sheet-dl-i:hover { background: #fff; color: var(--ink); border-color: #fff; }
.sheet-dl-i .mono { font-size: .64rem; opacity: .55; }
/* --- 6 · kullanım listesi --- */
.uselist { border-top: 1px solid var(--line); }
.use-row { display: grid; grid-template-columns: 44px minmax(0,3fr) minmax(0,6fr) 40px; gap: 20px; align-items: baseline;
padding: 20px 0; border-bottom: 1px solid var(--line-2); color: inherit;
transition: background .3s var(--ease), padding-left .3s var(--ease); }
.use-row:hover { background: var(--paper); padding-left: 12px; }
.use-row .mono { color: var(--steel-2); font-size: .68rem; }
.use-t { font-family: var(--sans); font-weight: 500; font-size: clamp(1.05rem, 1.5vw, 1.3rem); letter-spacing: -.015em; }
.use-d { font-size: .89rem; color: var(--steel); line-height: 1.6; }
.use-go { justify-self: end; color: var(--steel-2); transition: transform .35s var(--ease), color .3s; }
.use-row:hover .use-go { transform: translateX(5px); color: var(--ink); }
@media (max-width: 760px) { .use-row { grid-template-columns: 34px 1fr; gap: 6px 14px; }
.use-d { grid-column: 2; } .use-go { display: none; } }
/* --- 8 · karşılaştırma tablosu --- */
.cmp-table-wrap { overflow-x: auto; }
.cmp-table { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 640px; }
.cmp-table th, .cmp-table td { padding: 16px 18px; text-align: left; vertical-align: top;
border-bottom: 1px solid var(--line-2); }
.cmp-table thead th { border-bottom: 1px solid var(--line); font-weight: 500; font-size: 1.05rem; }
.cmp-table thead th span { display: block; font-size: .62rem; color: var(--steel-2); letter-spacing: .12em;
text-transform: uppercase; margin-top: 5px; }
.cmp-table thead th a:hover { text-decoration: underline; text-underline-offset: 3px; }
.cmp-table td:first-child, .cmp-table th:first-child { color: var(--steel); font-size: .82rem; width: 150px; padding-left: 0; }
.cmp-table .is-current { background: var(--white); }
.cmp-table thead .is-current { box-shadow: inset 0 2px 0 var(--ink); }
.cmp-strip { display: flex; height: 22px; width: 100%; max-width: 180px; }
.cmp-strip i { flex: 1; }
.cmp-swatches td { padding-top: 20px; padding-bottom: 20px; }
/* ===========================================================================
HOVER BÜYÜTECİ
Kartela hücresinde imlecin altındaki doku büyür; kart görsellerinde ölçülü
yakınlaşma olur. Dokunmatik cihazda hiçbiri devreye girmez (JS hover sorar).
=========================================================================== */
.chart-cell .sw { cursor: zoom-in; transition: background-size .4s var(--ease); will-change: background-size; }
.chart-cell .sw.is-mag { background-size: 280%; }
.chart-cell .sw:focus-visible { outline: 2px solid var(--cobalt); outline-offset: -2px; }
/* imleci takip eden büyüteç işareti: yalnız ipucu, tıklamayı engellemez */
.mag { position: absolute; z-index: 4; width: 40px; height: 40px; margin: -20px 0 0 -20px;
border-radius: var(--pill); border: 1px solid rgba(255,255,255,.9);
background: rgba(18,19,22,.32); backdrop-filter: blur(2px); color: #fff;
display: flex; align-items: center; justify-content: center; pointer-events: none;
opacity: 0; transform: scale(.62);
transition: opacity .18s var(--ease), transform .28s var(--ease);
box-shadow: 0 2px 14px rgba(10,10,12,.28); }
.mag.on { opacity: 1; transform: none; }
/* kart görselinde ölçülü yakınlaşma (mekân fotoğrafı, doku değil) */
.ccard-media, .fam-media .lay { cursor: zoom-in; }
.ccard-media.is-mag-soft img,
.fam-media .lay.is-mag-soft img { transition: transform .45s var(--ease); }
/* hücre büyütülürken sağ üstteki lightbox düğmesi öne çıksın */
.chart-cell .sw.is-mag ~ .add,
.chart-cell:hover .zoom-lens { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.chart-cell .sw { transition: none; }
.mag { transition: none; }
.ccard-media.is-mag-soft img,
.fam-media .lay.is-mag-soft img { transition: none; }
}
@media (hover: none) {
.chart-cell .sw, .ccard-media, .fam-media .lay { cursor: pointer; }
}
/* --- surface.ist logo boyutu (orijinal SVG lockup; %50 buyutuldu) --- */
.brand svg.brand-logo { height: 58px; width: auto; }
@media (max-width: 940px) { .brand svg.brand-logo { height: 30px; } }