/**
 * Yıldız Randevu, ön yüz randevu formu biçemi.
 *
 * DOĞRULUK KAYNAĞI: templates/randevu-formu.php ve assets/js/randevu-formu.js.
 * Burada uydurulmuş tek bir sınıf adı yoktur; her seçicinin işaretlemede bir
 * karşılığı, işaretlemedeki her sınıfın burada bir kuralı vardır.
 *
 * SÖZLEŞME (hangi sınıf ne işe yarar)
 *   .yildiz-randevu            kök sarmalayıcı, bütün değişkenler burada tanımlı
 *     .yildiz-cetvel           adım GÖSTERGESİ (ol)
 *       .yildiz-cetvel-adim    gösterge çipi (li). .acik ve .tamam durumlarını
 *                              JS verir, aria-current="step" sunucudan da gelir
 *       .yildiz-cetvel-no      çipteki numara
 *       .yildiz-cetvel-ad      çipteki adım adı
 *     .yildiz-form             form etiketi
 *       .yildiz-hp             honeypot, ekran dışı
 *       .yildiz-adim           adım BÖLÜMÜ (section). Gösterge DEĞİLDİR.
 *         .yildiz-adim-basi    bölüm başlığı sarmalayıcı (header)
 *         .yildiz-adim-sayac   "Adım 1 / 5"
 *         .yildiz-adim-baslik  bölüm başlığı (h3, tabindex="-1", odak hedefi)
 *         .yildiz-adim-dugmeler  Geri / Devam / Onayla satırı
 *       .yildiz-secim          radyo grubunu saran fieldset
 *       .yildiz-hizmet-grubu   hizmet kategorisi kutusu
 *       .yildiz-paket-grubu    paketler kutusu (aynı kutunun paket sürümü)
 *       .yildiz-grup-ad        kategori başlığı (h4)
 *       .yildiz-hizmet-listesi / .yildiz-personel-listesi   seçenek listeleri (ul)
 *       .yildiz-secenek        tek seçenek kartı (li)
 *       .yildiz-paket-secenek  o kartın paket sürümü
 *       .yildiz-paket-icerik   pakete dahil hizmetlerin adları
 *       .yildiz-secenek-eski   karttaki çizili liste fiyatı (s)
 *       .yildiz-radyo          seçenek radyosu (input)
 *       .yildiz-etiket         seçenek etiketi (label)
 *       .yildiz-hizmet-ad / -sure / -fiyat, .yildiz-personel-ad / -not
 *       .yildiz-sabit-secim    kısa kodla sabitlenmiş hizmet/personel satırı (p)
 *       .yildiz-sabit-etiket   o satırdaki "Hizmet:" ön eki
 *       .yildiz-gun-gezinme    takvim şeridi gezinmesi
 *       .yildiz-gun-geri / .yildiz-gun-ileri / .yildiz-gun-araligi
 *       .yildiz-gunler         gün düğmelerinin kabı (JS doldurur)
 *       .yildiz-gun            gün düğmesi (JS). .dolu = seçilemez, .secili = açık
 *       .yildiz-gun-ad / .yildiz-gun-sayi   gün düğmesinin iki satırı (JS)
 *       .yildiz-durum          slot durum metni (canlı bölge, role="status")
 *       .yildiz-yukleniyor     durum metnine JS'in eklediği bekleme sınıfı
 *       .yildiz-slotlar        saat düğmelerinin kabı (JS doldurur)
 *       .yildiz-slot           saat düğmesi (JS). aria-pressed="true" = seçili
 *       .yildiz-noscript       JavaScript kapalıyken görünen uyarı
 *       .yildiz-alan           form alanı sarmalayıcı
 *       .yildiz-alan-etiket    alan etiketi (label)
 *       .yildiz-yardim         alan altı yardım metni
 *       .yildiz-zorunlu        etiketteki yıldız
 *       .yildiz-onay           KVKK onay kutusu satırı (.yildiz-alan ile birlikte)
 *       .yildiz-kvkk-metin     açılır KVKK kutusu (details)
 *       .yildiz-kvkk-govde     o kutunun içeriği
 *       .yildiz-ozet           onay özeti (dl)
 *       .yildiz-ozet-satir     özet satırı (dt + dd)
 *       .yildiz-plan           zincir planı kutusu, açılışta hidden (JS doldurur)
 *       .yildiz-plan-baslik / .yildiz-plan-liste / .yildiz-plan-toplam
 *       .yildiz-plan-satir     tek adım (li). JS kurar
 *       .yildiz-plan-saat / .yildiz-plan-hizmet / .yildiz-plan-personel
 *       .yildiz-dugme          ortak düğme tabanı
 *       .yildiz-geri / .yildiz-ileri / .yildiz-gonder   düğme türleri
 *       .yildiz-hata           form hata bölgesi (canlı bölge, role="alert")
 *     .yildiz-sonuc            başarı kutusu, açılışta hidden
 *       .yildiz-sonuc-baslik / -ozet / -iptal / -telefon
 *     .yildiz-gizli            görsel olarak gizli, ekran okuyucuya açık metin
 *
 * TEMA UYUMU: her salon Elementor ile başka bir tema kurar. Hiçbir renk sabit
 * kodlanmaz; değişkenler Elementor global renklerinden devralınır, Elementor
 * yoksa nötr varsayılana düşer. Yazı tipi SEÇİLMEZ; tek istisna
 * --yildiz-vurgu-yazi ve o da temanın kendi başlık yazı tipini ödünç alır,
 * Elementor yoksa mirasa düşer.
 * Nötr yüzeyler ve çizgiler currentColor'dan türetilir: açık temada koyu, koyu
 * temada açık bir tonla aynı kural iki tarafta da okunur kalır. Kart yüzeyi
 * ise VURGU renginden türetilir (--yildiz-yuzey): nötr gri hiçbir temaya ait
 * olmaz, vurgunun düşük yoğunluklu karışımı temanın kendi ailesinden bir
 * yüzey verir.
 *
 * KAPSAM: bütün seçiciler .yildiz-randevu kökü altındadır, böylece tema ile
 * karşılıklı sızıntı olmaz. !important yalnız tek bir kuralda kullanılır,
 * gerekçesi o kuralın yanında yazılıdır.
 *
 * RENK DEĞİŞTİRME: salon kendi rengini vermek isterse Elementor > Özel CSS'e
 *   body .yildiz-randevu { --yildiz-ana: #c9a227; --yildiz-ana-yazi: #1a1a1a; }
 * yazması yeter. body öneki sıralamadan bağımsız kazanmayı garantiler.
 *
 * @package YildizRandevu
 */

/* --------------------------------------------------------------- DEĞİŞKENLER */

/*
 * Değişkenler :root'a değil köke yazılır: aynı sayfada birden çok form olabilir
 * ve tema, :root üzerinde bizim adlarımızla çakışabilecek bir şey tanımlamış
 * olabilir. Kökte tanımlamak kapsamı forma hapseder.
 */
.yildiz-randevu {
	/* Ana vurgu rengi. Elementor kiti varsa onun birincil rengi kullanılır. */
	--yildiz-ana: var(--e-global-color-primary, #1f6feb);

	/*
	 * Ana rengin ÜSTÜNDE okunacak yazı rengi. Burada gerçek bir kontrast riski
	 * var: --yildiz-ana temanın birincil rengidir ve açık bir sarı, bej ya da
	 * pastel ton olabilir; o zeminde beyaz yazı okunmaz.
	 * Çözüm üç katmanlı:
	 *   1) Varsayılan beyaz, koyu vurgu renklerinin çoğunda doğru sonuçtur.
	 *   2) contrast-color() destekleyen tarayıcıda kararı tarayıcıya bırakırız
	 *      (aşağıdaki @supports bloğu); beyaz mı siyah mı olacağını ana rengin
	 *      parlaklığına bakarak o seçer.
	 *   3) Desteklemeyen tarayıcıda dolgulu düğme ve seçili slot yalnız yazı
	 *      rengine güvenmez: kenarlık ve dış halka ile de ayrışır, yani kontrast
	 *      zayıf kalsa bile "seçili" bilgisi kaybolmaz.
	 * Salon isterse tek satırla ezebilir (dosya başındaki nota bakınız).
	 */

	/*
	 * DOLGULU DÜĞMENİN ZEMİNİ VURGU RENGİNİN BİR TIK KOYUSU.
	 *
	 * Kitin kendi düğmesi #A67355 üstünde beyaz yazı kullanıyor ve o eşleşme
	 * 4.03:1, yani AA'nın altında. Tarayıcı contrast-color() ile karar
	 * verdiğinde ham vurgu renginde SİYAHI seçiyordu (5.19:1); erişilebilirlik
	 * açısından doğru ama sayfanın geri kalanındaki beyaz yazılı kahve
	 * düğmelerin yanında yamalı duruyordu.
	 *
	 * Zemini sistem metin rengine doğru %15 koyultmak ikisini birden çözüyor.
	 * Ölçüldü: #A67355 -> #8D6248, beyaz yazı 5.29:1 (kitin kendi 4.03'ünden
	 * iyi), siyah yazı 3.97:1. Yani contrast-color artık BEYAZI seçiyor ve
	 * sonuç hem kitin görünümüne uyuyor hem AA'yı geçiyor.
	 *
	 * CanvasText sistem rengi: açık temada siyah, koyu temada beyaz. Yani
	 * koyu temada düğme koyulaşmaz, AÇILIR; iki tarafta da zemin ile yazı
	 * arasındaki mesafe büyür.
	 */
	--yildiz-ana-dolgu: color-mix(in srgb, var(--yildiz-ana) 85%, CanvasText);

	--yildiz-ana-yazi: #fff;

	/* Metin rengi temadan gelir; gelmiyorsa miras alınan renk korunur. */
	--yildiz-metin: var(--e-global-color-text, currentColor);

	/*
	 * Kök zemin şeffaftır: form temanın bölüm arka planının üstünde durur,
	 * kendi rengini dayatmaz. Salon kart görünümü isterse burayı ezer.
	 */
	--yildiz-zemin: transparent;

	/*
	 * Yumuşak yüzey ve çizgi currentColor'dan türetilir. NEDEN: sabit bir gri
	 * koyu temada kaybolur, açık temada kirli durur. Metin renginin düşük
	 * yoğunluklu karışımı her iki temada da aynı algısal ağırlığı verir.
	 */
	--yildiz-yumusak: color-mix(in srgb, currentColor 7%, transparent);
	--yildiz-cizgi: color-mix(in srgb, currentColor 22%, transparent);
	--yildiz-soluk: color-mix(in srgb, currentColor 68%, transparent);

	/*
	 * KART YÜZEYİ VURGU RENGİNDEN TÜRETİLİR.
	 *
	 * Gerekçesi kisa-kodlar.css dosyasında uzun uzun yazılı; özeti: nötr gri
	 * bir yüzey hiçbir temaya ait olmaz, vurgu renginin düşük yoğunluklu
	 * karışımı ise temanın kendi ailesinden bir yüzey üretir. Ölçüldü:
	 * #A67355 vurgu renginin %15 karışımı beyaz üzerinde #F2EAE5 veriyor,
	 * kitin kendi krem zemini #F3EBE6. İki değişken de kısa kod dosyasıyla
	 * AYNI adı ve AYNI ifadeyi taşır; salon tek bir renk seçtiğinde form ile
	 * hizmet listesi aynı yüzeyi almalı.
	 */
	--yildiz-yuzey: color-mix(in srgb, var(--yildiz-ana) 15%, transparent);
	--yildiz-yuzey-hafif: color-mix(in srgb, var(--yildiz-ana) 7%, transparent);

	/*
	 * Fiyat ve saat gibi vurgu sayıları için başlık yazı tipi. Yeni bir yazı
	 * tipi SEÇİLMİYOR, temanın kendi başlık yazı tipi ödünç alınıyor;
	 * Elementor yoksa `inherit`e düşer ve hiçbir şey değişmez.
	 */
	/*
	 * SAYILARIN YAZI TİPİ METİN YAZISIDIR.
	 *
	 * Kitin BİRİNCİL (başlık) yazısına bağlıydı ve o çoğu kitte yüksek
	 * kontrastlı bir serif; ölçüldü, fiyat 16 pikselde Cormorant Garamond
	 * olarak çiziliyor ve rakamların ince çizgileri kayboluyordu. Formda
	 * fiyat, müşterinin hizmet seçerken baktığı tek sayı.
	 * kisa-kodlar.css'te de aynı karar verildi; ikisi ayrışmamalı.
	 */
	--yildiz-vurgu-yazi: var(--e-global-typography-text-font-family, var(--e-global-typography-accent-font-family, inherit));

	--yildiz-radius: 1rem;
	--yildiz-radius-kucuk: 0.625rem;

	/* Eylem düğmeleri, tek satırlık girdiler ve saat seçicileri hap biçiminde.
	   Gün düğmesi iki satırlı olduğu için bu ölçeğin dışında kalır. */
	--yildiz-hap: 999px;

	/*
	 * Durum renkleri de temaya doğru bükülür: temel ton korunur ama metin
	 * rengine karıştırılır, böylece koyu temada açılır, açık temada koyulaşır.
	 */
	--yildiz-basari: color-mix(in srgb, #12a150 70%, currentColor);
	--yildiz-hata: color-mix(in srgb, #d93036 72%, currentColor);
}

/*
 * contrast-color() varsa ana renk üstündeki yazıyı tarayıcı seçsin. Yoksa bu
 * blok hiç uygulanmaz ve yukarıdaki beyaz varsayılan yürürlükte kalır.
 */
@supports (color: contrast-color(#fff)) {
	.yildiz-randevu {
		--yildiz-ana-yazi: contrast-color(var(--yildiz-ana-dolgu));
	}
}

/*
 * color-mix() desteklenmiyorsa (2023 öncesi tarayıcılar) karışım içeren
 * değişkenler hesaplama anında geçersiz olur ve renk büsbütün kaybolurdu.
 * Özel özelliklerde çift bildirim hilesi çalışmadığı için yedek değerleri
 * ayrı bir @supports not bloğunda veriyoruz. Seçilen griler yarı ton olduğu
 * için hem açık hem koyu zeminde iş görür.
 */
@supports not (color: color-mix(in srgb, currentColor 50%, transparent)) {
	.yildiz-randevu {
		--yildiz-yumusak: rgba(127, 127, 127, 0.12);
		--yildiz-cizgi: rgba(127, 127, 127, 0.4);
		--yildiz-soluk: rgba(127, 127, 127, 1);
		--yildiz-basari: #157f3c;
		--yildiz-hata: #d0342c;

		/* Koyultma yapılamıyorsa ham vurgu rengi kullanılır. Bu tarayıcıda
		   contrast-color() de yok, yani yazı beyazda kalır; dolgulu düğme
		   ayrıca kenarlık ve dış halka taşıdığı için "seçili" bilgisi
		   kontrast zayıflasa bile kaybolmaz. */
		--yildiz-ana-dolgu: var(--yildiz-ana);

		/* Yüzey vurgu renginden türetilemiyorsa nötr griye düşer; şeffafa
		   düşseydi kart ile sayfa ayırt edilemezdi. */
		--yildiz-yuzey: rgba(127, 127, 127, 0.1);
		--yildiz-yuzey-hafif: rgba(127, 127, 127, 0.05);
	}
}

/* ---------------------------------------------------------------- KÖK VE TEMEL */

.yildiz-randevu {
	display: grid;
	gap: 1.25rem;
	/* Yazı tipi temadan gelir, biçem dosyası hiçbir aile dayatmaz. */
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--yildiz-metin);
	background: var(--yildiz-zemin);
	text-align: start;
}

/*
 * Kutu modeli tek yerden sabitlenir: tema * { box-sizing: content-box } gibi
 * bir kural yazmışsa dolgulu kartlar ızgaradan taşardı.
 */
.yildiz-randevu,
.yildiz-randevu *,
.yildiz-randevu *::before,
.yildiz-randevu *::after {
	box-sizing: border-box;
}

/*
 * TEK !important BURADADIR VE GEREKÇESİ ŞUDUR:
 * [hidden] yalnız tarayıcının kendi biçem dosyasında tanımlıdır, herhangi bir
 * yazar kuralı onu ezer. Bu formda gizlenen öğelerin çoğuna (adım bölümleri,
 * cetvel çipleri, seçenek satırları, form ve sonuç kutusu) biz zaten display
 * veriyoruz; !important olmasaydı JS bir adımı gizlediğinde adım ekranda kalır
 * ve beş adım birden görünürdü. Tema da aynı şekilde ezebiliyor. Bu yüzden
 * gizleme kuralı tartışmasız kazanmak zorunda.
 */
.yildiz-randevu [hidden] {
	display: none !important;
}

/*
 * Form denetimleri yazı tipini miras almaz, tarayıcı kendi ailesini dayatır.
 * Temayla aynı görünmeleri için miras elle kurulur.
 */
.yildiz-randevu input,
.yildiz-randevu textarea,
.yildiz-randevu button {
	font: inherit;
	color: inherit;
}

/*
 * Odak halkası HER ZAMAN görünür. outline hiçbir yerde kaldırılmaz; klavye
 * kullanıcısı formun neresinde olduğunu göremezse form kullanılamaz.
 */
/* ------------------------------------------------------- TEMA ÇARPIŞMASI */

/*
 * ELEMENTOR TEMA BİÇEMİ BİZİM BAĞLANTILARIMIZI DA BOYUYOR.
 *
 * Elementor'un kit biçemi `.elementor-kit-N a` gibi kurallar basıyor.
 * Ölçüldü: bir güzellik salonu kiti kurulu sayfada başarı kutusundaki
 * "Randevumu görüntüle ya da iptal et" bağlantısı ile telefon numarası
 * 48 PİKSEL çıkıyordu, çünkü kitin genel bağlantı tipografisi başlık
 * ölçüsünde. Randevu alan müşterinin gördüğü son ekran bu.
 *
 * Bu kurallar sınıfla yakalanamaz: bağlantıların kendi sınıfı yok, sarmalayıcı
 * (.yildiz-sonuc-iptal) taşıyor. Kural (0,1,1) ile kitinkiyle eşit özgüllükte;
 * biçem dosyamız kit CSS'inden sonra yüklendiği için eşitlikte kazanıyor.
 * Sıra ölçüldü: elementor-post-<kit> 10., yildiz-randevu-form 12. sırada.
 *
 * Yalnız DEVRALINAN ölçüler sıfırlanır; renk temadan gelmeye devam eder.
 */
.yildiz-randevu a {
	font-size: inherit;
	line-height: inherit;
	letter-spacing: normal;
	text-transform: none;
}

/*
 * DÜĞMELER ÜÇ DEĞİŞKENLE BOYANIR, DOĞRUDAN DEĞİL.
 *
 * Kitin bastığı kural şu (ölçüldü, post-292.css):
 *   .elementor-kit-N button        { background: primary; color: secondary;
 *                                    padding: 15px 30px; border-radius: 10px; }
 *   .elementor-kit-N button:hover  { background: secondary; color: primary; }
 * Yani gün ve saat düğmelerimiz BEYAZ YAZI + SAYDAM ZEMİN oluyordu: müşteri
 * müsait günleri hiç göremiyordu. Fare üstünde ise düğme beyaza dönüyordu.
 *
 * Özgüllük tek başına çözmüyor: kitin `button:hover` kuralı (0,2,1) ve bizim
 * bileşen kurallarımız (0,2,0), yani DURAĞAN durumu kazansak da FARE ÜSTÜNÜ
 * kaybediyorduk. Her bileşene ayrı bir :hover kuralı yazmak da kırılgan;
 * biri unutulunca arıza yalnız fare üstünde, yalnız kit kuruluyken çıkar.
 *
 * Çözüm boyamayı TEK yere toplamak: burada tanımlanan üç değişken hem durağan
 * hem fare üstü / odak durumunda okunur. Bileşenler artık `background` ya da
 * `color` YAZMAZ, yalnız bu değişkenleri değiştirir. Özel özellikler kendi
 * başına basamaklandığı için bileşenin (0,2,0) tanımı buradaki (0,1,1)
 * tanımı ezer ve aşağıdaki boyama onu okur. Kit hiçbir durumda araya giremez.
 */
.yildiz-randevu button {
	--yildiz-dugme-zemin: transparent;
	--yildiz-dugme-yazi: var(--yildiz-metin);
	--yildiz-dugme-kenar: transparent;

	padding: 0;
	border: 1px solid var(--yildiz-dugme-kenar);
	border-radius: 0;
	background: var(--yildiz-dugme-zemin);
	color: var(--yildiz-dugme-yazi);
	font-size: inherit;
	line-height: inherit;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
}

/*
 * Aynı boyama fare üstü ve odakta TEKRARLANIR. Tekrar gereksiz görünüyor ama
 * kitin `button:hover` kuralı (0,2,1) özgüllüğünde ve yalnız eşit özgüllükte
 * bir kuralla susturulabiliyor. Blok erken duruyor: bileşenlerin kendi
 * :hover kuralları da (0,2,1) ve sonra geldikleri için değişkeni onlar
 * belirliyor.
 */
.yildiz-randevu button:hover,
.yildiz-randevu button:focus {
	border-color: var(--yildiz-dugme-kenar);
	background: var(--yildiz-dugme-zemin);
	color: var(--yildiz-dugme-yazi);
}

.yildiz-randevu :focus-visible {
	outline: 2px solid var(--yildiz-ana);
	outline-offset: 2px;
}

/* Ekran okuyucuya açık, göze kapalı metin (legend, gün düğmesi açıklaması). */
.yildiz-randevu .yildiz-gizli {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/*
 * Honeypot. display:none KULLANILMAZ: bazı botlar display:none alanları atlar,
 * asıl istediğimiz ise botun burayı doldurması. Şablon aynı gizlemeyi satır içi
 * de yazar (biçem dosyası yüklenmezse alan görünür kalmasın diye); buradaki
 * kural o niyeti biçem tarafında da sabitler.
 */
.yildiz-randevu .yildiz-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ------------------------------------------------------------ ADIM GÖSTERGESİ */

/*
 * DİKKAT: adım göstergesi BURASIDIR (.yildiz-cetvel > .yildiz-cetvel-adim).
 * Adım bölümleri .yildiz-adim sınıfını taşır ve onlara display verilmesi
 * gizlemeyi bozar; ikisi karıştırılmamalı.
 */
.yildiz-randevu .yildiz-cetvel {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.yildiz-randevu .yildiz-cetvel-adim {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2rem;
	padding: 0.25rem 0.75rem 0.25rem 0.25rem;
	border: 1px solid var(--yildiz-cizgi);
	border-radius: 999px;
	font-size: 0.8125rem;
	color: var(--yildiz-soluk);
}

.yildiz-randevu .yildiz-cetvel-no {
	display: grid;
	place-items: center;
	flex: none;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background: var(--yildiz-yumusak);
	font-size: 0.75rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.yildiz-randevu .yildiz-cetvel-ad {
	white-space: nowrap;
}

/*
 * Açık adım hem .acik sınıfıyla hem aria-current ile yakalanır: sunucu ilk
 * adıma yalnız aria-current basar, sınıfı JS ekler. İkisi de aynı görünsün.
 */
.yildiz-randevu .yildiz-cetvel-adim.acik,
.yildiz-randevu .yildiz-cetvel-adim[aria-current="step"] {
	border-color: transparent;
	/*
	 * Açık adım dolgulu. Yalnız kenarlıkla işaretlendiğinde çip, tamamlanmış
	 * ve bekleyen çiplerden bir piksel farkla ayrılıyordu; telefonda o fark
	 * görünmüyor ve kullanıcı hangi adımda olduğunu göstergeden okuyamıyordu.
	 * Yüzey vurgu renginden türediği için tema hangisi olursa olsun çalışır.
	 */
	background: var(--yildiz-yuzey);
	color: var(--yildiz-metin);
	font-weight: 600;
}

.yildiz-randevu .yildiz-cetvel-adim.acik .yildiz-cetvel-no,
.yildiz-randevu .yildiz-cetvel-adim[aria-current="step"] .yildiz-cetvel-no {
	background: var(--yildiz-ana-dolgu);
	color: var(--yildiz-ana-yazi);
}

.yildiz-randevu .yildiz-cetvel-adim.tamam {
	color: var(--yildiz-metin);
}

.yildiz-randevu .yildiz-cetvel-adim.tamam .yildiz-cetvel-no {
	background: color-mix(in srgb, var(--yildiz-ana) 25%, transparent);
}

/*
 * Dar ekranda adım adları çipleri iki üç satıra yayıyor. Numaralar kalır,
 * adım adı zaten bölüm başlığında (.yildiz-adim-baslik) tam olarak yazılı.
 */
@media (max-width: 29.99em) {
	.yildiz-randevu .yildiz-cetvel-ad {
		display: none;
	}

	.yildiz-randevu .yildiz-cetvel-adim {
		padding: 0.25rem;
	}
}

/* ------------------------------------------------------------- FORM VE ADIMLAR */

.yildiz-randevu .yildiz-form {
	display: grid;
	gap: 1.25rem;
	margin: 0;
}

/*
 * .yildiz-adim ADIM BÖLÜMÜDÜR (section), gösterge çipi değil. Buraya verilen
 * display, JS bölümü gizlediğinde [hidden] kuralıyla ezilir; yukarıdaki
 * !important'ın var oluş sebebi tam olarak budur.
 */
.yildiz-randevu .yildiz-adim {
	display: grid;
	gap: 1rem;
	margin: 0;
}

.yildiz-randevu .yildiz-adim-basi {
	display: grid;
	gap: 0.125rem;
}

.yildiz-randevu .yildiz-adim-sayac {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--yildiz-soluk);
}

.yildiz-randevu .yildiz-adim-baslik {
	margin: 0;
	font-size: 1.25rem;
	line-height: 1.3;
	color: inherit;
}

.yildiz-randevu .yildiz-adim-dugmeler {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 0.25rem;
}

/*
 * İleri ve Gönder sağa yaslanır; Geri düğmesi yoksa da sağda kalırlar.
 * margin-inline-start yazı yönüne saygılıdır.
 */
.yildiz-randevu .yildiz-ileri,
.yildiz-randevu .yildiz-gonder {
	margin-inline-start: auto;
}

/* ------------------------------------------------------------------- DÜĞMELER */

.yildiz-randevu .yildiz-dugme {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	/* Dokunma hedefi tabanı. rem yerine px: tema kök yazı boyunu küçültürse
	   44 piksel garantisi kaybolmasın. */
	min-height: 44px;
	padding: 0.75rem 1.75rem;
	--yildiz-dugme-zemin: var(--yildiz-yumusak);
	--yildiz-dugme-kenar: var(--yildiz-cizgi);
	border-width: 1px;
	border-style: solid;
	/* Eylem düğmeleri hap. Kitin bütün çağrı düğmeleri tam yuvarlak ve bu,
	   yumuşak kart köşeleriyle birlikte tasarımın en tanınır iki
	   işaretinden biri; köşeli bırakılınca form sayfaya sonradan
	   yapıştırılmış duruyordu. */
	border-radius: var(--yildiz-hap);
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.yildiz-randevu .yildiz-dugme:hover {
	--yildiz-dugme-kenar: var(--yildiz-ana);
}

.yildiz-randevu .yildiz-dugme:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.yildiz-randevu .yildiz-dugme:disabled:hover {
	--yildiz-dugme-kenar: var(--yildiz-cizgi);
}

/* Birincil eylemler dolgulu. */
.yildiz-randevu .yildiz-ileri,
.yildiz-randevu .yildiz-gonder {
	--yildiz-dugme-zemin: var(--yildiz-ana-dolgu);
	--yildiz-dugme-yazi: var(--yildiz-ana-yazi);
	--yildiz-dugme-kenar: var(--yildiz-ana);
}

/*
 * Dolgulu düğmenin vurgusu zemini DEĞİŞTİRMEZ, dışına halka çizer. NEDEN:
 * zemini color-mix ile koyultsaydık, color-mix desteklemeyen tarayıcıda
 * bildirim geçersiz sayılır, zemin şeffafa düşer ve beyaz yazı kaybolurdu.
 * Halka geçersiz sayılırsa yalnız halka kaybolur, düğme okunur kalır.
 */
.yildiz-randevu .yildiz-ileri:hover,
.yildiz-randevu .yildiz-gonder:hover {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--yildiz-ana) 30%, transparent);
}

/* Geri ikincil kalır; birincil eylemle görsel olarak yarışmasın. */
.yildiz-randevu .yildiz-geri {
	--yildiz-dugme-zemin: transparent;
	--yildiz-dugme-yazi: var(--yildiz-soluk);
}

.yildiz-randevu .yildiz-geri:hover {
	--yildiz-dugme-yazi: var(--yildiz-metin);
}

/* --------------------------------------------------------- SEÇENEK LİSTELERİ */

/* Tarayıcının fieldset varsayılan kenarlığı ve dolgusu düzleştirilir. */
.yildiz-randevu .yildiz-secim {
	display: grid;
	gap: 1.25rem;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.yildiz-randevu .yildiz-hizmet-grubu {
	display: grid;
	gap: 0.5rem;
}

/*
 * KATEGORİ BAŞLIĞI BÜYÜK HARF DEĞİL.
 *
 * Küçük punto + büyük harf + harf aralığı, gövde yazısında işe yarayan bir
 * kalıp; ama kit kurulumlarında bu başlık temanın BAŞLIK yazısını (yüksek
 * kontrastlı bir serif) miras alıyor ve serif + büyük harf birleşince
 * okunurluk çöküyor. Ölçüldü: 20 piksel, ağırlık 900, Cormorant Garamond ve
 * "SAÇ" biçiminde. Normal yazımda aynı boyut rahat okunuyor.
 *
 * Boyut ve ağırlık burada VARSAYILAN; salon Elementor'de bileşenin Görünüm
 * sekmesinden ikisini de değiştirebiliyor ve o ayar bunu ezer.
 */
.yildiz-randevu .yildiz-grup-ad {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	color: inherit;
}

.yildiz-randevu .yildiz-hizmet-listesi,
.yildiz-randevu .yildiz-personel-listesi {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ------------------------------------------------- HİZMET ARAMA VE KATLAMA */

/*
 * Bu bölümün tamamı betiğin kurduğu öğeler içindir.
 *
 * Otuz kırk hizmeti alt alta basmak telefonda yalnız ilk adımı birkaç ekran
 * boyu uzatıyordu. Betik kategorileri katlıyor ve üstüne arama kutusu koyuyor;
 * betik yoksa bu seçicilerin karşılığı sayfada hiç bulunmaz ve liste eskisi
 * gibi tamamen açık kalır.
 */

.yildiz-randevu .yildiz-hizmet-araclar:empty {
	display: none;
}

.yildiz-randevu .yildiz-hizmet-arama {
	position: relative;
	display: flex;
	align-items: center;
	margin-bottom: 0.875rem;
}

.yildiz-randevu .yildiz-arama-alani {
	width: 100%;
	/* Dokunma hedefi ölçüsü; iOS'ta 16px altı yazı alanı sayfayı
	   yakınlaştırıyor, bu yüzden font boyutu küçültülmez. */
	min-height: 2.75rem;
	padding: 0.6rem 2.5rem 0.6rem 0.9rem;
	border: 1px solid var(--yildiz-cizgi);
	border-radius: var(--yildiz-hap);
	background: var(--yildiz-zemin);
	color: inherit;
	font: inherit;
}

.yildiz-randevu .yildiz-arama-alani:focus-visible {
	outline: 2px solid var(--yildiz-ana);
	outline-offset: 1px;
}

/* Tarayıcının kendi temizleme düğmesi bizimkiyle çakışmasın. */
.yildiz-randevu .yildiz-arama-alani::-webkit-search-cancel-button {
	display: none;
}

.yildiz-randevu .yildiz-arama-temizle {
	position: absolute;
	right: 0.35rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	--yildiz-dugme-zemin: var(--yildiz-yumusak);
	padding: 0;
	border: 0;
	border-radius: 50%;
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
}

.yildiz-randevu .yildiz-arama-durum {
	margin: -0.375rem 0 0.75rem;
	color: var(--yildiz-soluk);
	font-size: 0.875rem;
}

/*
 * Kategori başlığı düğmeye dönüşüyor. h4 yerinde kalır (belge taslağı ve ekran
 * okuyucu gezinmesi bozulmasın), düğme onun içine girer.
 */
.yildiz-randevu .yildiz-grup-dugme {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	width: 100%;
	min-height: 2.75rem;
	padding: 0.5rem 0;
	border: 0;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-align: left;
	cursor: pointer;
}

.yildiz-randevu .yildiz-grup-dugme::after {
	content: "";
	flex: 0 0 auto;
	width: 0.5rem;
	height: 0.5rem;
	margin-left: auto;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	/* Açıkken yukarı, kapalıyken aşağı bakan ok. */
	transform: rotate(-135deg);
	transition: transform 0.18s ease;
}

.yildiz-randevu .yildiz-kapali .yildiz-grup-dugme::after {
	transform: rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
	.yildiz-randevu .yildiz-grup-dugme::after {
		transition: none;
	}
}

/*
 * Sayaç başlığa YAPIŞIYORDU: çıktı "Saç13 hizmet" olarak okunuyordu, çünkü
 * araya boşluk koyan tek şey esnek kutunun aralığıydı ve başlık kendi
 * satırını doldurunca o aralık kayboluyordu. Rozet hem ayırıyor hem sayıyı
 * ikincil gösteriyor.
 */
.yildiz-randevu .yildiz-grup-sayac {
	flex: 0 0 auto;
	margin-inline-start: 0.5rem;
	padding: 0.1rem 0.5rem;
	border-radius: var(--yildiz-hap, 999px);
	background: var(--yildiz-yumusak);
	color: var(--yildiz-soluk);
	font-family: var(--yildiz-vurgu-yazi);
	font-weight: 600;
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0;
	text-transform: none;
}

/* Katlanmış grup başlıkları arasında ince ayırıcı; liste bir menü gibi okunur. */
.yildiz-randevu .yildiz-hizmet-grubu + .yildiz-hizmet-grubu {
	border-top: 1px solid var(--yildiz-cizgi);
	padding-top: 0.25rem;
}

/* Seçenek satırı bir kart: radyo solda, etiket kalan alanı doldurur. */
.yildiz-randevu .yildiz-secenek {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	padding: 0.85rem 0.9rem;
	border: 1px solid var(--yildiz-cizgi);
	border-radius: var(--yildiz-radius-kucuk);
	background: var(--yildiz-zemin);
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.yildiz-randevu .yildiz-secenek:hover {
	border-color: var(--yildiz-ana);
}

/*
 * Seçili kart. :has desteklenmeyen tarayıcıda kural düşer ama radyonun kendi
 * işareti görünür kaldığı için seçim bilgisi kaybolmaz.
 */
.yildiz-randevu .yildiz-secenek:has(.yildiz-radyo:checked) {
	border-color: var(--yildiz-ana);
	background: color-mix(in srgb, var(--yildiz-ana) 8%, transparent);
}

/*
 * Radyo gizlenmez. Gizlemek odak halkasını ve zorunlu alan uyarısını taşımayı
 * gerektirir; görünür bırakmak hem daha sağlam hem de temayla uyumlu.
 */
.yildiz-randevu .yildiz-radyo {
	flex: none;
	width: 1.15rem;
	height: 1.15rem;
	margin: 0.2rem 0 0;
	accent-color: var(--yildiz-ana);
	cursor: pointer;
}

/*
 * Etiket iki sütun: solda ad ve süre, sağda fiyat. Etiketin tamamı tıklanabilir
 * olduğu için dokunma hedefi kart yüksekliği kadardır, 44 pikselin üstünde.
 */
.yildiz-randevu .yildiz-etiket {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: baseline;
	gap: 0.125rem 0.75rem;
	flex: 1 1 auto;
	min-width: 0;
	cursor: pointer;
}

.yildiz-randevu .yildiz-hizmet-ad,
.yildiz-randevu .yildiz-personel-ad {
	grid-column: 1;
	font-weight: 600;
}

.yildiz-randevu .yildiz-etiket .yildiz-hizmet-fiyat {
	font-family: var(--yildiz-vurgu-yazi);
	grid-column: 2;
	grid-row: 1;
	justify-self: end;
	font-weight: 600;
	white-space: nowrap;
}

.yildiz-randevu .yildiz-etiket .yildiz-hizmet-sure,
.yildiz-randevu .yildiz-personel-not {
	grid-column: 1;
}

/* Süre ve personel notu ikincil bilgidir; her bağlamda soluk kalır. */
.yildiz-randevu .yildiz-hizmet-sure,
.yildiz-randevu .yildiz-personel-not {
	font-size: 0.875em;
	font-weight: 400;
	color: var(--yildiz-soluk);
}

/* ------------------------------------------------------------------ PAKET */

/*
 * Paket kutusu hizmet kategorilerinden AYRIŞMALI ama ayrı bir ada bağlı
 * olmamalı: listenin başındaki bu kutu "bunlar da var" diyor, ikinci bir
 * bölüm açmıyor. Ayrım tek bir sol şeritle veriliyor; kutu düzeni,
 * katlanması ve araması kategori kutusunun aynısı.
 */
.yildiz-randevu .yildiz-paket-grubu {
	border-inline-start: 3px solid var(--yildiz-ana);
	padding-inline-start: 0.625rem;
}

/*
 * Paket kartı vurgu renginden türeyen soluk bir yüzeyde durur. Nötr gri
 * kullanılsaydı her temada aynı görünür ve hiçbirine ait olmazdı; vurgunun
 * düşük yoğunluklu karışımı temanın kendi ailesinden bir yüzey veriyor.
 */
.yildiz-randevu .yildiz-paket-secenek {
	background: color-mix(in srgb, var(--yildiz-ana) 5%, var(--yildiz-zemin));
}

/*
 * Pakete dahil hizmetler etiketin tamamını kaplar: ad ve fiyat sütunlarının
 * altına düşer, iki sütuna da sığmaya çalışmaz. Uzun listelerde satır kırılır,
 * kırpılmaz; müşterinin ne aldığını görmesi kartın yüksekliğinden önemli.
 */
.yildiz-randevu .yildiz-paket-icerik {
	grid-column: 1 / -1;
	margin-top: 0.25rem;
	font-size: 0.875em;
	font-weight: 400;
	color: var(--yildiz-soluk);
}

/*
 * Çizili liste fiyatı indirimli fiyatın YANINDA ve küçük. Fiyatın kendisinden
 * büyük ya da eşit olsaydı hangi rakamın geçerli olduğu bir anlık okumada
 * anlaşılmazdı.
 */
.yildiz-randevu .yildiz-secenek-eski {
	margin-inline-start: 0.375rem;
	font-size: 0.8125em;
	font-weight: 400;
	color: var(--yildiz-soluk);
}

/* Devre dışı personel satırı JS tarafından gizlenir; yine de görünür kalırsa
   (gizleme başarısızsa) seçilemez olduğu anlaşılmalı. */
.yildiz-randevu .yildiz-radyo:disabled,
.yildiz-randevu .yildiz-radyo:disabled + .yildiz-etiket {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ------------------------------------------------------------- SABİT SEÇİMLER */

/* Kısa kod hizmeti ya da personeli sabitlemişse seçim yerine bu satır basılır. */
.yildiz-randevu .yildiz-sabit-secim {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 0.5rem;
	margin: 0;
	padding: 0.75rem 1rem;
	border: 1px solid var(--yildiz-cizgi);
	border-radius: var(--yildiz-radius);
	background: var(--yildiz-yumusak);
}

.yildiz-randevu .yildiz-sabit-etiket {
	font-size: 0.875rem;
	color: var(--yildiz-soluk);
}

.yildiz-randevu .yildiz-sabit-secim .yildiz-hizmet-fiyat {
	margin-inline-start: auto;
	font-weight: 600;
	white-space: nowrap;
}

/* ------------------------------------------------------------------- TAKVİM */

.yildiz-randevu .yildiz-gun-gezinme {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

/* Ok düğmeleri kare ve 44 piksel: baş parmakla vurulacak en küçük hedef. */
.yildiz-randevu .yildiz-gun-geri,
.yildiz-randevu .yildiz-gun-ileri {
	flex: none;
	min-width: 44px;
	padding: 0.5rem;
	border-radius: 50%;
	font-size: 1.375rem;
	line-height: 1;
}

.yildiz-randevu .yildiz-gun-araligi {
	flex: 1 1 auto;
	margin: 0;
	text-align: center;
	font-weight: 600;
}

/*
 * Gün şeridi. auto-fill ile sütun sayısı kaba göre belirlenir: yedi gün dar
 * ekranda alt alta sarar, geniş ekranda tek satırda durur.
 */
.yildiz-randevu .yildiz-gunler {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(4.25rem, 1fr));
	gap: 0.5rem;
}

.yildiz-randevu .yildiz-gun {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.125rem;
	min-height: 44px;
	padding: 0.5rem 0.25rem;
	--yildiz-dugme-kenar: var(--yildiz-cizgi);
	--yildiz-dugme-zemin: var(--yildiz-zemin);
	border-width: 1px;
	border-style: solid;
	/* Gün düğmesi İKİ SATIRLI (gün adı + sayı); hap biçimi iki satırlı bir
	   kutuyu balona çeviriyor. Tek satırlı saat düğmesi hap, gün kutusu
	   yumuşak kare: ayrım kasıtlı, iki seçici görsel olarak da ayrışıyor. */
	border-radius: var(--yildiz-radius-kucuk);
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.yildiz-randevu .yildiz-gun-ad {
	font-size: 0.75rem;
	color: var(--yildiz-soluk);
}

.yildiz-randevu .yildiz-gun-sayi {
	font-size: 0.9375rem;
	font-weight: 600;
	white-space: nowrap;
}

.yildiz-randevu .yildiz-gun:hover:not(:disabled) {
	--yildiz-dugme-kenar: var(--yildiz-ana);
	--yildiz-dugme-zemin: var(--yildiz-yuzey-hafif);
}

/*
 * Seçili gün. Sınıf ve ARIA birlikte yakalanır; JS ikisini de yazıyor, biri
 * ileride düşerse görünüm bozulmasın.
 */
.yildiz-randevu .yildiz-gun.secili,
.yildiz-randevu .yildiz-gun[aria-pressed="true"] {
	--yildiz-dugme-kenar: var(--yildiz-ana-dolgu);
	--yildiz-dugme-zemin: var(--yildiz-ana-dolgu);
	--yildiz-dugme-yazi: var(--yildiz-ana-yazi);
}

.yildiz-randevu .yildiz-gun.secili .yildiz-gun-ad,
.yildiz-randevu .yildiz-gun[aria-pressed="true"] .yildiz-gun-ad {
	color: inherit;
}

/*
 * Kapalı ya da dolmuş gün listede kalır ama seçilemez. Sebebi gün düğmesinin
 * içindeki .yildiz-gizli metniyle ekran okuyucuya söylenir.
 */
.yildiz-randevu .yildiz-gun.dolu,
.yildiz-randevu .yildiz-gun:disabled {
	opacity: 0.45;
	cursor: not-allowed;
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}

/* -------------------------------------------------------------- DURUM VE SLOT */

/*
 * Canlı bölge. Boşken hiç yer kaplamaz ama display:none YAPILMAZ: ekran
 * okuyucular gizli bir bölgeye yazılan metni duyurmaz. Dolguyu yalnız içerik
 * varken veriyoruz, boş <p> böylece sıfır yükseklikte kalıyor.
 */
.yildiz-randevu .yildiz-durum {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--yildiz-soluk);
}

/*
 * Bekleme sınıfı da tetikleyicidir: çeviri dosyasında "yukleniyor" metni boşsa
 * bölge boş kalır ama dönen halka yine görünmeli, yoksa istek sırasında ekranda
 * hiçbir geri bildirim olmaz.
 */
.yildiz-randevu .yildiz-durum:not(:empty),
.yildiz-randevu .yildiz-durum.yildiz-yukleniyor {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0;
}

/* Bekleme göstergesi: metnin yanında dönen küçük bir halka. */
.yildiz-randevu .yildiz-yukleniyor::after {
	content: "";
	width: 1rem;
	height: 1rem;
	flex: none;
	border: 2px solid var(--yildiz-cizgi);
	border-top-color: var(--yildiz-ana);
	border-radius: 50%;
	animation: yildiz-doner 0.8s linear infinite;
}

@keyframes yildiz-doner {
	to {
		transform: rotate(360deg);
	}
}

/*
 * Saat ızgarası. minmax(5.5rem, 1fr): en dar telefonda bile iki sütun sığar,
 * geniş ekranda saatler kendiliğinden yayılır.
 */
.yildiz-randevu .yildiz-slotlar {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
	gap: 0.5rem;
}

/* Yükleme sürerken eski saatler tıklanmasın; JS aria-busy yazıyor. */
.yildiz-randevu .yildiz-slotlar[aria-busy="true"] {
	opacity: 0.5;
	pointer-events: none;
}

.yildiz-randevu .yildiz-slot {
	min-height: 44px;
	padding: 0.625rem 0.5rem;
	--yildiz-dugme-kenar: var(--yildiz-cizgi);
	--yildiz-dugme-zemin: var(--yildiz-zemin);
	border-width: 1px;
	border-style: solid;
	border-radius: var(--yildiz-hap);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.yildiz-randevu .yildiz-slot:hover {
	--yildiz-dugme-kenar: var(--yildiz-ana);
	--yildiz-dugme-zemin: var(--yildiz-yuzey-hafif);
}

/*
 * Seçili saat. Dolgu rengine ek olarak dış halka veriliyor: --yildiz-ana çok
 * açık bir tema renginden geldiğinde yazı kontrastı zayıflasa bile hangi saatin
 * seçili olduğu halkadan anlaşılır.
 */
.yildiz-randevu .yildiz-slot.secili,
.yildiz-randevu .yildiz-slot[aria-pressed="true"] {
	--yildiz-dugme-kenar: var(--yildiz-ana-dolgu);
	--yildiz-dugme-zemin: var(--yildiz-ana-dolgu);
	--yildiz-dugme-yazi: var(--yildiz-ana-yazi);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--yildiz-ana) 35%, transparent);
}

/* JavaScript kapalıyken saat listesi basılamıyor; sebebi ve telefon burada. */
.yildiz-randevu .yildiz-noscript {
	margin: 0;
	padding: 0.75rem 1rem;
	border: 1px solid var(--yildiz-cizgi);
	border-radius: var(--yildiz-radius);
	background: var(--yildiz-yumusak);
	font-size: 0.9375rem;
}

/* ---------------------------------------------------------------- FORM ALANLARI */

.yildiz-randevu .yildiz-alan {
	display: grid;
	gap: 0.375rem;
}

.yildiz-randevu .yildiz-alan-etiket {
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
}

.yildiz-randevu .yildiz-zorunlu {
	color: var(--yildiz-hata);
}

.yildiz-randevu .yildiz-yardim {
	margin: 0;
	font-size: 0.875rem;
	color: var(--yildiz-soluk);
}

.yildiz-randevu .yildiz-alan input[type="text"],
.yildiz-randevu .yildiz-alan input[type="tel"],
.yildiz-randevu .yildiz-alan textarea {
	width: 100%;
	/* Dokunma hedefi ve iOS'ta otomatik yakınlaştırmayı önleyen 16 piksel taban. */
	min-height: 44px;
	padding: 0.75rem 1.15rem;
	border: 1px solid var(--yildiz-cizgi);
	/*
	 * TEK SATIRLIK alanlar hap, çok satırlı alan yumuşak kutu.
	 *
	 * Kitin iletişim formunda ad, e-posta ve telefon tam yuvarlak; mesaj
	 * kutusu değil. Sebebi biçimsel değil geometrik: hap kenarı yüksek bir
	 * kutuda metnin ilk satırını içeri itiyor ve sol kenar boşluğu satır
	 * satır değişiyormuş gibi duruyor.
	 */
	border-radius: var(--yildiz-hap);
	background: var(--yildiz-zemin);
	font-size: 1rem;
	transition: border-color 0.15s ease;
}

.yildiz-randevu .yildiz-alan textarea {
	border-radius: var(--yildiz-radius-kucuk);
	resize: vertical;
	line-height: 1.5;
}

.yildiz-randevu .yildiz-alan input[type="text"]:hover,
.yildiz-randevu .yildiz-alan input[type="tel"]:hover,
.yildiz-randevu .yildiz-alan textarea:hover {
	border-color: var(--yildiz-ana);
}

/* Hatalı alan JS tarafından aria-invalid ile işaretlenir; renk tek gösterge
   değil, hata metni de .yildiz-hata bölgesinde yazılıdır. */
.yildiz-randevu [aria-invalid="true"] {
	border-color: var(--yildiz-hata);
}

/* Onay kutusu satırı: etiket kutunun yanında, alt alta değil. */
.yildiz-randevu .yildiz-alan.yildiz-onay {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
}

.yildiz-randevu .yildiz-onay input[type="checkbox"] {
	flex: none;
	width: 1.15rem;
	height: 1.15rem;
	margin: 0.2rem 0 0;
	accent-color: var(--yildiz-ana);
	cursor: pointer;
}

.yildiz-randevu .yildiz-onay .yildiz-alan-etiket {
	font-size: 0.9375rem;
	font-weight: 400;
}

/* ----------------------------------------------------------------- KVKK METNİ */

.yildiz-randevu .yildiz-kvkk-metin {
	border: 1px solid var(--yildiz-cizgi);
	border-radius: var(--yildiz-radius);
	background: var(--yildiz-yumusak);
}

.yildiz-randevu .yildiz-kvkk-metin summary {
	padding: 0.75rem 1rem;
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
	list-style-position: inside;
}

/*
 * Uzun aydınlatma metni formu aşağı itmesin diye kutu içinde kaydırılır.
 * overscroll-behavior: kutunun sonuna gelince sayfa kaymaya başlamasın.
 */
.yildiz-randevu .yildiz-kvkk-govde {
	max-height: 14rem;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 0 1rem 0.75rem;
	font-size: 0.875rem;
	color: var(--yildiz-soluk);
}

.yildiz-randevu .yildiz-kvkk-govde p {
	margin: 0 0 0.75rem;
}

.yildiz-randevu .yildiz-kvkk-govde p:last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------- ÖZET */

.yildiz-randevu .yildiz-ozet {
	margin: 0;
	border: 1px solid transparent;
	border-radius: var(--yildiz-radius);
	/* Onay özeti formun son ekranı ve tek "okunacak" bloğu; yüzey vermek
	   onu form alanlarından ayırıyor. */
	background: var(--yildiz-yuzey-hafif);
	overflow: hidden;
}

.yildiz-randevu .yildiz-ozet-satir {
	display: grid;
	grid-template-columns: minmax(6rem, 38%) 1fr;
	gap: 0.25rem 1rem;
	padding: 0.6875rem 1rem;
}

.yildiz-randevu .yildiz-ozet-satir + .yildiz-ozet-satir {
	border-top: 1px solid var(--yildiz-cizgi);
}

.yildiz-randevu .yildiz-ozet dt {
	font-size: 0.875rem;
	color: var(--yildiz-soluk);
}

.yildiz-randevu .yildiz-ozet dd {
	margin: 0;
	font-weight: 600;
	overflow-wrap: anywhere;
}

/* Hizmet satırındaki süre JS tarafından dd içine span olarak ekleniyor. */
.yildiz-randevu .yildiz-ozet dd .yildiz-hizmet-sure {
	font-weight: 400;
}

/* ---------------------------------------------------------------- PLAN */

/*
 * Zincir planı. Kutu SUNUCUDA BOŞ ve hidden basılıyor, betik dolduruyor;
 * plan seçilen saate bağlı ve sayfa önbelleğine giren bir HTML'de bayat bir
 * plan başka bir müşteriye servis edilebilirdi.
 */
.yildiz-randevu .yildiz-plan {
	margin-top: 0.875rem;
	padding: 0.875rem 1rem;
	border: 1px solid var(--yildiz-cizgi);
	border-radius: var(--yildiz-radius);
	background: var(--yildiz-yuzey-hafif);
}

.yildiz-randevu .yildiz-plan-baslik {
	margin: 0 0 0.625rem;
	font-size: 0.9375rem;
	font-weight: 600;
}

.yildiz-randevu .yildiz-plan-liste {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.5rem;
}

/*
 * Adım satırı: saat, hizmet, personel.
 *
 * SORGU YOK, SARMALAMA VAR. Üç sütunlu bir ızgara dar kapta hizmet adını iki
 * harfe düşürüyordu ve düzeltmenin doğal yolu bir @container sorgusuydu; ama
 * bu dosyanın kökünde konteyner TANIMLI DEĞİL (biçem @media ile yazılmış) ve
 * eşleşmeyen bir sorgu mobil düzeni sessizce hiç uygulamazdı. Sarmalayan bir
 * satır kabın genişliğini kendiliğinden izliyor: dar kapta personel adı alt
 * satıra iniyor, geniş kapta üçü yan yana kalıyor.
 *
 * Saatler tabular-nums ile alt alta hizalanıyor; zincirin arka arkaya geldiği
 * o hizadan görünüyor.
 */
.yildiz-randevu .yildiz-plan-satir {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.125rem 0.75rem;
}

.yildiz-randevu .yildiz-plan-saat {
	flex: none;
	font-family: var(--yildiz-vurgu-yazi);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Hizmet adı kalan yeri alır ve 8rem'in altına düştüğünde satır sarmalanır. */
.yildiz-randevu .yildiz-plan-hizmet {
	flex: 1 1 8rem;
	min-width: 0;
	overflow-wrap: anywhere;
}

.yildiz-randevu .yildiz-plan-personel {
	flex: none;
	font-size: 0.875em;
	color: var(--yildiz-soluk);
}

.yildiz-randevu .yildiz-plan-toplam {
	margin: 0.75rem 0 0;
	padding-top: 0.625rem;
	border-top: 1px solid var(--yildiz-cizgi);
	font-weight: 600;
}

/* ------------------------------------------------------------- HATA VE SONUÇ */

/*
 * Hata bölgesi de canlı bölgedir, boşken gizlenmez, yalnız yer kaplamaz.
 * Kenarlık ve renk yanında metin de yazıldığı için bilgi tek başına renge
 * bağlı değildir.
 */
.yildiz-randevu .yildiz-hata {
	margin: 0;
	color: var(--yildiz-hata);
	font-weight: 600;
}

.yildiz-randevu .yildiz-hata:not(:empty) {
	padding: 0.75rem 1rem;
	border: 1px solid var(--yildiz-hata);
	border-radius: var(--yildiz-radius);
	background: color-mix(in srgb, var(--yildiz-hata) 10%, transparent);
}

/* Başarı kutusu açılışta hidden'dır; [hidden] kuralı bu display'i ezer. */
.yildiz-randevu .yildiz-sonuc {
	display: grid;
	gap: 0.625rem;
	padding: 1.25rem;
	border: 1px solid var(--yildiz-basari);
	border-radius: var(--yildiz-radius);
	background: color-mix(in srgb, var(--yildiz-basari) 8%, transparent);
}

.yildiz-randevu .yildiz-sonuc-baslik {
	margin: 0;
	font-size: 1.25rem;
	color: var(--yildiz-basari);
}

.yildiz-randevu .yildiz-sonuc-ozet {
	margin: 0;
	font-weight: 600;
}

.yildiz-randevu .yildiz-sonuc-iptal,
.yildiz-randevu .yildiz-sonuc-telefon {
	margin: 0;
	font-size: 0.9375rem;
}

.yildiz-randevu .yildiz-sonuc a {
	color: inherit;
	text-underline-offset: 0.2em;
}

/* ------------------------------------------------------------------ GENİŞ EKRAN */

@media (min-width: 40em) {
	.yildiz-randevu .yildiz-adim-baslik {
		font-size: 1.5rem;
	}

	/* Geniş ekranda hizmet kartı iki satıra bölünmeden nefes alsın. */
	.yildiz-randevu .yildiz-secenek {
		padding: 0.875rem 1rem;
	}

	.yildiz-randevu .yildiz-ozet-satir {
		grid-template-columns: minmax(8rem, 30%) 1fr;
	}
}

/* --------------------------------------------------------------- HAREKET AZALT */

/*
 * Hareket duyarlılığı olan kullanıcı geçişleri istemiyor. Dönen halka tamamen
 * kaldırılır ama halkanın kendisi durur: bekleme göstergesi kaybolmasın.
 */
@media (prefers-reduced-motion: reduce) {
	.yildiz-randevu *,
	.yildiz-randevu *::before,
	.yildiz-randevu *::after {
		transition-duration: 0.01ms;
		animation-duration: 0.01ms;
		animation-iteration-count: 1;
	}

	.yildiz-randevu .yildiz-yukleniyor::after {
		animation: none;
	}
}