/* Ana sayfa — ayna vitrin (yalnız ana sayfada yüklenir).
   Ortada kemerli ayna (SVG çerçeve + flu çapraz geçişli hizmet fotoğrafları), çevresinde 12 eğik küçük kart.
   Masaüstü (≥992 × ≥500): tek ekran; kartlar aynanın iki yanında 6 + 6. Boyutlar ekran yüksekliğiyle ölçeklenir.
   Diğer her boyut: ayna üstte, altında kaymalı ızgara; ilk ekranda ayna + ilk sıra kartlar adlarıyla görünür. */

/* ---------- Ayna ---------- */
.ayna { position: relative; margin: 0 auto; width: var(--fw); }
.ayna__govde { position: relative; aspect-ratio: 400 / 540; }
/* Cam: SVG'deki r=152 kemerin iç yüzü (x 48–352, y 62–510 / 400×540). Kırpma clip-path ile
   (WebKit'te border-radius + filter taşmasına karşı). */
.ayna__cam {
  position: absolute; left: 12%; right: 12%; top: 11.4815%; bottom: 5.5556%;
  border-radius: 50% 50% 2px 2px / 33.93% 33.93% 2px 2px;
  clip-path: inset(0 round 50% 50% 2px 2px / 33.93% 33.93% 2px 2px);
  overflow: hidden; isolation: isolate; background: #8c7b6e;
  box-shadow: 0 30px 60px -34px rgba(20, 18, 18, .45);
}
.ayna__cam::after {
  /* ayna parıltısı + iç gölge: fotoğrafa "cam arkası" hissi */
  content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none;
  background:
    linear-gradient(118deg, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, 0) 30%,
      rgba(255, 255, 255, 0) 62%, rgba(255, 255, 255, .1) 70%, rgba(255, 255, 255, 0) 78%);
  box-shadow: inset 0 0 0 1px rgba(20, 18, 18, .22), inset 0 12px 36px rgba(20, 18, 18, .18);
}
.ayna__kare {
  --blur: 14px;
  position: absolute; inset: 0; background: var(--tone, #8c7b6e);
  opacity: 0; filter: blur(var(--blur)); transform: scale(1.06);
  transition: opacity 1.4s ease, filter 1.4s ease, transform 1.4s ease, visibility 0s 1.4s;
  visibility: hidden;
}
.ayna__kare.is-on {
  opacity: 1; filter: blur(0); transform: scale(1); visibility: visible;
  /* netleşme 1,4 sn; ölçek yavaşça (5 sn) yerine oturur */
  transition: opacity 1.4s ease, filter 1.4s ease, transform 5s cubic-bezier(.2, .7, .2, 1), visibility 0s;
}
/* GPU katmanı yalnız geçiş sırasında (vitrin.js .is-gecis'i 1,6 sn açık tutar) */
.ayna__cam.is-gecis .ayna__kare { will-change: opacity, filter, transform; }
.ayna__kare picture, .ayna__kare img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ayna__kare img { object-fit: cover; }
/* Döngü dışı hizmet (yalnız kartının üstüne gelince): sayfadaki fotoğrafsız kartla aynı düz renk + büyük harf
   (style.css .frame / .frame__mono) */
.ayna__kare--yer {
  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%),
    linear-gradient(rgba(18, 14, 12, .18), rgba(18, 14, 12, .18)), var(--tone, #8c7b6e);
}
.ayna__mono {
  position: absolute; right: -.08em; bottom: -.22em; font-family: var(--display);
  font-size: calc(var(--fw) * .65); line-height: 1; color: rgba(255, 255, 255, .1);
  pointer-events: none; user-select: none;
}

.ayna__cerceve { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ayna__cizgi { fill: none; stroke: #1f1b1a; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.ayna__boncuk { stroke-width: 2.4; stroke-dasharray: 0 6.4; opacity: .5; }
.ayna__centik { stroke-width: 1.5; }
.ayna__nokta { fill: var(--accent); }

/* İsim plakası: çerçevenin alt kenarına oturan çift çizgili kartuş. Kutunun tamamı tek bağlantı
   (ad + "İncele"). Genişliği aynaya bağlı (≤ %78, telefonda %82): taban çizgilerinin uçları iki yanda
   görünür kalır; yazı boyu aynayla orantılı küçülür. Uzun ad tek satıra sığacak kadar küçülür (.ayna__ad). */
.ayna__plaka {
  --pl-max: calc(var(--fw) * .78);                          /* en fazla genişlik */
  --pl-px: clamp(.75rem, calc(var(--fw) * .06), 1.4rem);    /* yatay iç boşluk */
  /* left/right 0 + width: fit-content: sığdırma genişliği aynanın tamamı (left: 50% ile yarısına düşüyordu) */
  position: absolute; left: 0; right: 0; top: 97.78%; z-index: 4;
  width: fit-content; margin-inline: auto; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .1rem;
  padding: .5rem var(--pl-px) .4rem;
  min-width: 56%; max-width: var(--pl-max); min-height: 44px;
  background: var(--paper); border: 1px solid rgba(20, 18, 18, .6); border-radius: 999px;
  outline: 1px solid rgba(20, 18, 18, .22); outline-offset: 3px;
  text-align: center; transition: border-color .25s;
}
.ayna__plaka:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.ayna__adlar { display: grid; align-items: center; max-width: 100%; }   /* 12 ad aynı hücrede: plaka yüksekliği adla değişmez */
.ayna__ad {
  /* --ad-em: adın yazı boyuna oranla genişliği (build.py AYNA_AD_EM). Plakanın iç genişliğine sığmayan ad
     o genişliğe inecek kadar küçülür (en çok %15; daha dar aynada iki satıra iner). Böylece plaka yalnız
     uzun ad yüzünden iki satırlık yer ayırmaz. */
  --ad-sig: calc((var(--pl-max) - 2 * var(--pl-px) - 2px) / var(--ad-em, 1) - .5px);   /* -2px kenarlık; -.5px: kesirli boy tam piksele yuvarlanabilir */
  grid-area: 1 / 1; font-family: var(--display); line-height: 1.05;
  font-size: max(calc(var(--ad-fs, 1.55rem) * .85), min(var(--ad-fs, 1.55rem), var(--ad-sig)));
  text-wrap: balance;
  opacity: 0; filter: blur(6px); transition: opacity .36s ease, filter .36s ease;
}
/* Eski ad tamamen solduktan sonra yenisi gelir: iki yazı aynı anda görünmez */
.ayna__ad.is-on { opacity: 1; filter: blur(0); transition-delay: .36s; }
.ayna__link {
  font-size: .8125rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  min-height: 24px; display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap;
}
.ayna__link::before, .ayna__link::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
/* Bütün ayna tıklanır: görünmez yüzey aynı adrese gider (klavye/ekran okuyucu yalnız "İncele"yi görür) */
.ayna__yuzey { position: absolute; left: 12%; right: 12%; top: 11.48%; bottom: 5.56%; z-index: 2; border-radius: 50% 50% 2px 2px / 33.93% 33.93% 2px 2px; }
.ayna__plaka:hover .ayna__link, .ayna__plaka:focus-visible .ayna__link { color: var(--accent-ink); }
.ayna__plaka:hover { border-color: var(--ink); }
.ayna:hover .ayna__kare.is-on img { filter: brightness(1.04); }

/* Durdur / oynat (WCAG 2.2.2): kemerin dışındaki sağ üst boşlukta; yalnız JS çalışıyorsa görünür.
   Konum aynaya oranlı: dairenin merkezi çerçeve çiziminde (400×540) x 372, y 42 noktasında, kemerin
   ve tepe süsünün dışında; ayna küçülünce de çizgilerin üstüne binmez. */
.ayna__dur {
  position: absolute; z-index: 5; left: calc(93% - 22px); top: calc(7.78% - 22px);
  width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center;
}
.ayna__dur[hidden] { display: none; }
.ayna__dur span {
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(20, 18, 18, .55);
  background: var(--paper); position: relative; transition: border-color .25s;
}
.ayna__dur span::before, .ayna__dur span::after {
  content: ""; position: absolute; top: 8px; width: 1.5px; height: 9px; background: var(--ink);
}
.ayna__dur span::before { left: 10px; }
.ayna__dur span::after { left: 13.5px; }
.ayna__dur[aria-pressed="true"] span::before {
  /* oynat üçgeni */
  left: 10px; top: 7px; width: 0; height: 0; background: none;
  border-left: 7px solid var(--ink); border-top: 5.5px solid transparent; border-bottom: 5.5px solid transparent;
}
.ayna__dur[aria-pressed="true"] span::after { display: none; }
.ayna__dur:hover span, .ayna__dur:focus-visible span { border-color: var(--accent-ink); }

/* ---------- Küçük kartlar ---------- */
.kartlar { list-style: none; margin: 0; padding: 0; }
.vk { position: relative; }
.vk__kart {
  display: block; position: relative; aspect-ratio: 4 / 5; container-type: inline-size;
  box-shadow: 0 22px 44px -26px rgba(20, 18, 18, .45);
  transform: perspective(900px) rotateY(var(--ry, 0deg)) rotateZ(var(--rz, 0deg));
  transition: transform .6s cubic-bezier(.2, .7, .2, 1), box-shadow .4s, opacity 1s ease var(--d, 0s), filter 1s ease var(--d, 0s);
}
.vk__kart .frame { position: absolute; inset: 0; }
/* Ad bandı perdesi: beyaz ad ile arkasındaki fotoğraf arasında ≥ 4,5:1 (ölçüm: QA betiği) */
.vk__kart .frame::after {
  display: block; z-index: 1;
  background:
    radial-gradient(78% 36% at 50% var(--scrim-y, 48%), rgba(18, 14, 12, var(--scrim-a, .62)), rgba(18, 14, 12, 0) 100%),
    linear-gradient(rgba(18, 14, 12, .1), rgba(18, 14, 12, .24));
}
.vk__ad {
  position: absolute; left: 50%; top: var(--name-top, 50%); z-index: 2; width: 94%;
  transform: translate(-50%, -50%) rotate(-24deg);
  /* alt sınır .8rem: 992×620 gibi dar-kısa pencerede 84 px'lik kartta uzun ad kart dışına taşmasın.
     Üst sınır ayna adının .92'si: öne çıkan hizmetin adı her ekranda kart adlarından büyük kalır. */
  font-family: var(--display); font-size: min(clamp(.8rem, 14cqw, 2.1rem), calc(var(--ad-fs) * .92)); line-height: .95;
  text-align: center; color: #fff;
  text-shadow: 0 0 2px rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .4), 0 2px 16px rgba(0, 0, 0, .4);
}
.vk__kart:hover, .vk__kart:focus-visible {
  transform: perspective(900px) rotateY(0deg) rotateZ(0deg) scale(1.03);
  box-shadow: 0 34px 60px -28px rgba(20, 18, 18, .55);
}
/* Aynada gösterilen hizmetin kartı: ince kırmızı iç çerçeve + tepesinde kırmızı nokta */
.vk__kart::before, .vk__kart::after {
  content: ""; position: absolute; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .6s;
}
.vk__kart::before { inset: 6px; border: 1px solid var(--accent); }
.vk__kart::after { left: 50%; top: -11px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--accent); }
.vk.is-aynada .vk__kart::before, .vk.is-aynada .vk__kart::after { opacity: 1; }
/* Flu beliriş: yalnız vitrin.js çalışıyorsa gizlenir (JS yoksa kartlar görünür) */
.vitrin-js .vk:not(.is-in) .vk__kart { opacity: 0; filter: blur(10px); }

/* ---------- Akış düzeni (mobil, tablet, kısa masaüstü) ----------
   --kw: kart genişliği, --mh: ayna gövde yüksekliği. Ayna + ilk sıra (ikinci sütun %14 aşağıda)
   alt solma perdesinin (.4 × kadran + 5rem) üstünde biter. */
.vitrin-page .header::before, .vitrin-page .footer::before { display: block; }
.vitrin {
  --v-top: 5.8rem; --gap-x: 1rem; --kay: 14%;
  --kw: min(calc((100vw - 2 * var(--gutter) - var(--gap-x)) / 2 * .92), max(7.5rem, 18vh));
  /* alt sınır 15rem: kısa telefonda (375×667) ayna kart küçük resminden belirgin büyük kalsın;
     ilk kart sırası o zaman ilk ekranın altına taşar (kaydırınca gelir) */
  --mh: clamp(15rem, calc((100vh - .4 * var(--dial-h) - 15.1rem - var(--kw) * 1.425) / .9778), 46vh);
  --fw: calc(var(--mh) * 400 / 540);
  --ad-fs: clamp(1rem, calc(var(--fw) * .075), 1.35rem);   /* ayna adı (kart adı bunun en çok .92'si) */
  padding: var(--v-top) var(--gutter) calc(.52 * var(--dial-h) + 6rem);
}
@supports (height: 100svh) {
  .vitrin {
    --kw: min(calc((100vw - 2 * var(--gutter) - var(--gap-x)) / 2 * .92), max(7.5rem, 18svh));
    --mh: clamp(15rem, calc((100svh - .4 * var(--dial-h) - 15.1rem - var(--kw) * 1.425) / .9778), 46svh);
  }
}
.vitrin .ayna { margin-bottom: 3rem; }
.kartlar {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.2rem var(--gap-x);
  max-width: 36rem; margin: 0 auto;
}
.kartlar .vk { width: var(--kw); justify-self: center; }
.kartlar .vk__kart { --ry: 0deg; --rz: var(--mrz); }
.kartlar .vk:nth-child(even) { translate: 0 var(--kay); }

@media (max-width: 767px) {
  /* Logo 48 px: kısa solma yeter, aynanın tepe süsü solmanın altında kalmaz */
  .vitrin-page .header::before { height: 6rem; }   /* dolu kısım (%72) Telefon/WhatsApp bağlantılarını örter */
  .ayna__kare { --blur: 8px; }
  /* Dar ayna (çerçeve ~180 px): plaka biraz geniş, iç boşluk dar ("Kirpik ve Kaş Boyama" 16 yerine 14 px, tek satır) */
  .ayna__plaka { --pl-max: calc(var(--fw) * .82); --pl-px: .5rem; padding-top: .4rem; padding-bottom: .3rem; }
}
@media (min-width: 768px) {
  .vitrin {
    --v-top: 9.6rem; --gap-x: 1.4rem;   /* tepe süsü header solmasının (tablette 9,5rem) altında */
    --kw: min(calc((min(100vw, 60rem) - 2 * var(--gutter) - 3 * var(--gap-x)) / 4 * .9), max(8rem, 20vh));
    --mh: clamp(13rem, calc((100vh - .4 * var(--dial-h) - 19.6rem - var(--kw) * 1.425) / .9778), 50vh);
  }
  @supports (height: 100svh) {
    .vitrin {
      --kw: min(calc((min(100vw, 60rem) - 2 * var(--gutter) - 3 * var(--gap-x)) / 4 * .9), max(8rem, 20svh));
      --mh: clamp(13rem, calc((100svh - .4 * var(--dial-h) - 19.6rem - var(--kw) * 1.425) / .9778), 50svh);
    }
  }
  .vitrin { --ad-fs: clamp(1.1rem, calc(var(--fw) * .072), 1.6rem); }
  .kartlar { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 60rem; gap: 2.6rem var(--gap-x); }
}

/* ---------- Masaüstü: tek ekran, ayna ortada, kartlar iki yanda ----------
   Dikey sınırlar:
   --mtop  aynanın üstü (logo altı)
   --zh    kadran bölgesi: yazıların durduğu ve sayfa değişiminde pimin çevresinde döndüğü yay
           (en yüksek nokta: pim − .3425 × kadran yüksekliği − yarım yazı kutusu). Aynaya bitişik
           sütunlar ve ayna plakası bunun üstünde biter; kadranın zemin elipsi bu düzende kapalı.
   --t-dis dış sütunların üstü (sol: slogan, sağ: header bağlantıları altı); diğer sütunlar ekranın üstünden başlar
   --b-dis alt köşe yazılarının üstü */
@media (min-width: 992px) and (min-height: 500px) {
  .vitrin-page .home { height: 100vh; height: 100svh; overflow: hidden; }
  .vitrin-page .header::before, .vitrin-page .footer::before, .vitrin-page .dial::before { display: none; }
  .vitrin {
    --H: 100vh;
    --mtop: 5.6rem;
    --zh: calc(.3425 * var(--dial-h) + 4rem);
    --pd: 2.6rem;                                     /* plakanın aynanın altından taşan payı */
    --mh: min(calc(var(--H) - var(--zh) - var(--mtop) - var(--pd)), 42rem);
    --fw: calc(var(--mh) * 400 / 540);
    --half: max(calc(var(--fw) / 2 + 2rem), 8.75rem); /* aynaya bitişik sütunun ortaya uzaklığı (logo payı) */
    /* Ayna adı: kart adlarından büyük kalır (kart adı en çok bunun .92'si, aşağıda .vk__ad). Alt sınır
       18 px; çok kısa ekranda (çerçeve < 213 px) 16 px'e iner, plaka küçük aynanın yarısını örtmesin. */
    --plaka-fs: clamp(clamp(1rem, calc(var(--fw) * .075), 1.125rem), calc(var(--fw) * .0515), 1.9rem);
    --ad-fs: var(--plaka-fs);
    --gc: 1.25rem; --gr: 1rem;
    --side: calc(50vw - var(--half) - var(--gutter));
    --t-dis: 7.25rem; --t-ic: 1rem;
    --b-dis: calc(var(--H) - 3rem);
    --b-ic: calc(var(--H) - var(--zh));
    position: absolute; inset: 0; padding: 0;
  }
  @supports (height: 100svh) { .vitrin { --H: 100svh; } }
  .vitrin .ayna { position: absolute; left: 50%; top: var(--mtop); margin: 0; transform: translateX(-50%); }
  /* Liste tüm ekranı kaplar: boş yeri tıklamayı yutmasın (ayna bağlantısı ve düğme altta kalıyordu) */
  .kartlar { display: block; position: absolute; inset: 0; max-width: none; margin: 0; padding: 0; pointer-events: none; }
  .kartlar .vk { pointer-events: auto; position: absolute; }
  .kartlar .vk:nth-child(n) { translate: none; }   /* akış düzenindeki kaymalı sütun kuralını ez */
  .kartlar .vk__kart { --ry: inherit; --rz: inherit; }
  .kartlar .vk {
    --colH: calc(var(--cb) - var(--ct));
    --ch: calc((var(--colH) - (var(--n) - 1) * var(--gr)) / var(--n));
    /* genişlik aynaya da bağlı (≤ çerçeve genişliğinin yarısı): kısa ekranda ayna küçülünce yan sütunlar
       genişliyor, kartlar aynayla yarışacak kadar büyüyordu */
    --w: calc(var(--s) * min(var(--colw), (var(--ch) - 1.4rem) * .8, 15rem, var(--fw) * .5));
    width: var(--w);
    top: calc(var(--ct) + var(--r) * (var(--ch) + var(--gr)) + (var(--ch) - var(--w) * 1.25) * (1 + var(--jy)) / 2);
    animation: vk-yuz calc(7s + var(--i) * .43s) ease-in-out calc(var(--i) * -1.7s) infinite alternate;
  }
  .vk--L { left: calc(var(--gutter) + var(--c) * (var(--colw) + var(--gc)) + (var(--colw) - var(--w)) * (1 + var(--jx)) / 2); }
  .vk--R { right: calc(var(--gutter) + var(--c) * (var(--colw) + var(--gc)) + (var(--colw) - var(--w)) * (1 + var(--jx)) / 2); }
  /* 2 sütun × 3 satır (992–1199) */
  .vitrin { --colw: calc((var(--side) - var(--gc)) / 2); }
  .kartlar .vk { --n: 3; --r: var(--r2); }
  .vk2-0 { --c: 0; --ct: var(--t-dis); --cb: var(--b-dis); }
  .vk2-1 { --c: 1; --ct: var(--t-ic); --cb: var(--b-ic); }
  /* 992–1279: sağ alt adres iki satır → dış sütun daha yukarıda biter */
  .vitrin { --b-dis: calc(var(--H) - 4rem); }
}
@media (min-width: 1200px) and (min-height: 500px) {
  /* 3 sütun × 2 satır: dış · orta · aynaya bitişik */
  .vitrin { --colw: calc((var(--side) - 2 * var(--gc)) / 3); }
  .kartlar .vk { --n: 2; --r: var(--r3); }
  .vk3-0 { --c: 0; --ct: var(--t-dis); --cb: var(--b-dis); }
  .vk3-1 { --c: 1; --ct: var(--t-ic); --cb: var(--b-dis); }
  .vk3-2 { --c: 2; --ct: var(--t-ic); --cb: var(--b-ic); }
}
@media (min-width: 1280px) and (min-height: 500px) {
  .vitrin { --b-dis: calc(var(--H) - 3rem); }
}
@keyframes vk-yuz {
  from { transform: translate3d(0, -4px, 0); }
  to { transform: translate3d(0, 5px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .ayna__kare, .ayna__kare.is-on, .ayna__ad, .ayna__ad.is-on { filter: none; transform: none; transition: none; }
  .vk, .kartlar .vk { animation: none !important; }
  .vitrin-js .vk:not(.is-in) .vk__kart { opacity: 1; filter: none; }
}