:root { --navH: 96px; } /* Fix H1UserAgentFontSizeInSection deprecation warning */ h1 { font-size: inherit; } body { font-family: "Manrope", "Manrope Fallback", Arial, sans-serif; background-color: #050505; color: #ededed; } /* Animated gradient background */ .gradient-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 80% 50% at 20% 40%, rgba(255, 122, 24, 0.15) 0%, transparent 50%), radial-gradient(ellipse 60% 40% at 80% 60%, rgba(255, 61, 0, 0.10) 0%, transparent 50%), radial-gradient(ellipse 50% 30% at 50% 80%, rgba(255, 179, 71, 0.08) 0%, transparent 50%); animation: gradientShift 12s ease-in-out infinite alternate; } @keyframes gradientShift { 0% { opacity: 0.7; transform: scale(1) translateY(0); } 50% { opacity: 1; transform: scale(1.05) translateY(-2%); } 100% { opacity: 0.8; transform: scale(1.02) translateY(1%); } } /* Reduce motion preference */ @media (prefers-reduced-motion: reduce) { .gradient-bg { animation: none; opacity: 0.8; } } .material-symbols-outlined { font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24; } /* Smooth scroll + offset */ html { scroll-behavior: smooth; scroll-padding-top: var(--navH); } /* Defer offscreen layout/paint for below-the-fold sections */ .cv-auto { content-visibility: auto; contain-intrinsic-size: 900px; } /* Low-end device tweaks (JS adds .perf-low) */ .perf-low header { backdrop-filter: blur(6px); } .perf-low #blobA, .perf-low #blobB { filter: blur(60px) !important; opacity: 0.85; } /* Scrollbar */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: #050505; } ::-webkit-scrollbar-thumb { background: #333; border-radius: 0; } ::-webkit-scrollbar-thumb:hover { background: #ff7a18; } /* Kinetic text */ .kinetic-text { transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); } .kinetic-text:hover { font-weight: 800; letter-spacing: 0.05em; -webkit-text-stroke: 1px #ff7a18; color: transparent; transform: scale(1.02) skewX(-2deg); } /* Glass */ .glass-panel { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.05); transition: border-color 350ms ease, box-shadow 350ms ease, transform 350ms ease, background 350ms ease; } .glass-panel:hover { border-color: rgba(255, 122, 24, 0.45); box-shadow: 0 0 32px rgba(255, 122, 24, 0.12); } /* Reveal system Goal: Everything is visible immediately on first load. If you later want reveal animations again, add a class like `reveal-on` to and the transitions will apply only then. */ /* Default: visible (no "coming in" animation) */ [data-reveal] { opacity: 1; transform: none; } /* Optional: enable reveal transitions only when html has .reveal-on */ html.reveal-on [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 700ms cubic-bezier(0.165, 0.84, 0.44, 1), transform 700ms cubic-bezier(0.165, 0.84, 0.44, 1); will-change: transform, opacity; } html.reveal-on [data-reveal].is-visible { opacity: 1; transform: translateY(0); } html.reveal-on [data-reveal="scale"] { transform: scale(0.98); } html.reveal-on [data-reveal="scale"].is-visible { transform: scale(1); } /* Reduce motion */ .reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } /* Active nav underline */ .nav-link { position: relative; } .nav-link::before { content: ""; position: absolute; left: 0; bottom: -6px; height: 1px; width: 0; background: #ff7a18; transition: width 300ms ease; } .nav-link:hover::before { width: 100%; } .nav-link.is-active { color: #ff7a18 !important; } .nav-link.is-active::before { width: 100%; } /* Mobile drawer */ .drawer { transform: translateX(110%); transition: transform 300ms ease; } .drawer.open { transform: translateX(0); } /* Hero ghost */ .hero-ghost { opacity: 0.35; filter: blur(0.2px); text-shadow: 0 0 40px rgba(255, 255, 255, 0.05); } /* Focus ring */ :focus-visible { outline: 2px solid rgba(255, 122, 24, 0.75); outline-offset: 3px; } /* ============================================================ Portfolio carousel (Örnek İşlerimiz) - Mobile: portrait "phone" preview + swipe - Desktop: square "web" preview + draggable theme bar ============================================================ */ .portfolio-scroller { -webkit-overflow-scrolling: touch; overflow-x: auto; overflow-y: hidden; scroll-snap-type: none; scroll-behavior: smooth; touch-action: pan-x pan-y; overscroll-behavior-x: contain; scroll-padding-left: 16px; padding-left: 2px; padding-right: 2px; } /* Mobile only: enable snap */ @media (max-width: 639px) { .portfolio-scroller { scroll-snap-type: x mandatory; } .portfolio-card { scroll-snap-align: start; } } .portfolio-scroller { scrollbar-width: none; } .portfolio-scroller::-webkit-scrollbar { display: none; } /* Portfolio card - fluid sizing based on viewport */ .portfolio-card { flex: 0 0 auto; width: clamp(160px, 42vw, 220px); padding: clamp(10px, 2vw, 16px); background: rgba(0, 0, 0, 0.62); border: 1px solid rgba(255, 255, 255, 0.09); box-shadow: 0 0 0 1px rgba(255, 122, 24, 0.06) inset; transition: border-color 350ms ease, box-shadow 350ms ease, transform 350ms ease, background 350ms ease; } .portfolio-card:hover { transform: translateY(-4px); border-color: rgba(255, 122, 24, 0.35); box-shadow: 0 0 36px rgba(255, 122, 24, 0.10), 0 0 0 1px rgba(255, 122, 24, 0.12) inset; background: rgba(0, 0, 0, 0.70); } /* Larger screens - slightly bigger cards */ @media (min-width: 640px) { .portfolio-card { width: clamp(180px, 22vw, 240px); } } @media (min-width: 1024px) { .portfolio-card { width: clamp(200px, 18vw, 260px); } } @media (min-width: 1440px) { .portfolio-card { width: clamp(220px, 15vw, 280px); } } /* Portfolio shot - single aspect ratio for mobile images (400x711) */ .portfolio-shot { width: 100%; aspect-ratio: 400 / 711; position: relative; overflow: hidden; background: #050505; border: 1px solid rgba(255, 255, 255, 0.10); padding: clamp(8px, 1.5vw, 12px); } /* Portfolio image - simple img element */ .portfolio-img { width: 100%; height: 100%; object-fit: cover; display: block; border: 1px solid rgba(255, 255, 255, 0.10); opacity: 0.88; filter: saturate(0.95) contrast(1.02); transition: opacity 350ms ease, filter 350ms ease; } .portfolio-card:hover .portfolio-img { opacity: 0.98; filter: saturate(1.02) contrast(1.05); } .portfolio-meta { margin-top: 22px; padding-left: 18px; position: relative; } .portfolio-meta::before { content: ""; position: absolute; left: 0; top: 3px; width: 3px; height: 42px; background: #ff7a18; box-shadow: 0 0 18px rgba(255, 122, 24, 0.35); } @media (max-width: 639px) { .portfolio-meta { margin-top: 18px; } } .portfolio-title { color: #ffffff; font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em; line-height: 1.2; font-size: 20px; } @media (min-width: 640px) { .portfolio-title { font-size: 24px; } } .portfolio-subtitle { margin-top: 10px; color: rgba(237, 237, 237, 0.55); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase; } .portfolio-bar-track { height: 10px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.04); position: relative; cursor: pointer; user-select: none; } .portfolio-bar-thumb { height: 100%; width: 64px; background: linear-gradient(90deg, rgba(255, 122, 24, 0.35), rgba(255, 122, 24, 0.95)); box-shadow: 0 0 24px rgba(255, 122, 24, 0.20); transform: translate3d(0, 0, 0); transition: transform 0.08s ease-out; will-change: transform, width; cursor: grab; } .portfolio-bar-thumb:active { cursor: grabbing; }