/* ========================================================================= Victor Sandberg — Organist & Pianist İKİ TEMA: açık (gündüz/Northwoods) + koyu (katedral gecesi). Tema, özniteliğiyle değişir — sağ alttaki düğme ve localStorage bunu yönetir. Tüm renkler :root değişkenlerinde. ========================================================================= */ :root{ /* — AÇIK TEMA: yumuşak Northwoods paleti — */ --t-head: #384a3e; /* başlıklar: koyu çam */ --t-body: #59604f; /* metin: yosun grisi */ --t-mute: #8b8d7d; /* soluk metin */ --acc: #b3822f; /* bal/pirinç vurgu */ --acc-hi: #cf9c4a; --pine: #4e6b52; /* çam yeşili ikinci vurgu */ --lake: #6f96a6; /* göl mavisi — küçük dokunuşlar */ --line: rgba(56,74,62,.18); --scrim: 247,243,234; /* panel perdesi RGB */ --card: 255,255,255; /* kart zemini RGB */ --card-a: .74; --input-bg: rgba(255,255,255,.85); --input-fc: #fff; --shadow: 84,84,52; /* gölge rengi RGB */ --cta-fg: #fff; --sun: rgba(255,244,214,.85); --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --ease: cubic-bezier(.22,.61,.36,1); } html[data-theme="dark"]{ /* — KOYU TEMA: organ-site-dark-v1'in paleti — */ --t-head: #f3efe6; --t-body: #cfc9bc; --t-mute: #a49c90; --acc: #d2a860; --acc-hi: #e2bd7c; --pine: #7d9b7f; --lake: #7fa5b3; --line: rgba(243,239,230,.15); --scrim: 6,6,8; --card: 20,19,26; --card-a: .58; --input-bg: rgba(255,255,255,.06); --input-fc: rgba(255,255,255,.10); --shadow: 0,0,0; --cta-fg: #17130c; --sun: rgba(210,168,96,.12); } *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ margin:0; background:#e9e4d6; color:var(--t-body); font-family:var(--sans); font-size:17px; font-weight:500; /* istek üzerine: bir tık daha kalın gövde */ line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; transition:background .5s; } html[data-theme="dark"] body{ background:#0b0b0d; } /* ---------- 3B sahne + gökyüzü ---------- */ .stage{ position:fixed; inset:0; z-index:0; pointer-events:none; background: radial-gradient(70% 46% at 68% 20%, var(--sun), transparent 68%), linear-gradient(180deg, #cfe3f2 0%, #e4ecf0 26%, #f6efdd 44%, #eee6d0 62%, #ddd5c0 100%); transition:background .6s; } html[data-theme="dark"] .stage{ background: radial-gradient(70% 46% at 68% 20%, var(--sun), transparent 68%), linear-gradient(180deg,#101016 0%,#0b0b0f 55%,#060608 100%); } .stage canvas{ display:block; width:100%; height:100%; position:relative; z-index:2; } /* Ufukta çam silüeti — Northwoods imzası */ .stage::after{ content:""; position:absolute; left:0; right:0; z-index:1; top:46%; height:120px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='120' viewBox='0 0 400 120'%3E%3Cg fill='%23496050'%3E%3Cpath d='M-2 120 L10 65 L22 120 Z'/%3E%3Cpath d='M22 120 L34 45 L46 120 Z'/%3E%3Cpath d='M48 120 L58 72 L68 120 Z'/%3E%3Cpath d='M72 120 L84 38 L96 120 Z'/%3E%3Cpath d='M100 120 L112 60 L124 120 Z'/%3E%3Cpath d='M126 120 L138 50 L150 120 Z'/%3E%3Cpath d='M154 120 L164 75 L174 120 Z'/%3E%3Cpath d='M178 120 L190 40 L202 120 Z'/%3E%3Cpath d='M206 120 L218 62 L230 120 Z'/%3E%3Cpath d='M232 120 L244 48 L256 120 Z'/%3E%3Cpath d='M260 120 L270 70 L280 120 Z'/%3E%3Cpath d='M286 120 L298 42 L310 120 Z'/%3E%3Cpath d='M314 120 L326 58 L338 120 Z'/%3E%3Cpath d='M340 120 L352 50 L364 120 Z'/%3E%3Cpath d='M368 120 L380 68 L392 120 Z'/%3E%3C/g%3E%3C/svg%3E"); background-repeat:repeat-x; background-size:auto 100%; opacity:.30; } html[data-theme="dark"] .stage::after{ opacity:.5; filter:brightness(.25); } /* WebGL yoksa: degrade zaten .stage'de, canvas gizle */ .stage-fallback{ display:none; } .no-webgl .stage canvas{ display:none; } .vignette{ position:absolute; inset:0; z-index:3; background:radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(84,68,44,.15) 100%); } html[data-theme="dark"] .vignette{ background:radial-gradient(120% 90% at 50% 45%, transparent 40%, rgba(0,0,0,.7) 100%); } /* ---------- Tema düğmesi ---------- */ .theme-toggle{ position:fixed; right:22px; bottom:22px; z-index:80; width:52px; height:52px; border-radius:50%; border:1px solid var(--line); cursor:pointer; background:rgba(var(--card), .85); backdrop-filter:blur(12px); color:var(--t-head); display:grid; place-items:center; box-shadow:0 8px 26px rgba(var(--shadow), .22); transition:transform .3s var(--ease), box-shadow .3s, background .4s, color .4s; } .theme-toggle:hover{ transform:translateY(-3px) rotate(15deg); box-shadow:0 14px 32px rgba(var(--shadow), .3); } .theme-toggle svg{ width:22px; height:22px; } .theme-toggle .i-moon{ display:block; } .theme-toggle .i-sun{ display:none; } html[data-theme="dark"] .theme-toggle .i-moon{ display:none; } html[data-theme="dark"] .theme-toggle .i-sun{ display:block; } /* ---------- Scroll ilerleme çubuğu ---------- */ .progress{ position:fixed; top:0; left:0; right:0; height:3px; z-index:60; } .progress span{ display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--acc),var(--acc-hi)); box-shadow:0 1px 6px rgba(179,130,47,.5); } /* ---------- Navigasyon ---------- */ .nav{ position:fixed; top:0; left:0; right:0; z-index:50; display:flex; align-items:center; justify-content:space-between; padding:18px clamp(20px,5vw,64px); opacity:0; transform:translateY(-12px); transition:opacity .5s var(--ease), transform .5s var(--ease), background .4s, backdrop-filter .4s, box-shadow .4s; pointer-events:none; } .nav.show{ opacity:1; transform:none; pointer-events:auto; } .nav.solid{ background:rgba(var(--scrim), .85); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); box-shadow:0 4px 24px rgba(var(--shadow), .07); } .nav-brand{ font-family:var(--serif); font-size:1.02rem; letter-spacing:.06em; color:var(--t-head); text-decoration:none; white-space:nowrap; } .nav-links{ display:flex; align-items:center; gap:clamp(12px,2vw,28px); } .nav-links a{ color:var(--t-body); text-decoration:none; font-weight:600; font-size:.8rem; letter-spacing:.11em; text-transform:uppercase; position:relative; padding:6px 0; transition:color .3s; } .nav-links a::after{ content:""; position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--acc); transition:width .35s var(--ease); } .nav-links a:hover{ color:var(--t-head); } .nav-links a:hover::after{ width:100%; } .nav-links a.nav-cta{ color:var(--cta-fg); background:var(--acc); padding:9px 18px; border-radius:3px; letter-spacing:.1em; } .nav-links a.nav-cta::after{ display:none; } .nav-links a.nav-cta:hover{ background:var(--t-head); color:var(--cta-fg); } .nav-toggle{ display:none; background:none; border:0; cursor:pointer; padding:10px; } .nav-toggle span{ display:block; width:24px; height:2px; background:var(--t-head); margin:5px 0; transition:transform .3s var(--ease); } .nav-toggle[aria-expanded="true"] span:first-child{ transform:translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:last-child{ transform:translateY(-7px) rotate(-45deg); } /* ---------- Bölüm düzeni ---------- */ main{ position:relative; z-index:10; } .panel{ position:relative; min-height:100svh; display:flex; align-items:center; padding:14vh clamp(20px,6vw,80px); } .panel[data-align="left"] .wrap{ margin-right:auto; } .panel[data-align="right"] .wrap{ margin-left:auto; text-align:right; } .panel[data-align="center"] .wrap{ margin:0 auto; text-align:center; } .panel::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; } .panel[data-align="left"]::before{ background:linear-gradient(90deg, rgba(var(--scrim),.94) 0%, rgba(var(--scrim),.72) 42%, transparent 78%); } .panel[data-align="right"]::before{ background:linear-gradient(270deg, rgba(var(--scrim),.94) 0%, rgba(var(--scrim),.72) 42%, transparent 78%); } .panel[data-align="center"]::before{ background:radial-gradient(70% 60% at 50% 50%, rgba(var(--scrim),.88) 0%, rgba(var(--scrim),.55) 55%, transparent 85%); } .panel-hero::before{ background:radial-gradient(62% 52% at 50% 52%, rgba(var(--scrim),.74) 0%, rgba(var(--scrim),.32) 48%, transparent 74%) !important; } .panel:has(.wide)::before{ background:linear-gradient(180deg, rgba(var(--scrim),.66) 0%, rgba(var(--scrim),.86) 30%, rgba(var(--scrim),.86) 100%); } .panel-contact::before{ background:linear-gradient(180deg, rgba(var(--scrim),.88) 0%, rgba(var(--scrim),.60) 52%, rgba(var(--scrim),.06) 100%) !important; } .wrap{ max-width:560px; width:100%; } .wrap.wide{ max-width:1080px; } .panel[data-align="right"] .wrap.wide, .panel[data-align="left"] .wrap.wide{ text-align:left; } /* ---------- Tipografi ---------- */ .eyebrow{ font-size:.74rem; letter-spacing:.28em; text-transform:uppercase; color:var(--acc); margin:0 0 22px; font-weight:700; } h1,h2,h3{ font-family:var(--serif); font-weight:400; line-height:1.08; margin:0 0 22px; color:var(--t-head); } .display{ font-size:clamp(2.9rem,9vw,6.4rem); letter-spacing:-.015em; line-height:.98; margin-bottom:28px; } h2{ font-size:clamp(1.9rem,4.4vw,3.2rem); letter-spacing:-.01em; } h3{ font-size:1.25rem; margin-bottom:10px; } p{ margin:0 0 18px; color:var(--t-body); } .lede{ font-size:clamp(1.05rem,1.7vw,1.3rem); color:var(--t-head); max-width:46ch; font-weight:500; } .lede.sm{ font-size:1.05rem; } .panel[data-align="center"] .lede{ margin-left:auto; margin-right:auto; } .panel[data-align="right"] .lede{ margin-left:auto; } .note{ font-size:.9rem; color:var(--t-mute); margin-top:26px; } /* ---------- Butonlar ---------- */ .actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:34px; } .panel[data-align="center"] .actions{ justify-content:center; } .panel[data-align="right"] .actions{ justify-content:flex-end; } .btn{ display:inline-block; text-decoration:none; cursor:pointer; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600; padding:15px 30px; border-radius:3px; border:1px solid transparent; transition:background .3s var(--ease), color .3s var(--ease), border-color .3s, transform .3s var(--ease), box-shadow .3s; font-family:var(--sans); } .btn-primary{ background:var(--acc); color:var(--cta-fg); box-shadow:0 6px 18px rgba(179,130,47,.28); } .btn-primary:hover{ background:var(--t-head); transform:translateY(-2px); } .btn-ghost{ border-color:var(--line); color:var(--t-head); background:rgba(var(--card),.4); } .btn-ghost:hover{ border-color:var(--acc); color:var(--acc); transform:translateY(-2px); } /* ---------- Hero scroll ipucu ---------- */ .scroll-cue{ position:absolute; bottom:34px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:12px; color:var(--t-mute); font-size:.66rem; letter-spacing:.3em; text-transform:uppercase; } .scroll-cue i{ display:block; width:2px; height:52px; background:linear-gradient(180deg,var(--acc),transparent); animation:cue 2.4s var(--ease) infinite; } @keyframes cue{ 0%{ transform:scaleY(.2); transform-origin:top; opacity:0 } 40%{ transform:scaleY(1); opacity:1 } 100%{ transform:scaleY(1); transform-origin:bottom; opacity:0 } } /* ---------- Rakamlar ---------- */ .facts{ list-style:none; display:flex; gap:38px; padding:0; margin:34px 0 0; flex-wrap:wrap; } .panel[data-align="right"] .facts{ justify-content:flex-end; } .facts li{ display:flex; flex-direction:column; } .facts b{ font-family:var(--serif); font-size:2.1rem; color:var(--acc); font-weight:400; line-height:1; } .facts span{ font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; color:var(--t-mute); margin-top:8px; } /* ---------- Kartlar ---------- */ .cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px; margin-top:34px; } .card{ background:rgba(var(--card), var(--card-a)); backdrop-filter:blur(10px); border:1px solid var(--line); border-radius:6px; padding:28px 26px; box-shadow:0 8px 26px rgba(var(--shadow),.08); transition:transform .45s var(--ease), border-color .45s, box-shadow .45s; } .card:hover{ transform:translateY(-6px); border-color:var(--acc); box-shadow:0 16px 38px rgba(var(--shadow),.14); } .card p{ font-size:.94rem; margin-bottom:0; } .price{ margin-top:16px !important; color:var(--acc) !important; font-size:.86rem !important; letter-spacing:.1em; font-weight:700; } .price.big{ font-family:var(--serif); font-size:2rem !important; letter-spacing:0; margin-top:6px !important; font-weight:400; } .tiers{ grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); } .tier{ text-align:center; position:relative; } .tier.feature{ border-color:var(--pine); } .tag{ position:absolute; top:-11px; left:50%; transform:translateX(-50%); background:var(--pine); color:#fff; font-size:.62rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; padding:5px 12px; border-radius:3px; white-space:nowrap; } /* ---------- Parçalar ---------- */ .tracks{ margin-top:34px; display:flex; flex-direction:column; gap:10px; } .track{ display:flex; align-items:center; gap:18px; text-align:left; padding:16px 20px; border:1px solid var(--line); border-radius:6px; background:rgba(var(--card), var(--card-a)); backdrop-filter:blur(10px); box-shadow:0 6px 20px rgba(var(--shadow),.07); transition:border-color .4s, box-shadow .4s, transform .4s var(--ease); } .track:hover{ border-color:var(--acc); transform:translateY(-2px); } .track div{ flex:1; min-width:0; } .track h3{ font-size:1.02rem; margin:0 0 3px; } .track p{ margin:0; font-size:.82rem; color:var(--t-mute); } .track .dur{ font-size:.8rem; color:var(--t-mute); font-variant-numeric:tabular-nums; } .play{ flex:none; width:42px; height:42px; border-radius:50%; border:1px solid var(--acc); background:rgba(var(--card),.5); cursor:pointer; display:grid; place-items:center; transition:background .3s, transform .3s var(--ease); } .play:hover{ background:rgba(179,130,47,.15); transform:scale(1.08); } .play i{ width:0; height:0; margin-left:3px; border-left:10px solid var(--acc); border-top:6px solid transparent; border-bottom:6px solid transparent; } /* ---------- YÜZEN FOTOĞRAFLAR ---------- Her bölümün kenarına yaslı kartlar. Kendi görünürlüğüyle tetiklenir (.in sınıfını site.js ekler), kenardan süzülerek girer, scroll ile kendi hızında kayar (parallax, --py). Gerçek fotoğraflar gelince sadece değişecek. data-side → left / right (hangi kenara yaslı) data-speed → parallax hızı (0.4 yavaş … 1.2 hızlı) --top → bölüm içindeki dikey konum, --tilt → eğim */ .ph-float{ position:absolute; margin:0; z-index:1; top:var(--top, 18%); width:clamp(150px, 17vw, 250px); transform:translateY(var(--py,0)) rotate(var(--tilt,0deg)); will-change:transform; } .ph-float[data-side="left"]{ left:max(-28px, -1.5vw); } .ph-float[data-side="right"]{ right:max(-28px, -1.5vw); } /* metin sütunu her zaman fotoğrafın üstünde kalsın */ .panel .wrap{ position:relative; z-index:2; } .ph-float .ph-in{ position:relative; border-radius:8px; overflow:hidden; border:1px solid var(--line); box-shadow:0 14px 40px rgba(var(--shadow),.18); background:rgba(var(--card), .9); transition:box-shadow .4s, transform 1s var(--ease), opacity 1s var(--ease), filter 1s var(--ease); } .ph-float:hover .ph-in{ box-shadow:0 22px 54px rgba(var(--shadow),.28); } .ph-float img{ display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; } .ph-float figcaption{ position:absolute; left:10px; bottom:10px; background:rgba(var(--scrim),.88); backdrop-filter:blur(8px); color:var(--t-head); font-size:.68rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; padding:6px 11px; border-radius:4px; opacity:0; transform:translateY(6px); transition:opacity .45s var(--ease) .55s, transform .45s var(--ease) .55s; } .ph-float.in figcaption{ opacity:1; transform:none; } /* giriş: kendi kenarından süzülür */ .ph-float[data-side="left"] .ph-in{ opacity:0; filter:blur(6px); transform:translateX(-90px) scale(.92) rotate(-2deg); } .ph-float[data-side="right"] .ph-in{ opacity:0; filter:blur(6px); transform:translateX(90px) scale(.92) rotate(2deg); } .ph-float.in .ph-in{ opacity:1; filter:none; transform:none; } /* ---------- Referanslar ---------- */ .quotes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px; margin-top:10px; } .quote{ margin:0; padding:30px 26px; text-align:left; border-left:3px solid var(--pine); background:rgba(var(--card), var(--card-a)); backdrop-filter:blur(10px); border-radius:0 6px 6px 0; box-shadow:0 8px 24px rgba(var(--shadow),.08); } .quote blockquote{ margin:0 0 16px; font-family:var(--serif); font-size:1.1rem; line-height:1.55; color:var(--t-head); } .quote figcaption{ font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--t-mute); font-weight:600; } /* ---------- Form ---------- */ .form{ margin-top:32px; display:flex; flex-direction:column; gap:16px; max-width:520px; } .form .row{ display:flex; gap:16px; flex-wrap:wrap; } .form .row label{ flex:1 1 190px; } .form label{ display:flex; flex-direction:column; gap:8px; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--t-mute); font-weight:700; } .form input,.form select,.form textarea{ font-family:var(--sans); font-size:.98rem; font-weight:500; color:var(--t-head); background:var(--input-bg); border:1px solid var(--line); border-radius:4px; padding:13px 14px; width:100%; transition:border-color .3s, background .3s, box-shadow .3s; } .form input:focus,.form select:focus,.form textarea:focus{ outline:none; border-color:var(--acc); background:var(--input-fc); box-shadow:0 0 0 3px rgba(179,130,47,.16); } .form textarea{ resize:vertical; } .form option{ background:#fff; color:#333; } html[data-theme="dark"] .form option{ background:#14131a; color:#f3efe6; } .form .btn{ align-self:flex-start; } .form-status{ font-size:.86rem; color:var(--acc); min-height:1.2em; margin:0; } .panel-contact .form{ margin-left:auto; margin-right:auto; text-align:left; background:rgba(var(--scrim),.8); backdrop-filter:blur(16px); border:1px solid var(--line); border-radius:8px; padding:26px; box-shadow:0 18px 48px rgba(var(--shadow),.15); } .panel-contact .socials{ justify-content:center; } .panel-contact .form .btn{ align-self:stretch; text-align:center; } /* ---------- Sosyal ikonlar + düz linkler ---------- */ a.plain{ color:var(--t-head); text-decoration:none; border-bottom:1px solid var(--acc); transition:color .3s; } a.plain:hover{ color:var(--acc); } .socials{ display:flex; gap:14px; margin-top:22px; } .socials a{ display:grid; place-items:center; width:44px; height:44px; border-radius:50%; border:1px solid var(--line); color:var(--t-body); background:rgba(var(--card),.5); transition:color .3s, border-color .3s, transform .3s var(--ease), background .3s; } .socials a:hover{ color:var(--cta-fg); border-color:var(--acc); transform:translateY(-3px); background:var(--acc); } .socials svg{ width:20px; height:20px; } /* ---------- Alt bilgi ---------- */ .foot{ position:relative; z-index:10; text-align:center; padding:60px 24px; border-top:1px solid var(--line); background:rgba(var(--scrim),.94); backdrop-filter:blur(10px); } .foot p{ margin:0; font-size:.84rem; color:var(--t-mute); } .foot-sm{ margin-top:8px !important; font-size:.76rem !important; opacity:.8; } /* ---------- Scroll ile beliren animasyonlar ---------- */ [data-r]{ opacity:0; transform:translateY(30px) scale(.985); filter:blur(5px); transition:opacity .7s var(--ease), transform .7s var(--ease), filter .7s var(--ease); } .reveal.in [data-r]{ opacity:1; transform:none; filter:none; } .reveal.in [data-r]:nth-child(1){ transition-delay:.00s } .reveal.in [data-r]:nth-child(2){ transition-delay:.07s } .reveal.in [data-r]:nth-child(3){ transition-delay:.14s } .reveal.in [data-r]:nth-child(4){ transition-delay:.21s } .reveal.in [data-r]:nth-child(5){ transition-delay:.28s } .reveal.in [data-r]:nth-child(6){ transition-delay:.35s } .cards [data-r]:nth-child(1){ transition-delay:.04s } .cards [data-r]:nth-child(2){ transition-delay:.12s } .cards [data-r]:nth-child(3){ transition-delay:.20s } .cards [data-r]:nth-child(4){ transition-delay:.28s } /* ---------- Mobil ---------- */ @media (max-width:820px){ body{ font-size:16px; } .panel{ padding:12vh 22px; } .panel[data-align="right"] .wrap, .panel[data-align="left"] .wrap{ text-align:left; margin:0; } .panel[data-align="right"] .actions, .panel[data-align="right"] .facts{ justify-content:flex-start; } .panel[data-align="right"] .lede{ margin-left:0; } .panel::before{ background:linear-gradient(180deg, rgba(var(--scrim),.55) 0%, rgba(var(--scrim),.88) 45%, rgba(var(--scrim),.88) 100%) !important; } /* Hero'da org görünür kalsın — telefonda beyaz perde orgu yutuyordu */ .panel-hero::before{ background:linear-gradient(180deg, rgba(var(--scrim),.20) 0%, rgba(var(--scrim),.42) 55%, rgba(var(--scrim),.60) 100%) !important; } .panel-contact::before{ background:linear-gradient(180deg, rgba(var(--scrim),.92) 0%, rgba(var(--scrim),.66) 55%, rgba(var(--scrim),.10) 100%) !important; } /* Mobilde fotoğraflar kenara asılı durmasın — akışa girer, metnin ÜSTÜNDE kendi satırında durur; hiçbir şeyin arkasında kalmaz. Parallax ve kenardan süzülme girişleri aynen çalışır. */ .panel{ flex-direction:column; justify-content:center; align-items:stretch; } .ph-float{ position:static; z-index:1; width:min(56vw, 220px); margin:0 0 20px; } .ph-float[data-side="left"]{ align-self:flex-start; } .ph-float[data-side="right"]{ align-self:flex-end; } .theme-toggle{ right:16px; bottom:16px; width:48px; height:48px; } .nav-toggle{ display:block; } .nav-links{ position:fixed; inset:0; flex-direction:column; justify-content:center; background:rgba(var(--scrim),.98); backdrop-filter:blur(20px); gap:26px; transform:translateY(-100%); transition:transform .5s var(--ease); } .nav-links.open{ transform:none; } .nav-links a{ font-size:1.05rem; } .nav{ z-index:70; } .nav-toggle{ position:relative; z-index:80; } } /* ---------- Hareket azaltma tercihi ---------- Animasyonlar site sahibinin isteğiyle her cihazda açık; bu tercihte yalnızca sayfa içi kaydırma yumuşatması kapanır. */ @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }