/* ==========================================================================
   Öner Erkek Kuaförü — site stili
   Apple tasarım dili · uçtan uca açık tema · mobile-first

   Referans alınan sistem: apple.com marketing sayfaları.
   - Yüzeyler yalnızca beyaz (#fff) ve açık gri (#f5f5f7); siyah şerit yok.
   - Mürekkep #1d1d1f, ikincil metin #6e6e73, saç çizgisi #d2d2d7.
   - Vurgu yalnızca bağlantı ve butonda: #0071e3 (buton) / #0066cc (link).
   - Tipografi SF Pro ölçeği: sıkı harf aralığı, 1.05-1.47 satır yüksekliği.
   - Hareket: yalnızca opacity + 14px yukarı açılma, active scale(0.97).
   ========================================================================== */

/* ---------- Panelden gelen tokenlar ----------
   tema.css bu değişkenleri bu dosyadan SONRA yeniden tanımlar; buradakiler
   panel hiç kaydedilmemişse geçerli olan Apple varsayılanlarıdır. */
:root {
  --ink: #ffffff;          /* sayfa zemini */
  --ink-2: #f5f5f7;        /* dönüşümlü bölüm zemini */
  --ink-3: #ffffff;        /* yükseltilmiş kart */
  --text: #1d1d1f;         /* mürekkep */
  --muted: #6e6e73;        /* ikincil metin */
  --gold: #0071e3;         /* vurgu (buton) */
  --gold-deep: #0066cc;    /* vurgu koyu (bağlantı) */
  --font-head: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
}

/* ---------- Anlamlı adlar ----------
   Panel tokenları tarihsel olarak koyu tema adlarını taşıyor (--ink, --gold).
   Stilin geri kalanı yalnızca aşağıdaki anlamlı adları kullanır; böylece
   panelden renk değişince her yer birlikte değişir, kod ise okunur kalır. */
:root {
  --surface: var(--ink);
  --surface-2: var(--ink-2);
  --surface-raised: var(--ink-3);
  --accent: var(--gold);
  --accent-link: var(--gold-deep);
  --accent-soft: rgba(0, 113, 227, 0.18);

  /* Apple saç çizgileri ve kenarlıkları */
  --line: #d2d2d7;
  --line-soft: #e8e8ed;
  --line-nav: rgba(0, 0, 0, 0.12);

  /* Ölçüler */
  --container: 980px;        /* metin ağırlıklı bölümler */
  --container-wide: 1440px;  /* ızgaralar ve tam genişlik şeritler */
  --gutter: 22px;
  --header-h: 52px;
  --r-card: 18px;            /* kart */
  --r-tile: 28px;            /* büyük özellik kutusu */
  --r-pill: 980px;           /* Apple'ın hap yarıçapı */

  /* Tipografi sabitleri */
  --tr-display: -0.015em;    /* 56px+ başlıklar */
  --tr-title: -0.003em;      /* bölüm başlıkları */
  --tr-body: -0.022em;       /* 17px gövde (-0.374px) */
  --tr-caption: -0.016em;    /* 14px (-0.224px) */
  --tr-fine: -0.01em;        /* 12px (-0.12px) */

  /* Apple'ın standart yumuşamaları */
  --ease: cubic-bezier(0.28, 0.11, 0.32, 1);
  --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Yedek font ölçü eşitleme ----------
   Inter ağdan gelene kadar Arial gösterilir; ölçüler eşitlenmezse font
   değişince metin yeniden akıyor ve düzen kayması (CLS) oluşuyor.
   Değerler Inter/Arial çifti için hesaplanmış standart oranlardır. */
@font-face {
  font-family: "Baslik yedek";
  src: local("Segoe UI Semibold"), local("Helvetica Neue"), local("Arial");
  size-adjust: 107.12%;
  ascent-override: 90.2%;
  descent-override: 22.48%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Metin yedek";
  src: local("Segoe UI"), local("Helvetica Neue"), local("Arial");
  size-adjust: 107.12%;
  ascent-override: 90.2%;
  descent-override: 22.48%;
  line-gap-override: 0%;
}

/* ==========================================================================
   Reset / taban
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.47059;
  letter-spacing: var(--tr-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

/* Izgara/esnek yerleşim hidden özniteliğini eziyor; bu satır olmazsa
   gizlenmiş ögeler görünür kalır. */
[hidden] { display: none !important; }

img, svg, video, iframe { max-width: 100%; }
img, video { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  margin: 0;
  font-weight: 600;
  color: var(--text);
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; }

a { color: inherit; }

::selection { background: var(--accent-soft); }

/* Apple'ın odak halkası: her zaman görünür, 2px mavi */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 50%;
  top: 8px;
  transform: translate(-50%, -220%);
  z-index: 200;
  background: var(--accent);
  color: #fff;
  padding: 10px 20px;
  border-radius: var(--r-pill);
  font-size: 14px;
  letter-spacing: var(--tr-caption);
  text-decoration: none;
  transition: transform 0.25s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* ==========================================================================
   Yerleşim
   ========================================================================== */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container-wide {
  width: 100%;
  max-width: calc(var(--container-wide) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Apple bölüm ritmi: masaüstünde ~100px, mobilde ~60px */
.section { padding-block: clamp(60px, 8.5vw, 110px); }
.section-tight { padding-block: clamp(48px, 6.5vw, 86px); }
.section-alt { background: var(--surface-2); }
.center { text-align: center; }

@media (max-width: 734px) {
  :root { --gutter: 16px; }
}

/* ==========================================================================
   Tipografi ölçeği (SF Pro)
   ========================================================================== */

/* Büyük pazarlama başlığı — apple.com hero: 80px / 1.05 / 600 / -0.015em */
.display {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: var(--tr-display);
}

.hero-title {
  font-size: clamp(40px, 7vw, 76px);
}

/* Panelde başlık "ana" + "vurgu" olarak iki alanda tutulur. Apple başlıkları
   tek renktir; vurgu parçası renk değiştirmez, yalnızca kendi satırına iner —
   kısa satırlar Apple'ın başlık ritmidir. */
.title-accent {
  display: block;
  color: inherit;
}

/* Bölüm başlığı — Apple: 48px / 1.08 / 600 / -0.003em */
.section-title {
  font-size: clamp(30px, 4.6vw, 48px);
  line-height: 1.08;
  letter-spacing: var(--tr-title);
  margin-bottom: 18px;
}

/* Üst etiket: Apple'da küçük, mavi ya da gri, kalın değil */
.eyebrow {
  font-size: 17px;
  line-height: 1.23536;
  font-weight: 600;
  letter-spacing: var(--tr-body);
  color: var(--accent-link);
  margin-bottom: 10px;
}

/* Alt başlık / giriş metni — Apple: 21-28px, hafif, gri değil koyu */
.lead {
  font-size: clamp(19px, 2.1vw, 28px);
  line-height: 1.21;
  font-weight: 400;
  letter-spacing: 0.007em;
  color: var(--text);
}

/* Gövde metni */
.section-copy {
  font-size: 17px;
  line-height: 1.47059;
  letter-spacing: var(--tr-body);
  color: var(--muted);
  max-width: 62ch;
}
.section-copy.center { margin-inline: auto; }

.fine {
  font-size: 12px;
  line-height: 1.33337;
  letter-spacing: var(--tr-fine);
  color: var(--muted);
}

/* ==========================================================================
   Butonlar ve bağlantılar
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.17648;
  font-weight: 400;
  letter-spacing: var(--tr-body);
  padding: 9px 18px;
  min-height: 36px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out),
              border-color 0.2s var(--ease-out), transform 0.12s var(--ease-out);
}
.btn-lg {
  font-size: 17px;
  padding: 12px 24px;
  min-height: 44px;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
}
.btn-primary:hover { background: #0077ed; }

.btn-secondary {
  background: transparent;
  color: var(--accent-link);
  border-color: var(--accent-link);
}
.btn-secondary:hover {
  background: var(--accent-link);
  color: #fff;
}

/* Apple'ın sistem geneli basma geri bildirimi */
.btn:active { transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) {
  .btn:active { transform: none; }
}

/* Apple'ın "Learn more ›" bağlantısı */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--accent-link);
  font-size: 17px;
  line-height: 1.23536;
  letter-spacing: var(--tr-body);
  text-decoration: none;
}
.text-link:hover { text-decoration: underline; }
.text-link .chev {
  flex: none;
  transition: transform 0.2s var(--ease-out);
}
.text-link:hover .chev { transform: translateX(2px); }
@media (prefers-reduced-motion: reduce) {
  .text-link:hover .chev { transform: none; }
}

/* Gövde metni içindeki satır içi bağlantı */
.section-copy a,
.answer a,
.price-note a,
.booking-fallback a { color: var(--accent-link); text-decoration: none; }
.section-copy a:hover,
.answer a:hover,
.price-note a:hover,
.booking-fallback a:hover { text-decoration: underline; }

/* ==========================================================================
   Açılış hareketi
   JS yoksa her şey görünür kalır: başlangıç durumu yalnızca html.js altında.
   ========================================================================== */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
html.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   Üst bar — Apple'ın buzlu ürün gezinme çubuğu
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid var(--line-nav);
}
/* Buzlu cam yalnızca destekleyen tarayıcıda; desteklenmiyorsa yukarıdaki
   opak zemin kalır ve metin her koşulda okunur olur. */
/* Buzlu cam AYRI bir katmanda durur, üst barın kendisinde DEĞİL.
   Sebep: backdrop-filter verilen öge, içindeki position:fixed çocuklar için
   kapsayıcı blok oluşturur. Filtre .site-header üzerindeyken mobil menü
   (.main-nav, fixed) viewport'a değil 52px'lik bara göre konumlanıyor ve
   52px'lik bir şeride sıkışıp kaydırılamıyordu. Sözde öge çocuk olmadığı
   için menü yeniden viewport'a bağlanır, görünüm aynı kalır. */
@supports ((backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))) {
  .site-header { background: transparent; }
  .site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
  }
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 100%;
  max-width: calc(var(--container-wide) + var(--gutter) * 2);
}

/* Marka: Apple'ın ürün alt gezinmesinde solda 21px/600 ürün adı durur */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--text);
}
.brand-mark { flex: none; color: var(--text); }
.brand-text {
  font-family: var(--font-head);
  font-size: 21px;
  line-height: 1.19;
  font-weight: 600;
  letter-spacing: 0.011em;
}
.brand-text em {
  font-style: normal;
  font-weight: 400;
  color: var(--muted);
}

/* Marka adı üst barda ASLA satır kırmaz: kırıldığında yapışkan bar 52px'i
   aşıyor ve Apple'ın sabit yükseklikli gezinme çizgisi bozuluyor. Dar
   ekranlarda ad küçülür, kırpılmaz. */
.brand-text { white-space: nowrap; }
@media (max-width: 833px) {
  .brand-text { font-size: 17px; }
}
@media (max-width: 374px) {
  .brand-text { font-size: 15px; }
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 26px;
}
.main-nav a {
  font-size: 14px;
  line-height: 1.28577;
  letter-spacing: var(--tr-caption);
  color: rgba(29, 29, 31, 0.8);
  text-decoration: none;
  transition: color 0.2s var(--ease-out);
}
.main-nav a:hover { color: var(--text); }
.main-nav a[aria-current="page"] { color: var(--text); }
.main-nav .btn {
  font-size: 14px;
  letter-spacing: var(--tr-caption);
  padding: 6px 14px;
  min-height: 32px;
  color: #fff;
}
.main-nav .btn:hover { color: #fff; }

/* Hamburger */
.nav-toggle {
  display: none;
  width: 36px; height: 36px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  position: relative;
}
.nav-toggle .bar {
  position: absolute;
  left: 9px;
  width: 18px;
  height: 1px;
  background: var(--text);
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}
.nav-toggle .bar:nth-child(1) { top: 13px; }
.nav-toggle .bar:nth-child(2) { top: 18px; }
.nav-toggle .bar:nth-child(3) { top: 23px; }
body.nav-open .nav-toggle .bar:nth-child(1) { transform: translateY(5px) rotate(45deg); }
body.nav-open .nav-toggle .bar:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle .bar:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 833px) {
  .nav-toggle { display: block; }
  .main-nav {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 12px var(--gutter) 40px;
    background: rgba(255, 255, 255, 0.96);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
    overflow-y: auto;
  }
  @supports ((backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))) {
    .main-nav {
      background: rgba(255, 255, 255, 0.84);
      -webkit-backdrop-filter: saturate(180%) blur(20px);
      backdrop-filter: saturate(180%) blur(20px);
    }
  }
  body.nav-open .main-nav {
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
  .main-nav a {
    font-size: 21px;
    line-height: 1.19;
    letter-spacing: 0.011em;
    color: var(--text);
    padding: 16px 2px;
    border-bottom: 1px solid var(--line-soft);
  }
  .main-nav .btn {
    margin-top: 24px;
    font-size: 17px;
    padding: 12px 24px;
    min-height: 44px;
    border-bottom: 0;
    align-self: flex-start;
  }
}

/* ==========================================================================
   Hero — Apple ürün sayfası açılışı
   ========================================================================== */
.hero {
  padding-top: clamp(52px, 8vw, 96px);
  padding-bottom: clamp(40px, 6vw, 72px);
  text-align: center;
  background: var(--surface);
}
.hero-inner { max-width: calc(820px + var(--gutter) * 2); }

.hero-kicker {
  font-size: 17px;
  line-height: 1.23536;
  font-weight: 600;
  letter-spacing: var(--tr-body);
  color: var(--accent-link);
  margin-bottom: 8px;
}
.hero-title { margin-bottom: 18px; }
.hero-lede {
  font-size: clamp(19px, 2.1vw, 24px);
  line-height: 1.33;
  letter-spacing: 0.009em;
  color: var(--text);
  max-width: 58ch;
  margin-inline: auto;
}
/* Tek eylem: buton ve altındaki güven satırı dikey yığılır. */
.hero-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: clamp(30px, 3.4vw, 42px);
}

/* Hero butonu — sayfanın tek çağrısı olduğu için Apple'ın store hero
   butonundan belirgin şekilde iri. Renkli gölge tek yerde ve düşük alfada
   kullanılır: butonu yüzeyden ayırır ama Apple'ın düz dilini bozmaz.
   Gölge rengi panel vurgu renginden türer (--accent-soft), böylece renk
   değişince gölge de birlikte değişir. */
.btn-hero {
  font-size: clamp(19px, 1.7vw, 23px);
  line-height: 1.18;
  font-weight: 500;
  letter-spacing: 0.011em;
  padding: clamp(17px, 1.9vw, 22px) clamp(38px, 4.2vw, 62px);
  min-height: 66px;
  box-shadow: 0 6px 22px var(--accent-soft), 0 1px 3px rgba(0, 0, 0, 0.06);
  transition: background-color 0.2s var(--ease-out), transform 0.25s var(--ease),
              box-shadow 0.25s var(--ease);
}
/* İmleç üzerine gelmeden de yükseltilmiş durur: buton beklemede değil,
   davet eder halde. Üzerine gelince bir tık daha yükselir ki etkileşim
   geri bildirimi kaybolmasın. */
.btn-hero:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 48px var(--accent-soft), 0 4px 12px rgba(0, 0, 0, 0.12),
              inset 0 1px 0 rgba(255, 255, 255, 0.26);
}
.btn-hero:active { transform: translateY(-1px) scale(0.97); }

/* Yüzey kabartması: üstten ışık, alttan gölge. Vurgu renginin ÜSTÜNE saydam
   katman olarak bindiği için panelden renk değişince birlikte çalışır —
   sabit bir mavi gradyan yazılsaydı renk değişiminde bozulurdu. */
.btn-hero, .btn-mobil {
  position: relative;
  overflow: hidden;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0) 46%, rgba(0, 0, 0, 0.12));
  box-shadow: 0 10px 30px var(--accent-soft), 0 2px 8px rgba(0, 0, 0, 0.10),
              inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

/* Dinlenme durumu = eski üzerine gelme durumu */
.btn-hero {
  transform: translateY(-2px);
  box-shadow: 0 18px 42px var(--accent-soft), 0 3px 10px rgba(0, 0, 0, 0.11),
              inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

.btn-ikon { flex: none; }
.btn-hero .btn-yazi, .btn-mobil .btn-yazi { position: relative; z-index: 1; }
/* Ok da sürekli hareket eder: üzerine gelinmesini beklemez. */
.btn-hero .chev {
  flex: none;
  margin-left: 2px;
  animation: chev-durt 2.8s ease-in-out 1s infinite;
}
@keyframes chev-durt {
  0%, 60%, 100% { transform: translateX(0); }
  72%           { transform: translateX(5px); }
  84%           { transform: translateX(0); }
}
.btn-hero.durdur .chev { animation-play-state: paused; }

/* Arada bir geçen ışık süpürmesi: göz butona döner. Yalnızca transform
   animasyonu — kompozit katmanda kalır, kaydırmayı yavaşlatmaz. */
.btn-hero::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.32), transparent);
  transform: translateX(-200%) skewX(-18deg);
  pointer-events: none;
  animation: btn-parilti 5s ease-in-out 1.6s infinite;
}
@keyframes btn-parilti {
  0%   { transform: translateX(-200%) skewX(-18deg); }
  16%  { transform: translateX(330%) skewX(-18deg); }
  100% { transform: translateX(330%) skewX(-18deg); }
}
/* Ekran dışındayken durur: görünmeyen sonsuz döngü boşuna kare harcıyor. */
.btn-hero.durdur::after { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .btn-hero { transform: none; }
  .btn-hero:hover, .btn-hero:active { transform: none; }
  .btn-hero .chev { animation: none; transform: none; }
  .btn-hero::after { animation: none; opacity: 0; }
}

.hero-buton-alt {
  font-size: 14px;
  line-height: 1.42859;
  letter-spacing: var(--tr-caption);
  color: var(--muted);
}

/* Apple hero'sunda başlıktan hemen sonra büyük ürün görseli gelir */
.hero-media {
  margin-top: clamp(32px, 5vw, 56px);
}
.hero-media img,
.hero-media svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-tile);
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--surface-2);
}

/* ==========================================================================
   Beyan bölümü (manifesto) — Apple'ın büyük tek cümlelik sahnesi
   ========================================================================== */
.statement {
  text-align: center;
}
.statement .quote {
  font-size: clamp(28px, 4.2vw, 48px);
  line-height: 1.1;
  letter-spacing: var(--tr-title);
  font-weight: 600;
  max-width: 20ch;
  margin-inline: auto;
}
.statement .quote strong { font-weight: 600; color: inherit; }
.statement .section-copy {
  margin: 22px auto 0;
  max-width: 58ch;
}

/* ==========================================================================
   Hizmet kutuları — Apple'ın ana sayfa ürün ızgarası
   ========================================================================== */
.tile-grid {
  display: grid;
  gap: 20px;
  margin-top: 34px;
}
@media (min-width: 735px) {
  .tile-grid { grid-template-columns: repeat(2, 1fr); }
}

.tile {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--surface-2);
  border-radius: var(--r-tile);
  padding: clamp(28px, 3.2vw, 40px) clamp(22px, 2.6vw, 32px);
  text-align: center;
  transition: transform 0.4s var(--ease);
}
.tile:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
  .tile:hover { transform: none; }
}
.tile .no {
  font-size: 12px;
  line-height: 1.33337;
  letter-spacing: var(--tr-fine);
  color: var(--muted);
}
.tile svg {
  width: 30px; height: 30px;
  margin: 2px auto 4px;
  color: var(--text);
}
.tile h3 {
  font-size: 24px;
  line-height: 1.16;
  letter-spacing: var(--tr-title);
  font-weight: 600;
}
.tile p {
  font-size: 17px;
  line-height: 1.47059;
  letter-spacing: var(--tr-body);
  color: var(--muted);
  flex: 1;
}
.tile .price {
  font-size: 17px;
  line-height: 1.23536;
  letter-spacing: var(--tr-body);
  color: var(--text);
  font-weight: 600;
  margin-top: 4px;
}

.tile-foot { margin-top: 30px; text-align: center; }

/* ==========================================================================
   İkiye bölünmüş anlatım (usta) — Apple'ın görsel + metin sahnesi
   ========================================================================== */
.split {
  display: grid;
  gap: clamp(30px, 4vw, 64px);
  align-items: center;
}
@media (min-width: 835px) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}

.master-photo {
  margin: 0;
  border-radius: var(--r-tile);
  overflow: hidden;
  background: var(--surface-2);
}
/* 4:5 portre geniş bir sütunda 800 pikseli aşıyor ve metnin yanında
   orantısız duruyordu; yükseklik sınırlanır, taşan kısım kırpılır. */
.master-photo img,
.master-photo svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  max-height: 600px;
  object-fit: cover;
}
.master-sign {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.28577;
  letter-spacing: var(--tr-caption);
  color: var(--muted);
}

/* Sayaçlar — Apple'ın büyük rakam + küçük etiket bloğu */
.counters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 26px 20px;
  margin-top: 36px;
  padding-top: 30px;
  border-top: 1px solid var(--line-soft);
}
.counter .num {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(32px, 3.6vw, 44px);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: var(--tr-title);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.counter .label {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.28577;
  letter-spacing: var(--tr-caption);
  color: var(--muted);
}

/* ==========================================================================
   Galeri — Apple'ın yatay kaydırmalı, tutunmalı şeridi
   ========================================================================== */
.gallery-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  max-width: calc(var(--container-wide) + var(--gutter) * 2);
}
.gallery-head .section-title { margin-bottom: 0; }

.gallery-viewport {
  margin-top: 30px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Şerit kenarlardan değil, kapsayıcı hizasından başlar */
  padding-inline: max(var(--gutter), calc((100% - var(--container-wide)) / 2));
  padding-block: 4px 10px;
  scroll-padding-inline-start: max(var(--gutter), calc((100% - var(--container-wide)) / 2));
}
.gallery-viewport::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) {
  .gallery-viewport { scroll-behavior: auto; }
}

.gallery-track {
  display: flex;
  gap: 20px;
  width: max-content;
}
.gallery-item {
  flex: none;
  width: clamp(230px, 26vw, 320px);
  scroll-snap-align: start;
}
.gallery-item figure { margin: 0; }
.gallery-item img,
.gallery-item svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-card);
  background: var(--surface);
}
.gallery-item figcaption {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.28577;
  letter-spacing: var(--tr-caption);
  color: var(--muted);
}

/* Apple'ın 36px dairesel şerit okları */
.gallery-nav {
  display: flex;
  gap: 10px;
}
.gallery-btn {
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(210, 210, 215, 0.64);
  color: rgba(29, 29, 31, 0.72);
  cursor: pointer;
  transition: background-color 0.2s var(--ease-out), opacity 0.2s var(--ease-out);
}
.gallery-btn:hover { background: rgba(210, 210, 215, 0.9); }
.gallery-btn:disabled { opacity: 0.35; cursor: default; }
.gallery-btn svg { width: 16px; height: 16px; }

/* Apple bölüm başlıkları ortalanır; altındaki içerik (ızgara, akordeon, kart)
   kendi hizasında kalır. Ortalanmayan tek başlık galeri şeridininki: orada
   başlığın sağında oklar durduğu için sola yaslı kalması doğru. */
.reviews > .container-wide > .eyebrow,
.reviews > .container-wide > .section-title,
#sss > .container > .eyebrow,
#sss > .container > .section-title,
.location > .container-wide > .eyebrow,
.location > .container-wide > .section-title {
  text-align: center;
}

/* ==========================================================================
   Yorumlar
   ========================================================================== */
.reviews-grid {
  display: grid;
  gap: 20px;
  margin-top: 34px;
  list-style: none;
}
@media (min-width: 735px) {
  .reviews-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
}
.review-card {
  display: flex;
  flex-direction: column;
  background: var(--surface-raised);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-card);
  padding: 28px 26px;
}
.section-alt .review-card,
.reviews.section-alt .review-card { background: #fff; }
.review-card figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}
.review-stars {
  color: var(--accent-link);
  font-size: 15px;
  letter-spacing: 0.12em;
}
.review-card blockquote {
  margin: 0;
  font-size: 17px;
  line-height: 1.47059;
  letter-spacing: var(--tr-body);
  color: var(--text);
  flex: 1;
}
.review-card .author {
  font-size: 14px;
  line-height: 1.28577;
  letter-spacing: var(--tr-caption);
  color: var(--muted);
}
.ilke-listesi { list-style: none; padding: 0; }
.ilke-listesi .review-card p {
  font-size: 17px;
  line-height: 1.47059;
  letter-spacing: var(--tr-body);
  color: var(--muted);
}
.ilke-listesi .review-card strong { color: var(--text); display: block; margin-bottom: 4px; }

/* ==========================================================================
   SSS — Apple'ın saç çizgili akordeonu
   ========================================================================== */
.faq-list {
  margin-top: 30px;
  border-top: 1px solid var(--line-soft);
}
.faq-item { border-bottom: 1px solid var(--line-soft); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 2px;
  cursor: pointer;
  list-style: none;
  font-size: 19px;
  line-height: 1.26;
  font-weight: 600;
  letter-spacing: var(--tr-title);
  color: var(--text);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "";
  flex: none;
  width: 9px; height: 9px;
  border-right: 1.5px solid var(--accent-link);
  border-bottom: 1.5px solid var(--accent-link);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.3s var(--ease);
}
.faq-item[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
/* Yükseklik animasyonu için taşma kesilmeli: JS açılırken 0 → ölçülen
   yükseklik arası geçiş yapıyor. */
.faq-item .answer {
  padding: 0 2px 22px;
  overflow: hidden;
}
.faq-item .answer p {
  font-size: 17px;
  line-height: 1.47059;
  letter-spacing: var(--tr-body);
  color: var(--muted);
  max-width: 70ch;
}

/* ==========================================================================
   Konum kartı
   ========================================================================== */
.location-card {
  display: grid;
  gap: 0;
  margin-top: 32px;
  background: var(--surface-raised);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-tile);
  overflow: hidden;
}
.section-alt .location-card { background: #fff; }
@media (min-width: 835px) {
  .location-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
}
.location-card > div:first-child { padding: clamp(28px, 3.4vw, 44px); }
.location-card h3 {
  font-size: 28px;
  line-height: 1.14;
  letter-spacing: var(--tr-title);
  margin-bottom: 12px;
}
.location-lines {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 22px 0 26px;
  font-style: normal;
}
.location-line {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 17px;
  line-height: 1.47059;
  letter-spacing: var(--tr-body);
  color: var(--muted);
}
.location-line svg { flex: none; margin-top: 5px; color: var(--accent-link); }
.location-line a { color: var(--accent-link); text-decoration: none; }
.location-line a:hover { text-decoration: underline; }

.map-frame {
  min-height: 320px;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 14px;
  letter-spacing: var(--tr-caption);
  text-align: center;
  padding: 20px;
}
.map-frame iframe {
  width: 100%;
  height: 100%;
  min-height: 320px;
  border: 0;
  display: block;
}

/* ==========================================================================
   Kapanış çağrısı
   ========================================================================== */
/* Bölüm ritmi: ... SSS (beyaz) → konum (gri) → kapanış (beyaz) → altbilgi (gri).
   Kapanış çağrısı iki gri arasında beyaz kalır; Apple'ın sayfa sonu ritmi. */
.final-cta {
  text-align: center;
  padding-block: clamp(64px, 9vw, 120px);
}
.final-title {
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.07;
  letter-spacing: var(--tr-display);
  margin-bottom: 16px;
}
.final-cta .section-copy { margin-inline: auto; }
.final-cta .btn { margin-top: 28px; }

/* ==========================================================================
   İç sayfa başlığı
   ========================================================================== */
.page-hero {
  padding-top: clamp(48px, 6.5vw, 84px);
  padding-bottom: clamp(28px, 4vw, 48px);
  text-align: center;
}
.page-hero h1 {
  font-size: clamp(34px, 5.4vw, 56px);
  line-height: 1.07;
  letter-spacing: var(--tr-display);
  margin-bottom: 16px;
}
.page-hero .section-copy { margin-inline: auto; }

/* ==========================================================================
   Hizmet detayları ve fiyat tablosu
   ========================================================================== */
.service-detail {
  border-top: 1px solid var(--line-soft);
  padding: clamp(28px, 3.4vw, 44px) 0;
  display: grid;
  gap: 12px 40px;
}
.service-detail:last-child { border-bottom: 1px solid var(--line-soft); }
@media (min-width: 835px) {
  .service-detail { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}
.service-detail .head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.service-detail .head .no {
  font-size: 12px;
  line-height: 1.33337;
  letter-spacing: var(--tr-fine);
  color: var(--muted);
}
.service-detail .head h2 {
  font-size: clamp(24px, 2.8vw, 32px);
  line-height: 1.125;
  letter-spacing: var(--tr-title);
}
.service-detail .head .price {
  font-size: 19px;
  line-height: 1.26;
  font-weight: 600;
  letter-spacing: var(--tr-title);
  color: var(--accent-link);
}
.service-detail .body p {
  font-size: 17px;
  line-height: 1.47059;
  letter-spacing: var(--tr-body);
  color: var(--muted);
}
.includes {
  list-style: none;
  margin-top: 16px;
  display: grid;
  gap: 8px;
}
.includes li {
  position: relative;
  padding-left: 24px;
  font-size: 17px;
  line-height: 1.47059;
  letter-spacing: var(--tr-body);
  color: var(--muted);
}
/* Onay işareti: iki kenarlıktan çizilir, ek ağ isteği yok */
.includes li::before {
  content: "";
  position: absolute;
  left: 3px; top: 8px;
  width: 5px; height: 10px;
  border-right: 1.5px solid var(--accent-link);
  border-bottom: 1.5px solid var(--accent-link);
  transform: rotate(45deg);
}

.price-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 30px;
  font-size: 17px;
  letter-spacing: var(--tr-body);
}
.price-table th,
.price-table td {
  text-align: left;
  padding: 16px 12px;
  border-bottom: 1px solid var(--line-soft);
}
.price-table thead th {
  font-size: 12px;
  line-height: 1.33337;
  letter-spacing: var(--tr-fine);
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  border-bottom: 1px solid var(--line);
}
.price-table tbody th {
  font-weight: 400;
  color: var(--text);
}
.price-table td:last-child {
  font-weight: 600;
  white-space: nowrap;
}
.price-note {
  margin-top: 18px;
  font-size: 14px;
  line-height: 1.42859;
  letter-spacing: var(--tr-caption);
  color: var(--muted);
  max-width: 70ch;
}

/* ==========================================================================
   İletişim
   ========================================================================== */
/* Kartlar kendi yüksekliğinde durur: ızgara varsayılan olarak hepsini en
   uzun karta (çalışma saatleri tablosu) esnetiyor ve kısa kartların altında
   büyük boş alan kalıyordu. */
.contact-grid {
  display: grid;
  gap: 20px;
  align-items: start;
}
@media (min-width: 735px) {
  .contact-grid { grid-template-columns: repeat(2, 1fr); }
}
.contact-card {
  background: var(--surface-2);
  border-radius: var(--r-tile);
  padding: clamp(26px, 3vw, 36px);
}
.contact-card h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 21px;
  line-height: 1.19;
  letter-spacing: 0.011em;
  margin-bottom: 10px;
}
.contact-card h2 svg { flex: none; color: var(--accent-link); }
.contact-card p {
  font-size: 17px;
  line-height: 1.47059;
  letter-spacing: var(--tr-body);
  color: var(--muted);
}
.big-link {
  display: inline-block;
  margin-top: 16px;
  font-size: 24px;
  line-height: 1.16;
  font-weight: 600;
  letter-spacing: var(--tr-title);
  color: var(--accent-link);
  text-decoration: none;
}
.big-link:hover { text-decoration: underline; }

.hours-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
  font-size: 17px;
  letter-spacing: var(--tr-body);
}
.hours-table th,
.hours-table td {
  text-align: left;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-soft);
}
.hours-table th { font-weight: 400; color: var(--text); }
.hours-table td { color: var(--muted); text-align: right; }
.hours-table tr:last-child th,
.hours-table tr:last-child td { border-bottom: 0; }
.hours-table tr.closed th,
.hours-table tr.closed td { color: rgba(110, 110, 115, 0.6); }

/* ==========================================================================
   Randevu
   ========================================================================== */
.booking-wrap {
  position: relative;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-tile);
  overflow: hidden;
  background: var(--surface-raised);
}
.booking-frame { display: block; }
.booking-skeleton {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--surface);
  color: var(--muted);
  font-size: 14px;
  letter-spacing: var(--tr-caption);
  transition: opacity 0.4s var(--ease);
}
.booking-skeleton.is-hidden {
  opacity: 0;
  pointer-events: none;
}
.spinner {
  width: 26px; height: 26px;
  margin-bottom: 12px;
  border: 2px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 2.4s; }
}
.booking-fallback {
  margin-top: 18px;
  font-size: 14px;
  line-height: 1.42859;
  letter-spacing: var(--tr-caption);
  color: var(--muted);
  text-align: center;
}

/* ==========================================================================
   Ekip
   ========================================================================== */
.team-grid {
  display: grid;
  gap: 30px;
  margin-top: 34px;
}
@media (min-width: 735px) {
  .team-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}
.team-member .section-copy { margin-top: 10px; }

/* ==========================================================================
   404
   ========================================================================== */
.error-page {
  min-height: 62vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px var(--gutter);
}
.error-code {
  font-family: var(--font-head);
  font-size: clamp(60px, 12vw, 120px);
  line-height: 1;
  font-weight: 600;
  letter-spacing: var(--tr-display);
  color: var(--line);
  margin-bottom: 8px;
}
.error-page h1 {
  font-size: clamp(28px, 5vw, 44px);
  line-height: 1.08;
  letter-spacing: var(--tr-display);
}
.error-page .section-copy { margin-inline: auto; margin-top: 14px; }
.error-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 28px;
}

/* ==========================================================================
   Altbilgi — Apple'ın açık gri, 12px altbilgisi
   ========================================================================== */
.site-footer {
  background: var(--surface-2);
  padding-block: 40px 24px;
  font-size: 12px;
  line-height: 1.33337;
  letter-spacing: var(--tr-fine);
  color: var(--muted);
}
.site-footer .container { max-width: calc(var(--container-wide) + var(--gutter) * 2); }
.footer-grid {
  display: grid;
  gap: 30px 40px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 735px) {
  .footer-grid { grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); }
}
.footer-baslik {
  font-size: 12px;
  line-height: 1.33337;
  letter-spacing: var(--tr-fine);
  font-weight: 600;
  color: var(--text);
  margin-bottom: 10px;
}
.site-footer ul { list-style: none; display: grid; gap: 8px; }
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--text); text-decoration: underline; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  justify-content: space-between;
  padding-top: 18px;
}

/* ==========================================================================
   Mobil sabit çağrı çubuğu
   ========================================================================== */
.mobile-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: none;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.92);
  border-top: 1px solid var(--line-nav);
}
@supports ((backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))) {
  .mobile-cta {
    background: rgba(255, 255, 255, 0.78);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
  }
}
.mobile-cta .btn { width: 100%; }

@media (max-width: 734px) {
  .mobile-cta { display: block; }
  body.has-mobile-cta { padding-bottom: 72px; }
  body.nav-open .mobile-cta { display: none; }
}

/* Menü açıkken arka plan kaymasın */
body.nav-open { overflow: hidden; }

/* ==========================================================================
   Yazdırma
   ========================================================================== */
@media print {
  .site-header, .mobile-cta, .gallery, .booking-wrap, .skip-link { display: none !important; }
  body { color: #000; background: #fff; }
  html.js [data-reveal] { opacity: 1; transform: none; }
}

/* ==========================================================================
   Randevu katmanı
   "Randevu Al" sayfa değiştirmez: randevu ekranı doğrudan ziyaretçinin önüne
   açılır. Katman `hidden` başlar; JS yoksa hiç görünmez ve bağlantılar normal
   şekilde /randevu/ sayfasına gider.
   ========================================================================== */
.randevu-katman {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.randevu-arka {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.42);
  opacity: 0;
  transition: opacity 0.32s var(--ease);
}
@supports ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
  .randevu-arka {
    -webkit-backdrop-filter: saturate(140%) blur(8px);
    backdrop-filter: saturate(140%) blur(8px);
  }
}

.randevu-sayfa {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(1060px, 100%);
  height: min(900px, 100%);
  background: var(--surface);
  border-radius: var(--r-tile);
  overflow: hidden;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.26);
  opacity: 0;
  transform: translateY(14px) scale(0.985);
  transition: opacity 0.36s var(--ease), transform 0.36s var(--ease);
}

html.randevu-acik .randevu-arka { opacity: 1; }
html.randevu-acik .randevu-sayfa { opacity: 1; transform: none; }

/* Açıkken arkadaki sayfa kaymasın */
html.randevu-acik, html.randevu-acik body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .randevu-arka, .randevu-sayfa { transition: none; }
  .randevu-sayfa { transform: none; }
}

.randevu-ust {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 14px 13px 22px;
  border-bottom: 1px solid var(--line-soft);
}
.randevu-baslik {
  font-size: 17px;
  line-height: 1.23536;
  font-weight: 600;
  letter-spacing: var(--tr-body);
  color: var(--text);
  /* Uzun işletme adlarında başlık ipucunu sıkıştırmasın */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.randevu-ust-sag {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Kapatma düğmesine işaret eden ipucu. Sessiz bir yardım çipi: Apple'ın
   ipucu dili — küçük, gri zeminli, hap biçimli. */
.randevu-ipucu {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: var(--tr-caption);
  white-space: nowrap;
}
.randevu-ipucu span {
  color: var(--text);
  font-size: 14px;
  line-height: 1;
}

/* Dar ekranda ipucu başlıktan önemlidir: başlık görsel olarak gizlenir ama
   iletişim kutusunu adlandırmaya devam ettiği için DOM'dan kaldırılmaz. */
@media (max-width: 559px) {
  .randevu-baslik {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .randevu-ust { justify-content: flex-end; padding-left: 14px; }
}

/* Çok dar telefonlarda metin kısalır, ok kalır */
@media (max-width: 359px) {
  .randevu-ipucu { font-size: 12px; padding: 5px 10px; }
}

/* Apple'ın 32px dairesel kapatma düğmesi */
.randevu-kapat {
  flex: none;
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(210, 210, 215, 0.64);
  color: rgba(29, 29, 31, 0.72);
  cursor: pointer;
  transition: background-color 0.2s var(--ease-out), transform 0.12s var(--ease-out);
}
.randevu-kapat:hover { background: rgba(210, 210, 215, 0.95); }
.randevu-kapat:active { transform: scale(0.92); }

/* min-height:0 olmadan esnek çocuk iframe'in içeriğine göre taşar */
.randevu-govde {
  position: relative;
  flex: 1;
  min-height: 0;
  background: var(--surface);
}
.randevu-govde .booking-frame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.randevu-yedek {
  flex: none;
  padding: 10px 22px 13px;
  font-size: 12px;
  line-height: 1.33337;
  letter-spacing: var(--tr-fine);
  color: var(--muted);
  border-top: 1px solid var(--line-soft);
}
.randevu-yedek .text-link { font-size: 12px; letter-spacing: var(--tr-fine); }

/* Mobilde tam ekran sayfa */
@media (max-width: 734px) {
  .randevu-katman { padding: 0; }
  .randevu-sayfa {
    width: 100%;
    height: 100%;
    border-radius: 0;
  }
  .randevu-ust { padding-top: calc(13px + env(safe-area-inset-top)); }
  .randevu-yedek { padding-bottom: calc(13px + env(safe-area-inset-bottom)); }
}

/* ==========================================================================
   Google puan rozeti
   Ana sayfada butonun altında, iletişim sayfasında konum kartında. Gerçek
   profil verisi: sayfada en güçlü güven sinyali, bu yüzden butona bitişik.
   ========================================================================== */
.hero-puan, .konum-puan {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 1.28577;
  letter-spacing: var(--tr-caption);
  color: var(--muted);
  text-decoration: none;
}
.hero-puan strong, .konum-puan strong {
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.puan-yildiz {
  display: inline-flex;
  gap: 1px;
  font-size: 15px;
  line-height: 1;
  color: var(--line);
}
.puan-yildiz .dolu { color: #f5a623; }
a.hero-puan:hover .puan-metin, a.konum-puan:hover .puan-metin { text-decoration: underline; }

/* Hero'da rozet butona yakın, güven satırı onun altında */
.hero-actions .hero-puan { margin-top: -2px; }
.hero-actions .hero-buton-alt { margin-top: -6px; }

.konum-puan {
  margin: 0 0 18px;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
}