/* ========================================================================== MY PSİKOLOJİ — Design System Renk skalası doğrudan logodan (piksel analizi) türetilmiştir. petrol → turkuaz → iris → leylak → pudra → altın ========================================================================== */ :root { /* --- Marka: Petrol (logonun sol kolu / baş) --- */ --c-petrol-950: #0d1f33; --c-petrol-900: #12283f; --c-petrol-800: #1a3859; --c-petrol-700: #1b4064; --c-petrol-600: #20516f; --c-petrol-500: #286c84; /* --- Turkuaz (logo orta gövde) --- */ --c-teal-600: #3d9ca3; --c-teal-500: #53b2b7; --c-teal-400: #68caca; --c-teal-300: #93dcdc; /* --- İris / Periwinkle (logo sol dalga) --- */ --c-iris-700: #46588a; --c-iris-600: #546a9c; --c-iris-500: #66719d; --c-iris-400: #7f87b1; /* --- Leylak (logonun sağ baş / kolu) --- */ --c-lilac-600: #8b7da8; --c-lilac-500: #988bb1; --c-lilac-400: #a295b7; --c-lilac-300: #b19db8; /* --- Pudra --- */ --c-blush-400: #c5b0ba; --c-blush-300: #cbb7c3; --c-blush-200: #e2d6dc; /* --- Altın / Kum (logo sağ alt kol) --- */ --c-gold-600: #c79a5f; --c-gold-500: #d5b27c; --c-gold-400: #daba87; --c-gold-300: #e4ca9a; /* --- Nötr --- */ --c-ivory: #fbf9f7; --c-sand: #f4efe9; --c-mist: #eef1f5; --c-line: rgba(26, 56, 89, 0.10); --c-ink: #12283f; --c-ink-soft: rgba(18, 40, 63, 0.68); --c-ink-mute: rgba(18, 40, 63, 0.48); /* --- Gradyanlar --- */ --g-brand: linear-gradient(120deg, #1a3859 0%, #286c84 22%, #53b2b7 44%, #66719d 64%, #a295b7 82%, #d5b27c 100%); --g-brand-soft: linear-gradient(120deg, rgba(40,108,132,.14), rgba(83,178,183,.14) 35%, rgba(162,149,183,.14) 70%, rgba(213,178,124,.14)); --g-deep: linear-gradient(160deg, #0d1f33 0%, #1a3859 45%, #20516f 100%); --g-gold: linear-gradient(100deg, #c79a5f, #e4ca9a 55%, #d5b27c); --g-iris: linear-gradient(135deg, #546a9c, #a295b7); /* --- Gölge --- */ --sh-xs: 0 1px 2px rgba(18,40,63,.06); --sh-sm: 0 2px 10px rgba(18,40,63,.06), 0 1px 3px rgba(18,40,63,.04); --sh-md: 0 10px 30px -8px rgba(18,40,63,.14), 0 2px 8px rgba(18,40,63,.05); --sh-lg: 0 28px 60px -20px rgba(18,40,63,.26), 0 8px 24px -12px rgba(18,40,63,.12); --sh-xl: 0 48px 100px -32px rgba(18,40,63,.35); --sh-glow-teal: 0 0 0 1px rgba(83,178,183,.25), 0 18px 50px -18px rgba(83,178,183,.55); --sh-glow-gold: 0 0 0 1px rgba(213,178,124,.3), 0 18px 50px -18px rgba(199,154,95,.5); /* --- Hareket --- */ --e-out: cubic-bezier(.16,1,.3,1); /* expo out — ana easing */ --e-io: cubic-bezier(.76,0,.24,1); /* expo in-out */ --e-spring: cubic-bezier(.34,1.56,.64,1); /* hafif overshoot */ --e-soft: cubic-bezier(.4,0,.2,1); --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 34px; --r-2xl: 48px; /* Header: mobilde tek satır, masaüstünde üst şerit + ana bar */ --header-h: 100px; --container: 1280px; /* --- Yüzey token'ları (tema ile değişir) --- */ --s-base: #fbf9f7; /* sayfa zemini */ --s-alt: #f4efe9; /* alternatif bölüm zemini (sand) */ --s-raised: #ffffff; /* kart / yükseltilmiş yüzey */ --s-sunken: #eef1f5; /* girinti */ --t-strong: #12283f; /* ana metin */ --t-body: rgba(18, 40, 63, .62); --t-mute: rgba(18, 40, 63, .45); --b-line: rgba(18, 40, 63, .10); --b-line-2: rgba(18, 40, 63, .16); --glass-bg: rgba(251, 249, 247, .80); --glass-br: rgba(255, 255, 255, .62); --dot-col: rgba(26, 56, 89, .14); } @media (min-width: 1024px) { :root { --header-h: 160px; } /* 40px üst şerit + 120px ana bar */ } /* ========================================================================== 0. TEMA — light varsayılan, dark seçenek data-theme özniteliği üzerinde; inline script FOUC'u engeller. ========================================================================== */ html[data-theme="dark"] { --s-base: #0b1a2b; --s-alt: #102131; --s-raised: #15293d; --s-sunken: #0e1e2e; --t-strong: #e9eff5; --t-body: rgba(233, 239, 245, .66); --t-mute: rgba(233, 239, 245, .44); --b-line: rgba(255, 255, 255, .10); --b-line-2: rgba(255, 255, 255, .16); --glass-bg: rgba(17, 33, 50, .78); --glass-br: rgba(255, 255, 255, .10); --dot-col: rgba(147, 220, 220, .12); --c-line: rgba(255, 255, 255, .10); --c-ink: #e9eff5; --c-ink-soft: rgba(233, 239, 245, .70); --c-ink-mute: rgba(233, 239, 245, .46); --c-ivory: #0b1a2b; --c-sand: #102131; --sh-sm: 0 2px 10px rgba(0,0,0,.28), 0 1px 3px rgba(0,0,0,.2); --sh-md: 0 10px 30px -8px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.3); --sh-lg: 0 28px 60px -20px rgba(0,0,0,.62), 0 8px 24px -12px rgba(0,0,0,.4); --sh-xl: 0 48px 100px -32px rgba(0,0,0,.7); color-scheme: dark; } /* Tema geçişi — göz yormayan yumuşak çapraz geçiş */ html.theme-anim, html.theme-anim body, html.theme-anim .card, html.theme-anim .site-header, html.theme-anim section, html.theme-anim aside, html.theme-anim .glass, html.theme-anim input, html.theme-anim textarea, html.theme-anim .filter-pill { transition: background-color .5s var(--e-soft), color .5s var(--e-soft), border-color .5s var(--e-soft), box-shadow .5s var(--e-soft) !important; } /* ========================================================================== 1. Temel ========================================================================== */ * { -webkit-tap-highlight-color: transparent; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-stopped { overflow: hidden; } body { background: var(--s-base); color: var(--t-strong); font-family: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; font-feature-settings: "ss01", "cv11"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } body.is-loading { overflow: hidden; height: 100vh; } ::selection { background: var(--c-teal-400); color: #0d1f33; } h1,h2,h3,h4,.font-display { font-family: "Fraunces", "Georgia", ui-serif, serif; font-optical-sizing: auto; letter-spacing: -0.02em; font-weight: 500; } /* Odak halkası — erişilebilirlik */ :where(a,button,input,textarea,select,[tabindex]):focus-visible { outline: 2px solid var(--c-teal-500); outline-offset: 3px; border-radius: 6px; } /* Scrollbar */ ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: var(--c-sand); } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--c-petrol-600), var(--c-lilac-400)); border-radius: 99px; border: 3px solid var(--c-sand); } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--c-petrol-800), var(--c-lilac-500)); } /* ========================================================================== 2. Yardımcı sınıflar ========================================================================== */ .container-x { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 1.25rem; } @media (min-width: 768px) { .container-x { padding-inline: 2rem; } } @media (min-width: 1280px) { .container-x { padding-inline: 2.5rem; } } .text-gradient { background: var(--g-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .text-gradient-gold { background: var(--g-gold); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .glass { background: rgba(251, 249, 247, .72); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border: 1px solid rgba(255,255,255,.6); } .glass-dark { background: rgba(13, 31, 51, .55); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); border: 1px solid rgba(255,255,255,.12); } .hairline { border-top: 1px solid var(--c-line); } /* Bölüm etiketi */ .eyebrow { display: inline-flex; align-items: center; gap: .55rem; font-size: .7rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--c-petrol-500); } .eyebrow::before { content: ""; width: 26px; height: 1px; background: linear-gradient(90deg, transparent, var(--c-gold-500)); } /* Noktalı doku */ .bg-dots { background-image: radial-gradient(circle at 1px 1px, rgba(26,56,89,.14) 1px, transparent 0); background-size: 22px 22px; } .bg-grid { background-image: linear-gradient(to right, rgba(26,56,89,.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(26,56,89,.05) 1px, transparent 1px); background-size: 64px 64px; } .bg-noise::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .035; z-index: 1; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Bölüm arası akışkan geçiş — monolit blok hissini kırar */ .section-fade-top { position: absolute; inset-inline: 0; top: 0; height: 140px; z-index: 2; pointer-events: none; background: linear-gradient(to bottom, var(--c-ivory), transparent); } .section-fade-bottom { position: absolute; inset-inline: 0; bottom: 0; height: 140px; z-index: 2; pointer-events: none; background: linear-gradient(to top, var(--c-ivory), transparent); } .wave-divider { display: block; width: 100%; height: auto; line-height: 0; } /* Işık lekeleri (aurora) */ .aura { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; will-change: transform; } .aura-teal { background: radial-gradient(circle, rgba(83,178,183,.55), transparent 68%); } .aura-iris { background: radial-gradient(circle, rgba(102,113,157,.5), transparent 68%); } .aura-lilac { background: radial-gradient(circle, rgba(162,149,183,.5), transparent 68%); } .aura-gold { background: radial-gradient(circle, rgba(213,178,124,.45), transparent 68%); } .aura-petrol { background: radial-gradient(circle, rgba(40,108,132,.5), transparent 68%); } /* ========================================================================== 3. Butonlar ========================================================================== */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6rem; padding: .95rem 1.7rem; border-radius: 99px; font-weight: 700; font-size: .93rem; letter-spacing: .01em; transition: transform .45s var(--e-out), box-shadow .45s var(--e-out), color .3s var(--e-soft), background-color .3s var(--e-soft); overflow: hidden; isolation: isolate; cursor: pointer; white-space: nowrap; } .btn i, .btn .ph, .btn [class*="ph-"] { transition: transform .45s var(--e-spring); font-size: 1.15em; } .btn:hover { transform: translateY(-3px); } .btn:active { transform: translateY(-1px) scale(.985); } .btn:hover i, .btn:hover [class*="ph-"] { transform: translateX(3px); } /* Dolgulu — degrade kayması */ .btn-primary { color: #fff; background: var(--g-brand); background-size: 220% 100%; background-position: 0% 50%; box-shadow: var(--sh-md); transition: transform .45s var(--e-out), box-shadow .45s var(--e-out), background-position .8s var(--e-out); } .btn-primary:hover { background-position: 100% 50%; box-shadow: var(--sh-glow-teal); } .btn-ink { color: #fff; background: var(--c-petrol-900); box-shadow: var(--sh-md); } .btn-ink::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--g-brand); transform: translateY(101%); transition: transform .55s var(--e-out); } .btn-ink:hover::before { transform: translateY(0); } .btn-gold { color: #12283f; background: var(--g-gold); box-shadow: var(--sh-md); } .btn-gold:hover { box-shadow: var(--sh-glow-gold); } /* Çerçeveli */ .btn-outline { color: var(--c-petrol-800); border: 1.5px solid rgba(26,56,89,.22); background: transparent; } .btn-outline::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--c-petrol-900); transform: scale(0); border-radius: 99px; transition: transform .5s var(--e-out); } .btn-outline:hover { color: #fff; border-color: transparent; } .btn-outline:hover::before { transform: scale(1); } .btn-ghost-light { color: #fff; border: 1.5px solid rgba(255,255,255,.34); background: rgba(255,255,255,.06); } .btn-ghost-light:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.6); } /* Parlama süpürmesi */ .btn-shine::after { content: ""; position: absolute; top: 0; left: -120%; width: 55%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent); transform: skewX(-22deg); transition: left .85s var(--e-out); } .btn-shine:hover::after { left: 145%; } /* Metin bağlantısı — alt çizgi büyür */ .link-underline { position: relative; display: inline-block; } .link-underline::after { content: ""; position: absolute; left: 0; bottom: -3px; width: 100%; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--e-out); } .link-underline:hover::after { transform: scaleX(1); transform-origin: left; } /* ========================================================================== 4. Kartlar & 3D ========================================================================== */ .card { position: relative; background: #fff; border-radius: var(--r-lg); border: 1px solid var(--c-line); box-shadow: var(--sh-sm); transition: transform .6s var(--e-out), box-shadow .6s var(--e-out), border-color .5s var(--e-soft); } .card:hover { transform: translateY(-8px); box-shadow: var(--sh-lg); border-color: rgba(83,178,183,.35); } /* Kenarlığı degrade olan kart */ .card-gradient-border { position: relative; background: #fff; border-radius: var(--r-lg); } .card-gradient-border::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: var(--g-brand); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .5s var(--e-soft); } .card-gradient-border:hover::before { opacity: 1; } /* 3D tilt sahnesi */ .tilt-scene { perspective: 1100px; } .tilt { transform-style: preserve-3d; transition: transform .7s var(--e-out), box-shadow .7s var(--e-out); will-change: transform; } .tilt-layer { transform: translateZ(38px); transition: transform .7s var(--e-out); } .tilt-layer-deep { transform: translateZ(70px); } .tilt-glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; background: radial-gradient(600px circle at var(--gx,50%) var(--gy,50%), rgba(255,255,255,.5), transparent 42%); transition: opacity .45s var(--e-soft); mix-blend-mode: overlay; } .tilt-scene:hover .tilt-glare { opacity: 1; } /* 3D çevirmeli kart */ .flip { perspective: 1400px; } .flip-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .95s var(--e-io); } .flip:hover .flip-inner, .flip.is-flipped .flip-inner { transform: rotateY(180deg); } .flip-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: inherit; overflow: hidden; } .flip-back { transform: rotateY(180deg); } /* Yüzen 3D küre */ .orb { position: absolute; border-radius: 50%; background: radial-gradient(circle at 30% 26%, rgba(255,255,255,.92), rgba(255,255,255,0) 42%), var(--orb, var(--g-iris)); box-shadow: inset -14px -18px 34px rgba(13,31,51,.28), inset 12px 14px 30px rgba(255,255,255,.32), 0 28px 60px -22px rgba(18,40,63,.45); will-change: transform; } .orb-teal { --orb: linear-gradient(135deg, #53b2b7, #286c84); } .orb-lilac { --orb: linear-gradient(135deg, #b19db8, #7f87b1); } .orb-gold { --orb: linear-gradient(135deg, #e4ca9a, #c79a5f); } .orb-petrol { --orb: linear-gradient(135deg, #286c84, #12283f); } /* Cam levha (3D katman hissi) */ .pane-3d { border-radius: var(--r-xl); background: linear-gradient(150deg, rgba(255,255,255,.5), rgba(255,255,255,.12)); border: 1px solid rgba(255,255,255,.55); box-shadow: 0 40px 90px -34px rgba(18,40,63,.5), inset 0 1px 0 rgba(255,255,255,.7); backdrop-filter: blur(6px); } /* İkon rozetleri */ .icon-badge { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 20px; font-size: 1.7rem; position: relative; flex: none; transition: transform .6s var(--e-spring), box-shadow .6s var(--e-out); } .icon-badge::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 1px 0 rgba(255,255,255,.55); pointer-events: none; } .card:hover .icon-badge, .group:hover .icon-badge { transform: translateY(-4px) rotate(-6deg) scale(1.06); } .ib-teal { background: linear-gradient(140deg, rgba(83,178,183,.2), rgba(40,108,132,.14)); color: var(--c-petrol-500); } .ib-iris { background: linear-gradient(140deg, rgba(102,113,157,.2), rgba(84,106,156,.14)); color: var(--c-iris-600); } .ib-lilac { background: linear-gradient(140deg, rgba(177,157,184,.24), rgba(152,139,177,.14)); color: var(--c-lilac-600); } .ib-gold { background: linear-gradient(140deg, rgba(228,202,154,.32), rgba(199,154,95,.16)); color: var(--c-gold-600); } .ib-petrol { background: linear-gradient(140deg, rgba(40,108,132,.2), rgba(18,40,63,.12)); color: var(--c-petrol-800); } /* ========================================================================== 5. Scroll reveal ========================================================================== */ [data-reveal] { opacity: 0; transition: opacity .95s var(--e-out), transform 1.05s var(--e-out), filter .95s var(--e-out), clip-path 1.1s var(--e-io); transition-delay: var(--rv-delay, 0ms); will-change: opacity, transform; } [data-reveal="up"] { transform: translate3d(0, 46px, 0); } [data-reveal="down"] { transform: translate3d(0, -38px, 0); } [data-reveal="left"] { transform: translate3d(-56px, 0, 0); } [data-reveal="right"] { transform: translate3d(56px, 0, 0); } [data-reveal="scale"] { transform: scale(.9); } [data-reveal="zoom"] { transform: scale(1.12); filter: blur(6px); } [data-reveal="blur"] { filter: blur(14px); transform: translate3d(0, 24px, 0); } [data-reveal="rise3d"] { transform: perspective(1200px) rotateX(14deg) translate3d(0, 60px, 0); transform-origin: bottom; } [data-reveal="tiltL"] { transform: perspective(1200px) rotateY(-16deg) translate3d(-40px,0,0); } [data-reveal="tiltR"] { transform: perspective(1200px) rotateY(16deg) translate3d(40px,0,0); } [data-reveal="curtain"]{ clip-path: inset(0 0 100% 0); transform: translate3d(0,18px,0); } [data-reveal="wipe"] { clip-path: inset(0 100% 0 0); } [data-reveal].is-in { opacity: 1; filter: blur(0); transform: none; clip-path: inset(0 0 0 0); } /* Satır satır beliren başlık */ .line-mask { display: block; overflow: hidden; padding-bottom: .1em; } .line-mask > span { display: block; transform: translateY(105%); transition: transform 1.05s var(--e-out); transition-delay: var(--rv-delay, 0ms); } .is-in .line-mask > span, .line-mask.is-in > span { transform: translateY(0); } /* Harf harf beliren başlık (JS böler) */ .char { display: inline-block; transform: translateY(.75em) rotate(4deg); opacity: 0; transition: transform .85s var(--e-out), opacity .85s var(--e-out); } .is-in .char { transform: none; opacity: 1; } /* ========================================================================== 6. Preloader / intro ========================================================================== */ #preloader { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: var(--g-deep); transition: opacity .9s var(--e-out), visibility .9s; } #preloader.is-done { opacity: 0; visibility: hidden; } #preloader .pl-inner { text-align: center; position: relative; z-index: 2; } #preloader .pl-logo { width: 130px; height: auto; margin: 0 auto 26px; filter: drop-shadow(0 22px 46px rgba(0,0,0,.5)); animation: plLogo 2.6s var(--e-io) infinite; } @keyframes plLogo { 0%,100% { transform: translateY(0) scale(1) rotate(0deg); } 50% { transform: translateY(-14px) scale(1.05) rotate(-3deg); } } #preloader .pl-ring { position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: 320px; height: 320px; border-radius: 50%; border: 1px solid rgba(255,255,255,.10); } #preloader .pl-ring::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid transparent; border-top-color: var(--c-teal-400); border-right-color: var(--c-gold-400); animation: plSpin 1.5s linear infinite; } @keyframes plSpin { to { transform: rotate(360deg); } } #preloader .pl-bar { width: 220px; height: 2px; background: rgba(255,255,255,.14); border-radius: 99px; overflow: hidden; margin: 0 auto; } #preloader .pl-fill { height: 100%; width: 0%; background: var(--g-brand); background-size: 200%; transition: width .35s var(--e-out); } #preloader .pl-pct { font-variant-numeric: tabular-nums; } /* Perde açılışı */ .curtain { position: fixed; inset: 0; z-index: 9998; pointer-events: none; display: grid; grid-template-columns: repeat(5, 1fr); } .curtain span { background: var(--c-petrol-950); transform-origin: top; } .curtain.is-open span { animation: curtainUp 1.15s var(--e-io) forwards; } @keyframes curtainUp { to { transform: scaleY(0); } } /* ========================================================================== 7. Header ========================================================================== */ /* Header HER ZAMAN okunur bir zemine sahiptir. Önceki saydam hâli, koyu hero görselinin üzerinde koyu metinle çakışıyor ve menü okunmuyordu. Artık zemin kalıcı; kaydırınca yalnızca yoğunlaşıyor. */ .site-header { position: fixed; top: 0; inset-inline: 0; z-index: 90; background: var(--glass-bg); backdrop-filter: blur(16px) saturate(165%); -webkit-backdrop-filter: blur(16px) saturate(165%); border-bottom: 1px solid transparent; transition: background-color .55s var(--e-out), box-shadow .55s var(--e-out), border-color .55s var(--e-out), transform .6s var(--e-out); } .site-header.is-stuck { background: var(--glass-bg); border-bottom-color: var(--b-line); box-shadow: 0 12px 34px -22px rgba(18,40,63,.45); } html[data-theme="dark"] .site-header.is-stuck { box-shadow: 0 14px 40px -22px rgba(0,0,0,.75); } .site-header.is-hidden { transform: translateY(-102%); } /* --- Logo: eskisinin ~2 katı, belirgin --- */ .brand-logo { width: 80px; height: 80px; object-fit: contain; flex: none; transition: transform .7s var(--e-spring), filter .5s var(--e-soft); } @media (min-width: 640px) { .brand-logo { width: 88px; height: 88px; } } @media (min-width: 1024px) { .brand-logo { width: 104px; height: 104px; } } .brand:hover .brand-logo { transform: scale(1.06) rotate(-5deg); } .brand-name { font-family: "Fraunces", serif; font-weight: 500; letter-spacing: -.02em; font-size: 1.42rem; line-height: 1; color: var(--t-strong); display: block; } .brand-sub { display: block; margin-top: .42rem; font-size: .625rem; letter-spacing: .2em; text-transform: uppercase; color: var(--c-petrol-500); } html[data-theme="dark"] .brand-sub { color: var(--c-teal-400); } @media (min-width: 1024px) { .brand-name { font-size: 1.6rem; } .brand-sub { font-size: .66rem; } } /* Tema düğmesi */ .theme-toggle { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; border: 1px solid var(--b-line); background: var(--s-raised); color: var(--t-strong); font-size: 1.15rem; overflow: hidden; transition: border-color .4s var(--e-soft), transform .5s var(--e-spring), background-color .4s var(--e-soft); } .theme-toggle:hover { transform: translateY(-2px); border-color: var(--c-teal-500); } .theme-toggle i { position: absolute; transition: transform .6s var(--e-spring), opacity .4s var(--e-soft); } .theme-toggle .ico-sun { transform: translateY(0) rotate(0); opacity: 1; } .theme-toggle .ico-moon { transform: translateY(130%) rotate(-70deg); opacity: 0; } html[data-theme="dark"] .theme-toggle .ico-sun { transform: translateY(-130%) rotate(70deg); opacity: 0; } html[data-theme="dark"] .theme-toggle .ico-moon { transform: translateY(0) rotate(0); opacity: 1; } /* Okuma ilerleme çizgisi */ .read-progress { position: absolute; left: 0; bottom: 0; height: 2px; width: 0%; background: var(--g-brand); transition: width .12s linear; } /* Nav bağlantısı */ .nav-link { position: relative; padding: .55rem .2rem; font-weight: 600; font-size: .93rem; color: var(--c-ink-soft); transition: color .35s var(--e-soft); } .nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px; background: var(--g-brand); transform: scaleX(0); transform-origin: right; transition: transform .5s var(--e-out); } .nav-link:hover, .nav-link.is-active { color: var(--c-petrol-900); } .nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); transform-origin: left; } /* Mega menü */ .mega { transform-origin: top center; box-shadow: var(--sh-lg); } .mega-item { display: flex; gap: .9rem; padding: .8rem; border-radius: var(--r-md); transition: background-color .35s var(--e-soft), transform .45s var(--e-out); } .mega-item:hover { background: var(--c-sand); transform: translateX(5px); } /* Hamburger */ .burger { width: 26px; height: 16px; position: relative; } .burger span { position: absolute; left: 0; height: 2px; width: 100%; border-radius: 2px; background: var(--t-strong); transition: transform .5s var(--e-out), opacity .3s var(--e-soft), width .4s var(--e-out); } .burger span:nth-child(1) { top: 0; } .burger span:nth-child(2) { top: 7px; width: 70%; } .burger span:nth-child(3) { top: 14px; } .burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .burger.is-open span:nth-child(2) { opacity: 0; transform: translateX(-12px); } .burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Mobil çekmece — kademeli giriş */ .drawer-item { opacity: 0; transform: translateX(28px); transition: opacity .6s var(--e-out), transform .6s var(--e-out); } .drawer-open .drawer-item { opacity: 1; transform: none; } /* ========================================================================== 8. Hero slider ========================================================================== */ .hero { position: relative; min-height: 100svh; overflow: hidden; background: var(--c-petrol-950); } .slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 1.5s var(--e-io), visibility 1.5s; } .slide.is-active { opacity: 1; visibility: visible; } .slide-media { position: absolute; inset: 0; overflow: hidden; } .slide-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.16); transition: transform 9s linear, filter 1.6s var(--e-out); filter: saturate(.85) contrast(1.02); } .slide.is-active .slide-media img { transform: scale(1.0); } /* Ken Burns — 7 sn boyunca */ .slide-scrim { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(13,31,51,.92) 0%, rgba(13,31,51,.72) 38%, rgba(13,31,51,.34) 66%, rgba(13,31,51,.55) 100%), linear-gradient(to top, rgba(13,31,51,.85), transparent 45%); } .slide-tint { position: absolute; inset: 0; mix-blend-mode: soft-light; opacity: .55; } /* İçerik: kademeli giriş/çıkış */ .slide-content > * { opacity: 0; transform: translateY(38px); transition: opacity .9s var(--e-out), transform 1.05s var(--e-out); } .slide.is-active .slide-content > * { opacity: 1; transform: none; } .slide.is-active .slide-content > *:nth-child(1) { transition-delay: .30s; } .slide.is-active .slide-content > *:nth-child(2) { transition-delay: .42s; } .slide.is-active .slide-content > *:nth-child(3) { transition-delay: .54s; } .slide.is-active .slide-content > *:nth-child(4) { transition-delay: .66s; } .slide.is-active .slide-content > *:nth-child(5) { transition-delay: .78s; } /* Hero portresi — kendi giriş animasyonu */ .slide-portrait { opacity: 0; transform: translate3d(48px, 0, 0) scale(.94); transition: opacity 1.1s var(--e-out), transform 1.3s var(--e-out); } .slide.is-active .slide-portrait { opacity: 1; transform: none; transition-delay: .45s; } /* Slider kontrolleri */ .slider-dot { position: relative; height: 3px; width: 54px; border-radius: 99px; background: rgba(255,255,255,.24); overflow: hidden; transition: width .6s var(--e-out), background-color .4s var(--e-soft); } .slider-dot:hover { background: rgba(255,255,255,.4); } .slider-dot.is-active { width: 96px; } .slider-dot .dot-fill { position: absolute; inset: 0; width: 0%; background: linear-gradient(90deg, var(--c-teal-400), var(--c-gold-400)); border-radius: 99px; } .slider-dot.is-active .dot-fill { animation: dotFill 7s linear forwards; } .slider-dot.is-paused .dot-fill { animation-play-state: paused; } @keyframes dotFill { from { width: 0%; } to { width: 100%; } } .slider-arrow { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; border: 1px solid rgba(255,255,255,.24); color: #fff; background: rgba(255,255,255,.05); backdrop-filter: blur(10px); transition: background-color .45s var(--e-soft), transform .5s var(--e-out), border-color .45s var(--e-soft); } .slider-arrow:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.55); transform: scale(1.08); } .slider-arrow:active { transform: scale(.95); } /* Kaydır göstergesi */ .scroll-hint { width: 26px; height: 44px; border: 1.5px solid rgba(255,255,255,.4); border-radius: 99px; position: relative; } .scroll-hint::after { content: ""; position: absolute; top: 8px; left: 50%; translate: -50% 0; width: 4px; height: 8px; border-radius: 99px; background: #fff; animation: scrollDot 2s var(--e-io) infinite; } @keyframes scrollDot { 0%{opacity:0;transform:translate(-50%,0)} 30%{opacity:1} 60%{opacity:1;transform:translate(-50%,16px)} 100%{opacity:0;transform:translate(-50%,20px)} } /* Particle katmanı */ #particles, .particle-canvas { position: absolute; inset: 0; pointer-events: none; z-index: 2; } /* ========================================================================== 9. Marquee (kayan şerit) ========================================================================== */ .marquee { display: flex; overflow: hidden; user-select: none; gap: var(--mq-gap, 0px); } .marquee__track { flex: none; display: flex; align-items: center; gap: var(--mq-gap, 3rem); min-width: 100%; animation: mq var(--mq-dur, 42s) linear infinite; padding-right: var(--mq-gap, 3rem); } .marquee--reverse .marquee__track { animation-direction: reverse; } .marquee:hover .marquee__track { animation-play-state: paused; } @keyframes mq { to { transform: translateX(-100%); } } .marquee-band { position: relative; overflow: hidden; background: var(--g-deep); } .marquee-band .mq-word { font-family: "Fraunces", serif; font-size: clamp(1.4rem, 3.4vw, 2.6rem); font-weight: 500; color: rgba(255,255,255,.92); white-space: nowrap; letter-spacing: -.02em; } .marquee-band .mq-word.is-outline { color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.42); } .marquee-band .mq-sep { color: var(--c-gold-400); font-size: 1.1rem; } /* Logo şeridi */ .logo-strip img, .logo-strip .logo-chip { filter: grayscale(1); opacity: .48; transition: filter .5s var(--e-soft), opacity .5s var(--e-soft), transform .5s var(--e-out); } .logo-strip img:hover, .logo-strip .logo-chip:hover { filter: none; opacity: 1; transform: scale(1.06); } /* ========================================================================== 10. Galeri & Lightbox ========================================================================== */ .gal-item { position: relative; overflow: hidden; border-radius: var(--r-lg); cursor: pointer; transform: translateZ(0); transition: transform .8s var(--e-out), box-shadow .8s var(--e-out), opacity .5s var(--e-soft); } .gal-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--e-out), filter 1s var(--e-out); } .gal-item:hover { box-shadow: var(--sh-lg); } .gal-item:hover img { transform: scale(1.09); filter: saturate(1.1); } .gal-item .gal-veil { position: absolute; inset: 0; opacity: 0; background: linear-gradient(to top, rgba(13,31,51,.88), rgba(13,31,51,.15) 55%, transparent); transition: opacity .6s var(--e-soft); } .gal-item:hover .gal-veil { opacity: 1; } .gal-item .gal-cap { transform: translateY(18px); opacity: 0; transition: transform .6s var(--e-out), opacity .5s var(--e-soft); } .gal-item:hover .gal-cap { transform: none; opacity: 1; } .gal-item.is-hidden { opacity: 0; transform: scale(.9); pointer-events: none; position: absolute; visibility: hidden; } .filter-pill { padding: .55rem 1.2rem; border-radius: 99px; font-weight: 600; font-size: .87rem; color: var(--c-ink-soft); border: 1px solid var(--c-line); background: #fff; transition: all .4s var(--e-out); } .filter-pill:hover { border-color: rgba(83,178,183,.5); color: var(--c-petrol-800); transform: translateY(-2px); } .filter-pill.is-active { background: var(--c-petrol-900); color: #fff; border-color: transparent; box-shadow: var(--sh-md); } .lightbox-img { animation: lbIn .6s var(--e-out); } @keyframes lbIn { from { opacity: 0; transform: scale(.94) translateY(16px); } to { opacity: 1; transform: none; } } /* ========================================================================== 11. Carousel (sürüklenebilir) ========================================================================== */ .drag-rail { display: flex; gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; cursor: grab; padding-bottom: .5rem; } .drag-rail::-webkit-scrollbar { display: none; } .drag-rail.is-dragging { cursor: grabbing; scroll-snap-type: none; } .drag-rail.is-dragging * { pointer-events: none; } .drag-rail > * { scroll-snap-align: center; flex: none; } /* ========================================================================== 12. Yorumlar ========================================================================== */ .quote-mark { font-family: "Fraunces", serif; font-size: 8rem; line-height: .6; color: var(--c-gold-400); opacity: .22; } .testimonial-card { transition: opacity .8s var(--e-out), transform .8s var(--e-out), filter .8s var(--e-out); } .testimonial-card.is-off { opacity: 0; transform: translateY(28px) scale(.97); filter: blur(4px); position: absolute; inset: 0; pointer-events: none; } .star { color: var(--c-gold-500); } /* ========================================================================== 13. Akordiyon / SSS ========================================================================== */ .acc-item { border-bottom: 1px solid var(--c-line); transition: background-color .4s var(--e-soft); } .acc-btn { transition: color .35s var(--e-soft); } .acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .65s var(--e-io); } .acc-panel.is-open { grid-template-rows: 1fr; } .acc-panel > div { overflow: hidden; } .acc-icon { transition: transform .55s var(--e-spring), color .4s var(--e-soft); } .acc-item.is-open .acc-icon { transform: rotate(135deg); color: var(--c-teal-500); } /* ========================================================================== 14. Süreç / timeline ========================================================================== */ .timeline-line { position: absolute; left: 50%; translate: -50% 0; top: 0; width: 2px; height: 100%; background: linear-gradient(180deg, transparent, var(--c-line) 8%, var(--c-line) 92%, transparent); } .timeline-line .tl-fill { position: absolute; inset-inline: 0; top: 0; height: var(--tl, 0%); background: var(--g-brand); transition: height .25s linear; } .step-node { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #fff; border: 1.5px solid var(--c-line); font-weight: 700; color: var(--c-petrol-600); box-shadow: var(--sh-sm); transition: all .6s var(--e-out); } .step-node.is-on { background: var(--g-brand); color: #fff; border-color: transparent; box-shadow: var(--sh-glow-teal); transform: scale(1.1); } /* ========================================================================== 15. Form ========================================================================== */ .field { position: relative; } .field input, .field textarea, .field select { width: 100%; padding: 1.05rem 1.1rem .55rem; border-radius: var(--r-md); border: 1.5px solid var(--c-line); background: #fff; color: var(--c-ink); font-size: .95rem; transition: border-color .4s var(--e-soft), box-shadow .4s var(--e-soft), background-color .4s var(--e-soft); } .field textarea { padding-top: 1.5rem; resize: vertical; min-height: 128px; } .field label { position: absolute; left: 1.1rem; top: 1rem; font-size: .95rem; color: var(--c-ink-mute); pointer-events: none; transform-origin: left top; transition: transform .35s var(--e-out), color .35s var(--e-soft); } .field input:focus, .field textarea:focus, .field select:focus { border-color: var(--c-teal-500); box-shadow: 0 0 0 4px rgba(83,178,183,.14); outline: none; } .field input:focus + label, .field input:not(:placeholder-shown) + label, .field textarea:focus + label, .field textarea:not(:placeholder-shown) + label { transform: translateY(-.62rem) scale(.76); color: var(--c-petrol-500); } .field select + label { transform: translateY(-.62rem) scale(.76); } /* ========================================================================== 16. Footer ========================================================================== */ .site-footer { position: relative; background: var(--g-deep); color: rgba(255,255,255,.76); overflow: hidden; } .site-footer h4, .site-footer h3 { color: #fff; } .footer-link { position: relative; display: inline-flex; align-items: center; gap: .5rem; color: rgba(255,255,255,.66); font-size: .92rem; transition: color .35s var(--e-soft), transform .45s var(--e-out), padding-left .45s var(--e-out); } .footer-link::before { content: ""; width: 0; height: 1px; background: var(--c-gold-400); transition: width .45s var(--e-out); } .footer-link:hover { color: #fff; } .footer-link:hover::before { width: 14px; } .social-btn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; border: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.8); font-size: 1.15rem; transition: all .5s var(--e-out); position: relative; overflow: hidden; } .social-btn::before { content: ""; position: absolute; inset: 0; background: var(--g-brand); transform: translateY(101%); transition: transform .5s var(--e-out); } .social-btn i, .social-btn [class*="ph-"] { position: relative; z-index: 1; } .social-btn:hover { color: #fff; border-color: transparent; transform: translateY(-4px); } .social-btn:hover::before { transform: translateY(0); } /* Büyük hayalet logo yazısı */ .footer-ghost { font-family: "Fraunces", serif; font-weight: 500; letter-spacing: -.04em; font-size: clamp(4rem, 16vw, 15rem); line-height: .82; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.075); user-select: none; pointer-events: none; white-space: nowrap; } /* ========================================================================== 17. Yüzen aksiyonlar ========================================================================== */ .fab { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; box-shadow: var(--sh-lg); transition: transform .5s var(--e-spring), box-shadow .5s var(--e-out), opacity .5s var(--e-soft); } .fab:hover { transform: translateY(-5px) scale(1.06); } .fab.is-off { opacity: 0; transform: translateY(18px) scale(.85); pointer-events: none; } .pulse-ring::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid currentColor; animation: pulseRing 2.4s var(--e-out) infinite; } @keyframes pulseRing { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(1.7); opacity: 0; } } /* ========================================================================== 18. Ambient animasyonlar ========================================================================== */ @keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-22px); } } @keyframes floatXY { 0%,100% { transform: translate(0,0) rotate(0); } 33% { transform: translate(18px,-16px) rotate(4deg); } 66% { transform: translate(-14px,12px) rotate(-3deg); } } @keyframes spinSlow { to { transform: rotate(360deg); } } @keyframes breathe { 0%,100% { transform: scale(1); opacity: .55; } 50% { transform: scale(1.14); opacity: .85; } } @keyframes shimmer { to { background-position: 200% 0; } } .anim-float { animation: floatY 7s var(--e-io) infinite; } .anim-float-2 { animation: floatY 9s var(--e-io) infinite reverse; } .anim-drift { animation: floatXY 16s var(--e-io) infinite; } .anim-spin { animation: spinSlow 34s linear infinite; } .anim-spin-rev{ animation: spinSlow 46s linear infinite reverse; } .anim-breathe { animation: breathe 8s var(--e-io) infinite; } .delay-1 { animation-delay: -1.5s } .delay-2 { animation-delay: -3s } .delay-3 { animation-delay: -4.5s } .delay-4 { animation-delay: -6s } .shimmer-text { background: linear-gradient(90deg, var(--c-ink) 0%, var(--c-teal-500) 25%, var(--c-gold-500) 50%, var(--c-ink) 75%); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: shimmer 6s linear infinite; } /* Dönen yazı (kelime değişimi) */ .rotator { display: inline-grid; vertical-align: bottom; } .rotator > span { grid-area: 1/1; opacity: 0; transform: translateY(.5em) rotateX(-40deg); transition: opacity .6s var(--e-out), transform .7s var(--e-out); } .rotator > span.is-on { opacity: 1; transform: none; } /* Sayaç */ .counter { font-variant-numeric: tabular-nums; } /* ========================================================================== 19. Yardımcılar & duyarlılık ========================================================================== */ .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; } .aspect-portrait { aspect-ratio: 3 / 4; } .aspect-video-x { aspect-ratio: 16 / 10; } img { max-width: 100%; } .img-fallback { background: var(--g-brand-soft), var(--c-sand); background-blend-mode: normal; } @media (max-width: 767px) { :root { --header-h: 72px; } .footer-ghost { -webkit-text-stroke-width: .5px; } .orb { display: none; } .aura { filter: blur(60px); } } /* ========================================================================== 20b. MAKALE TİPOGRAFİSİ — blog yazıları ve yasal metinler ========================================================================== */ .blog-body { color: var(--t-body); font-size: 1.05rem; line-height: 1.78; } .blog-body > * + * { margin-top: 1.35rem; } .blog-body h2 { font-family: "Fraunces", serif; font-weight: 500; letter-spacing: -.02em; font-size: clamp(1.5rem, 3vw, 1.95rem); line-height: 1.25; color: var(--t-strong); margin-top: 3rem; margin-bottom: 1.1rem; scroll-margin-top: calc(var(--header-h) + 24px); position: relative; padding-left: 1.1rem; } .blog-body h2::before { content: ""; position: absolute; left: 0; top: .18em; bottom: .18em; width: 3px; border-radius: 3px; background: var(--g-brand); } .blog-body h2:first-child { margin-top: 0; } .blog-body h3 { font-family: "Fraunces", serif; font-weight: 500; font-size: clamp(1.18rem, 2.2vw, 1.35rem); line-height: 1.35; color: var(--t-strong); margin-top: 2.1rem; margin-bottom: .7rem; scroll-margin-top: calc(var(--header-h) + 24px); } .blog-body p { margin-top: 1.1rem; } .blog-body p:first-child { margin-top: 0; } .blog-body .lead { font-size: 1.18rem; line-height: 1.68; color: var(--t-strong); font-weight: 500; margin-bottom: 1.8rem; padding-bottom: 1.6rem; border-bottom: 1px solid var(--b-line); } .blog-body strong { color: var(--t-strong); font-weight: 700; } .blog-body em { font-style: italic; } .blog-body a { color: var(--c-petrol-500); font-weight: 600; text-decoration: underline; text-decoration-color: var(--c-teal-400); text-underline-offset: 3px; text-decoration-thickness: 1.5px; transition: color .35s var(--e-soft), text-decoration-color .35s var(--e-soft); } .blog-body a:hover { color: var(--c-teal-600); text-decoration-color: var(--c-gold-500); } html[data-theme="dark"] .blog-body a { color: var(--c-teal-300); } .blog-body ul, .blog-body ol { margin-top: 1.1rem; padding-left: 0; } .blog-body ul > li, .blog-body ol > li { position: relative; padding-left: 1.75rem; margin-top: .68rem; } .blog-body ul > li::before { content: ""; position: absolute; left: .38rem; top: .68em; width: 6px; height: 6px; border-radius: 50%; background: var(--c-teal-500); } .blog-body ol { counter-reset: liste; } .blog-body ol > li { counter-increment: liste; } .blog-body ol > li::before { content: counter(liste); position: absolute; left: 0; top: .06em; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--g-brand); color: #fff; font-size: .68rem; font-weight: 800; line-height: 1.25rem; text-align: center; } .blog-body li > ul { margin-top: .5rem; } .blog-body blockquote { margin: 2rem 0; padding: 1.5rem 1.75rem; border-radius: var(--r-md); background: var(--s-alt); border-left: 3px solid var(--c-gold-500); font-family: "Fraunces", serif; font-size: 1.18rem; line-height: 1.6; color: var(--t-strong); } .blog-body blockquote cite { display: block; margin-top: .8rem; font-family: "Manrope", sans-serif; font-size: .85rem; font-style: normal; color: var(--t-mute); font-weight: 600; } .blog-body code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .86em; padding: .16em .45em; border-radius: 6px; background: var(--s-alt); color: var(--c-petrol-500); border: 1px solid var(--b-line); } html[data-theme="dark"] .blog-body code { color: var(--c-teal-300); } /* Vurgu kutusu */ .blog-body .not-uyari { margin: 2rem 0; padding: 1.4rem 1.6rem; border-radius: var(--r-lg); background: rgba(213, 178, 124, .12); border: 1px solid rgba(199, 154, 95, .28); font-size: .97rem; line-height: 1.7; } .blog-body .not-uyari > * + * { margin-top: .8rem; } .blog-body .not-uyari ul { margin-top: .6rem; } .blog-body .not-uyari li::before { background: var(--c-gold-600); } /* Tablo */ .blog-body .tablo-sarici { overflow-x: auto; margin: 1.6rem 0; -webkit-overflow-scrolling: touch; } .blog-body table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: .92rem; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--b-line); } .blog-body th { text-align: left; padding: .85rem 1rem; font-weight: 700; background: var(--s-alt); color: var(--t-strong); font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; } .blog-body td { padding: .85rem 1rem; border-top: 1px solid var(--b-line); vertical-align: top; } .blog-body tbody tr:nth-child(even) td { background: rgba(0,0,0,.015); } html[data-theme="dark"] .blog-body tbody tr:nth-child(even) td { background: rgba(255,255,255,.02); } .blog-body figure { margin: 2rem 0; } .blog-body figure img { border-radius: var(--r-lg); width: 100%; } .blog-body figcaption { margin-top: .8rem; font-size: .85rem; color: var(--t-mute); text-align: center; } .blog-body hr { margin: 2.6rem 0; border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--b-line-2), transparent); } /* Kaynakça */ .blog-body .kaynakca { margin-top: 2.6rem; padding-top: 1.6rem; border-top: 1px solid var(--b-line); font-size: .87rem; color: var(--t-mute); line-height: 1.7; } .blog-body .kaynakca p { margin-top: .5rem; } .blog-body .kaynakca strong { color: var(--t-body); } @media (max-width: 640px) { .blog-body { font-size: 1rem; } .blog-body .lead { font-size: 1.08rem; } .blog-body h2 { padding-left: .9rem; } } /* ========================================================================== 21. DARK TEMA — Tailwind yardımcı sınıf eşlemeleri Tailwind CDN sabit renkler üretir; karanlık temada bu sınıfları token'lara bağlıyoruz. Yalnızca AÇIK yüzey olarak kullanılanlar dönüştürülür — koyu bölümlerdeki bg-white/5…/15 gibi ince örtüler olduğu gibi bırakılır (zaten koyu zemin üzerindeler). ========================================================================== */ /* Sayfa ve bölüm zeminleri */ html[data-theme="dark"] .bg-ivory { background-color: var(--s-base) !important; } html[data-theme="dark"] .bg-sand { background-color: var(--s-alt) !important; } html[data-theme="dark"] .bg-mist { background-color: var(--s-sunken) !important; } /* Yükseltilmiş yüzeyler */ html[data-theme="dark"] .bg-white, html[data-theme="dark"] .bg-white\/70, html[data-theme="dark"] .bg-white\/85, html[data-theme="dark"] .\!bg-white { background-color: var(--s-raised) !important; } /* Metin */ html[data-theme="dark"] .text-petrol-900 { color: var(--t-strong) !important; } html[data-theme="dark"] .\!text-petrol-900 { color: var(--t-strong) !important; } html[data-theme="dark"] .text-petrol-900\/75 { color: rgba(233,239,245,.80) !important; } html[data-theme="dark"] .text-petrol-900\/68 { color: rgba(233,239,245,.74) !important; } html[data-theme="dark"] .text-petrol-900\/65 { color: rgba(233,239,245,.72) !important; } html[data-theme="dark"] .text-petrol-900\/62 { color: rgba(233,239,245,.70) !important; } html[data-theme="dark"] .text-petrol-900\/60 { color: rgba(233,239,245,.68) !important; } html[data-theme="dark"] .text-petrol-900\/58 { color: rgba(233,239,245,.66) !important; } html[data-theme="dark"] .text-petrol-900\/55 { color: rgba(233,239,245,.64) !important; } html[data-theme="dark"] .text-petrol-900\/50 { color: rgba(233,239,245,.58) !important; } html[data-theme="dark"] .text-petrol-900\/45 { color: rgba(233,239,245,.52) !important; } html[data-theme="dark"] .text-petrol-900\/40 { color: rgba(233,239,245,.48) !important; } html[data-theme="dark"] .text-petrol-900\/35 { color: rgba(233,239,245,.42) !important; } html[data-theme="dark"] .text-petrol-800 { color: #cfe0ea !important; } html[data-theme="dark"] .text-petrol-700 { color: var(--c-teal-400) !important; } /* Kenarlıklar */ html[data-theme="dark"] .border-petrol-900\/8, html[data-theme="dark"] .border-petrol-900\/10, html[data-theme="dark"] .\!border-petrol-900\/10 { border-color: var(--b-line) !important; } html[data-theme="dark"] .border-petrol-900\/12, html[data-theme="dark"] .border-petrol-900\/15, html[data-theme="dark"] .\!border-petrol-900\/12, html[data-theme="dark"] .\!border-petrol-900\/15 { border-color: var(--b-line-2) !important; } html[data-theme="dark"] .divide-petrol-900\/8 > * { border-color: var(--b-line) !important; } /* Açık ton rozetleri okunur hâle getirilir */ html[data-theme="dark"] .bg-teal-100 { background-color: rgba(83,178,183,.16) !important; } html[data-theme="dark"] .bg-iris-100 { background-color: rgba(102,113,157,.18) !important; } html[data-theme="dark"] .bg-lilac-100 { background-color: rgba(162,149,183,.18) !important; } html[data-theme="dark"] .bg-gold-100 { background-color: rgba(213,178,124,.15) !important; } html[data-theme="dark"] .bg-petrol-100{ background-color: rgba(94,139,164,.16) !important; } html[data-theme="dark"] .text-teal-700 { color: var(--c-teal-300) !important; } html[data-theme="dark"] .text-iris-700 { color: #b2bbd6 !important; } html[data-theme="dark"] .text-lilac-700 { color: #cfc4da !important; } html[data-theme="dark"] .text-gold-700 { color: var(--c-gold-300) !important; } html[data-theme="dark"] .bg-gold-100\/60 { background-color: rgba(213,178,124,.12) !important; } html[data-theme="dark"] .border-gold-300\/40 { border-color: rgba(228,202,154,.28) !important; } /* Bileşen düzeyi karanlık uyarlamalar */ html[data-theme="dark"] .card { background: var(--s-raised); border-color: var(--b-line); } html[data-theme="dark"] .card-gradient-border { background: var(--s-raised); } html[data-theme="dark"] .glass { background: var(--glass-bg); border-color: var(--glass-br); } html[data-theme="dark"] .filter-pill { background: var(--s-raised); color: var(--t-body); border-color: var(--b-line); } html[data-theme="dark"] .filter-pill.is-active { background: var(--c-teal-500); color: #08161f; } html[data-theme="dark"] .step-node { background: var(--s-raised); color: var(--c-teal-300); border-color: var(--b-line); } html[data-theme="dark"] .field input, html[data-theme="dark"] .field textarea, html[data-theme="dark"] .field select { background: var(--s-raised); color: var(--t-strong); border-color: var(--b-line); } html[data-theme="dark"] .field label { color: var(--t-mute); } html[data-theme="dark"] .btn-outline { color: var(--t-strong); border-color: var(--b-line-2); } html[data-theme="dark"] .btn-outline::before { background: var(--c-teal-500); } html[data-theme="dark"] .btn-outline:hover { color: #08161f; } html[data-theme="dark"] .btn-ink { background: var(--c-teal-500); color: #08161f; } html[data-theme="dark"] .acc-item { border-bottom-color: var(--b-line); } html[data-theme="dark"] .quote-mark { opacity: .3; } html[data-theme="dark"] .bg-dots { background-image: radial-gradient(circle at 1px 1px, var(--dot-col) 1px, transparent 0); } html[data-theme="dark"] .bg-grid { background-image: linear-gradient(to right, rgba(147,220,220,.06) 1px, transparent 1px), linear-gradient(to bottom, rgba(147,220,220,.06) 1px, transparent 1px); } html[data-theme="dark"] .section-fade-top, html[data-theme="dark"] .section-fade-bottom { --tw-gradient-from: var(--s-base); } html[data-theme="dark"] .wave-divider { color: var(--s-base) !important; } html[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--s-alt); } html[data-theme="dark"] ::-webkit-scrollbar-thumb { border-color: var(--s-alt); } html[data-theme="dark"] .img-fallback { background: var(--g-brand-soft), var(--s-alt); } /* Hero altındaki açılma degradesi tema ile uyumlu olmalı */ html[data-theme="dark"] .hero-fade { background: linear-gradient(to top, var(--s-base), transparent); } .hero-fade { background: linear-gradient(to top, var(--s-base), transparent); } /* Header artık opak; hero içeriği altına kaymasın */ .hero { padding-top: 0; } .slide-body { padding-top: var(--header-h); } /* ========================================================================== 22. Responsive ince ayar ========================================================================== */ @media (max-width: 380px) { .brand-logo { width: 70px; height: 70px; } :root { --header-h: 90px; } } @media (max-width: 1023px) { .mega { display: none !important; } } /* Yatay taşmayı garantiye al */ html, body { max-width: 100%; } .marquee, .drag-rail, .container-x { max-width: 100vw; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; } .line-mask > span { transform: none !important; } .char { opacity: 1 !important; transform: none !important; } } /* Yazdırma */ @media print { .site-header, .site-footer, #preloader, .fab, .curtain, #particles { display: none !important; } body { background: #fff; } }