/* ═══════════════════════════════════════════════════════════════ ONMART — Mürekkep & Kağıt · Rafine Monokrom Sistem (Fable 5) Fontlar: Syne (display) · Space Grotesk (gövde) · Space Mono (etiket) ═══════════════════════════════════════════════════════════════ */ @font-face{ font-family:'Adumu'; /* Yalnızca woff2. TTF yedeği listede dururken tarayıcı 358 KB'lık dosyayı da indiriyordu — sayfanın tamamı bundan büyük değil. woff2, Adumu'nun kullanılan tüm karakterlerini (Türkçe dâhil) içeriyor ve her güncel tarayıcı destekliyor. */ src:url('../fonts/Adumu.woff2') format('woff2'); font-weight:400 800; font-display:swap; } :root{ --ink:#101010; --ink-soft:#2b2b2b; --paper:#f4f1ea; --paper-deep:#e9e5db; --f-display:'Adumu','Syne',sans-serif; --f-body:'Space Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; --f-mono:'Space Mono',monospace; --ease:cubic-bezier(.22,1,.36,1); --hair:1px solid; /* Sayfaların alt boşluğu: sabit iletişim çubuğu içeriği örtmesin. Çubuk ~56px; telif şeridi çubuktan çıkınca bu pay da kısaldı. */ --bottom-nav-safe-height:96px; --player-safe-height:0px; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{font-family:var(--f-body);background:var(--ink);color:var(--paper);overflow:hidden;-webkit-font-smoothing:antialiased} button{font-family:inherit;background:none;border:none;color:inherit;cursor:pointer} a{color:inherit} /* Menü öğeleri, kartlar ve düğümler artık gerçek bağlantısı (Ctrl+tık ile yeni sekmede açılsın, adresi kopyalanabilsin diye). Buton görünümünü korumaları için tarayıcının bağlantı varsayılanları burada sıfırlanır. */ .file-item,.node,.portfolio-card,.social-card,.onmart-brand-card,.youtube-project-card, .cabinet-card,.home-artist-portal,.artist-card,.service-portfolio-card,.portfolio-similar-card, .instagram-card-link,.cbar-item{text-decoration:none;color:inherit;cursor:pointer} .instagram-card-link{display:inline} ::selection{background:var(--paper);color:var(--ink)} /* ── kaydırma çubukları ── */ ::-webkit-scrollbar{width:5px;height:5px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:currentColor} /* ═══ İNTRO ═══ */ .intro{position:fixed;inset:0;z-index:60;background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:opacity .9s var(--ease),visibility .9s} .intro.exit{opacity:0;visibility:hidden;pointer-events:none} /* Perde solduktan sonra JS 'gone' ekler. Yalnızca visibility:hidden bırakılınca tam ekran grain katmanı, logo nefesi ve parıltı süpürmesi site boyunca arka planda çalışmayı sürdürüyordu; girişe geri dönülmediği için düğüm kaldırılır. */ .intro.gone{display:none} /* derinlik katmanları: film grenli doku + kenar karartma */ .intro-grain{position:absolute;inset:-50%;pointer-events:none;opacity:.045;mix-blend-mode:screen; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); animation:grain-drift 7s steps(6) infinite} @keyframes grain-drift{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-2%)}80%{transform:translate(3%,1%)}100%{transform:translate(0,0)}} .intro-vignette{position:absolute;inset:0;pointer-events:none; background:radial-gradient(120% 90% at 50% 45%, transparent 32%, rgba(0,0,0,.42) 78%, rgba(0,0,0,.72) 100%)} .intro-frame{position:absolute;inset:22px;border:var(--hair);opacity:0;pointer-events:none;animation:frame-in 1.6s var(--ease) .15s forwards} @keyframes frame-in{from{opacity:0;transform:scale(1.012)}to{opacity:.26;transform:none}} .intro-frame::before,.intro-frame::after{content:'';position:absolute;width:14px;height:14px;border:var(--hair)} .intro-frame::before{top:-8px;left:-8px;border-right:none;border-bottom:none} .intro-frame::after{bottom:-8px;right:-8px;border-left:none;border-top:none} .intro-corner{position:absolute;font-family:var(--f-mono);font-size:10px;letter-spacing:.32em;opacity:0;animation:corner-in 1s var(--ease) forwards} .intro-corner.tl{top:38px;left:44px;animation-delay:.9s} .intro-corner.tr{top:38px;right:44px;animation-delay:1.05s} .intro-corner.bl{bottom:38px;left:44px;animation-delay:1.2s} .intro-corner.br{bottom:38px;right:44px;animation-delay:1.35s} @keyframes corner-in{to{opacity:.55}} .intro-inner{position:relative;z-index:2;text-align:center;padding:0 20px; /* imleç paralaksı: katmanlar farklı hızda kayar → derinlik */ transform:translate3d(calc(var(--px,0) * 6px), calc(var(--py,0) * 6px), 0); transition:transform .5s cubic-bezier(.16,1,.3,1)} /* imleci izleyen yumuşak ışık */ .intro-spot{position:absolute;inset:0;pointer-events:none;opacity:0; background:radial-gradient(420px circle at var(--mx,50%) var(--my,45%), rgba(244,241,234,.07), transparent 62%); animation:corner-in 2.4s var(--ease) 1.2s forwards;transition:background .18s linear} /* harf harf gelen üst başlık */ .intro-over{font-family:var(--f-mono);font-size:12px;letter-spacing:.5em;text-transform:lowercase;margin-bottom:34px} .intro-over span{display:inline-block;opacity:0;transform:translateY(10px); animation:char-in .7s var(--ease) forwards;animation-delay:calc(.55s + var(--c) * .028s)} @keyframes char-in{to{opacity:.62;transform:none}} /* ölçüm aleti kadranı */ .intro-dial{position:absolute;top:50%;left:50%;width:clamp(380px,54vw,720px);aspect-ratio:1; transform:translate3d(calc(-50% - var(--px,0) * 14px), calc(-50% - var(--py,0) * 14px), 0); pointer-events:none;opacity:0;animation:dial-in 2.4s var(--ease) .35s forwards; transition:transform .7s cubic-bezier(.16,1,.3,1)} @keyframes dial-in{from{opacity:0;transform:translate(-50%,-50%) scale(1.08)}to{opacity:1}} .intro-dial svg{width:100%;height:100%;overflow:visible} .intro-dial circle{fill:none;transform-origin:200px 200px} /* çentikli halkalar: kesikli konturla üretilir */ .dial-ticks{stroke:rgba(244,241,234,.30);stroke-width:7;stroke-dasharray:1 13;animation:ring-spin 150s linear infinite} .dial-ticks.fine{stroke:rgba(244,241,234,.16);stroke-width:4;stroke-dasharray:1 7;animation-duration:90s;animation-direction:reverse} .dial-ring{stroke:rgba(244,241,234,.08);stroke-width:1} /* ters yönde dönen iki ince yay */ .dial-arc{stroke:rgba(244,241,234,.5);stroke-width:1.4;stroke-linecap:round; stroke-dasharray:110 950;animation:ring-spin 26s linear infinite} .dial-arc.rev{stroke:rgba(244,241,234,.3);stroke-dasharray:60 780;animation-duration:38s;animation-direction:reverse} @keyframes ring-spin{to{transform:rotate(360deg)}} /* merkezden dışa çizilen ince kural */ .intro-rule{height:1px;margin:26px auto 18px;width:min(320px,64vw);overflow:hidden} .intro-rule i{display:block;height:100%;background:linear-gradient(90deg,transparent,rgba(244,241,234,.55),transparent);transform:scaleX(0);animation:rule-in 1.5s var(--ease) 1.5s forwards} @keyframes rule-in{to{transform:scaleX(1)}} /* logo: aşağıdan yukarı açılan maske ile girer, sonra hafifçe nefes alır */ .intro-logo{position:relative;display:inline-block;margin:4px 0; transform:translate3d(calc(var(--px,0) * -4px), calc(var(--py,0) * -4px), 0); transition:transform .6s cubic-bezier(.16,1,.3,1)} .intro-logo img{width:clamp(230px,33vw,400px);height:auto;display:block;margin:0 auto; clip-path:inset(100% 0 0 0);transform:scale(1.05); animation:logo-reveal 1.5s cubic-bezier(.16,1,.3,1) .45s forwards, logo-breathe 7s ease-in-out 2.4s infinite} @keyframes logo-reveal{ 0%{clip-path:inset(100% 0 0 0);transform:scale(1.05)} 100%{clip-path:inset(0 0 0 0);transform:scale(1)} } @keyframes logo-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.014)}} /* logonun arkasında yumuşak parlaklık — markayı öne çıkarır */ .intro-logo::before{content:'';position:absolute;inset:-22% -14%;pointer-events:none;z-index:-1;opacity:0; background:radial-gradient(closest-side, rgba(244,241,234,.13), transparent 72%); animation:corner-in 2s var(--ease) 1.1s forwards} /* ışık süpürmesi yalnızca harf formlarında görünsün diye logo alfası maske olur */ .intro-sheen{position:absolute;inset:0;pointer-events:none;opacity:0; background:linear-gradient(100deg,transparent 38%,rgba(255,255,255,.9) 50%,transparent 62%); background-size:260% 100%;background-repeat:no-repeat; -webkit-mask-image:url('../img/onmart-logo-white.webp');mask-image:url('../img/onmart-logo-white.webp'); -webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center; -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; animation:sheen-sweep 6.5s ease-in-out 1.9s infinite} @keyframes sheen-sweep{ 0%{opacity:0;background-position:170% 0} 8%{opacity:.9} 26%{opacity:.9;background-position:-70% 0} 34%,100%{opacity:0;background-position:-70% 0} } .intro-tag{font-family:var(--f-mono);font-size:10px;letter-spacing:.34em;text-transform:uppercase;opacity:0;animation:corner-in 1s var(--ease) 1.15s forwards} .intro-coords{margin-top:22px;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.24em;opacity:0;animation:coords-in 1.2s var(--ease) 1.9s forwards} @keyframes coords-in{to{opacity:.56}} .click-line{width:1px;height:74px;margin:0 auto 18px;overflow:hidden} .click-line span{display:block;width:100%;height:100%;background:currentColor;transform:scaleY(0);transform-origin:top;animation:grow-line 1.2s var(--ease) 1s forwards} @keyframes grow-line{to{transform:scaleY(1)}} .click{font-family:var(--f-mono);font-size:12px;letter-spacing:.4em;opacity:0;animation:pulse-click 2.4s ease 1.6s infinite} .intro.exit .click{animation-play-state:paused} @keyframes pulse-click{0%,100%{opacity:.35}50%{opacity:1}} @media (prefers-reduced-motion: reduce){ .intro-grain,.ring-arc,.intro-sheen{animation:none} .intro-grain{opacity:.03} .intro-sheen{display:none} } /* ═══ SAHNE / TEMA ═══ */ .stage{position:fixed;inset:0;opacity:0;visibility:hidden;transition:background .8s var(--ease),color .8s var(--ease),opacity .8s;overflow:hidden} .stage.visible{opacity:1;visibility:visible} .stage.dark{background:var(--ink);color:var(--paper)} .stage.light{background:var(--paper);color:var(--ink)} .grain{position:absolute;inset:0;pointer-events:none;opacity:.05;z-index:1;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} /* Konum .stage-topbar'a taşındı; marka artık o şeridin ilk öğesi. */ .brand{z-index:20;font-family:var(--f-display);font-weight:800;font-size:22px;letter-spacing:-.01em;opacity:0;transform:translateY(-8px);transition:all .7s var(--ease);padding:0;text-align:left;text-decoration:none;color:inherit;white-space:nowrap} .brand sup{font-family:var(--f-mono);font-size:9px;font-weight:400;margin-left:2px;opacity:.6} .brand.show{opacity:1;transform:none} /* ═══ ANA MENÜ ═══ */ /* Alt boşluk sabit iletişim çubuğunun payını içerir; yoksa son menü öğesi ("Teklif Al") çubuğun altında kalıyordu. */ .menu{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:24px max(6vw,42px) var(--bottom-nav-safe-height);z-index:5;transition:opacity .6s var(--ease),transform .6s var(--ease);overflow-y:auto;-webkit-overflow-scrolling:touch} .menu.hide{opacity:0;transform:translateY(-26px);pointer-events:none} .kicker,.page-kicker{font-family:var(--f-mono);font-size:11px;letter-spacing:.42em;text-transform:uppercase;opacity:.55;margin-bottom:14px} .title{font-family:var(--f-display);font-weight:800;font-size:clamp(34px,6vw,74px);letter-spacing:-.02em;min-height:1.15em;line-height:1.05} .title::after{content:'▌';font-weight:400;animation:caret .85s steps(2) infinite;margin-left:4px;opacity:.7} .title.done::after{opacity:0;animation:none} .menu.hide .title::after{animation-play-state:paused} /* Menü kapalıyken önizleme ekranının boşta duran "yayın" döngüleri (tv-drift, tv-flicker, tv-sweep) görünmedikleri hâlde her karede boyanıyordu. */ .menu.hide .menu-preview *{animation-play-state:paused} @keyframes caret{50%{opacity:0}} /* Menü + önizleme ekranı yan yana; dar ekranda önizleme düşer, liste tam genişler. */ /* Liste ile önizleme çerçevesi aynı hizada başlar ve aynı yükseklikte biter: satır yüksekliğini liste belirler, ekran ona göre uzar (align-items:stretch). */ .menu-layout{margin-top:42px;display:grid;grid-template-columns:minmax(0,860px) minmax(320px,1fr); gap:clamp(30px,4vw,68px);align-items:stretch} .file-menu{display:flex;flex-direction:column;border-top:var(--hair)} /* ═══ MENÜ ÖNİZLEME EKRANI ═══ Sağdaki boş alan artık ölü değil: bir başlığın üzerine gelindiğinde o sayfanın gerçek DOM'u kopyalanıp masaüstü genişliğinde kurulur ve kutuya sığacak kadar küçültülür. Yani sahte bir tel çerçeve değil, açılacak sayfanın kendisi görünür. */ .menu-preview{display:flex;flex-direction:column;opacity:0;transform:translateY(10px); animation:menu-preview-in .7s var(--ease) .55s forwards;pointer-events:none;user-select:none} @keyframes menu-preview-in{to{opacity:1;transform:none}} .menu-preview-screen{position:relative;flex:1;min-height:0;display:flex;flex-direction:column; border:var(--hair);overflow:hidden;box-shadow:0 24px 60px -30px rgba(0,0,0,.55)} .stage.dark .menu-preview-screen{background:#0d0d0d} .stage.light .menu-preview-screen{background:var(--paper)} .menu-preview-bar{flex:none;display:flex;align-items:center;gap:6px;padding:9px 12px;border-bottom:var(--hair)} .menu-preview-bar .dot{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.28} .menu-preview-url{margin-left:10px;font-family:var(--f-mono);font-size:9px;letter-spacing:.14em; text-transform:lowercase;opacity:.45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; transition:opacity .2s var(--ease)} /* Yükseklik satırdan gelir (liste boyu); oran sabitlenmez ki hizalama bozulmasın. */ .menu-preview-view{position:relative;flex:1;min-height:0;width:100%;overflow:hidden} /* Kopya, gerçek sayfa gibi masaüstü ölçüsünde kurulur; --k ile kutuya ölçeklenir. */ .menu-preview-stage{position:absolute;top:0;left:0;width:var(--vw,1440px);height:var(--vh,900px); transform-origin:top left;transform:scale(var(--k,.28))} .menu-preview-stage .page,.menu-preview-stage .detail-page,.menu-preview-stage .youtube-page{ position:absolute;inset:0;opacity:1;visibility:visible;transform:none;transition:none; overflow:hidden;padding:54px 46px} /* kopyada işlevsiz olan gezinme parçaları gizlenir */ .menu-preview-stage .btn-back,.menu-preview-stage .btn-detail-back, .menu-preview-stage .contact-bar{display:none} .menu-preview-fade{position:absolute;inset:auto 0 0 0;height:38%;pointer-events:none} .stage.dark .menu-preview-fade{background:linear-gradient(to bottom,transparent,#0d0d0d)} .stage.light .menu-preview-fade{background:linear-gradient(to bottom,transparent,var(--paper))} /* ── Boştaki ekran: yayın beklerken duran bir televizyon ── Logo ekranın ortasında usulca salınır; üstünden tarama çizgileri ve ağır bir parlama geçer. Hover gelince katman söner, yerini gerçek sayfa önizlemesi alır. */ .menu-preview-idle{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center; justify-content:center;overflow:hidden;transition:opacity .35s var(--ease)} .menu-preview.is-live .menu-preview-idle{opacity:0} .tv-logo{width:min(48%,210px);animation:tv-drift 7.5s ease-in-out infinite} .tv-logo img{display:block;width:100%;height:auto;opacity:.5; animation:tv-flicker 4.3s steps(1,end) infinite} .stage.light .tv-logo img{filter:invert(1);opacity:.42} /* yatay salınım + hafif eğilme: sabit bir görsel değil, canlı bir yayın hissi */ @keyframes tv-drift{ 0%,100%{transform:translate3d(0,0,0) rotate(-.7deg) scale(1)} 25% {transform:translate3d(2%,-4%,0) rotate(.5deg) scale(1.02)} 50% {transform:translate3d(0,-6%,0) rotate(.9deg) scale(1.01)} 75% {transform:translate3d(-2%,-3%,0) rotate(-.3deg) scale(1.03)} } /* tüplü ekran titremesi — seyrek ve hafif */ @keyframes tv-flicker{ 0%,92%,100%{opacity:.5} 93%{opacity:.34}94%{opacity:.56}95%{opacity:.4}96%{opacity:.52} } .tv-scanlines{position:absolute;inset:0;pointer-events:none;opacity:.5; background:repeating-linear-gradient(to bottom,currentColor 0 1px,transparent 1px 4px); mix-blend-mode:overlay} .stage.dark .tv-scanlines{opacity:.14} .stage.light .tv-scanlines{opacity:.09} /* ekranı yukarıdan aşağıya tarayan parlama */ .tv-sweep{position:absolute;left:0;right:0;height:38%;pointer-events:none;opacity:.5; background:linear-gradient(to bottom,transparent,currentColor,transparent); animation:tv-sweep 6s linear infinite} .stage.dark .tv-sweep{opacity:.05} .stage.light .tv-sweep{opacity:.035} @keyframes tv-sweep{from{transform:translateY(-140%)}to{transform:translateY(360%)}} .tv-hint{position:absolute;left:0;right:0;bottom:26px;text-align:center;font-family:var(--f-mono); font-size:9px;letter-spacing:.22em;text-transform:uppercase;opacity:.3} /* Alt yazı ekranın içine bindirilir; dışarıda dursaydı çerçeveyi yukarı iter, liste ile aynı hizada bitmezdi. */ .menu-preview-caption{position:absolute;left:12px;bottom:9px;z-index:2;margin:0; font-family:var(--f-mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase; opacity:.38;transition:opacity .2s var(--ease);pointer-events:none} .menu-preview.is-live .menu-preview-caption{opacity:.62} /* içerik değişirken kısa bir geçiş — ekran "kanal değiştiriyor" hissi verir */ .menu-preview-stage{animation:menu-preview-swap .38s var(--ease)} @keyframes menu-preview-swap{from{opacity:0;transform:scale(var(--k,.28)) translateY(14px)}} @media(max-width:1180px){ .menu-layout{grid-template-columns:1fr} .menu-preview{display:none} } @media (prefers-reduced-motion: reduce){ .menu-preview{animation:none;opacity:1;transform:none} .menu-preview-stage,.tv-logo,.tv-logo img,.tv-sweep{animation:none} .tv-sweep{display:none} } .file-item{display:grid;grid-template-columns:64px minmax(0,1fr) auto 42px;align-items:center;gap:18px;text-align:left;padding:17px 6px;border-bottom:var(--hair);font-size:clamp(19px,2.5vw,29px);opacity:0;transform:translateX(-14px);transition:transform .22s cubic-bezier(.16,1,.3,1),background .15s ease-out;will-change:transform} /* ── Menü satırlarının kademeli girişi ────────────────────────────────────── Bu kademe önce transition-delay ile yapılıyordu ve iki soruna yol açıyordu: 1) transition-delay KALICIYDI. Yalnızca açılıştaki belirmeyi değil, o satırın sonraki bütün geçişlerini de geciktiriyordu. Listenin 8. maddesinin üzerine gelindiğinde arka plan yarım saniye (.52s) sonra beliriyordu; ok işareti kendi geçişine sahip olduğu için anında tepki veriyor, arada gecikme "site takılıyor" hissi yaratıyordu. 2) .file-menu.active .file-item (üç sınıf) özgüllük olarak .file-item:hover (bir sınıf + bir sözde sınıf) kuralını EZİYORDU: hover'daki translateX(10px) hiç uygulanmıyordu. Satır sağa kaymıyor, yalnızca arka planı — o da geç — değişiyordu. Çözüm: kademe artık animation ile yapılıyor. animation-delay yalnızca animasyonu geciktirir, geçişlere karışmaz. "backwards" dolgusu sayesinde satır sırası gelene kadar görünmez bekler; animasyon bitince hiçbir dolgu bırakmaz, böylece hover geçişleri gecikmesiz ve tam çalışır. */ .file-menu.active .file-item{opacity:1;transform:none;animation:file-item-in .5s var(--ease) backwards} @keyframes file-item-in{from{opacity:0;transform:translateX(-14px)}} .file-menu.active .file-item:nth-child(1){animation-delay:.03s} .file-menu.active .file-item:nth-child(2){animation-delay:.1s} .file-menu.active .file-item:nth-child(3){animation-delay:.17s} .file-menu.active .file-item:nth-child(4){animation-delay:.24s} .file-menu.active .file-item:nth-child(5){animation-delay:.31s} .file-menu.active .file-item:nth-child(6){animation-delay:.38s} .file-menu.active .file-item:nth-child(7){animation-delay:.45s} .file-menu.active .file-item:nth-child(8){animation-delay:.52s} .file-menu.active .file-item:nth-child(9){animation-delay:.59s} .onmart-menu-item .file-label{background:linear-gradient(90deg,#ff2d95,#8b5cf6,#00e5ff,#39ff88);background-clip:text;-webkit-background-clip:text;color:transparent} .onmart-menu-item .file-arrow{color:#8b5cf6} a.file-item{text-decoration:none} .music-brand-card .brand-card-label{background:linear-gradient(90deg,#ff2d95,#8b5cf6,#00e5ff);background-clip:text;-webkit-background-clip:text;color:transparent} .game-brand-card .brand-card-label{background:linear-gradient(90deg,#00e5ff,#a855f7,#39ff88,#ff8a3d,#ff2d95);background-clip:text;-webkit-background-clip:text;color:transparent} .game-brand-card .brand-card-arrow{color:#a855f7} .onmarter-brand-card .brand-card-label{color:#e0a326} .onmarter-brand-card .brand-card-arrow{color:#e0a326} .file-number{font-family:var(--f-mono);font-size:13px;opacity:.5} .file-label{font-family:var(--f-display);font-weight:700;letter-spacing:-.01em;min-width:0;overflow-wrap:anywhere} .file-tag{font-family:var(--f-mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;opacity:0;transform:translateX(8px);transition:opacity .18s ease-out,transform .18s cubic-bezier(.16,1,.3,1);white-space:nowrap} .file-arrow{font-size:.85em;justify-self:end;transition:transform .18s cubic-bezier(.16,1,.3,1);display:flex;align-items:center} .file-arrow svg{width:1em;height:1em} @media(max-width:480px){ .file-item{grid-template-columns:38px minmax(0,1fr) auto 26px;gap:10px;font-size:clamp(16px,5.2vw,22px);padding:14px 4px} .file-tag{font-size:8px;letter-spacing:.13em} .file-number{font-size:10px} } @media(max-width:820px){ /* dikey ortalama, kısa mobil ekranlarda başlığı marka logosu/tema anahtarının üzerine itiyordu */ .menu{justify-content:flex-start;padding-top:86px} /* ── Menü sayfası telefonda "donmuş" hissettiriyordu ────────────────────── Ölçtük: iPhone 12 (390x844) ve iPhone 15 Pro Max'te menünün kaydırma payı tam olarak 0 pikseldi. Liste ekrana birebir sığdığı için parmak yukarı aşağı sürtülüyor, hiçbir şey kıpırdamıyordu; sayfa kilitlenmiş gibi duruyordu. Bir telefon sayfasının "canlı" olduğu, azıcık esnemesinden anlaşılır. Çözüm, listenin altına görünmez 46 piksellik bir pay koymaktır. Bunu normal bir kutuyla yapmak işe yaramaz: .menu bir flex kolonu ve artan boş alan flex tarafından paylaştırıldığı için toplam yükseklik her zaman ekrana eşitleniyor — denedik, kaydırma payı yine 0 çıktı. Bunun yerine mutlak konumlu bir işaretçi kullanılıyor. .menu zaten position:absolute olduğu için bu sözde eleman ona göre konumlanır; top:100% onu kutunun ALT KENARININ ardına taşır ve kaydırma alanını 46 piksel uzatır. Görünen düzende hiçbir şey değişmez, yalnızca altta parmakla hissedilen küçük bir nefes payı doğar. */ .menu::after{content:'';position:absolute;top:100%;left:0;width:1px;height:46px;pointer-events:none} /* Kaydırma menünün içinde kalsın; arkadaki sabit sahne birlikte sürüklenmesin. */ .menu{overscroll-behavior-y:contain} } /* Özgüllük bilerek yükseltildi: yukarıdaki .file-menu.active .file-item kuralı üç sınıf taşıyor ve tek başına ".file-item:hover" onu yenemiyordu. */ .file-item:hover, .file-menu.active .file-item:hover, .file-menu.active .file-item:focus-visible{transform:translateX(10px);background:rgba(128,128,128,.1)} .file-item:hover .file-tag{opacity:.6;transform:none} .file-item:hover .file-arrow{transform:translate(4px,-4px)} .file-item.fade{opacity:0!important;transform:translateX(-40px)!important;pointer-events:none} .file-item.selected{background:rgba(128,128,128,.14)} .note{margin-top:26px;font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;opacity:.58} /* ═══ SAYFA ORTAK ═══ */ .page,.detail-page,.youtube-page{position:absolute;inset:0;z-index:6;padding:96px max(5vw,36px) calc(var(--bottom-nav-safe-height) + var(--player-safe-height));opacity:0;visibility:hidden;transform:translateY(24px);transition:all .6s var(--ease);overflow-y:auto;overflow-x:hidden} .page:not(.show),.detail-page:not(.show),.youtube-page:not(.show){content-visibility:hidden} body.has-music-player .page,body.has-music-player .detail-page,body.has-music-player .youtube-page{--player-safe-height:calc(var(--player-clear, 150px) + 30px)} .page.show,.detail-page.show,.youtube-page.show{opacity:1;visibility:visible;transform:none} .page-head{margin-bottom:14px} .page-title{font-family:var(--f-display);font-weight:800;font-size:clamp(38px,6.5vw,84px);letter-spacing:-.025em;line-height:1} .desc{max-width:820px;font-size:clamp(15px,1.6vw,19px);line-height:1.75;font-weight:300;margin:18px 0 8px;min-height:3.4em;opacity:.92} .desc.typing::after{content:'▌';animation:caret .8s steps(2) infinite} /* ═══ AĞ ÇİZGİLERİ ═══ */ .line-svg,.youtube-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0} .net-line,.work-line,.social-line,.youtube-line,.instagram-line,.hub-line,.youtube-gallery-line{fill:none;stroke:currentColor;stroke-width:1.2;opacity:.5;stroke-dasharray:6 5;transition:opacity .4s,stroke-width .4s} .net-line.draw,.work-line.draw,.social-line.draw,.youtube-line.draw,.instagram-line.draw,.hub-line.draw,.youtube-gallery-line.draw{animation:dash-draw 1.25s var(--ease) forwards} @keyframes dash-draw{to{stroke-dashoffset:0}} /* ═══ 01 HİZMET AĞI ═══ */ .network{position:relative;height:800px;margin-top:20px} .node{position:absolute;width:min(300px,30vw);min-width:218px;text-align:left;padding:18px 20px 16px;border:var(--hair);background:inherit;opacity:0;transform:translateY(16px) scale(.97);transition:all .55s var(--ease)} .node::before{content:'';position:absolute;top:-5px;left:-5px;width:9px;height:9px;border-top:var(--hair);border-left:var(--hair);opacity:.7} .node::after{content:'';position:absolute;bottom:-5px;right:-5px;width:9px;height:9px;border-bottom:var(--hair);border-right:var(--hair);opacity:.7} .node.active{opacity:1;transform:none} .node-index{font-family:var(--f-mono);font-size:11px;opacity:.5;display:block;margin-bottom:6px} .node-title{font-family:var(--f-display);font-weight:700;font-size:clamp(17px,1.9vw,22px);display:block;margin-bottom:7px;letter-spacing:-.01em} .node-desc{font-size:13px;line-height:1.55;font-weight:300;opacity:.78;display:block} .node-go{font-family:var(--f-mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;display:block;margin-top:10px;opacity:0;transform:translateX(-6px);transition:all .35s var(--ease)} .node:hover{background:rgba(128,128,128,.1)} .node:hover .node-go{opacity:.75;transform:none} .node-clip{position:absolute;top:14px;right:14px;display:flex;align-items:center;justify-content:center;width:24px;height:24px;opacity:.4;transition:opacity .3s,transform .3s} .node-clip:hover{opacity:1;transform:rotate(-8deg) scale(1.1)} .node:hover .node-clip{opacity:.7} /* ─ sağ boşluk: hizmet önizleme dock'u (eski hoş geldiniz alanı) ─ */ .service-preview-dock{position:fixed;top:50%;right:max(6vw,50px);transform:translate(24px,-50%);width:min(300px,26vw);min-width:230px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s;z-index:50} .service-preview-dock.show{opacity:1;visibility:visible;transform:translate(0,-50%)} .service-preview-card{border:var(--hair);background:var(--ink);color:var(--paper)} .stage.light .service-preview-card{background:var(--paper);color:var(--ink)} @media(max-width:1180px){.service-preview-dock{display:none}} /* dikey konumlar SVG çizgi uçlarıyla hizalı: %28.6 / %50 / %71.4 */ .node-a{left:2%;top:calc(28.6% - 85px)}.node-b{left:2%;top:calc(50% - 85px)}.node-c{left:2%;top:calc(71.4% - 85px)} .node-d{right:2%;top:calc(28.6% - 85px)}.node-e{right:2%;top:calc(50% - 85px)}.node-f{right:2%;top:calc(71.4% - 85px)} @media(max-width:860px){ .network{height:auto;min-height:0;display:grid;grid-template-columns:1fr;gap:12px;padding-top:6px} .network .line-svg{display:none} .node{position:static;width:100%;min-width:0} } /* ═══ 02 PROJELER HUB ═══ */ .hub-question{font-family:var(--f-mono);font-size:clamp(13px,1.5vw,16px);letter-spacing:.12em;opacity:.75;margin:6px 0 10px} .hub-network{position:relative;height:580px;margin-top:16px} .hub-card{position:absolute;width:min(340px,34vw);min-width:230px;text-align:left;padding:22px 24px;border:var(--hair);background:inherit;opacity:0;transform:translateY(18px);transition:all .55s var(--ease)} .hub-card.active-in{opacity:1;transform:none} .hub-index{font-family:var(--f-mono);font-size:12px;border:var(--hair);width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;margin-bottom:12px;opacity:.75} .hub-card h3{font-family:var(--f-display);font-weight:700;font-size:clamp(20px,2.4vw,28px);margin-bottom:8px;letter-spacing:-.01em} .hub-card p{font-size:13.5px;line-height:1.6;font-weight:300;opacity:.78} .hub-card .node-go{margin-top:12px} .hub-card:hover{background:rgba(128,128,128,.1)} .hub-card:hover .node-go{opacity:.8;transform:none} .hub-a{left:3%;top:calc(33% - 100px)}.hub-b{right:3%;top:calc(33% - 100px)}.hub-c{left:3%;top:calc(72% - 100px)}.hub-d{right:3%;top:calc(72% - 100px)} @media(max-width:860px){ .hub-network{height:auto;min-height:0;display:grid;gap:12px} .hub-network .line-svg{display:none} .hub-card{position:static;width:100%;min-width:0} } /* ═══ PORTFÖY GRID ═══ */ .portfolio-filters{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 24px} .portfolio-filter{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:8px 16px;border:var(--hair);background:transparent;color:inherit;cursor:pointer;transition:background .2s,color .2s;box-sizing:border-box} .portfolio-filter:not(.active):hover{background:rgba(128,128,128,.15)} .stage.dark .portfolio-filter.active{background:var(--paper);color:var(--ink)} .stage.light .portfolio-filter.active{background:var(--ink);color:var(--paper)} .portfolio-filter:focus-visible{outline:2px solid currentColor;outline-offset:2px} .portfolio-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px} /* display:grid, tarayıcının [hidden] kuralını ezer; kanal görünümüne geçerken ızgaranın gerçekten gizlenmesi için bu kural gerekli. */ .portfolio-grid[hidden]{display:none} .portfolio-card{position:relative;text-align:left;border:var(--hair);cursor:pointer;opacity:0;transform:translateY(18px);transition:opacity .5s var(--ease),transform .5s var(--ease),background .2s;display:flex;flex-direction:column} .portfolio-card.active-in{opacity:1;transform:none} .portfolio-cover{position:relative;height:180px;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;border-bottom:var(--hair)} .portfolio-cover-fallback{font-family:var(--f-display);font-weight:800;font-size:42px;opacity:.25} /* Kapak bir marka logosuysa kırpılmaz: kendi zemin renginde ortalanıp sığdırılır. */ .portfolio-cover.is-logo{background:var(--logo-bg,#fff);padding:10px 16px;overflow:hidden} /* Profil fotoğrafı kapakları kart alanını tamamen doldurur; boşluk kalmaz, taşma da olmaz. Yüzler genelde üst yarıda olduğu için odak yukarı alınır. */ .portfolio-cover.is-photo{padding:0;overflow:hidden} .portfolio-cover.is-photo .portfolio-logo{width:100%;height:100%;object-fit:cover;object-position:center 22%} .portfolio-logo{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block} /* Kendi zemini olan logolarda boşluk bırakılmaz: logo kenara dayanır, kalan yeri aynı renk levha doldurur. Kırpma yapılmaz — dikey logolar bozulmasın. */ .portfolio-cover.is-logo.plate-brand{padding:0} .portfolio-badge{position:absolute;top:10px;right:10px;font-family:var(--f-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;padding:4px 8px;border:var(--hair);background:inherit} .portfolio-body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1} .portfolio-body h3{font-family:var(--f-display);font-weight:700;font-size:19px;letter-spacing:-.01em;margin-bottom:6px} .portfolio-body p{font-size:13px;line-height:1.6;font-weight:300;opacity:.78;margin-bottom:10px} .portfolio-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:auto} .portfolio-tags span{font-family:var(--f-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;opacity:.65;border:var(--hair);padding:3px 8px} .portfolio-foot{display:flex;align-items:center;justify-content:space-between;margin-top:14px} .portfolio-year{font-family:var(--f-mono);font-size:11px;opacity:.5} .portfolio-card:hover{background:rgba(128,128,128,.1)} .portfolio-card:hover .node-go{opacity:.8;transform:none} @media(max-width:640px){ .portfolio-grid{grid-template-columns:1fr} } /* ═══ HİZMET SAYFASI: ANLATIM PANELİ ═══ Akış rayı + kapsam gezgini tek bir yüzeyde toplanır; altındaki "hazırlanan projeler" bölümü sayfa zemininde kalarak ayrışır. */ .service-explain{position:relative;margin:40px 0 0;padding:34px 32px 36px} .stage.dark .service-explain{background:rgba(244,241,234,.035)} .stage.light .service-explain{background:rgba(16,16,16,.035)} .explain-frame{position:absolute;inset:0;border:var(--hair);opacity:.35;pointer-events:none} .explain-frame::before,.explain-frame::after{content:'';position:absolute;width:12px;height:12px;border:var(--hair)} .explain-frame::before{top:-7px;left:-7px;border-right:none;border-bottom:none} .explain-frame::after{bottom:-7px;right:-7px;border-left:none;border-top:none} .explain-head{margin-bottom:30px} .explain-label{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.34em;text-transform:uppercase;opacity:.45;margin-bottom:10px} .explain-title{font-family:var(--f-display);font-weight:700;font-size:clamp(20px,2.8vw,28px);line-height:1.08;letter-spacing:-.01em} .explain-title.small{font-size:clamp(17px,2.2vw,22px)} /* Eşit sütunlar şeridi boydan boya doldurur; esnek yerleşimde kutular sola yığılıp sağda geniş bir boşluk bırakıyor, şerit yarım kalmış gibi duruyordu. */ .explain-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-top:20px;border:var(--hair)} .stage.dark .explain-meta{border-color:rgba(244,241,234,.3);background:rgba(244,241,234,.03)} .stage.light .explain-meta{border-color:rgba(16,16,16,.3);background:rgba(16,16,16,.03)} .explain-meta span{display:flex;flex-direction:column;justify-content:center;gap:5px;padding:14px 24px;font-family:var(--f-mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;opacity:.55;border-right:var(--hair)} .explain-meta span:last-child{border-right:none} .explain-meta i{font-family:var(--f-display);font-style:normal;font-weight:700;font-size:19px;letter-spacing:0;text-transform:none;opacity:1} /* ═══ İNTERAKTİF AKIŞ ŞEMASI ═══ Üç katman: sayfa zemini → anlatım yüzeyi → ray oluğu + bilgi paneli. Aktif adımdan panele inen bağlantı, iki parçayı tek sistem gibi bağlar. */ .service-flow{position:relative;margin:0} /* ray oluğu: anlatım yüzeyinin kenarlarına kadar taşar */ .flow-rail-wrap{overflow-x:auto;overflow-y:hidden;margin:0 -32px;padding:28px 32px 24px;border-top:var(--hair);border-bottom:var(--hair);scrollbar-width:none} .stage.dark .flow-rail-wrap{background:#0d0d0d;border-color:rgba(244,241,234,.22)} .stage.light .flow-rail-wrap{background:#e4e0d6;border-color:rgba(16,16,16,.22)} .flow-rail-wrap::-webkit-scrollbar{display:none} .flow-rail{position:relative;display:flex;gap:0;min-width:max-content} /* Adımlar rayı eşit paylaşır; bağlantı çizgisi tek bir uzun omurga değil, her adımın bir sonrakine uzattığı parçadır. Böylece hat son adımda biter — önceden omurga rayın sonuna kadar gidip "devamı var" izlenimi bırakıyordu. */ .flow-node{position:relative;flex:1 1 0;min-width:126px;padding:0 10px;background:transparent;border:none;color:inherit;cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:12px;align-items:flex-start} .flow-node::after{content:'';position:absolute;left:33px;top:23px;width:100%;height:1px; background:currentColor;opacity:.22;pointer-events:none;z-index:0;transition:opacity .35s var(--ease),height .35s var(--ease)} /* Son adım yalnızca kendi etiketi kadar yer kaplar: eşit paylaşımda arkasında geniş bir boşluk kalıyor, hat erken bitmiş gibi duruyordu. */ .flow-node:last-child{flex:0 0 auto;min-width:0;padding-right:0} .flow-node:last-child::after{display:none} /* tamamlanan adımların bağlantısı dolu görünür: ilerleme çubuğu artık hattın kendisi */ .flow-node.done::after{opacity:1;height:3px;top:22px} .flow-node i{position:relative;z-index:2;display:grid;place-items:center;width:46px;height:46px;border:1px solid;border-radius:50%;font-family:var(--f-mono);font-size:12px;font-style:normal;letter-spacing:.06em;transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease),border-color .3s,box-shadow .3s} /* Daireler omurga çizgisini keser; oluk zeminiyle birebir aynı dolgu gerekir. */ .stage.dark .flow-node i{background:#0d0d0d;border-color:rgba(244,241,234,.32)} .stage.light .flow-node i{background:#e4e0d6;border-color:rgba(16,16,16,.32)} .flow-node b{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;font-weight:400;opacity:.4;line-height:1.5;transition:opacity .3s} .flow-node:hover i{transform:scale(1.07)} .flow-node:hover b{opacity:.85} /* tamamlanan adımlar: numarası tam okunur kalmalı, dolgu sadece bir işaret */ .stage.dark .flow-node.done i{background:#0d0d0d;border-color:rgba(244,241,234,.75);color:var(--paper)} .stage.light .flow-node.done i{background:#e4e0d6;border-color:rgba(16,16,16,.75);color:var(--ink)} .flow-node.done i::after{content:'';position:absolute;inset:4px;border-radius:50%;border:1px solid;opacity:.3} .flow-node.done b{opacity:.7} /* aktif adım: tam ters kontrast + halka */ .stage.dark .flow-node.active i{background:var(--paper);color:var(--ink);border-color:var(--paper);box-shadow:0 0 0 5px rgba(244,241,234,.1)} .stage.light .flow-node.active i{background:var(--ink);color:var(--paper);border-color:var(--ink);box-shadow:0 0 0 5px rgba(16,16,16,.1)} .flow-node.active i{transform:scale(1.04)} .flow-node.active b{opacity:1;font-weight:700} .flow-node:focus-visible{outline:2px solid currentColor;outline-offset:3px} /* aktif adımdan panele inen bağlantı + adım numarası nişanı (z-index, nişanın panelin üst kenarının üstünde kalmasını garanti eder) */ .flow-link{position:relative;z-index:5;height:30px;pointer-events:none} .flow-link::before{content:'';position:absolute;left:var(--active-x,50%);top:0;bottom:9px;width:1px;background:currentColor;opacity:.55;transition:left .45s var(--ease)} .flow-link i{position:absolute;left:var(--active-x,50%);bottom:-1px;transform:translateX(-50%);display:grid;place-items:center;min-width:38px;height:20px;padding:0 8px;font-family:var(--f-mono);font-style:normal;font-size:9.5px;letter-spacing:.14em;transition:left .45s var(--ease)} .stage.dark .flow-link i{background:var(--paper);color:var(--ink)} .stage.light .flow-link i{background:var(--ink);color:var(--paper)} /* İki sütun: solda metin + gezinme, sağda teslim kutusu. Teslim kutusu sütunun tamamını kaplar (stretch), köşede küçük bir kutu gibi asılı kalmaz. */ .flow-panel{position:relative;border:1px solid;padding:30px 30px 26px;margin-top:0;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:26px 34px;align-items:stretch} .flow-panel-main{min-width:0;display:flex;flex-direction:column} .flow-panel-main .flow-nav{margin-top:auto} .stage.dark .flow-panel{background:var(--ink);border-color:rgba(244,241,234,.45);box-shadow:9px 9px 0 rgba(244,241,234,.05)} .stage.light .flow-panel{background:var(--paper);border-color:rgba(16,16,16,.45);box-shadow:9px 9px 0 rgba(16,16,16,.06)} .flow-panel-body{display:flex;flex-direction:column;gap:11px;min-width:0} .flow-step-count{font-family:var(--f-mono);font-size:10px;letter-spacing:.28em;opacity:.45} .flow-step-title{font-family:var(--f-display);font-weight:700;font-size:clamp(22px,3.2vw,30px);line-height:1.05;letter-spacing:-.01em} .flow-step-desc{font-size:14.5px;line-height:1.72;font-weight:300;opacity:.85} /* sağ kolon: bu adımda teslim edilenler */ /* Teslim listesi panelin en somut bilgisi — soluk bir yan sütun olarak kalmasın diye kendi zemini, çerçevesi ve onay işaretli maddeleriyle öne çıkarılır. */ /* Panelin iki satırını (metin + gezinme düğmeleri) boydan boya kaplar. Tek satıra oturduğunda sağ üst köşede küçük bir kutu gibi asılı kalıyordu. */ .flow-out{min-width:0;padding:22px 24px 24px;border:var(--hair)} .stage.dark .flow-out{background:rgba(244,241,234,.055)} .stage.light .flow-out{background:rgba(16,16,16,.045)} .flow-out-label{display:flex;align-items:center;gap:9px;font-family:var(--f-mono);font-size:10px; letter-spacing:.18em;text-transform:uppercase;opacity:.9;margin-bottom:16px;font-weight:500} .flow-out-label::before{content:'';flex:none;width:6px;height:6px;background:currentColor} .flow-out-tags{display:flex;flex-direction:column;gap:0} .flow-out-tags span{position:relative;font-size:13.5px;font-weight:400;padding:11px 0 11px 26px;border-bottom:var(--hair);opacity:1} .flow-out-tags span:last-child{border-bottom:none;padding-bottom:0} /* madde başına onay işareti — iki çizgiden oluşan tik */ .flow-out-tags span::before,.flow-out-tags span::after{content:'';position:absolute;background:currentColor} .flow-out-tags span::before{left:3px;top:19px;width:4px;height:1.5px;transform:rotate(45deg)} .flow-out-tags span::after{left:5px;top:17px;width:9px;height:1.5px;transform:rotate(-50deg)} .flow-panel.switching .flow-panel-body,.flow-panel.switching .flow-out-tags{opacity:0;transform:translateY(8px)} .flow-panel-body,.flow-out-tags{transition:opacity .28s var(--ease),transform .28s var(--ease)} .flow-nav{grid-column:1/-1;display:flex;gap:8px;padding-top:6px} .flow-arrow{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;padding:10px 16px;border:var(--hair);background:transparent;color:inherit;cursor:pointer;transition:background .2s,color .2s,opacity .2s} .flow-arrow:not([disabled]):hover{background:rgba(128,128,128,.16)} .flow-arrow[disabled]{opacity:.25;pointer-events:none} .flow-prev{min-width:52px;text-align:center} /* ═══ HİZMET SAYFASI: KAPSAM GEZGİNİ ═══ Akış şemasıyla aynı dil: sol tarafta seçiciler, sağda aynı çerçeveli panel. */ .scope-explorer{margin:46px 0 0;padding-top:34px;border-top:1px solid} .stage.dark .scope-explorer{border-color:rgba(244,241,234,.3)} .stage.light .scope-explorer{border-color:rgba(16,16,16,.3)} .scope-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:22px;margin-top:20px;align-items:start} .scope-chips{display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start} .scope-chip{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;padding:9px 14px;border:var(--hair);background:transparent;color:inherit;cursor:pointer;transition:background .2s,color .2s,opacity .2s;opacity:.7} .scope-chip:hover{opacity:1;background:rgba(128,128,128,.15)} .stage.dark .scope-chip.active{background:var(--paper);color:var(--ink);opacity:1} .stage.light .scope-chip.active{background:var(--ink);color:var(--paper);opacity:1} .scope-chip:focus-visible{outline:2px solid currentColor;outline-offset:2px} .scope-detail{border:1px solid;padding:24px;position:sticky;top:0} .stage.dark .scope-detail{background:var(--ink);border-color:rgba(244,241,234,.45);box-shadow:9px 9px 0 rgba(244,241,234,.05)} .stage.light .scope-detail{background:var(--paper);border-color:rgba(16,16,16,.45);box-shadow:9px 9px 0 rgba(16,16,16,.06)} .scope-detail-title{font-family:var(--f-display);font-weight:700;font-size:20px;line-height:1.1;margin-bottom:10px} .scope-detail-desc{font-size:13.5px;line-height:1.7;font-weight:300;opacity:.82} .scope-detail.switching .scope-detail-title,.scope-detail.switching .scope-detail-desc{opacity:0;transform:translateY(6px)} .scope-detail-title,.scope-detail-desc{transition:opacity .24s var(--ease),transform .24s var(--ease)} .service-detail-cta{margin-top:40px} @media(max-width:900px){ .flow-panel{grid-template-columns:1fr;gap:22px} .flow-out{padding:18px 18px 20px} } @media(max-width:820px){ .service-explain{padding:26px 20px 28px} .flow-rail-wrap{margin:0 -20px;padding:24px 20px 20px} .scope-layout{grid-template-columns:1fr} .scope-detail{position:static} .flow-node{min-width:112px} .flow-panel{padding:24px 20px 20px;box-shadow:6px 6px 0 rgba(128,128,128,.07)} .scope-detail{box-shadow:6px 6px 0 rgba(128,128,128,.07)} .explain-meta span{padding:11px 16px;flex:1 0 auto} } /* ═══ HİZMET SAYFASI: ÖRNEK İŞ ŞERİDİ ═══ Anlatım panelinden sonra tek sıra; tümü için portföye yönlendirir. */ .service-samples{margin-top:52px} .samples-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px} .samples-all{font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;padding:9px 15px;border:var(--hair);background:transparent;color:inherit;cursor:pointer;transition:background .2s,color .2s;white-space:nowrap} .stage.dark .samples-all:hover{background:var(--paper);color:var(--ink)} .stage.light .samples-all:hover{background:var(--ink);color:var(--paper)} /* grid-auto-flow:column → her zaman tek sıra; dar ekranda yatay kayar */ .samples-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(158px,1fr);gap:12px;overflow-x:auto;overflow-y:hidden;padding-bottom:6px;scrollbar-width:none} .samples-row::-webkit-scrollbar{display:none} .samples-row .media-card-meta{padding:10px 11px 12px} .samples-note{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;opacity:.4;padding:22px 0} /* "Daha fazla göster" basıldığında şerit ızgaraya açılır: yatay kaydırma biter, içerik satır satır aşağı büyür. Altındaki müşteri projeleri yerinde kalır. */ .service-samples.is-expanded .samples-row{grid-auto-flow:row;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));overflow:visible} .samples-more{display:block;width:100%;margin-top:16px;padding:12px 16px;border:var(--hair);background:transparent;color:inherit;cursor:pointer; font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;transition:background .2s,color .2s} .stage.dark .samples-more:hover{background:var(--paper);color:var(--ink)} .stage.light .samples-more:hover{background:var(--ink);color:var(--paper)} @media(max-width:640px){ .samples-row{grid-auto-columns:minmax(132px,1fr)} .service-samples.is-expanded .samples-row{grid-template-columns:repeat(auto-fill,minmax(126px,1fr))} } /* ═══ HİZMET SAYFASI: BAĞLI PORTFÖY PROJELERİ ═══ Anlatım panelinden sonra gelir; zeminde durarak ondan ayrışır. */ /* İki alt bölüm tek blok olarak okunur: aralarında bölüm boşluğu değil, satır arası. */ .service-portfolio{margin-top:30px} /* alt başlık — bölüm başlığından bir kademe küçük, soldan hizalı */ .works-subhead{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-family:var(--f-mono); font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;opacity:.5} .works-subhead::after{content:'';flex:1;height:1px;background:currentColor;opacity:.22} .service-samples .works-subhead{margin-top:2px} .service-portfolio .work-title::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:44px;height:2px;background:currentColor;opacity:.55} .service-portfolio-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-top:18px} .service-portfolio-card{text-align:left;padding:16px 18px;border:var(--hair);background:transparent;color:inherit;cursor:pointer;transition:background .2s} /* Marka logosu levhası — logo kırpılmadan ortalanır, levha logonun kendi zemin rengini alır. Kendi zemini olan logolarda (Karamolla, Susspor) renk birebir aynı olduğu için logo kenardan kenara doluymuş gibi görünür. Nötr levhalar temaya göre değişir: açık temada beyaz, koyu temada sayfanın kağıt tonu — böylece koyu zeminde göz almaz. */ .card-logo{display:flex;align-items:center;justify-content:center;height:110px;margin:-4px -4px 12px; padding:8px 10px;background:var(--logo-bg,#fff);border:var(--hair);border-radius:2px;overflow:hidden} .card-logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block} /* Kendi zemini olan logolarda boşluk bırakılmaz; levhayla birleşir. */ .card-logo.plate-brand{padding:0} /* Profil fotoğrafı: levhayı tamamen doldurur. */ .card-logo.plate-photo{padding:0;background:transparent} .card-logo.plate-photo img{width:100%;height:100%;object-fit:cover;object-position:center 22%} /* Nötr levha, sitenin aydınlık tema zeminiyle (kağıt tonu) aynı: açık temada logo doğrudan sayfanın üstünde duruyormuş gibi görünür, koyu temada ise kartın içinden kabaran bir levha etkisi verir. İki temada da aynı renktir. */ .plate-light{--logo-bg:var(--paper)} .plate-dark{--logo-bg:#141414} .service-portfolio-card h4{font-family:var(--f-display);font-weight:700;font-size:15px;margin-bottom:6px} .service-portfolio-card p{font-size:12.5px;line-height:1.55;font-weight:300;opacity:.75;margin-bottom:8px} /* sonuç göstergeleri — kampanya kayıtlarında rakamlar öne çıkar */ .project-metrics{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 10px} .project-metrics span{display:flex;flex-direction:column;gap:1px;border:var(--hair);padding:6px 9px; font-family:var(--f-mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.7} .project-metrics b{font-family:var(--f-body);font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;opacity:1} .service-portfolio-card:hover{background:rgba(128,128,128,.1)} .service-portfolio-card:hover .node-go{opacity:.8;transform:none} /* ═══ PORTFÖY PROJE DETAYI ═══ */ .project-detail-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:8px 0 24px} .project-detail-meta .portfolio-tags{margin:0} .project-detail-gallery-wrap,.project-detail-similar-wrap{margin-top:32px} .project-detail-similar{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px} /* ═══ ORTAK MEDYA GALERİSİ (proje detayı + portföy hizmet filtresi) ═══ */ .media-block{margin-top:34px} .media-filters{display:flex;flex-direction:column;gap:8px;margin:14px 0 20px} .media-filter-row{display:flex;flex-wrap:wrap;gap:8px} .media-filter-row.is-sub{padding-left:2px} .media-filter{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:8px 14px;border:var(--hair);background:transparent;color:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:background .2s,color .2s,opacity .2s} .media-filter i{font-style:normal;font-size:9.5px;letter-spacing:.06em;opacity:.5} .media-filter:not(.active):hover{background:rgba(128,128,128,.15)} .media-filter-row.is-sub .media-filter{padding:6px 12px;font-size:10px;opacity:.85} .stage.dark .media-filter.active{background:var(--paper);color:var(--ink)} .stage.light .media-filter.active{background:var(--ink);color:var(--paper)} .media-filter.active i{opacity:.6} .media-filter:focus-visible{outline:2px solid currentColor;outline-offset:2px} /* YouTube kanal galerisi tür filtresi — medya filtreleriyle aynı görsel dil. */ .youtube-kind-filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px} .youtube-kind-filter button{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase; padding:8px 14px;border:var(--hair);background:transparent;color:inherit;cursor:pointer; display:inline-flex;align-items:center;gap:8px;transition:background .2s,color .2s} .youtube-kind-filter button i{font-style:normal;font-size:9.5px;letter-spacing:.06em;opacity:.5} .youtube-kind-filter button:not(.active):hover{background:rgba(128,128,128,.15)} .stage.dark .youtube-kind-filter button.active{background:var(--paper);color:var(--ink)} .stage.light .youtube-kind-filter button.active{background:var(--ink);color:var(--paper)} .youtube-kind-filter button:focus-visible{outline:2px solid currentColor;outline-offset:2px} .media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px} .media-loading{grid-column:1/-1;font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;opacity:.45;padding:26px 0} .media-card{position:relative;display:flex;flex-direction:column;border:var(--hair);overflow:hidden;text-decoration:none;color:inherit;opacity:0;transform:translateY(14px);transition:opacity .45s var(--ease),transform .45s var(--ease),background .2s} .media-card.active-in{opacity:1;transform:none} /* Durağan görsel kartları