@charset "UTF-8"; /* ================= DESIGN TOKENS ================= */ :root{ --bg:#020202; --bg-soft:#070708; --surface:#0b0b0d; --surface-2:#111114; --line:rgba(255,255,255,.09); --line-soft:rgba(255,255,255,.05); --fg:#ffffff; --fg-2:#a1a1aa; --fg-3:#71717a; --accent:#22c55e; --accent-2:#4ade80; --accent-fg:#020202; --accent-dim:rgba(34,197,94,.10); --radius:14px; --radius-lg:22px; --maxw:1200px; --nav-h:96px; /* pill yüksekliği + üst boşluk */ --ff-display:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --ff-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --ff-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace; --ease:cubic-bezier(.22,1,.36,1); } @media(max-width:1099px){ :root{ --nav-h:80px } } /* ================= RESET ================= */ *,*::before,*::after{box-sizing:border-box} *{margin:0;padding:0} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 24px)} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} } body{ font-family:var(--ff-sans);background:var(--bg);color:var(--fg); font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased; font-feature-settings:"kern","liga","cv11"; transition:background-color .4s var(--ease),color .4s var(--ease); /* "clip" yerine "hidden" kullanma: hidden, üzerinde bir scroll container oluşturur ve aşağıdaki position:sticky kart yığınını bozar. */ overflow-x:clip; } img,svg{display:block;max-width:100%} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px} ::selection{background:var(--accent);color:var(--accent-fg)} /* ================= LAYOUT ================= */ .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:24px} @media(max-width:640px){.wrap{padding-inline:20px}} .section{padding-block:clamp(34px,4.6vw,60px);border-top:1px solid var(--line-soft)} /* about kısa bir bölüm: üstündeki ve altındaki boşluk daha dar */ #about{padding-block:clamp(22px,2.8vw,38px)} #about .sec-head{margin-bottom:clamp(14px,1.8vw,22px)} #work{padding-block-start:clamp(12px,1.8vw,22px)} #experience{padding-block-end:clamp(20px,2.6vw,34px)} .skip{position:absolute;left:-9999px;top:12px;z-index:999;background:var(--accent);color:var(--accent-fg);padding:12px 20px;border-radius:8px;font-weight:600} .skip:focus{left:24px} /* ================= TYPE ================= */ .display{font-family:var(--ff-display);font-weight:800;letter-spacing:-.04em;line-height:1.02} h1.display{font-size:clamp(2.6rem,7.2vw,5.1rem)} h2.display{font-size:clamp(2rem,4.6vw,3.2rem)} .lede{font-size:clamp(1.05rem,1.9vw,1.28rem);color:var(--fg-2);line-height:1.62;max-width:62ch} .muted{color:var(--fg-2)} .mono{font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)} .sec-head{display:flex;align-items:baseline;gap:16px;margin-bottom:clamp(20px,2.6vw,32px);flex-wrap:wrap} .sec-num{font-family:var(--ff-mono);font-size:.72rem;color:var(--accent);letter-spacing:.16em;padding-top:.5em} .sec-title-block{flex:1;min-width:260px} .sec-sub{color:var(--fg-3);font-size:.95rem;margin-top:8px} /* ================= HEADER ================= */ /* Üstteki iki katman: içerik nav'ın altından geçerken yumuşak bir kaybolma sağlar */ .nav-blur{ position:fixed;top:0;left:0;right:0;height:70px;z-index:54;pointer-events:none; backdrop-filter:blur(5px) saturate(130%);-webkit-backdrop-filter:blur(5px) saturate(130%); mask-image:linear-gradient(to bottom,#000 0%,#000 30%,transparent 100%); -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 30%,transparent 100%); } .nav-backdrop{ position:fixed;top:0;left:0;right:0;height:120px;z-index:55;pointer-events:none; background:linear-gradient(to bottom,rgba(2,2,2,.85) 0%,rgba(2,2,2,.6) 50%,rgba(2,2,2,0) 100%); } .nav{ position:fixed;top:0;left:50%;transform:translateX(-50%);z-index:60; margin-top:24px;width:92%;max-width:var(--maxw); display:flex;flex-direction:column;align-items:center; } @media(max-width:1099px){.nav{margin-top:16px}} /* 1px'lik kenarlığın etrafında dönen ışık huzmesi */ .beam{position:relative;border-radius:999px;padding:1px;background:rgba(255,255,255,.08);width:100%} .beam-flare{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none} .beam-flare::after{ content:"";position:absolute;width:160px;height:40px; background:linear-gradient(to right,transparent,rgba(34,197,94,.8),transparent); filter:blur(8px);offset-path:border-box;offset-rotate:auto; animation:beam 12s linear infinite; } @keyframes beam{to{offset-distance:100%}} /* offset-path desteklenmiyorsa (Safari <16) huzme gizlenir, kenarlık kalır */ @supports not (offset-path:border-box){.beam-flare{display:none}} .beam-mask{background:var(--bg);border-radius:inherit;position:relative;z-index:2} .glass{ position:relative;z-index:10;width:100%;border-radius:999px;overflow:visible; display:flex;align-items:center;justify-content:space-between; padding:12px 24px; background:linear-gradient(135deg,rgba(255,255,255,.09),rgba(255,255,255,.02)); backdrop-filter:blur(120px) saturate(280%) brightness(1.15); -webkit-backdrop-filter:blur(120px) saturate(280%) brightness(1.15); border:1px solid rgba(255,255,255,.08); box-shadow:inset 0 1px 1px rgba(255,255,255,.14),inset 0 -1px 24px rgba(0,0,0,.25),0 12px 48px rgba(0,0,0,.65); } @media(min-width:1100px){.glass{padding:16px 32px}} .glass-ring{position:absolute;inset:0;border:1px solid rgba(255,255,255,.1);border-radius:999px;pointer-events:none;opacity:.4} /* arkadaki dev filigran */ .watermark{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden;pointer-events:none;user-select:none;z-index:0} .watermark span{ font-family:var(--ff-display);font-weight:800;text-transform:uppercase; font-size:12vw;letter-spacing:-.05em;white-space:nowrap;width:100%;text-align:center;opacity:.04; background:linear-gradient(180deg,#fff 0%,#a1a1aa 100%); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent; } @media(min-width:768px){.watermark span{font-size:10vw}} @media(min-width:1024px){.watermark span{font-size:8vw}} .nav-side{flex:0 1 auto;display:flex;align-items:center;min-width:0} .nav-side.right{justify-content:flex-end} .nav-group{display:none;align-items:center;gap:clamp(18px,2.4vw,40px)} .nav-group.right{gap:clamp(14px,2vw,30px)} @media(min-width:1100px){.nav-group{display:flex}} .nav-link{ font-family:var(--ff-display);font-size:clamp(11px,0.92vw,13px);font-weight:700; text-transform:uppercase;letter-spacing:.12em;color:var(--fg-2); transition:color .2s;white-space:nowrap;cursor:pointer; } .nav-link:hover,.nav-link[aria-expanded="true"]{color:var(--accent-2)} .nav-link.active{color:var(--accent-2)} .nav-link.has-menu{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:0;font:inherit;letter-spacing:.12em} .nav-link.has-menu svg{width:10px;height:10px;transition:transform .3s var(--ease);opacity:.7} .nav-link.has-menu[aria-expanded="true"] svg{transform:rotate(180deg)} /* ortadaki logo: alan adı */ .nav-logo{ display:flex;align-items:center;justify-content:center; position:relative;z-index:10;padding:8px clamp(12px,1.4vw,22px);white-space:nowrap; } .nav-logo .wordmark{ display:inline-flex;align-items:baseline; font-family:var(--ff-mono);font-size:15px;font-weight:600; letter-spacing:.02em;line-height:1;color:var(--fg); transition:color .25s var(--ease),text-shadow .25s var(--ease); } @media(min-width:1100px){.nav-logo .wordmark{font-size:18px}} .nav-logo .wordmark .tld{color:var(--accent);transition:color .25s var(--ease)} .nav-logo:hover .wordmark{text-shadow:0 0 18px rgba(255,255,255,.28)} .nav-logo:hover .wordmark .tld{color:var(--accent-2)} /* alan adının altında ince, hover'da açılan bir vurgu */ .nav-logo::after{ content:"";position:absolute;left:50%;bottom:2px;transform:translateX(-50%); width:0;height:1px;border-radius:99px; background:linear-gradient(90deg,transparent,var(--accent-2),transparent); box-shadow:0 0 10px rgba(34,197,94,.6); transition:width .35s var(--ease); } .nav-logo:hover::after{width:100%} @media (prefers-reduced-motion:reduce){ .nav-logo::after,.nav-logo .wordmark{transition:none} } /* NEW rozeti */ .badge-new{ position:relative;overflow:hidden;vertical-align:middle;display:inline-flex;align-items:center; margin-left:5px;padding:1px 7px;border-radius:999px;font-size:9px;font-weight:700;letter-spacing:.04em; background:linear-gradient(135deg,rgba(99,102,241,.15),rgba(236,72,153,.15)); border:1px solid rgba(139,92,246,.3);background-clip:padding-box; } .badge-new i{ font-style:normal; background:linear-gradient(135deg,#a78bfa,#f472b6,#38bdf8); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent; } .badge-new::after{ content:"";position:absolute;top:0;left:-100%;width:60%;height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent); animation:shimmer 2.5s ease-in-out infinite; } @keyframes shimmer{0%{left:-100%}50%,100%{left:150%}} /* CTA + dil düğmesi */ .nav-cta{ display:inline-flex;align-items:center;gap:8px;white-space:nowrap;cursor:pointer; background:linear-gradient(to bottom,var(--accent-2),#16a34a);color:#000; font-family:var(--ff-display);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.08em; padding:9px 16px;border-radius:999px;transition:all .25s var(--ease); box-shadow:0 4px 16px -2px rgba(34,197,94,.5); } .nav-cta:hover{background:linear-gradient(to bottom,#86efac,#22c55e);transform:translateY(-1px)} .nav-cta svg{width:14px;height:14px;flex:none} /* ---- dil seçici (bar + mobil menü + sağ alt) ---- */ .lang-switch{position:relative;display:inline-flex} .lang-toggle{ display:inline-flex;align-items:center;gap:6px;cursor:pointer; font-family:var(--ff-mono);font-size:11px;font-weight:600;letter-spacing:.1em;color:var(--fg-2); border:1px solid var(--line);border-radius:999px;padding:6px 11px;transition:all .2s; } .lang-toggle:hover{color:var(--fg);border-color:var(--fg-3)} .lang-toggle svg{width:12px;height:12px;flex:none;opacity:.75} .lang-toggle .lang-caret{width:9px;height:9px;transition:transform .3s var(--ease)} .lang-toggle[aria-expanded="true"] .lang-caret{transform:rotate(180deg)} /* orta genişliklerde yer açmak için glob simgesini gizle */ @media(max-width:1199px){.lang-toggle .lang-globe{display:none}} .lang-menu{ position:absolute;top:calc(100% + 10px);right:0;z-index:9999; min-width:176px;padding:6px;border-radius:16px; background:rgba(10,10,12,.94);border:1px solid var(--line); box-shadow:0 24px 50px -18px rgba(0,0,0,.95); backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); display:flex;flex-direction:column;gap:2px; } .lang-menu[hidden]{display:none} .lang-menu button{ display:flex;align-items:center;justify-content:space-between;gap:18px;width:100%; padding:9px 12px;border-radius:10px;text-align:left; font-family:var(--ff-display);font-size:12px;font-weight:600;letter-spacing:.03em;color:var(--fg-2); transition:background .18s var(--ease),color .18s var(--ease); } .lang-menu button:hover{background:rgba(255,255,255,.06);color:var(--fg)} .lang-menu button[aria-checked="true"]{color:var(--accent-2)} .lang-menu button em{font-family:var(--ff-mono);font-style:normal;font-size:10px;letter-spacing:.1em;opacity:.65} /* mobil menü içindeki dil satırı */ .lang-row{display:flex;gap:8px;justify-content:center;margin:4px 0} .lang-row button{ font-family:var(--ff-mono);font-size:11px;font-weight:600;letter-spacing:.08em; color:var(--fg-2);border:1px solid var(--line);border-radius:999px;padding:8px 15px; transition:all .2s var(--ease); } .lang-row button[aria-checked="true"]{color:var(--accent-fg);background:var(--accent);border-color:var(--accent)} /* sağ altta sabit duran dil seçici */ .lang-fab-wrap{position:fixed;right:18px;bottom:18px;z-index:60} .lang-fab{ display:inline-flex;align-items:center;gap:8px;cursor:pointer; padding:9px 15px;border-radius:999px; font-family:var(--ff-display);font-size:.7rem;font-weight:700; letter-spacing:.1em;text-transform:uppercase;color:var(--fg-2); background:rgba(12,12,14,.78);border:1px solid var(--line); box-shadow:0 12px 30px -12px rgba(0,0,0,.9); backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); transition:color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease); } .lang-fab:hover{color:var(--fg);border-color:var(--fg-3);transform:translateY(-2px)} .lang-fab svg{width:13px;height:13px;flex:none;opacity:.8} .lang-fab .lang-caret{width:9px;height:9px;transition:transform .3s var(--ease)} .lang-fab[aria-expanded="true"] .lang-caret{transform:rotate(180deg)} .lang-menu-up{top:auto;bottom:calc(100% + 10px)} @media(max-width:520px){ .lang-fab-wrap{right:12px;bottom:12px} .lang-fab{font-size:.62rem;padding:8px 13px;letter-spacing:.08em} } @media(prefers-reduced-motion:reduce){.lang-fab{transition:none}} .hamburger{display:flex;align-items:center;padding:8px;color:var(--fg-2);transition:color .2s} .hamburger:hover{color:#fff} @media(min-width:1100px){.hamburger{display:none}} /* ================= MEGA MENU ================= */ /* body'ye taşındı: nav'ın transform'u onu kırpardı */ #mega-menu{ position:fixed;top:calc(var(--nav-h) + 20px);left:50%; transform:translateX(-50%) translateY(15px); width:95vw;max-width:1200px;border-radius:40px;padding:20px 24px;z-index:9999; opacity:0;visibility:hidden;pointer-events:none; transition:opacity .4s var(--ease),transform .4s var(--ease),visibility .4s; background:linear-gradient(160deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,.01) 35%,transparent 100%),rgba(4,4,4,.72); backdrop-filter:blur(40px) saturate(140%) brightness(.95); -webkit-backdrop-filter:blur(40px) saturate(140%) brightness(.95); border-top:1px solid rgba(255,255,255,.1); border-left:1px solid rgba(255,255,255,.07); border-right:1px solid rgba(255,255,255,.05); border-bottom:1px solid rgba(255,255,255,.05); box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 -1px 30px rgba(0,0,0,.3),0 0 0 1px rgba(0,0,0,.4),0 40px 80px -15px rgba(0,0,0,.9); } #mega-menu.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)} /* ince film grenli doku */ #mega-menu::before{ content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;opacity:.03; 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.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:160px 160px; } .mega-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:4px} @media(max-width:1000px){.mega-grid{grid-template-columns:repeat(2,1fr)}} .mega-item{display:flex;gap:12px;padding:10px 12px;border-radius:16px;border:1px solid transparent;transition:background .2s,border-color .2s} .mega-item:hover{background:rgba(255,255,255,.04);border-color:rgba(16,185,129,.12)} .mega-ico{width:32px;height:32px;border-radius:10px;flex:none;display:grid;place-items:center;background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.2);color:#34d399} .mega-ico svg{width:16px;height:16px} .mega-item h4{font-family:var(--ff-display);font-size:11px;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:.08em;margin-bottom:3px} .mega-item p{font-size:11px;line-height:1.6;color:rgba(255,255,255,.6)} /* ================= MOBILE MENU ================= */ #mobile-menu{ position:absolute;top:100%;left:0;right:0;margin-top:16px;padding:24px; border-radius:24px;display:flex;flex-direction:column;gap:14px;text-align:center; background:linear-gradient(160deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,.01) 35%,transparent 100%),rgba(4,4,4,.92); backdrop-filter:blur(40px) saturate(140%) brightness(.95); -webkit-backdrop-filter:blur(40px) saturate(140%) brightness(.95); border:1px solid rgba(255,255,255,.1); box-shadow:0 0 0 1px rgba(0,0,0,.4),0 40px 80px -15px rgba(0,0,0,.9); } /* id seçicisi UA'nın [hidden]{display:none} kuralını ezerdi — geri alıyoruz */ #mobile-menu[hidden]{display:none} @media(min-width:1100px){#mobile-menu{display:none!important}} #mobile-menu a{padding:8px 0;font-family:var(--ff-display);font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:#d1d5db;transition:color .2s} #mobile-menu a:hover{color:var(--accent-2)} #mobile-menu .nav-cta{justify-content:center;margin:6px auto 0;font-size:13px;padding:11px 22px} .mm-close{ position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:50%; background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1); display:grid;place-items:center;color:var(--fg-2); } /* ================= HERO ================= */ .hero{ position:relative;overflow:hidden; /* svh: mobil tarayıcı çubuğu açılıp kapanınca hero zıplamaz */ min-height:92svh;min-height:92vh; display:flex;flex-direction:column;align-items:center;justify-content:center; padding:calc(var(--nav-h) + 16px) 20px clamp(60px,9vh,104px); /* grid hücre boyu: hem çizgiler hem üzerinden geçen ışıklar bunu kullanır */ --grid:clamp(46px,6.5vw,86px); --grid-mask:radial-gradient(115% 88% at 50% 42%,#000 22%,rgba(0,0,0,.35) 58%,transparent 82%); } /* arka plan: üstten hafif yeşil ışık + merkezde yumuşak aydınlanma. Grid ::after'da, maskelenmesi gerektiği için (bkz. aşağı). */ .hero{ background-color:var(--bg); background-image: radial-gradient(120% 75% at 50% -8%,rgba(34,197,94,.09),transparent 62%), radial-gradient(75% 45% at 50% 45%,rgba(255,255,255,.035),transparent 72%); } .hero::before{ content:"";position:absolute;inset:auto -10% -30% -10%;height:70%;pointer-events:none; z-index:1; background:radial-gradient(50% 60% at 50% 100%,var(--accent-dim),transparent 70%); } /* teknik grid: kenarlara doğru maskeyle eriyor, içerik onun üstünde kalıyor */ .hero::after{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background-image: linear-gradient(to right,rgba(255,255,255,.055) 1px,transparent 1px), linear-gradient(to bottom,rgba(255,255,255,.055) 1px,transparent 1px); background-size:var(--grid) var(--grid); background-position:center; -webkit-mask-image:var(--grid-mask); mask-image:var(--grid-mask); } /* ---- grid çizgilerinin üzerinden geçen ışık izleri ---- */ .hero-beams{ position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden; -webkit-mask-image:var(--grid-mask); mask-image:var(--grid-mask); } .hero-beams i{ position:absolute;display:block;border-radius:99px; opacity:0;will-change:transform,opacity; } /* dikey iz — çizgi konumu: merkez − yarım hücre + n hücre */ .hero-beams i.v{ top:0;width:1.5px;height:min(26vh,240px); left:calc(50% + var(--n) * var(--grid) - var(--grid) / 2); background:linear-gradient(to bottom,transparent,rgba(74,222,128,.35) 45%,#4ade80 88%,rgba(220,255,235,.95) 100%); box-shadow:0 0 12px rgba(34,197,94,.6); animation:beamDown var(--dur,9s) linear var(--delay,0s) infinite; } /* yatay iz */ .hero-beams i.h{ left:0;height:1.5px;width:min(30vw,340px); top:calc(50% + var(--n) * var(--grid) - var(--grid) / 2); background:linear-gradient(to right,transparent,rgba(74,222,128,.3) 45%,#4ade80 88%,rgba(220,255,235,.95) 100%); box-shadow:0 0 12px rgba(34,197,94,.5); animation:beamRight var(--dur,11s) linear var(--delay,0s) infinite; } @keyframes beamDown{ 0% {transform:translateY(-260px);opacity:0} 6% {opacity:1} 80% {opacity:1} 100% {transform:translateY(100vh);opacity:0} } @keyframes beamRight{ 0% {transform:translateX(-360px);opacity:0} 6% {opacity:1} 80% {opacity:1} 100% {transform:translateX(100vw);opacity:0} } /* dar ekranda daha az iz — kalabalık yapmasın */ @media(max-width:640px){.hero-beams i:nth-child(n+4){display:none}} @media (prefers-reduced-motion:reduce){.hero-beams{display:none}} /* fare hareketiyle boyanan fırça izi — içeriğin altında, tıklamayı engellemez */ #hero-brush{ position:absolute;inset:0;width:100%;height:100%;z-index:0; pointer-events:none;opacity:.9;mix-blend-mode:screen; -webkit-mask-image:radial-gradient(125% 105% at 50% 45%,#000 52%,transparent 100%); mask-image:radial-gradient(125% 105% at 50% 45%,#000 52%,transparent 100%); } .hero-name,.hero-tagline,.scroll-cue{z-index:2} /* grid statik olduğu için kalabilir; sadece hareketli fırça izi kapanıyor */ @media (prefers-reduced-motion:reduce){#hero-brush{display:none}} /* dev isim bloğu */ .hero-name{position:relative;text-align:center;width:100%} .name-line{ display:block; font-family:"Fira Code",var(--ff-mono);font-weight:700;color:var(--accent); /* 30vw: isim belirgin ama hero'yu doldurmuyor */ font-size:clamp(3.8rem,30vw,11rem); /* .75 iki satırı birbirine yapıştırıyordu; hafif nefes payı */ line-height:.86;letter-spacing:-.055em;text-transform:uppercase;white-space:nowrap; } /* harf harf blur girişi */ .blur-seg{display:inline-block;opacity:0;filter:blur(10px);transform:translateY(-20px)} .blur-seg.in{opacity:1;filter:blur(0);transform:none;transition:opacity .5s ease-out,filter .5s ease-out,transform .5s ease-out;transition-delay:var(--d,0ms)} @media (prefers-reduced-motion:reduce){ .blur-seg{opacity:1;filter:none;transform:none} } /* slogan + kaydırma oku */ .hero-tagline{ position:absolute;left:50%;transform:translateX(-50%); bottom:clamp(64px,11vh,144px); /* flex değil blok: uzun cümle normal paragraf gibi sarılsın, kelime kelime alt alta dizilmesin. Ölçü sınırı okunurluğu korur. */ width:min(100%,66ch);padding-inline:24px; display:block;text-align:center;text-wrap:balance; /* Antic kaldırıldı: Google Fonts'taki sürümü yalnızca "latin" alt kümesini içeriyor, ı/ğ/ş/İ glifleri yok → Türkçede harfler boş çıkıyordu. Inter tam latin-ext desteklediği için Türkçe sorunsuz. */ font-family:var(--ff-sans);font-weight:300; font-size:clamp(.8rem,1.05vw,.98rem);line-height:1.6;letter-spacing:.005em; color:var(--fg-3);transition:color .3s; } .hero-tagline:hover{color:#fff} .scroll-cue{ position:absolute;left:50%;transform:translateX(-50%);bottom:24px; color:var(--fg-3);transition:color .3s;animation:bob 2.4s var(--ease) infinite; } .scroll-cue:hover{color:#fff} .scroll-cue svg{width:22px;height:22px} @media(min-width:768px){.scroll-cue{bottom:40px}.scroll-cue svg{width:32px;height:32px}} @keyframes bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(6px)}} /* Mobilde hero tüm ekranı kaplayınca üstte ve altta kocaman boşluk kalıyordu: yüksekliği ve dikey payları kısaltıp içeriği sıkılaştırıyoruz. */ @media(max-width:640px){ .hero{ min-height:74svh;min-height:74vh; padding:calc(var(--nav-h) + 26px) 16px 62px; } /* slogan mobilde alta çakılı kalmasın: isimle aynı blokta aksın, böylece ne ortada kocaman boşluk kalır ne de satırlar üst üste biner */ .hero-tagline{ position:static;transform:none;bottom:auto;left:auto; margin-top:26px;padding-inline:10px; } .scroll-cue{bottom:14px} .scroll-cue svg{width:20px;height:20px} } .cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px} .btn{ display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 24px; border-radius:99px;font-size:.94rem;font-weight:600;letter-spacing:-.01em; transition:all .25s var(--ease);border:1px solid transparent; } .btn-primary{background:var(--accent);color:var(--accent-fg)} .btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 28px -10px var(--accent)} .btn-ghost{border-color:var(--line);color:var(--fg)} .btn-ghost:hover{border-color:var(--fg-3);background:var(--surface)} .btn svg{width:15px;height:15px;transition:transform .25s var(--ease)} .btn:hover svg{transform:translateX(3px)} /* ================= ABOUT — Magic Text ================= */ .magic{ /* max-width yok: metin kabın tam genişliğini kullanır, sağda boşluk kalmaz */ font-family:var(--ff-display);font-weight:600;letter-spacing:-.03em; font-size:clamp(1.3rem,3vw,2.35rem);line-height:1.4; text-wrap:pretty; /* son satırda tek kelime kalmasını engeller */ } .magic p + p{margin-top:.9em} /* Kelimeler JS ile bu span'lere bölünür; opaklık her karede kaydırma ilerlemesinden gelir. */ .magic-word{display:inline-block;opacity:.14;will-change:opacity;color:#fff} @media (prefers-reduced-motion:reduce){.magic-word{opacity:1!important}} .facts-row{ margin-top:clamp(28px,4vw,52px); display:grid;grid-template-columns:repeat(5,1fr);gap:1px; background:var(--line-soft);border:1px solid var(--line-soft); border-radius:var(--radius);overflow:hidden; } .facts-row .fact{ display:flex;flex-direction:column;gap:6px; background:var(--bg);padding:18px 20px;font-size:.88rem; } .facts-row .fact dt{color:var(--fg-3);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-family:var(--ff-mono)} .facts-row .fact dd{color:var(--fg);font-weight:500} @media(max-width:1000px){.facts-row{grid-template-columns:repeat(2,1fr)}} @media(max-width:520px){.facts-row{grid-template-columns:1fr}} /* ================= WORK ================= */ /* --- 3D sticky stack --- */ .cases{ display:grid; gap:clamp(26px,5vh,54px); --stack-top:calc(var(--nav-h) + 24px); /* fixed nav yüksekliği + nefes payı */ --stack-step:14px; /* her kartın üstte bıraktığı şerit */ } /* son kart tepede bir an dursun diye kuyruk boşluğu */ .cases::after{content:"";display:block;height:clamp(80px,26vh,240px)} .case{ display:grid;grid-template-columns:auto 1fr auto;gap:clamp(20px,3.5vw,44px);align-items:start; padding:clamp(26px,3.5vw,40px);border:1px solid var(--line);border-radius:var(--radius-lg); background:var(--surface);position:relative; /* transition'a transform DAHİL DEĞİL — o her karede JS ile sürülüyor */ transition:border-color .35s var(--ease),box-shadow .35s var(--ease); position:sticky; top:calc(var(--stack-top) + var(--i,0) * var(--stack-step)); transform-origin:50% 0%; backface-visibility:hidden; will-change:transform; /* --p: 0 = önde, 1 = tamamen bir sonraki kartın altında (JS yazar) */ transform: perspective(1400px) translate3d(0, calc(var(--p,0) * -12px), 0) rotateX(calc(var(--p,0) * 3.6deg)) scale(calc(1 - var(--p,0) * .075)); } /* arkaya düşen kartı karartan katman (filter yerine — her iki temada da çalışır) */ .case::after{ content:"";position:absolute;inset:0;border-radius:inherit;z-index:3; background:var(--bg);opacity:calc(var(--p,0) * .5);pointer-events:none; } .case.is-stacked{box-shadow:0 -22px 46px -26px rgba(0,0,0,.55)} .case:hover{border-color:var(--fg-3)} /* kart girişi: sadece opacity — transform'a dokunmuyoruz, yığın onu kullanıyor */ .case-in{opacity:0;transition:opacity .6s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease)} .case-in.in{opacity:1} @media (prefers-reduced-motion:reduce){.case-in{opacity:1}} .case-idx{font-family:var(--ff-mono);font-size:.72rem;color:var(--fg-3);padding-top:6px} .case h3{font-family:var(--ff-display);font-size:clamp(1.6rem,3vw,2.15rem);font-weight:400;letter-spacing:-.02em;line-height:1.1} .case .role{font-size:.8rem;color:var(--accent);font-weight:600;letter-spacing:.02em;margin-top:10px} .case p{color:var(--fg-2);margin-top:14px;max-width:56ch;font-size:.98rem} .tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px} .tag{font-size:.74rem;padding:4px 11px;border:1px solid var(--line);border-radius:99px;color:var(--fg-3)} .case-arrow{ width:44px;height:44px;border-radius:50%;border:1px solid var(--line); display:grid;place-items:center;flex:none;transition:all .3s var(--ease);color:var(--fg-2); } .case:hover .case-arrow{background:var(--accent);border-color:var(--accent);color:var(--accent-fg);transform:rotate(-45deg)} .outcomes{display:flex;flex-wrap:wrap;gap:22px;margin-top:22px;padding-top:20px;border-top:1px solid var(--line-soft)} .outcome .v{font-family:var(--ff-display);font-size:1.45rem;line-height:1} .outcome .k{font-size:.76rem;color:var(--fg-3);margin-top:5px} @media(max-width:760px){ .case{grid-template-columns:1fr;gap:16px} .case-arrow{display:none} } /* Dar ekranda kartlar viewport'tan uzun olur; kısa ekranda da yığın sıkışır. Bu durumlarda ve hareket azaltma tercihinde efekti tamamen kapat. */ @media (max-width:760px),(max-height:640px),(prefers-reduced-motion:reduce){ .cases{gap:20px} .cases::after{display:none} .case{position:relative;top:auto;transform:none;box-shadow:none;will-change:auto} .case::after{display:none} .case:hover{transform:translateY(-3px);transition:transform .35s var(--ease),border-color .35s var(--ease)} } /* ================= EXPERIENCE — scroll beam timeline ================= */ .tl{position:relative;padding-bottom:clamp(6px,1.2vw,14px)} /* sabit çizgi + ilerleme huzmesi */ .tl-line{ position:absolute;left:31px;top:0;width:2px;height:0;overflow:hidden;pointer-events:none; background:linear-gradient(to bottom,transparent 0%,var(--line) 12%,var(--line) 88%,transparent 100%); -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 10%,#000 90%,transparent 100%); mask-image:linear-gradient(to bottom,transparent 0%,#000 10%,#000 90%,transparent 100%); } .tl-beam{ position:absolute;left:0;top:0;width:2px;height:0;opacity:0;border-radius:99px; background:linear-gradient(to top,var(--accent) 0%,var(--accent-2) 10%,transparent 100%); } .tl-item{display:flex;justify-content:flex-start;gap:40px;padding-top:clamp(26px,4vw,52px)} .tl-item:first-child{padding-top:6px} /* sol sütun: yapışkan tarih + nokta */ .tl-left{ position:sticky;top:calc(var(--nav-h) + 20px);align-self:flex-start;z-index:5; flex:none;width:min(340px,34%);display:flex;align-items:center;min-height:44px; } .tl-dot{ position:absolute;left:12px;top:50%;margin-top:-20px; width:40px;height:40px;border-radius:50%;background:var(--bg); display:flex;align-items:center;justify-content:center; } .tl-dot span{ width:15px;height:15px;border-radius:50%; background:var(--surface-2);border:1px solid var(--line); transition:background .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease); } .tl-item.is-live .tl-dot span{ background:var(--accent);border-color:var(--accent-2); box-shadow:0 0 0 4px var(--accent-dim); } .tl-date{ padding-left:80px;font-family:var(--ff-display);font-weight:800; font-size:clamp(1.9rem,3.4vw,2.9rem);line-height:1;letter-spacing:-.03em; color:var(--fg-3);transition:color .4s var(--ease); } .tl-item.is-live .tl-date{color:#8a8a94} .tl-date span{ display:block;margin-top:8px;font-family:var(--ff-mono);font-weight:700; font-size:.3em;letter-spacing:.1em;color:#52525b; } /* sağ sütun: içerik */ .tl-content{flex:1;min-width:0;padding-left:16px;padding-right:4px} /* masaüstünde büyük yıl dekoratif (aria-hidden) → tarih ekran okuyucuya buradan gider */ .tl-date-m{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .tl-role{font-family:var(--ff-display);font-size:1.16rem;font-weight:700;letter-spacing:-.01em} .tl-org{font-size:.9rem;color:var(--accent);margin-top:5px;font-weight:500} .tl-content p{color:var(--fg-2);margin-top:13px;font-size:.96rem;max-width:64ch} .tl-content ul{margin-top:14px;padding-left:0;list-style:none;display:grid;gap:8px} .tl-content li{position:relative;padding-left:18px;color:var(--fg-2);font-size:.94rem} .tl-content li::before{content:"";position:absolute;left:2px;top:.66em;width:5px;height:5px;border-radius:50%;background:var(--accent);opacity:.55} @media(max-width:900px){ .tl-item{position:relative;display:block;gap:0;padding-top:clamp(22px,4.5vw,34px)} .tl-item:first-child{padding-top:4px} .tl-left{position:static;display:block;width:auto;min-height:0} .tl-date{display:none} .tl-dot{top:clamp(32px,7vw,52px);margin-top:-8px} .tl-item:first-child .tl-dot{top:4px} .tl-content{padding-left:80px} .tl-date-m{ position:static;width:auto;height:auto;overflow:visible;clip:auto; font-family:var(--ff-mono);font-size:.74rem;letter-spacing:.08em; color:var(--fg-3);margin:0 0 9px; } } @media(max-width:520px){ .tl-content{padding-left:62px} .tl-line{left:23px} .tl-dot{left:4px} } @media (prefers-reduced-motion:reduce){ .tl-beam{opacity:1!important} } /* ================= SKILLS — kaydırmaya bağlı liste ================= */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .know-stage{ display:flex;align-items:flex-start;gap:clamp(16px,4vw,48px); font-family:var(--ff-display);font-weight:700;letter-spacing:-.03em; /* h2 (3.2rem) ve about metniyle (2.35rem) aynı ölçekte kalsın: 6.2vw/4.5rem fazla iriydi, satırlar kaba duruyordu */ font-size:clamp(1.4rem,3.6vw,2.7rem);line-height:1.32; } /* sol sütun: üç katmanın sekmeleri, dikeyde ortada sabit durur */ .know-tabs{ position:sticky; /* 50vh: sticky'de yüzde inset kapsayıcı bloğa göre çözülür, viewport'a değil. İlk satır 'lh' birimini bilmeyen eski tarayıcılar için yedek. */ top:calc(50vh - 9rem); top:calc(50vh - 2lh); align-self:flex-start;height:fit-content;z-index:3; display:flex;flex-direction:column;align-items:flex-start;gap:.12em; } .know-tablist{display:flex;flex-direction:column;align-items:flex-start;gap:.12em} /* "tıklanabilir" ipucu */ .know-hint{ display:inline-flex;align-items:center;gap:6px;margin-bottom:.14em; font-family:var(--ff-mono);font-size:.7rem;font-weight:400;line-height:1; letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3); } .know-hint svg{width:12px;height:12px;color:var(--accent);animation:hintNudge 2.4s var(--ease) infinite} @keyframes hintNudge{0%,60%,100%{transform:translateX(0)}30%{transform:translateX(3px)}} @media (prefers-reduced-motion:reduce){.know-hint svg{animation:none}} .know-label{ font-size:inherit;font-weight:inherit;line-height:1.18;white-space:nowrap; background:linear-gradient(#fff 45%,rgba(255,255,255,.35)); -webkit-background-clip:text;background-clip:text;color:transparent; } .know-tab{ position:relative;padding:0 0 0 .42em;text-align:left;cursor:pointer; font-size:.62em;opacity:.42; transition:opacity .3s var(--ease),font-size .3s var(--ease),transform .3s var(--ease); } .know-tab:hover{opacity:.75;transform:translateX(3px)} .know-tab:hover::before{height:.34em} .know-tab.is-active{opacity:1;font-size:.95em} /* aktif sekmenin yanındaki yeşil çubuk */ .know-tab::before{ content:"";position:absolute;left:0;top:50%;transform:translateY(-50%); width:.12em;height:0;border-radius:99px;background:var(--accent); transition:height .3s var(--ease); } .know-tab.is-active::before{height:.6em} .know-panels{flex:1;min-width:0} .know-panel[hidden]{display:none} .know-panel{animation:knowPanelIn .35s var(--ease) both} @keyframes knowPanelIn{from{opacity:0}to{opacity:1}} @media (prefers-reduced-motion:reduce){ .know-panel{animation:none} .know-tab{transition:none} } .know-list{list-style:none;margin:0;padding:0;font-size:inherit} .know-list li{ /* oklch desteklenmeyen tarayıcılar için düz renk yedeği */ color:var(--accent); } /* Yeşilden turkuaza dar bir hue rampası — tam gökkuşağı marka rengiyle çakışırdı */ @supports (color:oklch(70% .1 150)){ .know-list{ --hue-start:135; --hue-end:196; --lightness:80%; --chroma:.15; --step:calc((var(--hue-end) - var(--hue-start)) / (var(--count) - 1)); } .know-list li:not(.closer){ color:oklch(var(--lightness) var(--chroma) calc(var(--hue-start) + var(--step) * var(--i))); } } /* kapanış satırı etiketle aynı beyaz gradyan muamelesini görür. :last-of-type yerine sınıf: artık iki ayrı liste var, sadece sonuncusu kapanıyor. */ .know-list li.closer{ background:linear-gradient(#fff 45%,rgba(255,255,255,.35)); -webkit-background-clip:text;background-clip:text;color:transparent; } /* iki katman arası nefes payı */ .know-stage + .know-stage{margin-top:clamp(26px,5vh,64px)} /* ---- satır detayları: kelimenin yanında ok + üstüne gelince açılan kart ---- */ .know-list li{position:relative} .know-row{display:inline-flex;align-items:center;gap:.16em} /* ---- satır başındaki marka logosu / genel ikon ---- */ .know-ico{ --ico:.8em; display:inline-grid;place-items:center;flex:none; width:var(--ico);height:var(--ico);margin-right:.22em; /* çok satıra taşan başlıklarda ikon ilk satırın büyük harf hizasında kalsın: büyük harf ortası ≈ .52em, ikonu oraya ortalıyoruz */ align-self:flex-start;margin-top:calc(.52em - var(--ico) / 2); } .know-ico img,.know-ico svg{width:100%;height:100%;display:block} /* koyu marka renkleri siyah zeminde sönük kalmasın diye çok hafif bir kaldırma */ .know-ico img{filter:saturate(1.06) brightness(1.16)} /* markası olmayan satırlar: satırın kendi rengini alan ince çizgi ikon */ .know-ico.gen svg{ fill:none;stroke:currentColor;stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round;opacity:.5; } .know-list li.open .know-ico.gen svg, .know-list li:focus-within .know-ico.gen svg{opacity:.85} @media(hover:hover){.know-list li:hover .know-ico.gen svg{opacity:.85}} @media(max-width:640px){.know-ico{--ico:.92em}} .know-arrow{ display:inline-grid;place-items:center;flex:none; width:max(.5em,26px);height:max(.5em,26px); border-radius:50%;border:1px solid currentColor;color:inherit; opacity:.4;cursor:pointer;-webkit-tap-highlight-color:transparent; transition:opacity .25s var(--ease),transform .25s var(--ease),background-color .25s var(--ease); } .know-arrow svg{width:58%;height:58%;stroke-width:2.6} .know-list li.open .know-arrow, .know-arrow:focus-visible{opacity:1;transform:translateY(-2px);background:rgba(255,255,255,.08)} /* dokunmatikte :hover "yapışıyor" ve eski satır da işaretli kalıyordu: hover'a bağlı vurgular yalnızca fareli cihazlarda çalışsın */ @media(hover:hover){ .know-row:hover .know-arrow{opacity:1;transform:translateY(-2px);background:rgba(255,255,255,.08)} } /* ok yalnızca dokunmatikte (sheet açıkken) dönsün; masaüstünde hover kalksın */ @media(hover:none){ .know-list li.open .know-arrow{transform:rotate(90deg)} } .know-pop{ position:absolute;left:0;top:calc(100% + 10px);z-index:7; display:flex;flex-wrap:wrap;gap:8px; width:max-content;max-width:min(460px,86vw);padding:16px 18px; border-radius:18px;background:rgba(9,9,11,.94);border:1px solid rgba(255,255,255,.1); box-shadow:0 26px 60px -22px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.05); backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); opacity:0;visibility:hidden;pointer-events:none; transform:translateY(8px) scale(.97);transform-origin:top left; transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s; } .know-pop .chip{ font-family:var(--ff-sans);font-size:.78rem;font-weight:500;line-height:1.15; letter-spacing:0;text-transform:none;color:var(--fg-2); background:rgba(255,255,255,.05);border:1px solid var(--line); border-radius:999px;padding:8px 14px;white-space:nowrap; } /* Açılma tek bir kurala bağlı: fare üstündeyken, klavye odağındayken ya da dokunmatikte .open sınıfı varken. (Önceden hover ile tıklama birbirini eziyordu: hover'dayken tıklayınca kart "kapanmıyor" gibi görünüyordu.) */ @media(hover:hover){ .know-list li:hover > .know-pop{opacity:1;visibility:visible;transform:none;pointer-events:auto} } .know-list li:focus-within > .know-pop, .know-list li.open > .know-pop{opacity:1;visibility:visible;transform:none;pointer-events:auto} /* kart açıkken satır sönük kalmasın (kaydırma animasyonunu ez) */ .know-list li:focus-within,.know-list li.open{opacity:1!important;filter:none!important} .know-list li.open{z-index:8} @media(hover:hover){ .know-list li:hover{opacity:1!important;filter:none!important;z-index:8} } /* masaüstünde kartın başlığı gerekmiyor (satır zaten yanında) */ .know-pop::before{display:none} /* satır ile kart arasındaki 10px boşlukta hover kopmasın diye görünmez köprü */ .know-pop::after{content:"";position:absolute;left:0;right:0;top:-12px;height:12px} /* ---- MOBİL: küçük kart yerine alttan açılan sheet ---- */ @media(max-width:640px){ /* karartma katmanı — li'nin kendi ::after'ı, dışarı tıklayınca JS kapatıyor */ .know-list li.open::after{ content:"";position:fixed;inset:0;z-index:90; background:rgba(0,0,0,.62);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px); animation:knowScrimIn .22s var(--ease) both; } @keyframes knowScrimIn{from{opacity:0}to{opacity:1}} .know-pop{ position:fixed;left:0;right:0;bottom:0;top:auto;z-index:91; width:auto;max-width:none;max-height:72vh;overflow-y:auto;overscroll-behavior:contain; gap:7px;padding:24px 16px calc(20px + env(safe-area-inset-bottom,0px)); border-radius:22px 22px 0 0;border-bottom:0; /* üstteki tutamak çizgisi */ background-image:linear-gradient(rgba(255,255,255,.22),rgba(255,255,255,.22)); background-size:38px 4px;background-position:center 9px;background-repeat:no-repeat; box-shadow:0 -24px 60px -20px rgba(0,0,0,.95); transform:translateY(102%);transform-origin:bottom center; transition:transform .3s cubic-bezier(.22,1,.36,1),visibility .3s; opacity:1; } .know-list li.open > .know-pop{transform:translateY(0)} /* sheet başlığı: JS satırın metnini --pop-title'a yazıyor */ .know-pop::before{ display:block;width:100%;content:var(--pop-title,""); font-family:var(--ff-display);font-size:.68rem;font-weight:700; letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3); margin:2px 0 4px; } .know-pop::after{display:none} .know-pop .chip{font-size:.8rem;padding:9px 14px;white-space:normal} /* dokunmatikte hover kartı açmasın, sadece ok */ .know-list li:hover > .know-pop{transform:translateY(102%)} .know-list li.open > .know-pop{transform:translateY(0)} } html.pop-open{overflow:hidden} @media (prefers-reduced-motion:reduce){ .know-pop,.know-arrow{transition:none} } /* Asıl efekt: her satırın kendi görünürlük zaman çizelgesi. Ana iş parçacığında scroll dinlemez — derleyici tarafında çalışır. */ @supports (animation-timeline:view()) and (animation-range:0% 100%){ .know-list li{ opacity:.18; animation:knowBrighten linear both; /* satır, viewport ortasının 1 satır üstünden 1 satır altına geçerken oynar */ animation-range:cover calc(50% - 1lh) calc(50% + 1lh); animation-timeline:view(); } .know-list li:first-of-type{--start-opacity:1} .know-list li.closer{--end-opacity:1;--peak-brightness:1} @keyframes knowBrighten{ 0% {opacity:var(--start-opacity,.18)} 50% {opacity:1;filter:brightness(var(--peak-brightness,1.25))} 100%{opacity:var(--end-opacity,.18)} } } /* JS yedeği bu sınıfı ekler (Safari/Firefox) */ .know-list.js-dim li{opacity:.18;transition:opacity .12s linear} @media (prefers-reduced-motion:reduce){ .know-list li{opacity:1!important;animation:none!important;filter:none!important} } @media(max-width:640px){ .know-stage{flex-direction:column;gap:4px} /* Mobilde sekmeler listenin üstünde yatay dursun. Sticky kalırsa ekranın ortasına doğru kayıp altındaki liste satırlarının üzerine biniyordu. */ .know-tabs{position:static;top:auto;margin-bottom:14px;gap:6px} .know-tablist{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:.1em .7em} .know-hint{font-size:.62rem;margin-bottom:0} .know-tab{font-size:.62em;padding:0 0 0 .34em} .know-tab.is-active{font-size:.92em} } /* ========== YAYINDAKİ SİTELER (artık Work bölümünün içinde) ========== Eski 19 hücreli düz ızgara yerine müşteri/proje kümelerine göre gruplanmış panel: solda kim/ne, sağda o kümeye ait alan adları. */ .prod{margin-top:0} .prod-head{ display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap; padding-bottom:clamp(16px,2.4vw,24px);border-bottom:1px solid var(--line); } .prod-head h3{ font-family:var(--ff-display);font-weight:700;letter-spacing:-.02em; font-size:clamp(1.35rem,3vw,2rem); } .prod-head .sec-sub{margin-top:8px} .prod-count{ display:inline-flex;align-items:baseline;gap:7px; font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.13em; text-transform:uppercase;color:var(--fg-3);white-space:nowrap; } .prod-count b{font-size:1.25rem;font-weight:700;letter-spacing:-.02em;color:var(--accent)} .site-groups{display:flex;flex-direction:column;gap:clamp(20px,3vw,30px);margin-top:clamp(16px,2.4vw,26px)} .site-group-head{ display:flex;align-items:baseline;gap:14px;flex-wrap:wrap; padding-bottom:12px;margin-bottom:10px;border-bottom:1px solid var(--line-soft); } .site-client{font-family:var(--ff-display);font-weight:700;font-size:1.02rem;letter-spacing:-.01em;color:var(--fg)} .site-client-meta{font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.06em;color:var(--fg-3)} .site-grid{ display:grid;gap:2px 10px; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); } .site{ display:flex;align-items:center;gap:12px; padding:10px 12px;border-radius:12px; color:var(--fg-2);text-decoration:none; transition:background-color .2s var(--ease),color .2s var(--ease),transform .2s var(--ease); } .site:hover{background:rgba(255,255,255,.045);color:var(--fg);transform:translateY(-1px)} .site-fav{ position:relative;flex:none;width:34px;height:34px;border-radius:10px;overflow:hidden; background:rgba(255,255,255,.05);border:1px solid var(--line); display:grid;place-items:center; } .site-fav img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:6px} .site-mono{ position:absolute;inset:0;display:grid;place-items:center; font-family:var(--ff-display);font-weight:800;font-size:.92rem;text-transform:uppercase;color:var(--accent-2); } .site-domain{ min-width:0;font-size:.87rem;font-weight:500;letter-spacing:-.005em; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .site-go{ margin-left:auto;width:13px;height:13px;flex:none;color:var(--accent-2); opacity:0;transform:translateX(-4px);transition:opacity .2s var(--ease),transform .2s var(--ease); } .site:hover .site-go{opacity:1;transform:none} @media(max-width:600px){ .site-grid{grid-template-columns:1fr} .site{padding:9px 10px} } @media (prefers-reduced-motion:reduce){.site{transition:none}} /* ================= CONTACT ================= */ .contact{ border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface); padding:clamp(28px,4.5vw,50px);text-align:center;position:relative;overflow:hidden; } .contact::before{content:"";position:absolute;inset:auto -20% -60% -20%;height:340px;background:radial-gradient(50% 60% at 50% 100%,var(--accent-dim),transparent 70%)} .contact>*{position:relative} .contact .lede{margin:18px auto 0} .contact .cta-row{justify-content:center} .contact-links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:24px;padding-top:20px;border-top:1px solid var(--line-soft)} .chip{ display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 15px; border:1px solid var(--line);border-radius:99px;font-size:.8rem;font-weight:500; color:var(--fg-2);transition:all .2s var(--ease);white-space:nowrap; } .chip:hover{border-color:rgba(34,197,94,.4);color:var(--accent-2);background:var(--accent-dim)} /* ================= HIRE MODAL (auth-ui style) ================= */ html.modal-open{overflow:hidden} .modal-root{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:20px} .modal-root.is-open{display:flex} .modal-veil{ position:absolute;inset:0;background:rgba(2,2,2,.74); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); opacity:0;transition:opacity .3s var(--ease); } .modal-root.is-in .modal-veil{opacity:1} .modal-card{ position:relative;width:100%;max-width:440px; max-height:calc(100svh - 40px);overflow-y:auto;overscroll-behavior:contain; background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg); padding:clamp(26px,4vw,34px); box-shadow:0 40px 90px -30px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.05); opacity:0;transform:translateY(14px) scale(.97); transition:opacity .35s var(--ease),transform .35s var(--ease); } .modal-root.is-in .modal-card{opacity:1;transform:none} .modal-card::after{ content:"";position:absolute;top:0;left:50%;transform:translateX(-50%); width:70%;height:1px;background:linear-gradient(90deg,transparent,rgba(34,197,94,.55),transparent); } .modal-x{ position:absolute;top:13px;right:13px;width:34px;height:34px; display:flex;align-items:center;justify-content:center;border-radius:50%; color:var(--fg-3);transition:background .2s,color .2s; } .modal-x:hover{background:rgba(255,255,255,.06);color:var(--fg)} .modal-badge{ width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center; background:var(--accent-dim);border:1px solid rgba(34,197,94,.25);color:var(--accent-2);margin-bottom:16px; } .modal-title{font-family:var(--ff-display);font-size:1.42rem;font-weight:800;letter-spacing:-.02em;line-height:1.15} .modal-sub{color:var(--fg-3);font-size:.87rem;margin-top:6px;line-height:1.5} .modal-form{display:grid;gap:13px;margin-top:24px} .modal-form .row2{display:grid;gap:13px} @media(min-width:480px){.modal-form .row2{grid-template-columns:1fr 1fr}} .field{display:grid;gap:6px;min-width:0} .field label{font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)} .field label .opt{color:#52525b;font-weight:500;text-transform:none;letter-spacing:0} .input-wrap{position:relative;display:flex;align-items:center} .input-wrap>svg{position:absolute;left:13px;top:14px;width:16px;height:16px;color:var(--fg-3);pointer-events:none;transition:color .2s} .input-wrap:focus-within>svg{color:var(--accent)} .field input,.field textarea{ width:100%;font:inherit;font-size:.92rem;color:var(--fg); background:var(--surface-2);border:1px solid var(--line);border-radius:12px; padding:12px 14px 12px 39px; transition:border-color .2s,background .2s,box-shadow .2s; } .field textarea{min-height:98px;resize:vertical;line-height:1.55} .field input::placeholder,.field textarea::placeholder{color:#52525b} .field input:focus,.field textarea:focus{ outline:none;border-color:rgba(34,197,94,.5);background:#0d0d10; box-shadow:0 0 0 3px rgba(34,197,94,.12); } .field input:user-invalid{border-color:rgba(239,68,68,.55)} .modal-submit{ margin-top:5px;width:100%;height:48px; display:inline-flex;align-items:center;justify-content:center;gap:9px; border-radius:12px;font-family:var(--ff-display);font-weight:700;font-size:.92rem; background:linear-gradient(to bottom,var(--accent-2),var(--accent));color:var(--accent-fg); transition:filter .2s var(--ease),transform .2s var(--ease); } .modal-submit:hover{filter:brightness(1.08);transform:translateY(-1px)} .modal-submit svg{width:16px;height:16px} .modal-or{ display:flex;align-items:center;gap:12px;margin:20px 0 13px; color:var(--fg-3);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase; } .modal-or::before,.modal-or::after{content:"";flex:1;height:1px;background:var(--line-soft)} .modal-alt{display:flex;gap:8px} .modal-alt a{ flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;height:40px; border:1px solid var(--line);border-radius:11px;font-size:.79rem;font-weight:500; color:var(--fg-2);transition:border-color .2s,color .2s,background .2s;white-space:nowrap; } .modal-alt a:hover{border-color:rgba(34,197,94,.4);color:var(--accent-2);background:var(--accent-dim)} .modal-note{margin-top:16px;text-align:center;font-size:.72rem;color:#52525b;line-height:1.5} @media (prefers-reduced-motion:reduce){ .modal-veil,.modal-card{transition:none} } /* ================= CINEMATIC FOOTER ================= */ /* Sayfa gövdesi footer'ın üstünde kalır — perde efekti bunun altından açılır */ main#main{ position:relative;z-index:2;background:var(--bg); border-bottom:1px solid var(--line-soft); border-bottom-left-radius:28px;border-bottom-right-radius:28px; box-shadow:0 40px 80px -40px rgba(0,0,0,.9); } /* Perde: clip-path sayesinde içindeki fixed footer sadece bu kutuda görünür */ .cine{position:relative;z-index:1;width:100%;height:100vh;height:100svh;clip-path:polygon(0 0,100% 0,100% 100%,0 100%)} .cine-inner{ position:fixed;bottom:0;left:0;width:100%;height:100vh;height:100svh; display:flex;flex-direction:column;justify-content:space-between; overflow:hidden;background:var(--bg);color:var(--fg); } /* — arka plan katmanları — */ .cine-aurora{ position:absolute;left:50%;top:50%;width:80vw;height:60vh; transform:translate(-50%,-50%);border-radius:50%;filter:blur(80px); background:radial-gradient(circle at 50% 50%,rgba(34,197,94,.18) 0%,rgba(74,222,128,.08) 40%,transparent 70%); pointer-events:none;z-index:0;animation:cine-breathe 8s ease-in-out infinite alternate; } @keyframes cine-breathe{ from{transform:translate(-50%,-50%) scale(1);opacity:.6} to{transform:translate(-50%,-50%) scale(1.1);opacity:1} } .cine-grid{ position:absolute;inset:0;z-index:0;pointer-events:none;background-size:60px 60px; background-image: linear-gradient(to right,rgba(255,255,255,.035) 1px,transparent 1px), linear-gradient(to bottom,rgba(255,255,255,.035) 1px,transparent 1px); -webkit-mask-image:linear-gradient(to bottom,transparent,#000 30%,#000 70%,transparent); mask-image:linear-gradient(to bottom,transparent,#000 30%,#000 70%,transparent); } .cine-giant{ position:absolute;left:50%;bottom:-3vh;transform:translateX(-50%);white-space:nowrap; z-index:0;pointer-events:none;user-select:none;-webkit-user-select:none; font-family:var(--ff-display);font-size:26vw;line-height:.75;font-weight:800;letter-spacing:-.05em; color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.05); background:linear-gradient(180deg,rgba(255,255,255,.10) 0%,transparent 60%); -webkit-background-clip:text;background-clip:text; } /* — eğik marquee — */ .cine-marquee{ position:absolute;top:clamp(38px,7vh,76px);left:0;width:100%;overflow:hidden;z-index:10; border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft); background:rgba(2,2,2,.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); padding-block:13px;transform:rotate(-2deg) scale(1.1); box-shadow:0 30px 60px -30px rgba(0,0,0,.9); } .cine-track{ display:flex;width:max-content;animation:cine-marquee 40s linear infinite; font-family:var(--ff-display);font-size:.68rem;font-weight:700; letter-spacing:.3em;text-transform:uppercase;color:var(--fg-3); } @keyframes cine-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} .cine-mq{display:flex;align-items:center;gap:44px;padding-inline:22px} .cine-mq i{font-style:normal;color:var(--accent);letter-spacing:0} @media(min-width:861px){.cine-track{font-size:.78rem}} /* — cam hap (glass pill) — */ .cine-pill{ position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px; border-radius:999px;border:1px solid rgba(255,255,255,.08); background:linear-gradient(145deg,rgba(255,255,255,.03) 0%,rgba(255,255,255,.012) 100%); box-shadow:0 10px 30px -10px rgba(0,0,0,.5),inset 0 1px 1px rgba(255,255,255,.10),inset 0 -1px 2px rgba(0,0,0,.8); backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); color:var(--fg-2);white-space:nowrap; transition:background .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease),color .4s var(--ease); } .cine-pill:hover{ background:linear-gradient(145deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,.02) 100%); border-color:rgba(34,197,94,.35);color:var(--fg); box-shadow:0 20px 40px -10px rgba(0,0,0,.7),inset 0 1px 1px rgba(255,255,255,.2); } .cine-pill svg{flex:none} .cine-pill-lg{padding:17px 32px;font-family:var(--ff-display);font-weight:700;font-size:.92rem;color:var(--fg)} .cine-pill-sm{padding:11px 20px;font-size:.8rem;font-weight:500} .cine-pill-icon{width:48px;height:48px;padding:0} /* — orta blok — */ .cine-body{ position:relative;z-index:10;flex:1;width:100%;max-width:var(--maxw);margin-inline:auto; display:flex;flex-direction:column;align-items:center;justify-content:center; padding:0 24px;margin-top:36px; } .cine-h{ font-family:var(--ff-display);font-weight:800;letter-spacing:-.04em;line-height:.95;text-align:center; font-size:clamp(2.4rem,8vw,5.2rem);margin-bottom:clamp(18px,3vw,32px); background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.42) 100%); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; filter:drop-shadow(0 0 20px rgba(255,255,255,.15)); } .cine-rows{display:flex;flex-direction:column;align-items:center;gap:18px;width:100%} .cine-row{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;width:100%} /* — alt bar — */ .cine-bottom{ position:relative;z-index:20;width:100%; padding:0 clamp(20px,4vw,48px) 28px; display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:16px; } .cine-copy{font-size:.66rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-3);order:2;text-align:center} .cine-top{order:3} .cine-top svg{transition:transform .3s var(--ease)} .cine-top:hover svg{transform:translateY(-5px)} @media(min-width:861px){ .cine-bottom{flex-direction:row} .cine-copy{order:1;font-size:.7rem} } /* JS ile açılan öğeler — JS yoksa görünür kalsın */ .cine [data-cine-reveal]{will-change:transform,opacity} @media (prefers-reduced-motion:reduce){ .cine-aurora,.cine-track{animation:none} .cine-giant{opacity:1!important;transform:translateX(-50%)!important} .cine [data-cine-reveal]{opacity:1!important;transform:none!important} } /* ================= REVEAL ================= */ .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)} .reveal.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}