/* 9 Eylül 2026 — randevu defteri ve gerçek dönüşüm vitrini.
   Bu dosya ana stilin ardından yüklenir; değişiklikler iki bölüme kapsamlıdır. */

/* ————————————————————— Randevu defteri ————————————————————— */

.bolum-randevu{
  padding-top:clamp(34px, 5vw, 70px);
  background:var(--kat-2);
}

/* 12 Eylül 2026 — referans görünüm: ayrı açık adım kartı ve form yüzeyi.
   Adım sırası, disabled/aktif/tamam durumları ve özetin yeri korunur. */
.bolum-randevu > .kap{ display:block; }
.randevu-panel{ background:transparent; }

.bolum-randevu .adim-yol{
  counter-reset:randevu-adimi;
  position:static;
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:0;
  margin:0 0 20px;
  padding:18px clamp(12px,2vw,28px);
  border:1px solid var(--cizgi);
  border-radius:16px;
  background:var(--kat);
  color:var(--tebesir);
}
.bolum-randevu .adim-nokta{
  counter-increment:randevu-adimi;
  display:flex;
  align-items:center;
  min-width:0;
  min-height:44px;
  padding:0;
  color:var(--tebesir);
  font-weight:600;
  letter-spacing:0;
}
.bolum-randevu .adim-nokta::before{ content:none; }
.bolum-randevu .adim-nokta:not(:last-child)::after{
  content:"";
  flex:1 0 10px;
  height:1px;
  margin:0 clamp(6px,1vw,14px);
  background:var(--cizgi);
}
.bolum-randevu .adim-nokta button{
  display:flex;
  flex-direction:row;
  align-items:center;
  flex:0 1 auto;
  gap:8px;
  width:auto;
  min-width:44px;
  min-height:44px;
  margin:0;
  padding:0;
  color:inherit;
  line-height:1.2;
  text-align:left;
}
.bolum-randevu .adim-nokta button::before{
  content:counter(randevu-adimi);
  display:grid;
  place-items:center;
  flex:0 0 30px;
  width:30px;
  height:30px;
  border-radius:50%;
  background:var(--kat-2);
  color:var(--sis);
  font:600 .9rem/1 var(--govde);
  font-variant-numeric:tabular-nums;
}
.bolum-randevu .adim-nokta.aktif button::before{
  background:var(--altin);
  color:var(--kat);
}
.bolum-randevu .adim-nokta.aktif button::after{ content:none; }
.bolum-randevu .adim-nokta button:focus-visible{
  outline:2px solid var(--altin);
  outline-offset:3px;
}
.adim-metin{ display:block; min-width:0; }
.adim-adi{ display:block; font-size:.86rem; font-weight:600; }
.adim-tarif{
  display:block;
  margin-top:4px;
  color:var(--sis);
  font-size:.8rem;
  font-weight:400;
  white-space:nowrap;
}
.panel-govde{
  padding:clamp(26px,3.4vw,46px) clamp(16px,2.4vw,34px) clamp(30px,4vw,52px);
  border:1px solid var(--cizgi);
  border-radius:16px;
  background:var(--kat);
  box-shadow:0 18px 44px rgba(58,36,48,.06);
}
.randevu-etiket{
  margin:0 0 12px;
  color:var(--altin);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.14em;
}

/* ADIM BAŞLIĞI ORTALANDI (12 Eyl 2026, operatör isteği: "burası sayfanın
   ortasında olsun, simetrik olsun").

   DÖRT ADIMIN HEPSİNDE ortalı, yalnız birinci adımda değil: ziyaretçi
   adımlar arasında ilerlerken başlık bloğu aynı yerde durmalı, yoksa her
   geçişte sola-ortaya zıplar.

   Ortalanan yalnız başlık bloğu ve aile sekmesi. Kart içi metinler, form
   alanları ve özet sola dayalı kalıyor — okuma hattı onlarda sol kenardır.

   `.hizmet-aileleri` `width:max-content` olduğu için `text-align` onu
   taşımaz; `margin-inline:auto` şart. */
.bolum-randevu .randevu-etiket,
.bolum-randevu .adim-baslik,
.bolum-randevu .adim-not{
  text-align:center;
}
.bolum-randevu .adim-not{
  margin-inline:auto;
  max-width:62ch;
}
/* Ara genişlikte açıklama tek satır kalır; daire üstte yer kazanır. */
@media (min-width:561px) and (max-width:1000px){
  .bolum-randevu .adim-nokta button{
    flex-direction:column;
    align-items:flex-start;
    width:100%;
  }
  .bolum-randevu .adim-nokta:not(:last-child)::after{
    position:absolute;
    top:15px;
    left:40px;
    right:10px;
    margin:0;
  }
  .adim-tarif{ font-size:.72rem; }
}
@media (min-width:561px) and (max-width:700px){
  .bolum-randevu .adim-yol{ grid-template-columns:1.45fr 1fr 1fr 1fr; }
}
/* Seçenek (a): dört adımın konumu ve geri dönüş hedefleri hep görünür. */
@media (max-width:560px){
  .bolum-randevu .adim-yol{ padding:12px 10px; }
  .bolum-randevu .adim-nokta button{
    flex-direction:column;
    gap:6px;
    align-items:center;
  }
  .adim-adi{ font-size:.72rem; }
  .adim-tarif{ display:none; }
  .bolum-randevu .adim-nokta:not(:last-child)::after{ margin:0 5px; }
}

/* Panel içinde 4rem'lik başlık kartları eziyordu — bölüm başlığı değil,
   panelin içindeki bir adım başlığı bu. 2.9rem'de hiyerarşi kartlarla
   dengeleniyor. letter-spacing -.035em Cormorant'a göreydi; Bodoni'de o
   sıkılıkta tırnaklar birbirine değiyor. */
.bolum-randevu .adim-baslik{
  max-width:20ch;
  margin-bottom:12px;
  font-size:clamp(1.8rem, 2.9vw, 2.5rem);
  line-height:1.1;
  letter-spacing:-.024em;
}

.bolum-randevu .adim-not{
  max-width:62ch;
  margin-bottom:clamp(28px, 4vh, 44px);
  font-size:1.02rem;
}
.bolum-randevu [data-adim="1"] .adim-baslik,
.bolum-randevu [data-adim="1"] .adim-not{ max-width:none; }

/* IZGARA 4 → 3 SÜTUN (11 Eylül 2026). Aile seçimi sekmeye inince kazanılan
   dikey yer buraya verildi: asıl seçim hizmet kartları, öne çıkması gereken
   onlar. 7 hizmette 3 sütun 3+3+1 veriyor, 4 sütun 4+3 veriyordu — ikisi de
   tam sıra değil, ama kart büyüklüğü tırtıklı son satırdan önemli.

   DİKKAT — GÖRSEL ÇÖZÜNÜRLÜĞÜ: kartlar büyüdüğü için kaynak görseller de
   büyümeli. Eldeki 12 fotoğraf 304×304 ve bu boyutta yumuşak kalıyor.
   Yeni set gelmeden BU DÜZEN YAYINA ALINMAMALI. */
.bolum-randevu .kartlar-hizmet{
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(14px, 1.8vw, 22px);
}

/* 2 SÜTUNA GEÇİŞ 460px'ten 640px'e ÇEKİLDİ. Eskiden 4 sütun 460px'e kadar
   iniyordu; 3 sütunda 500px'lik bir ekranda kart ~150px kalıyor ve "Kesim ve
   şekillendirme" gibi iki kelimelik adlar üç satıra bölünüyor. Bu kural
   aşağıdaki 460px bloğundan ÖNCE duruyor: orada da 2 sütun yazıyor, yani
   çakışma yok, ikisi aynı değeri veriyor. */
@media (max-width:640px){
  .bolum-randevu .kartlar-hizmet{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}

/* AİLE SEÇİMİ = KOMPAKT SEKME (11 Eylül 2026, operatör kararı).
   Burada ÜÇ KAT vardı ve hepsi aynı iki düğmeyi yeniden boyuyordu:
   stil.css:1034 hap biçimli bir segment denetimi kuruyor, buradaki kat onu
   132px'lik iki karta çeviriyordu, "9 Eylül: net kategori seçimi" katı da
   onları 178px'e ve 2.65rem başlığa çıkarıyordu. Sonuç ters hiyerarşiydi:
   sayfadaki en büyük iki kutu, ASIL seçilecek olan hizmet kartlarından
   büyüktü. İki kat da silindi; stil.css'teki özgün segment denetimi geri
   yüzeye çıktı ve yalnız burada inceltildi.

   NEDEN GERİ ALINDI bilgisi önemli: 9 Eylül'deki büyütme "kategoriler
   belirgin olsun" isteğiydi. İşletme kategorilerin kaybolduğunu söylerse
   çözüm kartları büyütmek DEĞİL — sekmeyi daha görünür yapmak (dolgu,
   kontrast), yoksa aynı tur yeniden başlar.

   Genişlik max-content: 1200px'lik bir segment denetimi segment denetimi
   gibi durmuyor, üst çubuğa benziyor. Dar ekranda tam genişliğe açılıyor. */
.bolum-randevu .hizmet-aileleri{
  display:flex;
  gap:4px;
  width:max-content;
  max-width:100%;
  /* `auto` yan boşluk: sekme çubuğu `width:max-content` olduğu için üstteki
     `text-align:center` onu taşımaz, ortalamayı bu satır yapıyor. */
  margin:0 auto clamp(22px, 3vw, 32px);
  padding:5px;
  border:1px solid var(--cizgi);
  border-radius:999px;
  background:var(--kat-2);
}

.bolum-randevu .hizmet-ailesi{
  position:relative;
  flex:0 1 auto;
  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);
  text-align:center;
  box-shadow:none;
  transition:background-color .2s ease, color .2s ease;
}

/* "Seç" / "Seçili" köşe etiketi KALDIRILDI. Kart düzeninde bir işi vardı;
   sekmede yok — hangi sekmenin açık olduğunu dolgunun kendisi söylüyor ve
   aria-pressed zaten ekran okuyucuya bildiriyor. */
.bolum-randevu .hizmet-ailesi::before{
  content:none;
}

.bolum-randevu .hizmet-ailesi:hover{
  background:var(--kat);
  color:var(--tebesir);
  transform:none;
}

/* SEÇİLİ SEKME PEMBE (11 Eylül 2026, operatör isteği: "panel pembe yap").
   Eskiden --kobalt-ac (#3A2430) idi — neredeyse siyah bir erik. Pembe bir
   sayfada o çip tek başına koyu duruyordu. Artık --altin (#A62E56), yani
   üst çubuktaki "Randevu al" düğmesiyle AYNI pembe: sayfada iki farklı
   "birincil" renk dolaşmıyor.

   Beyaz metin #A62E56 üzerinde ~6.1:1 — AA geçiyor.
   Adet rozeti --altin-ac OLAMAZ (pembe üstünde pembe, okunmuyor);
   yarı saydam beyaza alındı. */
.bolum-randevu .hizmet-ailesi[aria-pressed="true"]{
  background:var(--altin);
  color:#fff;
  box-shadow:none;
}

.bolum-randevu .hizmet-ailesi:focus-visible{
  outline:2px solid var(--altin);
  outline-offset:3px;
}

/* Başlık artık satır içi bir sekme etiketi, bölüm başlığı değil. */
.hizmet-ailesi-baslik{
  display:inline;
  font:600 1rem/1.2 var(--govde);
  letter-spacing:0;
}

/* Açıklama satırı ("Kaynak, renklendirme…") sekmeye sığmıyor ve zaten
   altındaki ızgara aynı şeyi tek tek gösteriyor. DOM'da duruyor: randevu.js
   üretmeye devam ediyor, panel ve testler onu bekliyor olabilir. */
.hizmet-ailesi-aciklama{
  display:none;
}

.bolum-randevu .hizmet-kart{
  border-radius:5px 22px 5px 5px;
  box-shadow:0 8px 24px rgba(58,36,48,.06);
}

.bolum-randevu .hizmet-kart .hk-alan{
  border-radius:3px 17px 3px 3px;
}


/* Tek satırlık veri notu; ad için iki satır ayrılır, kartlar eşit kalır. */
.bolum-randevu .hizmet-kart .hk-alt{
  position:relative;
  width:100%;
  min-width:0;
  padding-right:44px;
  min-height:76px;
}
.bolum-randevu .hizmet-kart .hk-ad{ min-height:0; }
.hk-not{
  display:block;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  height:1.4em;
  color:var(--sis);
  font-size:.82rem;
  line-height:1.4;
}
.hk-ok{
  position:absolute;
  right:4px;
  bottom:0;
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:50%;
  background:var(--kat-2);
  color:var(--altin);
}
.hk-ok svg{ width:18px; height:18px; transition:transform .18s ease; }
.hizmet-kart:hover .hk-ok svg{ transform:translateX(2px); }
/* Gizli aile kartları ve sekme kabı sayılmaz; 7'ye sabitlenmez. */
@media (min-width:641px){
  .bolum-randevu .hizmet-kart:nth-child(3n+1 of .hizmet-kart:not([hidden])):nth-last-child(1 of .hizmet-kart:not([hidden])){
    grid-column:2;
  }
}
/* İki sütunda aynı kart genişliğiyle son tek kartı ortala. */
@media (max-width:640px){
  .bolum-randevu .hizmet-kart:nth-child(2n+1 of .hizmet-kart:not([hidden])):nth-last-child(1 of .hizmet-kart:not([hidden])){
    grid-column:1 / -1;
    justify-self:center;
    width:calc((100% - clamp(14px, 1.8vw, 22px)) / 2);
  }
  .bolum-randevu .hizmet-kart .hk-alt{ padding-right:4px; padding-bottom:38px; min-height:112px; }
}

/* ————————————————————— Dönüşüm vitrini ————————————————————— */

.once-sonra-vitrin{
  padding:clamp(72px, 9vw, 128px) 0;
  overflow:hidden;
  background:var(--kobalt-ac);
  color:#fff;
}

.once-sonra-vitrin > .kap{
  display:grid;
  grid-template-columns:minmax(220px, .68fr) minmax(0, 1.65fr);
  gap:clamp(42px, 7vw, 96px);
  align-items:center;
}

.once-sonra-metin{
  position:relative;
  z-index:2;
}

.donusum-sira{
  margin:0 0 24px;
  padding-bottom:16px;
  border-bottom:1px solid rgba(255,255,255,.22);
  color:var(--altin-ac);
  font-size:.72rem;
  font-weight:700;
}

.once-sonra-vitrin .baslik{
  margin:0;
  color:#fff;
  /* Punto ve satır yüksekliği Inter'e göre gevşetildi: .82 satır yüksekliği
     Cormorant'ın kısa çıkıntılarına göreydi, Inter'de satırlar çakışıyor. */
  font-size:clamp(2.9rem, 5.6vw, 5rem);
  line-height:.98;
  letter-spacing:-.03em;
}

.donusum-aciklama{
  max-width:34ch;
  margin:32px 0 0;
  color:rgba(255,255,255,.7);
  font-size:.98rem;
  line-height:1.65;
}

.donusum-randevu{
  display:inline-block;
  margin-top:28px;
  padding:0 0 6px;
  border-bottom:1px solid var(--altin-ac);
  color:#fff;
  font-size:.9rem;
  font-weight:700;
  text-decoration:none;
}

.donusum-randevu:hover{
  color:var(--altin-ac);
}

.donusum-randevu:focus-visible{
  outline:2px solid var(--altin-ac);
  outline-offset:6px;
}

.donusum-kareleri{
  display:grid;
  grid-template-columns:minmax(150px, .72fr) minmax(230px, 1.28fr);
  gap:clamp(14px, 2vw, 24px);
  align-items:start;
}

.donusum-kare{
  min-width:0;
  margin:0;
}

.donusum-once{
  margin-top:clamp(52px, 7vw, 92px);
}

.donusum-gorsel{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.24);
  border-radius:3px 34px 3px 3px;
  background:#21171c;
}

.donusum-sonra .donusum-gorsel{
  border-radius:34px 3px 3px 3px;
}

.donusum-gorsel img{
  display:block;
  width:100%;
  height:auto;
}

.donusum-kare figcaption{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:13px 2px 0;
  border-top:1px solid transparent;
  color:#fff;
  line-height:1.3;
}

.donusum-kare figcaption strong{
  font-size:.82rem;
}

.donusum-kare figcaption span{
  color:rgba(255,255,255,.55);
  font-size:.72rem;
  text-align:right;
}

@media (max-width:900px){
  /* Bu sorgu eskiden dikey rayı yatay şeride çeviriyordu. Şerit 10 Eylül
     2026'da bütün genişliklerde yatay olduğu için o iş buradan kalktı;
     geriye yalnız daralan ekranda punto ve dolgu kısma kaldı. */
  .bolum-randevu .adim-nokta{
    padding-right:10px;
  }

  .bolum-randevu .adim-nokta::before{
    inset:auto 10px 0 0;
  }

  .bolum-randevu .adim-nokta button{
    gap:4px;
    margin-bottom:10px;
    font-size:.76rem;
  }

  .bolum-randevu .adim-nokta button::before{
    font-size:.78rem;
  }

  .once-sonra-vitrin > .kap{
    grid-template-columns:minmax(190px, .72fr) minmax(0, 1.28fr);
    gap:34px;
  }

  .once-sonra-vitrin .baslik{
    font-size:clamp(3.1rem, 8vw, 4.6rem);
  }
}

@media (max-width:620px){
  .bolum-randevu .adim-baslik{
    max-width:12ch;
    font-size:clamp(2.45rem, 12vw, 3.25rem);
  }

  /* İKİ SEKME TELEFONDA DA YAN YANA — 10 Eyl 2026'daki "yan yana dursun"
     isteği sekme düzeninde bedavaya geliyor, çubuk zaten tek satır.
     Fark: dar ekranda çubuk max-content olmaktan çıkıp tam genişliğe
     yayılıyor ve iki sekme genişliği paylaşıyor, yoksa sağda ölü boşluk
     kalıyor. Dolgu daralıyor ama min-height 46px KORUNUYOR (dokunma hedefi). */
  .bolum-randevu .hizmet-aileleri{
    width:100%;
    gap:3px;
  }

  .bolum-randevu .hizmet-ailesi{
    flex:1 1 0;
    padding:11px 10px;
  }

  .hizmet-ailesi-baslik{
    font-size:.94rem;
  }

  .hizmet-ailesi-sayi{
    font-size:.72rem;
  }
}

/* Açıklama satırı artık her ekranda gizli (bkz. .hizmet-ailesi-aciklama),
   o yüzden buradaki dar ekran kuralı ve kart yüksekliği düştü. */
@media (max-width:460px){
  .bolum-randevu .kartlar-hizmet{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }

  .once-sonra-vitrin > .kap{
    display:block;
  }

  .donusum-aciklama{
    max-width:38ch;
  }

  .donusum-kareleri{
    display:block;
    margin-top:50px;
  }

  .donusum-once{
    width:78%;
    margin:0;
  }

  .donusum-sonra{
    position:relative;
    z-index:2;
    width:88%;
    margin:-34px 0 0 auto;
    padding-top:34px;
    background:var(--kobalt-ac);
  }
}

@media (prefers-reduced-motion:reduce){
  .hk-ok svg, .hizmet-kart:hover .hk-ok svg{ transition:none; transform:none; }
  .bolum-randevu .hizmet-ailesi{
    transition:none;
  }
}

/* "9 Eylül: net kategori seçimi" katı 11 Eylül 2026'da SİLİNDİ — gerekçe
   yukarıda, .hizmet-aileleri başlığında. Buradaki
   #randevu[data-aktif-adim="1"] seçicileri yalnız o iki kartı büyütmek
   içindi; sekme düzeninde karşılığı yok. */

/* Sekmedeki adet satır içi bir rozet: "SAÇ · 7". Blok değil, çünkü
   margin-top:auto ile dibe yaslanacağı bir kart kalmadı. */
.hizmet-ailesi-sayi{
  display:inline;
  margin:0;
  padding:0;
  color:var(--altin);
  font-size:.78rem;
  font-weight:700;
  font-variant-numeric:tabular-nums;
}

/* Seçili sekmenin zemini pembe olduğu için adet rozeti de beyaza döndü.
   --altin-ac burada pembe üstünde pembe olurdu. */
.bolum-randevu .hizmet-ailesi[aria-pressed="true"] .hizmet-ailesi-sayi{
  color:rgba(255,255,255,.82);
}

/* ————————————————— Sürüklenebilir öncesi / sonrası ————————————————— */

.once-sonra-vitrin > .kap{
  align-items:center;
}

.once-sonra-vitrin .once-sonra-listesi{
  display:block;
  width:100%;
  max-width:660px;
  justify-self:end;
}

.once-sonra-vitrin .once-sonra-kart{
  margin:0;
}

.once-sonra-vitrin .once-sonra-yuzey{
  aspect-ratio:1 / 1;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.3);
  border-radius:4px 42px 4px 4px;
  background:#21171c;
  box-shadow:0 28px 70px rgba(14,8,11,.24);
}

.once-sonra-vitrin .once-sonra-gorsel{
  object-fit:cover;
  object-position:center 48%;
}

.once-sonra-vitrin .once-sonra-etiket{
  top:auto;
  bottom:16px;
  padding:8px 12px;
  border-color:rgba(255,255,255,.35);
  border-radius:3px;
  background:rgba(36,26,29,.82);
  color:#fff;
  backdrop-filter:blur(8px);
}

.once-sonra-vitrin .once-sonra-ayirici{
  width:2px;
  background:#fff;
  box-shadow:0 0 0 1px rgba(36,26,29,.18);
}

.once-sonra-vitrin .once-sonra-kulp{
  width:54px;
  height:54px;
  border:0;
  background:#fff;
  color:var(--kobalt-ac);
  font-size:0;
  box-shadow:0 8px 28px rgba(20,10,15,.28);
}

.once-sonra-vitrin .once-sonra-kulp::before{
  content:"‹  ›";
  font:700 1.45rem/1 var(--govde);
  letter-spacing:3px;
  transform:translateX(2px);
}

.once-sonra-vitrin .once-sonra-aralik:focus-visible + .once-sonra-ayirici .once-sonra-kulp{
  outline:3px solid var(--altin-ac);
  outline-offset:4px;
}

.once-sonra-vitrin .once-sonra-aciklama{
  margin-top:14px;
  color:rgba(255,255,255,.72);
  font-size:.82rem;
  font-weight:600;
}

@media (max-width:620px){
  .once-sonra-vitrin .once-sonra-listesi{
    margin-top:44px;
  }

  .once-sonra-vitrin .once-sonra-yuzey{
    border-radius:3px 30px 3px 3px;
    box-shadow:0 18px 45px rgba(14,8,11,.22);
  }

  .once-sonra-vitrin .once-sonra-kulp{
    width:48px;
    height:48px;
  }
}

/* ————————————————————— Site menüsü (12 Eyl 2026) —————————————————————
   Site dört sayfaya bölündü ve menü İKİ AYRI ŞEY olarak kuruluyor:

     · dar ekranda (≤860px) hamburger — çubuğun altına açılan panel,
     · geniş ekranda (≥861px) çubuğun İÇİNDE yatay bağlantı sırası.

   AYNI MARKUP, iki görünüm. Bağlantılar bir kez yazılıyor: ikinci bir
   masaüstü kopyası açılsaydı iki gezinme bölgesi, iki kez taranan
   bağlantı ve iki ayrı "bulunulan sayfa" işareti olurdu — biri kaçınılmaz
   olarak diğeriyle tutarsızlaşır.

   İLK HÂLİ HAMBURGERİ HER GENİŞLİKTE GÖSTERİYORDU, o karar geri alındı:
   masaüstünde dört bağlantıyı bir tıkın arkasına saklamak yer kazandırmıyor
   (çubukta bol boşluk var), sadece ziyaretçiye sitenin kaç sayfası olduğunu
   gizliyor. Hamburger dar ekranın çözümü, geniş ekranın değil.

   `hidden` ÖZNİTELİĞİ ÜZERİNE NOT: kapalı durumun kaynağı markup'taki
   `hidden`. Masaüstü kuralı onu display ile eziyor ki JS yüklenmezse de
   bağlantılar görünsün; menu.js ise geniş ekranda özniteliği tamamen
   kaldırıyor, böylece JS varken görünürlük ve erişilebilirlik ağacı
   ayrışmıyor. İkisi birlikte: JS'siz çalışır, JS'liyse temiz. */

.ust-sosyal{ display:none; }

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

.menu-dugme{
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:44px;            /* dokunma hedefi */
  min-width:44px;
  padding:10px 14px;
  border:1px solid var(--cizgi);
  border-radius:999px;
  background:var(--kat);
  color:var(--tebesir);
  font:600 .92rem/1 var(--govde);
  cursor:pointer;
}

.menu-dugme:hover{ border-color:var(--cizgi-ac); }

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

/* İki çizgi, üç değil. Üçüncü çizgi hiçbir şey anlatmıyor; yanında "Menü"
   yazısı olduğu için ikon zaten tek başına taşımıyor. */
.menu-ikon{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:17px;
}

.menu-ikon span{
  display:block;
  height:2px;
  border-radius:2px;
  background:currentColor;
  transition:transform .18s ease, opacity .18s ease;
}

.menu-dugme[aria-expanded="true"] .menu-ikon span:first-child{
  transform:translateY(3.5px) rotate(45deg);
}
.menu-dugme[aria-expanded="true"] .menu-ikon span:last-child{
  transform:translateY(-3.5px) rotate(-45deg);
}

/* ——— Dar ekran: çubuğun altına açılan panel ———
   position:absolute, sticky DEĞİL. Panel artık başlığın İÇİNDE ve `.ust`
   sticky olduğu için konum sarmalayıcısı o; `top:100%` çubuğun tam altı
   demek, --ust-yuk'ü elle tekrar etmeye gerek kalmıyor. Akıştan da çıkıyor:
   eski sticky panel açılınca altındaki içeriği AŞAĞI İTİYORDU, yani menüyü
   açmak sayfayı zıplatıyordu. Şimdi üzerine biniyor. */
.ana-menu{
  position:absolute;
  top:100%;
  left:0;
  right:0;
  z-index:40;
  border-bottom:1px solid var(--cizgi);
  background:var(--kat);
  box-shadow:0 14px 30px rgba(58,36,48,.08);
}

/* Yatay boşluk buradan: içteki div'in `kap` sınıfı KALDIRILDI, çünkü
   masaüstünde `kap` paneli 1080px'e sabitleyip ortalıyor ve bağlantıları
   çubuğun içinde hizalamayı imkânsız kılıyordu. Değerler .kap ile aynı. */
.ana-menu-ic{
  display:flex;
  flex-direction:column;
  padding:10px 26px;
}

.ana-menu-bag{
  padding:14px 2px;
  border-bottom:1px solid var(--cizgi);
  color:var(--tebesir);
  font:600 1.06rem/1.2 var(--govde);
  text-decoration:none;
}

.ana-menu-bag:last-child{ border-bottom:0; }
.ana-menu-bag:hover{ color:var(--altin); }

.ana-menu-bag:focus-visible{
  outline:2px solid var(--altin);
  outline-offset:2px;
}

/* Bulunulan sayfa: pembe ve solunda bir şerit. Yalnız renkle ayırmak
   yetmez — renk körü ziyaretçide fark kalmıyor. */
.ana-menu-bag[aria-current="page"]{
  padding-left:12px;
  border-left:3px solid var(--altin);
  color:var(--altin);
}

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

/* ——— Geniş ekran: bağlantılar çubuğun içinde ———
   Eşik 861px, keyfi değil: eylem.js'in `darEkran` sorgusu (max-width:860px)
   ve alt eylem çubuğu tam burada devreye giriyor. İki ayrı eşik olsaydı
   aradaki bantta ne hamburger ne de yatay sıra doğru davranırdı. */
@media (min-width:861px){
  .ust .ust-randevu{ white-space:nowrap; }
  .ust-sosyal{ display:flex; align-items:center; gap:2px; }
  .ust-sosyal a:not([hidden]){
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    border-radius:50%;
    background:var(--kat-2);
    color:var(--sis);
  }
  .ust-sosyal .ik{ width:16px; height:16px; }
  .ust-sosyal a:hover{ color:var(--altin); }
  .ust-sosyal a:focus-visible{ outline:2px solid var(--altin); outline-offset:2px; }

  .menu-dugme{ display:none; }

  /* `display` BURADA `hidden` ÖZNİTELİĞİNİ EZİYOR — bilerek.
     Kapalı durumun kaynağı markup'taki `hidden`; JS yoksa onu kaldıracak
     kimse olmaz ve masaüstü ziyaretçisi bağlantıları hiç göremezdi.
     Yazar kuralı tarayıcının `[hidden]{display:none}` kuralını geçiyor.
     JS varsa menu.js özniteliği zaten tamamen kaldırıyor. */
  .ana-menu{
    display:block;
    position:static;
    z-index:auto;
    border:0;
    background:none;
    box-shadow:none;
  }

  .ana-menu-ic{
    flex-direction:row;
    align-items:center;
    gap:clamp(16px, 2.2vw, 30px);
    padding:0;
  }

  .ana-menu-bag{
    position:relative;
    display:flex;
    align-items:center;
    min-height:44px;
    padding:8px 0;
    border-bottom:0;
    font:600 .95rem/1 var(--govde);
    white-space:nowrap;
  }

  /* Bulunulan sayfa: altında ince bir çizgi. Dar ekrandaki sol şeridin
     yatay karşılığı — işaret yine yalnız renge yaslanmıyor. */
  .ana-menu-bag[aria-current="page"]{
    padding-left:0;
    border-left:0;
  }

  .ana-menu-bag[aria-current="page"]::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:2px;
    border-radius:2px;
    background:var(--altin);
  }

  body.menu-acik{ overflow:auto; }
}

/* Sosyal bağlantılar eklendi: 861px sınırında da 64px çubuğa sığar. */
@media (min-width:861px) and (max-width:1000px){
  .ust-ic{ gap:12px; }
  .ust-sag{ gap:6px; }
  .ust .ust-randevu{ padding-inline:16px; }
  .ana-menu-ic{ gap:14px; }
}

@media (max-width:640px){
  .bolum-randevu [data-adim="1"] .adim-baslik{ font-size:clamp(1.8rem,4.5vw,2.1rem); }
  .bolum-randevu .hizmet-ailesi{
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
  }
  .hizmet-ailesi-sayi{ white-space:nowrap; }
}
@media (max-width:420px){
  .hizmet-ailesi-baslik{ font-size:.82rem; }
}

/* En dar telefon: logo, CTA ve 44px menü hedefi tek satırda kalır. */
@media (max-width:360px){
  .ust-ic{ padding-inline:12px; gap:4px; }
  .ust-sag{ gap:4px; }
  .ust .marka-ad{ font-size:.82rem; letter-spacing:.04em; }
  .ust .ust-randevu{ padding-inline:8px; font-size:.78rem; }
}

@media (max-width:560px){
  /* .kap bu genişlikte 18px'e iniyor; panel de onunla hizalı kalsın. */
  .ana-menu-ic{ padding-inline:18px; }
}

@media (max-width:420px){
  /* 320px'te "Randevu al" + "Menü" yan yana sığmıyor; menüde yalnız ikon
     kalıyor. Erişilebilir ad aria-label'den geliyor, kaybolmuyor. */
  .menu-yazi{
    position:absolute;
    width:1px; height:1px;
    margin:-1px; padding:0; border:0;
    clip-path:inset(50%);
    overflow:hidden;
  }
  .menu-dugme{ padding:10px 12px; }
}