/* LUX Beauty — statik site. Tasarım dili: meech213.com yerleşiminden yeniden kodlandı. */
:root {
  --paper: #f5f4f1;
  --ink: #000;
  --menu-ink: rgba(20, 18, 18, .94);
  --menu-muted: rgba(20, 18, 18, .62);   /* kağıt zeminde 5:1 (WCAG AA) */
  --menu-hover: rgba(20, 18, 18, .68);
  --menu-line: rgba(20, 18, 18, .42);
  --label: #6b6b6b;                      /* kağıt zeminde 4,85:1 */
  --rule: rgba(20, 18, 18, .22);
  /* Logodaki kırmızı (logo.jpeg piksel ölçümü, medyan #ED2D22). Kağıt zeminde 3,8:1 →
     yalnız çizgi/ibre gibi metin dışı vurgu. Metin rengi gerekiyorsa --accent-ink (4,9:1, AA). */
  --accent: #ed2d22;
  --accent-ink: #cc271d;
  --display: "Forum", "Ceraph Roman", Georgia, serif;
  --body: "Albert Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --gutter: 1.75rem;
  --dial-w: min(80vw, 800px);
  --dial-h: min(40vw, 400px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 8.5rem; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.3;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
:where(a) { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: var(--gutter); top: -4rem; z-index: 300;
  background: var(--ink); color: var(--paper); padding: .75rem 1rem;
}
.skip-link:focus { top: .75rem; }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }

/* Sayfa geçişi. Gizleme yalnız JS çalışıyorsa (<head>'deki satır içi betik html'e .js ekler).
   main.js çalışınca .js-ok ekler; satır içi betik 2,5 sn içinde .js-ok görmezse .js'i kaldırır,
   böylece main.js yüklenemezse (404, engelleme) içerik ve [data-reveal] blokları görünür olur. */
.page { transition: opacity .6s ease; }
.js .page { opacity: 0; }
.js.is-ready .page { opacity: 1; }
.js.is-leaving .page { opacity: 0; transition-duration: .3s; }

/* ---------- Header ---------- */
.header { position: fixed; inset: 0 0 auto; z-index: 100; pointer-events: none; }
.header::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8.25rem;
  background: linear-gradient(to bottom, var(--paper) 0, var(--paper) 72%, rgba(245, 244, 241, 0) 100%);
  pointer-events: none;
}
.svc-index .header::before { display: none; }
.header-grid {
  position: relative; z-index: 1;
  /* minmax(0, 1fr): sağ sütundaki bağlantılar dar ekranda payını aşınca logo sola kaymasın */
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 2rem;
  padding: .75rem var(--gutter) 0;
}
.header a, .header button { pointer-events: auto; }
.tagline {
  position: absolute; left: .75rem; top: 1.1rem;
  font-family: var(--display); text-transform: uppercase;
  font-size: 1.15rem; line-height: .95; letter-spacing: -.02em;
  transform: rotate(-24deg); transform-origin: left top;
  text-align: center; pointer-events: auto; white-space: nowrap;
  margin-top: 2.6rem;
}
.tagline span { display: block; }
.tagline span + span { padding-left: 1.6rem; }
/* align-self: start: bağlantı yalnız logo görseli kadar (grid satırı sağdaki bağlantı sütunu kadar uzayınca
   görünmez alt şerit ana sayfadaki ayna durdur düğmesini örtüyordu, 1366×657) */
.logo { grid-column: 2; justify-self: center; align-self: start; display: block; line-height: 0; }
.logo__img { height: 72px; width: auto; max-width: none; }
.header-links {
  grid-column: 3; justify-self: end; list-style: none; padding: 0;
  text-align: right; white-space: nowrap;
}
.header-links a {
  display: inline-flex; align-items: center; justify-content: flex-end; min-height: 24px;
  text-transform: uppercase; font-size: .9rem; font-weight: 500; line-height: 1.3;
}
.header-links a:hover, .header-links a:focus-visible { color: var(--accent-ink); }

/* ---------- Footer + saat kadranı menü ---------- */
.footer { position: fixed; inset: auto 0 0; z-index: 50; pointer-events: none; }
.footer::before {
  content: ""; position: fixed; left: 0; right: 0; bottom: 0; z-index: 0;
  height: calc(.4 * var(--dial-h) + 5rem);
  background: linear-gradient(to top, var(--paper) 0, var(--paper) 72%, rgba(245, 244, 241, 0) 100%);
  pointer-events: none;
}
.footer-grid {
  display: flex; justify-content: space-between; align-items: flex-end;
  padding: 0 var(--gutter) .75rem;
}
.footer-text { font-size: .85rem; position: relative; z-index: 6; pointer-events: auto; background: var(--paper); box-shadow: 0 0 10px 10px var(--paper); }
.footer-text a:hover { color: var(--accent-ink); }
/* Ana sayfa ve şerit dikey kaymaz: tam genişlik solma kartların altını yıkıyordu; menüyü kadran elipsi korur */
.svc-index .footer::before { display: none; }
/* Sağ alt: adres + Instagram. 992–1279'da kadranın sağ alt yazısına yaklaşmasın diye iki satır, Instagram gizli */
.footer-text--adres { text-align: right; }
@media (max-width: 1279px) {
  .footer-adres span { display: block; }
  .footer-ig { display: none; }
}

.dial {
  position: fixed; left: 50%; bottom: calc(1.9rem - .16 * var(--dial-h));
  width: var(--dial-w); height: var(--dial-h); transform: translateX(-50%);
  z-index: 5; pointer-events: none; font-family: var(--display);
  text-transform: uppercase;
  /* Yuvalar (kadran kutusuna göre %; merkez pimi %50 / %84): 0 etkin, 1 sonraki, 2 karşı, 3 önceki.
     main.js geçişte bu değerleri okuyup yazıları pimin çevresinde döndürür. */
  --s0l: 64.5%; --s0t: 65.8%;
  --s1l: 72%;   --s1t: 81%;
  --s2l: 28.2%; --s2t: 81%;
  --s3l: 35.5%; --s3t: 65.8%;
  /* Kadran daraldıkça (768–991) yazı ve ibreler birlikte küçülür: masaüstündeki aralıklar korunur,
     ibre ucu etkin yazının altında, alt satır yazısının üstünde kalır. */
  --hour-len: calc(var(--dial-w) * .09); --hour-a: -38deg;
  --minute-len: calc(var(--dial-w) * .16); --minute-a: -20deg;
}
.dial::before {
  content: ""; position: absolute; left: 50%; top: 73%;
  width: 92%; height: 82%; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, var(--paper) 0%, var(--paper) 74%, rgba(245, 244, 241, .85) 84%, rgba(245, 244, 241, 0) 100%);
  border-radius: 50%; pointer-events: none;
}
.dial__list { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.dial__item {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap; pointer-events: auto;
  transition: opacity .5s;
}
.dial__item[data-slot="0"] { left: var(--s0l); top: var(--s0t); }
.dial__item[data-slot="1"] { left: var(--s1l); top: var(--s1t); }
.dial__item[data-slot="2"] { left: var(--s2l); top: var(--s2t); }
.dial__item[data-slot="3"] { left: var(--s3l); top: var(--s3t); }
.dial__item a {
  display: block; font-size: min(2rem, calc(var(--dial-w) / 25)); line-height: .9; letter-spacing: -.04em;
  color: var(--menu-muted); transition: color .24s;
  --pad-y: max(.45rem, calc((44px - .9em) / 2)); /* dokunma hedefi ≥ 44 px */
  padding: var(--pad-y) .3rem;
}
.dial__item a:hover, .dial__item a:focus-visible { color: var(--accent-ink); }
.dial__item a[aria-current="page"] { color: var(--menu-ink); position: relative; }
.dial__item a[aria-current="page"]::after {
  content: ""; position: absolute; left: .3rem; right: .3rem; bottom: calc(var(--pad-y) - .165em);
  height: 1.5px; background: var(--accent);
}
.dial__clock { position: absolute; inset: 0; pointer-events: none; }
.dial__hand {
  position: absolute; left: 50%; top: 84%; height: 1px;
  background: var(--menu-line); box-shadow: 0 0 0 .4px rgba(20, 18, 18, .18);
  transform-origin: 0 50%;
  transition: transform 1s cubic-bezier(.65, 0, .35, 1);
}
.dial__hand--hour { width: var(--hour-len); transform: translateY(-50%) rotate(var(--hour, var(--hour-a))); }
.dial__hand--minute {
  width: var(--minute-len); transform: translateY(-50%) rotate(var(--minute, var(--minute-a)));
  background: var(--accent); box-shadow: none;
}
.dial__pin {
  position: absolute; left: 50%; top: 84%; width: .3rem; height: .3rem;
  border-radius: 999px; background: var(--accent); transform: translate(-50%, -50%);
}

/* ---------- Ortak sayfa kabuğu ---------- */
.main { min-height: 100vh; }
.display { font-family: var(--display); font-weight: 400; }
/* Forum yalnız 400 ağırlıkta yüklenir: başlıklar tarayıcının sahte kalınıyla çizilmesin */
.detail-title, .about-h1, .prose h2, .lead, .quote, .cta, .strip-card__name, .strip-card__no { font-weight: 400; font-synthesis: none; }
.label {
  font-size: .85rem; font-weight: 500; text-transform: uppercase; color: var(--label);
}

/* Görsel yer tutucu (arşivde LUX görseli bulunamadı) */
.frame {
  position: relative; overflow: hidden; background: var(--tone, #8c7b6e);
  color: #fff;
}
.frame::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 20% 10%, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 60%),
    radial-gradient(90% 70% at 90% 100%, rgba(0, 0, 0, .22), rgba(0, 0, 0, 0) 70%);
  pointer-events: none;
}
.frame__mono {
  position: absolute; right: -.08em; bottom: -.22em; font-family: var(--display);
  font-size: 16rem; line-height: 1; color: rgba(255, 255, 255, .1);
  pointer-events: none; user-select: none;
}
.frame__cap {
  position: absolute; left: .9rem; bottom: .8rem; z-index: 2;
  font-size: .72rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: #fff;
}
/* Yer tutucu (fotoğrafsız hizmet): açık tonda da beyaz yazı ≥ 4,5:1 olsun diye hafif koyulaştırma */
.frame:not(.frame--photo) { background: linear-gradient(rgba(18, 14, 12, .18), rgba(18, 14, 12, .18)), var(--tone, #8c7b6e); }
/* Fotoğraflı kart: görsel kutuyu doldurur; üstünde isim yazan kartlarda okunurluk perdesi */
.frame--photo picture, .frame--photo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.frame--photo img { object-fit: cover; }
.frame--photo::after { display: none; }
/* İsim bandı perdesi (şerit kartı): üstte sayaç için koyulaşma, ortada ad için radyal perde */
.strip-card .frame::after {
  display: block; z-index: 1;
  background:
    linear-gradient(rgba(18, 14, 12, .3), rgba(18, 14, 12, 0) 16%),
    radial-gradient(70% 45% at 50% var(--scrim-y, 42%), rgba(18, 14, 12, var(--scrim-a, .55)), rgba(18, 14, 12, 0) 100%),
    linear-gradient(rgba(18, 14, 12, .1), rgba(18, 14, 12, .22));
}

/* ---------- Hizmetler: yatay şerit ---------- */
.strip {
  /* --pad-b: kadran elipsinin üst kenarı (.52 × kadran yüksekliği + pim payı) + 1rem.
     --cw: kart genişliği. Aralık, pencereye 20 px'ten fazla 4. kart girmeyecek kadar geniş:
     2 kart + 3 aralık + 40 px > pencere genişliği. */
  --pad-t: 7.4rem;   /* header bağlantıları (4 × 24 px) altında boşluk */
  --pad-b: calc(.52 * var(--dial-h) + 2.9rem);
  --cw: calc(min(100vh - var(--pad-t) - var(--pad-b), 46rem) * .8);
  height: 100vh; height: 100svh; overflow-x: auto; overflow-y: hidden;
  display: flex; align-items: center;
  gap: max(5.5rem, calc((100vw - 2 * var(--cw) - 40px) / 3 + 1rem));
  padding: var(--pad-t) var(--gutter) var(--pad-b) 0; scrollbar-width: none; perspective: 1600px;
  overscroll-behavior-x: contain;
}
@supports (height: 100svh) {
  .strip { --cw: calc(min(100svh - var(--pad-t) - var(--pad-b), 46rem) * .8); }
}
.strip::-webkit-scrollbar { display: none; }
.strip-card {
  flex: 0 0 auto; width: var(--cw); aspect-ratio: 4 / 5; height: auto;
  display: block; transform-style: preserve-3d; position: relative;
  transform: rotateY(var(--ry, -10deg)) rotateZ(var(--rz, 1deg));
  transition: transform .8s cubic-bezier(.2, .7, .2, 1);
}
.strip-card:first-child { margin-left: -2rem; }
.strip-card:hover, .strip-card:focus-visible { transform: rotateY(0deg) rotateZ(0deg) scale(1.01); }
.strip-card .frame { width: 100%; height: 100%; }
.strip-card__name {
  position: absolute; left: 50%; top: var(--name-top, 42%); z-index: 3; width: 110%;
  transform: translate(-50%, -50%) rotate(-30deg);
  font-family: var(--display); font-size: clamp(1.6rem, calc(var(--cw) * .11), 3.3rem);
  line-height: .95; text-align: center; color: #fff;
  text-shadow: 0 0 2px rgba(0, 0, 0, .5), 0 1px 3px rgba(0, 0, 0, .35), 0 2px 18px rgba(0, 0, 0, .4);
}
/* tasarim-t2-6: sayaç her fotoğrafta okunur — kağıt tonlu küçük etiket, koyu yazı (en kötü durumda ~14:1) */
.strip-card__no {
  position: absolute; right: .8rem; top: .7rem; z-index: 3; color: var(--ink);
  font-family: var(--display); font-size: 1.05rem; line-height: 1;
  background: rgba(245, 244, 241, .88); padding: .22rem .5rem .18rem; border-radius: 999px;
}
.strip-hint {
  position: fixed; left: var(--gutter); top: 50%; transform: translateY(-50%);
  z-index: 4; font-size: 1rem; pointer-events: none; mix-blend-mode: difference; color: #fff;
}

/* ---------- Hizmet detay ---------- */
.detail { padding: 8rem var(--gutter) 18rem; position: relative; }
.detail-aside {
  position: fixed; left: var(--gutter); top: 12.5rem; width: min(24vw, 22rem); z-index: 3;
}
/* Döndürülen başlığın sol kenarı dış boşluğa otursun: satır sayısı × .9em × sin 24° + harf taşması */
.detail-title {
  font-family: var(--display); text-transform: uppercase; font-size: 3rem;
  line-height: .9; letter-spacing: -.02em; transform: rotate(-24deg);
  transform-origin: left bottom; display: inline-block; margin-left: calc(var(--lines, 2) * .37em + 2px);
}
.detail-meta { display: flex; gap: 3rem; align-items: baseline; margin-top: 3.2rem; }
.detail-meta__count { font-family: var(--display); color: var(--menu-muted); letter-spacing: .02em; }
.pager a {
  position: fixed; top: 50%; transform: translateY(-50%); z-index: 6;
  font-size: 1rem; min-height: 44px; display: flex; align-items: center; padding: 0 .1rem;
  background: none;
}
.pager a:hover { color: var(--accent-ink); }
.pager__prev { left: var(--gutter); top: 60vh !important; }
.pager__next { right: var(--gutter); top: 60vh !important; }
.detail-body { margin-left: 30%; width: min(30rem, 34%); }
.detail-visual {
  position: fixed; right: 7.5rem; top: 8rem; width: min(22vw, 21rem, calc((100vh - 22rem) * .8));
  aspect-ratio: 4 / 5; transform: perspective(1400px) rotateY(-14deg) rotateZ(4deg);
  box-shadow: 0 28px 56px -30px rgba(20, 18, 18, .4);
  transition: transform 1.2s cubic-bezier(.2, .7, .2, 1);
  z-index: 1;
}
.detail-visual .frame { width: 100%; height: 100%; }
/* Hizmet galerisi: meech proje dizisi gibi sade, hafif eğik küçük kartlar (en çok 4) */
.gallery { display: flex; flex-wrap: wrap; gap: 2.2rem 1.6rem; margin-top: 3.2rem; perspective: 1200px; }
.gallery__item {
  flex: 0 1 min(10rem, calc((100% - 3.2rem) / 3)); transform: rotateY(-8deg) rotateZ(var(--rz, -3deg));
  box-shadow: 0 22px 40px -26px rgba(20, 18, 18, .45); background: var(--rule);
}
.gallery__item img { width: 100%; height: auto; }
.lead {
  font-family: var(--display); font-size: 2.25rem; line-height: 1; letter-spacing: -.005em;
}
.prose { margin-top: 3.5rem; }
.prose h2 {
  font-family: var(--display); font-size: 2rem; line-height: 1; margin: 3.2rem 0 1rem;
}
.prose h3, .prose h2.prose-sub {
  font-family: var(--body); font-size: .85rem; font-weight: 500; text-transform: uppercase; color: var(--ink);
  margin: 2.2rem 0 .7rem; letter-spacing: .01em; line-height: 1.3;
}
.prose p + p { margin-top: 1.3rem; }
.prose ul { list-style: none; padding: 0; margin-top: .9rem; border-top: 1px solid var(--rule); }
.prose li { padding: .75rem 0; border-bottom: 1px solid var(--rule); }
.prose li strong { font-weight: 500; display: block; text-transform: uppercase; font-size: .85rem; margin-bottom: .2rem; }
.faq { margin-top: 1rem; border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  list-style: none; cursor: pointer; min-height: 44px; padding: .9rem 2rem .9rem 0;
  position: relative; font-weight: 500; font-size: .95rem; transition: color .25s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: .2rem; top: 50%; transform: translateY(-50%);
  font-family: var(--display); font-size: 1.6rem; transition: transform .3s;
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq summary:hover { color: var(--accent-ink); }
.faq details p { padding: 0 0 1.1rem; }
.cta {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 4rem;
  font-family: var(--display); font-size: 2.5rem; text-transform: uppercase; line-height: 1;
  border-bottom: 1px solid transparent; transition: border-color .3s;
}
.cta:hover { border-color: var(--accent); }

/* ---------- Hakkımızda ---------- */
.about { padding: 8rem var(--gutter) 22rem; }
.about-top {
  display: grid; grid-template-columns: minmax(0, 30rem) 1fr minmax(0, 28.5rem);
  gap: 2rem; align-items: stretch;
}
.about-left { display: flex; flex-direction: column; justify-content: space-between; gap: 4rem; }
.about-h1 { font-family: var(--display); font-size: 2.25rem; line-height: 1; }
.mission p { max-width: 20.5rem; }
.about-visual { grid-column: 3; aspect-ratio: 456 / 684; }
.about-visual .frame { width: 100%; height: 100%; }
/* Logo figürü: fotoğraf kartı değil, zemine oturan marka illüstrasyonu */
.about-visual--mark { aspect-ratio: auto; align-self: end; }
.about-mark { width: 100%; height: auto; }
.about-more { max-width: 30rem; margin-top: 3.5rem; }
.about-more section + section { margin-top: 2.2rem; }
.about-more h2 { font-size: .85rem; font-weight: 500; text-transform: uppercase; margin-bottom: .5rem; }
.about-more p + p { margin-top: 1.3rem; }
.about-more ul { list-style: none; padding: 0; margin-top: .8rem; }
.about-more li { padding: .2rem 0; }
.about-more li::before { content: "— "; color: var(--menu-muted); }
.quote { max-width: 30rem; margin: 4.5rem 0 0; font-family: var(--display); font-size: 2rem; line-height: 1; }
.quote cite { display: block; margin-top: 2rem; font-style: normal; }
.js .fill { color: rgba(0, 0, 0, .28); transition: color .9s ease; }
.js .fill.is-in { color: var(--ink); }

/* ---------- İletişim ---------- */
.contact { padding: 8rem var(--gutter) 20rem; position: relative; min-height: 100vh; }
.contact-inner { width: min(39.5rem, 100%); margin: 0 auto; text-align: center; }
.contact h1 {
  font-family: var(--display); font-size: 2.5rem; line-height: 1; text-transform: uppercase;
  font-weight: 400; margin-bottom: 1rem;
}
.contact-copy { width: min(32rem, 100%); margin: 0 auto; }
.contact-copy p + p { margin-top: 1.3rem; }
.contact-lines { list-style: none; padding: 0; margin: 1.3rem 0; }
.contact-lines li { line-height: 1.3; }
.contact-lines a { display: inline-flex; align-items: center; min-height: 24px; }
.contact-lines a:hover, .contact-lines a:focus-visible { color: var(--accent-ink); }
.contact-lines .harita { text-decoration: underline; text-underline-offset: .2em; text-decoration-color: var(--accent); }
.detail--kisa .detail-body { min-height: 40vh; }
/* Form çevresindeki hizmet çemberi: yatay konum sayfa ortasından (formun 316 px yarı genişliği + ≥48 px),
   dikey konum ekran yüksekliğinden. Üst satır header solmasının, alt satır kadran/alt solmanın dışında kalır. */
.orbit { display: none; }
.orbit__item {
  position: fixed; z-index: 4; left: calc(50% + var(--ox, 0px));
  transform: translate(-50%, -50%) rotate(var(--oa, 0deg));
  font-size: 1rem; text-transform: uppercase; white-space: nowrap;
  min-height: 44px; display: flex; align-items: center; transition: color .24s;
}
.orbit__item:hover, .orbit__item:focus-visible { color: var(--accent-ink); }
.orbit__item--top { top: var(--oy-top); }
.orbit__item--mid { top: var(--oy-mid); }
.orbit__item--bot { top: var(--oy-bot); }
@media (min-width: 1200px) and (min-height: 620px) {
  .orbit {
    display: block;
    --oy-top: max(22vh, 11.75rem);
    --oy-bot: min(64vh, 100vh - 19.5rem);
    --oy-mid: calc((var(--oy-top) + var(--oy-bot)) / 2);
  }
}
.form { margin-top: 2.6rem; text-align: left; display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 2rem; }
.field { position: relative; padding-top: .9rem; }
.field--full { grid-column: 1 / -1; }
.field input, .field textarea, .field select {
  width: 100%; border: 0; border-bottom: 1px solid var(--rule); background: transparent;
  padding: .6rem 0; font-weight: 500; min-height: 44px; border-radius: 0;
  transition: border-color .3s; -webkit-appearance: none; appearance: none;
}
.field select { cursor: pointer; }
.field textarea { resize: vertical; min-height: 4rem; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--ink); }
.field label {
  position: absolute; left: 0; top: 1.55rem; font-size: .85rem; font-weight: 500;
  text-transform: uppercase; color: var(--label); pointer-events: none;
  transition: top .25s cubic-bezier(.4, 0, .2, 1), font-size .25s cubic-bezier(.4, 0, .2, 1), color .25s;
}
.field.is-filled label, .field:focus-within label, .field--fixed label { top: 0; font-size: .72rem; color: var(--ink); }
.field--fixed:not(.is-filled):not(:focus-within) label { color: var(--label); }
.field select { color: var(--label); font-weight: 400; }
.field.is-filled select { color: var(--ink); font-weight: 500; }
.field select option { color: var(--ink); }
/* Satır içi hata (tarayıcı balonu yerine; her tarayıcı dilinde Türkçe). Satırın yeri boşken de ayrılır:
   alandan çıkarken (blur) beliren uyarı Gönder düğmesini aşağı itip tıklamayı boşa düşürmesin.
   Mesajlar tek satıra sığacak kısalıkta (main.js MESAJ). */
.field__hata { font-size: .8rem; line-height: 1.3; color: var(--accent-ink); margin-top: .35rem; min-height: 1.3em; }
.field [aria-invalid="true"] { border-bottom-color: var(--accent-ink); }
.form, .field { scroll-margin-top: 8.5rem; }
.form-foot { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.form-note { font-size: .85rem; color: var(--label); max-width: 26rem; }
.submit {
  background: none; border: 0; padding: 0 .5rem; text-transform: uppercase; cursor: pointer;
  min-height: 44px; min-width: 44px;
}
.submit:hover { font-weight: 500; }

/* Kaydırma görünümü (yalnız JS varken gizlenir) */
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .9s ease, transform .9s cubic-bezier(.2, .7, .2, 1); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- Mobil ---------- */
@media (max-width: 991px) {
  /* 768–991'de alt bilgi kadranın alt satırına biniyordu (mobildeki gibi gizli; bağlantılar header'da) */
  .footer-text { display: none; }
  .detail-aside { position: static; width: auto; margin-bottom: 3rem; }
  .detail-title { font-size: 2.4rem; margin-top: 2rem; }
  .detail-body { margin-left: 0; width: min(36rem, 100%); }
  .detail-visual { position: relative; right: auto; top: auto; width: min(70vw, 22rem); margin: 0 0 3rem auto; }
  .pager a { position: static; transform: none; }
  .pager { display: flex; justify-content: space-between; margin-top: 3rem; width: min(36rem, 100%); }
  .about-top { grid-template-columns: 1fr; }
  .about-visual { grid-column: 1; grid-row: 2; width: min(100%, 28.5rem); }
  .about-visual--mark { width: min(100%, 24rem); justify-self: center; }
}
@media (min-width: 768px) and (max-width: 991px) and (orientation: portrait) {
  .strip { --pad-t: 8.5rem; --cw: min(30rem, calc((100svh - var(--pad-t) - var(--pad-b)) * .8)); }
}
@media (min-width: 768px) and (max-width: 991px) {
  /* 2×2 header bağlantıları 100 px'e iner: solma perdesinin dolu kısmı (%72) onları örtecek kadar uzun */
  .header::before { height: 9.5rem; }
  .detail, .about, .contact { padding-top: 9.75rem; }
  /* Küçülen kadranda yazı ölçeği tam doğrusal değil: dakika ibresi 2° dikleşir, alt satıra değmez */
  .dial { --minute-a: -22deg; }
  /* Başlık solda, görsel sağda: sol yarı boş kalmasın */
  .detail { display: grid; grid-template-columns: minmax(0, 1fr) min(22rem, 46%); column-gap: 2rem; align-items: start; }
  .detail-aside { grid-column: 1; grid-row: 1; }
  .detail-visual { grid-column: 2; grid-row: 1; width: 100%; margin: 0 0 3rem; }
  .detail-body { grid-column: 1 / -1; }
}
/* Dokunmatik / tablet: dokunma hedefi ≥ 44 px */
@media (min-width: 768px) and (max-width: 991px), (min-width: 768px) and (pointer: coarse) {
  .header-links { display: grid; grid-template-columns: auto auto; column-gap: 1.1rem; }
  .header-links a { display: inline-flex; align-items: center; justify-content: flex-end; min-height: 44px; }
  .contact-lines a { display: inline-flex; min-height: 44px; align-items: center; }
}
@media (pointer: coarse) {
  .footer-text a { position: relative; }
  .footer-text a::after { content: ""; position: absolute; left: -.5rem; right: -.5rem; top: 50%; height: 44px; transform: translateY(-50%); }
}
@media (max-width: 767px) {
  :root { --gutter: 1rem; --dial-w: min(96vw, calc(100vw - 24px)); --dial-h: 48vw; }
  .footer-text { display: none; }
  html { scroll-padding-top: 7.5rem; }
  .form, .field { scroll-margin-top: 7.5rem; }
  /* Sağ üstte hızlı iletişim: Telefon + WhatsApp (Instagram ve Randevu gizli) */
  .header-grid { gap: .5rem; }
  /* Görünen satırlar 28 px, dokunma alanı 44 px: Telefon'un alanı yukarı, WhatsApp'ınki aşağı uzar,
     ikisi birbirine binmez (üst alan ekranın tepesine taşmasın diye bağlantılar .3rem aşağıda). */
  .header-links { display: grid; gap: 0; margin-top: .3rem; }
  .header-links li:nth-child(n+3) { display: none; }
  .header-links a { min-height: 28px; font-size: .72rem; letter-spacing: .02em; padding-left: .75rem; position: relative; }
  .header-links a::after { content: ""; position: absolute; left: -.25rem; right: -.25rem; }
  .header-links li:nth-child(1) a::after { top: -17px; bottom: 0; }
  .header-links li:nth-child(2) a::after { top: 0; bottom: -16px; }
  .tagline { font-size: .9rem; margin-top: 1.6rem; left: .5rem; top: .8rem; }
  .logo__img { height: 48px; }
  .about-visual--mark { width: min(100%, 18rem); }
  .gallery__item { flex-basis: calc((100% - 1.6rem) / 2); }
  .dial { bottom: calc(1.4rem - .16 * var(--dial-h)); }
  .dial__item a { font-size: 1.35rem; padding: max(.75rem, calc((44px - .9em) / 2)) .4rem; }
  /* Dar kadran: üst sıra yukarı alınır, iki sıra arasında ibrelerin geçeceği açıklık kalır;
     ibreler meech'teki gibi dik açıyla bu açıklıktan yukarı uzanır (alt satır yazısına değmez). */
  .dial {
    --s0l: 67%; --s0t: 56%;
    --s1l: 73%; --s1t: 81%;
    --s2l: 27%; --s2t: 81%;
    --s3l: 33%; --s3t: 56%;
    --hour-len: calc(var(--dial-h) * .15); --hour-a: -70deg;
    --minute-len: calc(var(--dial-h) * .25); --minute-a: -48deg;
  }
  .dial__item a[aria-current="page"]::after { display: none; }
  .strip {
    --cw: min(84vw, calc((100vh - 17rem) * .8));
    gap: max(2.2rem, calc((100vw - var(--cw) - 40px) / 2 + 1rem));
    padding: 6.5rem var(--gutter) 10.5rem 0;
  }
  @supports (height: 100svh) { .strip { --cw: min(84vw, calc((100svh - 17rem) * .8)); } }
  .header::before { height: 7rem; }
  .strip-card:first-child { margin-left: calc((100vw - var(--cw)) / 2); }
  .strip-hint { display: none; }
  .lead, .about-h1 { font-size: 1.75rem; }
  .prose h2 { font-size: 1.6rem; }
  .cta { font-size: 1.9rem; }
  .form { grid-template-columns: 1fr; }
  .form-foot { flex-direction: column; }
  .contact h1 { font-size: 2.1rem; }
  .contact-lines a { display: inline-flex; min-height: 44px; align-items: center; }
  .quote { font-size: 1.6rem; }
  .detail, .about, .contact { padding-top: 7rem; }
}
/* Dar telefon: slogan logoya binmesin (ölçüm: kesişen koyu piksel 0, en yakın mesafe ≥ 8 px) */
@media (max-width: 389px) {
  .tagline { font-size: .76rem; }
  .tagline span + span { padding-left: 1.35rem; }
}
@media (max-width: 359px) {
  .logo__img { height: 40px; }
  .header-links a { padding-left: .25rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}