/* ==========================================================================
   Endam tasarım sistemi v2 (Salonix yönü)
   --------------------------------------------------------------------------
   GEÇİŞ NOTU: bu katman `.s-page` ile KAPILI. Yalnız sınıfı taşıyan sayfalar
   yeni sistemi görür; kalan sayfalar `web/style.css` ile eskisi gibi çalışır.
   Sayfa sıra geldikçe `.s-page` alır; hepsi bitince kapı kalkar ve eski dosya
   silinir. Amaç: sistem değişimi tek gecede on iki sayfayı kırmasın.

   Renkler `endam-tasarim-sistemi.md`den; her metin/zemin çifti ÖLÇÜLDÜ, iki
   değer belgedekinden farklı ve sebebi aşağıda yazıyor.
   ========================================================================== */

/* Inter — KENDİMİZ barındırıyoruz (üçüncü parti font isteği yok). Değişken
   font: tek dosya 400–700 arası tüm ağırlıkları taşır, dört ayrı dosya değil.
   Türkçe İKİ alt küme birden gerektirir: ı U+0131 `latin`te, ğ ş İ `latin-ext`te. */
@font-face{
  font-family:'InterEndam'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("fonts/inter-latin-ext.1ad231aac0a8.woff2") format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,
    U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,
    U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'InterEndam'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("fonts/inter-latin.260c81a4759b.woff2") format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,
    U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Display serif — SELF-HOST. Onceden `--s-serif` sistem fontlarina
   dayaniyordu ('Iowan Old Style' → Palatino → Georgia) ve gerekcesi "indirme
   maliyeti yok" idi. Gercekte o yiginin HICBIR uyesi Android'de ya da
   Ubuntu'da kurulu degil: kitlemizin neredeyse tamami basliklari
   DejaVu/Liberation Serif ile goruyordu. Yani sifir maliyetle YANLIS font
   gosteriyorduk; sitenin kimligini tasiyan baslıklar hedef kitleye hic
   ulasmiyordu. (Ayni ayrisma gorsel testleri de kiriyordu: Mac'te uretilen
   baseline'lar CI Linux'unda tutmuyordu.)

   Lora, degisken agirlik 400..700 — kullanilan iki agirlik (400 ve 700) tek
   dosyada. Turkce 12 harfin tamami (ı İ ğ Ğ ş Ş ç Ç ö Ö ü Ü) iki alt kumenin
   BIRLESIMINDE dogrulandi: latin'de ı ç ö ü, latin-ext'te İ ğ ş.
   ITALIK YUKLENMIYOR: yalnizca `.f-hand` (sayfada tek dekoratif satir) italik
   ve dosyalari 61,8 KB tutuyordu — mobil veriyle gelen kitle icin kotu takas;
   tarayici oblik sentezliyor. */
@font-face{
  font-family:'LoraEndam'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("fonts/lora-latin-ext.d551ed729291.woff2") format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,
    U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,
    U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'LoraEndam'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("fonts/lora-latin.662c56ecd8de.woff2") format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,
    U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* TOKEN'LAR :root'TA, .s-page'de DEĞİL — SIZDIRAN KAPI DÜZELTMESİ.
   Bileşen sınıfları (.s-plan, .s-card, .k-*) her yerde eşleşiyor ama renkleri
   taşıyan token'lar .s-page'e bağlıydı. Ortak bir include'u paylaşan
   göç etmemiş sayfa (fiyatlandırma) YARI-UYGULANMIŞ render ediyordu:
   ızgara var, kart zemini yok, kenarlık yok, buton düz metin. Bu, hiç
   uygulanmamış olmasından KÖTÜ. Token adları --s-* ile ad-alanlı, eski
   sayfalarla çakışmıyor; artık bir bileşen nereye düşerse düşsün ya TAM
   çalışır ya hiç. `.s-page` yalnız TABAN katmanı (zemin, tipografi, kabuk)
   kapılamaya devam eder. */
:root{
  /* Marka */
  --s-bordo:#6E1F2A;          /* beyazda 11.10:1 */
  --s-bordo-dark:#3D0F17;     /* CTA bandı, footer — beyaz metin 16.42:1 */
  --s-tint:#F7EFEA;           /* rozet, pasif dolgu (BEYAZ bölümlerde) */
  /* BÖLÜM ZEMİNİ. #FAFAFA idi ve beyazdan ayırt edilmiyordu; sayfa baştan sona
     beyaz akıyordu. #F4E9E3 beyazdan 1.19 — yumuşak ama fark ediliyor. */
  --s-tint-bg:#F4E9E3;
  /* İKON KUTUSU. --s-tint ile aynıydı ve kart üzerinde neredeyse görünmüyordu.
     Pembe-bordo: beyazdan 1.59, bordo ikon üstünde 6.99:1. */
  --s-ic-bg:#EDC3C6;
  /* WhatsApp marka yeşili. Beyaz metinle 1.98:1 (AA altı) olduğu için metin
     KOYU: #1A1A1A ile 8.78:1. Marka rengi korunuyor, okunurluk metinden geliyor. */
  --s-wa:#25D366;
  /* Hero'daki metin linkinin ikonu: #25D366 beyazda 1.98 ile zayıf kalıyor.
     #12A150 hâlâ WhatsApp yeşili ama 3.37 — grafik eşiğini geçiyor. */
  --s-wa-ic:#12A150;
  /* Zemin */
  --s-bg:#FFFFFF;
  --s-bg2:#FAFAFA;            /* bölüm ayrımı */
  /* Metin */
  --s-ink:#1A1A1A;            /* beyazda 17.40:1 */
  --s-muted:#6B7280;          /* beyazda 4.83:1 · #FAFAFA'da 4.63:1 */
  /* ÖLÇÜM DÜZELTMESİ 1: --s-muted tint üzerinde 4.26:1 — AA'nın ALTINDA, ve
     tint tam olarak rozet zemini için tarif edilmiş (rozet metni 11–12px, yani
     küçük metin). Tint üzerindeki metin bunu kullanır: tint 4.77 · beyaz 5.42. */
  /* Tint zemin koyulaşınca #616B76 ancak 4.55'e düşüyordu (sınırda). #57606A
     tint zeminde 5.36, beyazda 6.39 — pay bırakıyor. */
  --s-muted-tint:#57606A;
  /* Çizgi */
  --s-line:#E8E6E1;           /* kart kenarlığı — dekoratif, kontrast aranmaz */
  /* ÖLÇÜM DÜZELTMESİ 2: --s-line beyazda 1.25:1. Kart kenarı için sorun değil
     ama INPUT kenarlığı alanın tek sınırıdır ve 3:1 ister (WCAG 1.4.11). */
  --s-line-strong:#948D82;    /* beyazda 3.29:1 */
  /* Durum */
  --s-ok:#2E7D5B; --s-err:#B4402E;
  /* Ölçü */
  --s-max:1200px; --s-sec:62px;          /* 88px idi; bölümler ~900px'e çıkıyordu (referans 600–700). ~%30 kısıldı */
  --s-r-card:12px; --s-r-btn:8px; --s-r-input:8px;
  --s-shadow:0 1px 3px rgba(0,0,0,.06);
  --s-shadow-hover:0 4px 12px rgba(0,0,0,.08);
  --s-font:'InterEndam',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  /* DISPLAY SERIF — sistemden BILINCLI SAPMA (bkz. docs/tasarim-sistemi.md).
     Belge her yerde Inter diyordu; serif başlıklar denendi ve tutuldu.
     ARTIK SELF-HOST (yukarıdaki @font-face): "sistem fontu, maliyeti yok"
     gerekçesi yanlıştı — Android'de de Linux'ta da o yığından hiçbiri yok.
     Yedekler yalnız swap anı ve indirme hatası için duruyor.
     KURAL: display = serif, gövde/arayüz/buton/rozet = sans. İki display fontu olmaz. */
  --s-serif:'LoraEndam',Georgia,'Times New Roman',ui-serif,serif;
}

/* --- Taban ---------------------------------------------------------------- */
.s-page{background:var(--s-bg);color:var(--s-ink);font-family:var(--s-font);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
.s-page .s-wrap{max-width:var(--s-max);margin:0 auto;padding:0 24px}
.s-page h1,.s-page h2,.s-page h3{margin:0;font-family:var(--s-serif);font-weight:700;
  letter-spacing:-.01em;line-height:1.15}
.s-page h1{font-size:clamp(34px,4.6vw,52px)}
.s-page h2{font-size:clamp(26px,3.2vw,34px)}
.s-page h3{font-size:20px;line-height:1.3}
.s-page p{margin:0}
/* İMZA ÖĞE: iki tonlu başlık — YALNIZ SAYFA H1'İNDE.
   Bölüm H2'lerine de uygulanınca imza olmaktan çıkıp desen oluyor; belgedeki
   ifade de "her sayfa başlığında / her hero'da" diyor, her bölümde değil.
   Bölüm başlıkları tek ton; bordo vurgusu kicker'da ve butonlarda yaşıyor. */
.s-page h1 em{font-style:normal;color:var(--s-bordo)}

/* --- Üst bar -------------------------------------------------------------- */
.s-page .w-topbar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);
  backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--s-line)}
.s-page .w-topbar-in{max-width:var(--s-max);margin:0 auto;display:flex;align-items:center;
  justify-content:space-between;padding:14px 24px}
.s-page .w-brand{font-family:var(--s-font);font-size:20px;font-weight:700;color:var(--s-ink);
  letter-spacing:-.02em;display:inline-flex;align-items:center;gap:9px}
.s-page .w-nav{display:flex;align-items:center;gap:20px;font-size:15px;font-weight:500}
/* `:not(.w-btn)` — style.css'teki AYNI hatanın ikinci kopyası: bu kural
   (0,3,0) butonun kendi rengini (0,2,0) eziyor, birincil buton bordo
   zeminde GRİ yazıyla 2.30:1 kontrasta düşüyordu. */
.s-page .w-nav a:not(.w-btn){color:var(--s-muted)}
.s-page .w-nav a:not(.w-btn):hover{color:var(--s-ink)}
.s-page .w-pole{width:13px;height:22px;border-radius:7px;border:1.5px solid var(--s-line);
  background:repeating-linear-gradient(-45deg,var(--s-bordo) 0 6px,#fff 6px 12px)}

/* --- Butonlar ------------------------------------------------------------- */
.s-page .s-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:inherit;font-size:15px;font-weight:600;padding:12px 22px;border-radius:var(--s-r-btn);
  border:1.5px solid transparent;cursor:pointer;transition:.15s;white-space:nowrap}
.s-page .s-btn-primary{background:var(--s-bordo);color:#fff;border-color:var(--s-bordo)}
.s-page .s-btn-primary:hover{background:#5C1A23;border-color:#5C1A23}
.s-page .s-btn-secondary{background:transparent;color:var(--s-bordo);border-color:var(--s-bordo)}
.s-page .s-btn-secondary:hover{background:var(--s-tint)}
.s-page .s-btn-lg{padding:14px 26px;font-size:16px}
/* WhatsApp butonu — YALNIZ fiyatlandırmada. Orada ikincil eylem odur ve buton
   olmayı hak eder. Hero'da buton YAPILMAZ: üçüncü CTA olur ve yeşil,
   bordo-krem paletine çarpar; orada metin linki kalır. */
.s-page .s-btn-wa{background:var(--s-wa);color:#1A1A1A;border-color:var(--s-wa)}
.s-page .s-btn-wa:hover{background:#1FC25D;border-color:#1FC25D}
.s-page .s-btn-wa svg{width:18px;height:18px}
/* Paylaşılan kabuk (base.html) eski `.w-btn` sınıflarını kullanıyor ve o dosya
   henüz göç etmemiş sayfalarla ORTAK. Sınıfları değiştirmek yerine yeni sistemde
   EŞLİYORUZ; böylece base.html'e dokunmadan üst bar doğru görünür. */
.s-page .w-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:inherit;font-size:14.5px;font-weight:600;padding:10px 17px;border-radius:var(--s-r-btn);
  border:1.5px solid transparent;cursor:pointer;transition:.15s;white-space:nowrap}
.s-page .w-btn-primary{background:var(--s-bordo);color:#fff;border-color:var(--s-bordo);
  box-shadow:none}
.s-page .w-btn-primary:hover{background:#5C1A23;border-color:#5C1A23;transform:none}
.s-page .w-btn-ghost{background:transparent;color:var(--s-bordo);border-color:var(--s-bordo)}
.s-page .w-btn-ghost:hover{background:var(--s-tint);border-color:var(--s-bordo)}

/* --- Rozet ---------------------------------------------------------------- */
.s-page .s-badge{display:inline-flex;align-items:center;gap:7px;background:var(--s-tint);
  color:var(--s-muted-tint);font-size:11.5px;font-weight:600;text-transform:uppercase;
  letter-spacing:.1em;padding:7px 13px;border-radius:100px}

/* --- Hero ----------------------------------------------------------------- */
.s-hero{padding:clamp(34px,4.6vw,56px) 0 var(--s-sec);background:var(--s-bg)}
.s-hero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.s-hero h1{margin:20px 0 0;text-wrap:balance}
.s-hero-lede{font-size:17px;color:var(--s-muted);margin:18px 0 0;max-width:34em}
.s-hero-cta{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
/* Tik satırı — CTA'nın hemen altı, itiraz kapatıcı. */
/* Üçü tek satıra SIĞMIYOR (ölçüldü: kolon 575px, tikler+boşluk 599px) ve 2+1
   kırılınca ragged duruyordu. Alt alta: hizalı okunuyor, ayrıca metin kolonu
   uzayıp hero'daki dikey boşluğu da azaltıyor. */
.s-ticks{display:flex;flex-direction:column;gap:10px;margin-top:22px;
  align-items:flex-start;font-size:14px;color:var(--s-muted)}
.s-tick{display:inline-flex;align-items:center;gap:7px}
.s-tick svg{width:15px;height:15px;color:var(--s-ok);flex:none}
/* WhatsApp: BUTON DEĞİL, metin linki. Rakip CTA olmaktan çıktı ama destek
   kanalı ve Türkiye'de güven sinyali olduğu için kaldı.
   AYRI SATIRDA: tik satırının içine karışınca dördüncü bir "özellik" gibi
   okunuyordu; oysa o bir vaat değil, iletişim kanalı. */
/* Dokunma hedefi (sistem kuralı 9: en az 44px). Metin linki 23px yüksekliğindeydi;
   dikey dolgu ile kutu 45px'e çıkarıldı, GÖRSEL boyut değişmedi. Alt çizgi
   border yerine text-decoration: dolgu eklenince çizgi metinden kopmasın. */

/* Hero görseli: müşterinin gördüğü GERÇEK randevu sayfası (temsili çizim değil). */
.s-hero-art{display:flex;justify-content:center;align-items:center}
/* Telefon metin kolonundan uzun olunca grid satırı uzuyor ve metin dikeyde
   ortalanınca üstte-altta ~130px ölü boşluk kalıyordu. Salonix'in görseli
   YATAY (panel) olduğu için o sorunu yaşamıyor; bizimki dikey, o yüzden
   kısaltıldı. Panel görüntüsü gelince kompozisyon yeniden kurulacak. */
/* Sayfa yüklenince TEK SEFERLİK yumuşak yükselme. Hover kullanılmadı: telefon
   tıklanabilir değil, hover onu etkileşimliymiş gibi gösterirdi. 3D/eğim yok —
   hero'nun ana görselinde numara riskli. */
@keyframes s-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

@media(max-width:900px){
  .s-page{--s-sec:64px}
  .s-hero-in{grid-template-columns:1fr;gap:40px}
  /* Mobilde menü linkleri gizlenir ama BUTONLAR KALIR — seçici `.s-btn`
     idi ve base.html'deki `.w-btn` butonlarını da gizliyordu: mobil üst
     barda hiç CTA kalmıyordu. */
  .s-page .w-nav a:not(.w-btn):not(.s-btn){display:none}
  .s-page .w-nav{gap:10px}
}
@media(prefers-reduced-motion:reduce){
  /* Hareket SIFIRLANMAZ, sadeleşir: renk/gölge geçişi kalır, YER DEĞİŞTİRME
     ve giriş animasyonu kalkar. */
  .s-page .s-card:hover,.s-page .s-plan:hover{transform:none}
  .s-page *,.s-page *::before,.s-page *::after{transition-duration:.01ms!important}
}

/* --- Bölüm iskeleti ------------------------------------------------------- */
.s-sec{padding-block:var(--s-sec)}
.s-sec-alt{background:var(--s-tint-bg)}
/* Rozet tint zeminde kaybolurdu (ikisi de tint) — orada BEYAZ olur. */
.s-sec-alt .s-badge{background:#fff;color:var(--s-muted-tint)}
/* Bölüm başlığı kalıbı: rozet → ORTALANMIŞ H2 → tek satır alt metin.
   (Salonix'te tam genişlik ızgaralı bölümler ortalı, iki kolonlu olanlar sola
   dayalı; bizim bölümlerin hepsi ızgaralı, o yüzden hepsi ortalı.) */
.s-head{text-align:center;max-width:640px;margin:0 auto}
.s-head h2{margin:14px 0 0}
.s-head .s-sub{color:var(--s-muted);font-size:16px;margin:12px 0 0}

/* --- Kart ---------------------------------------------------------------- */
.s-cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:32px}
.s-card{background:var(--s-bg);border:1px solid var(--s-line);border-radius:var(--s-r-card);
  padding:24px;box-shadow:var(--s-shadow);
  transition:box-shadow .17s ease-out,transform .17s ease-out}
.s-card:hover{box-shadow:var(--s-shadow-hover);transform:translateY(-3px)}
.s-card h3{margin:16px 0 8px}
.s-card p{color:var(--s-muted);font-size:15px}
/* İkon kutusu: 48px, tint zemin, yuvarlatılmış. */
.s-ic{width:48px;height:48px;border-radius:12px;background:var(--s-ic-bg);color:var(--s-bordo);
  display:flex;align-items:center;justify-content:center}
.s-ic svg{width:23px;height:23px}
/* DÜZ METİN — rozet/hap DEĞİL. Hap görünümü tıklanabilir sanılıyordu; oysa
   bunlar bir eylem değil, kartın özetini kapatan bir cümle. Yanıltıcı
   affordance kaldırıldı. */
.s-card-note{display:block;margin-top:12px;padding-top:12px;border-top:1px solid var(--s-line);
  font-size:13.5px;font-weight:500;color:var(--s-muted-tint)}

/* --- Adımlar -------------------------------------------------------------- */
.s-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:32px}
.s-step{text-align:center;position:relative}
.s-step-n{width:44px;height:44px;border-radius:50%;background:var(--s-bordo);color:#fff;
  font-family:var(--s-font);font-weight:700;font-size:17px;display:inline-flex;
  align-items:center;justify-content:center}
.s-step h3{margin:16px 0 6px;font-size:19px}
.s-step p{color:var(--s-muted);font-size:15px}
.s-step::after{content:"";position:absolute;top:22px;left:calc(50% + 34px);right:calc(-50% + 34px);
  height:1px;background:var(--s-line)}
.s-step:last-child::after{display:none}

/* --- Tam genişlik CTA bandı ---------------------------------------------- */
/* TAM GENİŞLİK: yuvarlak kart değil. Eski tasarımdan `border-radius:26px` ile
   kart olarak devralınmıştı; sistemde bu bir BANT — sayfa ritmini kırması için
   kenardan kenara gidiyor. Renk de --dark (#1C1114, neredeyse siyah) idi;
   sistemin koyu bordosu #3D0F17. */
.s-band{background:var(--s-bordo-dark);color:#fff;padding-block:var(--s-sec);text-align:center}
.s-band h2{color:#fff}
.s-band p{color:rgba(255,255,255,.78);margin:12px auto 22px;max-width:34em;font-size:16px}
.s-band .s-btn-primary{background:#fff;color:var(--s-bordo-dark);border-color:#fff}
.s-band .s-btn-primary:hover{background:#F3EDEA;border-color:#F3EDEA}
/* İKİNCİL buton için koyu şeritte kural YOKTU: bordo yazı bordo zemin
   üzerinde kalıyordu, ölçülen kontrast 1.48:1 (AA 4.5 ister) — buton
   fiilen görünmezdi. Beyaz çerçeve + beyaz yazı: 16.4:1. */
.s-band .s-btn-secondary{color:#fff;border-color:rgba(255,255,255,.55);background:transparent}
.s-band .s-btn-secondary:hover{background:rgba(255,255,255,.12);border-color:#fff}

/* --- Footer --------------------------------------------------------------- */
.s-page .w-footer{border-top:1px solid var(--s-line);background:var(--s-bg);padding:56px 0 32px}
.s-page .w-footer-grid{max-width:var(--s-max);margin:0 auto;display:grid;
  /* Son kolon (Yasal) daha geniş: "Mesafeli Satış Sözleşmesi" iki satıra
     kırılıyordu. */
  grid-template-columns:1.4fr .85fr .8fr .8fr .8fr 1.2fr;gap:24px}
.s-page .w-footer h4{font-family:var(--s-font);font-size:12px;text-transform:uppercase;
  letter-spacing:.09em;color:var(--s-muted-tint);margin:0 0 14px}
.s-page .w-footer a{display:block;color:var(--s-muted);font-size:14.5px;margin-bottom:9px}
.s-page .w-footer a:hover{color:var(--s-bordo)}
.s-page .w-muted{color:var(--s-muted);font-size:14.5px}
.s-page .w-footer-bottom{margin-top:34px;padding-top:20px;border-top:1px solid var(--s-line);
  font-size:13.5px;text-align:center}
.s-page .w-brand-lg{font-size:22px}

@media(max-width:900px){
  .s-cards3,.s-steps,.s-plans{grid-template-columns:1fr}
  .s-step::after{display:none}
  .s-page .w-footer-grid{grid-template-columns:1fr 1fr}
  /* Footer linkleri mobilde 23px yüksekliğindeydi — parmakla ıskalanıyor.
     44px her footer linki için footer'ı devasa yapardı; dolguyla 32px'e
     çıkarıldı (WCAG 2.5.8'in 24px asgarisinin üstünde), aradaki boşluk da
     azaltılarak toplam yükseklik korundu. */
  .s-page .w-footer a{padding:5px 0;margin-bottom:2px}
  .s-plan-hi{order:-1}          /* mobilde önerilen paket başa gelsin */
}

/* --- Özellik bölümü: SOL tanıtım kolonu + SAĞ 2×3 ızgara ------------------
   Referansın omurgası. Ortalanmış başlık + tam genişlik ızgara DEĞİL: sol
   kolon bölümü çerçeveliyor, sağdaki ızgara yükü taşıyor. Bölüm başlığı bu
   düzende SOLA DAYALI (ortalı kalıp yalnız tam genişlik ızgaralı bölümlerde). */
.s-split{display:grid;grid-template-columns:minmax(280px,.82fr) 1.18fr;gap:48px;
  align-items:start}
/* Özellik ızgarası ÜÇ KOLON olduğu için tanıtım kolonu daraldı — kartlar
   241px'te okunur kalıyor ve bölüm 741→606px'e indi (referans bandı 600–700). */
.s-split-grid{grid-template-columns:minmax(240px,.62fr) 1.38fr}
/* Görsel SOLDA olan varyant: ağırlık görsele geçer. Aynı oranla bırakınca
   telefon şeridi dar kolonda kalıyor ve ekranlar okunmuyordu. */
.s-split-media{grid-template-columns:1.15fr minmax(280px,.85fr);align-items:center}
.s-split-intro h2{margin:14px 0 0}
.s-split-intro .s-sub{color:var(--s-muted);font-size:16px;margin:14px 0 0}
/* İKİ değil ÜÇ kolon. İki kolonda beş kart 2+2+1 oluyordu; beşinciyi tam
   genişlik yapmak da ızgarayı dengesizleştiriyordu (bir kart yarım, biri tam).
   Üç kolonda 3+2: ikinci satır doğal ızgara akışı gibi okunuyor, bölüm kısalıyor.
   Dijital Resepsiyonist canlıya çıkınca altıncı kart boşluğu kapatır: 3×2. */
.s-grid2{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.s-grid2 .s-card{padding:22px}
.s-grid2 .s-card h3{font-size:18px;margin:14px 0 7px}
.s-grid2 .s-card p{font-size:14.5px}
/* Kesik çizgili "yakında" kartı KALDIRILDI: farklı göründüğü için gözü ilk o
   çekiyordu — yani HENÜZ OLMAYAN bir şey, var olan beş özelliğin önüne geçmişti. */

/* --- Müşteri deneyimi: telefon şeridi ------------------------------------- */
.s-strip{display:flex;justify-content:center;align-items:flex-end;gap:0}
.s-split-media .s-strip{justify-content:flex-start}
/* Ekran görüntüleri viewport yakalaması olduğu için altları kesiliyor. ÖNCE
   maskeyle eritildi ama "kırpılmış" duruyordu — çünkü kesiği yumuşatmak onu
   AÇIKLAMIYOR. Çözüm CİHAZ ÇERÇEVESİ: kesik artık ekranın alt kenarı olarak
   okunuyor, yani doğal. Uydurma değil — telefon ekranı gösteriyoruz. */
.s-strip-p{width:32%;max-width:232px;border-radius:26px;background:#0A0A0A;padding:6px;
  box-shadow:0 16px 38px -14px rgba(0,0,0,.3)}
.s-strip-p img{display:block;width:100%;height:auto;border-radius:21px}
/* Ortadaki öne çıkar, yandakiler geriye düşer — referanstaki kademeli dizilim. */
.s-strip-p:nth-child(1){transform:translateY(22px) rotate(-3deg);z-index:1}
.s-strip-p:nth-child(2){z-index:3;margin:0 -14px}
.s-strip-p:nth-child(3){transform:translateY(22px) rotate(3deg);z-index:1}
.s-checks{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:13px}
.s-checks li{position:relative;padding-left:30px;font-size:15.5px}
.s-checks li svg{position:absolute;left:0;top:.15em;width:19px;height:19px;color:var(--s-ok)}

@media(max-width:900px){
  .s-split,.s-split-grid{grid-template-columns:1fr;gap:32px}
  .s-grid2{grid-template-columns:1fr}
  /* Üç telefon 390px'e sığınca her biri ~110px kalıyor ve HİÇBİRİ okunmuyor.
     Mobilde yalnız ortadaki kalır ve büyür — okunan bir ekran, okunmayan
     üçten iyidir. */
  .s-strip-p:nth-child(1),.s-strip-p:nth-child(3){display:none}
  .s-strip-p:nth-child(2){width:100%;max-width:250px;margin:0 auto;transform:none}
  .s-split-media .s-strip{justify-content:center}
}

/* ==========================================================================
   KEŞFET (/kesfet/) — referans düzeni: üstte arama bandı, solda filtre rayı,
   sağda kart ızgarası, altta sayfalama ve koyu bordo dükkan sahibi bandı.
   ========================================================================== */

/* --- Arama bandı ---------------------------------------------------------- */
.k-hero{background:var(--s-tint-bg);padding:44px 0 40px}
.k-hero-in{display:grid;grid-template-columns:minmax(260px,.72fr) 1.28fr;gap:40px;
  align-items:center}
.k-hero h1{font-size:clamp(30px,3.6vw,42px)}
.k-hero .s-sub{color:var(--s-muted-tint);font-size:15.5px;margin:14px 0 0;max-width:30em}
/* Arama paneli: beyaz kart, alanlar dikey ayraçla bölünmüş, sonda yuvarlak buton */
.k-search{display:flex;align-items:stretch;background:#fff;border:1px solid var(--s-line);
  border-radius:16px;box-shadow:var(--s-shadow);padding:8px;gap:0}
.k-field{flex:1;display:flex;align-items:center;gap:11px;padding:10px 14px;min-width:0;
  border-right:1px solid var(--s-line)}
.k-field:last-of-type{border-right:0}
.k-field svg{width:19px;height:19px;color:var(--s-bordo);flex:none}
.k-field-in{min-width:0;flex:1}
.k-field label{display:block;font-size:12px;font-weight:600;color:var(--s-ink);
  margin-bottom:2px}
.k-field input,.k-field select{width:100%;border:0;background:none;font:inherit;
  font-size:14.5px;color:var(--s-ink);padding:0;outline:none;
  text-overflow:ellipsis}
.k-field input::placeholder{color:var(--s-muted)}
.k-search-go{flex:none;width:52px;border:0;border-radius:12px;background:var(--s-bordo);
  color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .17s ease-out}
.k-search-go:hover{background:#5C1A23}
.k-search-go svg{width:20px;height:20px}

/* --- Gövde: sol ray + sağ sonuçlar ---------------------------------------- */
.k-body{display:grid;grid-template-columns:264px 1fr;gap:28px;padding-block:36px}
.k-rail{position:sticky;top:88px;align-self:start;background:#fff;
  border:1px solid var(--s-line);border-radius:var(--s-r-card);box-shadow:var(--s-shadow);
  padding:20px}
.k-rail-h{display:flex;align-items:baseline;justify-content:space-between;
  padding-bottom:14px;border-bottom:1px solid var(--s-line)}
.k-rail-h b{font-family:var(--s-serif);font-size:18px}
.k-clear{color:var(--s-bordo);font-size:13.5px;font-weight:600}
.k-group{padding:16px 0;border-bottom:1px solid var(--s-line)}
.k-group:last-child{border-bottom:0;padding-bottom:0}
.k-group-h{font-size:14.5px;font-weight:600;margin-bottom:11px}
/* Kategori listesi — aktif olan bordo dolgu (referanstaki gibi) */
.k-cats{display:flex;flex-direction:column;gap:3px}
.k-cat{display:block;padding:9px 12px;border-radius:9px;font-size:14.5px;
  color:var(--s-muted);cursor:pointer;transition:background .15s ease-out}
.k-cat:hover{background:var(--s-tint)}
.k-cat.is-on{background:var(--s-bordo);color:#fff;font-weight:600}
.k-select{width:100%;padding:10px 12px;border:1px solid var(--s-line-strong);
  border-radius:var(--s-r-input);background:#fff;font:inherit;font-size:14.5px;
  color:var(--s-ink)}
.k-toggle{display:flex;align-items:center;gap:9px;font-size:14.5px;cursor:pointer}
.k-toggle input{width:18px;height:18px;accent-color:var(--s-bordo);margin:0}

/* --- Sonuç başlığı -------------------------------------------------------- */
.k-head{display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-bottom:18px}
.k-count-wrap{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.k-count{font-size:15px;color:var(--s-muted)}
.k-count .d-title{color:var(--s-ink);font-weight:600}
.k-chips{display:inline-flex;gap:7px;flex-wrap:wrap}
.k-chips .d-achip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;
  border:1px solid var(--s-line-strong);border-radius:100px;background:#fff;
  font:inherit;font-size:13px;font-weight:600;color:var(--s-ink);cursor:pointer}
.k-chips .d-achip .tb{width:13px;height:13px;color:var(--s-muted)}
.k-head-r{display:flex;align-items:center;gap:10px}
.k-view{display:inline-flex;border:1px solid var(--s-line-strong);border-radius:10px;
  overflow:hidden}
.k-view button{border:0;background:#fff;font:inherit;font-size:14px;font-weight:600;
  padding:9px 15px;color:var(--s-muted);cursor:pointer}
.k-view button.is-on{background:var(--s-bordo);color:#fff}

/* --- Kart ızgarası -------------------------------------------------------- */
.k-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
/* position:relative ŞART: .k-fav absolute konumlanıyor, kart static kalınca
   kalp kartın 399px üstüne / 722px sağına kaçıyordu (sayfaya göre hizalanıp
   görünmez oluyordu). */
.k-card{position:relative;background:#fff;border:1px solid var(--s-line);border-radius:var(--s-r-card);
  overflow:hidden;box-shadow:var(--s-shadow);display:flex;flex-direction:column;
  transition:box-shadow .17s ease-out,transform .17s ease-out}
.k-card:hover{box-shadow:var(--s-shadow-hover);transform:translateY(-3px)}
/* Kapak: gerçek fotoğraf varsa o, yoksa salona özel desen + monogram. */
.k-cover{position:relative;display:block;aspect-ratio:16/11;overflow:hidden}
.k-cover img{width:100%;height:100%;object-fit:cover;display:block}
.k-cover-mono{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;font-family:var(--s-serif);font-size:38px;font-weight:700;
  color:#fff;letter-spacing:.02em;text-shadow:0 1px 10px rgba(0,0,0,.22)}
/* Altı kart aynı desenle gelince Keşfet kopyala-yapıştır görünüyordu; slug'dan
   türeyen kararlı tohum altı varyanttan birini seçer. */
/* Altı varyant GERÇEKTEN ayrışsın diye ton ailesi genişletildi (hepsi bordo-
   deri-kehribar ekseninde kalıyor, biri arduvaz aksanı). Beyaz monogram her
   gradyanın AÇIK ucunda ölçüldü, en düşüğü 3.43 (grafik eşiği 3.0). */
.k-cover--0{background:linear-gradient(135deg,#6E1F2A,#A8836B)}  /* bordo → deri   3.43 */
.k-cover--1{background:linear-gradient(150deg,#3D0F17,#7A3B44)}  /* koyu erik      8.28 */
.k-cover--2{background:linear-gradient(120deg,#6B4E39,#9C7C5E)}  /* deri → kum     3.66 */
.k-cover--3{background:linear-gradient(160deg,#6E1F2A,#B07A28)}  /* bordo → kehribar 3.71 */
.k-cover--4{background:linear-gradient(130deg,#2F3E46,#65787F)}  /* arduvaz        4.62 */
.k-cover--5{background:linear-gradient(145deg,#7A3E29,#A65F45)}  /* tarçın         3.42 */
.k-cover--0::after,.k-cover--1::after,.k-cover--2::after,.k-cover--3::after,
.k-cover--4::after,.k-cover--5::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(-45deg,transparent 0 13px,rgba(255,255,255,.07) 13px 26px)}
.k-badge{position:absolute;top:12px;left:12px;z-index:2;font-family:var(--s-font);
  font-size:11.5px;font-weight:600;padding:5px 11px;border-radius:100px;
  background:var(--s-bordo);color:#fff}
.k-badge--new{background:#fff;color:var(--s-bordo)}
.k-fav{position:absolute;top:10px;right:10px;z-index:2;width:34px;height:34px;
  border:0;border-radius:50%;background:rgba(255,255,255,.92);color:var(--s-bordo);
  cursor:pointer;display:flex;align-items:center;justify-content:center}
.k-fav .tb{width:17px;height:17px}
.k-fav.is-fav .tb{fill:currentColor}
.k-rating{position:absolute;right:10px;bottom:10px;z-index:2;display:inline-flex;
  align-items:center;gap:5px;background:rgba(255,255,255,.94);border-radius:100px;
  padding:4px 10px;font-size:13px;font-weight:600}
.k-rating .tb{width:13px;height:13px;color:var(--s-bordo);fill:currentColor}
.k-rating span{color:var(--s-muted);font-weight:500}

.k-card-b{padding:16px;display:flex;flex-direction:column;gap:7px;flex:1}
.k-card-t{display:flex;align-items:center;gap:10px}
.k-mono{width:36px;height:36px;border-radius:50%;background:var(--s-ic-bg);flex:none;
  display:flex;align-items:center;justify-content:center;font-family:var(--s-serif);
  font-size:14px;font-weight:700;color:var(--s-bordo)}
.k-name{font-family:var(--s-serif);font-size:17px;font-weight:700;color:var(--s-ink);
  line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.k-sub{display:block;font-family:var(--s-font);font-size:13px;color:var(--s-muted);
  font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Tek satır + nowrap idi ve "Klasik manikür 250 ₺'den başlıyor" kırpılınca
   müsaitlik metni tamamen kayboluyordu. Fiyat ve müsaitlik AYRI satırda:
   ikisi de kartın taşıdığı iki bilgi, biri diğerini yutmamalı. */
.k-meta{display:flex;flex-direction:column;gap:3px;font-size:13.5px;color:var(--s-muted)}
/* Fiyat satırı SARAR (en fazla 2 satır): hizmet adı uzun olabiliyor
   ("Çocuk kesimi (0-10) 200 ₺'den başlıyor") ve kırpınca bilgi kayboluyordu.
   Müsaitlik satırı tek satır kalır — kısa ve sabit biçimli. */
.k-meta > span{overflow:hidden}
.k-meta > span:first-child{display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;line-height:1.4}
.k-meta > span + span{text-overflow:ellipsis;white-space:nowrap}
.k-meta b{color:var(--s-ink);font-weight:600}
.k-meta .k-sep{margin:0 6px;color:var(--s-line-strong)}
.k-pager .k-gap{border:0;background:none;min-width:20px;color:var(--s-muted)}
.k-avail{font-weight:600}
.k-avail-today{color:var(--s-ok)}
.k-avail-full,.k-avail-closed{color:var(--s-muted)}
/* Referansta burada hizmet etiketleri var; bizde TIKLANABİLİR BOŞ SAAT var —
   aynı görsel yuva, daha iyi içerik (gerçek slot motoru; rakiplerde yok). */
.k-slots{display:flex;gap:7px;flex-wrap:wrap;margin-top:auto;padding-top:4px}
.k-slot{padding:6px 11px;border:1px solid var(--s-line-strong);border-radius:100px;
  font-size:13px;font-weight:600;color:var(--s-ink);background:#fff;
  transition:border-color .15s ease-out,background .15s ease-out}
.k-slot:hover{border-color:var(--s-bordo);background:var(--s-tint)}
.k-cta{margin-top:auto;padding-top:4px}
.k-cta a{display:block;text-align:center;padding:10px;border-radius:var(--s-r-btn);
  border:1.5px solid var(--s-bordo);color:var(--s-bordo);font-weight:600;font-size:14.5px}
.k-cta a:hover{background:var(--s-tint)}

/* --- Sayfalama ------------------------------------------------------------ */
.k-pager{display:flex;justify-content:center;gap:8px;margin-top:32px}
.k-pager a,.k-pager span{min-width:42px;height:42px;display:inline-flex;align-items:center;
  justify-content:center;border:1px solid var(--s-line-strong);border-radius:10px;
  font-size:14.5px;font-weight:600;color:var(--s-ink);background:#fff}
.k-pager .is-on{background:var(--s-bordo);border-color:var(--s-bordo);color:#fff}
.k-pager .is-off{color:var(--s-muted);border-color:var(--s-line);cursor:default}

/* --- Dükkan sahibi bandı -------------------------------------------------- */
.k-owner{background:var(--s-bordo-dark);color:#fff;border-radius:18px;padding:30px 32px;
  display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin:44px 0 8px}
.k-owner-ic{width:64px;height:64px;border-radius:16px;flex:none;
  background:rgba(255,255,255,.09);display:flex;align-items:center;justify-content:center}
.k-owner-ic svg{width:30px;height:30px}
.k-owner-t{flex:1;min-width:220px}
.k-owner-t h2{color:#fff;font-size:24px}
.k-owner-t p{color:rgba(255,255,255,.76);font-size:15px;margin-top:7px}
.k-owner-a{display:flex;gap:12px;flex-wrap:wrap}
.k-owner-a .s-btn-primary{background:#fff;color:var(--s-bordo-dark);border-color:#fff}
.k-owner-a .s-btn-secondary{color:#fff;border-color:rgba(255,255,255,.55)}
.k-owner-a .s-btn-secondary:hover{background:rgba(255,255,255,.1)}

/* Filtre çekmecesini açan buton. TABAN KURAL medya sorgusundan ÖNCE olmalı:
   sonra yazıldığında aynı özgüllükte kazanıyor ve mobilde buton HİÇ
   görünmüyordu — yani rayı açmanın yolu yoktu. */
.k-railbtn{display:none;align-items:center;gap:8px;padding:9px 15px;border-radius:10px;
  border:1px solid var(--s-line-strong);background:#fff;font:inherit;font-size:14px;
  font-weight:600;cursor:pointer}
.k-railbtn svg{width:17px;height:17px}
/* Arka plan karartması: JS `hidden` DEĞİL `data-open` kullanıyor. */
.k-rail-back{display:none}
.k-rail-back[data-open]{display:block;position:fixed;inset:0;z-index:55;
  background:rgba(0,0,0,.42)}
.k-sheet-done{display:none;width:100%;margin-top:16px;padding:13px;border:0;
  border-radius:var(--s-r-btn);background:var(--s-bordo);color:#fff;font:inherit;
  font-size:15px;font-weight:600;cursor:pointer}

/* --- Harita + boş durum --------------------------------------------------- */
.k-map{height:560px;border-radius:var(--s-r-card);overflow:hidden;
  border:1px solid var(--s-line)}
.k-empty{text-align:center;padding:56px 20px;background:#fff;border:1px solid var(--s-line);
  border-radius:var(--s-r-card)}
.k-empty b{display:block;font-family:var(--s-serif);font-size:20px;margin-bottom:8px}
.k-empty p{color:var(--s-muted);font-size:15px;max-width:40em;margin:0 auto}

@media(max-width:1080px){
  .k-body{grid-template-columns:1fr}
  /* Sistem kuralı 9: filtre rayı mobilde alt sayfaya döner. Mevcut JS'in
     [data-filters] çekmecesi kullanılıyor, yeni davranış yazılmıyor. */
  /* Kapalı çekmece yalnız ÖTELENMİŞ olsaydı hâlâ sekmeyle odaklanabilirdi
     (ekran okuyucu ve klavye için görünmez bir tuzak). visibility ile gerçekten
     kapanıyor; yan fayda, full_page ekran görüntüsünde sayfanın ortasında
     belirmiyor. */
  .k-rail{position:fixed;inset:auto 0 0 0;top:auto;z-index:60;border-radius:18px 18px 0 0;
    max-height:82vh;overflow:auto;transform:translateY(100%);visibility:hidden;
    transition:transform .22s ease-out,visibility .22s;
    box-shadow:0 -8px 40px rgba(0,0,0,.18)}
  .k-rail.is-open{transform:none;visibility:visible}
  .k-railbtn{display:inline-flex}
  .k-sheet-done{display:block}
  .k-grid{grid-template-columns:repeat(2,1fr)}
  .k-hero-in{grid-template-columns:1fr;gap:24px}
}
@media(max-width:640px){
  .k-grid{grid-template-columns:1fr}
  .k-search{flex-direction:column;padding:6px}
  .k-field{border-right:0;border-bottom:1px solid var(--s-line)}
  .k-search-go{width:100%;height:46px;margin-top:6px}
  .k-owner{padding:24px}
}

/* ==========================================================================
   FİYATLANDIRMA (/fiyatlandirma/)
   ========================================================================== */
.f-hero{text-align:center;padding:52px 0 34px}
.f-hero h1{margin:16px auto 0;max-width:16em}
.f-hero .s-sub{margin:14px auto 0;max-width:34em;color:var(--s-muted)}

/* --- Aylık / yıllık anahtarı --------------------------------------------- */
.f-switch-row{display:flex;align-items:center;justify-content:center;gap:26px;
  margin-top:26px;flex-wrap:wrap}
.f-switch{display:inline-flex;align-items:center;gap:4px;background:#fff;
  border:1px solid var(--s-line);border-radius:100px;padding:5px;box-shadow:var(--s-shadow)}
.f-switch button{border:0;background:none;font:inherit;font-size:14.5px;font-weight:600;
  color:var(--s-muted);padding:9px 18px;border-radius:100px;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;transition:background .17s ease-out}
.f-switch button.is-on{background:var(--s-bordo);color:#fff}
.f-off{background:var(--s-tint);color:var(--s-bordo);font-size:11.5px;font-weight:700;
  padding:3px 9px;border-radius:100px}
.f-switch button.is-on .f-off{background:rgba(255,255,255,.2);color:#fff}
/* El yazısı not — SAYFADA BİR KEZ. İkinci kullanımda ucuzlar (notlar). */
.f-hand{display:inline-flex;align-items:center;gap:8px;color:var(--s-bordo);
  font-family:var(--s-serif);font-style:italic;font-size:15px;line-height:1.35;
  text-align:left}
.f-hand svg{width:42px;height:26px;flex:none}

/* --- Plan kartı: PAYLAŞILAN BİLEŞEN --------------------------------------
   Ana sayfa ve fiyatlandırma AYNI bileşeni kullanır. Önce iki ayrı kart vardı
   (ana sayfada sade, fiyatlandırmada zengin) ve fiyat değişince iki yerde
   düzeltme gerekiyordu — bu projede token/renk ayrışmasını üreten sınıfın
   aynısı. Fark artık tek bir bayrak: yıllık satırı gösterilsin mi.
   Ana sayfada TOGGLE YOK, yalnız aylık fiyat; detay fiyatlandırma sayfasında. */
/* align-items:start kartları tırtıklı bitiriyordu (özellik sayısı farklı).
   Grid'in kendi stretch'i üçünü eşitler; özellik listesi flex:1 ile büyür. */
.s-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:36px}
.s-plan{position:relative;background:#fff;border:1px solid var(--s-line);
  border-radius:16px;padding:26px 24px;display:flex;flex-direction:column;
  transition:box-shadow .17s ease-out,transform .17s ease-out}
.s-plan:hover{box-shadow:var(--s-shadow-hover);transform:translateY(-3px)}
.s-plan-hi{border:2px solid var(--s-bordo);background:linear-gradient(180deg,#FFF9F7,#fff);
  box-shadow:var(--s-shadow-hover)}
/* ÜCRETSİZ PAKET BAĞIRMALI (notlar): ortadaki "En popüler" kartı onu yutmasın. */
.s-plan-free{border:2px solid var(--s-line-strong)}
.s-plan-free .s-plan-num{color:var(--s-bordo);font-size:56px}
.s-plan-tag{position:absolute;top:18px;right:18px;background:var(--s-bordo);color:#fff;
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:5px 11px;border-radius:100px}
.s-plan-ic{width:46px;height:46px;border-radius:12px;background:var(--s-ic-bg);
  color:var(--s-bordo);display:flex;align-items:center;justify-content:center}
.s-plan-ic svg{width:22px;height:22px}
.s-plan h3{margin:16px 0 6px;font-size:21px}
.s-plan-desc{color:var(--s-muted);font-size:14.5px;min-height:2.8em}
.s-plan-price{display:flex;align-items:baseline;gap:7px;margin-top:18px;flex-wrap:wrap}
.s-plan-num{font-family:var(--s-serif);font-size:40px;font-weight:700;line-height:1}
.s-plan-per{color:var(--s-muted);font-size:14px}
.s-plan-year{color:var(--s-muted);font-size:13.5px;margin-top:7px;min-height:1.3em}
/* CTA özellik listesinin ÜSTÜNDE — üç buton aynı hizada kalır. */
.s-plan .s-btn{margin-top:20px;width:100%}
.s-plan-feats{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;
  gap:12px;flex:1}
.s-plan-feats li{position:relative;padding-left:28px;font-size:14.5px}
.s-plan-feats li svg{position:absolute;left:0;top:.18em;width:18px;height:18px;
  color:var(--s-bordo)}

/* --- Karşılaştırma tablosu ------------------------------------------------ */
/* Tablo dar ekranda YATAY KAYAR (sistem kuralı: geniş içerik kendi kabında
   kayar, sayfa gövdesi asla yatay kaymaz). Ama kaydırılabildiği belli
   olmuyordu — sağ kenardaki solma ve alttaki not bunu söylüyor. */
.f-table-scroll{position:relative}
.f-table-wrap{margin-top:52px;background:#fff;border:1px solid var(--s-line);
  border-radius:16px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.f-table-hint{display:none;text-align:center;color:var(--s-muted);font-size:13px;
  margin-top:10px}
@media(max-width:820px){
  .f-table-hint{display:block}
  .f-table-scroll::after{content:"";position:absolute;top:0;right:0;bottom:0;width:44px;
    pointer-events:none;border-radius:0 16px 16px 0;
    background:linear-gradient(to left,rgba(255,255,255,.96),rgba(255,255,255,0))}
}
.f-table{width:100%;border-collapse:collapse;min-width:660px}
.f-table th,.f-table td{padding:15px 18px;text-align:center;font-size:14.5px;
  border-bottom:1px solid var(--s-line)}
.f-table tr:last-child th,.f-table tr:last-child td{border-bottom:0}
.f-table thead th{background:var(--s-bg);vertical-align:bottom}
.f-table thead th:first-child{text-align:left;font-family:var(--s-serif);font-size:19px}
.f-table .f-th-name{display:block;font-family:var(--s-serif);font-size:17px;font-weight:700}
.f-table .f-th-price{display:block;font-size:13.5px;color:var(--s-muted);margin-top:4px}
.f-table tbody th{text-align:left;font-weight:500;color:var(--s-ink)}
.f-row-ic{display:inline-flex;align-items:center;gap:10px}
.f-row-ic svg{width:18px;height:18px;color:var(--s-muted);flex:none}
/* Önerilen sütun tüm tablo boyunca vurgulu — referanstaki gibi. */
.f-table .is-hi{background:var(--s-tint-bg)}
.f-yes{color:var(--s-bordo)}
.f-yes svg{width:19px;height:19px}
.f-no{color:var(--s-line-strong)}

/* --- Yardım bandı + güvence ----------------------------------------------- */
.f-help{margin-top:44px;background:var(--s-bordo-dark);color:#fff;border-radius:18px;
  padding:28px 32px;display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.f-help-ic{width:58px;height:58px;border-radius:14px;flex:none;
  background:rgba(255,255,255,.09);display:flex;align-items:center;justify-content:center}
.f-help-ic svg{width:27px;height:27px}
.f-help-t{flex:1;min-width:220px}
.f-help-t h2{color:#fff;font-size:23px}
.f-help-t p{color:rgba(255,255,255,.76);font-size:15px;margin-top:6px}
.f-secure{display:flex;align-items:center;justify-content:center;gap:10px;
  margin:26px 0 8px;color:var(--s-muted);font-size:14px;text-align:center}
.f-secure svg{width:18px;height:18px;color:var(--s-ok);flex:none}

@media(max-width:900px){
  .s-plans{grid-template-columns:1fr}
  .s-plan-hi{order:-1}
  .f-hand{display:none}         /* el yazısı not dar ekranda okla birlikte bozuluyor */
  .f-help{padding:24px}
}

/* Müşteri kabuğu (base_public.html) MOBİL ÖNCELİKLİ: .c-container 560px'e
   kilitli. İki kolonlu detay sayfası oraya sığmıyor ve sol kolon ~100px'e
   çöküyordu (her kelime harf harf sarıyordu). `.s-page` altında kap serbest
   bırakılır; genişliği artık .d2-wrap yönetir. Göç etmemiş müşteri sayfaları
   (randevu, bilet, başarı) 560px'te kalmaya devam eder. */
.s-page .c-container{max-width:none;margin:0;padding:0}
.s-page .c-footer{max-width:var(--s-max);margin:0 auto;padding:28px 24px;
  color:var(--s-muted);font-size:14px;border-top:1px solid var(--s-line)}

/* ==========================================================================
   DÜKKAN DETAY (/b/slug/) — solda içerik + sekmeler, sağda SABİT randevu paneli
   ========================================================================== */
.d2-wrap{max-width:var(--s-max);margin:0 auto;padding:0 24px}
.d2-crumb{display:flex;align-items:center;gap:8px;padding:16px 0;font-size:13.5px;
  color:var(--s-muted);flex-wrap:wrap}
.d2-crumb a{color:var(--s-muted)}
.d2-crumb a:hover{color:var(--s-bordo)}
.d2-crumb b{color:var(--s-ink);font-weight:500}
.d2-crumb svg{width:14px;height:14px;flex:none}

/* minmax(0,1fr) — `1fr` aslında `minmax(auto,1fr)` ve `auto`nun asgarisi
   içeriğin min-content'idir. Daralamayan bir çocuk kolonu şişiriyordu:
   390px viewport'ta kapak 506px'e çıkıp sayfayı 156px yatay kaydırıyordu. */
.d2-body{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:26px;
  align-items:start;padding-bottom:44px}

/* --- Kapak ---------------------------------------------------------------- */
.d2-cover{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:16/6.2;
  background:linear-gradient(135deg,#6E1F2A,#A8836B)}
.d2-cover img{width:100%;height:100%;object-fit:cover;display:block}
.d2-cover::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.62),rgba(0,0,0,.12) 55%,transparent)}
.d2-cover-in{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:22px 24px;
  display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap}
.d2-logo{width:82px;height:82px;border-radius:50%;flex:none;background:var(--s-bordo);
  border:3px solid rgba(255,255,255,.9);display:flex;align-items:center;
  justify-content:center;font-family:var(--s-serif);font-size:28px;font-weight:700;
  color:#fff;overflow:hidden}
.d2-logo img{width:100%;height:100%;object-fit:cover}
.d2-head{flex:1;min-width:220px;color:#fff}
.d2-head h1{color:#fff;font-size:clamp(24px,3vw,34px)}
.d2-meta{display:flex;align-items:center;gap:9px;margin-top:8px;font-size:14.5px;
  color:rgba(255,255,255,.9);flex-wrap:wrap}
.d2-meta .tb{width:15px;height:15px;fill:currentColor}
.d2-meta-sep{opacity:.5}
.d2-cover-act{position:absolute;top:16px;right:16px;z-index:2;display:flex;gap:9px}
.d2-ico{width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.92);color:var(--s-bordo);display:flex;
  align-items:center;justify-content:center}
.d2-ico .tb{width:18px;height:18px}
.d2-ico.is-fav .tb{fill:currentColor}
.d2-photos-btn{position:absolute;right:16px;bottom:16px;z-index:3;
  background:rgba(255,255,255,.94);color:var(--s-ink);border-radius:10px;
  padding:8px 14px;font-size:13.5px;font-weight:600;display:inline-flex;
  align-items:center;gap:8px}
.d2-photos-btn svg{width:16px;height:16px}

/* --- Sekmeler ------------------------------------------------------------- */
.d2-tabs{display:flex;gap:4px;border-bottom:1px solid var(--s-line);margin-top:22px;
  overflow-x:auto;-webkit-overflow-scrolling:touch}
.d2-tab{border:0;background:none;font:inherit;font-size:15px;font-weight:600;
  color:var(--s-muted);padding:13px 16px;cursor:pointer;white-space:nowrap;
  border-bottom:2px solid transparent;margin-bottom:-1px}
.d2-tab:hover{color:var(--s-ink)}
.d2-tab.is-on{color:var(--s-bordo);border-bottom-color:var(--s-bordo)}
/* Klavye odağı: tarayıcı varsayılanı mavi halka basıyordu — bordo tasarımda
   yabancı duruyor. :focus-visible, yani FARE tıklamasında çıkmaz. */
.d2-tab:focus-visible,.d2-ico:focus-visible{outline:2px solid var(--s-bordo);
  outline-offset:2px;border-radius:4px}
.d2-panel{padding-top:26px}
.d2-panel[hidden]{display:none}
.d2-panel h2{font-size:22px;margin-bottom:14px}
.d2-panel h2 + p{color:var(--s-muted);font-size:15.5px}

/* --- Üç bilgi kutusu ------------------------------------------------------ */
.d2-info{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px}
.d2-info-c{display:flex;gap:12px;background:#fff;border:1px solid var(--s-line);
  border-radius:12px;padding:16px}
.d2-info-c svg{width:20px;height:20px;color:var(--s-bordo);flex:none;margin-top:2px}
.d2-info-c b{display:block;font-family:var(--s-font);font-size:12.5px;font-weight:600;
  color:var(--s-muted);text-transform:uppercase;letter-spacing:.06em}
.d2-info-c span{display:block;font-size:14.5px;margin-top:4px}

/* --- Öne çıkanlar --------------------------------------------------------- */
.d2-hl{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:26px}
.d2-hl-c{display:flex;gap:12px}
.d2-hl-ic{width:40px;height:40px;border-radius:11px;background:var(--s-ic-bg);
  color:var(--s-bordo);flex:none;display:flex;align-items:center;justify-content:center}
.d2-hl-ic svg{width:19px;height:19px}
.d2-hl-c b{display:block;font-size:14.5px}
.d2-hl-c span{display:block;color:var(--s-muted);font-size:13.5px;margin-top:2px}

/* --- Yorumlar ------------------------------------------------------------- */
.d2-rev-top{display:grid;grid-template-columns:170px 1fr;gap:24px;margin-top:18px;
  align-items:center}
.d2-rev-big{text-align:center;background:var(--s-tint-bg);border-radius:14px;padding:20px}
.d2-rev-num{font-family:var(--s-serif);font-size:44px;font-weight:700;line-height:1}
.d2-rev-stars{color:var(--s-bordo);margin-top:6px}
.d2-rev-stars .tb{width:15px;height:15px;fill:currentColor}
.d2-rev-cnt{display:block;color:var(--s-muted);font-size:13px;margin-top:6px}
.d2-bars{display:flex;flex-direction:column;gap:7px}
.d2-bar{display:grid;grid-template-columns:34px 1fr 34px;align-items:center;gap:10px;
  font-size:13px;color:var(--s-muted)}
/* display:block ŞART: ikisi de <span>, yani satır içi öğe — width/height
   satır içi öğede UYGULANMAZ. Genişlikler doğru hesaplanıyordu (55/27/18)
   ama çubuklar boş görünüyordu. */
.d2-bar-t{display:block;height:7px;border-radius:100px;background:var(--s-line);
  overflow:hidden}
.d2-bar-f{display:block;height:100%;background:var(--s-bordo);border-radius:100px}
.d2-revs{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}
.d2-rev{background:#fff;border:1px solid var(--s-line);border-radius:12px;padding:16px}
.d2-rev-h{display:flex;align-items:center;gap:10px}
.d2-rev-av{width:34px;height:34px;border-radius:50%;background:var(--s-ic-bg);
  color:var(--s-bordo);display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:13px;flex:none}
.d2-rev-n{font-weight:600;font-size:14.5px}
.d2-rev-d{color:var(--s-muted);font-size:12.5px}
.d2-rev p{margin-top:10px;font-size:14.5px}
.d2-rev-reply{margin-top:10px;padding:10px 12px;border-radius:10px;
  background:var(--s-tint-bg);font-size:13.5px}
.d2-rev-reply b{display:block;font-size:12.5px;color:var(--s-muted);margin-bottom:3px}

/* --- Sağdaki SABİT randevu paneli ---------------------------------------- */
.d2-aside{position:sticky;top:88px}
.d2-book{background:#fff;border:1px solid var(--s-line);border-radius:16px;
  box-shadow:var(--s-shadow);padding:20px}
.d2-book h2{font-size:20px}
/* Adım çubuğu: dört adımın hepsi görünür, ilki aktif. Sonraki adımlar mevcut
   (test edilmiş) randevu akışında devam eder — para yolu yeniden yazılmadı. */
.d2-steps{display:flex;justify-content:space-between;gap:4px;margin:16px 0 18px;
  position:relative}
.d2-steps::before{content:"";position:absolute;top:15px;left:14%;right:14%;height:1px;
  background:var(--s-line)}
.d2-step{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;
  gap:6px;flex:1;font-size:11px;color:var(--s-muted);text-align:center}
.d2-step i{width:30px;height:30px;border-radius:50%;background:#fff;
  border:1px solid var(--s-line);display:flex;align-items:center;justify-content:center;
  font-style:normal;font-weight:700;font-size:12px}
.d2-step.is-on{color:var(--s-bordo);font-weight:600}
.d2-step.is-on i{background:var(--s-bordo);border-color:var(--s-bordo);color:#fff}
/* Uzun hizmet listesi kendi içinde kayar. ÖNCE alta beyaz solma konmuştu ama
   kart zaten beyaz — solma hiçbir şey yapmıyordu, yanlış araçtı. Sınır 6 satırı
   TAM gösterecek kadar yükseltildi; daha uzun listede yarım kalan satır zaten
   kaydırılabilirliğin standart işaretidir. */
.d2-svc-wrap{position:relative}
.d2-svc{display:flex;flex-direction:column;gap:8px;max-height:446px;overflow-y:auto;
  padding:0 2px 2px 0}
.d2-svc-i{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;
  border:1.5px solid var(--s-line);cursor:pointer;transition:border-color .15s ease-out}
.d2-svc-i:hover{border-color:var(--s-line-strong)}
.d2-svc-i:has(input:checked){border-color:var(--s-bordo);background:#FFF9F7}
.d2-svc-i input{position:absolute;opacity:0;pointer-events:none}
.d2-svc-t{flex:1;min-width:0}
.d2-svc-t b{display:block;font-size:14.5px;font-weight:600}
.d2-svc-t span{display:block;color:var(--s-muted);font-size:13px;margin-top:2px}
.d2-svc-p{font-weight:700;font-size:15px;white-space:nowrap}
.d2-svc-r{width:20px;height:20px;border-radius:50%;border:2px solid var(--s-line-strong);
  flex:none;display:flex;align-items:center;justify-content:center}
.d2-svc-i:has(input:checked) .d2-svc-r{border-color:var(--s-bordo)}
.d2-svc-i:has(input:checked) .d2-svc-r::after{content:"";width:9px;height:9px;
  border-radius:50%;background:var(--s-bordo)}
.d2-book .s-btn{width:100%;margin-top:16px}
.d2-book-sum{display:flex;justify-content:space-between;font-size:14px;margin-top:14px;
  padding-top:14px;border-top:1px solid var(--s-line)}
.d2-book-sum b{font-size:16px}
/* "Öner & Kazan" puan sistemi YOK (notlar) — yerine paylaşma. */
.d2-share{margin-top:16px;background:#fff;border:1px solid var(--s-line);
  border-radius:16px;padding:18px;text-align:center}
.d2-share b{display:block;font-family:var(--s-serif);font-size:17px}
.d2-share p{color:var(--s-muted);font-size:13.5px;margin:6px 0 14px}
.d2-share-a{display:flex;gap:9px}
.d2-share-a .s-btn{flex:1;font-size:14px;padding:10px 12px}

/* --- Boş haller ----------------------------------------------------------- */
.d2-empty{background:var(--s-bg2);border:1px dashed var(--s-line-strong);
  border-radius:12px;padding:26px;text-align:center;color:var(--s-muted);font-size:14.5px}

/* Mobilde SABİT ALT ÇUBUK. Panel tek kolona inince yorumların ardına düşüyor
   ve randevu almak için uzun bir kaydırma gerekiyordu — referansın sağ sabit
   panelinin mobil karşılığı bu. */
.d2-bar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:#fff;border-top:1px solid var(--s-line);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  box-shadow:0 -4px 18px rgba(0,0,0,.08);align-items:center;gap:12px}
.d2-bar-t{flex:1;min-width:0}
.d2-bar-t b{display:block;font-size:14.5px}
.d2-bar-t span{display:block;color:var(--s-muted);font-size:12.5px}
.d2-bar .s-btn{flex:none}

@media(max-width:1040px){
  .d2-bar{display:flex}
  .d2-body{padding-bottom:96px}
  .d2-body{grid-template-columns:minmax(0,1fr)}
  /* Panel mobilde sayfanın içine iner; alt sabit çubuk CTA'yı taşır. */
  .d2-aside{position:static}
  .d2-hl{grid-template-columns:repeat(2,1fr)}
  .d2-info,.d2-revs{grid-template-columns:1fr}
}
@media(max-width:560px){
  .d2-hl{grid-template-columns:1fr}
  .d2-rev-top{grid-template-columns:1fr}
  .d2-logo{width:64px;height:64px;font-size:22px}
}

/* ==========================================================================
   RANDEVU AKIŞI (/b/slug/randevu/) — MARKUP'A DOKUNULMADI.
   Bu para yolu: 4 adım, çakışma kilidi, slot motoru ve KVKK adımı iyi test
   edilmiş durumda. Şablonu yeniden yazmak yerine mevcut `b-*` sınıfları
   sistem diline ÇEVRİLİYOR — davranış riski sıfır, görsel geçiş tam.
   ========================================================================== */
.s-page .b-wrap{max-width:1060px;margin:0 auto;padding:0 24px}
/* .b-head eski krem zemini (#FAF6F0) taşıyordu; üst bant sayfadan farklı
   zeminde kalıyordu. */
.s-page .b-head{padding:18px 0 0;background:transparent}
.s-page .b-shop{display:flex;align-items:center;gap:12px}
.s-page .b-shop-name{font-family:var(--s-serif);font-size:20px;font-weight:700}
.s-page .b-shop-meta,.s-page .b-muted{color:var(--s-muted);font-size:13.5px}
.s-page .b-mono{background:var(--s-bordo);color:#fff;font-family:var(--s-serif);
  font-weight:700;border-radius:50%;width:44px;height:44px;display:flex;
  align-items:center;justify-content:center}

/* Adım göstergesi — tamamlananlar tik (mevcut davranış korunur). */
.s-page .b-steps{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 0;padding-bottom:18px;
  border-bottom:1px solid var(--s-line)}
.s-page .b-steps > *{display:inline-flex;align-items:center;gap:9px;padding:8px 15px;
  border:1px solid var(--s-line);border-radius:100px;font-size:14px;color:var(--s-muted);
  background:#fff}
.s-page .b-steps > *.is-on,.s-page .b-steps > *[aria-current]{border-color:var(--s-bordo);
  color:var(--s-bordo);font-weight:600}
.s-page .b-step-num{width:24px;height:24px;border-radius:50%;background:var(--s-tint);
  color:var(--s-muted-tint);display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700}
.s-page .b-steps > *.is-on .b-step-num,.s-page .b-steps > *[aria-current] .b-step-num{
  background:var(--s-bordo);color:#fff}

.s-page .b-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:26px;
  align-items:start;padding:26px 0 44px}
.s-page .b-main h1{font-size:clamp(24px,3vw,32px)}
.s-page .b-main h1 + p{color:var(--s-muted);font-size:15.5px;margin-top:8px}

/* Hizmet / personel / slot seçim kartları — tek dil */
.s-page .b-svc,.s-page .b-staff-grid > *{background:#fff;border:1.5px solid var(--s-line);
  border-radius:12px;transition:border-color .15s ease-out}
.s-page .b-svc{display:flex;align-items:center;gap:14px;padding:14px 16px;margin-bottom:9px;
  cursor:pointer}
.s-page .b-svc:hover,.s-page .b-staff-grid > *:hover{border-color:var(--s-line-strong)}
.s-page .b-svc:has(input:checked),.s-page .b-staff-grid > *:has(input:checked){
  border-color:var(--s-bordo);background:#FFF9F7}
.s-page .b-svc-name{font-weight:600;font-size:15.5px;flex:1}
.s-page .b-svc-dur{color:var(--s-muted);font-size:13.5px}
.s-page .b-svc-price{font-weight:700;font-size:15.5px;white-space:nowrap}
.s-page .b-svc-check,.s-page .b-staff-check{width:20px;height:20px;border-radius:6px;
  border:2px solid var(--s-line-strong);flex:none}
.s-page .b-svc:has(input:checked) .b-svc-check,
/* Personel kartı: 240px kolonda "en erken bugün 12:00" üç satıra kırılıp
   kartlar farklı boyda kalıyordu (119px / 99px). Kolonu genişlet, satırı
   tek satırda tut, puanı sabitle — kartlar aynı boyda. */
.s-page .b-staff-grid{grid-template-columns:repeat(auto-fill,minmax(288px,1fr));gap:14px}
.s-page .b-staff{min-height:78px;align-items:center;gap:12px}
.s-page .b-staff-txt{min-width:0;gap:2px}
.s-page .b-staff-name{font-weight:600;font-size:15px}
.s-page .b-staff-early{white-space:nowrap;font-size:12.5px;color:var(--s-ok,#1F7A4D)}
.s-page .b-staff-rt{flex:none;display:inline-flex;align-items:center;gap:4px;
  font-size:13px;font-weight:600;color:var(--s-bordo)}

.s-page .b-staff-grid > *:has(input:checked) .b-staff-check{
  border-color:var(--s-bordo);background:var(--s-bordo)}
.s-page .b-cat-title{font-family:var(--s-font);font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.09em;color:var(--s-muted-tint);
  margin:18px 0 9px}

/* Gün şeridi + saat çipleri */
.s-page .b-days{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px}
.s-page .b-days > *{flex:none;min-width:62px;text-align:center;padding:10px 8px;
  border:1.5px solid var(--s-line);border-radius:12px;background:#fff;cursor:pointer}
.s-page .b-days > *.is-on{border-color:var(--s-bordo);background:var(--s-bordo);color:#fff}
.s-page .b-days > *[disabled],.s-page .b-days > *.is-full{opacity:.42;cursor:not-allowed}
.s-page .b-day-dow{display:block;font-size:11.5px;color:inherit;opacity:.75}
.s-page .b-day-num{display:block;font-family:var(--s-serif);font-size:19px;font-weight:700}
.s-page .b-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(94px,1fr));
  gap:9px;margin-top:14px}
.s-page .b-slot{padding:11px 8px;border:1.5px solid var(--s-line);border-radius:10px;
  background:#fff;font:inherit;font-size:14.5px;font-weight:600;cursor:pointer;
  text-align:center}
.s-page .b-slot:hover{border-color:var(--s-bordo)}
.s-page .b-slot.is-on,.s-page .b-slot[aria-pressed="true"]{background:var(--s-bordo);
  border-color:var(--s-bordo);color:#fff}
.s-page .b-slotgrp-t{font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;color:var(--s-muted-tint);margin:16px 0 8px}

/* booking.css .b-wrap'a --endam-sans basıyor (Inter YOK) — sayfanın geri kalanı
   Inter'ken alanlar system-ui'ye düşüyordu. .s-page altında sistem fontuna çek. */
.s-page .b-wrap,.s-page .b-ticket{font-family:var(--s-font)}

/* Form alanları */
.s-page .b-fields{display:flex;flex-direction:column;gap:16px;max-width:520px}
.s-page .b-fields label{display:block;font-size:13.5px;font-weight:600;margin-bottom:6px}
.s-page .b-fields input,.s-page .b-fields textarea{width:100%;padding:12px 14px;
  border:1px solid var(--s-line-strong);border-radius:var(--s-r-input);font:inherit;
  font-size:15px;background:#fff;color:var(--s-ink)}
.s-page .b-fields input:focus,.s-page .b-fields textarea:focus{outline:2px solid var(--s-bordo);
  outline-offset:-1px;border-color:var(--s-bordo)}
.s-page .b-req{color:var(--s-bordo)}
/* .b-note-lbl taban CSS'te column-flex ve textarea stili ONA bağlı
   (.b-note-lbl textarea) — kolonu bozma, başlık satırını içeriye koy. */
.s-page .b-note-lbl{font-size:13.5px;font-weight:600;color:var(--s-ink)}
.s-page .b-note-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.s-page .b-note-lbl textarea{width:100%;max-width:520px;padding:12px 14px;
  border:1px solid var(--s-line-strong);border-radius:var(--s-r-input);font:inherit;
  font-size:15px;background:#fff;color:var(--s-ink);resize:vertical}
.s-page .b-note-lbl textarea:focus{outline:2px solid var(--s-bordo);
  outline-offset:-1px;border-color:var(--s-bordo)}
/* Karakter sayacı — referanstaki "0/200". Uzun not alanında ne kadar kaldığını
   göstermek, yazarken kesilmekten iyidir. */
.s-page .b-count{font-size:12.5px;color:var(--s-muted);font-weight:500}
.s-page .b-kvkk-box{background:var(--s-bg2);border:1px solid var(--s-line);
  border-radius:12px;padding:14px}
.s-page .b-kvkk{display:flex;gap:10px;align-items:flex-start;font-size:14px}
.s-page .b-kvkk input{width:18px;height:18px;accent-color:var(--s-bordo);margin:2px 0 0}
.s-page .b-kvkk-text{color:var(--s-muted);font-size:13px;margin-top:8px;line-height:1.55}
.s-page .b-link{color:var(--s-bordo);border-bottom:1px solid var(--s-line)}

/* Sağdaki birikimli özet — notların "en iyi detay" dediği öğe */
.s-page .b-aside{position:sticky;top:88px;background:#fff;border:1px solid var(--s-line);
  border-radius:16px;box-shadow:var(--s-shadow);padding:20px}
.s-page .b-aside-h{font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.09em;color:var(--s-muted-tint);margin-bottom:12px}
.s-page .b-sum-rows{display:flex;flex-direction:column;gap:9px;font-size:14.5px}
.s-page .b-sum-total{display:flex;justify-content:space-between;align-items:baseline;
  margin-top:14px;padding-top:14px;border-top:1px solid var(--s-line)}
.s-page .b-total-big{font-family:var(--s-serif);font-size:30px;font-weight:700}
/* HİYERARŞİ: `.b-btn` TABAN sınıf ve ikincil eylemler de onu kullanıyor
   (ör. "Geri" linki). Dolguyu tabana verince geri linki birincil eylem gibi
   görünüyordu. Dolgu yalnız `.b-btn-primary`'de. */
.s-page .b-btn{display:block;width:100%;text-align:center;padding:13px;border-radius:var(--s-r-btn);
  border:1.5px solid var(--s-bordo);background:transparent;color:var(--s-bordo);font:inherit;
  font-size:15.5px;font-weight:600;cursor:pointer;margin-top:16px;
  transition:background .17s ease-out}
.s-page .b-btn:hover{background:var(--s-tint)}
.s-page .b-btn-primary{background:var(--s-bordo);border-color:var(--s-bordo);color:#fff}
.s-page .b-btn-primary:hover{background:#5C1A23;border-color:#5C1A23}
/* .b-btn taban kuralı width:100% — yan sütunda doğru, adım altındaki .b-nav'da
   değil: "Geri" 670px olup birincil "Devam"ı 80px'e eziyordu. Nav'da ikisi de
   sabit genişlik, birincil sağda. */
.s-page .b-nav{display:flex;justify-content:space-between;align-items:center;
  gap:12px;margin-top:22px;flex-wrap:wrap}
/* min-width:148 x2 + padding = 393px; 375px ekranda 18px taşıyordu.
   Sarma + esneme: dar ekranda alt alta, geniş ekranda yan yana. */
.s-page .b-nav .b-btn{width:auto;flex:1 1 auto;min-width:0;padding:13px 20px}

.s-page .b-btn.is-disabled,.s-page .b-btn[disabled]{background:var(--s-line);
  border-color:var(--s-line);color:var(--s-muted);cursor:not-allowed}
.s-page .b-fineprint{color:var(--s-muted);font-size:12.5px;margin-top:12px;text-align:center}
.s-page .b-error{background:var(--s-bordo-soft,#F3E7E9);border:1px solid var(--s-bordo);
  border-radius:12px;padding:14px;margin-bottom:16px}
.s-page .b-error-h{font-weight:700;color:var(--s-bordo)}

/* Mobil alt çubuk */
/* display:none — sadece mobil media query'de flex olur. Burada flex vermek
   taban CSS'teki .b-bottombar{display:none}'i eziyordu (0,2,0 > 0,1,0) ve
   çubuk masaüstünde de basılıyordu. */
.s-page .b-bottombar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;background:#fff;
  border-top:1px solid var(--s-line);padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  box-shadow:0 -4px 18px rgba(0,0,0,.08);align-items:center;gap:12px}
.s-page .b-bb-main{font-family:var(--s-font);font-weight:700;font-size:15px}
.s-page .b-bb-sub{color:var(--s-muted);font-size:12.5px}
.s-page .b-bb-btn{flex:none;padding:11px 20px;border-radius:var(--s-r-btn);border:0;
  background:var(--s-bordo);color:#fff;font:inherit;font-weight:600;cursor:pointer}
.s-page .b-bb-btn.is-disabled{background:var(--s-line);color:var(--s-muted)}

/* Adım başlığı: .s-page h1 clamp'i .b-h1'i eziyordu, adımlar arası ölçü
   52px/32px arasında zıplıyordu. Dört adım da aynı ölçüde. */
.s-page h1.b-h1{font-size:32px;line-height:1.15}

@media(max-width:820px){
  .s-page .b-grid{grid-template-columns:minmax(0,1fr);padding-bottom:96px}
  .s-page .b-aside{position:static}
  .s-page .b-bottombar{display:flex}
  .s-page .b-steps{display:none}
  .s-page h1.b-h1{font-size:25px}
}


/* ==========================================================================
   RANDEVU BAŞARI (BİLET) — /b/<slug>/tamam/          (referans: sayfa 4)
   Referans düzeni birebir: kahraman onay + iki aksiyon → iki sütun
   (detay kartı / geri sayım + aksiyon listesi) → alt şerit.
   İki blok bilerek AYNEN geçirilmedi, sebebi success.html'de yazılı:
   "e-posta ve SMS gönderildi" (giden bildirim yok) ve puan/ödül şeridi
   (öyle bir program yok).
   ========================================================================== */
.s-page .tk{max-width:1140px;margin:0 auto;padding:8px 20px 56px}
.s-page .s-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* --- Salon başlığı (akıştaki .b-head'in bilet karşılığı) ------------------ */
.s-page .tk-head{display:flex;align-items:center;gap:12px;padding:14px 0 18px;
  border-bottom:1px solid var(--s-line)}
.s-page .tk-head-mono{flex:none;width:44px;height:44px;border-radius:50%;
  background:var(--s-bordo);color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:var(--s-serif);font-size:15px;font-weight:700}
.s-page .tk-head-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.s-page .tk-head-name{font-family:var(--s-serif);font-size:17px;font-weight:700;
  color:var(--s-ink);text-decoration:none}
.s-page .tk-head-name:hover{color:var(--s-bordo)}
.s-page .tk-head-meta{display:flex;align-items:center;gap:5px;font-size:13px;color:var(--s-muted)}
.s-page .tk-head-meta .tb{width:14px;height:14px;color:var(--s-bordo)}

/* --- Kahraman ------------------------------------------------------------- */
.s-page .tk-hero{text-align:center;padding:26px 0 34px}
.s-page .tk-check{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:74px;height:74px;border-radius:50%;background:var(--s-bordo);color:#fff;margin-bottom:20px}
.s-page .tk-check .tb{width:34px;height:34px;stroke-width:2.6}
/* Konfeti: referanstaki serpinti. Salt süs — küçük ekranda da taşmasın diye
   dairenin kendi kutusuna göre konumlanır. */
.s-page .tk-sp{position:absolute;border-radius:2px;background:var(--s-ic-bg);pointer-events:none}
.s-page .tk-sp1{width:7px;height:7px;top:-6px;left:-26px;transform:rotate(20deg)}
.s-page .tk-sp2{width:5px;height:5px;top:14px;left:-42px;background:var(--s-bordo);opacity:.55}
.s-page .tk-sp3{width:9px;height:9px;top:-14px;right:-30px;transform:rotate(-15deg)}
.s-page .tk-sp4{width:5px;height:5px;bottom:2px;right:-44px;background:var(--s-bordo);opacity:.5}
.s-page .tk-sp5{width:6px;height:6px;bottom:-8px;left:-14px;transform:rotate(35deg)}
.s-page .tk-sp6{width:7px;height:7px;top:6px;right:-14px;opacity:.8}
.s-page .tk-hero h1{font-size:clamp(27px,3.4vw,38px);margin-bottom:10px}
.s-page .tk-sub{max-width:560px;margin:0 auto;color:var(--s-muted);font-size:15.5px;line-height:1.6}
.s-page .tk-cta{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:22px}

/* --- İki sütun ------------------------------------------------------------ */
.s-page .tk-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:20px;align-items:start}
.s-page .tk-card{background:#fff;border:1px solid var(--s-line);border-radius:var(--s-r-card);padding:22px;
  container-type:inline-size}
.s-page .tk-card-h{font-size:19px;margin-bottom:18px}
.s-page .tk-card-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.s-page .tk-no{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;
  color:var(--s-muted);letter-spacing:.02em}
.s-page .tk-card-h em{font-style:normal;color:var(--s-bordo)}
.s-page .tk-muted{color:var(--s-muted)}

/* Dükkan satırı */
.s-page .tk-shop{display:flex;gap:16px;padding-bottom:18px;border-bottom:1px solid var(--s-line)}
.s-page .tk-shop-img{flex:none;width:150px;height:104px;border-radius:10px;overflow:hidden;
  background:linear-gradient(135deg,var(--s-bordo),var(--s-bordo-dark));
  display:flex;align-items:center;justify-content:center}
.s-page .tk-shop-img img{width:100%;height:100%;object-fit:cover}
.s-page .tk-shop-mono{font-family:var(--s-serif);font-size:30px;color:#fff;opacity:.9}
.s-page .tk-shop-txt{display:flex;flex-direction:column;gap:9px;min-width:0;padding-top:2px}
.s-page .tk-shop-name{display:flex;align-items:center;gap:7px;font-family:var(--s-serif);
  font-size:20px;font-weight:700;line-height:1.25}
.s-page .tk-verified{width:19px;height:19px;color:var(--s-bordo);flex:none}
.s-page .tk-shop-row{display:flex;align-items:center;gap:8px;color:var(--s-muted);
  font-size:14px;text-decoration:none}
.s-page a.tk-shop-row:hover{color:var(--s-bordo)}
.s-page .tk-shop-row .tb{width:16px;height:16px;color:var(--s-bordo);flex:none}

/* Dörtlü meta */
/* Sütun genişliği EN UZUN AY ADINA göre: "28 Ağustos 2026" 4'lü ızgarada
   150px'lik kolona sığmayıp ikiye kırılıyordu (Eylül sığıyordu — ay adına
   bağlı bir kırılma). 160px + 14px meta yazısı payı bırakır. */
/* Dört sütun SABİT: auto-fit + minmax ile kolon sayısı kartın genişliğine
   göre 3'e düşüp 3+1 kırık düzen veriyordu. Ölçü referanstaki gibi 4'lü
   tek sıra; dar ekranda 2x2'ye iner (aşağıdaki media). */
.s-page .tk-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px 12px;padding:20px 0}
.s-page .tk-meta-i{display:flex;gap:10px;min-width:0}
.s-page .tk-ic{flex:none;width:36px;height:36px;border-radius:9px;background:var(--s-ic-bg);
  color:var(--s-bordo-dark);display:flex;align-items:center;justify-content:center}
.s-page .tk-ic .tb{width:19px;height:19px}
.s-page .tk-ic-sm{width:32px;height:32px;border-radius:8px}
.s-page .tk-ic-sm .tb{width:17px;height:17px}
.s-page .tk-meta-t{display:flex;flex-direction:column;gap:1px;min-width:0}
.s-page .tk-meta-lbl{font-size:12.5px;color:var(--s-muted)}
.s-page .tk-meta-val{font-size:13.5px;font-weight:600;line-height:1.35}
.s-page .tk-meta-sub{font-size:12.5px;color:var(--s-muted)}

/* İptal politikası kutusu */
.s-page .tk-policy{display:flex;gap:11px;background:var(--s-tint-bg);
  border-radius:10px;padding:15px 16px}
.s-page .tk-policy-t{display:flex;flex-direction:column;gap:4px;font-size:13.5px;line-height:1.55}
.s-page .tk-policy-h{font-weight:700;color:var(--s-bordo-dark);font-size:14px}

/* --- Sağ sütun: geri sayım ------------------------------------------------ */
.s-page .tk-when{color:var(--s-muted);font-size:14px;
  margin:-12px 0 4px;padding-bottom:16px;border-bottom:1px solid var(--s-line)}

/* Aksiyon listesi */
.s-page .tk-acts{display:flex;flex-direction:column;padding-top:6px}
.s-page .tk-act{display:flex;align-items:center;gap:11px;padding:13px 2px;
  border-bottom:1px solid var(--s-line);text-decoration:none;color:var(--s-ink)}
.s-page .tk-acts .tk-act:last-child{border-bottom:0}
.s-page .tk-act:hover .tk-ic{background:var(--s-tint)}
.s-page .tk-act-t{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}
.s-page .tk-act-t b{font-size:14.5px;font-weight:600}
.s-page .tk-act-t i{font-style:normal;font-size:12.5px;color:var(--s-muted)}
.s-page .tk-act-go{width:17px;height:17px;color:var(--s-muted);flex:none}
.s-page .tk-act-danger b{color:var(--s-bordo)}
.s-page .tk-act-danger .tk-ic{background:var(--s-tint);color:var(--s-bordo)}

/* --- Alt şerit ------------------------------------------------------------ */
.s-page .tk-share{display:flex;align-items:center;gap:16px;margin-top:20px;
  background:var(--s-tint-bg);border-radius:var(--s-r-card);padding:20px 24px}
.s-page .tk-share-ic{flex:none;width:48px;height:48px;border-radius:12px;background:#fff;
  color:var(--s-wa-ic);display:flex;align-items:center;justify-content:center}
.s-page .tk-share-ic .tb{width:25px;height:25px}
.s-page .tk-share-t{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.s-page .tk-share-t b{font-size:16px;font-weight:700}
.s-page .tk-share-t span{font-size:14px;color:var(--s-muted)}
.s-page .tk-share-btn{flex:none}
.s-page .tk-back{display:inline-block;margin-top:22px;color:var(--s-bordo);font-size:14.5px}

@media(max-width:900px){
  .s-page .tk-grid{grid-template-columns:minmax(0,1fr)}
  .s-page .tk-side{order:-1}     /* telefonda önce "ne zaman", sonra detay */
}
/* Meta ızgarası KARTIN genişliğine bağlanır, pencerenin değil: kart 1024px
   pencerede daralıp "28 Ağustos 2026"yı ikiye kırıyordu, ama 820px'te tek
   sütuna düşüp yeniden genişliyordu. Doğru değişken kartın kendi eni. */
@container (max-width:600px){
  .s-page .tk-meta{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Telefonda 2 sütun bile dar kalıyor (350px kart → 147px sütun, uzun ay adı
   yine kırılıyor). Tek sütun. */
@container (max-width:390px){
  .s-page .tk-meta{grid-template-columns:minmax(0,1fr);gap:14px}
}
@media(max-width:560px){
  .s-page .tk-cta .s-btn{flex:1 1 100%}
  .s-page .tk-shop{flex-direction:column}
  .s-page .tk-shop-img{width:100%;height:150px}
  .s-page .tk-share{flex-direction:column;text-align:center}
  .s-page .tk-share-btn{width:100%}
}


/* ==========================================================================
   RANDEVULARIM — /randevularim/                      (referans: sayfa 5)
   Referanstaki sol hesap menüsü, "Takvim Görünümü", bildirim/şehir/avatar ve
   "davet et, puan kazan" kutusu BASILMADI: müşteri hesabı yok (üyeliksiz
   randevu reklam edilmiş bir söz), takvim görünümü yok, puan programı yok.
   Alt şeritteki "SMS ve e-posta ile hatırlatırız" da yok — bildirim gitmiyor.
   ========================================================================== */
/* .tb (Tabler sprite) kuralı booking.css'te tanımlı ve web sayfaları onu
   YÜKLEMİYOR: kuralsız <svg> 300x150 varsayılan boyuta ve siyah dolguya
   düşüyor — ikonlar dev siyah blok olarak basıldı. Sistem katmanında da
   tanımla. */
.s-page .tb{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:1.75;
  stroke-linecap:round;stroke-linejoin:round;vertical-align:-.15em;flex:none}
.s-page .tb--fill{fill:currentColor;stroke:none}

.s-page .ra-wrap{max-width:1080px;margin:0 auto;padding:34px 20px 64px}
.s-page .ra-head{display:flex;align-items:flex-start;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin-bottom:26px}
.s-page .ra-head h1{font-size:clamp(26px,3vw,34px);margin-bottom:6px}
.s-page .ra-head p{color:var(--s-muted);font-size:15px}

/* Sekmeler */
.s-page .ra-tabs{display:flex;gap:4px;border-bottom:1px solid var(--s-line);margin-bottom:22px}
.s-page .ra-tab{background:none;border:0;border-bottom:2px solid transparent;
  font:inherit;font-size:14.5px;font-weight:600;color:var(--s-muted);
  padding:11px 16px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  margin-bottom:-1px}
.s-page .ra-tab:hover{color:var(--s-ink)}
.s-page .ra-tab.is-on{color:var(--s-bordo);border-bottom-color:var(--s-bordo)}
.s-page .ra-tab-n{background:var(--s-tint-bg);color:var(--s-muted-tint);
  border-radius:999px;padding:1px 8px;font-size:12px;font-weight:700}
.s-page .ra-tab.is-on .ra-tab-n{background:var(--s-ic-bg);color:var(--s-bordo-dark)}
/* Kapsayıcı KARTIN KENDİSİ olamaz: container query yalnızca kapsayıcının
   ALT öğelerine uygulanır, kendisine değil. container-type .ra-card'daydı ve
   .ra-card'ın flex yönünü sorguluyordu — kural hiç çalışmadı, telefonda
   168px'lik görsel + içerik 128px taşma yaptı. Kapsayıcı panel oldu. */
.s-page .ra-panel{container-type:inline-size}
.s-page .ra-panel.is-gizli{display:none}
.s-page .ra-bos{color:var(--s-muted);padding:26px 2px;font-size:15px}

/* Randevu kartı */
.s-page .ra-card{display:flex;gap:18px;background:#fff;border:1px solid var(--s-line);
  border-radius:var(--s-r-card);padding:16px;margin-bottom:14px}
.s-page .ra-card-img{flex:none;width:168px;height:132px;border-radius:10px;overflow:hidden;
  background:linear-gradient(135deg,var(--s-bordo),var(--s-bordo-dark));
  display:flex;align-items:center;justify-content:center}
.s-page .ra-card-img img{width:100%;height:100%;object-fit:cover}
.s-page .ra-card-mono{font-family:var(--s-serif);font-size:30px;color:#fff;opacity:.9}
.s-page .ra-card-body{display:flex;flex-direction:column;gap:9px;flex:1;min-width:0}
.s-page .ra-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.s-page .ra-card-name{font-family:var(--s-serif);font-size:19px;font-weight:700;
  color:var(--s-ink);text-decoration:none}
.s-page .ra-card-name:hover{color:var(--s-bordo)}
.s-page .ra-card-yer{display:flex;align-items:center;gap:7px;color:var(--s-muted);font-size:13.5px}
.s-page .ra-card-yer .tb{width:15px;height:15px;color:var(--s-bordo);flex:none}
.s-page .ra-card-meta{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:13.5px}
.s-page .ra-card-meta span{display:inline-flex;align-items:center;gap:7px;font-weight:500}
.s-page .ra-card-meta .tb{width:16px;height:16px;color:var(--s-bordo);flex:none}
.s-page .ra-card-alt{display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin-top:auto;padding-top:10px;border-top:1px solid var(--s-line)}
.s-page .ra-card-no{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12.5px;color:var(--s-muted)}
.s-page .ra-card-btn{display:flex;gap:8px;flex-wrap:wrap}
.s-page .ra-btn{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;
  font-weight:600;padding:8px 14px;border:1px solid var(--s-line-strong);
  border-radius:var(--s-r-btn);color:var(--s-ink);text-decoration:none;background:#fff}
.s-page .ra-btn:hover{background:var(--s-tint);border-color:var(--s-bordo)}
.s-page .ra-btn .tb{width:15px;height:15px}
.s-page .ra-btn.is-tehlike{color:var(--s-bordo);border-color:var(--s-bordo)}

/* Durum rozetleri — modeldeki GERÇEK durumlar (active/completed/cancelled/
   no_show). Referanstaki "Onaylandı/Bekliyor" ayrımı bizde YOK: randevu
   onayı diye bir aşama modellenmiyor, uydurulmadı. */
.s-page .ra-rozet{flex:none;font-size:12px;font-weight:700;padding:4px 11px;border-radius:999px}
.s-page .ra-rozet.is-yaklasan{background:#E6F2EB;color:#1F6B4A}
.s-page .ra-rozet.is-tamam{background:var(--s-tint-bg);color:var(--s-muted-tint)}
.s-page .ra-rozet.is-iptal{background:#FBE9E6;color:#98351F}
.s-page .ra-rozet.is-gelmedi{background:#FDF1DC;color:#8A5A15}

/* Boş hal */
.s-page .ra-empty{text-align:center;background:#fff;border:1px solid var(--s-line);
  border-radius:var(--s-r-card);padding:52px 24px}
.s-page .ra-empty-ic{display:inline-flex;align-items:center;justify-content:center;
  width:62px;height:62px;border-radius:50%;background:var(--s-ic-bg);
  color:var(--s-bordo-dark);margin-bottom:16px}
.s-page .ra-empty-ic .tb{width:28px;height:28px}
.s-page .ra-empty h2{font-size:23px;margin-bottom:10px}
.s-page .ra-empty p{max-width:520px;margin:0 auto 22px;color:var(--s-muted);
  font-size:15px;line-height:1.6}

/* Alt güven şeridi */
.s-page .ra-trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:20px;margin-top:34px;background:var(--s-tint-bg);border-radius:var(--s-r-card);
  padding:24px;list-style:none}
.s-page .ra-trust li{display:grid;grid-template-columns:38px 1fr;
  grid-template-rows:auto auto;column-gap:12px;align-items:center}
.s-page .ra-trust-ic{grid-row:1 / span 2;width:38px;height:38px;border-radius:10px;
  background:#fff;color:var(--s-bordo);display:flex;align-items:center;justify-content:center}
.s-page .ra-trust-ic .tb{width:19px;height:19px}
.s-page .ra-trust b{font-size:14.5px}
.s-page .ra-trust span{font-size:13px;color:var(--s-muted);line-height:1.5}

@container (max-width:560px){
  .s-page .ra-card{flex-direction:column}
  .s-page .ra-card-img{width:100%;height:150px}
}
@media(max-width:560px){
  .s-page .ra-head .s-btn{width:100%}
  .s-page .ra-tabs{overflow-x:auto}
  .s-page .ra-card-btn{width:100%}
  .s-page .ra-btn{flex:1;justify-content:center}
}


/* ==========================================================================
   KURULUM SİHİRBAZI — /kayit/ ve /kayit/*     (referans: sayfa 6)
   Referanstan geçmeyenler: "Vergi Numarası/Dairesi" (modelde alan yok,
   faturalama mock), "Destek Al" canlı destek kutusu (kanal yok → WhatsApp),
   "256-bit SSL" (uydurma sayı yerine doğrulanabilir ifade).
   ========================================================================== */
.s-page .wz{display:grid;grid-template-columns:280px minmax(0,1fr) 300px;
  gap:26px;align-items:start;max-width:1320px;margin:0 auto;padding:28px 20px 56px}

/* --- Sol sütun ------------------------------------------------------------ */
.s-page .wz-tanit{background:#fff;border:1px solid var(--s-line);
  border-radius:var(--s-r-card);padding:18px;display:flex;flex-direction:column;gap:6px}
.s-page .wz-tanit-ic{width:42px;height:42px;border-radius:11px;background:var(--s-ic-bg);
  color:var(--s-bordo-dark);display:flex;align-items:center;justify-content:center;margin-bottom:6px}
.s-page .wz-tanit-ic .tb{width:21px;height:21px}
.s-page .wz-tanit b{font-family:var(--s-serif);font-size:16px}
.s-page .wz-tanit span{font-size:13.5px;color:var(--s-muted);line-height:1.55}

.s-page .wz-adimlar{list-style:none;margin:14px 0;padding:0 4px;
  display:flex;flex-direction:column;gap:2px}
.s-page .wz-adim{display:flex;gap:12px;padding:10px 10px;border-radius:10px;position:relative}
.s-page .wz-adim + .wz-adim::before{content:'';position:absolute;left:24px;top:-9px;
  width:1px;height:14px;background:var(--s-line)}
.s-page .wz-adim-no{flex:none;width:28px;height:28px;border-radius:50%;
  border:1.5px solid var(--s-line);background:#fff;color:var(--s-muted);
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
.s-page .wz-adim-no .tb{width:14px;height:14px;stroke-width:2.6}
.s-page .wz-adim-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.s-page .wz-adim-txt b{font-size:14px;font-weight:600;color:var(--s-muted-tint)}
.s-page .wz-adim-txt i{font-style:normal;font-size:12px;color:var(--s-muted)}
.s-page .wz-adim.is-aktif{background:var(--s-tint-bg)}
.s-page .wz-adim.is-aktif .wz-adim-no{background:var(--s-bordo);border-color:var(--s-bordo);color:#fff}
.s-page .wz-adim.is-aktif .wz-adim-txt b{color:var(--s-ink)}
.s-page .wz-adim.is-bitti .wz-adim-no{background:var(--s-ok);border-color:var(--s-ok);color:#fff}

.s-page .wz-yardim{background:#fff;border:1px solid var(--s-line);
  border-radius:var(--s-r-card);padding:18px;display:flex;flex-direction:column;gap:6px}
.s-page .wz-yardim-ic{width:38px;height:38px;border-radius:10px;background:#fff;
  border:1px solid var(--s-line);color:var(--s-wa-ic);display:flex;
  align-items:center;justify-content:center;margin-bottom:4px}
.s-page .wz-yardim b{font-size:14.5px}
.s-page .wz-yardim span{font-size:13px;color:var(--s-muted);line-height:1.55}
.s-page .wz-yardim .s-btn{margin-top:8px;width:100%;font-size:14px;padding:9px 14px}

/* --- Orta sütun ----------------------------------------------------------- */
.s-page .wz-orta > h1{font-size:clamp(24px,2.6vw,30px);margin-bottom:6px}
.s-page .wz-alt{color:var(--s-muted);font-size:15px;margin-bottom:22px}

/* Yatay adım şeridi */
.s-page .wz-yatay{list-style:none;display:flex;margin:0 0 22px;padding:0;
  overflow-x:auto;gap:0}
.s-page .wz-y{flex:1;min-width:84px;display:flex;flex-direction:column;
  align-items:center;gap:7px;position:relative;padding:0 4px}
.s-page .wz-y + .wz-y::before{content:'';position:absolute;left:calc(-50% + 17px);
  right:calc(50% + 17px);top:15px;height:1.5px;background:var(--s-line)}
.s-page .wz-y.is-bitti + .wz-y::before,
.s-page .wz-y.is-aktif + .wz-y::before{background:var(--s-line)}
.s-page .wz-y.is-bitti::before{background:var(--s-bordo)}
.s-page .wz-y-no{width:31px;height:31px;border-radius:50%;background:#fff;
  border:1.5px solid var(--s-line);color:var(--s-muted);display:flex;
  align-items:center;justify-content:center;font-size:13px;font-weight:700;
  position:relative;z-index:1}
.s-page .wz-y-no .tb{width:15px;height:15px;stroke-width:2.6}
/* Etiket iki satıra inebilir: tek satıra zorlayınca "Onay & Yayınla"
   kaydırma kutusunda kırpılıp "Onay & Yayı" olarak basılıyordu. */
.s-page .wz-y-ad{font-size:11.5px;color:var(--s-muted);text-align:center;
  line-height:1.25;overflow-wrap:anywhere}
.s-page .wz-y.is-aktif .wz-y-no{background:var(--s-bordo);border-color:var(--s-bordo);color:#fff}
.s-page .wz-y.is-aktif .wz-y-ad{color:var(--s-bordo);font-weight:600}
.s-page .wz-y.is-bitti .wz-y-no{background:var(--s-ok);border-color:var(--s-ok);color:#fff}

/* Form kartı */
.s-page .wz-form{background:#fff;border:1px solid var(--s-line);
  border-radius:var(--s-r-card);padding:24px;display:flex;flex-direction:column;gap:18px}
.s-page .wz-satir{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.s-page .wz-alan{display:flex;flex-direction:column;gap:6px;min-width:0}
.s-page .wz-alan > label{display:flex;align-items:baseline;gap:6px;
  font-size:13.5px;font-weight:600}
.s-page .wz-zorunlu{color:var(--s-bordo)}
.s-page .wz-alan input[type=text],.s-page .wz-alan input[type=tel],
.s-page .wz-alan input[type=email],.s-page .wz-alan input[type=password],
.s-page .wz-alan textarea{width:100%;padding:12px 14px;border:1px solid var(--s-line-strong);
  border-radius:var(--s-r-input);font:inherit;font-size:15px;background:#fff;color:var(--s-ink)}
.s-page .wz-alan textarea{min-height:104px;resize:vertical;line-height:1.55}
.s-page .wz-alan input:focus,.s-page .wz-alan textarea:focus{outline:2px solid var(--s-bordo);
  outline-offset:-1px;border-color:var(--s-bordo)}
.s-page .wz-alan.is-hatali input,.s-page .wz-alan.is-hatali textarea{border-color:var(--s-err)}
.s-page .wz-ops{margin-left:auto;font-weight:500;font-size:12.5px;color:var(--s-muted)}
.s-page .wz-alan-hata{font-size:12.5px;color:var(--s-err);font-weight:500}
.s-page .wz-alan-ipucu{font-size:12.5px;color:var(--s-muted)}
.s-page .wz-hata{background:#FBE9E6;border:1px solid #E7BBB1;color:#8E2E19;
  border-radius:10px;padding:12px 14px;font-size:14px}

/* Logo yükleme */

/* İşletme türü kartları */
.s-page .wz-turler{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.s-page .wz-tur input{position:absolute;opacity:0;pointer-events:none}
.s-page .wz-tur-in{display:flex;align-items:center;justify-content:space-between;gap:10px;
  border:1.5px solid var(--s-line);border-radius:12px;padding:16px;cursor:pointer;background:#fff}
.s-page .wz-tur:hover .wz-tur-in{border-color:var(--s-line-strong)}
.s-page .wz-tur-ad{font-size:15px;font-weight:600}
.s-page .wz-tur-check{flex:none;width:20px;height:20px;border-radius:50%;
  border:1.5px solid var(--s-line-strong);display:flex;align-items:center;justify-content:center}
.s-page .wz-tur-check .tb{width:12px;height:12px;stroke-width:3;opacity:0;color:#fff}
.s-page .wz-tur:has(input:checked) .wz-tur-in{border-color:var(--s-bordo);background:var(--s-tint)}
.s-page .wz-tur:has(input:checked) .wz-tur-check{background:var(--s-bordo);border-color:var(--s-bordo)}
.s-page .wz-tur:has(input:checked) .wz-tur-check .tb{opacity:1}

/* KVKK onayı */
.s-page .wz-onay{display:flex;align-items:flex-start;gap:11px;font-size:13.5px;
  line-height:1.6;cursor:pointer}
.s-page .wz-onay input{position:absolute;opacity:0;pointer-events:none}
.s-page .wz-onay-box{flex:none;width:20px;height:20px;margin-top:1px;border-radius:5px;
  border:1.5px solid var(--s-line-strong);display:flex;align-items:center;justify-content:center;color:#fff}
.s-page .wz-onay-box .tb{width:13px;height:13px;stroke-width:3;opacity:0}
.s-page .wz-onay:has(input:checked) .wz-onay-box{background:var(--s-bordo);border-color:var(--s-bordo)}
.s-page .wz-onay:has(input:checked) .wz-onay-box .tb{opacity:1}

/* Kurulumun 3. adiminda saat OZETI — duzenlenebilir alan degil, gorunurluk.
   Ayri bir saat adimi yok ve bu form gonderilince onay kuyruguna giriliyor. */
.s-page .wz-ozet{border:1px solid var(--s-line);border-radius:var(--s-r-card);
  background:var(--s-bg2);padding:16px 18px}
.s-page .wz-ozet h2{font-size:15px;margin:0}
.s-page .wz-ozet-not{font-size:13px;color:var(--s-muted-tint);margin:4px 0 12px}
.s-page .wz-saatler{list-style:none;padding:0;margin:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:2px 22px}
.s-page .wz-saatler li{display:flex;justify-content:space-between;gap:12px;
  font-size:13.5px;padding:5px 0;border-bottom:1px solid var(--s-line)}
.s-page .wz-saatler li:last-child{border-bottom:0}
.s-page .wz-saatler b{font-weight:600}
.s-page .wz-saatler .is-kapali{color:var(--s-muted)}

.s-page .wz-nav{display:flex;justify-content:space-between;gap:12px;
  padding-top:6px;border-top:1px solid var(--s-line);margin-top:4px}
.s-page .wz-dip{display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:18px;font-size:13px;color:var(--s-muted)}
.s-page .wz-dip .tb{width:16px;height:16px}

/* --- Sağ sütun ------------------------------------------------------------ */
.s-page .wz-kart{background:#fff;border:1px solid var(--s-line);
  border-radius:var(--s-r-card);padding:18px;margin-bottom:16px}
.s-page .wz-kart-h{display:block;font-size:15px;margin-bottom:14px}
.s-page .wz-halka{--yuzde:0;width:118px;height:118px;margin:0 auto;border-radius:50%;
  background:conic-gradient(var(--s-bordo) calc(var(--yuzde)*1%),var(--s-line) 0);
  display:flex;align-items:center;justify-content:center}
.s-page .wz-halka span{width:88px;height:88px;border-radius:50%;background:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--s-serif);font-size:23px;font-weight:700}
.s-page .wz-halka-alt{display:block;text-align:center;margin-top:12px;
  font-size:13px;color:var(--s-muted)}
.s-page .wz-liste{list-style:none;display:flex;flex-direction:column;gap:10px;padding:0}
.s-page .wz-liste li{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--s-muted)}
.s-page .wz-liste .tb{width:17px;height:17px;color:var(--s-ok);flex:none}
.s-page .wz-liste-bos{flex:none;width:15px;height:15px;margin:0 1px;border-radius:50%;
  border:1.5px solid var(--s-line-strong)}
.s-page .wz-liste li.is-bitti{color:var(--s-ink)}
.s-page .wz-liste li.is-bitti .tb{color:var(--s-ok)}
.s-page .wz-liste li.is-aktif{color:var(--s-bordo);font-weight:600}
.s-page .wz-liste li.is-aktif .tb{color:var(--s-bordo)}
.s-page .wz-guven{background:var(--s-tint-bg);border-color:transparent;
  display:flex;flex-direction:column;gap:5px}
.s-page .wz-guven-ic{width:36px;height:36px;border-radius:10px;background:#fff;
  color:var(--s-bordo);display:flex;align-items:center;justify-content:center;margin-bottom:4px}
.s-page .wz-guven b{font-size:14px}
.s-page .wz-guven span{font-size:12.5px;color:var(--s-muted);line-height:1.6}

@media(max-width:1100px){
  .s-page .wz{grid-template-columns:minmax(0,1fr)}
  .s-page .wz-yan,.s-page .wz-sag{display:contents}
  .s-page .wz-adimlar,.s-page .wz-tanit,.s-page .wz-yardim{order:3}
  .s-page .wz-orta{order:1}
  .s-page .wz-kart{order:2}
  .s-page .wz-adimlar{display:none}   /* yatay şerit zaten var */
}
@media(max-width:560px){
  .s-page .wz-nav{flex-direction:column-reverse}
  .s-page .wz-nav .s-btn{width:100%}
}

/* Sihirbaz karakter sayacı — JS system.js'te; alan boşken de doğru başlar. */

/* --- Sihirbaz: liste adımları (hizmet / personel) ------------------------- */
.s-page .wz-liste-basi{display:grid;grid-template-columns:1fr 110px 120px 40px;
  gap:10px;padding:0 2px 4px;font-size:12.5px;font-weight:600;color:var(--s-muted)}
.s-page .wz-satirlar{display:flex;flex-direction:column;gap:10px}
.s-page .wz-satirlik{display:grid;grid-template-columns:1fr 110px 120px 40px;
  gap:10px;align-items:center}
.s-page .wz-satirlik input[type=text],.s-page .wz-satirlik input[type=number]{
  width:100%;padding:11px 13px;border:1px solid var(--s-line-strong);
  border-radius:var(--s-r-input);font:inherit;font-size:14.5px;background:#fff;color:var(--s-ink)}
.s-page .wz-satirlik input:focus{outline:2px solid var(--s-bordo);
  outline-offset:-1px;border-color:var(--s-bordo)}
.s-page .wz-satirlik.is-hatali input{border-color:var(--s-err)}
.s-page .wz-satirlik .wz-alan-hata{grid-column:1 / -1}
/* "Sil" kaydı YOK ETMEZ, pasife alır (geçmiş randevular ona bağlı) —
   ikon çöp kutusu değil çarpı, "listemden kaldır" demek. */
.s-page .wz-sil{display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border:1px solid var(--s-line);border-radius:9px;cursor:pointer}
.s-page .wz-sil input{position:absolute;opacity:0;pointer-events:none}
.s-page .wz-sil .tb{width:17px;height:17px;color:var(--s-muted)}
.s-page .wz-sil:hover{border-color:var(--s-err)}
.s-page .wz-sil:hover .tb{color:var(--s-err)}
.s-page .wz-sil:has(input:checked){background:var(--s-tint);border-color:var(--s-err)}
.s-page .wz-sil:has(input:checked) .tb{color:var(--s-err)}

/* --- Sihirbaz: çalışma saatleri ------------------------------------------ */

/* --- Sihirbaz: onay & yayınla -------------------------------------------- */

@container (max-width:560px){}
@media(max-width:640px){
  /* Baslik satiri mobilde gizli; o yuzden HER ALAN kendi etiketini
     `data-lbl`'den basar. Etiketsiz iki sayi kutusu ("250" ve "30") sahada
     hangisi ne belli olmuyordu. */
  .s-page .wz-liste-basi{display:none}
  .s-page .wz-satirlik{grid-template-columns:1fr 1fr auto;gap:10px 12px;
    padding:14px;border:1px solid var(--s-line);border-radius:14px;
    background:#fff;align-items:end}
  .s-page .wz-satirlik + .wz-satirlik{margin-top:12px}
  .s-page .wz-satirlik .wz-s-alan{display:flex;flex-direction:column;gap:5px}
  .s-page .wz-satirlik .wz-s-alan::before{content:attr(data-lbl);
    font-size:12px;font-weight:600;color:var(--s-muted);letter-spacing:.01em}
  .s-page .wz-satirlik .wz-s-alan:first-of-type{grid-column:1 / -1}
  /* Gorunur kutu da 44px: `::after` dokunma alanini genisletiyor ama
     denetim ogesinin kendisi 40px kaliyordu (icindeki kutucuk 13px
     olculdu). Satir karti icinde yer var, buyutuyoruz. */
  .s-page .wz-satirlik .wz-sil{align-self:end;margin-bottom:1px;
    width:44px;height:44px}
}

/* ==========================================================================
   ÖZELLİKLER — /ozellikler/                          (referans: sayfa 7)
   Referanstan basılmayanlar: çok-lokasyonlu yönetim kartı (guardian'da
   yasaklı kavram), toplu kampanya kartı (kampanya modeli yok), tanıtım
   videosu butonu (video yok), süreli deneme vaadi (bizde süresiz ücretsiz
   paket var), kart başına detay linki (gidecek sayfa yok → ölü link).
   ========================================================================== */
.s-page .f-basi{max-width:640px;margin:0 auto 34px;text-align:center}
.s-page .f-basi-sol{margin-left:0;text-align:left}
.s-page .f-basi h2{margin-bottom:10px}
/* .s-sub'in DORT atasi vardi (.f-hero/.k-hero/.s-head/.s-split-intro),
   .f-basi listede yoktu: hakkimizda/ozellikler/nasil-calisir'da alt
   baslik soluk gri yerine tam siyah basiliyordu (olculdu). */
.s-page .f-basi .s-sub{color:var(--s-muted);font-size:16px;margin:12px 0 0}

.s-page .f-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.s-page .f-kart{background:#fff;border:1px solid var(--s-line);border-radius:var(--s-r-card);
  padding:24px;display:flex;flex-direction:column;gap:10px;transition:.15s}
.s-page .f-kart:hover{border-color:var(--s-line-strong);box-shadow:0 6px 22px rgba(0,0,0,.05)}
.s-page .f-kart h3{font-size:18px}
.s-page .f-kart p{font-size:14.5px;color:var(--s-muted);line-height:1.65}
.s-page .f-madde{list-style:none;display:flex;flex-direction:column;gap:7px;
  padding:12px 0 0;margin-top:auto;border-top:1px solid var(--s-line)}
.s-page .f-madde li{display:flex;align-items:flex-start;gap:8px;font-size:13.5px;line-height:1.5}
.s-page .f-madde .tb{width:16px;height:16px;color:var(--s-ok);flex:none;margin-top:2px}

.s-page .f-kazanc{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px}
.s-page .f-kazanc-i{display:grid;grid-template-columns:42px 1fr;grid-template-rows:auto auto;
  column-gap:13px;align-items:center}
.s-page .f-kazanc-ic{grid-row:1 / span 2;width:42px;height:42px;border-radius:11px;
  background:var(--s-ic-bg);color:var(--s-bordo-dark);
  display:flex;align-items:center;justify-content:center}
.s-page .f-kazanc-ic .tb{width:21px;height:21px}
.s-page .f-kazanc-i b{font-size:15px}
.s-page .f-kazanc-i span{font-size:13.5px;color:var(--s-muted);line-height:1.55}

.s-page .f-band{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:36px;align-items:center}
/* Koyu şerit tek kolon: hero'daki telefon görselinin aynısını sayfada ikinci
   kez basmak zayıftı. */
.s-page .f-band-tek{grid-template-columns:minmax(0,1fr);max-width:680px;text-align:center;
  justify-items:center}
.s-page .f-band h2{margin:14px 0 10px}
.s-page .f-band p{font-size:15.5px;line-height:1.7;margin-bottom:22px;opacity:.9}
.s-page .f-band-art{display:flex;justify-content:center}

.s-page .f-sss{display:flex;flex-direction:column;gap:10px}
/* <details>: JS olmadan da açılır. */
.s-page .f-soru{background:#fff;border:1px solid var(--s-line);border-radius:12px}
.s-page .f-soru summary{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:16px 18px;font-size:15px;font-weight:600;cursor:pointer;list-style:none}
.s-page .f-soru summary::-webkit-details-marker{display:none}
.s-page .f-soru summary .tb{width:18px;height:18px;color:var(--s-muted);flex:none;transition:.2s}
.s-page .f-soru[open]{border-color:var(--s-line-strong)}
.s-page .f-soru[open] summary{color:var(--s-bordo)}
.s-page .f-soru[open] summary .tb{transform:rotate(180deg);color:var(--s-bordo)}
.s-page .f-cevap{padding:0 18px 17px;font-size:14.5px;color:var(--s-muted);line-height:1.7}


@media(max-width:900px){
  /* .f-sss-in BURADAN AYRILDI: SSS artik .oz-sss-in ve esigi 1199
     (ana sayfa/hero ile ayni). .f-band kapsam disi, 900'de kaliyor. */
  .s-page .f-band{grid-template-columns:minmax(0,1fr)}
  .s-page .f-band-art{display:none}   /* koyu şeritte telefonu düşür */
}

/* ==========================================================================
   ÖZELLİKLER — SSS BÖLÜMÜ                                    (.oz-sss)
   TÜM kurallar `.oz-sss` kapsamında. `.f-soru`/`.f-sss` taban sınıfları
   /sss/ sayfasıyla PAYLAŞIMLI — onlara dokunulmuyor, üzerlerine bu kapsamda
   yazılıyor. Kapsam kalkarsa /sss/ akordeonu da değişir; guardian bunu
   mutasyonla kilitliyor.
   ========================================================================== */
.s-page .oz-basi{max-width:640px;margin:0 0 30px}
.s-page .oz-basi h2{margin:14px 0 0}
.s-page .oz-basi .s-sub{color:var(--s-muted);font-size:16px;margin:10px 0 0}

/* Kart genisligi OLCULEREK secildi: birincil butonun icerigi 203px
   istiyor. 250px kartta -3px ile SARIYOR, 260px'te 7px pay kaliyor.
   300px -> ~47px emniyet payi, sol kolon 820px. Sorularin hicbiri
   717px'e kadar iki satira kirilmiyor, yani sol kolon kisiti degil. */
.s-page .oz-sss-in{display:grid;grid-template-columns:minmax(0,1fr) 300px;
  gap:32px;align-items:start}

/* --- Akordeon: açık hâl --------------------------------------------------
   Açık item bordo TINT KULLANMIYOR — o renk destek kartına ait, ikisi
   karışmamalı. Ayrım: çok açık nötr zemin + belirginleşen bordo çerçeve. */
.s-page .oz-sss .f-soru[open]{background:var(--s-bg2);
  border-color:color-mix(in srgb, var(--s-bordo) 34%, transparent);
  box-shadow:var(--s-shadow)}
.s-page .oz-sss .f-soru summary{align-items:flex-start;padding:15px 18px}
/* İki satıra saran soruda chevron dikey MERKEZDE kalsın (flex-start ile
   yukarı yapışıyordu), metinle çakışmasın. */
.s-page .oz-sss .f-soru summary .tb{align-self:center;margin-left:4px}
.s-page .oz-sss .f-cevap{padding:0 46px 16px 18px;color:var(--s-muted)}

/* --- Destek kartı --------------------------------------------------------
   Akordeon DEĞİL: açılıp kapanmaz, tek bordo tint yüzey. */
.s-page .oz-kart{background:var(--s-tint);border-radius:var(--s-r-card);
  border:1px solid color-mix(in srgb, var(--s-bordo) 22%, transparent);
  box-shadow:var(--s-shadow);padding:24px;display:flex;flex-direction:column;
  gap:14px;align-items:flex-start}
.s-page .oz-kart-ic{width:46px;height:46px;border-radius:13px;background:#fff;
  color:var(--s-bordo);display:flex;align-items:center;justify-content:center;
  flex:none}
.s-page .oz-kart-ic .tb{width:23px;height:23px}
.s-page .oz-kart-m b{display:block;font-family:var(--s-serif);font-size:18px;
  line-height:1.3}
/* --s-muted tint uzerinde 4.26:1 (AA ALTI) — olculdu. Proje bunun icin
   zaten --s-muted-tint tanimlamis (tint 4.77 · beyaz 5.42). */
.s-page .oz-kart-m p{font-size:14.5px;color:var(--s-muted-tint);
  line-height:1.6;margin:8px 0 0}
.s-page .oz-kart-m em{font-style:normal;font-weight:700;color:var(--s-bordo)}
.s-page .oz-kart-btn{display:flex;flex-direction:column;gap:10px;width:100%}
.s-page .oz-kart-btn .s-btn{width:100%;min-height:44px;gap:8px}
.s-page .oz-kart-btn .tb{width:17px;height:17px}

/* Tablet: tek kolon, kart YATAY (ikon solda, metin ortada, butonlar sağda).
   Eşik 1199 — ana sayfa hero'su ve /ozellikler/ hero'suyla aynı. */
@media(max-width:1199px){
  .s-page .oz-sss-in{grid-template-columns:minmax(0,1fr);gap:26px}
  .s-page .oz-kart{flex-direction:row;align-items:center;gap:20px;padding:20px 22px}
  .s-page .oz-kart-m{flex:1}
  .s-page .oz-kart-btn{width:auto;flex:none;min-width:210px}
}
@media(max-width:767px){
  /* Mobil: dikey, butonlar alt alta tam genişlik. Sticky YOK. */
  .s-page .oz-kart{flex-direction:column;align-items:flex-start;padding:20px}
  .s-page .oz-kart-btn{width:100%;min-width:0}
}
@media(prefers-reduced-motion:reduce){
  .s-page .oz-sss .f-soru summary .tb{transition:none}
}

/* ==========================================================================
   NASIL ÇALIŞIR — /nasil-calisir/                    (referans: sayfa 8)
   Referanstan basılmayanlar: tanıtım videosu butonu (video yok), süreli
   deneme vaadi (guardian yasaklıyor; bizde süresiz ücretsiz paket var),
   "binlerce işletme" sosyal kanıtı (o sayı bizde YOK), laptop+telefon
   kompozisyonu (ana sayfa ve özelliklerde aynı görsel zaten var — bu
   sayfanın görseli altı adımın kendi maketleri).
   ========================================================================== */
.s-page .n-hero{padding-bottom:8px}
.s-page .n-hero-in{display:flex;flex-direction:column;align-items:center;
  text-align:center;max-width:760px}
.s-page .n-hero-in h1{margin:14px 0 12px}
.s-page .n-hero-cta{justify-content:center}

.s-page .n-adimlar{list-style:none;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:22px}
.s-page .n-adim{display:flex;flex-direction:column;gap:14px}
.s-page .n-adim-ust{display:flex;gap:13px;align-items:flex-start}
.s-page .n-no{flex:none;width:30px;height:30px;border-radius:50%;
  background:var(--s-bordo);color:#fff;display:flex;align-items:center;
  justify-content:center;font-size:14px;font-weight:700}
.s-page .n-adim h3{font-size:17px;margin-bottom:5px}
.s-page .n-adim p{font-size:14px;color:var(--s-muted);line-height:1.6}

/* Adım maketleri: GERÇEK ekranların sadeleştirilmiş çizimi. Uydurma
   istatistik yok — rakamlar örnek bir dükkanın makul değerleri. */
.s-page .n-maket{background:#fff;border:1px solid var(--s-line);
  border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:9px;
  margin-top:auto;font-size:13px}
.s-page .n-mk-satir{display:flex;flex-direction:column;gap:4px}
.s-page .n-mk-lbl{font-size:11.5px;color:var(--s-muted);font-weight:600}
.s-page .n-mk-input{border:1px solid var(--s-line);border-radius:8px;
  padding:9px 11px;background:var(--s-bg2,#FAFAF9);color:var(--s-ink)}
.s-page .n-mk-btn{align-self:stretch;text-align:center;background:var(--s-bordo);
  color:#fff;border-radius:8px;padding:10px;font-weight:600;font-size:13.5px}
.s-page .n-mk-hizmet{display:flex;align-items:center;gap:10px;
  border:1px solid var(--s-line);border-radius:8px;padding:9px 11px}
.s-page .n-mk-hizmet span{display:flex;align-items:center;gap:7px;flex:1;font-weight:500}
.s-page .n-mk-hizmet .tb{width:15px;height:15px;color:var(--s-bordo)}
.s-page .n-mk-hizmet i{font-style:normal;color:var(--s-muted);font-size:12px}
.s-page .n-mk-hizmet b{font-weight:700}
.s-page .n-mk-kontrol{display:flex;align-items:center;gap:8px;font-weight:500}
.s-page .n-mk-kontrol .tb{width:16px;height:16px;color:var(--s-ok)}
.s-page .n-mk-link{display:flex;align-items:center;gap:8px;background:var(--s-bg2,#FAFAF9);
  border:1px solid var(--s-line);border-radius:8px;padding:9px 11px;
  font-family:ui-monospace,Menlo,monospace;font-size:11.5px;color:var(--s-muted-tint)}
.s-page .n-mk-link .tb{width:15px;height:15px;color:var(--s-bordo)}
.s-page .n-mk-saatler{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.s-page .n-mk-saatler span{text-align:center;border:1px solid var(--s-line);
  border-radius:7px;padding:7px 0;font-weight:600;font-size:12.5px}
.s-page .n-mk-saatler .is-secili{background:var(--s-bordo);border-color:var(--s-bordo);color:#fff}
.s-page .n-mk-saatler .is-dolu{color:var(--s-muted);text-decoration:line-through;
  background:var(--s-tint-bg);border-color:transparent}
.s-page .n-mk-randevu{display:flex;align-items:center;gap:10px;
  border:1px solid var(--s-line);border-radius:8px;padding:9px 11px}
.s-page .n-mk-randevu i{font-style:normal;font-weight:700;font-size:12.5px}
.s-page .n-mk-randevu span{flex:1;color:var(--s-muted);font-size:12.5px}
.s-page .n-mk-randevu b{font-size:11.5px;padding:3px 9px;border-radius:999px;
  background:var(--s-tint-bg);color:var(--s-muted-tint)}
.s-page .n-mk-randevu b.is-ok{background:#E6F2EB;color:#1F6B4A}
.s-page .n-mk-kasa{display:flex;justify-content:space-between;align-items:baseline;
  border-top:1px solid var(--s-line);padding-top:10px}
.s-page .n-mk-kasa b{font-family:var(--s-serif);font-size:19px}

.s-page .n-band-cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}

/* Bant KISALDI. `.s-band` ve `.f-band` hakkimizda/blog/ozellikler ile
   PAYLASIMLI — onlara dokunulmuyor, bu sayfaya `.n-band` kapsami eklendi. */
.s-page .n-band{padding-block:clamp(34px,3.6vw,44px)}
.s-page .n-band .f-band h2{margin-top:0}
.s-page .n-band .f-band p{margin-bottom:18px}

/* Hero rozetleri: ortali hero'da tek sutun sola dayali durunca kayik
   gorunuyordu. */
.s-page .n-ticks{align-items:center;text-align:center}

/* Grup etiketi: KURULUM (1-3) ile SONRASI (4-6) ayrimi. Sayfa uc farkli
   adim sayisi soyluyordu; ayrim onu bitiriyor. */
.s-page .n-sec .n-grup{display:flex;align-items:center;gap:8px;margin:6px 0 16px;
  font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--s-bordo)}
.s-page .n-sec .n-adimlar + .n-grup{margin-top:34px;padding-top:26px;
  border-top:1px solid var(--s-line)}

/* Konum adimi: haritada isaretle sinyali. */
.s-page .n-mk-pin{display:flex;align-items:center;gap:8px;border:1px dashed
  var(--s-line-strong);border-radius:8px;padding:11px;color:var(--s-muted-tint)}
.s-page .n-mk-pin .tb{width:15px;height:15px;color:var(--s-bordo)}
/* Onay adimi: berber bir dugmeye BASMIYOR, durum rozeti goruyor. */
.s-page .n-mk-rozet{align-self:flex-start;background:var(--s-tint);
  color:var(--s-bordo);border-radius:99px;padding:6px 13px;font-size:12.5px;
  font-weight:700}

/* ==========================================================================
   YARDIM MERKEZİ — /sss/                             (referans: sayfa 9)
   Referanstan basılmayanlar: "Canlı Destek · 7/24 çevrimiçi" (canlı destek
   kanalı YOK, 7/24 değiliz), 3B soru işareti illüstrasyonu (öyle bir
   görselimiz yok), kategori kartlarının ayrı sayfalara gitmesi (o sayfalar
   yok → kartlar aynı listeyi süzüyor).
   ========================================================================== */
.s-page .y-hero{background:var(--s-bordo-dark);color:#fff;padding:52px 0 56px;
  position:relative;overflow:hidden}
.s-page .y-hero::after{content:'';position:absolute;right:-120px;top:-80px;
  width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.09),transparent 65%)}
.s-page .y-hero-in{display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:32px;align-items:center;position:relative;z-index:1}
.s-page .y-hero-txt{max-width:620px}
.s-page .y-rozet{display:inline-flex;align-items:center;gap:7px;
  border:1px solid rgba(255,255,255,.32);border-radius:999px;padding:5px 13px;
  font-size:12.5px;font-weight:600;letter-spacing:.02em}
.s-page .y-rozet .tb{width:15px;height:15px}
.s-page .y-hero h1{color:#fff;font-size:clamp(28px,3.4vw,40px);margin:16px 0 10px}
.s-page .y-hero p{color:rgba(255,255,255,.8);font-size:15.5px;line-height:1.65;max-width:46em}
.s-page .y-ara{display:flex;align-items:center;gap:10px;background:#fff;
  border-radius:12px;padding:13px 16px;margin-top:24px;max-width:520px}
.s-page .y-ara .tb{width:19px;height:19px;color:var(--s-muted);flex:none}
.s-page .y-ara input{flex:1;border:0;outline:none;font:inherit;font-size:15px;
  color:var(--s-ink);background:transparent;min-width:0}
.s-page .y-hero-sayi{display:flex;gap:14px}
.s-page .y-hero-sayi div{background:rgba(255,255,255,.1);border-radius:14px;
  padding:18px 22px;text-align:center;min-width:96px}
.s-page .y-hero-sayi b{display:block;font-family:var(--s-serif);font-size:30px;line-height:1}
.s-page .y-hero-sayi span{font-size:12.5px;color:rgba(255,255,255,.72)}

/* Kategori kartları — buton, çünkü sayfa içinde süzüyorlar */
.s-page .y-kats{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.s-page .y-kat{text-align:left;background:#fff;border:1px solid var(--s-line);
  border-radius:var(--s-r-card);padding:20px;cursor:pointer;font:inherit;
  display:flex;flex-direction:column;gap:6px;transition:.15s}
.s-page .y-kat:hover{border-color:var(--s-line-strong)}
.s-page .y-kat b{font-size:15.5px}
.s-page .y-kat i{font-style:normal;font-size:13px;color:var(--s-muted);line-height:1.55}
.s-page .y-kat-git{margin-top:8px;font-size:13px;font-weight:600;color:var(--s-bordo)}
.s-page .y-kat.is-on{border-color:var(--s-bordo);background:var(--s-tint)}
.s-page .y-kat .s-ic{margin-bottom:4px}

.s-page .y-liste-basi{display:flex;align-items:baseline;justify-content:space-between;
  gap:14px;margin-bottom:20px}
.s-page .y-sayac{font-size:13.5px;color:var(--s-muted);font-weight:600}
.s-page .y-bos{margin-top:18px;color:var(--s-muted);font-size:15px}
.s-page .y-bos a{color:var(--s-bordo);font-weight:600}

/* Destek şeridi — üç kanal da GERÇEK (settings.CONTACT_*) */
.s-page .y-destek{background:var(--s-tint-bg);border-radius:var(--s-r-card);
  padding:28px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:26px;align-items:center}
.s-page .y-destek-sol{display:flex;gap:16px;align-items:center}
.s-page .y-destek-ic{flex:none;width:56px;height:56px;border-radius:16px;background:#fff;
  color:var(--s-bordo);display:flex;align-items:center;justify-content:center}
.s-page .y-destek-ic .tb{width:27px;height:27px}
.s-page .y-destek h2{font-size:21px;margin-bottom:5px}
.s-page .y-destek p{font-size:14px;color:var(--s-muted);line-height:1.6}
.s-page .y-kanallar{display:flex;gap:12px;flex-wrap:wrap}
.s-page .y-kanal{display:flex;align-items:center;gap:11px;background:#fff;
  border:1px solid var(--s-line);border-radius:12px;padding:13px 16px;
  text-decoration:none;color:var(--s-ink);min-width:170px}
.s-page .y-kanal:hover{border-color:var(--s-bordo)}
.s-page .y-kanal b{display:block;font-size:14.5px}
.s-page .y-kanal i{font-style:normal;font-size:12.5px;color:var(--s-muted)}
.s-page .y-kanal-ic{flex:none;width:38px;height:38px;border-radius:10px;
  background:var(--s-ic-bg);color:var(--s-bordo-dark);
  display:flex;align-items:center;justify-content:center}
.s-page .y-kanal-ic.is-wa{background:#E4F7EC;color:var(--s-wa-ic)}
.s-page .y-kanal-ic .tb{width:19px;height:19px}

@media(max-width:900px){
  .s-page .y-hero-in,.s-page .y-destek{grid-template-columns:minmax(0,1fr)}
  .s-page .y-hero-sayi{justify-content:flex-start}
}

/* ==========================================================================
   BLOG — /blog/                                     (referans: sayfa 10)
   Referanstan basılmayanlar: bülten/abone ol formu (e-posta listesi sistemi
   YOK — adres toplayıp hiçbir şey göndermemek olurdu), kart üstündeki
   kaydet ikonu (kaydetme özelliği yok), yazar adı + avatarı (modelde yazar
   alanı yok, kişi uydurulmaz), "Popüler Yazılar" kenar listesi
   (görüntülenme sayacı yok — popülerlik uydurulamaz), sırala/görünüm
   değiştir kontrolleri (tek sıralama var: en yeni).
   KAPAKLAR: yazıların hiçbirinde görsel yok; stok fotoğraf yerine slug'dan
   türeyen sabit desen (Keşfet'teki cover_seed ile aynı yaklaşım).
   ========================================================================== */
.s-page .g-hero{padding-bottom:34px}
.s-page .g-hero-in{display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:32px;align-items:center}
.s-page .g-hero h1{margin:14px 0 12px}
.s-page .g-ara{display:flex;gap:10px;margin-top:24px;max-width:560px}
.s-page .g-ara-in{flex:1;display:flex;align-items:center;gap:10px;background:#fff;
  border:1px solid var(--s-line-strong);border-radius:var(--s-r-input);padding:0 14px;min-width:0}
.s-page .g-ara-in .tb{width:18px;height:18px;color:var(--s-muted);flex:none}
.s-page .g-ara-in input{flex:1;border:0;outline:none;font:inherit;font-size:15px;
  padding:12px 0;background:transparent;min-width:0}
.s-page .g-ara-in:focus-within{border-color:var(--s-bordo);box-shadow:0 0 0 1px var(--s-bordo)}
.s-page .g-hero-sayi{background:var(--s-tint-bg);border-radius:16px;padding:22px 26px;text-align:center}
.s-page .g-hero-sayi b{display:block;font-family:var(--s-serif);font-size:34px;line-height:1}
.s-page .g-hero-sayi span{font-size:13px;color:var(--s-muted)}

.s-page .g-cipler{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.s-page .g-cip{background:#fff;border:1px solid var(--s-line);border-radius:999px;
  padding:9px 16px;font-size:14px;font-weight:600;color:var(--s-muted-tint);text-decoration:none}
.s-page .g-cip:hover{border-color:var(--s-line-strong);color:var(--s-ink)}
.s-page .g-cip.is-on{background:var(--s-bordo);border-color:var(--s-bordo);color:#fff}
.s-page .g-sonuc{margin:-8px 0 20px;font-size:14.5px;color:var(--s-muted)}
.s-page .g-sonuc a{color:var(--s-bordo);font-weight:600}
.s-page .g-bos{color:var(--s-muted);font-size:15px;padding:24px 0}
.s-page .g-bos a{color:var(--s-bordo);font-weight:600}

/* Kapak deseni — görsel yerine tipografi + kategori tonu */
.s-page .g-kapak{position:relative;display:flex;align-items:center;justify-content:center;
  overflow:hidden;background:linear-gradient(135deg,var(--s-bordo),var(--s-bordo-dark))}
.s-page .g-kapak img{width:100%;height:100%;object-fit:cover}
.s-page .g-kapak-yazi{font-family:var(--s-serif);font-size:20px;color:#fff;opacity:.85;
  letter-spacing:.04em;text-transform:uppercase;padding:0 14px;text-align:center}
.s-page .g-kapak-0{background:linear-gradient(135deg,#6E1F2A,#3D0F17)}
.s-page .g-kapak-1{background:linear-gradient(135deg,#3D0F17,#6E1F2A)}
.s-page .g-kapak-2{background:linear-gradient(150deg,#7A2A33,#2E0B12)}
.s-page .g-kapak-3{background:linear-gradient(120deg,#5C1A23,#8A3A42)}
.s-page .g-kapak-4{background:linear-gradient(160deg,#2E0B12,#6E1F2A)}
.s-page .g-kapak-5{background:linear-gradient(135deg,#8A3A42,#3D0F17)}

/* Öne çıkan */
.s-page .g-one{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);
  gap:0;background:#fff;border:1px solid var(--s-line);border-radius:var(--s-r-card);
  overflow:hidden;text-decoration:none;color:var(--s-ink);margin-bottom:34px}
.s-page .g-one:hover{border-color:var(--s-line-strong);box-shadow:0 8px 26px rgba(0,0,0,.06)}
.s-page .g-one-kapak{min-height:280px}
.s-page .g-rozet{position:absolute;top:14px;left:14px;background:#fff;color:var(--s-bordo);
  border-radius:999px;padding:5px 12px;font-size:12px;font-weight:700}
.s-page .g-one-txt{display:flex;flex-direction:column;gap:11px;padding:30px;justify-content:center}
.s-page .g-one-txt b{font-family:var(--s-serif);font-size:26px;font-weight:700;line-height:1.25}
.s-page .g-ozet{font-size:15px;color:var(--s-muted);line-height:1.65}
.s-page .g-oku{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
  background:var(--s-bordo);color:#fff;border-radius:var(--s-r-btn);
  padding:11px 20px;font-size:14.5px;font-weight:600;margin-top:4px}
.s-page .g-oku .tb{width:16px;height:16px}

/* Izgara */
.s-page .g-basi h2{font-size:22px;margin-bottom:18px}
.s-page .g-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.s-page .g-kart{display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--s-line);border-radius:var(--s-r-card);overflow:hidden;
  text-decoration:none;color:var(--s-ink);transition:.15s}
.s-page .g-kart:hover{border-color:var(--s-line-strong);box-shadow:0 6px 22px rgba(0,0,0,.05)}
.s-page .g-kart .g-kapak{height:160px}
.s-page .g-kart-txt{display:flex;flex-direction:column;gap:8px;padding:16px}
.s-page .g-kart-txt b{font-size:16px;font-weight:700;line-height:1.35}
.s-page .g-kat{align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--s-bordo)}
.s-page .g-meta{font-size:12.5px;color:var(--s-muted);margin-top:auto}
.s-page .g-daha{display:flex;justify-content:center;margin-top:28px}

@media(max-width:900px){
  .s-page .g-hero-in{grid-template-columns:minmax(0,1fr)}
  .s-page .g-hero-sayi{justify-self:start;padding:16px 22px}
  .s-page .g-one{grid-template-columns:minmax(0,1fr)}
  .s-page .g-one-kapak{min-height:200px}
  .s-page .g-one-txt{padding:22px}
}
@media(max-width:560px){
  .s-page .g-ara{flex-direction:column}
  .s-page .g-ara .s-btn{width:100%}
}

/* ==========================================================================
   BLOG YAZISI — /blog/<slug>/                        (tasarım: bizim)
   Referans görseli yoktu; liste sayfasının diliyle kuruldu. Korunanlar:
   JSON-LD, kapak YOKSA og:image basmama, trend yazısında müşteri CTA'sı,
   ilgili yazıyı 2'den azsa gizleme.
   ========================================================================== */
.s-page .y2{padding:26px 0 60px}
.s-page .y2-iz{display:flex;align-items:center;gap:8px;font-size:13.5px;
  color:var(--s-muted);margin-bottom:20px}
.s-page .y2-iz a{color:var(--s-muted)}
.s-page .y2-iz a:hover{color:var(--s-bordo)}

.s-page .y2-bas{max-width:760px;margin-bottom:24px}
.s-page .y2-bas h1{font-size:clamp(28px,3.6vw,42px);line-height:1.18;margin:10px 0 14px}
.s-page .y2-ozet{font-size:17px;line-height:1.7;color:var(--s-muted);margin-bottom:16px}
.s-page .y2-meta{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:13.5px;color:var(--s-muted)}
.s-page .y2-meta span{display:inline-flex;align-items:center;gap:7px}
.s-page .y2-meta .tb{width:16px;height:16px;color:var(--s-bordo)}
.s-page .y2-kapak{height:260px;border-radius:var(--s-r-card);margin-bottom:34px}
.s-page .y2-kapak .g-kapak-yazi{font-size:26px}

/* Gövde + sağ sütun */
.s-page .y2-govde{display:grid;grid-template-columns:minmax(0,1fr) 260px;
  gap:44px;align-items:start}
/* Ölçü ~68 karakter: uzun satır okumayı yorar. */
.s-page .y2-yazi{max-width:68ch}
.s-page .y2-yazi p{font-size:17px;line-height:1.8;margin-bottom:20px;color:var(--s-ink)}
.s-page .y2-yazi h2{font-size:24px;line-height:1.3;margin:36px 0 14px;scroll-margin-top:84px}
.s-page .y2-yazi h2:first-child{margin-top:0}
.s-page .y2-yazi strong{font-weight:700;color:var(--s-bordo-dark)}
.s-page .y2-liste{list-style:none;padding:0;margin:0 0 20px;
  display:flex;flex-direction:column;gap:10px}
.s-page .y2-liste li{position:relative;padding-left:24px;font-size:17px;line-height:1.7}
.s-page .y2-liste li::before{content:'';position:absolute;left:6px;top:.62em;
  width:7px;height:7px;border-radius:50%;background:var(--s-bordo)}

.s-page .y2-yan{position:sticky;top:84px;display:flex;flex-direction:column;gap:14px}
.s-page .y2-kutu{background:#fff;border:1px solid var(--s-line);
  border-radius:var(--s-r-card);padding:18px}
.s-page .y2-kutu > b{display:block;font-size:14px;margin-bottom:12px}
.s-page .y2-toc{list-style:none;counter-reset:toc;padding:0;
  display:flex;flex-direction:column;gap:9px}
.s-page .y2-toc li{counter-increment:toc;display:flex;gap:9px;font-size:13.5px;line-height:1.5}
.s-page .y2-toc li::before{content:counter(toc);flex:none;width:20px;height:20px;
  border-radius:50%;background:var(--s-tint-bg);color:var(--s-muted-tint);
  font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.s-page .y2-toc a{color:var(--s-muted-tint);text-decoration:none}
.s-page .y2-toc a:hover{color:var(--s-bordo)}
.s-page .y2-pay{display:flex;align-items:center;gap:9px;width:100%;
  background:none;border:1px solid var(--s-line);border-radius:9px;padding:10px 13px;
  font:inherit;font-size:13.5px;font-weight:600;color:var(--s-ink);cursor:pointer;
  text-decoration:none;margin-bottom:8px}
.s-page .y2-pay:last-child{margin-bottom:0}
.s-page .y2-pay:hover{border-color:var(--s-bordo);color:var(--s-bordo)}
.s-page .y2-pay .tb{width:17px;height:17px}
.s-page .y2-pay.is-ok{border-color:var(--s-ok);color:var(--s-ok)}

/* Telefonda içindekiler: kapalı <details> — JS gerekmez */
.s-page .y2-icindekiler-m{display:none;background:var(--s-tint-bg);
  border-radius:12px;margin-bottom:26px}
.s-page .y2-icindekiler-m summary{display:flex;align-items:center;justify-content:space-between;
  padding:13px 16px;font-size:14.5px;font-weight:600;cursor:pointer;list-style:none}
.s-page .y2-icindekiler-m summary::-webkit-details-marker{display:none}
.s-page .y2-icindekiler-m summary .tb{width:17px;height:17px;color:var(--s-muted)}
.s-page .y2-icindekiler-m[open] summary .tb{transform:rotate(180deg)}
.s-page .y2-icindekiler-m ol{margin:0;padding:0 18px 16px 34px;
  display:flex;flex-direction:column;gap:8px;font-size:14px}
.s-page .y2-icindekiler-m a{color:var(--s-muted-tint)}

.s-page .y2-cta{background:var(--s-tint-bg);border-radius:var(--s-r-card);
  padding:34px;text-align:center;margin:48px 0 0}
.s-page .y2-cta h2{font-size:25px;margin-bottom:9px}
.s-page .y2-cta p{color:var(--s-muted);font-size:15.5px;margin-bottom:20px}
.s-page .y2-ilgili{margin-top:48px}

@media(max-width:1000px){
  .s-page .y2-govde{grid-template-columns:minmax(0,1fr)}
  .s-page .y2-yan{display:none}              /* içindekiler yukarı taşındı */
  .s-page .y2-icindekiler-m{display:block}
  .s-page .y2-yazi{max-width:none}
}
@media(max-width:560px){
  .s-page .y2-kapak{height:170px}
  .s-page .y2-cta{padding:24px 18px}
}

/* ==========================================================================
   HAKKIMIZDA — /hakkimizda/                          (tasarım: bizim)
   Kurucu hikâyesi, ekip kartları, kuruluş yılı, "binlerce salon", ofis
   adresi ve basın/yatırımcı bölümü BİLEREK YOK: hiçbirinin doğrulanabilir
   karşılığı yok. Sayfa sitede doğrulanabilen kararların üstüne kurulu.
   ========================================================================== */
.s-page .h2-hero{padding-bottom:34px}
.s-page .h2-hero-in{max-width:800px}
.s-page .h2-hero-in h1{margin:14px 0 14px}

.s-page .h2-iki{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:44px;align-items:start}
.s-page .h2-iki-sol h2{margin-bottom:14px}
.s-page .h2-iki-sol p{font-size:16px;line-height:1.75;color:var(--s-muted);margin-bottom:14px}
.s-page .h2-dert{list-style:none;padding:0;display:flex;flex-direction:column;gap:14px}
.s-page .h2-dert li{display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;
  column-gap:14px;align-items:center;background:#fff;border:1px solid var(--s-line);
  border-radius:var(--s-r-card);padding:16px 18px}
.s-page .h2-dert .s-ic{grid-row:1 / span 2}
.s-page .h2-dert b{font-size:15px}
.s-page .h2-dert span{font-size:13.5px;color:var(--s-muted);line-height:1.55}

.s-page .h2-ilke{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:18px}
.s-page .h2-ilke article{background:#fff;border:1px solid var(--s-line);
  border-radius:var(--s-r-card);padding:22px;display:flex;flex-direction:column;gap:9px}
.s-page .h2-ilke b{font-family:var(--s-serif);font-size:18px}
.s-page .h2-ilke p{font-size:14.5px;line-height:1.65;color:var(--s-muted)}
.s-page .h2-ilke a{margin-top:auto;font-size:13.5px;font-weight:600;color:var(--s-bordo)}

.s-page .h2-durum{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:40px;align-items:start}
.s-page .h2-durum h2{margin-bottom:12px}
.s-page .h2-durum > div p{color:var(--s-muted);font-size:15.5px;line-height:1.7}
.s-page .h2-durum ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:14px}
.s-page .h2-durum li{background:#fff;border:1px solid var(--s-line);border-radius:12px;
  padding:16px 18px;font-size:14.5px;line-height:1.65;color:var(--s-muted)}
.s-page .h2-dur{display:inline-block;margin-right:8px;font-size:11.5px;font-weight:700;
  padding:3px 10px;border-radius:999px;background:var(--s-tint-bg);color:var(--s-muted-tint)}
.s-page .h2-dur.is-ok{background:#E6F2EB;color:#1F6B4A}

@media(max-width:900px){
  .s-page .h2-iki,.s-page .h2-durum{grid-template-columns:minmax(0,1fr);gap:26px}
}


/* --- Dokunma hedefleri (mobil) --------------------------------------------
   375px taramasında Keşfet'te 47 öğe 44px altındaydı. Öğeleri büyütmek
   düzeni bozardı; ::after ile GÖRÜNMEZ dokunma alanı genişletiliyor.
   Bileşen bazında: aynı üç dört bileşen tüm sayfalardaki ihlallerin
   çoğunu üretiyordu. */
@media(max-width:860px){
  /* Küçük ikon düğmeleri: kalp, paylaş, sekme okları */
  .k-fav,.d2-ico,.wz-sil,.y2-pay{position:relative}
  .k-fav::after,.d2-ico::after,.wz-sil::after{content:'';position:absolute;
    top:50%;left:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
  /* Form denetimleri: select ve metin girdileri */
  .k-select,#d-search,#d-district,#d-sort,.wz-alan input,.wz-alan select,
  .g-ara-in input,.y-ara input{min-height:44px}
  /* Onay kutusu + etiketi: kutu 18px kalır, ETİKET satırı 44px olur */
  .k-toggle,.wz-onay,.b-kvkk{min-height:44px;align-items:center}
  .k-toggle input,.wz-onay input{width:22px;height:22px}
  /* Footer bağlantı listeleri: her sayfada 12 öğe, ~20px. Gezinme
     bağlantısı, gövde metni değil — dokunma hedefi olmalı. */
  .w-footer-grid a{min-height:44px;display:flex;align-items:center}
  .w-brand{min-height:44px;display:inline-flex;align-items:center}
  /* 40-42px'de kalan denetimler: sınırın hemen altındaydılar. */
  .k-railbtn,.k-view button,.wz-yardim .s-btn,.d2-tab,
  .f-switch button,.k-name,.k-cta a{min-height:44px}
  /* Kırıntı yolu ikincil gezinme: 24px (WCAG 2.5.8 asgarisi). */
  /* .d2-iz OLU SECICIYDI: dukkan detayda gercek sinif .d2-crumb. Kirinti
     baglantilari 22px'te kalmisti (2.5.8 asgarisi 24px). */
  .d2-crumb a,.y2-iz a,.g-cip{min-height:24px;display:inline-flex;align-items:center}
  /* Hakkimizda ilke kartlarinin sonundaki tek satirlik CTA baglantilari:
     cumle ici degil, bagimsiz gezinme — 22px'ti. */
  .h2-ilke article a{min-height:24px;display:inline-flex;align-items:center}
  /* Bilgi kartindaki telefon: etiketli bir deger degil, aranabilir bir
     denetim — 17px'ti. */
  .d2-info-c a[href^="tel:"],.c-footer a[href^="tel:"]{min-height:44px;
    display:inline-flex;align-items:center}
  /* Metin bağlantıları: çip, "Temizle", sayfalama */
  .k-clear,.g-cip,.k-pager a,.k-pager span,.y-kat,.f-soru summary{min-height:44px;
    display:inline-flex;align-items:center}
}

/* --- Küçük etiketler: 11px -> 12px ----------------------------------------
   Gövde metnine dokunulmadı; yalnız 11-11.5px'lik ETİKETLER. Telefonda
   11px gerçekten zor okunuyor. */
.s-page .g-kat,.s-page .wz-y-ad,.s-page .s-badge,.s-page .k-badge,
.s-page .ra-rozet,.s-page .h2-dur,.s-page .tk-count-i i{font-size:12px}

/* --- "Dükkanın yayında" ekranı (kayıt sonu) --------------------------------
   ÖNCE ÖDÜL, SONRA İSTEK. Berber üçüncü adımın düğmesine bastığında ilk
   gördüğü şey elle tutulur bir kazanım: linki. Uygulama çağrısı en altta. */
.s-page .yy-sar{padding:40px 0 72px}
.s-page .yy-in{max-width:720px}
.s-page .yy-odul{background:#fff;border:1px solid var(--s-line);border-radius:20px;
  padding:36px 28px;text-align:center;box-shadow:0 18px 44px rgba(20,12,10,.07)}
.s-page .yy-tik{width:60px;height:60px;border-radius:50%;background:var(--s-green,#1f7a4d);
  color:#fff;display:inline-flex;align-items:center;justify-content:center;margin-bottom:18px}
.s-page .yy-tik .tb{width:30px;height:30px;stroke-width:2.4}
.s-page .yy-odul h1{font-size:clamp(26px,4.2vw,36px);line-height:1.18}
.s-page .yy-odul .s-sub{margin:12px auto 0;max-width:34em}
.s-page .yy-link{display:flex;gap:10px;margin:26px 0 12px}
.s-page .yy-adres{flex:1 1 auto;min-width:0;border:1px solid var(--s-line);
  border-radius:12px;padding:12px 14px;background:var(--s-cream,#faf7f3);
  text-align:left;overflow:hidden}
.s-page .yy-adres-host{display:block;font-size:12.5px;color:var(--s-muted);
  line-height:1.2}
.s-page .yy-adres b{display:block;font-size:17px;color:var(--s-ink);
  line-height:1.25;overflow-wrap:anywhere}
/* Kopyalamanin execCommand yedegi bu input'tan secim yapiyor; ekranda yer
   kaplamamali ama `display:none` olursa secilemez. */
.s-page .yy-adres-gizli{position:absolute;width:1px;height:1px;opacity:0;
  pointer-events:none;left:-9999px}
.s-page .yy-link .s-btn{flex:none}
.s-page .yy-link .s-btn.is-tamam{background:var(--s-green,#1f7a4d);border-color:transparent}
.s-page .yy-wa{display:inline-flex;align-items:center;gap:8px;min-height:44px;
  color:var(--s-bordo);font-weight:600;font-size:15px}
.s-page .yy-ipucu{margin-top:14px;color:var(--s-muted);font-size:14px}

.s-page .yy-inceleme{display:flex;gap:14px;align-items:flex-start;margin-top:22px;
  background:var(--s-cream,#faf7f3);border:1px solid var(--s-line);border-radius:16px;
  padding:18px 20px}
.s-page .yy-inceleme-ik{width:38px;height:38px;border-radius:10px;background:#fff;
  border:1px solid var(--s-line);display:flex;align-items:center;justify-content:center;
  color:var(--s-bordo);flex:none}
.s-page .yy-inceleme b{display:block;font-size:15.5px;margin-bottom:4px}
.s-page .yy-inceleme p{color:var(--s-muted);font-size:14.5px}

.s-page .yy-onizleme{margin-top:34px}
.s-page .yy-onizleme h2,.s-page .yy-app h2{font-size:20px;margin-bottom:14px}
.s-page .yy-kart{max-width:340px}

.s-page .yy-app{margin-top:34px;border-top:1px solid var(--s-line);padding-top:26px}
.s-page .yy-app-in{display:flex;gap:20px;align-items:center}
.s-page .yy-qr{flex:none;background:#fff;padding:8px;border:1px solid var(--s-line);
  border-radius:12px;line-height:0}
.s-page .yy-qr svg{width:108px;height:108px}
.s-page .yy-app-metin{color:var(--s-muted);font-size:14.5px}
.s-page .yy-app-btn{margin-top:12px}

/* --- Sihirbaz haritası (2. adım) ------------------------------------------
   Adres GEOCODE EDİLMİYOR; berber dükkanını kendisi işaretliyor. */
.s-page .wz-harita{height:260px;border-radius:14px;border:1px solid var(--s-line);
  overflow:hidden;margin-top:10px;background:var(--s-cream,#faf7f3)}
.s-page .wz-harita-alt{display:flex;align-items:center;gap:12px;margin-top:10px;
  flex-wrap:wrap}
.s-page .wz-konum-bul{flex:none;min-height:44px}
.s-page .wz-harita-durum{margin:0;font-size:13.5px;color:var(--s-muted)}
.s-page .wz-harita-durum.is-tamam{color:var(--s-green,#1f7a4d);font-weight:600}

@media(max-width:640px){
  .s-page .yy-odul{padding:28px 18px;border-radius:16px}
  .s-page .yy-link{flex-direction:column}
  .s-page .yy-link .s-btn{width:100%;justify-content:center}
  .s-page .yy-app-in{flex-direction:column;align-items:flex-start}
  .s-page .wz-harita{height:220px}
}


/* App cagrisi ASIL CIKIS: kayit bitince berberin web'de yapacagi baska bir
   sey yok. Ikincil bir dipnot gibi degil, bolum gibi dursun. */
.s-page .yy-app.is-asil{margin-top:30px;background:var(--s-ink,#1a1a1a);
  color:#fff;border-radius:20px;padding:26px 24px;border-top:0}
.s-page .yy-app.is-asil h2{color:#fff;font-size:22px;margin-bottom:8px}
.s-page .yy-app.is-asil .yy-app-lede{color:rgba(255,255,255,.78);font-size:15px;
  max-width:36em;margin-bottom:16px}
.s-page .yy-app.is-asil .yy-app-metin{color:rgba(255,255,255,.72)}
.s-page .yy-app.is-asil .s-badge{background:rgba(255,255,255,.14);color:#fff}
.s-page .yy-app.is-asil .yy-qr{background:#fff;border-color:transparent}


/* Sihirbaz: "Hizmet ekle" — açık düğme. Hazır boş satır YOK (boş satıra
   fiyat yazıp ad yazmayınca "ad zorunlu" hatası alınıyordu). */
.s-page .wz-ekle{display:inline-flex;align-items:center;gap:8px;min-height:44px;
  margin-top:12px;padding:0 16px;border:1px dashed var(--s-line);
  border-radius:12px;background:transparent;color:var(--s-bordo);
  font-family:var(--s-font);font-size:14.5px;font-weight:600;cursor:pointer}
.s-page .wz-ekle:hover{border-color:var(--s-bordo);background:var(--s-cream,#faf7f3)}
.s-page .wz-ekle .tb{width:16px;height:16px}

/* Hizmet adımı uyarısı (son hizmet kaldırılamaz). */
.s-page .wz-hizmet-uyari{margin-top:10px;color:var(--s-err,#b3261e);
  font-size:13.5px;font-weight:600}

/* ==========================================================================
   HERO ÜRÜN GÖRSELİ — "iki taraf, tek akış"            (ANA SAYFA)
   Müşteri 14:30'u seçer → bildirim → işletmenin takviminde belirir.
   Tümü gerçek DOM; renkler yalnız token'dan.
   ========================================================================== */
.s-page .hf{position:relative;width:100%;display:flex;flex-direction:column;
  align-items:center;gap:10px}
.s-page .hf-sahne{position:relative;display:flex;align-items:center;
  justify-content:center;width:100%}

/* Arkada çok hafif halo — dev renkli blob değil. */
.s-page .hf-sahne::before{content:'';position:absolute;top:50%;left:50%;
  width:min(560px,100%);height:min(560px,100%);transform:translate(-50%,-50%);
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,var(--s-tint) 0%,transparent 68%);opacity:.6}

/* --- Cihaz kabukları --- */
.s-page .hf-phone,.s-page .hf-tablet{position:relative;z-index:1;
  background:var(--s-ink);border-radius:26px;padding:6px;
  box-shadow:0 24px 54px -18px rgba(0,0,0,.34),0 2px 8px rgba(0,0,0,.08)}
.s-page .hf-phone{width:246px;flex:none;z-index:2;
  transform:perspective(1400px) rotateY(6deg)}
.s-page .hf-phone-notch{position:absolute;top:6px;left:50%;transform:translateX(-50%);
  width:34%;height:15px;background:var(--s-ink);border-radius:0 0 10px 10px;z-index:2}
.s-page .hf-tablet{width:382px;flex:none;margin-left:26px;border-radius:22px;
  z-index:1;transform:perspective(1400px) rotateY(-6deg)}

.s-page .hf-ekran{background:var(--s-bg);border-radius:21px;overflow:hidden;
  padding:16px 12px 12px;display:flex;flex-direction:column;gap:6px;
  font-family:var(--s-font)}
.s-page .hf-ekran-t{border-radius:17px;padding:12px 11px;gap:4px}

/* --- Müşteri ekranı --- */
.s-page .hf-fotolar{display:flex;gap:4px;margin-top:4px}
.s-page .hf-fotolar i{flex:1;height:34px;border-radius:7px;background:var(--s-tint)}
.s-page .hf-salon{display:flex;flex-direction:column;gap:1px;margin-top:6px}
.s-page .hf-salon b{font-family:var(--s-serif);font-size:15.5px;color:var(--s-ink)}
.s-page .hf-salon span{font-size:10px;color:var(--s-muted)}
.s-page .hf-puan{color:var(--s-bordo) !important;font-weight:700}
.s-page .hf-etiket{font-size:9px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--s-muted);margin-top:6px}
.s-page .hf-hizmet{display:flex;align-items:center;gap:6px;padding:6px 8px;
  border:1px solid var(--s-line);border-radius:9px;font-size:11px;color:var(--s-ink)}
.s-page .hf-hizmet span{flex:1;font-weight:600}
.s-page .hf-hizmet i{font-style:normal;color:var(--s-muted);font-size:10px}
.s-page .hf-hizmet b{color:var(--s-bordo);font-size:11.5px}
.s-page .hf-cipler{display:flex;flex-wrap:wrap;gap:4px}
.s-page .hf-cipler span{padding:4px 7px;border:1px solid var(--s-line);
  border-radius:99px;font-size:10.5px;color:var(--s-ink)}
.s-page .hf-cipler .is-secili{background:var(--s-bordo);border-color:var(--s-bordo);
  color:#fff;font-weight:700}
.s-page .hf-onay{margin-top:8px;background:var(--s-bordo);color:#fff;
  border-radius:9px;padding:10px;text-align:center;font-size:12px;font-weight:700}

/* --- İşletme ekranı --- */
.s-page .hf-t-bas{display:flex;align-items:baseline;justify-content:space-between;
  padding-bottom:6px;border-bottom:1px solid var(--s-line);margin-bottom:3px}
.s-page .hf-t-bas b{font-family:var(--s-serif);font-size:15.5px}
.s-page .hf-t-bas span{font-size:10px;color:var(--s-muted)}
.s-page .hf-sat{display:grid;grid-template-columns:46px 1fr 1.3fr auto;
  align-items:center;gap:8px;padding:8px 9px;border-radius:8px;font-size:11px}
.s-page .hf-sat i{font-style:normal;font-weight:700;color:var(--s-ink)}
.s-page .hf-sat span{color:var(--s-ink)}
.s-page .hf-sat em{font-style:normal;color:var(--s-muted);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.s-page .hf-sat u{text-decoration:none;font-size:9.5px;color:var(--s-muted);
  white-space:nowrap}
.s-page .hf-sat.is-yeni{background:var(--s-tint);
  box-shadow:inset 0 0 0 1px var(--s-bordo)}
.s-page .hf-sat.is-yeni i,.s-page .hf-sat.is-yeni span{color:var(--s-bordo)}
.s-page .hf-rozet{background:var(--s-bordo);color:#fff;border-radius:99px;
  padding:2px 7px;font-weight:700}

/* --- Akış çizgisi + bildirim --- */
.s-page .hf-akis{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:96px;height:40px;color:var(--s-bordo);opacity:.55;z-index:3;
  pointer-events:none}
.s-page .hf-cizgi{width:100%;height:100%}
.s-page .hf-nokta{position:absolute;top:50%;left:0;width:6px;height:6px;
  margin-top:-3px;border-radius:50%;background:var(--s-bordo)}
.s-page .hf-bildirim{position:absolute;left:50%;top:10%;z-index:4;
  display:flex;align-items:center;gap:8px;background:var(--s-bg);
  border:1px solid var(--s-line);border-radius:12px;padding:9px 12px;
  box-shadow:0 14px 34px rgba(20,12,10,.14);transform:translateX(-50%)}
.s-page .hf-bildirim-ic{width:26px;height:26px;border-radius:8px;flex:none;
  background:var(--s-tint);color:var(--s-bordo);display:flex;
  align-items:center;justify-content:center}
.s-page .hf-bildirim-ic svg{width:14px;height:14px}
.s-page .hf-bildirim-m{display:flex;flex-direction:column;line-height:1.35}
.s-page .hf-bildirim-m b{font-size:11px;color:var(--s-ink)}
.s-page .hf-bildirim-m i{font-style:normal;font-size:9.5px;color:var(--s-muted)}
.s-page .hf-mikro{font-size:11.5px;color:var(--s-muted)}

/* --- Animasyon: YALNIZ transform/opacity (layout tetiklemez) --- */
@keyframes hf-suzul{0%,100%{transform:translateX(-50%) translateY(0)}
  50%{transform:translateX(-50%) translateY(-4px)}}
@keyframes hf-akit{0%{transform:translateX(0);opacity:0}
  12%{opacity:1}88%{opacity:1}100%{transform:translateX(90px);opacity:0}}
.s-page .hf-bildirim{animation:hf-suzul 4.5s ease-in-out infinite}
.s-page .hf-nokta{animation:hf-akit 3.6s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){
  /* Yavaşlatma DEĞİL, durdurma. */
  .s-page .hf-bildirim,.s-page .hf-nokta{animation:none}
  .s-page .hf-nokta{opacity:1}
}

/* --- Hero yardımcıları --- */
.s-page .s-badge-dot{width:6px;height:6px;border-radius:50%;
  background:var(--s-bordo);flex:none;margin-right:2px}
.s-page .s-hero-kat{margin-top:12px;font-size:12.5px;letter-spacing:.02em;
  color:var(--s-muted)}
.s-page .s-hero-not{margin-top:10px;font-size:12.5px;color:var(--s-muted)}
.s-page .s-ticks{opacity:.85}

/* Fiyat altındaki iki ikincil eylem: EŞİT ağırlık, yan yana. */
.s-page .s-plans-more{display:flex;justify-content:center;gap:14px;margin-top:26px}
.s-page .s-plans-more .s-btn{min-width:220px;justify-content:center}
.s-page .s-plans-more svg{width:17px;height:17px}
@media(max-width:640px){
  .s-page .s-plans-more{flex-direction:column}
  .s-page .s-plans-more .s-btn{min-width:0;width:100%}
}

/* EK 1 — OKUNABILIRLIK. Sag kolon 538px'ken cihaz ici metin 9-9.5px'e
   dusuyordu (olculdu) ve okunmuyordu. Cozum sirasi:
     1) grid 40/60  -> sag kolon 538 -> 686px
     2) sag kenardan ~48px tasma (container bozulmadan, overflow gorunur)
   Cihazlari kucultmek YOK: okunabilirlik butunlukten once gelir.

   KAPSAM `.s-hero-akis`: `/ozellikler/` de ayni `.s-hero-in`i kullaniyor ve
   o sayfaya dokunulmayacak. */
/* .72fr (42/58) denendi: sol kolon 490px'e dustu, H1 UC satira kirildi ve
   iki CTA alt alta indi (olculdu). Okunabilirlik icin sag kolon buyudu ama
   solu bozdu; .86fr (~46/54) ikisini de tutuyor. */
.s-page .s-hero-akis .s-hero-in{grid-template-columns:.86fr 1fr;gap:40px;
  overflow:visible}
.s-page .s-hero-akis .s-hero-art{overflow:visible}
/* min-width:0 SART: sahne kolondan genis (calc(100% + 44px)) ve bu, 1fr
   izinin min-content genisligini buyutup SOL kolonu eziyordu — sol 508
   yerine 394px'e dustu, H1 dort satira kirildi (olculdu). */
.s-page .s-hero-akis .s-hero-in > *{min-width:0}
/* Sag kenardan tasma YALNIZ genis ekranda: 1100px'te sayfaya 33px yatay
   tasma yapiyordu (olculdu). */
@media(min-width:1200px){
  .s-page .s-hero-akis .hf-sahne{width:calc(100% + 44px)}
}

/* --- Hero akışı: dar ekranlar --------------------------------------------
   Masaüstü kompozisyonunu küçültüp sıkıştırmıyoruz; AYRI bir dikey kurgu:
   telefon ↓ bildirim ↓ işletme. Çizgi de dikey oluyor. Ana hikâye korunuyor:
   14:30 seçildi → yeni randevu → 14:30 işletme ekranında belirdi. */
/* 1200px ALTI: iki kolon dar kalıyor (sağ kolon 566px, cihazlar 651px).
   ÖNCE bindirmeyi artırmayı denedim (EK 1 · çözüm 3) ve YANLIŞTI: tabletin
   SAAT SÜTUNU telefonun arkasında kayboldu — oysa hikâyenin bağı tam orada
   ("14:30 seçildi → 14:30 işletme ekranında"). Cihazları küçültmek de yasak.
   Çözüm: hero TEK KOLONA iniyor, kompozisyon YATAY kalıyor ve tam genişliği
   kullanıyor. UI hiçbir yerde kaybolmuyor. */
@media(max-width:1199px){
  .s-page .s-hero-akis .s-hero-in{grid-template-columns:1fr;gap:36px}
  .s-page .s-hero-akis .hf-sahne{width:100%}
}
@media(max-width:860px){
  .s-page .hf-sahne{flex-direction:column;gap:0}
  .s-page .hf-sahne::before{width:min(420px,92%);height:min(420px,92%)}
  .s-page .hf-phone{transform:none;width:236px}
  .s-page .hf-tablet{transform:none;width:min(404px,94%);margin-left:0;margin-top:14px}
  /* Çizgi DİKEY: aynı öğe, 90° döndürülmüş kutu. */
  .s-page .hf-akis{position:relative;top:auto;left:auto;transform:none;
    width:40px;height:74px;margin:2px 0}
  .s-page .hf-cizgi{transform:rotate(90deg) scaleX(1.85);transform-origin:center}
  .s-page .hf-nokta{left:50%;top:0;margin:0 0 0 -3px}
  @keyframes hf-akit{0%{transform:translateY(0);opacity:0}
    12%{opacity:1}88%{opacity:1}100%{transform:translateY(70px);opacity:0}}
  /* Bildirim akışın İÇİNDE, iki cihazın arasında. */
  .s-page .hf-bildirim{position:relative;left:auto;top:auto;transform:none;
    margin:0 auto}
  @keyframes hf-suzul{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
}
@media(max-width:420px){
  .s-page .hf-phone{width:214px}
  .s-page .hf-tablet{width:100%}
  .s-page .hf-sat{grid-template-columns:40px 1fr auto;gap:6px}
  /* Dar ekranda hizmet adı sütunu düşüyor; hikâye saat + isim + durumda. */
  .s-page .hf-sat em{display:none}
}

/* --- Etiket: `.s-plan-tag`in ("En popüler") konumsuz varyantı -------------
   Aynı geometri (yuvarlak, küçük, uppercase) ama NÖTR: bordo, çalışan
   özelliklerin aksanı; "Yakında" öne çıkmamalı, yanında durmalı. */
.s-page .s-tag{display:inline-flex;align-items:center;font-size:10.5px;
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 9px;border-radius:100px;vertical-align:middle;margin-left:8px}
.s-page .s-tag--yakinda{background:var(--s-bg2);color:var(--s-muted-tint);
  border:1px solid var(--s-line)}

/* ==========================================================================
   ÖZELLİKLER HERO GÖRSELİ — "bütün iş tek panelde"      (/ozellikler/)
   Merkezde işletme paneli, etrafında üç iş: kasa · ciro · adisyon.
   Akış çizgisi ve bildirim kartı YOK — o ana sayfanın dili.
   TÜM kurallar `.s-hero-panel` kapsamında; ana sayfaya sızmaz.
   ANİMASYON YOK: iki sayfa birbirinden ayrışsın.
   ========================================================================== */
/* Kolon orani sag kolon lehine kaydirildi (.82 -> .72): panel kompozisyonu
   dar kolonda ya kartlari icerige bindiriyor ya da yaziyi kirpiyordu.
   Sol kolon 620px okunabilirlik kuralini hala tasiyor. */
.s-page .s-hero-panel .s-hero-in{grid-template-columns:.72fr 1fr;gap:36px;
  align-items:center}
/* min-width:0 ŞART: sahne kolondan geniş; yoksa 1fr izinin min-content'i
   sol kolonu ezer (ana sayfada aynı hata ölçülmüştü). */
.s-page .s-hero-panel .s-hero-in > *{min-width:0}
.s-page .s-hero-panel{padding-bottom:clamp(28px,3.4vw,44px)}
.s-page .s-hero-panel .s-hero-art{overflow:visible}


.s-page .op{position:relative;width:100%;display:flex;justify-content:center}
/* Kartlar tabletin YANINDA duruyor, ustunde degil: ilk iki denemede
   "Bugun" logoyu, "Bu hafta" basligi, "Adisyon" sekme cubugunu
   kapatiyordu (cakisma programatik olculdu). Kartlar daraltildi ve
   sahne kolondan tasiyor — okunabilirlik butunlukten once gelir. */
/* flex:none SART — .op bir flex kapsayici; sahne kolondan genis olmak
   isterken varsayilan flex-shrink onu kolona geri sikistiriyordu
   (tablet 540 yerine 466px olculdu). */
.s-page .op-sahne{position:relative;flex:none;width:100%;max-width:708px;
  padding:34px 0 30px}
/* Arka plan: çok hafif krem halo. Kavis/blob/gradient YOK. */
.s-page .op-sahne::before{content:'';position:absolute;top:50%;left:50%;
  width:min(600px,104%);height:min(600px,104%);transform:translate(-50%,-50%);
  border-radius:50%;background:radial-gradient(circle,var(--s-tint) 0%,transparent 70%);
  opacity:.55;pointer-events:none}

/* --- Tablet --- */
.s-page .op-tablet{position:relative;z-index:2;width:76%;margin:0 auto;
  background:color-mix(in srgb, var(--s-ink) 76%, var(--s-muted));
  border-radius:20px;padding:5px;
  box-shadow:0 26px 58px -22px rgba(0,0,0,.3),0 2px 8px rgba(0,0,0,.07)}
.s-page .op-ekran{background:var(--s-bg);border-radius:16px;overflow:hidden;
  padding:14px 28px 0;font-family:var(--s-font);color:var(--s-ink)}

.s-page .op-ust{display:flex;align-items:center;justify-content:space-between}
.s-page .op-marka{display:inline-flex;align-items:center;gap:6px;
  font-family:var(--s-serif);font-weight:700;font-size:14px}
.s-page .op-ust-sag{display:flex;align-items:center;gap:12px;color:var(--s-muted)}
.s-page .op-ik{width:15px;height:15px}
.s-page .op-ik-sm{width:12px;height:12px}
.s-page .op-zil{position:relative;display:inline-flex}
.s-page .op-zil i{position:absolute;top:-1px;right:-1px;width:5px;height:5px;
  border-radius:50%;background:var(--s-bordo)}
.s-page .op-hesap{display:inline-flex;align-items:center;gap:6px;font-size:11px;
  color:var(--s-ink);background:var(--s-bg2);border:1px solid var(--s-line);
  border-radius:99px;padding:3px 8px 3px 3px}
.s-page .op-hesap em{width:18px;height:18px;border-radius:50%;flex:none;
  background:var(--s-tint);color:var(--s-bordo);font-style:normal;
  font-weight:700;font-size:9.5px;display:flex;align-items:center;
  justify-content:center}

.s-page .op-baslik{font-family:var(--s-serif);font-size:19px;font-weight:700;
  margin:12px 0 10px}
.s-page .op-baslik span{font-family:var(--s-font);font-size:12px;
  font-weight:400;color:var(--s-muted)}

.s-page .op-serit{display:flex;align-items:center;gap:6px;margin-bottom:12px}
.s-page .op-ok{width:24px;height:24px;flex:none;border:1px solid var(--s-line);
  border-radius:8px;display:flex;align-items:center;justify-content:center;
  color:var(--s-muted)}
.s-page .op-ok svg{width:13px;height:13px}
.s-page .op-cip{padding:5px 11px;border:1px solid var(--s-line);border-radius:99px;
  font-size:11.5px;color:var(--s-ink);white-space:nowrap}
.s-page .op-cip.is-secili{background:var(--s-bordo);border-color:var(--s-bordo);
  color:#fff;font-weight:700}

/* --- Randevu listesi --- */
.s-page .op-liste{display:flex;flex-direction:column;gap:7px}
.s-page .op-rnd{display:grid;
  grid-template-columns:44px 24px minmax(64px,1fr) minmax(96px,1.35fr) 42px auto;
  align-items:center;gap:9px;padding:9px 11px;border:1px solid var(--s-line);
  border-radius:11px;font-size:11.5px;background:var(--s-bg)}
.s-page .op-rnd i{font-style:normal;font-weight:700}
.s-page .op-rnd em{width:24px;height:24px;border-radius:50%;font-style:normal;
  font-size:9px;font-weight:700;background:var(--s-tint);color:var(--s-bordo);
  display:flex;align-items:center;justify-content:center}
.s-page .op-rnd b{font-weight:600;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.s-page .op-rnd span{color:var(--s-muted-tint);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.s-page .op-rnd u{text-decoration:none;color:var(--s-muted-tint);font-size:10.5px}
/* 12:00 satırı vurgulu: açık bordo tint + ince bordo kenar. */
.s-page .op-rnd.is-simdi{background:var(--s-tint);border-color:var(--s-bordo)}
.s-page .op-rnd.is-simdi i,.s-page .op-rnd.is-simdi b{color:var(--s-bordo)}

/* Durum rozetleri DÜŞÜK DOYGUNLUK: bordo tek baskın aksan kalsın. */
.s-page .op-d{text-decoration:none;font-size:10px;font-weight:600;
  border-radius:99px;padding:4px 9px;white-space:nowrap}
.s-page .op-d-ok{background:#EEF2EE;color:#4A6152}
.s-page .op-d-simdi{background:#fff;color:var(--s-bordo);
  box-shadow:inset 0 0 0 1px var(--s-bordo)}
.s-page .op-d-onay{background:#EEF0F3;color:#5A6472}
.s-page .op-d-bek{background:#F6F0E7;color:#7A6642}

/* --- Sekme çubuğu --- */
/* Sag ic boslugu: sekme cubugu TAM GENISLIKTE (zemin ve ust cizgi
   oyle dogru gorunuyor) ama Adisyon karti sag alt kosede duruyor.
   Sekmeler 34px sola cekilince kart cubugun ZEMININE biniyor,
   ETIKETINE degil. ≤1024'te kart gizli, bosluk geri aliniyor. */
.s-page .op-sekme{display:grid;grid-template-columns:repeat(5,1fr);
  margin:12px -28px 0;padding:9px 34px 9px 4px;
  border-top:1px solid var(--s-line);background:var(--s-bg)}
.s-page .op-sekme span{display:flex;flex-direction:column;align-items:center;
  gap:3px;font-size:9.5px;color:var(--s-muted);position:relative}
.s-page .op-sekme svg{width:17px;height:17px}
.s-page .op-sekme .is-secili{color:var(--s-bordo);font-weight:700}
.s-page .op-sekme-rozet i{position:absolute;top:-2px;right:50%;
  margin-right:-14px;width:6px;height:6px;border-radius:50%;
  background:var(--s-bordo)}

/* --- Floating kartlar --- */
.s-page .op-kart{position:absolute;z-index:3;background:var(--s-bg);
  border:1px solid var(--s-line);border-radius:14px;padding:12px 14px;
  box-shadow:0 16px 38px rgba(20,12,10,.13);font-size:11px;width:152px}
.s-page .op-kart-bas{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.s-page .op-kart-bas b{font-size:12.5px}
.s-page .op-kart-ic{width:26px;height:26px;border-radius:8px;flex:none;
  background:var(--s-tint);color:var(--s-bordo);display:flex;
  align-items:center;justify-content:center}
.s-page .op-kart-ic svg{width:14px;height:14px}
.s-page .op-kart-ok{margin-left:auto;color:var(--s-muted)}
.s-page .op-sat{display:flex;justify-content:space-between;align-items:baseline;
  gap:10px;padding:3px 0;color:var(--s-muted-tint)}
.s-page .op-sat i{font-style:normal;color:var(--s-ink)}
.s-page .op-sat-top{border-top:1px solid var(--s-line);margin-top:5px;
  padding-top:7px;color:var(--s-ink);font-weight:600}
.s-page .op-sat-top b{font-size:14px}

/* Kart, tablete en fazla ~30px giriyor; ekranin 28px yan boslugu o seridi
   bos birakiyor, yani icerik ORTULMUYOR. */
.s-page .op-kart-kasa{top:5%;left:-42px}
.s-page .op-kart-ciro{top:1%;right:-52px;width:160px}
/* Sekme cubugu tam genislikte (negatif margin), 28px koruma serdi orada
   yok — kart dikeyde YUKARI kaydirilarak cubugun ustunde kaliyor. */
.s-page .op-kart-adisyon{bottom:4%;right:-52px;width:160px}

.s-page .op-ciro b{font-size:20px;font-family:var(--s-serif)}
.s-page .op-ciro span{display:block;font-size:9.5px;color:var(--s-muted);
  line-height:1.35;margin-top:2px}
.s-page .op-ciro i{font-style:normal;color:#4A6152;font-weight:700;
  display:block}
.s-page .op-cubuk{display:flex;align-items:flex-end;gap:5px;height:42px;
  margin-top:10px}
.s-page .op-cubuk span{flex:1;border-radius:3px;background:var(--s-tint)}
.s-page .op-cubuk .is-vurgu{background:var(--s-bordo)}
.s-page .op-gun{display:flex;gap:5px;margin-top:5px}
.s-page .op-gun span{flex:1;text-align:center;font-size:8.5px;
  color:var(--s-muted)}

.s-page .op-ad-kim{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.s-page .op-ad-kim em{width:26px;height:26px;border-radius:50%;flex:none;
  font-style:normal;font-size:9.5px;font-weight:700;background:var(--s-tint);
  color:var(--s-bordo);display:flex;align-items:center;justify-content:center}
.s-page .op-ad-kim span{display:flex;flex-direction:column;font-size:9.5px;
  color:var(--s-muted);line-height:1.35}
.s-page .op-ad-kim b{font-size:11.5px;color:var(--s-ink)}

/* --- Özellikler hero'su: dar ekranlar ------------------------------------
   `transform:scale()` ile küçültme YOK. İçerik azalır, okunabilirlik korunur.
   Sıra: önce Adisyon gizlenir, sonra Ciro, en sonda cihaz telefona döner. */
/* Esik ANA SAYFA ile ayni: 1199. 1200-1279 bandinda kompozisyon sayfadan
   28px tasiyordu; cozum esigi kaydirmak DEGIL, kompozisyonu o bantta
   sola kaydirmak (asagida). Boylece iki hero ayni kirilma noktasinda
   tek kolona iniyor. */
@media(min-width:1200px) and (max-width:1319px){
  .s-page .s-hero-panel .op-sahne{right:34px}
}
@media(max-width:1199px){
  /* Ana sayfada da ölçülen çözüm: iki kolon dar kalınca tek kolona in,
     kompozisyon tam genişliği kullansın. */
  .s-page .s-hero-panel .s-hero-in{grid-template-columns:1fr;gap:34px}
  .s-page .op-sahne{max-width:680px;margin:0 auto}
  /* Tek kolonda sahne genisligi sabit; tablet daralinca kenar payi buyur,
     kartlar icerige degil cerceveye biner. */
  .s-page .op-tablet{width:76%}
  .s-page .op-kart-kasa{left:-40px}
  .s-page .op-kart-ciro{right:-46px}
  .s-page .op-kart-adisyon{right:-52px}
}
@media(max-width:1024px){
  /* Adisyon gizlenir (sıradaki ilk kart), diğer ikisi kalır. */
  .s-page .op-kart-adisyon{display:none}
  .s-page .op-sekme{padding-right:4px}
  .s-page .op-sahne{padding-bottom:14px}
}
@media(max-width:860px){
  /* Yalnız "Bugün" kartı kalır. */
  .s-page .op-kart-ciro{display:none}
}
@media(max-width:767px){
  /* TELEFON mockup'ı: işletme paneli zaten bir mobil uygulama; 340px'e
     tablet sıkıştırmak hem okunmaz hem yanlış temsil. Dikey akış:
     Bugün kartı ↓ telefon. */
  .s-page .op-sahne{display:flex;flex-direction:column;align-items:center;
    gap:16px;padding:0}
  .s-page .op-kart-kasa{position:static;width:100%;max-width:300px}
  .s-page .op-tablet{width:100%;max-width:320px;border-radius:30px;padding:8px}
  .s-page .op-ekran{border-radius:24px;padding:22px 11px 0}
  /* Çentik: cihazın telefon olduğunu tek çizgide söyler. */
  .s-page .op-tablet::before{content:'';position:absolute;top:8px;left:50%;
    transform:translateX(-50%);width:34%;height:15px;background:var(--s-ink);
    border-radius:0 0 10px 12px;z-index:2}
  .s-page .op-ust-sag .op-hesap,.s-page .op-ok{display:none}
  .s-page .op-baslik{font-size:17px}
  .s-page .op-baslik span{display:block;margin-top:2px}
  /* Şerit kısalır; son çipler taşmasın. */
  .s-page .op-cip-son{display:none}
  /* Dört randevu: 09:00 · 11:00 · 12:00 (vurgulu) · 14:30. */
  .s-page .op-rnd-alt{display:none}
  /* Süre çıkar, DURUM ROZETİ KALIR — daha çok şey anlatıyor. */
  .s-page .op-rnd{grid-template-columns:40px 22px 1fr auto;gap:8px;
    padding:9px}
  .s-page .op-rnd span,.s-page .op-rnd u{display:none}
  .s-page .op-sekme{margin:12px -11px 0}
  .s-page .op-sekme span{font-size:8.5px}
}