/* ========================================================================== ÖZKAN ÇAY EVİ — tema stilleri Tailwind yardımcı sınıflarının üstüne binen özel katman. ========================================================================== */ /* ---------- Arkaplan dokusu ve ışıma ---------- */ .oz-grain { position: fixed; inset: -50%; z-index: 0; pointer-events: none; opacity: .045; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode: overlay; } .oz-glow { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(58rem 34rem at 12% -8%, oklch(.80 .155 72 / .13), transparent 62%), radial-gradient(48rem 30rem at 92% 6%, oklch(.62 .19 32 / .11), transparent 60%), radial-gradient(46rem 34rem at 50% 108%, oklch(.70 .13 148 / .07), transparent 62%); } [data-theme="light"] .oz-grain { opacity: .03; mix-blend-mode: multiply; } [data-theme="light"] .oz-glow { background: radial-gradient(58rem 34rem at 12% -8%, oklch(.80 .16 72 / .22), transparent 62%), radial-gradient(48rem 30rem at 92% 6%, oklch(.62 .19 32 / .12), transparent 60%), radial-gradient(46rem 34rem at 50% 108%, oklch(.70 .13 148 / .10), transparent 62%); } /* İçerik dokunun üstünde kalsın */ main, header, footer { position: relative; z-index: 1; } /* ---------- Tipografi ---------- */ .oz-display { font-family: "Satoshi", "Inter", ui-sans-serif, system-ui, sans-serif; font-weight: 900; letter-spacing: -.03em; line-height: .98; } .oz-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; } /* ---------- Üst bar durumları ---------- */ #oz-navbar.is-stuck { background: color-mix(in oklab, var(--c-koyu) 72%, transparent); border-color: var(--c-cizgi); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); box-shadow: 0 18px 40px -28px var(--c-golge); } #oz-header.is-hidden { transform: translateY(-120%); } .oz-navlink { position: relative; } .oz-navlink::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 1.5px; background: var(--c-bal); transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.22,1,.36,1); } .oz-navlink:hover::after, .oz-navlink[aria-current="page"]::after { transform: scaleX(1); } .oz-navlink[aria-current="page"] { color: var(--c-krem); } /* ---------- Mobil menü ---------- */ #oz-mobile-menu.is-open { display: block; } .oz-mm-panel { transform: translateY(-14px); opacity: 0; transition: transform .45s cubic-bezier(.22,1,.36,1), opacity .3s; } .oz-mm-backdrop { opacity: 0; transition: opacity .35s; } #oz-mobile-menu.is-visible .oz-mm-panel { transform: translateY(0); opacity: 1; } #oz-mobile-menu.is-visible .oz-mm-backdrop { opacity: 1; } body.oz-locked { overflow: hidden; } /* ---------- Görünürlük animasyonları ---------- */ /* JS yoksa hiçbir şey gizlenmez; .oz-js yalnızca 'de eklenir. */ .oz-js .oz-reveal { opacity: 0; transform: translateY(26px); } .oz-js .oz-reveal.is-in { opacity: 1; transform: none; transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1); } .oz-js .oz-word { display: inline-block; opacity: 0; transform: translateY(.55em) rotate(2deg); } .oz-js .oz-word.is-in { opacity: 1; transform: none; transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); } /* Kaydırma tarayıcının kendisine bırakıldı (JS smooth-scroll kütüphanesi yok); yumuşak geçiş için bu yeterli ve hiçbir koşulda kilitlenmez. */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { .oz-js .oz-reveal, .oz-js .oz-word { opacity: 1 !important; transform: none !important; transition: none !important; } html { scroll-behavior: auto; } } /* ---------- Görsel üstü karartma (scrim) ---------- Üzerinde her zaman beyaz yazı duran bölümlerde kullanılır. Tema değişkenlerine BAĞLI DEĞİLDİR: açık temada da koyu kalır, yoksa beyaz zemin üstünde beyaz yazı okunmaz hale gelirdi. */ .oz-scrim-bottom { background: linear-gradient(to top, oklch(.13 .015 50) 0%, oklch(.13 .015 50 / .80) 45%, oklch(.13 .015 50 / .42) 100%); } .oz-scrim-left { background: linear-gradient(to right, oklch(.13 .015 50 / .85) 0%, transparent 58%); } .oz-scrim-side { background: linear-gradient(to right, oklch(.13 .015 50) 0%, oklch(.13 .015 50 / .88) 42%, oklch(.13 .015 50 / .32) 100%); } /* ---------- Kartlar ---------- */ .oz-card { position: relative; overflow: hidden; border-radius: 1.75rem; border: 1px solid var(--c-cizgi); background: var(--c-cam); transition: transform .5s cubic-bezier(.22,1,.36,1), border-color .4s, background-color .4s; } .oz-card:hover { transform: translateY(-5px); border-color: color-mix(in oklab, var(--c-bal) 45%, transparent); background: var(--c-cam2); } .oz-card__media { overflow: hidden; } .oz-card__media img { transition: transform .9s cubic-bezier(.22,1,.36,1); } .oz-card:hover .oz-card__media img { transform: scale(1.06); } /* Fiyat rozeti */ .oz-price { font-family: "Satoshi", Inter, sans-serif; font-weight: 900; letter-spacing: -.02em; } /* ---------- Kayan şerit (marquee) ---------- */ .oz-marquee { display: flex; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .oz-marquee__track { display: flex; flex-shrink: 0; gap: 2.5rem; padding-right: 2.5rem; animation: oz-scroll 42s linear infinite; } .oz-marquee:hover .oz-marquee__track { animation-play-state: paused; } @keyframes oz-scroll { to { transform: translateX(-100%); } } @media (prefers-reduced-motion: reduce) { .oz-marquee__track { animation: none; } } /* ---------- Buhar efekti (hero) ---------- */ .oz-steam { position: absolute; pointer-events: none; } .oz-steam span { position: absolute; bottom: 0; width: 3px; height: 46px; border-radius: 999px; background: linear-gradient(to top, transparent, oklch(1 0 0 / .34), transparent); filter: blur(4px); animation: oz-steam 4.6s ease-in-out infinite; } .oz-steam span:nth-child(2) { left: 12px; animation-delay: .9s; height: 60px; } .oz-steam span:nth-child(3) { left: 24px; animation-delay: 1.8s; height: 38px; } @keyframes oz-steam { 0% { opacity: 0; transform: translateY(6px) scaleX(1); } 30% { opacity: .9; } 100% { opacity: 0; transform: translateY(-58px) scaleX(1.9); } } /* ---------- Yazı içeriği (blog & sayfa gövdesi) ---------- */ .oz-prose { font-size: 17px; line-height: 1.78; color: var(--c-sis); } .oz-prose > * + * { margin-top: 1.15em; } .oz-prose h2 { font-family: "Satoshi", Inter, sans-serif; font-weight: 700; font-size: 1.45rem; letter-spacing: -.02em; color: var(--c-krem); margin-top: 2.2em; } .oz-prose h3 { font-weight: 700; font-size: 1.15rem; color: var(--c-krem); margin-top: 1.8em; } .oz-prose strong { color: var(--c-krem); font-weight: 600; } .oz-prose a { color: var(--c-bal); text-underline-offset: 3px; text-decoration: underline; } .oz-prose ul { padding-left: 1.15em; list-style: disc; } .oz-prose li::marker { color: var(--c-bal); } /* ---------- Ayrıntı (details) ---------- */ summary::-webkit-details-marker { display: none; } /* ---------- Mobil alt çubuk için boşluk ---------- */ @media (max-width: 767px) { body { padding-bottom: 4.5rem; } } /* ---------- Seçim & odak ---------- */ :focus-visible { outline: 2px solid var(--c-bal); outline-offset: 3px; border-radius: 4px; }