/* ============================================================ INTERDI -- Typographic, Minimal, Section-Clear #e92038 · #020202 · #ffffff | Steelfish (CDN) + Poppins Max-width: 1400px everywhere ============================================================ */ /* ── FONT YÜKLEME ────────────────────────────────────────── Steelfish & Poppins: HTML içinde ile yükleniyor. ⚠️ BÜYÜK "I" BOZULMASI (BUiLD / DAİLY / FİVE DİSCİPLİNES): Sebep font DEĞİL → CSS "text-transform:uppercase" tarayıcının/OS'un locale'ini (Türkçe) baz alıp küçük "i" harfini noktalı "İ" yapıyordu. her tarayıcıda bu Unicode özel-casing'i engellemiyor. ÇÖZÜM (A — kalıcı): Sorunlu başlıklarda text-transform:uppercase KALDIRILDI ve metin HTML kaynağında zaten BÜYÜK yazıldı. Böylece transform katmanı devreye girmez → "i"→"İ" dönüşümü fiziksel olarak imkânsız. Düzeltilen yerler aşağıda "KALDIRILDI → TR locale i→İ bug" notuyla işaretli. */ /* ── ÇÖZÜM (B — GENEL/KALICI) ────────────────────────────── CSS `-webkit-locale` özelliği text-transform'ın hangi DİL kurallarını kullanacağını sabitler. "en" verince küçük "i" → BÜYÜK "I" olur, noktalı "İ" ASLA üretilmez — OS/tarayıcı dili Türkçe olsa, panel olsa bile. Bu, sitedeki TÜM uppercase metinleri (mevcut + gelecek) kökünden korur. Site komple İngilizce olduğu için güvenli. (Firefox uppercase'i zaten lang="en" ile doğru yapar.) */ html, body, * { -webkit-locale: "en"; } /* ── Variables ──────────────────────────────────────────── */ :root { --red: #e92038; --bg: #020202; --bg2: #080808; --bg3: #0f0f0f; /* ── Site-wide SECTION BACKGROUND SCALE ─────────────── Use these tokens for ALL section backgrounds so the rhythm stays consistent across every page. Order from darkest → lightest. */ --sec-1: #020202; /* Default / hero (= --bg) */ --sec-2: #070707; /* 1st step up */ --sec-3: #0a0a0a; /* 2nd step up */ --sec-4: #0f0f0f; /* 3rd step up (accent) (= --bg3) */ --line: #1c1c1c; --gray: #666; --dim: #3a3a3a; --white: #fff; --sf: 'Steelfish', sans-serif; /* NOT: Steelfish uppercase başlıklarda küçük 'i' büyütülünce noktalı 'İ' (dotted) çıkabiliyor. Çözüm aşağıda: .sf / uppercase başlıklarda dilden bağımsız İngilizce büyük 'I' davranışı. */ --pp: 'Poppins', sans-serif; --max: 1400px; --px: clamp(1.5rem, 4vw, 4rem); /* Fullscreen menü üst hizası — nav linkleri ve kırmızı panel aynı yerden başlar. Logo yüksekliği ~72px (siyah panelde nav, logonun ALTINDAN başlar). */ --menu-top: 14vh; --menu-logo-h: 72px; } /* ── Reset ──────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } html, body { overflow-x: hidden; } /* html arkaplanı da siyah — sayfa geçişlerinde (unload/load arası) browser varsayılan beyaz arka planı asla görünmesin */ html { background: #000; } body { background: var(--bg); font-family: var(--pp); color: var(--white); } /* ── SAYFA AÇILIŞI (intro fade) ────────────────────────────── İçerik hazır olana (nav/logo enjekte) kadar body çok hafif soluk + 1px aşağı; menu.js `inject()` sonrası 'is-ready' alır → her şey AYNI ANDA yumuşak süzülerek gelir. Böylece "önce hero, sonra logo pat diye gelir" sıçraması biter. JS yoksa (no-js) içerik daima görünür kalır. */ html:not(.is-ready) body { opacity: 0; } body { opacity: 1; transition: opacity .5s ease, transform .5s ease; } html.is-ready body { opacity: 1; } @media (prefers-reduced-motion: reduce) { html:not(.is-ready) body { opacity: 1; } body { transition: none; } } /* ── Custom cursor disabled site-wide — native OS cursor only. Keeping selectors as explicit resets in case legacy markup loads. */ body { cursor: auto; } a, button, [role="button"], [role="link"] { cursor: pointer; } ul { list-style: none; } img { max-width: 100%; display: block; height: auto; } ::selection { background: var(--red); color: #fff; } /* ── Global anchor reset ────────────────────────────────── Tarayıcının varsayılan mavi/mor underline ve :visited mor rengini her yerde kapat. Link renkleri her bileşende kendi CSS kuralıyla belirlenir. */ a, a:link, a:visited, a:hover, a:active, a:focus { color: inherit; text-decoration: none; } a:visited { color: inherit; } /* WebKit için ekstra güvence */ button { color: inherit; } /* ── Container ──────────────────────────────────────────── */ .container { max-width: var(--max); margin: 0 auto; padding: 0 var(--px); width: 100%; } .nav-inner { max-width: var(--max); margin: 0 auto; padding: 0 var(--px); height: 100%; display: flex; align-items: center; justify-content: space-between; } /* ── Legacy variable aliases (inner-page HTML compatibility) */ :root { --main: var(--bg); --darkgray: var(--bg2); --black: #000; --steelfish: 'Steelfish', sans-serif; --poppins: 'Poppins', sans-serif; } /* ── Global Type Tokens ─────────────────────────────────── */ .display-title { font-family: var(--sf); font-size: clamp(2.8rem, 6vw, 5.5rem); font-weight: 700; text-transform: uppercase; letter-spacing: -.025em; line-height: 1.02; color: var(--white); } .display-title .accent { color: var(--red); } .text-red { color: var(--red); } .section-label { font-family: var(--pp); font-size: .6rem; letter-spacing: .4em; /* text-transform:uppercase KALDIRILDI → TR locale i→İ bug. Metin kaynakta büyük. */ color: var(--red); font-weight: 500; margin: 0 0 .55rem 0; padding: 0; text-indent: 0; display: block; line-height: 1; } .body-text { font-size: .88rem; color: rgba(255,255,255,.6); line-height: 1.7; } /* ══════════════════════════════════════════════════════════ IN-LAB TOPBAR — shared across all lab sub-pages ══════════════════════════════════════════════════════════ */ .inlab-topbar { position: fixed; top: 0; left: 0; right: 0; height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(1.2rem, 4vw, 3rem); background: rgba(2,2,2,.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,.06); z-index: 9000; } /* Left: logo + badge */ .inlab-topbar__brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; } .inlab-topbar__logo { height: 24px; width: auto; opacity: .7; transition: opacity .25s; } .inlab-topbar__brand:hover .inlab-topbar__logo { opacity: 1; } .inlab-topbar__divider { width: 1px; height: 16px; background: rgba(255,255,255,.15); } .inlab-topbar__badge { font-family: var(--sf); font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--red); line-height: 1; } /* Center: experiment name (optional) */ .inlab-topbar__center { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: .5rem; } .inlab-topbar__exp-tag { font-family: var(--pp); font-size: .42rem; letter-spacing: .3em; text-transform: uppercase; color: rgba(255,255,255,.2); } .inlab-topbar__exp-name { font-family: var(--pp); font-size: .48rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.45); } .inlab-topbar__exp-sep { color: rgba(255,255,255,.15); font-size: .5rem; } /* Right: nav buttons */ .inlab-topbar__nav { display: flex; align-items: center; gap: .5rem; } .inlab-topbar__btn { display: inline-flex; align-items: center; gap: .4rem; padding: .38rem .9rem; font-family: var(--pp); font-size: .42rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.35); background: transparent; border: 1px solid rgba(255,255,255,.08); text-decoration: none; transition: color .2s, border-color .2s, background .2s; cursor: pointer; white-space: nowrap; } .inlab-topbar__btn:hover { color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.2); } .inlab-topbar__btn--home:hover { color: var(--red); border-color: rgba(233,32,56,.35); } .inlab-topbar__btn i { font-size: .5rem; } @media (max-width: 600px) { .inlab-topbar__center { display: none; } .inlab-topbar__btn span { display: none; } .inlab-topbar__btn { padding: .38rem .65rem; } } /* ── Global Button Standard ────────────────────────────── Tüm buton/link hover'ları: border kırmızı, bg hafif kırmızı, text beyaz, ok sağa kayar. ───────────────────────────────────────────────────────── */ .txt-link { display: inline-flex; align-items: center; gap: .7rem; font-size: .63rem; letter-spacing: .2em; /* text-transform:uppercase KALDIRILDI → TR locale i→İ bug. Metin kaynakta büyük. */ color: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.12); padding: .75rem 1.6rem; transition: border-color .3s, color .3s, background .3s; margin-top: 1.8rem; } .txt-link i { font-size: .68rem; transition: transform .3s ease; } .txt-link:hover { color: var(--white); border-color: var(--red); background: rgba(233,32,56,.08); } .txt-link:hover i { transform: translateX(5px); } .btn-outline { display: inline-flex; align-items: center; gap: .8rem; font-size: .65rem; letter-spacing: .2em; /* text-transform:uppercase KALDIRILDI → TR locale i→İ bug. Metin kaynakta büyük. */ color: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.15); padding: .9rem 2rem; transition: border-color .3s, color .3s, background .3s; white-space: nowrap; flex-shrink: 0; } .btn-outline:hover { border-color: var(--red); color: var(--white); background: rgba(233,32,56,.08); } .btn-outline i { font-size: .7rem; transition: transform .3s ease; } .btn-outline:hover i { transform: translateX(5px); } /* Section separator — removed; sections separated by background color contrast */ /* ── Noise ──────────────────────────────────────────────── */ .noise-overlay { position: fixed; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E"); background-size: 200px; opacity: .035; pointer-events: none; z-index: 9997; will-change: transform; animation: noiseAnim .2s steps(2) infinite; } @keyframes noiseAnim { 0% { background-position: 0 0; } 50% { background-position: 10px 12px; } 100% { background-position: 0 0; } } /* ============================================================ NAVIGATION ============================================================ */ /* ── Scroll Progress Bar — üst şerit ── */ .scroll-progress { position: fixed; top: 0; left: 0; width: 100%; height: 2px; background: transparent; z-index: 10001; /* nav'ın (10000) üstünde */ pointer-events: none; } .scroll-progress__fill { width: 100%; height: 100%; background: var(--red); transform: scaleX(0); transform-origin: left center; transition: transform .12s linear; will-change: transform; box-shadow: 0 0 6px rgba(233,32,56,.5); } /* Menü açıkken progress bar'ı gizle (mantıklı: scroll kilitli) */ body:has(.menu-overlay.open) .scroll-progress { opacity: 0; } .nav-container { position: fixed; top: 0; left: 0; width: 100%; height: 72px; z-index: 10000; transition: background .4s, border-color .4s, opacity .35s, visibility .35s; border-bottom: 1px solid transparent; } .nav-container.scrolled { background: rgba(12,12,12,.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom-color: transparent; } /* Hide sticky nav bar when fullscreen menu is open. z-index menünün (9999) ALTINA düşürülür ve gizleme ANINDA olur → logo menüye binmez. */ .nav-container.menu-open { opacity: 0; visibility: hidden; pointer-events: none; z-index: 9998; transition: opacity .15s ease, visibility 0s; } .nav-logo { outline: none !important; } .nav-logo img { height: 37px; opacity: .85; transition: opacity .3s; outline: none !important; } .nav-logo img:hover { opacity: 1; } .nav-trigger { display: flex; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; z-index: 10001; position: relative; } .nav-trigger span { display: block; background: var(--white); height: 1.5px; transition: all .45s cubic-bezier(.77,0,.175,1); } .nav-trigger span:nth-child(1){ width: 28px; } .nav-trigger span:nth-child(2){ width: 18px; } .nav-trigger span:nth-child(3){ width: 24px; } .nav-trigger.active span:nth-child(1){ transform: rotate(45deg) translate(5px,5px); width: 24px; background: var(--red); } .nav-trigger.active span:nth-child(2){ opacity: 0; transform: translateX(-8px); } .nav-trigger.active span:nth-child(3){ transform: rotate(-45deg) translate(5px,-6px); width: 24px; background: var(--red); } /* ── Menu Overlay ───────────────────────────────────────── */ .menu-overlay { position: fixed; inset: 0; z-index: 9999; /* Kırmızı panel SOLDA (42%), siyah navigasyon paneli SAĞDA (58%). Hamburger sağ üstte olduğu için kullanıcı tıklayınca doğrudan sağdaki menü linklerine ulaşır. Panellerin sırası order ile değişir. */ display: grid; grid-template-columns: 42% 58%; pointer-events: none; visibility: hidden; /* Curtain-drop reveal — both panels descend together from the top. No diagonal/asymmetric motion. Single, unified gesture. */ transition: visibility 0s linear .85s; } .menu-overlay.open { pointer-events: all; visibility: visible; transition: visibility 0s linear 0s; } /* ── Subtle dim layer behind the panels — fades in first, anchors the motion ── */ .menu-overlay::before { content: ''; position: fixed; inset: 0; z-index: -1; background: rgba(0,0,0,.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .35s ease; pointer-events: none; } .menu-overlay.open::before { opacity: 1; } .menu-overlay-left { background: #060606; /* SİYAH navigasyon paneli → SAĞ kolon (order:2) */ order: 2; display: flex; flex-direction: column; padding: 0; position: relative; overflow: hidden; /* Drops down from above — synced with right panel */ transform: translateY(-100%); transition: transform .8s cubic-bezier(.7,0,.2,1); will-change: transform; } .menu-overlay.open .menu-overlay-left { transform: translateY(0); } /* ── Logo inside menu — aligned horizontally with the "Home" nav label (offset by link-num width + gap so the logo sits exactly above the text) ── */ .menu-logo-wrap { padding-left: calc(var(--px) + 1.5rem + .7rem); padding-right: var(--px); padding-top: calc((72px - 37px) / 2); padding-bottom: calc((72px - 37px) / 2); opacity: 0; transform: translateY(-8px); /* Wait for the curtain to settle, then fade in */ transition: opacity .5s ease .45s, transform .5s cubic-bezier(.22,1,.36,1) .45s; flex-shrink: 0; } .menu-overlay.open .menu-logo-wrap { opacity: 1; transform: translateY(0); } .menu-logo-img { height: 37px; width: auto; display: block; transition: transform .3s cubic-bezier(.22,1,.36,1), opacity .3s; } .menu-logo-img:hover { transform: scale(1.07) translateX(3px); opacity: 0.9; filter: brightness(1.15); } /* ── Wrap nav only (sec-nav moved to bottom) ── Nav linkleri ÜSTTEN sabit hizadan başlar (kırmızı panel ile aynı --menu-top). */ .menu-nav-wrap { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; padding: var(--menu-top, 14vh) var(--px) 0; } /* ── X (close) button — pinned to right edge of the red panel, vertically aligned with the square Interdi logo on the left ── */ .menu-close-btn { position: fixed; top: calc((72px - 32px) / 2); right: clamp(2rem, 4%, 4rem); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 0; color: rgba(255,255,255,.65); background: transparent; font-size: 1.2rem; cursor: pointer; opacity: 0; pointer-events: none; transform: rotate(-45deg) scale(.7); /* Appears after the panels arrive */ transition: opacity .35s ease .55s, transform .45s cubic-bezier(.22,1,.36,1) .55s, color .2s; z-index: 10002; padding: 4px; } .menu-overlay.open .menu-close-btn { opacity: 1; pointer-events: all; transform: rotate(0deg) scale(1); } .menu-close-btn:hover { color: var(--red); background: transparent; transform: rotate(90deg) scale(1.12); transition: color .18s, transform .32s cubic-bezier(.34,1.56,.64,1); } .menu-overlay-right { background: var(--red); /* KIRMIZI panel → SOL kolon (order:1) */ order: 1; /* Üst blok ÜSTTEN sabit --menu-top hizasından başlar (nav linkleri ile aynı); alt bloklar (contact/social) margin-top:auto ile alta itilir. */ display: flex; flex-direction: column; justify-content: flex-start; /* Kırmızı panelde logo yok → siyah taraftaki logo yüksekliğini ekle. Eyebrow (tag) yüksekliğini ÇIKAR → BÜYÜK BAŞLIK (WELCOME) sağdaki HOME ile hizalanır. */ padding: calc(var(--menu-top, 14vh) + var(--menu-logo-h, 72px) - 2.2rem) clamp(2rem,4%,4rem) 2rem; overflow: hidden; /* Drops down from above — synced with left panel. Delay .12s (önceki .06s'in iki katı) — kırmızı/siyah arasında daha belirgin bir cascade hissi. */ transform: translateY(-100%); transition: transform .8s cubic-bezier(.7,0,.2,1) .12s; will-change: transform; } .menu-overlay.open .menu-overlay-right { transform: translateY(0); } /* Stagger each menu item sliding in */ .menu-nav-list { list-style: none; } .menu-nav-item { overflow: hidden; } .menu-nav-item:first-child { border-top: none; } .menu-nav-link { display: flex; align-items: baseline; gap: .7rem; padding: .55rem 0; font-family: var(--sf); font-size: clamp(2.4rem,5vw,4.5rem); font-weight: 700; text-transform: uppercase; color: var(--white); letter-spacing: -.02em; line-height: 1; transform: translateY(110%); transition: transform .65s cubic-bezier(.22,1,.36,1), color .25s, padding-left .25s; } .menu-overlay.open .menu-nav-link { transform: translateY(0); } /* Stagger delays — start after the curtain has dropped (~.45s) */ .menu-nav-item:nth-child(1) .menu-nav-link { transition-delay: .50s, 0s, 0s; } .menu-nav-item:nth-child(2) .menu-nav-link { transition-delay: .56s, 0s, 0s; } .menu-nav-item:nth-child(3) .menu-nav-link { transition-delay: .62s, 0s, 0s; } .menu-nav-item:nth-child(4) .menu-nav-link { transition-delay: .68s, 0s, 0s; } .menu-nav-item:nth-child(5) .menu-nav-link { transition-delay: .74s, 0s, 0s; } .menu-nav-item:nth-child(6) .menu-nav-link { transition-delay: .80s, 0s, 0s; } .menu-nav-link:hover { color: var(--red); padding-left: .6rem; } .menu-nav-link--active { color: var(--red); } .menu-nav-link--active .link-num { color: rgba(233,32,56,.55); } /* Small ordinal number beside each nav title */ .link-num { display: inline-block; width: 1.5rem; /* fixed width — keeps all nav labels aligned and matches .menu-logo-wrap left padding */ font-family: var(--sf); font-size: .9rem; font-weight: 400; letter-spacing: .08em; color: rgba(255,255,255,.28); line-height: 1; align-self: flex-end; margin-bottom: .18em; transition: color .25s; flex-shrink: 0; } .menu-nav-link:hover .link-num { color: rgba(233,32,56,.55); } /* ── Right-panel content: subtle fade-up after the curtain settles ── */ .menu-right-tag, .menu-right-title, .menu-right-desc, .menu-right-contact, .menu-right-address { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s cubic-bezier(.22,1,.36,1); } .menu-overlay.open .menu-right-tag { opacity: 1; transform: translateY(0); transition-delay: .55s; } .menu-overlay.open .menu-right-title { opacity: 1; transform: translateY(0); transition-delay: .62s; } .menu-overlay.open .menu-right-desc { opacity: 1; transform: translateY(0); transition-delay: .69s; } .menu-overlay.open .menu-right-contact { opacity: 1; transform: translateY(0); transition-delay: .76s; } .menu-overlay.open .menu-right-address { opacity: 1; transform: translateY(0); transition-delay: .82s; } .menu-right-tag { font-size: .58rem; letter-spacing: .3em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: .8rem; } .menu-right-title { /* %20 büyütüldü x2 (2.16→2.592→3.110 / 4.8vw→5.76vw→6.912vw / 3.84→4.608→5.530) */ font-family: var(--sf); font-size: clamp(3.110rem,6.912vw,5.530rem); font-weight: 700; text-transform: uppercase; color: var(--white); line-height: 1; margin-bottom: 1rem; } .menu-right-desc { font-size: .78rem; color: rgba(255,255,255,.7); line-height: 1.8; max-width: 260px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Contact bloğu (Say Hello + tel/mail): biraz yukarı taşınır (alt boşluk), sosyal satır kendi yerinde kalır. İçerik birbirine yakın. */ .menu-right-contact { display: flex; flex-direction: column; gap: .15rem; margin-top: auto; margin-bottom: clamp(1.5rem, 5vh, 3.5rem); } .menu-right-contact p { font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: .15rem; } .menu-right-contact a { font-size: 1.08rem; color: var(--white); transition: opacity .25s, letter-spacing .25s; font-weight: 500; } .menu-right-contact a:hover { opacity: .75; letter-spacing: .02em; } .menu-right-address { margin-top: .8rem; padding-top: 0; border-top: none; font-size: .52rem; letter-spacing: .15em; text-transform: uppercase; color: rgba(255,255,255,.35); line-height: 1.7; font-weight: 300; } /* social-row — sits at bottom of right panel, aligned with sec-nav bottom */ .menu-social-row { display: flex; gap: 2rem; flex-wrap: wrap; align-items: center; /* Sosyal satır eski alt hizasında kalır (üst boşluk orijinal) */ padding: 1.6rem 0 0; } .menu-social-row a { display: flex; align-items: center; gap: .5rem; font-size: .84rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.65); transition: color .25s, gap .25s, transform .25s; font-weight: 400; } .menu-social-row a:hover { color: var(--white); gap: .7rem; transform: translateX(2px); } .menu-social-row i { font-size: 1rem; } /* ── Menu secondary nav — sits at very bottom of left panel. Left padding matches the "Home" label start (var(--px) + link-num width + gap) so the first sec-nav link aligns vertically with the Home nav label. ── */ .menu-sec-nav { flex-shrink: 0; padding: 1.4rem var(--px) 2rem calc(var(--px) + 1.5rem + .7rem); display: flex; flex-direction: row; flex-wrap: wrap; gap: .6rem; align-items: flex-start; /* Fades in once the curtain has finished its drop */ opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .5s cubic-bezier(.22,1,.36,1); } .menu-overlay.open .menu-sec-nav { opacity: 1; transform: translateY(0); transition-delay: .85s; } /* Group wrapper (legacy – kept for backwards compat) */ .menu-sec-nav__group { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0 1.6rem; flex-basis: 100%; } /* Direct list (new menu.js output) */ .menu-sec-nav__list { list-style: none; display: flex; flex-direction: row; flex-wrap: wrap; gap: 0; align-items: center; } .menu-sec-nav__item { overflow: hidden; } .menu-sec-nav__item:first-child { border-top: none; } .menu-sec-nav__link { position: relative; display: flex; align-items: center; gap: 0; padding: .32rem 0; margin-right: 1.8rem; font-family: var(--sf); font-size: 1.35rem; font-weight: 400; text-transform: uppercase; letter-spacing: .06em; color: #fff; line-height: 1; text-decoration: none; white-space: nowrap; transform: translateY(110%); transition: transform .55s cubic-bezier(.77,0,.175,1), color .25s; } /* Default state: sönük beyaz — ana nav'dan ayırır, hover'da parlar */ .menu-sec-nav__item:not(.menu-sec-nav__item--highlight) .menu-sec-nav__link { color: rgba(255,255,255,.5); } .menu-sec-nav__item:not(.menu-sec-nav__item--highlight) .menu-sec-nav__link:hover { color: rgba(255,255,255,.92); } /* Clean underline that sweeps in from the left on hover */ .menu-sec-nav__link::after { content: ''; position: absolute; left: 0; bottom: .12rem; width: 100%; height: 1px; background: var(--red); transform: scaleX(0); transform-origin: left center; transition: transform .38s cubic-bezier(.22,1,.36,1); } .menu-sec-nav__link:hover::after { transform: scaleX(1); } .menu-overlay.open .menu-sec-nav__link { transform: translateY(0); } .menu-sec-nav__item:nth-child(1) .menu-sec-nav__link { transition-delay: .28s, 0s; } .menu-sec-nav__item:nth-child(2) .menu-sec-nav__link { transition-delay: .32s, 0s; } .menu-sec-nav__item:nth-child(3) .menu-sec-nav__link { transition-delay: .36s, 0s; } .menu-sec-nav__item:nth-child(4) .menu-sec-nav__link { transition-delay: .40s, 0s; } .menu-sec-nav__item:nth-child(5) .menu-sec-nav__link { transition-delay: .44s, 0s; } .menu-sec-nav__item:nth-child(6) .menu-sec-nav__link { transition-delay: .48s, 0s; } .menu-sec-nav__item:nth-child(7) .menu-sec-nav__link { transition-delay: .52s, 0s; } .menu-sec-nav__item:nth-child(8) .menu-sec-nav__link { transition-delay: .56s, 0s; } .menu-sec-nav__link:hover { color: var(--red); } /* Highlighted sec-nav item (Directory) — pulsing red dot before label */ .menu-sec-nav__item--highlight .menu-sec-nav__link { color: var(--red); } .menu-sec-nav__item--highlight .sec-link-mark { display: inline-block; width: 7px; height: 7px; margin-right: .55rem; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 0 rgba(233,32,56,.6); animation: secMarkPulse 1.8s ease-out infinite; transform: translateY(-1px); } .menu-sec-nav__item--highlight .menu-sec-nav__link:hover { color: rgba(255,255,255,.92); } .menu-sec-nav__item--highlight .menu-sec-nav__link:hover .sec-link-mark { animation-duration: .9s; } @keyframes secMarkPulse { 0% { box-shadow: 0 0 0 0 rgba(233,32,56,.55); } 70% { box-shadow: 0 0 0 7px rgba(233,32,56,0); } 100% { box-shadow: 0 0 0 0 rgba(233,32,56,0); } } /* Sub-links (In-Play, In-Forge) */ .menu-sec-nav__link.sub-link { padding-left: 1.2rem; color: rgba(255,255,255,.28); font-size: .72rem; letter-spacing: .06em; } .menu-sec-nav__link.sub-link:hover { color: rgba(255,255,255,.65); } /* No visible marker — the sec-link-mark element is kept in DOM for backwards compatibility but completely hidden. Hover feedback is handled by a clean underline on the link text itself (see below). */ .sec-link-mark { display: none; } /* Eski sub-link stilleri — artık kullanılmıyor, temizlendi */ /* ============================================================ HERO ============================================================ */ .hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; } .hero-bg { position: absolute; inset: 0; background: #05020a; } .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; z-index: 0; filter: grayscale(1) contrast(1.15) brightness(1.08); /* subtle slow-zoom for extra motion feel */ animation: heroZoom 18s ease-in-out infinite alternate; transform-origin: center center; } @keyframes heroZoom { 0% { transform: scale(1.0) translateX(0); } 50% { transform: scale(1.07) translateX(-1%); } 100% { transform: scale(1.04) translateX(1%); } } .hero-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient( to bottom, rgba(2,2,2,.15) 0%, rgba(2,2,2,.08) 25%, rgba(2,2,2,.55) 60%, rgba(2,2,2,.97) 100% ); } /* Cursor-aware edge vignette: opposite side darkens based on mouse position. Defaults to a centered radial; JS updates --vx / --vy to follow cursor. */ .hero-vignette { position: absolute; inset: 0; z-index: 2; pointer-events: none; --vx: 50%; --vy: 50%; background: radial-gradient( ellipse 70% 65% at var(--vx) var(--vy), rgba(0,0,0,0) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,.55) 85%, rgba(0,0,0,.85) 100% ); transition: background .25s ease; mix-blend-mode: multiply; } /* ── Hero-only grain — canvas-drawn pixel noise (same technique as page transitions) ── */ #hero-grain-cv { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; opacity: 0.14; } /* Thin red line at top */ .hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--red); z-index: 10; opacity: .65; } .hero-inner { position: relative; z-index: 3; padding-top: 180px; padding-bottom: 3.5rem; } .hero-eyebrow { font-family: var(--pp); font-size: .713rem; letter-spacing: .38em; text-transform: uppercase; color: rgba(255,255,255,.38); font-weight: 400; margin: 0 0 1.05rem 0; padding: 0; text-indent: 0; display: block; line-height: 1; opacity: 0; animation: fadeUp .7s ease .3s forwards; font-style: normal; } .hero-title { font-family: var(--sf); font-size: clamp(3.8rem, 9.5vw, 12.5rem); font-weight: 700; text-transform: uppercase; letter-spacing: -.03em; line-height: .92; margin-bottom: 4.5rem; display: flex; flex-direction: column; gap: 0; } /* Red "IN" fragments inside hero title */ .ht-in { color: var(--red); } .ht-line { display: block; overflow: hidden; } .ht-line span { display: block; opacity: 0; transform: translateY(110%); animation: slideUp .9s cubic-bezier(.77,0,.175,1) forwards; /* Scramble sırasında font değişmesi engellenir */ font-variant-numeric: tabular-nums; letter-spacing: inherit; white-space: nowrap; } .ht-white span { color: var(--white); animation-delay: .45s; } .ht-line2 span { color: var(--white); animation-delay: .6s; } .ht-red span { color: var(--red); animation-delay: .6s; } .ht-red-line span { color: var(--red); animation-delay: .62s; } /* Scramble başladıktan sonra JS .scramble-active ekler */ .scramble-active { opacity: 1 !important; transform: translateY(0) !important; animation: none !important; display: block; color: var(--white); white-space: nowrap; } /* Kırmızı kelimeler scramble sonrası */ .scramble-active .ht-in, .ht-line span .ht-in { color: var(--red); font-style: normal; } @keyframes slideUp { to { opacity: 1; transform: translateY(0); } } @keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } /* Hero lead — short paragraph between title and tags row */ .hero-lead { font-family: var(--pp); font-size: clamp(.95rem, 1.1vw, 1.1rem); line-height: 1.65; color: rgba(255,255,255,.62); max-width: 620px; margin: -2.5rem 0 3rem 0; padding: 0; opacity: 0; animation: fadeUp .7s ease .9s forwards; } @media (max-width: 768px) { .hero-lead { font-size: .9rem; margin: -1rem 0 2rem 0; max-width: 100%; } } .hero-foot { display: flex; align-items: center; justify-content: space-between; gap: 2rem; border-top: 1px solid rgba(255,255,255,.07); padding-top: 2rem; opacity: 0; animation: fadeUp .7s ease 1.1s forwards; } .hero-tags { display: flex; gap: 0; flex-wrap: wrap; } .hero-tags span { font-family: var(--pp); font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gray); padding-right: 1.4rem; position: relative; } .hero-tags span::after { content: '/'; color: var(--dim); margin-left: 1.4rem; } .hero-tags span:last-child::after { display: none; } /* Scroll hint */ .hero-scroll { position: absolute; right: var(--px); bottom: 2.5rem; z-index: 4; display: flex; flex-direction: column; align-items: center; gap: .8rem; } .hero-scroll span { font-size: .52rem; letter-spacing: .32em; text-transform: uppercase; color: var(--dim); writing-mode: vertical-lr; } .scroll-line { width: 1px; height: 56px; background: var(--line); position: relative; overflow: hidden; } .scroll-dot { position: absolute; top: -50%; left: 0; width: 100%; height: 50%; background: var(--red); animation: scrollDot 2.2s ease-in-out infinite 1s; } @keyframes scrollDot { 0%{top:-50%} 100%{top:100%} } /* ============================================================ SELECTED WORKS ============================================================ */ .s-works { background: var(--sec-2); padding-top: 5.5rem; } .s-works__head { padding-bottom: 3rem; } .s-works__top { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-top: .6rem; } .slider-controls { display: flex; align-items: center; gap: .8rem; flex-shrink: 0; padding-bottom: .3rem; } .sc-btn { width: 40px; height: 40px; border: 1px solid var(--line); background: transparent; color: var(--dim); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: .8rem; transition: border-color .25s, color .25s, background .25s; } .sc-btn:hover { border-color: var(--red); color: var(--white); background: rgba(233,32,56,.08); } .sc-btn:disabled { opacity: .2; pointer-events: none; } .sc-count { font-family: var(--pp); font-size: .62rem; letter-spacing: .15em; color: var(--dim); min-width: 48px; text-align: center; display: flex; align-items: center; gap: .35rem; } .sc-count .sc-cur { color: var(--white); } .sc-count em { font-style: normal; color: var(--line); } /* Rail */ .works-rail-wrap { overflow: hidden; cursor: grab; user-select: none; } .works-rail-wrap:active { cursor: grabbing; } .works-rail { display: flex; gap: 2px; transition: transform .75s cubic-bezier(.77,0,.175,1); will-change: transform; padding-left: var(--px); } .work-slide { flex: 0 0 41.6%; overflow: hidden; } .work-slide:first-child { flex: 0 0 41.6%; overflow: hidden; } .work-img { width: 100%; aspect-ratio: 808 / 632; overflow: hidden; position: relative; background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important; /* Varsayılan: tam siyah-beyaz, parlaklık ve kontrast iyi tutulur ki görsel silik/karanlık görünmesin */ filter: grayscale(1) brightness(1) contrast(1.05); opacity: 1; transition: filter .65s cubic-bezier(.22,1,.36,1); } /* çok hafif overlay — sadece üst yazılar okunsun diye */ .work-img::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.10); transition: opacity .5s ease; pointer-events: none; z-index: 2; } /* kırmızı reveal — soldan sağa wipe */ .work-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, rgba(233,32,56,.18) 0%, rgba(233,32,56,0) 60%); opacity: 0; pointer-events: none; z-index: 3; transition: opacity .5s ease; } /* hover — tam renk açılır */ .work-slide:hover .work-img { filter: grayscale(0) brightness(1.05) contrast(1.06) saturate(1.2); } .work-slide:hover .work-img::before { opacity: 0; } .work-slide:hover .work-img::after { opacity: 1; } .g1{background-color:#120608} .g2{background-color:#060812} .g3{background-color:#060e06} .g4{background-color:#0c0800} .g5{background-color:#080412} .g6{background-color:#04080e} .g7{background-color:#08060e} .work-info { display: flex; align-items: baseline; gap: 1.5rem; padding: 1.4rem 0 1.8rem; border-bottom: 1px solid var(--line); } .wi-num { font-family: var(--sf); font-size: .7rem; letter-spacing: .15em; color: var(--dim); flex-shrink: 0; } .wi-name { font-family: var(--sf); font-size: clamp(1.1rem, 2.2vw, 1.7rem); font-weight: 700; text-transform: uppercase; color: var(--white); letter-spacing: .01em; transition: color .25s; margin-bottom: .4rem; } .work-slide:hover .wi-name { color: var(--red); } .wi-tags { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .3rem; } .wi-tags span { font-size: .56rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); border: 1px solid var(--line); padding: .12rem .55rem; } .work-slide.is-active { opacity: 1; transition: opacity .5s; } .work-slide:not(.is-active) { opacity: .35; transition: opacity .5s; } /* ============================================================ SERVICES ============================================================ */ .s-services { background: var(--sec-1); padding: 7rem 0; } .s-services__grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 7rem; align-items: start; } .s-services__lead .display-title { margin-bottom: 1.8rem; } .s-services__lead .body-text { margin-bottom: 0; max-width: 360px; } .s-services__list { padding-top: .5rem; } .svc-row { display: grid; grid-template-columns: 2.4rem 1fr 1fr auto; align-items: center; gap: 1.5rem; padding: 1.5rem 1rem; border-bottom: 1px solid var(--line); cursor: pointer; position: relative; isolation: isolate; overflow: hidden; transition: padding-left .35s cubic-bezier(.22,1,.36,1); } .svc-row:first-child { border-top: none; } /* Animated dark fill — sweeps in from left on hover */ .svc-row::before { content: ''; position: absolute; inset: 0; background: #0a0a0a; transform: scaleX(0); transform-origin: left center; transition: transform .55s cubic-bezier(.22,1,.36,1); z-index: 0; pointer-events: none; } .svc-row:hover::before { transform: scaleX(1); } /* Left red accent bar — appears as fill arrives */ .svc-row::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--red); transform: scaleY(0); transform-origin: bottom; transition: transform .45s cubic-bezier(.22,1,.36,1) .1s; z-index: 2; pointer-events: none; } .svc-row:hover::after { transform: scaleY(1); } /* Lift content above the fill */ .svc-row > * { position: relative; z-index: 1; } .svc-row:hover { padding-left: 1.6rem; } .svc-num { font-family: var(--pp); font-size: .58rem; letter-spacing: .15em; color: var(--dim); transition: color .35s ease, transform .35s cubic-bezier(.22,1,.36,1); } .svc-row:hover .svc-num { color: var(--red); transform: translateX(4px); } .svc-name { font-family: var(--sf); font-size: clamp(1.15rem, 2vw, 1.55rem); font-weight: 700; text-transform: uppercase; color: var(--white); transition: color .35s ease, letter-spacing .35s cubic-bezier(.22,1,.36,1), transform .35s cubic-bezier(.22,1,.36,1); } .svc-row:hover .svc-name { color: var(--red); letter-spacing: .04em; transform: translateX(2px); } .svc-desc { font-size: .72rem; color: var(--dim); line-height: 1.5; transition: color .35s ease, transform .35s cubic-bezier(.22,1,.36,1); } .svc-row:hover .svc-desc { color: rgba(255,255,255,.75); transform: translateX(3px); } .svc-row > i { font-size: .68rem; color: var(--dim); transition: transform .35s cubic-bezier(.22,1,.36,1), color .35s ease; flex-shrink: 0; } .svc-row:hover > i { transform: translateX(8px) rotate(-45deg); color: var(--red); } /* ============================================================ BRANDS — homepage slider ============================================================ */ .s-brands { background: var(--sec-3); padding: 6.5rem 0; } .s-brands__head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 3.5rem; } /* ── Home Brands Grid ──────────────────────────────────── */ .brands-home-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: .75rem; background: transparent; border: none; } .brand-home-cell { aspect-ratio: 1 / 1; background: transparent; border: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; overflow: hidden; cursor: pointer; transition: opacity .3s, border-color .3s; } .brand-home-cell:hover { border-color: rgba(255,255,255,.18); } /* hover fill animation removed — cells stay static */ .brand-home-cell::before { display: none; } .brand-home-cell img { /* Sabit kutu boyutu — tüm logolar aynı alana object-fit: contain ile yerleşir. Böylece dar/geniş/kare fark etmeksizin hepsi optik olarak eşit bir boyda görünür. (boyut +30%) */ width: 80%; height: 73%; max-width: 182px; max-height: 91px; object-fit: contain; object-position: center; filter: brightness(0) invert(1); opacity: .7; position: relative; z-index: 1; pointer-events: none; transition: opacity .3s; } .brand-home-cell:hover img { opacity: 1; } /* no hover change on the logos either */ /* CTA cell — subtle outline, no solid fill */ .brand-home-cta { background: transparent !important; border: 1px solid rgba(255,255,255,.08); text-decoration: none; flex-direction: column; gap: 0; align-items: flex-start; justify-content: space-between; padding: 1.4rem 1.4rem 1.2rem; transition: border-color .3s; overflow: hidden; isolation: isolate; } .brand-home-cta:hover { border-color: #1f1f1f; } /* Soldan sağa açılan koyu hover background */ .brand-home-cta::before { content: ""; display: block; position: absolute; inset: 0; background: #0c0c0c; transform: scaleX(0); transform-origin: left center; transition: transform .55s cubic-bezier(.77,0,.175,1); z-index: -1; pointer-events: none; } .brand-home-cta:hover::before { transform: scaleX(1); } /* üst küçük etiket */ .brand-home-cta .cta-eyebrow { font-family: var(--pp); font-size: .45rem; letter-spacing: .3em; text-transform: uppercase; color: rgba(255,255,255,.55); display: block; } /* orta büyük metin — her kelime ayrı satır, sola dayalı */ .brand-home-cta .cta-main { display: flex; flex-direction: column; line-height: 1.05; gap: 0; } .brand-home-cta .cta-word { font-family: var(--sf); font-size: clamp(1.6rem, 2.8vw, 2.6rem); font-weight: 700; text-transform: uppercase; letter-spacing: -.02em; color: var(--white); display: block; transition: color .35s ease; } /* hover: both words turn red */ .brand-home-cta:hover .cta-word { color: var(--red); } /* alt satır: çizgi + ok */ .brand-home-cta .cta-foot { display: flex; align-items: center; gap: .6rem; width: 100%; } .brand-home-cta .cta-line { flex: 1; height: 1px; background: rgba(255,255,255,.35); transform-origin: left; transform: scaleX(0.35); transition: transform .5s cubic-bezier(.77,0,.175,1), background-color .35s ease; } .brand-home-cta:hover .cta-line { transform: scaleX(1); background: var(--red); } .brand-home-cta .cta-foot i { font-size: .75rem; color: rgba(255,255,255,.7); flex-shrink: 0; transition: transform .45s cubic-bezier(.22,1,.36,1), color .3s ease; } .brand-home-cta:hover .cta-foot i { transform: translateX(6px); color: var(--red); } @media (max-width: 1024px) { .brands-home-grid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 600px) { .brands-home-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 400px) { .brands-home-grid { grid-template-columns: repeat(2, 1fr); } } /* ============================================================ ABOUT — container içi, tek fotoğraf + içerik yan yana ============================================================ */ .s-about { background: var(--sec-1); padding: 5rem 0 6rem; overflow: hidden; } .s-about__wrap { display: grid; grid-template-columns: .85fr 1.15fr; gap: 5rem; align-items: start; } /* ── LEFT: single photo frame ─────────────────── */ .s-about__visual { position: relative; } .s-about__photo-frame { position: relative; aspect-ratio: 3 / 4; overflow: hidden; } /* slide stack — legacy (kept for fallback) */ .s-about__photo-img { position: absolute; inset: 0; } .s-about__slide { position: absolute; inset: 0; background-size: cover; background-position: center; filter: grayscale(1) brightness(.72); opacity: 0; transform: scale(1.07); transition: opacity 1s cubic-bezier(.25,.46,.45,.94), transform 1.4s cubic-bezier(.25,.46,.45,.94); } .s-about__slide.active { opacity: 1; transform: scale(1); } /* ═══════════════════════════════════ VIDEO FRAME — IN-CULTURE promo for MORE ABOUT US ═══════════════════════════════════ */ .s-about__videoframe { position: relative; overflow: hidden; isolation: isolate; background: #050505; } .s-about__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; display: block; } /* bottom gradient */ .s-about__photo-overlay { position: absolute; inset: 0; z-index: 2; background: linear-gradient( to bottom, transparent 45%, rgba(2,2,2,.85) 100% ); pointer-events: none; } /* est. badge — top-left */ .s-about__since { position: absolute; top: 1.6rem; left: 1.8rem; z-index: 4; display: flex; align-items: center; gap: .7rem; font-family: var(--pp); font-size: .54rem; letter-spacing: .3em; text-transform: uppercase; color: rgba(255,255,255,.6); background: rgba(2,2,2,.45); backdrop-filter: blur(8px); padding: .35rem .8rem; border: 1px solid rgba(255,255,255,.12); } .s-about__since-line { width: 18px; height: 1px; background: var(--red); flex-shrink: 0; } /* big faded year behind photo */ .s-about__bg-year { position: absolute; bottom: -1.2rem; left: -1.5rem; font-family: var(--sf); font-size: clamp(4.5rem, 11vw, 11rem); font-weight: 700; color: rgba(233,32,56,.055); line-height: 1; letter-spacing: -.05em; pointer-events: none; user-select: none; z-index: 0; } /* ── RIGHT: content ──────────────────────────────── */ .s-about__content { display: flex; flex-direction: column; gap: 0; padding-top: .5rem; } .s-about__big { font-family: var(--sf); font-size: clamp(3rem, 8vw, 7rem); font-weight: 700; text-transform: uppercase; letter-spacing: -.02em; line-height: 1.05; margin: 0 0 2rem; text-align: right; } .s-about__body { font-size: .88rem; color: rgba(255,255,255,.6); line-height: 1.7; margin-bottom: 2.2rem; max-width: 460px; text-align: right; margin-left: auto; } .s-about__body strong { color: rgba(255,255,255,.82); font-weight: 500; } /* stat strip */ .s-about__statstrip { display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid var(--line); margin-bottom: 2.2rem; } .sass-item { padding: 1.4rem 1.2rem; border-right: 1px solid var(--line); position: relative; overflow: hidden; transition: background .3s; min-height: 115px; display: flex; align-items: center; justify-content: flex-start; text-align: left; } .sass-item:last-child { border-right: none; } /* Rotasyon efekti — yeni slide aktif olduğunda kısa süreli "flash" */ .sass-item.is-flash { background: rgba(233,32,56,.05); } .sass-item::before { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 2px; background: var(--red); transition: width .7s cubic-bezier(.77,0,.175,1); } .sass-item.is-flash::before { width: 100%; } /* rotating fact slides inside each stat cell */ .sass-fact { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; text-align: left; padding: 1rem 1.2rem; opacity: 0; transform: translateY(6px); transition: opacity .55s ease, transform .55s ease; pointer-events: none; } .sass-fact.active { opacity: 1; transform: translateY(0); } .sass-headline { font-family: var(--sf); font-size: clamp(1.35rem, 2.1vw, 2rem); font-weight: 700; color: var(--white); letter-spacing: -.01em; line-height: 1; text-transform: uppercase; transition: color .3s; } .sass-item.is-flash .sass-fact.active .sass-headline { color: var(--red); } .sass-num-big { font-family: var(--sf); font-size: clamp(2.2rem, 3.6vw, 3.8rem); font-weight: 700; color: var(--white); letter-spacing: -.02em; line-height: 1; display: inline-flex; align-items: flex-start; justify-content: flex-start; transition: color .3s; } .sass-num-big sup { font-family: var(--sf); font-size: .34em; color: var(--red); margin-top: .15em; margin-left: .05em; font-weight: 700; } .sass-item.is-flash .sass-fact.active .sass-num-big { color: var(--red); } .sass-sub { font-family: var(--sf); font-size: clamp(.58rem, .72vw, .68rem); font-weight: 500; color: rgba(255,255,255,.58); letter-spacing: .22em; line-height: 1.2; text-transform: uppercase; margin-top: .55rem; } /* navigation links — replaces capability list */ /* about nav buttons — matches .btn-outline style, right-aligned */ .s-about__navlinks { display: flex; flex-direction: row; gap: .75rem; margin-bottom: 2.2rem; flex-wrap: wrap; justify-content: flex-end; } /* CTA */ .s-about__cta { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; } .s-about__cta .txt-link { margin-top: 0; } /* legacy — hide deprecated layout classes */ .s-about__inner { display: contents; } .s-about__left-text, .s-about__photo-grid, .sap-col, .s-about__left, .s-about__right, .s-about__statgrid, .sag-item, .s-about__img-overlay, .s-about__slide-counter, .s-about__slide-label, .s-about__pillars, .sa-pillar, .s-about__pills, .sap-pill, .s-about__tagblock, .s-about__tabs, .s-about__dots { display: none; } /* slide label — bottom-left of photo */ .sap-label { position: absolute; bottom: 1.4rem; left: 1.6rem; z-index: 4; font-family: var(--pp); font-size: .52rem; letter-spacing: .26em; text-transform: uppercase; color: rgba(255,255,255,.75); padding: .32rem .75rem; border: 1px solid rgba(255,255,255,.18); background: rgba(2,2,2,.5); backdrop-filter: blur(8px); transition: opacity .35s; } /* slider nav bar below photo */ .s-about__slider-nav { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; } /* .san-prev/.san-next removed — arrows no longer used in about slider */ .san-dots { display: flex; align-items: center; gap: .4rem; flex: 1; } .san-dot { width: 8px; height: 8px; border-radius: 1px; background: rgba(255,255,255,.2); border: none; cursor: pointer; padding: 0; transition: background .25s; } .san-dot:hover { background: rgba(255,255,255,.5); } .san-dot.active { background: var(--red); } /* ── Legacy class aliases (inner pages) ─────── */ .section-tag { font-size: .6rem; letter-spacing: .4em; text-transform: uppercase; color: var(--red); font-weight: 500; display: block; } .section-title { font-family: var(--sf); font-size: clamp(2rem,5vw,4rem); font-weight: 700; text-transform: uppercase; letter-spacing: -.025em; line-height: 1.02; color: var(--white); } .section-title .dot { color: var(--red); } .section-header { display: flex; justify-content: space-between; align-items: flex-end; } .redline { width: 32px; height: 2px; background: var(--red); margin-bottom: 1.5rem; } .view-all-btn { display: inline-flex; align-items: center; gap: .7rem; font-size: .63rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gray); border: 1px solid rgba(255,255,255,.12); padding: .75rem 1.6rem; transition: border-color .3s, color .3s, background .3s; } .view-all-btn:hover { color: var(--white); border-color: var(--red); background: rgba(233,32,56,.06); } .gd-link { display: inline-flex; align-items: center; gap: .7rem; font-size: .63rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gray); border: 1px solid rgba(255,255,255,.12); padding: .75rem 1.6rem; margin-top: 1.5rem; transition: border-color .3s, color .3s, background .3s; } .gd-link:hover { color: var(--white); border-color: var(--red); background: rgba(233,32,56,.06); } /* ── deprecated stat/layout class aliases ── */ .stats-grid, .s-about__stats, .s-about__lead, .s-about__metrics, .s-about__panels { display: none; } /* ============================================================ CULTURE ============================================================ */ /* ════════════════════════════════════════════════════════ CULTURE — Yeni asymmetric layout Üst: geniş intro / Orta: 2 kolon (tipografi + crew görseller) Alt: cfp-grid (Manifesto + INfinite kart ikilisi) ═══════════════════════════════════════════════════════ */ .s-culture { background: var(--sec-2); padding: 7rem 0 5rem; position: relative; } /* ── Başlık — IN-LAB ile aynı tipografik ölçü ── */ .s-culture__heading { margin: 0 0 .4rem; font-size: clamp(3rem, 8vw, 7rem); line-height: 1.05; letter-spacing: -.02em; } /* ── 2 kolonlu ana grid ── Sağ fotoğraf bloğu, alttaki .cfp-grid'in sağ (INfinite) kutusu ile aynı sol hizada başlasın diye 1fr 1fr + 1px gap (cfp-grid ile aynı). */ .s-culture__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; align-items: start; margin-bottom: 4rem; } .s-culture__text { display: flex; flex-direction: column; gap: 1.8rem; padding-right: 4rem; } .s-culture__lead { font-family: var(--pp); font-size: .88rem; line-height: 1.7; color: rgba(255,255,255,.6); margin: 0; max-width: 42ch; } .s-culture__more { align-self: flex-start; margin-top: auto; position: relative; overflow: hidden; color: var(--white); background: var(--red); border: 0 !important; /* .txt-link border'ı override */ outline: none; padding: .95rem 1.9rem; z-index: 0; letter-spacing: .22em; transition: color .35s ease, transform .35s cubic-bezier(.22,1,.36,1); } .s-culture__more::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.0) 0%, rgba(0,0,0,.35) 50%, rgba(0,0,0,.0) 100%); transform: translateX(-100%); transition: transform .6s cubic-bezier(.22,1,.36,1); z-index: -1; } .s-culture__more::after { content: ''; position: absolute; inset: 0; background: #c81a2e; transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.22,1,.36,1); z-index: -1; } .s-culture__more:hover { color: var(--white); background: var(--red); border: 0 !important; } .s-culture__more:hover::before { transform: translateX(100%); } .s-culture__more:hover::after { transform: scaleX(1); } .s-culture__more span, .s-culture__more i { position: relative; z-index: 1; } .s-culture__more:hover i { transform: translateX(8px); } /* ── Kültür prensipleri — slideshow (büyük başlık + açıklama) ── */ .s-culture__slider { position: relative; margin: 1.2rem 0 1.6rem; padding: 1.6rem 0 1.4rem; border-bottom: none; } /* Kısa üst çizgi — tam genişlik yerine 60px dekoratif aksan */ .s-culture__slider::before { content: ''; position: absolute; top: 0; left: 0; width: 60px; height: 1px; background: rgba(255,255,255,.25); } .scs-stage { position: relative; min-height: 110px; } .scs-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; pointer-events: none; } .scs-slide.is-active { opacity: 1; pointer-events: auto; } .scs-title { font-family: var(--sf), 'Impact', sans-serif; font-size: clamp(2.6rem, 4.4vw, 4rem); font-weight: 700; text-transform: uppercase; letter-spacing: .005em; line-height: 1; color: var(--white); margin: 0 0 .9rem; min-height: 1em; } .scs-desc { font-family: var(--pp); font-size: .82rem; line-height: 1.55; color: rgba(255,255,255,.72); margin: 0; max-width: 28ch; letter-spacing: .01em; } /* Typewriter caret (title only) — red, taller than the glyphs. Extends ~4px above and below the cap-height so it visually overshoots the title text top & bottom. */ .scs-title { position: relative; } .scs-title .tw-caret { display: inline-block; width: 5px; height: calc(1em + 6px); background: var(--red); margin-left: .1em; vertical-align: middle; transform: translateY(-0.1em); opacity: 0; } .scs-title .tw-caret.is-on { animation: twBlink 1s steps(1, end) infinite; } @keyframes twBlink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } } /* Desc — typewriter feel; visibility toggled before/after typing */ .scs-desc { transition: opacity .2s ease; } .scs-desc.is-hidden { opacity: 0; } .scs-desc.is-revealed { opacity: 1; } /* Kare dots */ .scs-dots { display: flex; gap: .55rem; margin-top: 2.6rem; } .scs-dot { width: 10px; height: 10px; padding: 0; border: 1px solid rgba(255,255,255,.28); background: transparent; border-radius: 0; cursor: pointer; transition: background-color .3s ease, border-color .3s ease; } .scs-dot:hover { border-color: rgba(255,255,255,.6); } .scs-dot.is-active { background: var(--red); border-color: var(--red); } @media (max-width: 640px) { /* Mobilde slide metni daha kompakt — gereksiz boşluk yok */ .scs-stage { min-height: 130px; } .scs-title { margin-bottom: .5rem; } /* Dot'lar slide metninin hemen altına çekildi */ .scs-dots { margin-top: 1rem; } /* Slider'ın çevresindeki dış boşluk da kısaltıldı */ .s-culture__slider { margin: .8rem 0 .8rem; padding: 1rem 0 .4rem; } } /* ── culture stats — vertical list ──────────── */ .culture-stat-list { display: flex; flex-direction: column; margin-bottom: 2rem; border-left: 2px solid var(--line); } .csl-item { display: flex; align-items: center; gap: 1.4rem; padding: .85rem 0 .85rem 1.4rem; border-bottom: 1px solid var(--line); transition: border-left-color .3s; position: relative; } .csl-item::before { content: ''; position: absolute; left: -2px; top: 0; bottom: 0; width: 2px; background: var(--red); transform: scaleY(0); transform-origin: bottom; transition: transform .38s cubic-bezier(.77,0,.175,1); } .csl-item:hover::before { transform: scaleY(1); } .csl-num { font-family: var(--sf); font-size: clamp(2rem, 3.2vw, 2.8rem); font-weight: 700; color: var(--white); line-height: 1; min-width: 4rem; letter-spacing: -.03em; transition: color .3s; flex-shrink: 0; } .csl-plus { font-size: .65em; color: var(--red); vertical-align: .1em; margin-left: .04em; } .csl-item:hover .csl-num { color: var(--red); } .csl-item:hover .csl-plus { color: var(--white); } .csl-text { display: flex; flex-direction: column; gap: .12rem; } .csl-text strong { font-family: var(--pp); font-size: .78rem; font-weight: 600; color: var(--white); letter-spacing: .04em; text-transform: uppercase; } .csl-text span { font-family: var(--pp); font-size: .65rem; color: var(--gray); line-height: 1.5; } /* ── culture statement slider ──────────────── */ .culture-slider { margin-bottom: 2rem; position: relative; } /* slide track */ .cs-track { position: relative; min-height: 200px; } .cs-slide { position: absolute; inset: 0; padding: 0; display: flex; flex-direction: column; justify-content: flex-start; opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity .5s cubic-bezier(.4,0,.2,1), transform .5s cubic-bezier(.4,0,.2,1); } .cs-slide.active { opacity: 1; pointer-events: auto; transform: translateY(0); position: relative; } .cs-slide-tag { font-family: var(--pp); font-size: .55rem; letter-spacing: .35em; text-transform: uppercase; color: var(--red); display: flex; align-items: center; gap: .7rem; margin-bottom: 1.1rem; } .cs-slide-tag::before { content: ''; width: 20px; height: 1px; background: var(--red); flex-shrink: 0; } .cs-slide-title { font-family: var(--sf); font-size: clamp(1.7rem, 2.8vw, 2.4rem); font-weight: 700; text-transform: uppercase; letter-spacing: -.025em; line-height: 1.04; color: var(--white); margin-bottom: 1rem; } .cs-slide-title em { font-style: normal; color: var(--red); } .cs-slide-body { font-family: var(--pp); font-size: .72rem; color: rgba(255,255,255,.42); line-height: 1.85; max-width: 380px; } /* nav row — borderless */ .cs-nav { display: flex; align-items: center; justify-content: space-between; padding: 1.4rem 0 0; } .cs-dots { display: flex; align-items: center; gap: .45rem; } .cs-dot { width: 8px; height: 8px; border-radius: 1px; background: rgba(255,255,255,.2); border: none; padding: 0; cursor: pointer; transition: background .25s; } .cs-dot:hover { background: rgba(255,255,255,.5); } .cs-dot.active { background: var(--red); } /* .cs-arrows/.cs-prev/.cs-next removed — culture slider arrows no longer used */ /* culture flip title — always state-a */ .culture-flip-title { position: relative; } .cft-state-a { display: block; } .cft-state-b { display: none; } /* ════════════════════════════════════════════════════════ CREW VISUAL — Asymmetric görsel kompozisyonu 1 büyük merkez + 2 yan kare + dikey rozet ═══════════════════════════════════════════════════════ */ .s-culture__crew-visual { position: relative; display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: 1fr 1fr; grid-template-areas: "main top" "main bot"; gap: 1rem; min-height: 560px; } .crew-fig { position: relative; margin: 0; overflow: hidden; background: #0a0a0a; cursor: pointer; } .crew-fig--main { grid-area: main; } .crew-fig--top { grid-area: top; } .crew-fig--bot { grid-area: bot; } .crew-fig img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05) brightness(.95); transition: filter .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1); } .crew-fig:hover img { filter: grayscale(1) contrast(1.1) brightness(1); transform: scale(1.04); } /* Caption, overlay ve corner aksanları kaldırıldı — sadece görsel. */ /* sağdaki dikey rozet yazı */ .crew-vertical { position: absolute; right: 0; top: 50%; transform: translateY(-50%) rotate(90deg); transform-origin: right center; font-family: var(--pp); font-size: .55rem; font-weight: 500; letter-spacing: .45em; text-transform: uppercase; color: rgba(255,255,255,.35); white-space: nowrap; } /* Responsive */ @media (max-width: 960px) { .s-culture__grid { grid-template-columns: 1fr; gap: 3rem; } .s-culture__crew-visual { min-height: 460px; } } @media (max-width: 560px) { .s-culture { padding: 4.5rem 0 3rem; } .s-culture__intro { margin-bottom: 2.5rem; } .s-culture__grid { margin-bottom: 2.5rem; gap: 2.2rem; } .s-culture__crew-visual { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; grid-template-areas: "main main" "top bot"; min-height: 0; } .crew-fig--main { aspect-ratio: 4/3; } .crew-fig--top, .crew-fig--bot { aspect-ratio: 1/1; } .crew-vertical { font-size: .48rem; letter-spacing: .35em; } } /* ============================================================ JOIN ============================================================ */ /* ============================================================ IN-LAB SECTION ============================================================ */ .s-inlab { padding: 5rem 0 5.5rem; background: var(--sec-1); } /* Header row */ .sil-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 2.8rem; flex-wrap: wrap; } .sil-eyebrow { font-family: var(--pp); font-size: .52rem; letter-spacing: .42em; text-transform: uppercase; color: var(--red); display: block; margin-bottom: .6rem; } .sil-title { font-family: var(--sf); font-size: clamp(2.4rem, 5vw, 3.8rem); font-weight: 700; text-transform: uppercase; letter-spacing: -.03em; color: var(--white); line-height: 1; margin: 0; } .sil-header-right { display: flex; flex-direction: column; align-items: flex-end; gap: .9rem; max-width: 340px; text-align: right; } .sil-sub { font-family: var(--pp); font-size: .65rem; color: var(--gray); line-height: 1.7; } .sil-all-link { font-family: var(--pp); font-size: .52rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.55); text-decoration: none; display: inline-flex; align-items: center; gap: .45rem; transition: color .2s; } .sil-all-link:hover { color: var(--white); } .sil-all-link:hover i { transform: translate(3px,-3px); } .sil-all-link i { transition: transform .2s; } /* Cards strip — horizontal, single row */ .sil-strip { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); } .sil-card { position: relative; display: flex; flex-direction: column; gap: 1.1rem; padding: 1.8rem 1.6rem 1.6rem; border-right: 1px solid var(--line); text-decoration: none; color: var(--white); overflow: hidden; transition: background .3s; } .sil-card:last-child { border-right: none; } .sil-card::before { content: ''; position: absolute; inset: 0; background: var(--red); transform: scaleY(0); transform-origin: bottom; transition: transform .42s cubic-bezier(.77,0,.175,1); z-index: 0; } .sil-card:hover::before { transform: scaleY(1); } .sil-card > * { position: relative; z-index: 1; } .sil-card__num { font-family: var(--sf); font-size: .72rem; color: rgba(255,255,255,.15); letter-spacing: .08em; transition: color .3s; } .sil-card:hover .sil-card__num { color: rgba(255,255,255,.35); } .sil-card__ico { font-size: 1.5rem; color: rgba(255,255,255,.18); transition: color .3s; } .sil-card:hover .sil-card__ico { color: rgba(255,255,255,.9); } .sil-card__title { display: block; font-family: var(--sf); font-size: clamp(1.05rem, 1.6vw, 1.35rem); text-transform: uppercase; letter-spacing: -.01em; color: var(--white); line-height: 1.1; margin-bottom: .5rem; transition: color .3s; } .sil-card__title em { font-style: normal; color: var(--red); transition: color .3s; } .sil-card:hover .sil-card__title em { color: rgba(255,255,255,.7); } .sil-card__desc { font-family: var(--pp); font-size: .58rem; color: rgba(255,255,255,.35); line-height: 1.7; transition: color .3s; } .sil-card:hover .sil-card__desc { color: rgba(255,255,255,.75); } .sil-card__tag { display: inline-flex; align-items: center; gap: .35rem; font-family: var(--pp); font-size: .42rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.1); padding: .25rem .7rem; width: fit-content; margin-top: auto; transition: color .3s, border-color .3s; } .sil-card:hover .sil-card__tag { color: rgba(255,255,255,.8); border-color: rgba(255,255,255,.35); } .sil-card__arrow { position: absolute; top: 1.3rem; right: 1.4rem; font-size: .65rem; color: rgba(255,255,255,.1); opacity: 0; transform: translate(-4px, 4px); transition: opacity .3s, transform .3s, color .3s; } .sil-card:hover .sil-card__arrow { opacity: 1; transform: translate(0, 0); color: rgba(255,255,255,.8); } /* Accent card */ .sil-card--accent { background: rgba(233,32,56,.06); border-color: rgba(233,32,56,.2); } .sil-card--accent .sil-card__ico { color: rgba(233,32,56,.5); } .sil-card--accent .sil-card__title em { color: var(--red); } @media (max-width: 900px) { .sil-strip { grid-template-columns: repeat(2, 1fr); } .sil-card:nth-child(2) { border-right: none; } .sil-card:nth-child(1), .sil-card:nth-child(2) { border-bottom: 1px solid var(--line); } } @media (max-width: 540px) { .sil-strip { grid-template-columns: 1fr; } .sil-card { border-right: none; border-bottom: 1px solid var(--line); } .sil-card:last-child { border-bottom: none; } .sil-header { align-items: flex-start; } .sil-header-right { align-items: flex-start; text-align: left; } } /* ============================================================ NEED MORE? — compact square tiles (footer öncesi, IN-LAB altı) Anasayfanın son section'ı. Anasayfada kendi section'ı OLMAYAN sayfalara kare kutular: IN-Words, Join, INfinite, Manifesto, Wallpapers, Contact. Her kutu: üstte tag, ortada başlık, altta desc. ============================================================ */ .s-directory { padding: 3rem 0 3.5rem; background: var(--sec-3); position: relative; overflow: hidden; } /* ── Üst blok: sol 2 satırlı başlık · sağ Full Directory butonu ── */ .s-directory__head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 1.75rem; position: relative; z-index: 1; gap: 1.5rem; flex-wrap: wrap; } /* İki satırlı başlık — daha ufak */ .s-directory__title { font-family: var(--sf); font-size: clamp(1.6rem, 2.6vw, 2.25rem); font-weight: 700; letter-spacing: .01em; text-transform: uppercase; color: var(--white); margin: 0; line-height: 1.1; } .s-directory__title .accent { color: var(--red); } /* Full Directory butonu — IN-LAB'teki Explore IN-LAB butonuyla birebir aynı stil */ .s-directory__btn { font-family: var(--pp); font-size: .56rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.55); text-decoration: none; display: inline-flex; align-items: center; gap: .55rem; padding: .6rem 1.3rem; border: 1px solid rgba(255,255,255,.14); background: transparent; transition: color .25s, border-color .25s, background .25s; white-space: nowrap; flex-shrink: 0; } .s-directory__btn:hover { color: #fff; border-color: var(--red); background: rgba(233,32,56,.07); } .s-directory__btn i { font-size: .55rem; transition: transform .25s; } .s-directory__btn:hover i { transform: translateX(5px); } /* ══════════════════════════════════════════════════════════ NEED MORE — Farklı genişlikte fotoğraflı 5 kutu Asimetrik flex-row: w1=1, w2=1.5, w3=2 — yatayda dolu Her kutu BG image + dark shade + tipografik içerik ══════════════════════════════════════════════════════════ */ .dir-hd { display: flex; flex-direction: column; gap: .55rem; margin-bottom: 1.75rem; position: relative; z-index: 1; } .dir-hd__eyebrow { font-family: var(--pp); font-size: .58rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--red); line-height: 1; margin: 0 0 .55rem 0; padding: 0; text-indent: 0; display: block; } .dir-hd__title { font-family: var(--sf), 'Impact', sans-serif; font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 700; letter-spacing: .01em; text-transform: uppercase; color: var(--white); margin: 0; line-height: 1.08; } .dir-hd__title .dir-hd__dot { color: var(--red); } /* Asimetrik kutular — yatay flex, farklı genişlikler */ .dir-tiles { display: flex; flex-wrap: nowrap; gap: 0; position: relative; z-index: 1; } /* Kutu — fotoğraf arka planlı, dark shade overlay, içerik altta */ .dir-tile { position: relative; display: block; height: 280px; min-width: 0; overflow: hidden; text-decoration: none; background-color: var(--sec-3); background-size: cover; background-position: center; background-repeat: no-repeat; isolation: isolate; flex: 1 1 0; filter: grayscale(1) brightness(.72); /* Hover'da sağa doğru kayar gibi binme efekti */ transition: filter .4s ease, transform .5s cubic-bezier(.22,1,.36,1), box-shadow .4s ease, z-index 0s linear .5s; transform: translateX(0); z-index: 1; } /* Genişlik varyantları — sabit, hover'da değişmez */ .dir-tile--w1 { flex-grow: 1; } .dir-tile--w2 { flex-grow: 1.6; } .dir-tile--w3 { flex-grow: 2.3; } /* Hover: kutu sağa doğru kayar, üst katmana çıkar, gölge bırakır */ .dir-tile:hover { filter: grayscale(0) brightness(.95); transform: translateX(4%); z-index: 5; box-shadow: -18px 0 36px rgba(0,0,0,.55), 0 8px 24px rgba(0,0,0,.4); transition: filter .4s ease, transform .5s cubic-bezier(.22,1,.36,1), box-shadow .4s ease, z-index 0s linear 0s; } /* Hover edilen kutudan SONRAKİ kutu da hafifçe sağa kayar — domino hissi */ .dir-tile:hover ~ .dir-tile { transform: translateX(2%); } /* Karartma katmanı — alttan üste dark gradient (hover'da değişmez) */ .dir-tile__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(2,2,2,.1) 0%, rgba(2,2,2,.55) 60%, rgba(2,2,2,.88) 100%); z-index: 0; } /* İçerik bloğu — alt-sol köşede */ .dir-tile__body { position: absolute; left: 1.2rem; right: 1.2rem; bottom: 1.1rem; z-index: 1; display: flex; flex-direction: column; gap: .35rem; } .dir-tile__tag { font-family: var(--pp); font-size: .52rem; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--red); line-height: 1; } .dir-tile__name { font-family: var(--sf), 'Impact', sans-serif; font-size: clamp(1.4rem, 2vw, 1.9rem); font-weight: 700; letter-spacing: -.005em; text-transform: uppercase; line-height: 1; color: var(--white); margin: 0; } /* Eski sınıfları temizle */ .s-directory__grid, .s-directory__head, .s-directory__heading-wrap, .s-directory__eyebrow, .s-directory__btn, .dir-split, .dir-hero, .dir-hero__eyebrow, .dir-hero__title, .dir-hero__dot, .dir-hero__lead, .dir-hero__cta, .dir-hero__count, .dir-matrix, .dir-matrix__cell, .dir-matrix__num, .dir-matrix__name, .dir-matrix__desc, .dir-matrix__arrow, .dir-box, .dir-list, .dir-list__item, .dir-list__link, .dir-trio, .dir-trio__card, .dir-trio__tag, .dir-trio__title, .dir-trio__arrow, .dir-index, .dir-index__row, .dir-index__link, .dir-index__num, .dir-index__name, .dir-index__desc, .dir-index__dots, .dir-index__arrow, .dir-box__bgnum, .dir-box__arrow, .dir-box__num, .dir-box__top, .dir-box__cta, .dir-box__tag, .dir-box__name, .dir-box__desc, .dir-list__title, .dir-list__icon { all: unset; } .s-directory__grid, .s-directory__head, .dir-split, .dir-matrix, .dir-box, .dir-list, .dir-trio, .dir-index { display: none; } /* ── Responsive ── */ @media (max-width: 960px) { .dir-tiles { flex-wrap: wrap; } .dir-tile { flex: 1 1 calc(50% - .3rem); height: 220px; } .dir-tile--w3 { flex: 1 1 100%; } .dir-tile:hover { flex-grow: 1; } } @media (max-width: 560px) { .dir-tile { flex: 1 1 100%; height: 180px; } .dir-tile__desc { max-height: 4em; opacity: 1; margin-top: .3rem; } } /* ══════════════════════════════════════════════════════════ LUCK PITCH — kapanış davet bandı Üstündeki .s-directory (--sec-3) ve alttaki footer (--sec-1) arasında ORTA ton (--sec-2) — net biçimde ayrılır. Üst border yok, alt hairline footer'dan ayırır. ══════════════════════════════════════════════════════════ */ .s-luckpitch { padding: 7rem 0; background: var(--sec-2); text-align: center; position: relative; } .s-luckpitch__inner { max-width: 900px; margin: 0 auto; position: relative; z-index: 1; } .s-luckpitch__eyebrow { font-family: var(--pp); font-size: .62rem; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: var(--red); margin: 0 0 .55rem 0; padding: 0; text-indent: 0; line-height: 1; display: inline-flex; align-items: center; gap: .9rem; } .s-luckpitch__eyebrow::before, .s-luckpitch__eyebrow::after { content: ''; width: 26px; height: 1px; background: var(--red); opacity: .8; } .s-luckpitch__title { font-family: var(--sf), 'Impact', sans-serif; font-size: clamp(3rem, 8vw, 7rem); font-weight: 700; text-transform: uppercase; color: var(--white); line-height: 1.02; letter-spacing: -.02em; margin: 0 0 1.5rem; } .s-luckpitch__lead { font-family: var(--pp); font-size: .9rem; color: rgba(255,255,255,.6); line-height: 1.7; max-width: 52ch; margin: 0 auto 2.8rem; } .s-luckpitch__lead strong { color: var(--white); font-weight: 600; } /* Closing-CTA variant: sits between page content and footer. Uses --sec-3 so it visually separates from both the section above and the footer below. Includes a simple outline CTA. */ .s-luckpitch--cta { background: var(--sec-3); padding: 8rem 0; } .s-luckpitch__btn { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--pp); font-size: .58rem; letter-spacing: .3em; text-transform: uppercase; color: rgba(255,255,255,.75); text-decoration: none; padding: .95rem 1.7rem; border: 1px solid rgba(255,255,255,.2); background: transparent; transition: color .25s, border-color .25s, background .25s, gap .25s; } .s-luckpitch__btn:hover { color: #fff; border-color: var(--red); background: var(--sec-2); gap: .9rem; } .s-luckpitch__btn i { font-size: .65rem; } /* ══════════════════════════════════════════════════════════ RANDOM SHORTCUT — "boarding tag" stili buton Sol: DEST etiketi + 3 harfli destination kodu (LAB / WRK / MAN ...) Orta: küçük üst çizgi (RANDOM SHORTCUT) + Steelfish büyük etiket Sağ: GO ↗ ikonu Hover: sol kırmızı bant tüm buton üzerine kayar (wipe), kod flip, GO bloğu hafifçe sağa süzülür. ══════════════════════════════════════════════════════════ */ .rnd-tag { --rnd-h: 88px; position: relative; isolation: isolate; display: inline-flex; align-items: stretch; gap: 0; width: 460px; max-width: 100%; height: var(--rnd-h); background: var(--sec-2); color: var(--white); text-decoration: none; border: 1px solid var(--line); overflow: hidden; transition: transform .35s cubic-bezier(.22,1,.36,1), border-color .35s ease; } .rnd-tag:hover { border-color: var(--red); } /* Hover sırasında soldan sağa açılan kırmızı katman (içerik üzerine değil, yalnızca arka plan olarak — z-index:0). */ .rnd-tag::before { content: ''; position: absolute; inset: 0; background: var(--red); transform: scaleX(0); transform-origin: left center; transition: transform .55s cubic-bezier(.22,1,.36,1); z-index: 0; } .rnd-tag:hover::before { transform: scaleX(1); } /* Tüm iç bloklar arka planın üstünde */ .rnd-tag > * { position: relative; z-index: 1; } /* ── SOL: DEST kodu kutusu ── */ .rnd-tag__meta { flex-shrink: 0; width: 96px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 0 1rem; background: var(--bg); border-right: 1px solid var(--line); transition: background-color .35s ease, border-color .35s ease; } .rnd-tag:hover .rnd-tag__meta { background: #b3162a; border-right-color: rgba(255,255,255,.18); } .rnd-tag__meta-k { font-family: var(--pp); font-size: .55rem; letter-spacing: .32em; color: var(--dim); text-transform: uppercase; margin-bottom: .25rem; transition: color .35s ease; } .rnd-tag:hover .rnd-tag__meta-k { color: rgba(255,255,255,.7); } .rnd-tag__code { font-family: var(--sf), 'Impact', sans-serif; font-size: 2rem; font-weight: 700; letter-spacing: .02em; line-height: 1; color: var(--red); text-transform: uppercase; font-variant-numeric: tabular-nums; display: inline-block; transition: color .25s ease, transform .35s cubic-bezier(.22,1,.36,1); } .rnd-tag:hover .rnd-tag__code { color: var(--white); } .rnd-tag__code.is-flip { transform: translateY(-4px); opacity: 0; } /* ── ORTA: ayraç noktalı çizgi ── */ .rnd-tag__sep { flex-shrink: 0; width: 1px; margin: 14px 0; background-image: linear-gradient( to bottom, rgba(255,255,255,.22) 0, rgba(255,255,255,.22) 4px, transparent 4px, transparent 8px ); background-size: 1px 8px; } /* ── ORTA: hint + label ── */ .rnd-tag__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 0 1.25rem; overflow: hidden; } .rnd-tag__hint { font-family: var(--pp); font-size: .55rem; letter-spacing: .32em; color: var(--dim); text-transform: uppercase; margin-bottom: .35rem; transition: color .35s ease; } .rnd-tag:hover .rnd-tag__hint { color: rgba(255,255,255,.85); } .rnd-tag__label { font-family: var(--sf), 'Impact', sans-serif; font-weight: 700; font-size: 1.55rem; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--white); transition: opacity .22s ease, transform .3s cubic-bezier(.22,1,.36,1); } .rnd-tag__label.is-swapping { opacity: 0; transform: translateY(-4px); } /* ── SAĞ: GO ↗ ── */ .rnd-tag__go { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; gap: .6rem; padding: 0 1.4rem; font-family: var(--pp); font-size: .62rem; line-height: 1; letter-spacing: 0; /* letter-spacing'i metne özgü uyguluyoruz */ color: rgba(255,255,255,.7); text-transform: uppercase; border-left: 1px solid var(--line); transition: color .35s ease, padding .35s cubic-bezier(.22,1,.36,1), border-color .35s ease; } .rnd-tag__go-txt { display: inline-block; letter-spacing: .32em; /* sağdaki letter-spacing boşluğunu sıfırla → optik hizalama düzelir */ margin-right: -.32em; line-height: 1; } .rnd-tag__go i { display: inline-flex; align-items: center; justify-content: center; font-size: .78rem; line-height: 1; /* FontAwesome ikon glyph'i baseline'da hafif aşağıda oturuyor; optik düzeltme */ transform: translateY(-1px); transition: transform .35s cubic-bezier(.22,1,.36,1); } .rnd-tag:hover .rnd-tag__go { color: var(--white); border-left-color: rgba(255,255,255,.25); padding-right: 1.7rem; } .rnd-tag:hover .rnd-tag__go i { transform: translate(4px,-5px); } /* Responsive */ @media (max-width: 560px) { .rnd-tag { width: 100%; --rnd-h: 76px; } .rnd-tag__meta { width: 78px; padding: 0 .8rem; } .rnd-tag__code { font-size: 1.6rem; } .rnd-tag__body { padding: 0 .9rem; } .rnd-tag__label { font-size: 1.2rem; } .rnd-tag__go { padding: 0 .9rem; font-size: .55rem; } .rnd-tag__go i { font-size: .7rem; } } @media (max-width: 380px) { .rnd-tag__hint { display: none; } .rnd-tag__go span { display: none; } } /* ── Scramble: hover sırasında karakterler titrer gibi karışır ── */ .scramble { display: inline-block; font-variant-ligatures: none; /* JS karakterleri değiştirirken layout zıplamasın */ font-feature-settings: "tnum" 1; } .scramble.is-scrambling { /* hafif kırmızı flicker — koyu/açık karakterleri ayırır */ text-shadow: 0 0 .5px rgba(233,32,56,.35); } /* ── Responsive ── */ @media (max-width: 1024px) { .s-directory { padding: 2.5rem 0 3rem; } .s-directory__grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 640px) { .s-directory { padding: 2.25rem 0 2.5rem; } .s-directory__head { margin-bottom: 1.5rem; gap: 1.1rem; align-items: flex-start; flex-direction: column; } .s-directory__btn { align-self: flex-start; padding: .55rem 1.1rem; } .s-directory__grid { grid-template-columns: repeat(2, 1fr); gap: .5rem; } .dir-box { padding: .85rem .8rem; } .dir-box__name { font-size: 1rem; } .dir-box__desc { font-size: .62rem; } } /* ============================================================ IN-DNA SECTION — Sade Tipografik Tasarım ============================================================ */ .s-indna { padding: 6rem 0 7rem; background: var(--sec-3); position: relative; overflow: hidden; } /* CMS YÖNLENDİRME BLOĞU — ilk yükte "hayalet/flash" önleyici. Blok CMS verisi işlenene kadar gizli kalır (cms.js .cms-pending'i kaldırır). JS yoksa/cms yüklenmezse 1.2sn sonra fallback olarak görünür (FOUC koruması). */ .s-indna.cms-pending { visibility: hidden; } @keyframes cmsPendingFailsafe { to { visibility: visible; } } .s-indna.cms-pending { animation: cmsPendingFailsafe 0s linear 1.2s forwards; } /* ── Sol kutular: soldan sağa kayarak gelir ── */ .sid-anim-cols { opacity: 0; transform: translateX(-24px); transition: opacity .75s ease .35s, transform .75s cubic-bezier(.22,1,.36,1) .35s; } .s-indna.indna-visible .sid-anim-cols { opacity: 1; transform: translateX(0); } /* ── Sağ başlık bloğu: sağdan sola kayarak gelir ── */ .sid-anim-header { opacity: 0; transform: translateX(24px); transition: opacity .75s ease .55s, transform .75s cubic-bezier(.22,1,.36,1) .55s; } .s-indna.indna-visible .sid-anim-header { opacity: 1; transform: translateX(0); } /* Ana layout — SOL kutular · SAĞ başlık (yan yana, üst hizada) */ .sid-layout { display: grid; grid-template-columns: 2fr 1fr; /* kutular daha geniş, başlık daha dar */ gap: 1.8rem; /* blok arası boşluk azaltıldı */ align-items: start; /* Başlık kutuların üst hizasıyla aynı yatay hizada */ } /* Sağ: başlık sütunu — en sağda, tüm yazılar sağa dayalı */ .sid-title-col { display: flex; flex-direction: column; align-items: flex-end; /* content right-aligned */ text-align: right; /* text right-aligned */ gap: .55rem; /* standard eyebrow-to-title gap */ padding-top: .2rem; /* optical top alignment with box padding */ } .sid-title-col .sid-heading { text-align: right; } .sid-title-col .sid-eyebrow { text-align: right; } .sid-cta-question { font-family: var(--pp); font-size: .88rem; letter-spacing: .01em; color: rgba(255,255,255,.6); font-style: normal; text-align: right; line-height: 1.7; margin: .8rem 0 .6rem; max-width: 42ch; } /* IN-DNA CTA — IN-LAB "Explore" butonu ile birebir aynı stil */ .sid-cta-btn { font-family: var(--pp); font-size: .56rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.55); text-decoration: none; display: inline-flex; align-items: center; gap: .55rem; padding: .6rem 1.3rem; border: 1px solid rgba(255,255,255,.14); background: transparent; transition: color .25s, border-color .25s, background .25s; white-space: nowrap; } .sid-cta-btn:hover { color: #fff; border-color: var(--red); background: rgba(233,32,56,.07); } .sid-cta-btn i { font-size: .55rem; transition: transform .25s; } .sid-cta-btn:hover i { transform: translateX(5px); } .sid-eyebrow { font-family: var(--pp); font-size: .46rem; letter-spacing: .42em; text-transform: uppercase; color: rgba(255,255,255,.25); } .sid-link { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--pp); font-size: .46rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.35); text-decoration: none; transition: color .25s; } .sid-link:hover { color: var(--white); } .sid-link i { transition: transform .25s; } .sid-link:hover i { transform: translateX(4px); } /* Büyük başlık — IN-LAB ile aynı tipografik ölçü */ .sid-heading { font-family: var(--sf); font-size: clamp(3rem, 8vw, 7rem); font-weight: 700; text-transform: uppercase; letter-spacing: -.02em; line-height: 1.05; color: var(--white); margin: 0; } .sid-dash { color: var(--red); } .sid-dot { display: none; } /* İki kutu — sol blok içinde yan yana */ .sid-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; min-width: 0; /* grid item overflow koruması */ } .sid-col { display: flex; flex-direction: column; gap: 1.8rem; padding: 3.8rem 3rem 3.4rem 2.8rem; min-height: 32rem; text-decoration: none; color: var(--white); /* Gri arkaplandan ayrılacak koyu ton — her kutu kendi başına */ background: #0a0a0a; border: 1px solid rgba(255,255,255,.06); position: relative; overflow: hidden; transition: background .35s, border-color .35s; } .sid-col:first-child { padding-left: 2.8rem; } .sid-col:last-child { border-right: 1px solid rgba(255,255,255,.06); padding-left: 2.8rem; padding-right: 2.8rem; } .sid-col:hover { background: #0d0d0d; /* kırmızı border kaldırıldı — sadece hafif bir ton değişimi */ border-color: rgba(255,255,255,.12); } /* Hover: sol/sağ kenardan kırmızı çizgi yukarı kayar */ .sid-col::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.22,1,.36,1); } .sid-col:hover::before { transform: scaleX(1); } .sid-col__top { display: flex; align-items: center; justify-content: space-between; } .sid-col__num, .sid-col__cipher { font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: .36rem; letter-spacing: .18em; color: rgba(255,255,255,.22); /* text-transform yok → TR locale i→İ bug. Metin kaynakta yazıldığı gibi. */ transition: color .35s ease; } .sid-col:hover .sid-col__cipher { color: rgba(233,32,56,.55); } .sid-col__badge { font-family: var(--pp); font-size: .4rem; letter-spacing: .2em; /* text-transform yok → TR locale i→İ bug. Metin kaynakta yazıldığı gibi. */ color: rgba(233,32,56,.6); border: 1px solid rgba(233,32,56,.2); padding: .22rem .7rem; transition: color .3s, border-color .3s; } .sid-col:hover .sid-col__badge { color: var(--red); border-color: rgba(233,32,56,.45); } .sid-col__title { font-family: var(--sf); font-size: clamp(2.4rem, 4.6vw, 4.2rem); font-weight: 700; text-transform: uppercase; letter-spacing: -.025em; line-height: 1.05; color: var(--white); /* color transition only -- letter-spacing / line-height fixed */ transition: color .35s ease; } /* Hover: başlık kırmızıya döner, tipografik bütünlük korunur */ .sid-col:hover .sid-col__title { color: var(--red); } .sid-col__desc { font-family: var(--pp); font-size: .66rem; line-height: 1.75; color: rgba(255,255,255,.28); max-width: 360px; /* text-transform yok → TR locale i→İ bug. Metin kaynakta yazıldığı gibi. */ transition: color .3s; } .sid-col:hover .sid-col__desc { color: rgba(255,255,255,.55); } /* ── Başlık BÜYÜK harf. TR locale i→İ bug'ına karşı :lang(tr) istisnası. ── */ .sid-col__title:lang(tr) { text-transform: none; } /* ── CTA: sade tipografik — kırmızı vurgulu, çizgi ve ok yok ── */ .sid-col__cta { display: inline-flex; align-items: center; font-family: var(--pp); font-size: .46rem; letter-spacing: .22em; text-transform: uppercase; color: var(--red); margin-top: auto; transition: color .3s ease, letter-spacing .3s ease; } .sid-col__cta-text { white-space: nowrap; color: var(--red); transition: color .3s ease; } /* Hover: kırmızı biraz daha canlı, harf aralığı hafifçe açılır */ .sid-col:hover .sid-col__cta { letter-spacing: .26em; } .sid-col:hover .sid-col__cta-text { color: var(--red); filter: brightness(1.15); } /* Responsive */ @media (max-width: 1024px) { .sid-layout { grid-template-columns: 1.5fr 1fr; gap: 2.2rem; } .sid-heading { font-size: clamp(2.6rem, 7.5vw, 5rem); } } @media (max-width: 860px) { /* Küçük ekranda: başlık en üste çıkar, kutular altına gelir */ .sid-layout { grid-template-columns: 1fr; gap: 2.5rem; } .sid-title-col { order: -1; padding-top: 0; } .sid-cta-question { max-width: 100%; } } @media (max-width: 720px) { .sid-cols { grid-template-columns: 1fr; gap: 1rem; } .sid-heading { font-size: clamp(2.6rem, 12vw, 5rem); } /* Mobilde kutular kompakt — başlık + kısa açıklama + CTA; sabit min-height kaldırıldı, dikey hava ve padding sıkıştırıldı */ .sid-col { padding: 1.6rem 1.1rem 1.5rem; border-right: none; min-height: 0; gap: .9rem; } .sid-col:first-child { padding-left: 1.1rem; } .sid-col:last-child { padding-left: 1.1rem; padding-right: 1.1rem; border-bottom: none; } .sid-col__title { font-size: clamp(2rem, 9vw, 2.6rem); line-height: 1.02; } .sid-col__desc { font-size: .7rem; line-height: 1.55; max-width: 100%; } .sid-col__cta { margin-top: .4rem; } } /* ============================================================ JOIN ============================================================ */ /* ── IN-LAB Portal Section (index.html) ── */ /* ════════════════════════════════════════════ IN-LAB PORTAL — Showcase Cards ════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════ IN-LAB PORTAL — Static section (no canvas, no animation). Uses palette-grey background like other major sections. ════════════════════════════════════════════════════════ */ .s-inlab-portal { padding: calc(6.5rem + 20px) 0; background: var(--sec-2); position: relative; } /* ── IN-LAB bölümü: düz koyu gri zemin (site paleti) ── */ .s-inlab-portal--lab { background: var(--sec-2); /* #070707 — diğer ana bölümlerle aynı düz koyu gri */ border-top: 1px solid rgba(255,255,255,.05); isolation: isolate; overflow: hidden; } /* ── Asimetrik vitrin: 1 büyük öne çıkan + küçük kartlar ── */ .s-inlab-portal--lab .silp-grid--featured { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: 1.2rem; } /* küçük kartlar */ .s-inlab-portal--lab .silp-card { min-height: 248px; } .s-inlab-portal--lab .silp-card__visual { height: 104px; } .s-inlab-portal--lab .silp-card__content { padding: .9rem; } .s-inlab-portal--lab .silp-card__title { font-size: 1.05rem; } .s-inlab-portal--lab .silp-card__desc { font-size: .64rem; line-height: 1.45; } .s-inlab-portal--lab .silp-bigicon { font-size: 2.1rem; } /* ── Küçük kartlar (feature HARİÇ): başlık büyük (%15 daha büyük: 1.42→1.63rem) ── */ .s-inlab-portal--lab .silp-card:not(.silp-card--feature) .silp-card__title { font-size: 1.63rem; line-height: 1.04; letter-spacing: -.01em; } /* alttaki açıklama küçük kartlarda gizli (hover overlay'de gösterilir) */ .s-inlab-portal--lab .silp-card:not(.silp-card--feature) .silp-card__desc { display: none; } /* ── HOVER OVERLAY — tam kart boyutunda kırmızı; ikon + büyük başlık ÜSTTE ── Düz animasyon: blur YOK, sadece yumuşak yukarı-kayma + fade (iç öğeler kademeli) */ .silp-card__hover { --silp-ease-soft: cubic-bezier(.22, .61, .36, 1); position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column; justify-content: flex-start; gap: .65rem; padding: 1.4rem; background: linear-gradient(155deg, var(--red) 0%, #b3162a 100%); opacity: 0; visibility: hidden; transform: translateY(14px) scale(.985); transition: opacity .4s var(--ease), visibility .4s var(--ease), transform .45s var(--ease); pointer-events: none; } .s-inlab-portal--lab .silp-card:not(.silp-card--feature):hover .silp-card__hover { opacity: 1; visibility: visible; transform: none; } /* overlay iç öğeleri sırayla akışkan şekilde gelsin (yumuşak yay-eğrisi + hafif netleşme) */ .silp-card__hover > * { opacity: 0; transform: translateY(16px); filter: blur(3px); transition: opacity .55s var(--silp-ease-soft), transform .6s var(--silp-ease-soft), filter .55s var(--silp-ease-soft); will-change: opacity, transform, filter; } .silp-card:hover .silp-card__hover > * { opacity: 1; transform: none; filter: blur(0); } .silp-card:hover .silp-card__hover-icon { transition-delay: .10s; } .silp-card:hover .silp-card__hover-title { transition-delay: .18s; } .silp-card:hover .silp-card__hover-desc { transition-delay: .26s; } .silp-card:hover .silp-card__hover-btn { transition-delay: .34s; } /* ikon — başlığın üstünde */ .silp-card__hover-icon { font-size: 1.5rem; color: #fff; line-height: 1; filter: drop-shadow(0 2px 8px rgba(0,0,0,.3)); } /* başlık — büyük ve üstte (%15 daha büyük: 1.95→2.24rem) */ .silp-card__hover-title { font-family: var(--sf); font-weight: 800; font-size: 2.24rem; line-height: 1; color: #fff; margin: 0; } .silp-card__hover-desc { font-size: .72rem; line-height: 1.5; color: rgba(255,255,255,.92); margin: 0; } /* buton altta (auto-margin ile aşağı itilir) */ .silp-card__hover-btn { display: inline-flex; align-items: center; gap: .5rem; align-self: flex-start; margin-top: auto; font-family: var(--pp); font-size: .56rem; letter-spacing: .18em; color: #fff; padding: .55rem 1rem; border: 1px solid rgba(255,255,255,.55); background: rgba(0,0,0,.12); transition: background .25s, border-color .25s, opacity .4s var(--ease), transform .45s var(--ease); } .silp-card__hover-btn i { font-size: .54rem; transition: transform .25s; } .silp-card__hover-btn:hover { background: #000; border-color: #000; } .silp-card:hover .silp-card__hover-btn:hover i { transform: translateX(4px); } /* coming-soon kartlarında overlay kırmızı yerine SİYAH olsun */ .silp-card--soon .silp-card__hover { background: linear-gradient(155deg, #161616 0%, #050505 100%); } /* "COMING SOON" butonu — pasif görünüm (tıklanmaz, hover'da değişmez) */ .silp-card__hover-btn--soon { border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.04); color: rgba(255,255,255,.7); cursor: default; } .silp-card__hover-btn--soon:hover { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.28); } /* ÖNE ÇIKAN kart — 2×2 alan kaplar */ .s-inlab-portal--lab .silp-card--feature { grid-column: span 2; grid-row: span 2; min-height: 0; } .s-inlab-portal--lab .silp-card--feature .silp-card__visual { height: auto; flex: 1; min-height: 240px; } .s-inlab-portal--lab .silp-card--feature .silp-card__content { padding: 1.6rem; } .s-inlab-portal--lab .silp-card--feature .silp-card__title { font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.02; } .s-inlab-portal--lab .silp-card--feature .silp-card__desc { font-size: .82rem; line-height: 1.55; max-width: 42ch; } .s-inlab-portal--lab .silp-card--feature .silp-card__num { font-size: 1.4rem; } /* öne çıkan rozeti */ .silp-card__feat-badge { position: absolute; top: 1rem; left: 1rem; z-index: 6; display: inline-flex; align-items: center; gap: .45rem; font-family: var(--pp); font-size: .6rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fff; background: var(--red); border-radius: 999px; padding: .4rem .75rem; box-shadow: 0 6px 20px -6px rgba(233,32,56,.6); } .silp-card__feat-badge i { font-size: .58rem; } /* VFX'i olmayan oyunlar için sade ikon görseli (oyun rengine göre) */ .silp-card__visual--icon { display: flex; align-items: center; justify-content: center; background: radial-gradient(120% 120% at 50% 35%, color-mix(in srgb, var(--c, #e92038) 22%, transparent), transparent 70%), #060606; } .silp-card__visual--icon .silp-card__visual-inner { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .silp-bigicon { font-size: 2.6rem; color: var(--c, #e92038); filter: drop-shadow(0 0 16px color-mix(in srgb, var(--c, #e92038) 45%, transparent)); opacity: .9; transition: transform .45s, opacity .45s; } .silp-card:hover .silp-bigicon { transform: scale(1.08); opacity: 1; } /* ════════════════════════════════════════════════════════════ ANASAYFA IN-LAB KARTLARI — IN-LAB sayfasındaki VFX'lerin BİREBİR aynısı (in-lab.html içindeki inline