/* Novia Spa — koyu sinematik arayüz * * Not: bu sürüm hallmark kısıtlamaları altında değil. Parallax, pinned * bölümler, split-text ve smooth scroll bilinçli olarak var. Erişilebilirlik * tarafı (odak halkası, kontrast, dokunma hedefi, prefers-reduced-motion) * pazarlığa açık değil ve korunuyor. */ @import url("tokens.css"); /* ══ Temel ══════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } html, body { overflow-x: clip; margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--nav-h); background: var(--color-bg); } body { background: var(--color-bg); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { display: block; max-width: 100%; height: auto; } p { margin: 0; } ul { margin: 0; padding: 0; list-style: none; } address { font-style: normal; } h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: var(--weight-display); font-style: normal; line-height: var(--leading-display); letter-spacing: var(--tracking-display); overflow-wrap: anywhere; min-width: 0; } a { color: inherit; } :focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; border-radius: var(--radius-sm); } ::selection { background: var(--color-accent); color: var(--color-accent-ink); } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .skip { position: fixed; inset-inline-start: -9999px; inset-block-start: 0; z-index: var(--z-loader); padding: var(--space-sm) var(--space-md); background: var(--color-accent); color: var(--color-accent-ink); } .skip:focus { inset-inline-start: var(--space-md); inset-block-start: var(--space-md); } /* ══ Yerleşim ═══════════════════════════════════════════════════════ */ .wrap { width: 100%; max-width: var(--wrap-max); margin-inline: auto; padding-inline: var(--pad-inline); } .section { position: relative; padding-block: var(--space-4xl); } .section--tall { padding-block: var(--space-5xl); } .section--flush { padding-block: 0; } .eyebrow { font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-accent); } .rule { block-size: var(--rule-hair); background: var(--color-rule); border: 0; margin: 0; } /* ══ Film grain + vinyet ════════════════════════════════════════════ Düşük çözünürlüklü kaynağı "kasıtlı film dokusu"na çeviren katman. Tek sabit eleman, kaydırmada yeniden boyanmaz. */ .grain { position: fixed; inset: -50%; z-index: var(--z-grain); pointer-events: none; opacity: 0.055; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); will-change: transform; } @media (prefers-reduced-motion: no-preference) { .grain { animation: grainShift 8s steps(6) infinite; } } @keyframes grainShift { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -2%); } 80% { transform: translate(3%, 1%); } 100% { transform: translate(0, 0); } } /* ══ Açılış perdesi ═════════════════════════════════════════════════ */ /* Perde yalnızca hâlâ yükleniyor işaretliyken görünür. JS hiç çalışmazsa is-loading sınıfı da hiç eklenmez ve perde asla belirmez — yani sayfayı kilitleyebilecek bir katman değil. */ .loader { display: none; } html.is-loading .loader { position: fixed; inset: 0; z-index: var(--z-loader); display: grid; place-items: center; background: var(--color-bg); transition: opacity var(--dur-long) var(--ease-out); } .loader__mark { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-display); letter-spacing: 0.06em; color: var(--color-ink); overflow: clip; } .loader__mark span { display: block; } .loader__bar { position: absolute; inset-block-end: 0; inset-inline-start: 0; block-size: 2px; inline-size: 0; background: var(--color-accent); transition: inline-size var(--dur-xlong) var(--ease-out); } .loader.is-done { opacity: 0; pointer-events: none; } .loader.is-done .loader__bar { inline-size: 100%; } /* ══ Nav ════════════════════════════════════════════════════════════ */ .nav { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: var(--z-nav); padding-block: var(--space-md); transition: padding-block var(--dur-morph) var(--ease-out), background-color var(--dur-morph) var(--ease-out), backdrop-filter var(--dur-morph) var(--ease-out); } .nav__inner { display: flex; align-items: center; gap: var(--space-lg); width: 100%; max-width: var(--wrap-max); min-block-size: 52px; margin-inline: auto; padding-inline: var(--pad-inline); border-radius: var(--radius-none); background-color: transparent; backdrop-filter: blur(0); box-shadow: none; transform: translateY(0); transition: max-width var(--dur-morph) var(--ease-out), padding-inline var(--dur-morph) var(--ease-out), border-radius var(--dur-morph) var(--ease-out), background-color var(--dur-morph) var(--ease-out), backdrop-filter var(--dur-morph) var(--ease-out), box-shadow var(--dur-morph) var(--ease-out), transform var(--dur-morph) var(--ease-out); } .nav.is-floating { padding-block: var(--space-sm); } .nav.is-floating .nav__inner { max-width: var(--nav-pill-max); padding-inline: var(--space-lg); border-radius: var(--radius-pill); background-color: var(--color-glass); backdrop-filter: saturate(1.4) blur(20px); box-shadow: var(--shadow-pill); } .nav__wordmark { font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--weight-display-b); letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none; white-space: nowrap; margin-inline-end: auto; } .nav__links { display: none; gap: var(--space-lg); } .nav__links a { position: relative; display: inline-flex; align-items: center; min-block-size: 44px; font-size: var(--text-sm); color: var(--color-ink-2); text-decoration: none; white-space: nowrap; transition: color var(--dur-micro) var(--ease-out); } .nav__links a::after { content: ""; position: absolute; inset-block-end: 12px; inset-inline: 0; block-size: 1px; background: var(--color-accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--dur-short) var(--ease-out); } .nav__links a:hover { color: var(--color-ink); } .nav__links a:hover::after { transform: scaleX(1); } .nav__actions { display: flex; align-items: center; gap: var(--space-xs); } .nav__icon { display: none; align-items: center; justify-content: center; inline-size: 44px; block-size: 44px; color: var(--color-ink-2); border-radius: var(--radius-pill); transition: color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out); } .nav__icon:hover { color: var(--color-ink); background-color: var(--color-bg-3); } .nav__icon svg { inline-size: 19px; block-size: 19px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } /* Sosyal, iletişimden bir kademe geride: rengi daha soluk, ikonu bir tık küçük. Hover'da normale gelir — bulunabilir ama öne çıkmaz. */ .nav__icon--sosyal { color: var(--color-muted); } .nav__icon--sosyal svg { inline-size: 17px; block-size: 17px; } .nav__ayrac { inline-size: var(--rule-hair); block-size: 18px; margin-inline: var(--space-2xs); background: var(--color-rule); flex: 0 0 auto; display: none; } .nav__menu { display: inline-flex; align-items: center; justify-content: center; inline-size: 44px; block-size: 44px; padding: 0; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-ink); cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out); } .nav__menu:hover { background-color: var(--color-bg-3); } .nav__menu-bars { display: block; inline-size: 20px; } .nav__menu-bars i { display: block; block-size: 1.5px; background: currentColor; transition: transform var(--dur-short) var(--ease-out); } .nav__menu-bars i + i { margin-block-start: 5px; } .nav__menu[aria-expanded="true"] .nav__menu-bars i:first-child { transform: translateY(3.25px) rotate(45deg); } .nav__menu[aria-expanded="true"] .nav__menu-bars i:last-child { transform: translateY(-3.25px) rotate(-45deg); } /* Mobilde nav'daki Randevu butonu gizlenir: alttaki sabit çubuk zaten aynı eylemi taşıyor ve ikisi birlikte 320px'de hamburger'ı ekran dışına itiyor. */ .nav__actions > .btn { display: none; } @media (min-width: 62rem) { .nav__links { display: flex; } .nav__icon { display: inline-flex; } .nav__ayrac { display: block; } .nav__menu { display: none; } .nav__actions > .btn { display: inline-flex; } } /* ══ Butonlar ═══════════════════════════════════════════════════════ */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-block-size: 48px; padding: var(--space-sm) var(--space-xl); border: var(--rule-hair) solid var(--color-accent); border-radius: var(--radius-pill); background: transparent; color: var(--color-accent); font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-medium); letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer; overflow: clip; isolation: isolate; transition: color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); } /* Dolgu alttan yükselir — tek net sinyal, renk sıçraması değil. */ .btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--color-accent); transform: translateY(101%); transition: transform var(--dur-short) var(--ease-out); } .btn:hover { color: var(--color-accent-ink); } .btn:hover::before { transform: translateY(0); } .btn:active { transform: scale(0.98); } .btn--solid { background: var(--color-accent); color: var(--color-accent-ink); } .btn--solid::before { background: var(--color-ink); } .btn--solid:hover { color: var(--color-bg); } .btn--ghost { border-color: var(--color-rule); color: var(--color-ink); } .btn--ghost::before { background: var(--color-ink); } .btn--ghost:hover { color: var(--color-bg); border-color: var(--color-ink); } .btn--esnek { flex: 1 1 auto; min-inline-size: 0; } .btn__ikon { inline-size: 17px; block-size: 17px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } /* ══ Metin açılışı (split reveal) ═══════════════════════════════════ */ .mask { display: block; overflow: clip; } .has-motion .mask > span { display: block; transform: translateY(105%); opacity: 0; } .has-motion .is-in .mask > span, .has-motion .mask.is-in > span { transform: translateY(0); opacity: 1; transition: transform var(--dur-long) var(--ease-mask), opacity var(--dur-long) var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); } .has-motion .fade { opacity: 0; transform: translateY(20px); } .has-motion .fade.is-in, .has-motion .is-in .fade { opacity: 1; transform: none; transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); } /* ══ Hero ═══════════════════════════════════════════════════════════ */ .hero { position: relative; min-block-size: 100svh; display: flex; align-items: flex-end; overflow: clip; isolation: isolate; } .hero__media { position: absolute; inset: 0; z-index: -2; overflow: clip; } .hero__img { inline-size: 100%; block-size: 100%; object-fit: cover; transform: scale(1.14); transform-origin: 55% 45%; } .has-motion .hero__img { animation: kenburns var(--dur-xlong) var(--ease-out) both; animation-duration: 2600ms; } @keyframes kenburns { from { transform: scale(1.14); } to { transform: scale(1.02); } } /* Üstten aşağı koyulaşan perde: yazının okunurluğu fotoğrafın parlak bölgelerine bağlı kalmasın. Koyu temada bu perde zaten tasarımın parçası. */ .hero__veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, var(--color-bg) 2%, var(--color-veil) 42%, transparent 78%), radial-gradient(120% 80% at 50% 0%, transparent 40%, var(--color-scrim) 100%); } .hero__inner { width: 100%; max-width: var(--wrap-max); margin-inline: auto; padding-inline: var(--pad-inline); padding-block-end: clamp(var(--space-2xl), 9vh, var(--space-4xl)); } .hero__eyebrow { margin-block-end: var(--space-lg); } .hero__title { font-size: var(--text-hero); font-weight: var(--weight-display); line-height: 0.88; letter-spacing: -0.035em; max-width: 15ch; } .hero__title em { font-style: normal; color: var(--color-accent); } .hero__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg) var(--space-2xl); margin-block-start: var(--space-2xl); } .hero__note { max-width: 34ch; color: var(--color-ink-2); font-size: var(--text-sm); } .hero__cue { position: absolute; inset-block-end: var(--space-lg); inset-inline-end: var(--pad-inline); display: none; align-items: center; gap: var(--space-sm); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); } .hero__cue i { display: block; inline-size: 1px; block-size: 48px; background: linear-gradient(to bottom, var(--color-accent), transparent); } @media (min-width: 62rem) { .hero__cue { display: flex; } } /* ══ Manifesto ══════════════════════════════════════════════════════ */ .manifesto__text { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--weight-display); line-height: 1.12; letter-spacing: -0.02em; max-width: 22ch; } .manifesto__text b { font-weight: var(--weight-display); color: var(--color-accent); } .manifesto__aside { margin-block-start: var(--space-2xl); max-width: var(--measure); color: var(--color-ink-2); } /* ══ Katmanlı fotoğraf kompozisyonu ═════════════════════════════════ Tam genişlik yerine çerçeveli ve üst üste binen düzen. Daha küçük gösterilen görsel daha keskin görünür — kaynak 1376px olduğu için bu doğrudan "kaba duruyor" sorununa çalışıyor. */ .duo { display: grid; gap: var(--space-lg); grid-template-columns: minmax(0, 1fr); align-items: end; } @media (min-width: 48rem) { .duo { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-xl); } .duo__a { grid-column: 1 / span 7; } .duo__b { grid-column: 9 / span 4; margin-block-end: var(--space-4xl); } .duo--flip .duo__a { grid-column: 6 / span 7; order: 2; } .duo--flip .duo__b { grid-column: 1 / span 4; order: 1; } } .frame { position: relative; overflow: clip; border-radius: var(--radius-md); background: var(--color-bg-2); isolation: isolate; } /* --py parallax kaydırmasını motion.js yazar; scale reveal'den gelir. İkisi tek transform'da birleşiyor ki birbirini ezmesinler. */ .frame img { inline-size: 100%; block-size: 100%; object-fit: cover; transform: translate3d(0, var(--py, 0px), 0) scale(1.06); transition: transform var(--dur-xlong) var(--ease-out); } .frame.is-in img { transform: translate3d(0, var(--py, 0px), 0) scale(1); } /* Vinyet: kenarları söndürüp gözü merkeze çeker, kaynağın zayıf kenarlarını bastırır. */ .frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(115% 85% at 50% 45%, transparent 52%, var(--color-scrim) 100%); mix-blend-mode: multiply; } /* Maske açılışı: görsel alttan yukarı doğru ortaya çıkar. */ .has-motion .frame::before { content: ""; position: absolute; inset: 0; z-index: 2; background: var(--color-bg); transform-origin: 50% 100%; transition: transform var(--dur-xlong) var(--ease-mask); } .has-motion .frame.is-in::before { transform: scaleY(0); } .frame--tall { aspect-ratio: 3 / 4; } .frame--wide { aspect-ratio: 16 / 10; } .frame--square { aspect-ratio: 1 / 1; } .caption { margin-block-start: var(--space-sm); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); } /* ══ Hizmetler — üst üste yığılan sabit kartlar ═════════════════════ */ .stack { position: relative; } .stack__item { position: sticky; inset-block-start: calc(var(--nav-h) + var(--space-lg)); margin-block-end: var(--space-2xl); } .card { display: grid; gap: 0; grid-template-columns: minmax(0, 1fr); overflow: clip; border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-md); background: var(--color-bg-2); box-shadow: var(--shadow-lift); } @media (min-width: 48rem) { .card { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: stretch; } } .card__media { position: relative; overflow: clip; min-block-size: 240px; } .card__media img { inline-size: 100%; block-size: 100%; object-fit: cover; transform: scale(1.04); transition: transform var(--dur-xlong) var(--ease-out); } .card:hover .card__media img { transform: scale(1.09); } .card__body { display: flex; flex-direction: column; gap: var(--space-md); padding: clamp(var(--space-lg), 4vw, var(--space-2xl)); } .card__index { font-size: var(--text-xs); letter-spacing: var(--tracking-wide); color: var(--color-accent); font-variant-numeric: tabular-nums; } .card__title { font-size: var(--text-xl); font-weight: var(--weight-display); } .card__text { color: var(--color-ink-2); max-width: 46ch; } .card__meta { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-block-start: auto; padding-block-start: var(--space-md); border-block-start: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); color: var(--color-muted); font-variant-numeric: tabular-nums; } .card__meta b { color: var(--color-ink); font-weight: var(--weight-medium); } /* ══ Ücretler — krem ters bölüm ═════════════════════════════════════ */ .invert { background: var(--color-bg-cream); color: var(--color-ink-dark); } .invert .eyebrow { color: var(--color-accent-deep); } .invert .rule { background: oklch(78% 0.015 60); } /* Fiyat menüsü — restoran menüsü mantığı: ad, aradaki noktalı çizgi, fiyat. Altı kalem için tablodan daha zarif ve mobilde daha az yer tutar. */ .menu { display: flex; flex-direction: column; } .menu__satir { display: flex; align-items: baseline; gap: var(--space-md); padding-block: var(--space-lg); border-block-end: var(--rule-hair) solid oklch(82% 0.015 60); } .menu__satir:first-child { border-block-start: var(--rule-hair) solid var(--color-ink-dark); } .menu__ad { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-display); line-height: 1.1; letter-spacing: -0.015em; flex: 0 1 auto; min-inline-size: 0; } /* Süre — adın yanında, gövde fontunda ve küçük: fiyatla yarışmasın. */ .menu__sure { display: inline-block; margin-inline-start: var(--space-sm); font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-label); text-transform: uppercase; color: oklch(45% 0.012 50); white-space: nowrap; vertical-align: 0.25em; } /* Noktalı bağ — adla fiyat arasındaki boşluğu doldurur, göz kayar. */ .menu__cizgi { flex: 1 1 auto; min-inline-size: var(--space-lg); align-self: end; margin-block-end: 0.35em; border-block-end: 1px dotted oklch(72% 0.015 58); } .menu__fiyat { flex: 0 0 auto; font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-display-b); line-height: 1.1; /* adla aynı — gövdenin 1.6'sını miras alırsa satır boşuna uzuyor */ font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--color-accent-deep); } /* Dar ekranda ad + süre + fiyat tek satıra sığmıyor ve satır yükseklikleri düzensizleşiyor. Tipografiyi bir kademe düşürmek diziyi hizada tutuyor. */ @media (max-width: 34rem) { .menu__ad, .menu__fiyat { font-size: var(--text-lg); } .menu__sure { margin-inline-start: var(--space-xs); font-size: 0.68rem; } .menu__satir { padding-block: var(--space-md); gap: var(--space-sm); } } .menu__not { margin-block-start: var(--space-xl); max-width: 46ch; color: oklch(38% 0.012 48); } .menu__not b { color: var(--color-ink-dark); font-weight: var(--weight-medium); } /* ══ Ziyaret ════════════════════════════════════════════════════════ */ .visit { display: grid; gap: var(--space-2xl); grid-template-columns: minmax(0, 1fr); } @media (min-width: 48rem) { .visit { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .visit__block { min-width: 0; } .visit__lines { margin-block-start: var(--space-md); color: var(--color-ink-2); line-height: 1.9; } .visit__lines a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--color-rule-warm); transition: color var(--dur-micro) var(--ease-out), text-decoration-color var(--dur-micro) var(--ease-out); } .visit__lines a:hover { color: var(--color-accent); text-decoration-color: var(--color-accent); } .visit__contact { display: flex; flex-direction: column; } .visit__contact a { display: flex; align-items: center; min-block-size: 44px; inline-size: fit-content; white-space: nowrap; } /* ══ Marquee ════════════════════════════════════════════════════════ */ .marquee { display: flex; overflow: clip; border-block: var(--rule-hair) solid var(--color-rule); padding-block: var(--space-lg); user-select: none; } .marquee__track { display: flex; flex-shrink: 0; gap: var(--space-2xl); padding-inline-end: var(--space-2xl); white-space: nowrap; } @media (prefers-reduced-motion: no-preference) { .marquee__track { animation: marquee 34s linear infinite; } .marquee:hover .marquee__track { animation-play-state: paused; } } @keyframes marquee { to { transform: translateX(-100%); } } .marquee__item { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-display); color: var(--color-ink-2); } .marquee__item span { color: var(--color-accent); margin-inline-end: var(--space-2xl); } /* ══ Footer ═════════════════════════════════════════════════════════ */ .foot { padding-block: var(--space-4xl) var(--space-xl); } .foot__mega { font-family: var(--font-display); font-size: var(--text-mega); font-weight: var(--weight-display); line-height: 0.82; letter-spacing: -0.045em; color: var(--color-ink); } .foot__grid { display: grid; gap: var(--space-xl); grid-template-columns: minmax(0, 1fr); margin-block-start: var(--space-3xl); padding-block-start: var(--space-lg); border-block-start: var(--rule-hair) solid var(--color-rule); } @media (min-width: 48rem) { .foot__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .foot__col { min-width: 0; } .foot__lines { margin-block-start: var(--space-sm); color: var(--color-ink-2); font-size: var(--text-sm); line-height: 1.9; } .foot__lines a { text-decoration: none; transition: color var(--dur-micro) var(--ease-out); } .foot__lines a:hover { color: var(--color-accent); } .foot__contact { display: flex; flex-direction: column; } .foot__contact a { display: flex; align-items: center; min-block-size: 44px; inline-size: fit-content; white-space: nowrap; } /* ── Sosyal ─────────────────────────────────────────────────────── */ .sosyal { display: flex; flex-direction: column; margin-block-start: var(--space-sm); } .sosyal__link { display: flex; align-items: center; gap: var(--space-sm); min-block-size: 44px; inline-size: fit-content; color: var(--color-ink-2); font-size: var(--text-sm); text-decoration: none; white-space: nowrap; transition: color var(--dur-micro) var(--ease-out); } .sosyal__link:hover { color: var(--color-accent); } .sosyal__link svg { inline-size: 18px; block-size: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .foot__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-sm) var(--space-lg); margin-block-start: var(--space-2xl); padding-block-start: var(--space-md); border-block-start: var(--rule-hair) solid var(--color-rule-2); color: var(--color-muted); font-size: var(--text-xs); } /* ══ Drawer ═════════════════════════════════════════════════════════ */ .drawer { position: fixed; inset: 0; z-index: var(--z-drawer); background: var(--color-scrim); opacity: 0; transition: opacity var(--dur-short) var(--ease-in); } .drawer.is-open { opacity: 1; transition-timing-function: var(--ease-out); } .drawer__panel { position: absolute; inset-block-start: 0; inset-inline: 0; display: flex; flex-direction: column; padding: calc(var(--nav-h) + var(--space-lg)) var(--pad-inline) var(--space-2xl); background: var(--color-bg-2); border-block-end: var(--rule-hair) solid var(--color-rule); transform: translateY(-100%); transition: transform var(--dur-short) var(--ease-in); } .drawer.is-open .drawer__panel { transform: translateY(0); transition: transform var(--dur-long) var(--ease-out); } .drawer__link { display: flex; align-items: center; min-block-size: 56px; font-family: var(--font-display); font-size: var(--text-xl); text-decoration: none; white-space: nowrap; border-block-end: var(--rule-hair) solid var(--color-rule-2); } .drawer__link:last-of-type { border-block-end: 0; } /* Sosyal ikonlar navda mobilde gizli — menüde karşılıkları burada. */ .drawer__sosyal { display: flex; gap: var(--space-xl); margin-block-start: var(--space-lg); padding-block-start: var(--space-lg); border-block-start: var(--rule-hair) solid var(--color-rule); } /* ══ Sticky randevu çubuğu ══════════════════════════════════════════ */ .stickybar { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: var(--z-sticky); display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-sm) var(--pad-inline); padding-block-end: max(var(--space-sm), env(safe-area-inset-bottom)); background: var(--color-glass); backdrop-filter: saturate(1.4) blur(20px); border-block-start: var(--rule-hair) solid var(--color-rule); transform: translateY(101%); transition: transform var(--dur-long) var(--ease-out); } .stickybar.is-visible { transform: translateY(0); } /* .nav__icon masaüstünde açılıyor, sticky çubuk ise yalnızca mobilde var — bu yüzden çubuktaki telefon ikonu ayrıca görünür kılınmalı. */ .stickybar__ara { display: inline-flex; flex: 0 0 auto; border: var(--rule-hair) solid var(--color-rule); } @media (min-width: 62rem) { .stickybar { display: none; } } /* ══ Azaltılmış hareket ═════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 150ms !important; } .has-motion .mask > span, .has-motion .fade { opacity: 1; transform: none; } .has-motion .frame::before { display: none; } .has-motion .hero__img { animation: none; transform: scale(1.02); } .grain { animation: none; } .marquee__track { animation: none; } }