/* ==========================================================================
   Dilara Onganer Beauty & Hair — Pamukkale / Denizli
   Pudra zemin #FBF7F6, erik mürekkep #241A1D, iki vurgu: gül kurusu #A6425F
   ve erik #7E4A63. Cormorant Garamond (vitrin) + Inter (gövde), 12px köşe,
   gölge yerine
   ince çerçeve. Renklerin tamamı varliklar/renk.css'te; buradaki sabit
   hex'ler yalnız belirteçle ifade edilemeyen yerler (gradyanlar, kart
   zeminleri). Sağdaki tel/fırça şeridi kapalı — bkz. :root notu.
   ========================================================================== */

/* Renk ve tipografi belirteçleri varliklar/renk.css'te — panelle ortak.
   Buradakiler yalnız bu sayfaya ait ölçüler. */
:root{
  --ara: clamp(64px, 11vh, 116px);

  /* SAĞDAKİ TEL/FIRÇA ŞERİDİ KAPATILDI (işletmenin isteği: "hoş durmuyor,
     mobilde çok yer kaplıyor"). Genişlik sıfırlandı, böylece body'nin sağ
     boşluğu da kapandı ve içerik bütün genişliği kullanıyor.

     Geri getirmek için: bu değeri 84px yap, aşağıdaki `.ray{display:none}`
     satırını sil VE dar ekran medya sorgularındaki --ray-alan değerlerini
     (44px / 30px) geri koy. Markup, makas.js ve şeridin bütün CSS'i yerinde
     duruyor — hiçbir şey silinmedi. */
  --ray-alan: 0px;

  /* Üst çubuğun yüksekliği. Tek yerde duruyor çünkü sekans sahnesi de buna
     bakıyor: çubuk sticky ve sahnenin üstüne biniyor, tuvali o kadar aşağı
     itmezsek elin parmak uçlarını kapatıyor (bkz. sekans.css, dar ekran).

     72 → 64 (operatör kararı, 8 Eyl 2026): nedenkapatilsin çubuğu h-16, yani
     64px. Dar ekran zaten 64'tü, artık iki kırılım aynı. Sekans ölçüleri
     (kx, z, tuval 60svh) DEĞİŞMEDİ — sahne kutusu yalnız 8px uzadı, çünkü
     yüksekliği calc(100svh - var(--ust-yuk)). */
  --ust-yuk: 64px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  padding-right:var(--ray-alan);      /* sağdaki tel şeridine yer aç */
  background:var(--kok);
  color:var(--tebesir);
  font-family:var(--govde);
  /* 17 → 18 → 19. İşletme iki turdan sonra hâlâ "küçük duruyor" dedi;
     yazı tipi değişikliğiyle (yüksek x-yüksekliği) birlikte bu punto artık
     masaüstünde rahat okunuyor. */
  font-size:19px;
  /* 400 → 460 → 500. İşletme "biraz daha kalınlaştır" dedi, ikinci kez.
     Inter değişken eksenli yükleniyor (wght@400..800), o yüzden 500 GERÇEK
     bir kesim — tarayıcı sahte kalınlaştırma yapmıyor.
     BU YÜZDEN index.html/panel.html'de ağırlık listesi (400;600;700;800)
     kullanma: 500 yüklenmez ve CSS eşleme kuralı bu satırı sessizce 400'e
     düşürür, yani işletmenin iki kez istediği kalınlık kaybolur. */
  font-weight:500;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* DİKKAT: buraya overflow-x:hidden koyma. Gövdeyi kendi kaydırma kabına
     çeviriyor, window'a scroll olayı gitmiyor ve makas donuyor. */
}

img,svg{ max-width:100%; }

/* ikon deposu ekranda yer kaplamaz */
.depo{ position:absolute; width:0; height:0; overflow:hidden; }

::selection{ background:var(--altin); color:#FFFFFF; }

:focus-visible{
  outline:2px solid var(--altin);
  outline-offset:3px;
}

.atla{
  position:absolute; left:-9999px; top:0;
  background:var(--tebesir); color:#FFFFFF;
  padding:12px 18px; z-index:200; border-radius:0 0 10px 0;
  font-weight:600; text-decoration:none;
}
.atla:focus{ left:0; }

.kap{
  width:100%;
  max-width:1080px;
  margin-inline:auto;
  padding-inline:26px;
}

.mono{ font-family:var(--sayi); font-variant-numeric:tabular-nums; }


/* ————————————————————————— Üst çubuk —————————————————————————
   NEDENKAPATILSIN DÜZENİ — operatör kararı, 8 Eylül 2026.
   Referans: /var/www/nedenkapatilsin/web/templates/web/base.html, <nav>.
   O çubuğun taşıdığı beş özellik buraya alındı:
     · opak beyaz zemin        (orada bg-white, burada --kat)
     · yapışkan üst            (sticky top-0)
     · sürekli duran alt çizgi (border-b)
     · 64px yükseklik          (h-16)
     · sağda yuvarlak DOLU CTA (orada kırmızı, burada pembe --altin)

   ESKİ HÂLİ (tarihsel gerekçe, siliyorum değil üstüne yazıyorum): çubuk
   sayfanın tepesindeyken SAYDAMDI, arkasındaki sekans sahnesi kesilmeden
   devam ediyordu; ust.js kaydırınca `.inik` sınıfını ekliyor ve çubuk beyaza
   oturuyordu. O tercih bırakıldı, çünkü referans çubuk hep opak — ve saydam
   camın arkasından geçen el zaten işletmenin hata olarak gördüğü bir
   görüntüydü (bkz. sekans.css, `.sahne-yapisik` başlığı).

   backdrop-filter KALDIRILDI, gerileme değil: zemin artık opak olduğu için
   bulanıklaştıracak bir arka plan kalmadı, kural ölü koda dönüşmüştü.
   §8'in "backdrop-filter'ı üst çubuk dışında bir yere koyma" kuralı geçerli
   kalıyor — burada da artık yok, başka yerde de yok.

   `.inik` sınıfı DURUYOR ve ust.js'in tek işi hâlâ anlamlı: kaydırılınca
   çubuk çizginin üstüne ince bir gölge alıyor. Referanstaki `shadow`ın
   karşılığı; renkli parlama değil, yükseklik gölgesi (§8). */

.ust{
  position:sticky; top:0; z-index:30;
  background:var(--kat);
  border-bottom:1px solid var(--cizgi);
  box-shadow:0 0 0 rgba(36,26,29,0);
  transition:box-shadow .3s ease;
}
.ust.inik{
  box-shadow:0 1px 3px rgba(36,26,29,.09);
}
.ust-ic{
  display:flex; align-items:center; justify-content:space-between;
  gap:22px; height:var(--ust-yuk);
}

/* LOGO — üçüncü hâli.
   Önce tek ağırlıkta kalın-lowercase tek kelimeydi, sonra ikiye ayrıldı
   ("dilara" sans + "onganer" serif italik pembe). İkincisi güzeldi ama
   LOGO gibi durmuyordu: iki yazı tipi, iki renk, iki punto ve iki farklı
   taban çizgisi bir arada okunduğunda tek bir işaret değil, yan yana
   dizilmiş iki kelime gibi görünüyor.

   Şimdi tersi yapıldı: TEK yazı tipi, TEK renk, TEK ağırlık — ama uçlarda.
   Inter 800 (yüklenen eksenin sonu) ve harfler açık aralıklı büyük harf.
   (Epilogue 900 idi; yazı tipi 8 Eyl 2026'da operatör kararıyla Inter'e
   geçti ve eksen 400..800 isteniyor. 900 yazılsaydı tarayıcı SAHTE kalın
   üretirdi — yüklenmemiş bir ağırlık gerçek kesim değildir. 800 eksenin
   sonu olduğu için logonun "sayfadaki en kalın şey" olma özelliği duruyor.)
   Vuruculuk üç yerden geliyor:
     · ağırlık — 800, sayfadaki en kalın şey
     · kontrast — mürekkep, pembe zeminde 12.9:1, sayfadaki en yüksek
     · aralık — .12em açıklık ismi bir kelime olmaktan çıkarıp işaret yapıyor

   Vurgu pembesi bilerek YOK. Logo pembe olsaydı sayfadaki onlarca pembe
   öğeden biri olurdu; mürekkep onu hepsinden ayırıyor. */
.marka-kucuk{
  display:inline-flex; align-items:center;
  min-height:44px;
  color:var(--tebesir); text-decoration:none;
  transition:opacity .2s;
}
.marka-kucuk:hover{ opacity:.66; }
/* Punto ve harf aralığı KESME NOKTASIZ ölçekleniyor.
   Logo tek satır (white-space:nowrap) ve yanında "Randevu al" düğmesi var;
   dar ekranda sabit punto bırakılsaydı ikisi çakışır ya da düğmeyi ekrandan
   taşırdı. clamp ikisini birden daraltıyor: 360px'te ~140px yer kaplıyor,
   düğmeyle birlikte 320px'lik en dar telefona bile sığıyor.
   Aralık da küçülüyor — küçük puntoda .12em fazla dağıtıyor, harfler
   birbirinden kopuyor. */
.marka-ad{
  font-family:var(--govde);
  font-weight:800;
  font-size:clamp(.9rem, 2.6vw, 1.02rem);
  letter-spacing:clamp(.055em, .5vw, .12em);
  line-height:1;
  white-space:nowrap;
}
/* İki tonlu logo (operatör isteği, 8 Eyl 2026): DİLARA mürekkep, ONGANER
   pembe vurgu — nedenkapatilsin'deki neden/kapatılsın ikiliğinin karşılığı.
   --altin logo boyutunda (14-16px, 800) mürekkep zeminde AA üstünde okunuyor. */
.marka-ad-1{ color:var(--tebesir); }
.marka-ad-2{ color:var(--altin); }

/* ORTADAKİ BAĞLANTI SIRASI KALDIRILDI — kenara hizalı sade üst çubuk.
   Eski hâli en tanınmış şablon kalıbıydı: marka sol, 3-5 metin bağlantı
   orta/sağ, dolu CTA en sağ, yapışık, altta saç teli çizgi. O şekil türe
   kör — bir kuaförde de, bir SaaS'ta da aynı duruyor.

   Artık marka solda, tek gerçek eylem sağda, arası boş. Aradaki boşluk
   doldurulmamalı; doldurulursa aynı kalıba geri dönülür.

   İki kazanç daha: mobilde bu bağlantılar ZATEN gizliydi (1731. satır),
   yani masaüstü ile mobil ilk kez aynı şekli taşıyor; ve üç bağlantının
   üçü de altbilgide duruyor, erişim kaybolmuyor.

   "Randevu al" DOLU kalıyor: sayfanın tek gerçek eylemi o ve işletme
   randevuyla çalışıyor. Kaldırılan şey bağlantı sırası, düğmenin ağırlığı
   değil. */

/* Duyuru üst çubuğun ardından normal akışta yer alır; sekansın veya sticky
   başlığın üstüne binmez. hidden seçicisi ilk boyamadaki boş şeridi önler. */
.duyuru-seridi{
  position:relative;
  z-index:20;
  background:var(--tebesir);
  color:var(--kat);
  border-bottom:1px solid var(--cizgi);
}
.duyuru-seridi[hidden]{ display:none; }
.duyuru-ic{
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  padding-block:6px;
}
.duyuru-ic p{
  margin:0;
  font-size:.86rem;
  line-height:1.35;
  text-align:center;
}
.duyuru-ic button{
  flex:0 0 44px;
  width:44px;
  height:44px;
  margin-block:-6px;
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  font:500 1.5rem/1 var(--govde);
  cursor:pointer;
}


/* ————————————————————————— Düğmeler ————————————————————————— */

.dugme{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 24px;
  border:1px solid transparent; border-radius:12px;
  font-family:var(--govde); font-size:1.02rem; font-weight:600;
  text-decoration:none; cursor:pointer;
  transition:background .22s, color .22s, border-color .22s, transform .22s;
}
.dugme:active{ transform:translateY(0); }

/* Dolu düğme artık kömür değil pembe: sayfadaki tek eylem rengi o olsun.
   Beyaz yazı --altin (#A6425F) üzerinde kontrast ~5.5 — normal metin için
   yeterli. Üzerine gelince aynı tonun koyusu, açığı değil. */
.dugme-dolu{
  background:var(--altin); color:#FFFFFF; border-color:var(--altin);
}
.dugme-dolu:hover{
  background:#8C2447; border-color:#8C2447;
  transform:translateY(-2px);
}
.dugme-ince{ background:var(--kat); border-color:var(--cizgi); color:var(--tebesir); }
.dugme-ince:hover{ border-color:var(--altin); color:var(--altin); transform:translateY(-2px); }
/* ÜST ÇUBUĞUN TEK EYLEMİ — nedenkapatilsin'deki yuvarlak dolu butonun pembe
   karşılığı. Orada kırmızı (bg-red-600), burada --altin (#A62E56): bu sitede
   kırmızı AYRI BİR ROL (hata/iptal/dolu, bkz. renk.css) ve marka rengi
   değil. Vurgu pembe kalıyor.

   min-height:44px açıkça yazıldı: dokunma hedefi eşiği (§9) satır yüksekliği
   mirasına bırakılmayacak kadar önemli.

   translateY KALDIRILDI, yalnız bu çubukta: referans butonun hover'ı sadece
   koyulaşma. Yapışkan bir çubukta 2px zıplayan bir düğme, kaydırırken
   çubuğun kendisi oynuyormuş gibi duruyor. Sayfanın geri kalanındaki dolu
   düğmeler yükselmeye devam ediyor. */
.ust .dugme-dolu{
  border-radius:999px;
  padding:11px 22px;
  min-height:44px;
  font-size:.96rem;
}
.ust .dugme-dolu:hover{ background:#8C2447; border-color:#8C2447; transform:none; }
.ust .dugme-ince{ padding:9px 18px; font-size:.94rem; }

.dugme-wa{ background:var(--yesil); color:#FFFFFF; width:100%; }
.dugme-wa:hover{ background:#17643E; transform:translateY(-2px); }
.dugme-wa[aria-disabled="true"],
.dugme-wa:disabled{ opacity:.32; pointer-events:none; }

.dugme-sira{ display:flex; flex-wrap:wrap; gap:12px; }

.bag{
  color:var(--altin); text-decoration:none;
  border-bottom:1px solid #D98BA8;
  padding-bottom:1px;
  transition:color .2s, border-color .2s;
}
.bag:hover{ color:var(--tebesir); border-bottom-color:#D98BA8; }


/* ————————————————————————— Kahraman ————————————————————————— */

/* Ortalanmış, tek sütunlu imza bloğu: ad → randevu düğmesi → tek satır durum.
   Bölümün en büyük metni ADIN kendisi; zaman.js'in yazdığı durum artık
   düğmenin altındaki dipnot. Fotoğraf katmanları kapalı (aşağıda), --kp
   kahraman.js'ten gelmeye devam eder ve yalnız marka bandını taşır. */
.tepe{
  --kp:0;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:clamp(370px, 48vh, 470px);
  padding:clamp(42px, 6vh, 68px) 0;
  background:var(--kok);
  color:var(--tebesir);
  border-bottom:1px solid var(--cizgi);
}

.tepe-fon{
  position:absolute; inset:0;
  z-index:-1;
  pointer-events:none;
}

/* ÜÇ FOTOĞRAF KATMANI DA KAPALI. Sağdaki tırnak fotoğrafı (tirnak-altin.jpg)
   işletmenin isteğiyle kaldırıldı: bu bölüm artık yalnız ad + randevu düğmesi,
   ortalanmış. Kancalar kahraman.js sözleşmesi için DOM'da kalıyor; fotoğrafı
   geri açmak isteyen .fon-goksel/.fon-perde kurallarını ve 860px bloğundaki
   kadraj kopyalarını birlikte geri açmalı — üçü tek parça çalışıyor. */
.fon-goksel,
.fon-kart,
.fon-perde{
  display:none;
}

.tepe > .kap{ position:relative; z-index:1; }
/* Simetri: bölüm tek sütun, her şey ortada. Genişlik sınırı satır uzunluğu
   içindir — sola dayalı 60%'lık eski sütun kalmadı. */
.tepe-ic{
  width:100%;
  text-align:center;
}
.tepe-kimlik,
.tepe-canli{
  width:min(100%, 660px);
  margin-inline:auto;
}

.gizli-baslik{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.kas{
  margin:0 0 14px;
  font-family:var(--govde); font-size:.77rem; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--altin); font-variant-numeric:tabular-nums;
}
.kas .ayrac{ opacity:.45; margin-inline:5px; }

/* Kahramandaki katmanlar farklı hızda ayrışıyor — kaydırırken derinlik hissi.
   Yalnız kahramanın içindekiler; sayfanın geri kalanı sabit. */
/* Açık zeminde --altin-ac ve krem tonları okunmuyor; hepsi koyu karşılıklarına
   çevrildi. Hareket (translateY, opacity) aynen duruyor. */
/* Kahramandaki konum satırı BÜYÜK HARFLİ ETİKET DEĞİL. Sayfadaki her bölüm
   aynı küçük altın büyük-harf "eyebrow" ile açılıyordu; bu refleks kalıp,
   içerik taşısa bile şablon gibi okunuyor. Buradaki satır gerçek bilgi
   (işletmenin nerede olduğu), o yüzden kaldırılmadı — etiket kılığından
   çıkarılıp normal bir satıra döndürüldü. Hareket aynen duruyor. */
.tepe .kas{
  font-size:.95rem;
  font-weight:600;
  letter-spacing:.02em;
  text-transform:none;
  color:var(--sis);
  transform:translateY(calc(var(--kp) * -10px));
  opacity:calc(1 - var(--kp) * .55);
}
.tepe .marka{ transform:translateY(calc(var(--kp) * -6px)); }
.tepe .tepe-alt{
  transform:translateY(calc(var(--kp) * 8px));
  opacity:calc(1 - var(--kp) * .38);
}

/* line-height 1 — .92 iki satırlık ("Dilara Onganer" + "Beauty & Hair")
   kilitlenme içindi. 10 Eylül 2026'da ikinci satır kalktı; tek satırda .92
   Bodoni'nin derin g kuyruğunu sıkıştırıyordu. */
.marka{ margin:0; font-family:var(--vitrin); line-height:1; }
/* AD ARTIK BİR WORDMARK. Bodoni Moda'ya geçilince üç şey birlikte değişti:
   ağırlık 500→600 (Bodoni 500 bu zeminde iddiasız, 700 tırnak/gövde
   kontrastını eziyor), aralık negatiften POZİTİFE (-.012em → .015em; Didone
   wordmark'lar açık aralık ister, kapandıkça "başlık" okunur), ve opsz ekseni
   96'ya sabitlendi — auto bırakılsaydı telefonda (~42px) daha az kontrastlı,
   masaüstünde (~77px) daha keskin bir logo çıkar, yani logo ekrandan ekrana
   değişirdi.

   PUNTO ÜST SINIRI 5.4rem DEĞİL 4.8rem: Bodoni, Cormorant'tan belirgin geniş.
   5.4rem'de "Dilara Onganer" .tepe-kimlik'in width:min(100%,660px) sınırını
   aşıyor ve max-width:100% yüzünden İKİ SATIRA kırılıyor — o an ::after bandı
   ikinci satırın altında kalıp logoyu dağıtıyor.

   width:max-content + margin-inline:auto DOKUNULMAZ: alt bant adın gerçek
   genişliğine bunlarla oturuyor. */
.marka-1{
  position:relative;
  display:block; width:max-content; max-width:100%;
  margin-inline:auto;
  /* PUNTO ARALIĞI TARAYICIDA ÖLÇÜLEREK BULUNDU (10 Eyl 2026), tahminle değil.
     Bodoni'de "Dilara Onganer"in genişliği ≈ 7.5 × punto. En dar telefonda
     (320px) kap 269px, yani punto 35.8px'i geçerse ad İKİ SATIRA kırılıyor ve
     ::after bandı ikinci satırın altında öksüz kalıyor — logo dağılıyor.
     Alt sınır bu yüzden 2.1rem (33.6px → 252px, 17px pay).
     Orta terim 6.2vw yerine 8.6vw: alt sınır düşünce orta boy telefonlarda
     logo gereksiz küçük kalıyordu, 8.6vw onları toparlıyor ve 893px'te üst
     sınıra oturuyor. Ölçülen sonuç — 320/360/390/430/640px: hepsi tek satır. */
  font-size:clamp(2.1rem, 8.6vw, 4.8rem);
  font-weight:600; letter-spacing:.015em;
  font-variation-settings:"opsz" 96;
  color:var(--tebesir);
}
/* Kaydırmayla adın altından geçen düz renk bandı — projenin tek marka işareti.
   bottom -7px'ten -14px'e indi (Bodoni'nin g kuyruğu Cormorant'tan derin,
   -7px'te banda değiyordu), kalınlık 2px'ten 1.5px'e (Didone inceliğine eşlik
   etsin diye).

   DİKKAT: width:34% ve translateX 194% BİRBİRİNE BAĞLI — 194 ≈ (100-34)/34*100,
   yani bant tam bir kat gidiyor. Genişliği değiştiren 194'ü de yeniden
   hesaplamak zorunda. */
.marka-1::after{
  content:"";
  position:absolute; left:0; bottom:-14px;
  width:34%; height:1.5px;
  background:var(--altin);
  transform:translateX(calc(var(--kp) * 194%));
}

/* Üstteki ayırıcı çizgi kalktı: ortalanmış bir bölümde tam genişlikte bir
   kural adı düğmeden koparıyordu, oysa ikisi tek blok okunmalı.
   margin-top 26px'ten 40px'e çıktı: kaybolan nefes ".marka-2"nin
   margin-top:.75em'i + kendi satır yüksekliğiydi (~24-26px). */
.tepe-canli{
  margin-top:clamp(40px, 5.6vh, 62px);
}
.tepe-alt{
  display:flex; flex-wrap:wrap; gap:16px 22px;
  align-items:center; justify-content:center;
  margin-top:0;
}

/* .marka-2 ("Beauty & Hair") ve çalışma durumu satırının bütün kuralları
   (.durum, .rozet-nokta, .durum-icerik, .durum-ana, .durum-ek ve üç
   data-durum kuralı) 10 Eylül 2026'da işletmenin isteğiyle silindi.
   Durum metnini üreten zaman.js:salonDurumu() DURUYOR — panel-bugun.js:78
   onu kullanıyor, silinirse paneldeki açık/kapalı noktası kırılır. */


/* ————————————————————————— Bölüm kalıbı ————————————————————————— */

.bolum{ padding:var(--ara) 0; }
.bolum + .bolum{ border-top:1px solid var(--cizgi); }

/* Randevu kahramanın hemen altında: üstten nefes alsın ama ekranı yemesin.

   ZEMİN ARTIK BEYAZ DEĞİL. Bu bölüm sayfanın %17'siydi ve saf beyazdı;
   ölçümde sayfanın %90'ının açık olduğu çıkınca "soluk duruyor"un en büyük
   tek kaynağı burası oldu. Zeminle aynı renge çekildi; beyaz artık yalnız
   kartlarda, form alanlarında ve özet kutusunda — orada gül kurusu zemine
   karşı belirgin, ayrı bir yüzey olarak okunuyor. */
#randevu{
  scroll-margin-top:calc(var(--ust-yuk) + 12px);
}

/* ——— ÜÇ BÖLÜMÜN ORTAK YÜZEY DİLİ — operatör kararı, 8 Eylül 2026 ———
   Randevu akışı, salon/saatler ve Google yorumları görsel olarak yeniden
   tasarlandı. Ortak karar: yüzeyler ÇERÇEVEYLE değil GÖLGEYLE ayrılıyor.

   Neden: bu üç bölümde yan yana duran onlarca kutu vardı ve hepsi 1px
   --cizgi ile çiziliyordu; ızgara kâğıdı gibi okunuyordu. Çok katmanlı
   halka-gölge (1px halka + yakın gölge + geniş yumuşak gölge) aynı ayrımı
   çizgi gürültüsü olmadan yapıyor.

   Gölgeler NÖTR mürekkep rengindedir, pembe değil: §8 "kartın altına kendi
   renginde ışık koyma". Pembe yalnız seçim halkasında ve odak halkasında.

   Üç değişken de bu üç bölümün köküne yazılıyor — kalıtımla iniyor, sayfanın
   geri kalanı (tepe, sekans, kapanış, altbilgi, harita) dokunulmadan kalıyor. */
.bolum-randevu,
#salon,
.google-bolum{
  --yuzey:
    0 0 0 1px rgba(36,26,29,.05),
    0 2px 6px rgba(36,26,29,.05),
    0 8px 24px -6px rgba(36,26,29,.08);
  --yuzey-kalkik:
    0 0 0 1px rgba(36,26,29,.06),
    0 4px 12px rgba(36,26,29,.06),
    0 18px 38px -12px rgba(36,26,29,.14);
  /* Seçili kart: 2px pembe halka + nötr yükseklik gölgesi. */
  --halka-secili:
    0 0 0 2px var(--altin),
    0 10px 26px -12px rgba(36,26,29,.28);
  /* Form alanı odağı — tarayıcı odak halkasının pembe karşılığı. */
  --halka-odak: 0 0 0 3px rgba(166,46,86,.14);
  --kose: 18px;
}

.bolum-randevu{
  padding-top:clamp(18px, 2.6vh, 30px);
  padding-bottom:clamp(76px, 10vh, 108px);
  background:var(--kok);
}
.bolum-randevu > .kap{ max-width:1120px; }

/* Saatler bu bölümün ilk ve daha geniş sütunudur; anlatı ikincildir. */
#salon{
  padding-block:clamp(80px, 10vh, 116px);
  background:var(--kat-2);
}

/* text-wrap:balance — büyük başlıklarda son satırda tek kelime kalmasın.
   Kapanış başlığı "…bakımınız da / da / aynı çatı altında." diye kırılıyor ve
   yalnız kalan "da" bütün bölümü özensiz gösteriyordu. Destekleyen tarayıcı
   satırları eşitliyor, desteklemeyen eskisi gibi davranıyor — zararsız. */
.baslik{
  margin:0 0 34px;
  font-family:var(--govde);
  font-size:clamp(2.3rem, 5.4vw, 3.7rem);
  /* Inter (10 Eyl 2026): serif başlıklar geri alındı. Sans başlık bu
     ölçekte 700 ister ve NEGATİF aralık ister — Didone'nin tersi. */
  font-weight:700; letter-spacing:-.022em; line-height:1.04;
  color:var(--tebesir);
  text-wrap:balance;
}


/* ————————————————————————— Salon ————————————————————————— */

.salon-duzen{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr);
  gap:clamp(32px, 5.5vw, 68px);
  align-items:start;
}
.sutun-yazi{
  padding-top:clamp(4px, 1vw, 12px);
}
.sutun-yazi p{ margin:0; color:var(--sis); }
.sutun-yazi .salon-giris{
  max-width:44ch;
  color:var(--tebesir);
  font-size:clamp(1.12rem, 1.8vw, 1.32rem);
  line-height:1.62;
}
/* Seçici bilerek `.sutun-yazi` ile başlıyor: yukarıdaki `.sutun-yazi p`
   (margin:0) daha özgül olduğu için yalın `.sutun-eylem` margin'i tutmuyordu.
   Eskiden !important ile zorlanıyordu — özgüllük düzeltilince ikisi de
   gereksiz kaldı. */
/* Bağlantılar artık alt çizgiyle ayrılan bir liste değil, kendi yüzeyi olan
   satır kartları: iki Instagram hesabı ve iki kısa eylem aynı dili konuşuyor.
   Alt çizgiler kalktı (--ig-sira'nın üst çizgisi dahil) — ayrımı gölge
   yapıyor, kartlar arasındaki boşluk da ritmi veriyor. */
.sutun-yazi .sutun-eylem{
  display:grid;
  width:100%;
  gap:10px;
  margin-top:clamp(24px, 3.5vh, 34px);
}
.sutun-yazi .sutun-eylem + .sutun-eylem{
  margin-top:14px;
}
.ig-sira{
  border-top:0;
}
#salon .salon-bag{
  display:grid;
  grid-template-columns:40px minmax(0,1fr);
  align-items:center;
  column-gap:14px;
  box-sizing:border-box;
  width:100%;
  min-height:64px;
  padding:11px 16px;
  color:var(--tebesir);
  border:0;
  border-radius:14px;
  background:var(--kat);
  box-shadow:var(--yuzey);
  text-decoration:none;
  transition:box-shadow .24s, transform .24s, color .2s, background .2s;
}
#salon .salon-bag:hover{
  color:var(--altin);
  transform:translateY(-2px);
  box-shadow:var(--yuzey-kalkik);
}
#salon .salon-bag:focus-visible{
  outline:2px solid var(--altin);
  outline-offset:3px;
}
/* İkonun kendi zemini var: <svg>'ye padding + arka plan vermek yeni bir
   sarmalayıcı elemana gerek bırakmıyor (markup JS sözleşmesinde). */
.salon-ikon{
  box-sizing:border-box;
  width:40px;
  height:40px;
  padding:9px;
  border-radius:12px;
  background:var(--kat-2);
  color:var(--altin);
  transition:background .2s, color .2s;
}
#salon .salon-bag:hover .salon-ikon{
  background:#F7E9EE;
}
.bag-metin{
  min-width:0;
}
.bag-etiket,
.bag-kullanici{
  display:block;
}
.bag-etiket{
  margin-bottom:2px;
  color:var(--sis-2);
  font-size:.82rem;
  font-weight:600;
  line-height:1.25;
}
.bag-kullanici{
  color:var(--tebesir);
  font-size:.95rem;
  font-weight:650;
  line-height:1.35;
  overflow-wrap:anywhere;
}
#salon .salon-bag:hover .bag-kullanici{
  color:var(--altin);
}
.salon-kisa-sira{
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
}
#salon .salon-kisa-sira .salon-bag{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:52px;
  padding:12px 16px;
  border:0;
  border-radius:12px;
  font-size:.94rem;
  font-weight:700;
  line-height:1.25;
  text-align:center;
}
/* Kısa eylemlerde ikonun kendi zemini yok: düğmenin zemini zaten var. */
#salon .salon-kisa-sira .salon-ikon{
  flex:0 0 auto;
  width:20px;
  height:20px;
  padding:0;
  border-radius:0;
  background:none;
}
#salon .salon-bag-wa{
  color:#FFFFFF;
  background:var(--altin);
  box-shadow:0 8px 20px -12px rgba(36,26,29,.5);
}
#salon .salon-bag-wa .salon-ikon{
  color:inherit;
  background:none;
}
#salon .salon-bag-wa:hover{
  color:#FFFFFF;
  background:#8C2447;
}
#salon .salon-bag-harita{
  background:var(--kat);
}
#salon .salon-bag-harita:hover{
  color:var(--altin);
}

.sutun-tablo{
  padding:clamp(24px, 3.2vw, 38px);
  border:0;
  border-radius:22px;
  background:var(--kat);
  box-shadow:var(--yuzey);
}

.salon-gorseller{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:12px;
  margin-top:clamp(30px,5vw,56px);
}
.salon-gorseller[hidden]{ display:none; }
.salon-gorsel-kart{
  grid-column:span 4;
  margin:0; overflow:hidden;
  border-radius:12px; background:var(--kat-2);
  aspect-ratio:var(--salon-gorsel-oran);
}
.salon-gorsel-kart:first-child{ grid-column:span 8; grid-row:span 2; }
.salon-gorsel-kart img{
  display:block; width:100%; height:100%; object-fit:cover;
}
/* ÇALIŞMA SAATLERİ — tablo, SATIR LİSTESİ gibi görünüyor.
   Ayırıcı çizgiler kaldırıldı: yedi satırın altına yedi çizgi çekmek defter
   kâğıdı etkisi yapıyordu. Satırlar artık boşlukla ayrılıyor, tek vurgulu
   satır BUGÜN.

   Tablo etiketleri (<table>/<tr>/<th scope="row">) BİLEREK DURUYOR. Görünüşü
   liste yapmak için display:block yazmak, tarayıcıların çoğunda tablo
   semantiğini ve `scope="row"` bağını ekran okuyuculardan siliyor; aynı görüntü
   hücre dolgusu ve köşe yarıçapıyla da elde ediliyor.
   `tbody` markup'ta BOŞ — randevu.js dolduruyor (AGENTS.md §6). */
.saatler{ width:100%; border-collapse:separate; border-spacing:0 3px; font-size:1rem; }
.saatler caption{
  text-align:left; padding-bottom:20px;
  font-family:var(--govde); font-size:clamp(1.6rem, 2.7vw, 2rem); font-weight:700;
  letter-spacing:-.02em; line-height:1.15;
  color:var(--tebesir); font-variant-numeric:tabular-nums;
}
.saatler th,
.saatler td{ padding:12px 14px; border:0; font-weight:500; }
.saatler th{ text-align:left; color:var(--sis); border-radius:10px 0 0 10px; }
.saatler td{
  text-align:right; font-family:var(--sayi); color:var(--sis);
  font-size:.96rem; font-variant-numeric:tabular-nums;
  border-radius:0 10px 10px 0;
}
.saatler td.kapali{ color:var(--sis-2); }
/* Bugünün satırı: tonlu zemin + solda pembe kenar (inset gölge, köşe
   yarıçapıyla birlikte kırpılıyor — ayrı bir eleman gerekmiyor). */
.saatler tr.bugun th,
.saatler tr.bugun td{ background:var(--kat-2); }
.saatler tr.bugun th{
  color:var(--tebesir); font-weight:700;
  box-shadow:inset 3px 0 0 var(--altin);
}
.saatler tr.bugun td{ color:var(--altin); font-weight:700; }


/* ————————————————————————— Adım rayı ————————————————————————— */

/* ADIM GÖSTERGESİ — SEGMENT ŞERİDİ (yeniden tasarım, 8 Eylül 2026).

   Eskiden: numaralı dört daire + altlarında tek bir ilerleme çubuğu. Daireler
   bölümün en gürültülü parçasıydı ve numara zaten iki yerde tekrar ediyordu
   (sıra <ol>'de, ad etikette).

   Şimdi: her adımın kendi segmenti var. Tamamlanan ve içinde bulunulan segment
   pembe dolu, gelecek olan --cizgi; aktif segmentin çevresinde ince pembe bir
   halka var. Etiketler BÜYÜK HARF DEĞİL — Türkçede text-transform tehlikeli
   (§5 logo notu) ve küçük büyük-harfli etiket bu sitede zaten enflasyona
   uğramış bir kalıp (§8).

   `--ilerleme` değişkenini randevu.js hâlâ yazıyor; artık hiçbir kural onu
   okumuyor ama JS'e dokunmamak için bırakıldı — zararsız. */
.adim-yol{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(8px, 1.4vw, 16px);
  margin:0 0 clamp(24px, 3.4vh, 34px); padding:0;
  list-style:none;
}
.adim-nokta{
  position:relative;
  padding-top:16px;
  font-size:.82rem; font-weight:600; letter-spacing:0;
  color:var(--sis-2);
  transition:color .3s;
}
.adim-nokta::before{
  content:"";
  position:absolute; inset:0 0 auto; height:4px;
  border-radius:999px;
  background:var(--cizgi);
  transition:background .35s, box-shadow .35s;
}
.adim-nokta.tamam::before{ background:var(--altin); }
.adim-nokta.aktif::before{
  background:var(--altin);
  box-shadow:0 0 0 3px rgba(166,46,86,.13);
}
.adim-nokta.aktif{ color:var(--altin); font-weight:700; }
.adim-nokta.tamam{ color:var(--sis); }

/* Ray içindeki düğme: görünüşte hiçbir şey değişmesin, yalnız tıklanabilir
   ve klavyeyle erişilebilir olsun. Etiket metni zaten .adim-nokta'dan renk
   ve punto alıyor, düğme onu aynen taşıyor. Negatif üst boşluk dokunma
   hedefini 44 px'te tutuyor (§9) ama satırı şişirmiyor. */
.adim-nokta button{
  all:unset;
  display:flex; align-items:center;
  width:100%; min-height:44px; box-sizing:border-box;
  margin-top:-9px;
  font:inherit; color:inherit; letter-spacing:inherit;
  text-align:left;
}
.adim-nokta button:not(:disabled){ cursor:pointer; }
.adim-nokta button:focus-visible{
  outline:2px solid var(--altin); outline-offset:3px; border-radius:6px;
}
/* Tamamlanmış adımın üstüne gelince geri dönülebileceği belli olsun. */
.adim-nokta.tamam:hover{ color:var(--altin); }
.adim-nokta.tamam:hover::before{ background:#8C2447; }

/* Seçilenler şeridi — 2. ve 3. adımda ne seçildiğini hatırlatıyor.
   İçeriği kadar yer kaplayan bir hap; tam genişlikte boş bir şerit değil.
   Boşken randevu.js hidden yapıyor — bu yüzden burada display AYARLANMAZ,
   yoksa hidden ezilir ve boş hap geri gelir. */
.secim-ozeti{
  display:flex; flex-wrap:wrap; justify-content:center; gap:6px 0;
  width:max-content; max-width:100%;
  margin:0 auto clamp(28px, 3.8vh, 38px);
  padding:10px 20px;
  border:0;
  border-radius:999px;
  background:var(--kat);
  box-shadow:var(--yuzey);
  color:var(--tebesir);
  font-size:.9rem; font-weight:600;
  text-align:center;
}
.secim-ozeti[hidden]{ display:none; }
.secim-ozeti-oge{ display:inline-flex; align-items:center; }
.secim-ozeti-oge[data-ayirici]::before{
  content:""; width:4px; height:4px; margin:0 10px;
  border-radius:50%; background:var(--altin);
}

/* hangi panel görünecek */
.adim{ display:none; }
#randevu[data-aktif-adim="1"] .adim[data-adim="1"],
#randevu[data-aktif-adim="2"] .adim[data-adim="2"],
#randevu[data-aktif-adim="3"] .adim[data-adim="3"],
#randevu[data-aktif-adim="4"] .adim[data-adim="4"],
#randevu[data-aktif-adim="tamam"] .adim[data-adim="tamam"]{
  display:block;
  animation:adim-gir .44s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes adim-gir{
  from{ opacity:0; transform:translateY(16px); }
  to  { opacity:1; transform:none; }
}

/* Adım başlığı bölümün asıl sesi: vitrin yazı tipi, büyük, dar aralıklı. */
.adim-baslik{
  margin:0 0 8px;
  font-family:var(--govde);
  font-size:clamp(1.7rem, 3.4vw, 2.3rem);
  font-weight:700; letter-spacing:-.022em; line-height:1.1;
  color:var(--tebesir);
  text-wrap:balance;
}
.adim-baslik:focus{ outline:none; }
.adim-not{
  margin:0 0 clamp(24px, 3.4vh, 34px);
  max-width:56ch;
  color:var(--sis); font-size:1rem; line-height:1.6;
}

.adim-geri{ margin:clamp(30px, 4vh, 40px) 0 0; }
/* Dokunma hedefi 44 px (§9): metin düğmesi de olsa parmakla vurulabilmeli. */
.geri{
  display:inline-flex; align-items:center;
  min-height:44px;
  background:none; border:0; padding:0;
  color:var(--sis-2); font-family:var(--govde); font-size:.96rem; font-weight:600;
  cursor:pointer; transition:color .2s;
}
.geri:hover{ color:var(--altin); }
.geri-guclu{
  padding:13px 26px;
  background:var(--kat); border:0; border-radius:12px;
  box-shadow:var(--yuzey);
  color:var(--tebesir); font-weight:600;
  transition:box-shadow .24s, transform .24s, color .2s;
}
.geri-guclu:hover{
  color:var(--altin);
  transform:translateY(-2px);
  box-shadow:var(--yuzey-kalkik);
}


/* ==========================================================================
   Kart sistemi — usta ve hizmet seçimi aynı dili konuşur
   ========================================================================== */

.kartlar{ display:grid; }

/* KART = BEYAZ YÜZEY (yeniden tasarım, 8 Eylül 2026).
   Eskiden kartın kendisi görünmezdi: yalnız koyu bir panel ve altında iki
   satır yazı vardı, seçim de o panelin çevresindeki halkayla anlatılıyordu.
   Şimdi kartın kendisi bir yüzey — beyaz, yumuşak halka-gölge, hover'da
   yükseliyor, seçilince pembe halka alıyor. */
.kart,
.usta-kart,
.hizmet-kart{
  position:relative;
  display:flex; flex-direction:column;
  margin:0; padding:8px 8px 16px; border:0;
  border-radius:var(--kose);
  background:var(--kat); color:inherit;
  box-shadow:var(--yuzey);
  font-family:var(--govde); text-align:left;
  cursor:pointer;
  transition:box-shadow .26s, transform .26s;
}
.usta-kart:hover,
.usta-kart:focus-visible,
.hizmet-kart:hover,
.hizmet-kart:focus-visible{
  transform:translateY(-2px);
  box-shadow:var(--yuzey-kalkik);
}
.usta-kart.secili,
.hizmet-kart.secili{
  box-shadow:var(--halka-secili);
}

/* ——— alan: objeyi/fotoğrafı taşıyan yüzey ———
   Koyu panel yerine pudra bir zemin: sayfa beyaza döndüğü için koyu paneller
   üç kartlık bir "delik" gibi duruyordu. Çizimler (kisi-dilara, kisi-ozkan ve
   ikon-*) koyu saç/önlük kütleleriyle çizildiği için açık zeminde daha da
   ayrık okunuyor; tonlar fotoğrafların kendi zeminiyle aynı ailede. */
.kart-alan,
.hk-alan{
  position:relative;
  display:grid; place-items:center;
  overflow:hidden;
  border-radius:12px;
  background:var(--kat-2);
  transition:opacity .3s;
}

/* ——— içindeki obje ———
   360°/720° DÖNÜŞ KALDIRILDI. Editoryal yönde bir kart, üzerine gelince
   kendi etrafında dönmez; hareket artık kartın yükselmesi ve objenin çok
   hafif yakınlaşması. (Fotoğraflı kartlarda dönüş zaten yoktu.) */
.kart-obje,
.hk-obje{
  position:relative; z-index:1;
  display:block;
  transition:transform .5s cubic-bezier(.3,.9,.3,1);
}
.kart-obje svg,
.hk-obje svg{
  display:block; width:100%; height:auto;
  /* Açık zeminde eski %55'lik siyah gölge çamur gibi duruyordu. */
  filter:drop-shadow(0 10px 14px rgba(36,26,29,.18));
}
.usta-kart:hover .kart-obje,
.usta-kart:focus-visible .kart-obje,
.hizmet-kart:hover .hk-obje,
.hizmet-kart:focus-visible .hk-obje{
  transform:scale(1.045);
}
.usta-kart.secili .kart-obje,
.hizmet-kart.secili .hk-obje{
  transform:scale(1.07);
}

/* ——— seçim tiki ———
   Dolu pembe daire, çevresinde beyaz halka: fotoğrafın ya da çizimin üstünde
   her tonda okunuyor. Bekleme süresi kalktı (eskiden dönüş bitsin diye .55s
   gecikiyordu). */
.kart-tik{
  position:absolute; top:16px; right:16px;
  display:grid; place-items:center;
  width:28px; height:28px; border-radius:50%;
  background:var(--altin); color:#FFFFFF;
  border:0;
  box-shadow:0 0 0 3px var(--kat);
  opacity:0; transform:scale(.5);
  transition:opacity .22s, transform .3s cubic-bezier(.34,1.5,.5,1);
}
.kart-tik svg{ width:15px; height:15px; }
.usta-kart.secili .kart-tik,
.hizmet-kart.secili .kart-tik{ opacity:1; transform:scale(1); }


/* ————————————————————————— Usta kartları ————————————————————————— */

.kartlar-usta{
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(14px, 2vw, 22px);
  max-width:780px;
}

/* Kemer (170px) biçimi kalktı: kartın kendisi artık yüzey, panelin de kart
   köşesiyle aynı dili konuşması gerekiyordu. Oran 3/3.7 yerine 4/5 —
   çizimler (100×140) hâlâ rahat sığıyor, kartlar bölümü daha az eziyor. */
.kart-alan{
  aspect-ratio:4 / 5;
}
.kart-obje{ width:70%; }
.kart-obje-ikili{ width:92%; }

/* FOTOĞRAFLI UZMAN KARTI. Kaynak kare (608×608), çerçeve 4/5 — cover ile
   ortadan kırpılıyor, .hk-foto ile aynı mantık.
   height:100% ŞART: img etiketi CLS için height="304" taşıyor ve o
   presentational hint yazılmazsa kareyi 4/5 çerçeveye geriyor. */
.usta-foto{
  grid-area:1 / 1;
  display:block;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  transition:transform .5s cubic-bezier(.3,.9,.3,1);
}
.usta-kart:hover .usta-foto,
.usta-kart:focus-visible .usta-foto{ transform:scale(1.045); }
.usta-kart.secili .usta-foto{ transform:scale(1.07); }

/* Seçilmemişler soluyor ama GRİYE DÖNMÜYOR: gri, sıcak paletin içinde
   bozuk renk gibi duruyordu; saydamlık aynı işi temiz yapıyor. */
.kartlar-usta.birSecili .usta-kart:not(.secili) .kart-alan{ opacity:.5; }
.kartlar-usta.birSecili .usta-kart:not(.secili):hover .kart-alan{ opacity:.88; }
.kartlar-usta.birSecili .usta-kart:not(.secili) .kart-ad{ color:var(--sis); }

.kart-alt{ display:flex; flex-direction:column; gap:2px; padding:14px 8px 0; }
.kart-ad{ font-size:1.05rem; font-weight:700; letter-spacing:-.01em; color:var(--tebesir); }
.kart-unvan{ font-size:.88rem; color:var(--sis); }
.usta-kart.secili .kart-ad{ color:var(--altin); }


/* ————————————————————————— Hizmet kartları ————————————————————————— */

/* SÜTUN SAYISI SABİT, auto-fill DEĞİL — ve bu bilerek.

   auto-fill/minmax(148px) geniş ekranda 6 sütun üretiyordu. Her iki grupta da
   7 hizmet var, yani her grup 6 + tek başına 1 kart diye kırılıyordu: ikinci
   satırda yalnız duran o kart bütün bölümü "şablon" gibi gösteren şeydi.
   Dörde sabitlenince 4 + 3 oluyor, ikisi de dolu satır gibi okunuyor.

   Salon panelden hizmet eklerse 8'de 4+4, 9'da 4+4+1 olur. Hiçbir sütun
   sayısı her adette yetim vermez; dört, 7 ve 8 için en iyisi. */
.kartlar-hizmet{
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:clamp(14px, 1.8vw, 20px);
}

.bolum-randevu .hizmet-aileleri{
  grid-column:1 / -1;
  display:flex;
  width:100%;
  margin:0 0 clamp(10px, 1.5vh, 16px);
  padding:4px;
  border:1px solid var(--cizgi);
  border-radius:999px;
  background:var(--kat-2);
}
.bolum-randevu .hizmet-ailesi{
  flex:1 1 0;
  min-width:0;
  min-height:44px;
  padding:9px 20px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:var(--sis);
  font:600 .96rem/1.2 var(--govde);
  text-align:center;
  cursor:pointer;
}
.bolum-randevu .hizmet-ailesi[aria-pressed="true"]{
  background:var(--kat);
  color:var(--altin);
  box-shadow:var(--yuzey);
}
.bolum-randevu .hizmet-ailesi:focus-visible{
  outline:2px solid var(--altin);
  outline-offset:2px;
}
.bolum-randevu .hizmet-kart[hidden]{ display:none; }

/* Hizmet ızgarası SAÇ ve GÜZELLİK diye ikiye ayrılıyor. Başlık ızgaranın
   içinde duruyor ve bütün sütunları kaplıyor — ayrı bir kap açmak kartların
   auto-fill ritmini bozardı. */
/* Bu başlık ARTIK KAŞ DEĞİL. Eskiden altın, büyük harf, .75rem'lik bir üst
   etiketti; sayfadaki beşinci-altıncı aynı etiketti (§8 kaş enflasyonu).
   Şimdi ne olduğu gibi görünüyor: ızgarayı ikiye bölen normal bir alt başlık.
   Yanındaki ince çizgi ayırma işini zaten yapıyor, punto ve ağırlık
   büyütülmedi — kartların önüne geçmemeli. */
.hizmet-grup{
  grid-column:1 / -1;
  margin:0;
  font-family:var(--govde); font-size:1.04rem; font-weight:700;
  letter-spacing:0;
  color:var(--tebesir);
  display:flex; align-items:center; gap:14px;
}
.hizmet-grup::after{
  content:""; flex:1 1 auto; height:1px; background:var(--cizgi);
}
.hizmet-grup + .hizmet-kart{ margin-top:0; }
.hizmet-grup:not(:first-child){ margin-top:clamp(10px, 1.6vh, 18px); }

/* GÖRSEL ÖNCE (Airbnb kalıbı): üstte 16:10 yatık görsel, altında tek satır ad. */
.hk-alan{
  aspect-ratio:16 / 10;
}
.hk-obje{ width:46%; }

/* FOTOĞRAFLI KARTLAR (14'ün 12'si). Kare kaynak, 4/3 çerçeveye cover ile
   oturuyor. Yakınlaşma hover'da hafif; kart zaten yükseliyor. */
.hk-foto{
  grid-area:1 / 1;
  display:block;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  transition:transform .5s cubic-bezier(.3,.9,.3,1);
}
.hizmet-kart:hover .hk-foto,
.hizmet-kart:focus-visible .hk-foto{ transform:scale(1.05); }
.hizmet-kart.secili .hk-foto{ transform:scale(1.07); }

.kartlar-hizmet.birSecili .hizmet-kart:not(.secili) .hk-alan{ opacity:.5; }
.kartlar-hizmet.birSecili .hizmet-kart:not(.secili):hover .hk-alan{ opacity:.88; }
/* Soluklaştırma metne UYGULANMIYOR: --tebesir'i saydamlaştırmak kontrastı
   AA'nın altına indiriyordu. Yerine bir ton açık ama ölçülü renk (--sis 6.92). */
.kartlar-hizmet.birSecili .hizmet-kart:not(.secili) .hk-ad{ color:var(--sis); }
.hizmet-kart .kart-tik{ width:26px; height:26px; top:14px; right:14px; }
.hizmet-kart .kart-tik svg{ width:14px; height:14px; }

.hk-alt{ display:flex; flex-direction:column; gap:2px; padding:12px 6px 0; }
.hk-ad{ font-size:1rem; font-weight:600; line-height:1.3; color:var(--tebesir); }
.hizmet-kart.secili .hk-ad{ color:var(--altin); }


/* ————————————————————————— Gün ve saat ————————————————————————— */

/* Gün şeridi: yatay kaydırma + snap. Üst/alt dolgu gölgelerin kırpılmaması
   için — overflow'lu bir kapta gölge kesilir. */
.gunler{
  display:flex; gap:10px;
  overflow-x:auto; overscroll-behavior-x:contain;
  padding:6px 2px 16px;
  scroll-snap-type:x proximity;
  scrollbar-width:thin;
  /* Çubuk şeridin hemen altında duruyor; --cizgi-ac fazla doygundu ve
     kalın pembe bir çizgi gibi görünüyordu. */
  scrollbar-color:var(--cizgi) transparent;
}
.gun{
  flex:0 0 auto;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  width:82px; min-height:96px; padding:14px 6px;
  border:0; border-radius:14px;
  background:var(--kat); color:var(--tebesir);
  box-shadow:var(--yuzey);
  font-family:var(--govde); cursor:pointer;
  scroll-snap-align:start;
  transition:box-shadow .22s, background .2s, transform .22s, color .2s;
}
/* Büyük harf kalktı: Türkçede text-transform güvenilir değil (§5) ve şerit
   zaten kısa etiketlerle dolu. */
.gun-ad{ font-size:.75rem; font-weight:600; letter-spacing:.01em; color:var(--sis); }
.gun-sayi{ font-family:var(--govde); font-size:1.5rem; font-weight:700; line-height:1.05; font-variant-numeric:tabular-nums; }
.gun-ay{ font-size:.76rem; color:var(--sis-2); font-variant-numeric:tabular-nums; }
/* SEÇİM RENGİ PEMBE, kömür değil. Hizmet ve gün seçimleri aynı --altin
   vurgusunu kullanır. Bugünün etiketi seçilmemişken de pembe okunur. */
.gun.bugun .gun-ad{ color:var(--altin); }
.gun:hover:not(:disabled){ transform:translateY(-2px); box-shadow:var(--yuzey-kalkik); }
.gun.secili{ background:var(--altin); color:#FFFFFF; box-shadow:var(--halka-secili); }
.gun.secili .gun-ad,
.gun.secili .gun-ay{ color:rgba(255,255,255,.8); }
.gun:disabled,
.gun.kapali{ opacity:.45; box-shadow:0 0 0 1px var(--cizgi); cursor:not-allowed; }
.gun.kapali .gun-sayi{ text-decoration:line-through; text-decoration-thickness:1.5px; }


.bos-uyari{
  grid-column:1/-1;
  margin:0; padding:20px;
  border:1px dashed var(--cizgi-ac); border-radius:12px;
  color:var(--sis-2); font-size:1.01rem; text-align:center;
}


/* ————————————————————————— Bilgi ve özet ————————————————————————— */

/* Tek bir kutunun içine bölme çizgisiyle sığdırılmış iki sütun yerine
   İKİ AYRI YÜZEY: solda form kartı, sağda özet kartı, aralarında boşluk.
   Aynı bilgi, daha az çizgi. */
.son-adim{
  display:grid;
  grid-template-columns:minmax(0,1fr) 340px;
  gap:clamp(20px, 2.6vw, 30px);
  align-items:start;
}

.form{
  margin:0; padding:clamp(24px, 3vw, 36px);
  border-radius:20px;
  background:var(--kat);
  box-shadow:var(--yuzey);
}
.alan{ margin:0 0 20px; display:flex; flex-direction:column; gap:8px; }
.alan label{ font-size:.93rem; color:var(--tebesir); font-weight:600; }
.istege-bagli{ font-weight:500; font-size:.83rem; color:var(--sis-2); margin-left:6px; }
/* Cal.com kalıbı: sakin 1px kenar, odakta pembe kenar + yumuşak pembe halka.
   min-height 48px — dokunma hedefi (§9). */
.alan input,
.alan textarea{
  width:100%; min-height:48px; padding:13px 15px;
  border:1px solid var(--cizgi); border-radius:12px;
  background:var(--kat); color:var(--tebesir);
  font-family:var(--govde); font-size:1.04rem;
  transition:border-color .18s, box-shadow .18s;
}
.alan input:hover,
.alan textarea:hover{ border-color:var(--cizgi-ac); }
.alan textarea{ resize:vertical; min-height:96px; line-height:1.55; }
.alan input::placeholder,
.alan textarea::placeholder{ color:var(--sis-2); opacity:.62; }
.alan input:focus,
.alan textarea:focus{
  outline:none;
  border-color:var(--altin);
  box-shadow:var(--halka-odak);
}
.alan input:focus-visible,
.alan textarea:focus-visible{
  outline:2px solid var(--altin);
  outline-offset:2px;
}
.alan input.hatali,
.alan textarea.hatali{ border-color:var(--kirmizi); }
.alan input.hatali:focus,
.alan textarea.hatali:focus{
  border-color:var(--kirmizi);
  box-shadow:0 0 0 3px rgba(169,55,32,.13);
}
.hata-yazi{ font-size:.89rem; color:var(--kirmizi); min-height:1.1em; }

.ozet{
  padding:clamp(24px, 3vw, 32px);
  border:0; border-radius:20px;
  background:var(--kat-2);
  box-shadow:var(--yuzey);
  position:sticky; top:calc(var(--ust-yuk) + 20px);
}
/* Gönder düğmesi bu kutunun tek eylemi: rahat bir dokunma hedefi. */
.ozet .dugme-wa{ min-height:52px; border-radius:12px; }
/* "Randevu özeti" bir bölüm açan süs etiketi değil, kutunun kendi başlığı —
   o yüzden kaş kılığından çıkarıldı (§8). Normal ağırlık, mürekkep rengi,
   okunur punto: altındaki dl ile aynı ailede duruyor. */
.ozet-baslik{
  margin:0 0 18px;
  font-family:var(--govde); font-size:1.02rem;
  letter-spacing:0; color:var(--tebesir);
  font-weight:700; font-variant-numeric:tabular-nums;
}
.ozet dl{
  display:grid; grid-template-columns:auto 1fr;
  gap:12px 18px; margin:0 0 24px;
  font-size:1rem;
}
.ozet dt{ color:var(--sis); }
.ozet dd{ margin:0; text-align:right; color:var(--tebesir); font-weight:600; font-variant-numeric:tabular-nums; }
.ozet-not{ margin:14px 0 0; font-size:.86rem; line-height:1.5; color:var(--sis-2); }

.tamam-yazi{ max-width:54ch; margin:0 0 8px; font-size:1.1rem; line-height:1.6; color:var(--sis); }
.tamam-yazi strong{ color:var(--kobalt-ac); font-weight:700; }

/* Takvim eki İKİNCİL bir eylem: ana yol WhatsApp. Bağlantı gibi görünsün diye
   .bag sınıfını kullanıyor ama <button> — tıklayınca dosya üretiyor, bir yere
   gitmiyor. Tarayıcının kendi düğme görünümü bu yüzden sıfırlanıyor.
   Dokunma alanı 44px. */
.tamam-eylem{ margin:16px 0 0; }
.takvim-dugme{
  display:inline-flex; align-items:center;
  min-height:44px;
  margin:0; padding:0;
  background:none; border:0;
  border-bottom:1px solid #D98BA8;
  font:inherit; font-size:.98rem;
  cursor:pointer;
}
.takvim-dugme[hidden]{ display:none; }


/* ————————————————————————— Kapanış ve dip ————————————————————————— */

/* Sayfa burada mürekkebe iniyor. Üç işi birden yapıyor: sayfaya bir varış
   noktası veriyor, kartların siyah panellerini sistemin parçası hâline
   getiriyor ve makasın kesişini koyu bir sahnede oynatıyor. */
/* Zemin 12 Eylül 2026'da --tebesir'den --kapanis-zemin'e alındı.
   --tebesir AYNI ZAMANDA GÖVDE METNİ RENGİ; onu açmak sayfadaki bütün
   yazıyı soldururdu. Bu yüzden token değiştirilmedi, bu bloğa kendi
   yüzey rengi verildi. Gerekçe ve kontrast ölçümü renk.css'te. */
.kapanis{
  padding-top:clamp(90px, 20vh, 196px);
  padding-bottom:clamp(70px, 13vh, 126px);
  background:var(--kapanis-zemin);
  color:#FFFFFF;
}
.bolum + .kapanis{ border-top:0; }
/* .kapanis .kas kuralı kaldırıldı — kapanıştaki "Son" etiketi de kaldırıldı.
   O etiket hiçbir bilgi taşımıyordu, yalnız bölüm açan bir süstü. */
.kapanis .dugme-ince{
  background:transparent;
  border-color:rgba(255,255,255,.24);
  color:#FFFFFF;
}
.kapanis .dugme-ince:hover{ border-color:#FFFFFF; background:rgba(255,255,255,.06); }
/* Yüzey ham beyaz DEĞİL: sayfadaki bütün yüzeyler --kat kullanıyor, koyu
   zeminde iki değer arasındaki fark gözle ayırt edilmiyor ama palet tek
   kalıyor. Metin --tebesir; --kat üstünde kontrast 16.07, yani renk.css'te
   kart yüzeyi için ölçülen değerin aynısı (AAA). */
.kapanis .dugme-dolu{ background:var(--kat); color:var(--tebesir); border-color:var(--kat); }
.kapanis .dugme-dolu:hover{ background:#E5DDDF; }
/* 640'tan 760'a: 5rem Cormorant'ta "Saçınız da bakımınız da" tek satıra
   sığmıyordu ve satır sonunda yalnız "da" kalıyordu. */
.kapanis-ic{ max-width:760px; }
.kapanis-baslik{
  margin:0 0 26px;
  font-family:var(--govde);
  /* ÜST SINIR 5rem'den 4.4rem'e indi. Aşağıdaki nota göre bu başlığın satır
     kırılması Cormorant 5rem'e göre elle ayarlanmıştı; Bodoni belirgin geniş,
     punto düşmezse kırılma bozuluyor. Beyaz metin koyu zeminde optik olarak
     inceldiği için ağırlık da 500. */
  font-size:clamp(2.4rem, 6.8vw, 4.2rem);
  font-weight:700; line-height:1.06; letter-spacing:-.028em;
  color:#FFFFFF;
  /* Satırları eşitler. HTML'deki <br> kaldırıldı, yoksa balance her parçayı
     ayrı ayrı dengeler ve kırılma yine bozuk kalırdı. */
  text-wrap:balance;
}
.kapanis-yazi{ margin:0 0 32px; color:#A7929B; font-size:1.10rem; line-height:1.85; }

body.kesildi .kapanis-baslik{ animation:otur .8s cubic-bezier(.2,.9,.25,1) both; }
@keyframes otur{
  0%  { transform:translateY(-10px) rotate(-.6deg); opacity:.55; }
  100%{ transform:none; opacity:1; }
}

/* ————————————————————————— Nasıl işliyor —————————————————————————
   Randevu bölümünün sonunda, adımların altında. Kart değil: bölüm zaten
   kart dolu, dördüncü bir kutu gürültü olurdu. Üstte ince bir çizgi,
   numaralar --altin ile. */

.nasil-isliyor{
  counter-reset:nasil;
  list-style:none;
  margin:clamp(34px, 5vh, 56px) 0 0;
  padding:26px 0 0;
  border-top:1px solid var(--cizgi);
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
}
.nasil-isliyor li{
  counter-increment:nasil;
  position:relative;
  padding-left:34px;
  color:var(--sis);
  font-size:.98rem; line-height:1.6;
}
.nasil-isliyor li::before{
  content:counter(nasil);
  position:absolute; left:0; top:1px;
  display:grid; place-items:center;
  width:23px; height:23px;
  border-radius:50%;
  border:1.5px solid var(--altin);
  color:var(--altin);
  font-family:var(--govde); font-size:.76rem; font-weight:700;
}


/* ————————————————————————— Yaptıklarımız —————————————————————————
   DÜZEN 12 EYLÜL 2026'DA MOZAİKTEN DÜZGÜN IZGARAYA ÇEVRİLDİ.

   Eskiden 12 kolonluydu: kartlar 5/3/4/3/4/5 kolon arasında değişiyor,
   iki tanesi `grid-row: span 2` alıyor ve `grid-auto-flow:dense` kalan
   boşlukları dolduruyordu. O düzen KARIŞIK ORANLI işler için yazılmıştı
   ve tek bir oran geldiğinde çöküyor: aynı oranlı kartlara farklı kolon
   genişliği verilince `aspect-ratio` yükseklikleri savuruyor, `dense` de
   onları boşluklara sıkıştırıyor. Ekranda "üst üste binmiş" görünüyordu.

   Galeri artık Instagram gönderilerinden geliyor ve dokuzu da 9:16 dikey.
   Tek oranlı içerikte doğru düzen eşit ızgara: aynı genişlik, aynı
   yükseklik, hizalı satırlar.

   KARIŞIK ORAN GERİ GELİRSE: kartın çerçevesi artık sabit (--galeri-cerceve),
   görsel `object-fit:cover` ile kırpılıyor — yani yatay bir gönderi de
   bozulmadan oturuyor, sadece kenarlarından kırpılıyor. Mozaiği geri
   istiyorsan bu blok ile aşağıdaki nth-child kurallarını birlikte al. */

.yaptiklarimiz[hidden],
.galeri-kolon[hidden],
.galeri-sekmeler[hidden],
.once-sonra-bolum[hidden],
.yorum-karusel[hidden],
.yorum-listesi[hidden]{ display:none; }

.yaptiklarimiz{ background:var(--kat-2); }
:root{
  /* Kart çerçevesinin oranı. Instagram reel kapağı 9:16; galeri bu orana
     göre hizalanıyor. Tek yerde duruyor ki dar ekran kuralı da aynı sayıyı
     kullansın. */
  --galeri-cerceve: 9 / 16;
}

.galeri-izgara{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(12px, 2vw, 22px);
}
.galeri-kolonlar{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(22px, 3vw, 38px);
}
.galeri-kolonlar .galeri-izgara{
  grid-template-columns:repeat(2, minmax(0,1fr));
}
.galeri-kolon-baslik{
  font:700 clamp(1.25rem,1.9vw,1.6rem)/1.15 var(--govde);
  letter-spacing:-.018em;
  color:var(--tebesir);
  margin:0 0 18px;
}
/* Randevudaki hizmet-ailesi çiplerinin dili (yenileme.css).
   İki eşit çip 308px'e sığar; uzun etiket gerektiğinde satıra sarılır. */
.galeri-sekmeler{
  display:flex;
  gap:9px;
  margin:0 0 18px;
}
.galeri-sekme{
  position:relative;
  flex:1 1 0;
  display:inline-flex;
  align-items:baseline;
  justify-content:center;
  gap:9px;
  min-width:0;
  min-height:46px;
  padding:11px 26px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:var(--sis);
  font:600 .95rem/1.2 var(--govde);
  letter-spacing:0;
  text-align:center;
  box-shadow:none;
  transition:background-color .2s ease, color .2s ease;
}
.galeri-sekme:hover{
  background:var(--kat);
  color:var(--tebesir);
  transform:none;
}
.galeri-sekme[aria-pressed="true"]{
  background:var(--altin);
  color:#fff;
  box-shadow:none;
}
.galeri-sekme:focus-visible{
  outline:2px solid var(--altin);
  outline-offset:3px;
}
.galeri-kart{
  position:relative;
  display:block;
  aspect-ratio:var(--galeri-cerceve);
  overflow:hidden;
  border:1px solid rgba(26,16,20,.07);
  border-radius:14px;
  background:var(--kat);
  color:var(--tebesir);
  text-decoration:none;
  box-shadow:0 6px 18px rgba(26,16,20,.10);
  transition:transform .28s cubic-bezier(.3,.9,.3,1), box-shadow .28s ease;
}
.galeri-kart:hover,
.galeri-kart:focus-visible{
  transform:translateY(-3px);
  box-shadow:0 14px 30px rgba(26,16,20,.18);
}
/* Alt perde — etiketin ve oynatma rozetinin açık renkli bir kapak karesinin
   üstüne denk gelme ihtimaline karşı. Fotoğrafın kendisi karartılmıyor,
   yalnız alt üçte biri yumuşakça koyulaşıyor. */
.galeri-kart::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:46%;
  pointer-events:none;
  background:linear-gradient(to top, rgba(26,16,20,.42), rgba(26,16,20,0));
}
.galeri-gorsel{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .68s cubic-bezier(.3,.9,.3,1);
  will-change:transform;
}
.galeri-kart:hover .galeri-gorsel,
.galeri-kart:focus-visible .galeri-gorsel{ transform:scale(1.06); }
.galeri-etiket,
.galeri-oynat{
  position:absolute;
  z-index:1;
  background:var(--kat);
  color:var(--tebesir);
  border:1px solid var(--cizgi);
}
.galeri-etiket{
  left:12px; bottom:12px;
  max-width:calc(100% - 72px);
  padding:7px 10px;
  border-radius:8px;
  font-size:.78rem; font-weight:700;
}
/* Oynatma rozeti — fotoğrafın üstünde durduğu için koyu ve yarı saydam.
   İçi artık SVG (galeri-motor.js), sistem karakteri değil. */
.galeri-oynat{
  top:12px; right:12px;
  display:grid; place-items:center;
  width:34px; height:34px;
  padding:0;
  border:0;
  border-radius:50%;
  background:rgba(26,16,20,.46);
  color:#fff;
  -webkit-backdrop-filter:blur(6px);
          backdrop-filter:blur(6px);
}
.galeri-oynat svg{
  width:16px; height:16px;
  display:block;
  margin-left:1px; /* üçgenin optik merkezi geometrik merkezin solunda */
}

/* ————————————————————————— Öncesi / sonrası ————————————————————————— */

.once-sonra-listesi{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap:clamp(22px, 4vw, 42px);
}
.once-sonra-kart{ margin:0; min-width:0; }
.once-sonra-yuzey{
  --once-sonra-konum:50%;
  position:relative;
  aspect-ratio:var(--once-sonra-oran);
  overflow:hidden;
  border:1px solid var(--cizgi);
  border-radius:12px;
  background:var(--kat);
}
.once-sonra-gorsel{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
}
.once-sonra-sonra{ position:absolute; inset:0; }
.once-sonra-once-kat{
  position:absolute; inset:0;
  clip-path:inset(0 calc(100% - var(--once-sonra-konum)) 0 0);
  transition:clip-path .12s ease-out;
}
.once-sonra-once{ position:absolute; inset:0; }
.once-sonra-etiket{
  position:absolute; top:14px; z-index:2;
  padding:7px 10px;
  border:1px solid var(--cizgi);
  border-radius:8px;
  background:var(--kat);
  color:var(--tebesir);
  font-size:.76rem; font-weight:750;
}
.once-sonra-etiket-once{ left:14px; }
.once-sonra-etiket-sonra{ right:14px; }
.once-sonra-aralik{
  position:absolute; left:0; top:50%; z-index:4;
  width:100%; height:44px;
  margin:0;
  transform:translateY(-50%);
  opacity:0;
  cursor:ew-resize;
  touch-action:none;
}
.once-sonra-ayirici{
  position:absolute; top:0; bottom:0; left:var(--once-sonra-konum); z-index:3;
  width:2px;
  transform:translateX(-1px);
  background:var(--kat);
  transition:left .12s ease-out;
  pointer-events:none;
}
.once-sonra-kulp{
  position:absolute; top:50%; left:50%;
  display:grid; place-items:center;
  width:44px; height:44px;
  transform:translate(-50%,-50%);
  border:1px solid var(--cizgi);
  border-radius:50%;
  background:var(--kat);
  color:var(--tebesir);
  font-size:1rem; font-weight:800;
  touch-action:none;
}
.once-sonra-aralik:focus-visible + .once-sonra-ayirici .once-sonra-kulp{
  outline:2px solid var(--altin);
  outline-offset:3px;
}
.once-sonra-yuzey.surukleniyor .once-sonra-once-kat,
.once-sonra-yuzey.surukleniyor .once-sonra-ayirici{ transition:none; }
.once-sonra-aciklama{
  margin-top:12px;
  color:var(--tebesir);
  font-size:.92rem; font-weight:700;
}


/* ————————————————————————— Google değerlendirmesi —————————————————————————
   Yorum metni yok. Puan, örnek kart gibi davranmadan sayfanın tipografisine
   katılır; sayı, ölçek ve boşlukla karakter kazanır. */

.google-bolum{
  padding:clamp(64px, 9vh, 104px) 0;
  border-top:1px solid var(--cizgi);
  background:var(--kok);
}
/* Puan şeridi bilerek KART DEĞİL: altındaki yorumlar kart, ikisi de kart
   olsaydı hiyerarşi düzleşirdi. Burada işi tipografi ve boşluk yapıyor. */
.google-ic{
  display:grid;
  grid-template-columns:minmax(160px,auto) minmax(200px,1fr) auto;
  align-items:center;
  gap:clamp(22px, 4.5vw, 58px);
}
.puan-ana{
  padding-right:clamp(20px, 3.5vw, 46px);
  border-right:1px solid var(--cizgi);
}
/* Kaynak satırı: altındaki 4,4'ün NEREDEN geldiğini söylüyor, bölüm açmıyor.
   Altın büyük-harf kaş kılığı kaldırıldı (§8) — bilgi aynı, süs gitti. */
.puan-kaynak{
  margin:0 0 8px;
  color:var(--sis);
  font-size:.95rem; font-weight:600;
  letter-spacing:.01em;
}
.puan-sayi{
  margin:0;
  font-family:var(--govde);
  /* SAYFANIN EN BÜYÜK GLİFLERİ, o yüzden opsz'in tek elle ayarlandığı ikinci
     yer (diğeri logo). Tarayıcıda ölçüldü, 10 Eyl 2026: opsz auto bırakılınca
     eksen 76px'e eşitleniyor, yani en yüksek kontrastlı kesim geliyor ve
     "4"ün çapraz çizgisi açık zeminde 1px'lik saç teline düşüp KAYBOLUYOR.
     Rakam bir güven sinyali, süs değil — okunmak zorunda.
     Çözüm: opsz 8 (metin kesimi, sağlam çizgi) + ağırlık 700.
     line-height .78 → .9: .78 Cormorant'a göreydi, Bodoni rakamları daha
     uzun ve üstteki "Google" etiketine giriyordu.
     Aralık -.055em → -.02em: Bodoni rakamlarında "4,4" çakışıyordu. */
  font-weight:700;
  font-variation-settings:"opsz" 8;
  font-size:clamp(4.1rem, 8vw, 6rem); line-height:.9;
  letter-spacing:-.02em;
  color:var(--tebesir);
  font-variant-numeric:tabular-nums;
}
.puan-sayi span{
  font-family:var(--govde);
  font-size:.18em; font-weight:650; letter-spacing:.03em;
  color:var(--sis-2);
}
.puan-orta{ padding-bottom:0; }
/* Bağlantı artık alt çizgili bir satır değil, ikincil bir hap düğme:
   "Google'da aç" bu bölümün tek eylemi ve tıklanabilir görünmesi gerekiyor.
   Metin rengi --altin kalıyor (dolu pembe düğme sayfanın ana eylemi olan
   "Randevu al"a ayrılmış). */
.puan-bag{
  width:max-content; max-width:100%;
  justify-self:end;
  padding:12px 22px;
  border:0; border-radius:999px;
  background:var(--kat);
  box-shadow:var(--yuzey);
  color:var(--altin);
  font-size:.95rem; font-weight:600;
  transition:box-shadow .22s, transform .22s, color .2s;
}
.puan-bag:hover{
  color:#8C2447;
  transform:translateY(-2px);
  box-shadow:var(--yuzey-kalkik);
}

/* Yıldızlar iki katman: arkada soluk beş yıldız, önde aynı beş yıldız
   %88 genişliğe kırpılmış (4,4 / 5 = %88). Kesirli yıldız için ayrı bir
   görsele ya da SVG'ye gerek kalmıyor. */
.yildizlar{
  position:relative; display:inline-block;
  margin:0 0 9px;
  font-size:clamp(1.14rem, 2.1vw, 1.42rem); letter-spacing:.17em; line-height:1;
  white-space:nowrap;
}
.yildiz-arka{ color:var(--cizgi-ac); }
.yildiz-on{
  position:absolute; inset:0;
  width:88%; overflow:hidden;
  color:var(--altin);
}
.puan-not{ margin:0; color:var(--sis); font-size:.95rem; }
.puan-not strong{ color:var(--tebesir); font-size:1.12em; }
.puan-bag{ display:inline-flex; align-items:center; min-height:44px; }

/* Yorum karuseli. .gunler ile aynı doğal yatay kaydırma ve snap kalıbı;
   otomatik oynatma yok. Liste boşken hem ray hem denetimler hidden kalır.
   Kartlar editoryal ALINTI kartı: köşede büyük tırnak, pembe yıldızlar,
   altta ince bir çizgiyle ayrılmış isim. */
.yorum-karusel{ margin-top:clamp(34px, 5vw, 56px); }
.yorum-kontroller{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-bottom:14px;
}
/* Yuvarlak yön düğmeleri. İçlerindeki ok GERÇEK İŞLEV — §8'in "düğme metnine
   yapıştırılmış ok" yasağının açık istisnası. */
.yorum-ok{
  display:grid; place-items:center;
  width:44px; height:44px;
  padding:0;
  border:0;
  border-radius:50%;
  background:var(--kat);
  box-shadow:var(--yuzey);
  color:var(--tebesir);
  font:inherit; font-size:1.05rem; line-height:1;
  cursor:pointer;
  transition:box-shadow .22s, transform .22s, color .2s;
}
.yorum-ok:hover:not(:disabled){
  color:var(--altin);
  transform:translateY(-2px);
  box-shadow:var(--yuzey-kalkik);
}
.yorum-ok:disabled{
  opacity:.45; cursor:default;
  box-shadow:0 0 0 1px var(--cizgi);
}
.yorum-listesi{
  display:flex;
  gap:clamp(14px, 2vw, 20px);
  overflow-x:auto;
  overscroll-behavior-x:contain;
  padding:6px 2px 16px;
  scroll-snap-type:x proximity;
  scrollbar-width:thin;
  scrollbar-color:var(--cizgi) transparent;
}
.yorum-kart{
  position:relative;
  flex:0 0 min(400px, 84vw);
  scroll-snap-align:start;
  display:flex; flex-direction:column;
  margin:0; padding:28px 28px 22px;
  border:0; border-radius:20px;
  background:var(--kat);
  box-shadow:var(--yuzey);
}
/* Süs tırnak. --cizgi tonunda: metnin altında kalıyor, okumayı engellemiyor.
   Kartın kendi ::before'u olduğu için yeni bir eleman gerekmedi. */
.yorum-kart::before{
  content:"\201C";
  position:absolute; top:4px; right:24px;
  /* 5.4 → 4.4rem: Bodoni'nin tırnak glifi Cormorant'ınkinden çok daha ağır,
     aynı puntoda süs olmaktan çıkıp gürültü oluyordu. */
  font-family:var(--vitrin); font-size:4.4rem; font-weight:500; line-height:1;
  color:var(--cizgi);
  pointer-events:none;
}
.yorum-yildiz{
  position:relative;
  display:block; margin-bottom:14px;
  color:var(--altin);
  font-size:1rem; letter-spacing:.16em; line-height:1;
}
/* YORUM METNİ INTER'DE KALDI. Cormorant italik editoryal olurdu ama bu
   yazı tipi küçük puntoda ince ve okunmuyor (renk.css'teki DİKKAT 3), yorumlar
   da uzun Türkçe paragraflar. Editoryal ses tırnak işaretinden ve boşluktan
   geliyor, gövde metninden değil. */
.yorum-metin{
  position:relative;
  flex:1 1 auto;
  margin:0 0 18px;
  color:var(--tebesir);
  font-size:1.02rem; line-height:1.72;
  /* Google yorumları kopyala-yapıştır geliyor: araya kaçan uzun bir bağlantı
     ya da boşluksuz kelime kartı taşırmasın. (Codex'in ikinci göz turundan
     alınan tek satır.) */
  overflow-wrap:anywhere;
}
.yorum-ad{
  position:relative;
  padding-top:16px;
  border-top:1px solid var(--cizgi);
  color:var(--sis);
  font-size:.9rem; font-weight:600;
  letter-spacing:.01em;
}

/* ————————————————————————— Harita —————————————————————————
   Sayfanın en dibinde, dipnottan hemen önce. Kapanış bölümü koyu; harita
   ondan sonra açık zemine dönüyor ki gömme haritanın kendi beyazı sayfaya
   yamalı görünmesin. */

.harita-bolum{
  padding:var(--ara) 0;
  background:var(--kok);
  border-top:1px solid var(--cizgi);
}
.harita-kabuk{
  display:grid;
  grid-template-columns:minmax(280px,.72fr) minmax(0,1.45fr);
  min-height:clamp(390px, 52vw, 540px);
  overflow:hidden;
  border:1px solid var(--cizgi);
  border-radius:12px;
  background:var(--kat);
}
.harita-ust{
  display:flex; flex-direction:column; align-items:flex-start;
  padding:clamp(26px, 4.5vw, 52px);
}
.harita-baslik{
  margin:0 0 20px;
  font-family:var(--govde);
  font-size:clamp(2.2rem, 4.2vw, 3.2rem);
  font-weight:700; letter-spacing:-.022em; line-height:1.1;
  color:var(--tebesir);
  text-wrap:balance;
}
.harita-adres{
  margin:0 0 30px;
  color:var(--sis);
  line-height:1.7;
}
.harita-ust .dugme{ margin-top:auto; }

/* Bilgi paneli ve harita aynı dış çerçeveyi paylaşır; aralarında yalnız tek
   sınır vardır. Böylece yol tarifi eylemi haritadan kopmaz. */
.harita-cerceve{
  position:relative;
  overflow:hidden;
  border-left:1px solid var(--cizgi);
  background:var(--kat-2);
}

/* TIKLA-YÜKLE ONAY KUTUSU. iframe `position:absolute; inset:0` olduğu için
   onay kutusu da aynı çerçeveyi kaplıyor ve üstte duruyor; harita yüklenince
   `hidden` alıyor ve altındaki iframe görünür kalıyor.

   `[hidden]` kuralı ŞART: display:grid, hidden özniteliğinin tarayıcıdan
   gelen display:none'ını ezer ve kutu haritanın üstünde asılı kalırdı.
   Bu tuzak bu projede daha önce başka kaplarda da çıktı. */
.harita-onay{
  position:absolute; inset:0;
  z-index:1;
  display:grid; place-content:center; justify-items:center;
  gap:14px;
  padding:clamp(18px, 4vw, 34px);
  text-align:center;
  background:var(--kat-2);
}
.harita-onay[hidden]{ display:none; }
.harita-onay-metin{
  margin:0;
  max-width:42ch;
  color:var(--sis);
  font-size:.88rem;
  line-height:1.5;
}

/* GOOGLE HARİTASI DIŞARIDAN BOYANIYOR.
   Anahtarsız `output=embed` gömmesinde Google'ın kendi stil API'si yok, yani
   harita mavi-yeşil varsayılan temasıyla geliyor ve pudra pembe sayfanın
   içinde yabancı duruyor. Tek yol CSS süzgeci:

     grayscale  → mavi su ve yeşil park tamamen nötrleşir
     sepia      → nötr griye sıcak bir taban verir (~40° ton)
     hue-rotate → o tabanı -38° kaydırıp gül tarafına getirir (~2°)
     saturate   → sepia'nın kısık renginı geri açar
     brightness/contrast → yol adları okunur kalsın diye hafif yumuşatma

   Ölçü bilerek ılımlı: daha sert bir doygunlukta sokak adları kayboluyor.
   Harita bir dekor değil, adres bulma aracı. */
.harita-cerceve iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0;
  /* İKİNCİ AYAR. İlk değerler sitenin ESKİ açık zeminine göre seçilmişti:
     grayscale(1) + brightness(1.05) + contrast(.92). Zemin gül kurusuna
     koyulaşınca harita ağarmış göründü — sokak adları neredeyse kayboldu.

     Şimdi: grayscale tam değil (yollar kendi kontrastını koruyor), parlaklık
     yukarı değil AŞAĞI, kontrast ve doygunluk yukarı. Ton hâlâ gül tarafında
     ama harita artık okunuyor.

     Harita dekor değil adres bulma aracı: bu değerleri değiştirirken
     sokak adlarının okunur kaldığını gözle kontrol et. */
  filter:grayscale(.55) sepia(.28) hue-rotate(-26deg) saturate(1.3)
         brightness(.96) contrast(1.14);
}

/* Altbilgi: marka imzası üstte, ziyaret ve bağlantılar ayrı bir okuma katında.
   Mobil çubuk boşluğunu eylem.css/eylem.js yönetir; .dip kancası korunur. */
.dip{
  padding:clamp(40px, 6vw, 72px) 0 calc(20px + env(safe-area-inset-bottom));
  background:var(--kok);
  color:var(--tebesir);
  border-top:1px solid var(--cizgi);
}
.dip p{ margin:0; }
.dip-ust{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:18px;
  padding-bottom:clamp(28px, 4vw, 44px);
  border-bottom:1px solid var(--cizgi);
}
.dip-marka{ min-width:0; }
.dip .marka-ad{
  font-family:var(--vitrin);
  font-size:clamp(2.4rem, 5.4vw, 3.6rem);
  font-weight:600;
  font-optical-sizing:auto;
  line-height:1.12;
  letter-spacing:0;
  color:var(--tebesir);
  white-space:normal;
  text-transform:none;
  overflow-wrap:break-word;
}
.dip .dip-marka-alt{
  margin-top:10px;
  color:var(--sis);
  font-size:.85rem;
  letter-spacing:.12em;
}
.dip a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  max-width:100%;
  padding-block:6px;
  color:var(--tebesir);
  font-size:.875rem;
  line-height:1.55;
  text-decoration:none;
  transition:color .18s;
}
.dip a:hover{ color:var(--altin); }
.dip a:focus-visible{ outline:2px solid var(--altin); outline-offset:4px; }
.dip .dip-randevu{
  align-self:flex-start;
  justify-content:center;
  min-height:48px;
  padding:12px 26px;
  border:1px solid var(--altin);
  border-radius:999px;
  background:var(--altin);
  color:#fff;
  font-weight:700;
  text-decoration:none;
  transition:background .18s, color .18s;
}
.dip .dip-randevu:hover{ background:transparent; color:var(--altin); }
.dip-ic{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-start;
  gap:32px clamp(28px, 5vw, 72px);
  align-items:flex-start;
  padding-block:clamp(28px, 4vw, 44px);
}
.dip-sutun{ min-width:0; flex:0 1 auto; }
.dip-adres{ flex-basis:100%; max-width:36ch; }
.dip-baslik{
  margin:0 0 12px;
  font-family:var(--govde);
  font-size:.9rem;
  font-weight:700;
  line-height:1.5;
  color:var(--tebesir);
}
.dip-not{
  max-width:32ch;
  color:var(--sis);
  font-size:.875rem;
  font-style:normal;
  line-height:1.8;
}
.dip-not span{ display:block; }
.dip .dip-saat{
  margin-top:14px;
  color:var(--sis);
  font-size:.875rem;
  line-height:1.7;
}
.dip-saat span{ display:block; }
.dip-liste{ margin:0; padding:0; list-style:none; }
.dip-liste li{ margin:0; }
.dip-liste a{ width:auto; }
.dip-telif{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-start;
  gap:4px 28px;
  padding-top:16px;
  border-top:1px solid var(--cizgi);
  color:var(--sis);
  font-size:.75rem;
  line-height:1.7;
}
.dip-telif a{ font-size:.75rem; }
@media (max-width:560px){
  .dip-sutun{ flex-basis:100%; }
  .dip-telif{ align-items:flex-start; flex-direction:column; gap:8px; }
}

/* Başlangıç gizlemesini yalnız beliris.js ekler; hidden/display yönetilmez.
   Sınıflar geçiş bitince kaldırılır, kartların kendi hover davranışı sürer. */
.beliris-hazir{
  opacity:0;
  transform:translateY(10px);
  transition:opacity .4s ease var(--gecikme, 0ms), transform .4s ease var(--gecikme, 0ms);
}
.beliris-hazir.beliris-gorundu{ opacity:1; transform:translateY(0); }


/* ==========================================================================
   Sağ kenar: tel ve fırça

   Berber şablonunda buradaki obje bir makastı ve teli KESİYORDU. Fırçaya
   çevrildi: aşağı inerken teli boyuyor, dipte kesme yerine renk tamamlanıyor.
   makas.js'e hiç dokunulmadı — hâlâ yalnız iki değişken yazıyor:
   --p (kaydırma ilerlemesi) ve --acilma. İkincisinin anlamı değişti:
   "ağız açıklığı" değil, "fırça eğimi".

   Sınıf adları (.makas, .kesildi, .kirinti) bilerek korundu; makas.js ve
   stil.css'in geri kalanı bu adlara bakıyor.
   ========================================================================== */

/* Şerit kapalı — bkz. :root'taki --ray-alan notu. Bu tek satır silinince
   ve --ray-alan 84px yapılınca aynen geri gelir. */
.ray{ display:none; }

.ray{
  position:fixed; inset:0 0 0 auto;
  width:var(--ray-alan);
  z-index:20;
  pointer-events:none;
  --p:0;            /* sayfa kaydırma ilerlemesi, 0…1 */
  --acilma:.42;     /* fırça eğimi, 0…1 */
  /* Tel, fırça ve damlaların şerit İÇİNDEKİ yatay yeri. Masaüstünde ortada;
     dar ekranda sağa kayıyor (aşağıdaki duyarlı bloklar). Fırçanın kendi
     genişliği --yukseklik × .615, o yüzden bunu büyütürken şeridin dışına
     taşmadığından emin ol — .ray'de overflow yok, taşarsa ekrandan çıkar. */
  --ray-oda:50%;
}

.ray-tel{
  position:absolute; inset:0; width:100%; height:100%;
  transform:translateX(calc(var(--ray-oda) - 50%));
}
/* Orta ton bilerek: tel hem fildişi zeminde hem kapanışın mürekkebinde okunmalı. */
.tel{ stroke:#A7929B; stroke-width:2.2; stroke-linecap:round; opacity:1; }
/* Fırçanın altında kalan parça boyanmış oluyor: altına döner, kaybolmaz. */
.tel-alt{
  transform-box:view-box;
  transform-origin:20px 762px;
  transition:stroke .95s cubic-bezier(.32,.72,.28,1), stroke-width .6s ease;
}
.ray.kesildi .tel-alt{ stroke:var(--altin); stroke-width:3.2; }

.kivilcim{
  position:absolute; left:var(--ray-oda); top:76.2vh;
  width:12px; height:12px; margin:-6px 0 0 -6px;
  border-radius:50%;
  background:radial-gradient(circle, #FFFFFF 0%, var(--altin) 38%, transparent 70%);
  opacity:0;
}
.ray.kesildi .kivilcim{ animation:cak .72s ease-out; }
@keyframes cak{
  0%  { opacity:0; transform:scale(.2); }
  16% { opacity:1; transform:scale(3.6); }
  100%{ opacity:0; transform:scale(5.4); }
}

/* Boya damlaları — dipteki anın ödülü. Parıltı "bir şey oldu" diyor,
   damlalar "renk tuttu" diyor. */
.kirintilar{ position:absolute; left:0; right:0; top:0; height:100%; }
.kirinti{
  position:absolute; left:var(--ray-oda); top:76.2vh;
  width:5px; height:6px; margin-left:-2.5px;
  border-radius:50% 50% 50% 50% / 62% 62% 38% 38%;
  background:var(--altin);
  opacity:0;
}
.ray.kesildi .kirinti{
  animation:dokul 1.25s cubic-bezier(.35,.05,.7,1) both;
  animation-delay:var(--gec, 0s);
}
@keyframes dokul{
  0%  { opacity:0; transform:translate(0,0) rotate(0deg); }
  9%  { opacity:1; }
  70% { opacity:.9; }
  100%{ opacity:0; transform:translate(var(--x,0), 30vh) rotate(var(--don,180deg)); }
}
.kirinti:nth-child(1){ --x:-14px; --don:40deg; --gec:.02s; height:7px; }
.kirinti:nth-child(2){ --x: 12px; --don:-30deg; --gec:.09s; height:5px;  background:var(--altin-ac); }
.kirinti:nth-child(3){ --x:-21px; --don:25deg; --gec:.16s; height:6px; }
.kirinti:nth-child(4){ --x: 18px; --don:-45deg; --gec:.05s; height:8px; background:var(--altin-ac); }
.kirinti:nth-child(5){ --x: -5px; --don:15deg; --gec:.22s; height:4px; }
.kirinti:nth-child(6){ --x:  7px; --don:-20deg; --gec:.13s; height:6px; }

/* Sınıf adı .makas kaldı: makas.js ve duyarlı kurallar buna bakıyor.
   İçindeki obje artık fırça. */
.makas{
  --yukseklik:90px;
  position:absolute; left:var(--ray-oda);
  top:calc(8vh + var(--p) * 68.2vh);
  width:calc(var(--yukseklik) * .615);
  height:var(--yukseklik);
  margin-left:calc(var(--yukseklik) * -.3075);
  margin-top:calc(var(--yukseklik) * -.72);   /* değme noktası kılların ucu */
  transform:rotate(calc(-14deg + var(--p) * 30deg));
}
.makas svg{ width:100%; height:100%; overflow:visible; }

/* --acilma burada eğim: kaydırma hızlandıkça fırça tele daha çok yatıyor. */
.firca{
  transform-box:view-box;
  transform-origin:32px 92px;
  transition:transform .18s cubic-bezier(.3,.9,.3,1);
  transform:rotate(calc(var(--acilma) * -9deg));
}
.ray.kesildi .firca{ transition:transform .16s cubic-bezier(.6,0,.4,1); }

.sap{ fill:var(--altin); }
.parlak{ fill:#FFFFFF; opacity:.42; }
.bilezik{ fill:#BCA2AD; }
.bilezik-parlak{ fill:#FFFFFF; opacity:.55; }
.kil{ fill:#150F13; }
.kil-parlak{ fill:#5A4950; opacity:.7; }
/* Dipte kılların ucu boyaya buluyor. */
.ray.kesildi .kil{ fill:#422833; transition:fill .5s ease; }


/* ==========================================================================
   Duyarlılık
   ========================================================================== */

@media (max-width:980px){
  .salon-duzen{ grid-template-columns:1fr; }
  /* İki kart alt alta iner; her biri kendi yüzeyini korur. */
  .son-adim{ grid-template-columns:1fr; }
  .ozet{ position:static; }
}

@media (max-width:900px){
  /* ORTALAMA KALDIRILDI (8 Eyl 2026). Adım şeridi, kartlar ve form artık her
     genişlikte sola hizalı bir sütun; başlığı ortalamak dar ekranda tek
     ortalanmış öğe bırakıyordu. */
  .kartlar-usta{ margin-inline:auto; }
}

@media (max-width:860px){
  /* menu.js ve galeri-sekme.js ile ortak 860/861px eşiği.
     Masaüstündeki daha özgül kuralı burada da aynı özgüllükle karşıla:
     mobilin 2 sütunu üst kuralın ileride değişmesine bağlı kalmasın. */
  .galeri-kolonlar{ grid-template-columns:1fr; }
  .galeri-kolonlar .galeri-izgara{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .galeri-kolon-baslik{ display:none; }
  /* Galeri spec'i: 360px'te 308px içerik ve 148px kart.
     Genel 560px kuralındaki 18px dolgu burada 26px'i ezmemeli. */
  .yaptiklarimiz > .kap{ padding-inline:26px; }
  /* Şerit kapalı olduğu için burası da 0. ESKİDEN 44px'ti ve kök değerdeki
     0'ı eziyordu: şerit gizli, ama body'nin sağ boşluğu duruyordu ve
     telefonda sağda boş beyaz bir şerit görünüyordu.
     Şeridi geri açarsan bu değeri de 44px'e döndür.
     (--ray-oda notu: --ray-oda'yı büyütürken fırçanın yarı genişliği
     (--yukseklik × .615 ÷ 2) şeridin dışına taşmamalı.) */
  /* --ust-yuk burada 64px'e iniyordu; kök değer de 64 olunca (8 Eyl 2026,
     nedenkapatilsin h-16 hizalaması) bu satır kendini tekrar eden ölü bir
     kural hâline geldi ve kaldırıldı. Çubuk artık her genişlikte 64px. */
  :root{ --ray-alan:0px; }
  .ray{ --ray-oda:52%; }
  .makas{ --yukseklik:46px; }
  /* .ust-yol kuralı kalktı — bağlantı sırası artık hiçbir genişlikte yok.
     margin-left:auto da gereksiz: .ust-ic zaten space-between. */
  .ust .dugme-dolu{ flex-shrink:0; }
  /* 17 değil 18: masaüstünde 19'a çıkarılan puntoyu burası geri alıyordu. */
  body{ font-size:18px; }
}

@media (max-width:720px){

  .google-ic{
    grid-template-columns:minmax(0,.8fr) minmax(0,1fr);
    align-items:center;
  }
  .puan-bag{ grid-column:1 / -1; justify-self:start; }

  .harita-kabuk{
    grid-template-columns:1fr;
    min-height:0;
  }
  .harita-ust{ min-height:280px; }
  .harita-cerceve{
    height:clamp(320px, 78vw, 430px);
    border-left:0;
    border-top:1px solid var(--cizgi);
  }

  .kartlar-usta{
    grid-template-columns:none;
    grid-auto-flow:column;
    grid-auto-columns:minmax(148px, 46vw);
    gap:14px;
    max-width:none;
    overflow-x:auto; overscroll-behavior-x:contain;
    /* Yan dolgu da var: kaydırma kabı gölgeleri kırpıyor. */
    padding:6px 2px 14px;
    scroll-snap-type:x mandatory;
    scrollbar-width:thin;
    scrollbar-color:var(--cizgi-ac) transparent;
  }
  .kartlar-usta .usta-kart{ scroll-snap-align:center; }
  /* 7 hizmet: üç sütunda 3+3+1, ikide 3+3+1 yerine 4 satır. Üçte son satırda
     tek kart kalıyor ama dar ekranda bu göze batmıyor — geniş ekrandaki
     6+1 kadar bariz değil. */
  .kartlar-hizmet{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; }
  .adim-nokta{ font-size:.76rem; }

  /* Fotoğraf kalktı; bu iki kural onun dar ekrandaki kadrajıydı. Kurallar
     duruyor ama etkisiz — üstteki display:none onları da kapsıyor. Fotoğrafı
     geri açan, kadrajı burada hazır bulsun diye silinmedi. */
  .fon-goksel{
    inset:0 0 auto;
    height:126px;
    background-position:center 42%;
  }
  .fon-perde{
    inset:0 0 auto;
    height:126px;
    border-left:0;
    border-bottom:1px solid var(--cizgi);
  }
  /* Üstteki 164–190px'lik boşluk fotoğraf bandına yer açmak içindi. Bant
     gidince altında koca bir boşluk kalıyordu; normal nefese döndürüldü. */
  .tepe{
    min-height:auto;
    padding:clamp(52px, 9vh, 78px) 0 clamp(44px, 7vh, 62px);
  }
  .tepe-kimlik,
  .tepe-canli{ width:100%; }
}

@media (max-width:560px){

  /* Yine 0 — bkz. 860px bloğundaki not. Şerit geri açılırsa 30px. */
  :root{ --ray-alan:0px; }
  .ray{ --ray-oda:52%; }
  .makas{ --yukseklik:30px; }
  .kap{ padding-inline:18px; }
  .ust-ic{ gap:10px; }
  .ust .ust-randevu{ padding:12px 10px; min-height:44px; font-size:.82rem; }
  .form,
  .ozet{ padding:22px 18px; }
  .google-ic{
    grid-template-columns:1fr;
    gap:24px;
  }
  .puan-ana{
    padding:0 0 24px;
    border-right:0;
    border-bottom:1px solid var(--cizgi);
  }
  .puan-bag{ grid-column:auto; }
  .puan-sayi{ font-size:clamp(4.4rem, 24vw, 6.3rem); }
  .tepe-alt{ align-items:center; }
  /* 320 px'te dört etiket ("Hizmet · Uzman · Gün · Bilgi") aynı satırda
     kalıyor: sütun ~63 px, en uzun etiket .72rem'de ~48 px. */
  .adim-yol{ gap:7px; }
  .adim-nokta{ font-size:.72rem; }
  .kartlar-hizmet{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:11px; }
  .hizmet-kart,
  .usta-kart{ padding:7px 7px 14px; }
  .hk-alt{ padding:10px 4px 0; }
  .hk-ad{ font-size:.94rem; }
  .saat-izgara{ grid-template-columns:repeat(auto-fill, minmax(74px,1fr)); }
  .dugme{ padding:12px 20px; font-size:.96rem; }
  .sutun-tablo{ padding:20px 16px; }
  .saatler th,
  .saatler td{ padding-inline:8px; }
  .salon-kisa-sira{ grid-template-columns:1fr; }
  .salon-gorseller{ grid-template-columns:1fr; }
  .salon-gorsel-kart,
  .salon-gorsel-kart:first-child{ grid-column:auto; grid-row:auto; }
  /* Dar ekranda 3 sütun 9:16 kart ~100px kalıyor, gönderi seçilemiyor.
     2 sütuna iniyor; mozaik kalıntısı nth-child kuralları kaldırıldı. */
  /* Kolon içindeki ızgarada da aynı özgüllük: mobil 2 sütun korunur. */
  .galeri-izgara,
  .galeri-kolonlar .galeri-izgara{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .yorum-kontroller{ display:none; }
}

/* ==========================================================================
   Azaltılmış hareket: fırça şeridi kalkar, dönüşler susar
   ========================================================================== */

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  body{ padding-right:0; }
  .ray{ display:none; }
  .galeri-kart{ transition:none; }
  .galeri-kart:hover,
  .galeri-kart:focus-visible{ transform:none; }
  .beliris-hazir,
  .beliris-hazir.beliris-gorundu{
    opacity:1; transform:none; transition:none !important;
  }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .once-sonra-once-kat,
  .once-sonra-ayirici{ transition:none; }
}

/* Harita, ziyaretçi açıkça istemeden Google'a bağlanmaz. */
.harita-onay {
  min-height: 320px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 16px;
  padding: 32px;
  text-align: center;
  background: var(--kat);
  color: var(--tebesir);
}
.harita-onay p { margin: 0; max-width: 38ch; }
.harita-onay .bag { font-size: .86rem; }
.harita-cerceve iframe[hidden] { display: none; }

/* Ayrı gizlilik sayfası ana sitenin sakin tipografisini kullanır. */
.yasal-govde { min-height: 100svh; background: var(--kok); color: var(--tebesir); }
.yasal-ust { padding: 22px 0; border-bottom: 1px solid var(--cizgi); }
.yasal-ust .kap { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.yasal-ana { padding: clamp(48px, 8vw, 96px) 0; }
.yasal-metin { max-width: 760px; }
.yasal-metin h1 { margin: 0 0 12px; font: 700 clamp(2.4rem, 7vw, 5rem)/.95 var(--govde); }
.yasal-metin h2 { margin: 42px 0 12px; font: 700 clamp(1.5rem, 3vw, 2.2rem)/1.1 var(--govde); }
.yasal-metin p, .yasal-metin li { line-height: 1.75; }
.yasal-metin ul { padding-left: 1.25rem; }
.yasal-kisa { color: var(--sis); max-width: 62ch; }