/**
 * Yıldız Randevu, randevu formu dışındaki kısa kodların biçemi.
 *
 * Kapsam: [yildiz_hizmetler] [yildiz_galeri] [yildiz_saatler] [yildiz_iletisim]
 * Randevu formunun kendi biçemi randevu-formu.css dosyasındadır; iki dosya aynı
 * değişken adlarını paylaşır, böylece salon tek bir vurgu rengi seçtiğinde
 * hepsi birden değişir.
 *
 * DOĞRULUK KAYNAĞI: includes/class-shortcode-diger.php.
 * Burada uydurulmuş tek bir sınıf adı yoktur; her seçicinin işaretlemede bir
 * karşılığı vardır.
 *
 * SÖZLEŞME
 *   .yildiz-blok                 her kısa kodun dış sarmalayıcısı
 *     .yildiz-hizmetler          hizmet listesi kökü
 *       .yildiz-hizmet-grup      kategori kutusu
 *       .yildiz-hizmet-grup-ad   kategori başlığı
 *       .yildiz-hizmet-liste     hizmet listesi (ul)
 *       .yildiz-hizmet           tek hizmet satırı (li)
 *       .yildiz-hizmet-ad / -sure / -fiyat / -aciklama
 *     .yildiz-galeri-blok        galeri kökü
 *       .yildiz-galeri           kart ızgarası (ul)
 *       .yildiz-galeri-kart      tek çalışma (li)
 *       .yildiz-galeri-kutu      şerit + okların konumlandığı kap
 *       .yildiz-galeri-serit     yatay kaydırılan şerit
 *       .yildiz-galeri-ikili     slaytları taşıyan esnek satır (figure)
 *       .yildiz-galeri-buyut     tek slayt / büyütme düğmesi
 *       .yildiz-galeri-gorsel    görsel
 *       .yildiz-galeri-etiket    "ÖNCESİ" / "SONRASI" / "ÖNCESİ - SONRASI"
 *       .yildiz-galeri-ok        ileri ve geri düğmeleri
 *       .yildiz-galeri-noktalar  gösterge kabı
 *       .yildiz-galeri-nokta     tıklanabilir nokta (button)
 *       .yildiz-galeri-hizmetler kartın hizmet rozetleri satırı
 *       .yildiz-galeri-hizmet    tek hizmet rozeti
 *       .yildiz-galeri-baslik    çalışma başlığı
 *     .yildiz-buyutec            tam ekran görüntüleyici
 *       .yildiz-buyutec-ic / -kapat
 *     .yildiz-saatler-kutu       çalışma saatleri kökü
 *       .yildiz-durum            "şu an açık / kapalı" satırı
 *       .yildiz-durum-acik / -kapali / .yildiz-durum-not
 *       .yildiz-saatler          haftalık tablo
 *       .yildiz-saat-bugun       bugünün satırı
 *       .yildiz-rozet            satır içi küçük etiket
 *       .yildiz-kapali-metin     "Kapalı" yazısı
 *     .yildiz-iletisim           iletişim kökü
 *       .yildiz-adres / .yildiz-tel / .yildiz-wa / .yildiz-harita / .yildiz-ikon
 *     .yildiz-uyari              içerik yokken çıkan kutu
 *     .yildiz-baslik             kısa kod başlığı
 *     .yildiz-gizli              görsel olarak gizli, ekran okuyucuya açık
 *     .yildiz-mat                soluk yardımcı metin
 *
 * MOBİL ÖNCE
 *
 * Taban kurallar telefon içindir; geniş ekran kuralları min-width sorgularıyla
 * EKLENİR, dar ekran için hiçbir şey geri alınmaz. Salon müşterilerinin
 * neredeyse tamamı siteye telefondan giriyor; masaüstünü taban alıp mobilde
 * kırpmak, asıl kitleye artıkları vermek olurdu.
 *
 * Dokunma hedefleri en az 44 piksel. Fiyat ve saat sütunları dar ekranda yan
 * yana sıkışmaz, alt satıra iner.
 *
 * Geniş düzen kuralları @media ile DEĞİL @container ile yazılır: kısa kodlar
 * çoğunlukla Elementor'da dar bir sütunun içinde duruyor ve görünüm alanı
 * sorgusu o sütunun genişliğini bilmiyor. Konteyner sorgusu desteklemeyen eski
 * tarayıcılar mobil düzende kalır; hiçbir şey bozulmaz, yalnız geniş ekranda
 * da tek sütun görünür.
 *
 * TEMA UYUMU
 *
 * Hiçbir renk sabit kodlanmaz (WhatsApp'ın kendi markası hariç, o da
 * değiştirilebilir). Değişkenler Elementor global renklerinden devralınır,
 * Elementor yoksa currentColor'dan türetilir: açık temada koyu, koyu temada
 * açık bir tonla aynı kural iki tarafta da okunur kalır. Yazı tipi hiç
 * 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.
 *
 * Ayarlar > Görünüm ekranından seçilen renkler bu değişkenleri "body " önekli
 * kurallarla ezer; sıralamadan bağımsız kazanır.
 *
 * GÖRSEL DİL
 *
 * Biçim kararları bir güzellik salonu sablon kiti (Glowria) ölçülerek
 * alındı ama hiçbiri o kite BAĞLI değil; hepsi vurgu renginden türetiliyor:
 *
 *   --yildiz-yuzey       kart zemini, vurgu renginin %15 karışımı
 *   --yildiz-yuzey-hafif ikincil yüzey, %7
 *   --yildiz-hap         eylem düğmelerinin tam yuvarlak biçimi
 *   --yildiz-vurgu-yazi  fiyat ve telefon için başlık yazı tipi
 *
 * Kutular kenarlıkla değil YÜZEYLE ayrılır, eylem düğmeleri hap biçimindedir,
 * başlıkların altında iki parçalı ince bir ayraç durur. Bu üçü o kitin
 * tanınır işaretleri ve mavi bir kitte de mavi tonlarıyla çalışır.
 */

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

/*
 * Değişkenler :root'a değil kısa kod köküne yazılır: aynı sayfada birden çok
 * kısa kod olabilir ve tema :root üzerinde bizim adlarımızla çakışabilecek bir
 * şey tanımlamış olabilir. Kökte tanımlamak kapsamı bloğa hapseder.
 */
.yildiz-blok {
	--yildiz-ana: var( --e-global-color-primary, #1f6feb );

	/*
	 * 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;
	--yildiz-metin: var( --e-global-color-text, currentColor );
	--yildiz-zemin: transparent;

	/* Nötr tonlar metin renginden türetilir; tema hangi renkte olursa olsun
	   aynı kontrast oranı korunur. */
	--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, NÖTR GRİDEN DEĞİL.
	 *
	 * Nötr gri bir kart her temada aynı görünür ve hiçbirine ait olmaz.
	 * Vurgu renginin çok düşük yoğunluklu bir karışımı ise temanın kendi
	 * ailesinden bir yüzey üretir: kahve bir markada krem, mavi bir markada
	 * buz mavisi çıkar ve kutu sayfaya sonradan yapıştırılmış durmaz.
	 *
	 * Yüzde ÖLÇÜLEREK seçildi. Glowria kitinin vurgu rengi #A67355, bölüm
	 * zemini #F3EBE6. %15 karışım beyaz üzerinde #F2EAE5 veriyor; iki renk
	 * arasındaki fark kanalda birer birim, gözle seçilmiyor.
	 *
	 * Beyazla karıştırmak aynı sonucu verirdi ama koyu temayı kırardı: orada
	 * kart sayfadan daha açık bir leke olurdu. Saydamla karıştırmak kararı
	 * sayfaya bırakır, açık zeminde krem, koyu zeminde sıcak koyu bir ton.
	 */
	--yildiz-yuzey: color-mix( in srgb, var( --yildiz-ana ) 15%, transparent );
	--yildiz-yuzey-hafif: color-mix( in srgb, var( --yildiz-ana ) 7%, transparent );

		/*
	 * SAYILARIN YAZI TİPİ: METİN yazısı, BAŞLIK serifi değil.
	 *
	 * Önce kitin birincil (başlık) yazısına bağlanmıştı ve ölçüldüğünde sonuç
	 * kötüydü: kitin başlık yazısı Cormorant Garamond gibi yüksek kontrastlı
	 * bir serif ve 19.8 pikselde rakamların ince çizgileri neredeyse
	 * kayboluyor. Fiyat, listede okunması gereken TEK sayı ve tam da o
	 * okunmuyordu.
	 *
	 * Şimdi kitin METİN/vurgu yazısına bağlı (kit kurulumunda DM Sans gibi
	 * geometrik bir sans). Zaten yüklü olduğu için sayfaya ek bir yazı tipi
	 * isteği binmiyor; Poppins gibi yüklü olmayan bir yazıyı zorlamak,
	 * salonun sayfasına ikinci bir Google Fonts isteği eklerdi.
	 *
	 * Salon başka bir yazı isterse yolu Elementor > Site Ayarları > Genel
	 * Yazı Tipleri: buradaki zincir onu kendiliğinden izler.
	 */
	--yildiz-vurgu-yazi: var( --e-global-typography-text-font-family, var( --e-global-typography-accent-font-family, inherit ) );

	/*
	 * Köşe yuvarlaklığı iki ölçekte: kutular yumuşak, düğmeler hap.
	 * Hap biçimi kitin en tanınır işareti; kutuda aynı yuvarlaklık
	 * kullanılsaydı liste satırları balona dönerdi.
	 */
	--yildiz-radius: 1rem;
	--yildiz-radius-kucuk: 0.625rem;
	--yildiz-hap: 999px;

	--yildiz-basari: color-mix( in srgb, #12a150 70%, currentColor );
	--yildiz-hata: color-mix( in srgb, #d93036 72%, currentColor );

	/* WhatsApp kendi marka rengiyle tanınıyor; değiştirilebilir ama
	   varsayılanı marka rengidir. */
	--yildiz-wa: #25d366;

	--yildiz-galeri-oran: 3 / 4;

	/*
	 * Hizmet sayfasının kapak görseli. Galeri oranından AYRI: galeri dikey
	 * (3/4), çünkü öncesi/sonrası kareleri portre çekiliyor; kapak ise
	 * sayfanın başındaki geniş bant ve 16/9 olmazsa dikey bir fotoğraf
	 * sayfayı ekranlar boyu uzatıyor.
	 */
	--yildiz-kapak-oran: 16 / 9;

	--yildiz-bosluk: 1rem;

	/*
	 * Kutuların azami genişliği. Varsayılan 100%: blok Elementor
	 * konteynerinin genişliğini alır, kendi sabit ölçüsünü dayatmaz. Salon
	 * daha dar istiyorsa Elementor'da konteyner genişliğini ayarlar; iki
	 * yerde birden genişlik tanımlamak, hangisinin kazandığını belirsiz
	 * bırakıyordu.
	 */
	--yildiz-en: 100%;

	margin: 1.5rem 0;
	line-height: 1.55;
	color: var( --yildiz-metin );

	/*
	 * DÜZEN GÖRÜNÜM ALANINA DEĞİL KONTEYNERE BAKAR.
	 *
	 * Kısa kodlar çoğu zaman Elementor'da dar bir sütunun içinde duruyor.
	 * Görünüm alanı sorgusu (@media) o sütunun 300 piksel olduğunu bilmiyor,
	 * ekran 1400 piksel diye "geniş" düzeni uyguluyordu: hizmet satırı üç
	 * sütuna açılıp sıkışıyor, galeri iki kart yan yana girmeye çalışıyordu.
	 * Kök burada bir konteyner olarak tanımlanır ve bütün düzen kuralları
	 * @container ile yazılır.
	 */
	container-type: inline-size;
	container-name: yildiz;
}

/* color-mix desteklemeyen tarayıcıda tonlar sabit gri değerlere düşer.
   Kontrast biraz kayar ama hiçbir şey okunmaz hâle gelmez. */
@supports not ( color: color-mix( in srgb, red 50%, blue ) ) {
	.yildiz-blok {
		--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. */
		--yildiz-ana-dolgu: var( --yildiz-ana );

		/*
		 * Yüzey vurgu renginden türetilemiyorsa nötr griye düşer. Kart
		 * yine kart gibi görünür, yalnız marka sıcaklığını taşımaz;
		 * şeffafa düşseydi kutu ile sayfa ayırt edilemezdi.
		 */
		--yildiz-yuzey: rgba( 127, 127, 127, 0.1 );
		--yildiz-yuzey-hafif: rgba( 127, 127, 127, 0.05 );
	}
}

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

/* ------------------------------------------------------------------- ORTAK */

.yildiz-gizli {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
}

.yildiz-mat {
	color: var( --yildiz-soluk );
}

/*
 * Kısa kod başlığının altında küçük bir süsleme durur.
 *
 * Kitteki her bölüm başlığının altında kısa bir çizgi ve ortasında bir motif
 * var; sayfanın ritmini kuran şey o. Bizde motif yok (işaretleme
 * değişmiyor) ama çizgi var: başlık altında iki parçalı ince bir ayraç,
 * solda vurgu renginde kısa bir bölüm, yanında soluk bir devam. Salon
 * başlığı kapatırsa (kısa kod özniteliği) süsleme de birlikte gider,
 * çünkü ::after başlığa bağlı.
 */
.yildiz-baslik {
	margin: 0 0 1rem;
	font-size: 1.35em;
	line-height: 1.3;
}

.yildiz-baslik::after {
	content: "";
	display: block;
	width: 3.5rem;
	height: 2px;
	margin-top: 0.55rem;
	border-radius: 2px;
	background: linear-gradient(
		to right,
		var( --yildiz-ana ) 0 1.5rem,
		var( --yildiz-cizgi ) 1.5rem 100%
	);
}

.yildiz-uyari {
	padding: 0.9rem 1rem;
	border: 1px dashed var( --yildiz-cizgi );
	border-radius: var( --yildiz-radius );
	background: var( --yildiz-yumusak );
	color: var( --yildiz-soluk );
	font-size: 0.925em;
}

/* ------------------------------------------------------- TEMA ÇARPIŞMASI */

/*
 * ELEMENTOR TEMA BİÇEMİ BİZİM BAĞLANTI VE DÜĞMELERİMİZİ DE BOYUYOR.
 *
 * Elementor'un kit biçemi `.elementor-kit-N a` ve `.elementor-kit-N button`
 * gibi kurallar basıyor. Bu kurallar (0,1,1) özgüllüğünde; bizim tek sınıflı
 * kurallarımız (0,1,0), yani KİT KAZANIYOR.
 *
 * Ölçüldü, uydurulmadı: bir güzellik salonu kiti kurulu sayfada
 *   .yildiz-tel        -> 48 piksel   (kitin bağlantı tipografisi)
 *   .yildiz-wa         -> 48 piksel   (hap düğmenin içinde 48 piksel yazı)
 *   .yildiz-harita     -> 48 piksel
 *   .yildiz-galeri-buyut -> kitin düğme dolgusu, görselin üstüne kahve blok
 * Geliştirme ortamında hiçbiri görünmüyordu, çünkü orada kurulu bir kit yoktu.
 *
 * İki katmanlı savunma:
 *   1. Buradaki kural (0,1,1) ile kitinkiyle EŞİT özgüllükte; bizim biçem
 *      dosyamız kit CSS'inden SONRA yükleniyor, eşitlikte sonraki kazanır.
 *      Sıra ölçüldü: elementor-post-<kit> 10. sırada, yildiz-kisa-kodlar 11.
 *   2. Aşağıdaki bileşen kuralları `.yildiz-blok` önekiyle (0,2,0)'a çıkar,
 *      yani sıradan bağımsız olarak kazanır. Sıra bir gün değişse bile
 *      bileşenlerin kendi biçemi ayakta kalır.
 *
 * Yalnız DEVRALINAN özellikler sıfırlanır (yazı ölçüsü, satır yüksekliği,
 * dolgu). Renk sıfırlanmaz: bağlantı renginin temadan gelmesi doğru.
 */
.yildiz-blok a,
.yildiz-blok button {
	font-size: inherit;
	line-height: inherit;
	letter-spacing: normal;
	text-transform: none;
}

/*
 * DÜĞMELER ÜÇ DEĞİŞKENLE BOYANIR (gerekçe randevu-formu.css'te uzun uzun
 * yazılı; özeti: kitin `button:hover` kuralı (0,2,1) özgüllüğünde ve bizim
 * bileşen kurallarımızın (0,2,0) üstüne çıkıyor, yani fare üstünde galeri
 * okları beyaza dönüyordu). Boyama tek yerde toplanınca kit hiçbir durumda
 * araya giremiyor ve iki dosya aynı sözleşmeyi paylaşıyor.
 */
.yildiz-blok button {
	--yildiz-dugme-zemin: transparent;
	--yildiz-dugme-yazi: inherit;
	--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 );
	text-decoration: none;
}

.yildiz-blok button:hover,
.yildiz-blok button:focus {
	border-color: var( --yildiz-dugme-kenar );
	background: var( --yildiz-dugme-zemin );
	color: var( --yildiz-dugme-yazi );
}

/* Klavyeyle gezinen kullanıcı nerede olduğunu görmeli; fare kullanıcısına
   halka çıkmaz. */
.yildiz-blok a:focus-visible,
.yildiz-blok button:focus-visible {
	outline: 2px solid var( --yildiz-ana );
	outline-offset: 2px;
	border-radius: var( --yildiz-radius-kucuk );
}

/* --------------------------------------------------------------- HİZMETLER */

/*
 * KATEGORİLER IZGARAYA GİRER, ALT ALTA DİZİLMEZ.
 *
 * Tek sütunda kalan kart, 1250 piksellik bir Elementor konteynerinde satırı
 * o kadar uzatıyordu ki hizmet adı solda, fiyatı sağ uçta kalıyor ve göz
 * ikisini birleştiremiyordu; oysa fiyat listesinin tek işi o eşleşmeyi kolay
 * yapmak.
 *
 * Bu ızgara @container ile YAZILAMAZ: konteyner sorgusu kendi konteynerini
 * biçimlendiremez ve container-type tam da bu öğede tanımlı. Neyse ki
 * gerekmiyor da; minmax(min(24rem, 100%), 1fr) sorgusuz çalışıyor ve dar
 * sütunda kendiliğinden tek sütuna düşüyor.
 *
 * auto-fill, auto-fit DEĞİL: auto-fit boş rayları kaldırdığı için tek
 * kategorisi olan bir salonda kart yine 1250 piksele yayılırdı. auto-fill
 * rayı yerinde bırakır, tek kart da okunur genişlikte kalır.
 */
.yildiz-hizmetler {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( min( 24rem, 100% ), 1fr ) );
	gap: var( --yildiz-bosluk );
	align-items: start;
}

/*
 * Kategori KART olur, düz liste bölümü değil.
 *
 * Eskiden kategoriler alt alta açık listelerdi ve blok, Elementor
 * konteynerinin bütün genişliğine yayılan kenarlıksız bir tabloya
 * dönüşüyordu. Sayfanın geri kalanı kartlarla kuruluyken bu bölüm
 * "biçimlendirilmemiş içerik" gibi duruyordu. Kart, listeye bir kenar
 * veriyor ve fiyatları sayfanın kendi ritmine sokuyor.
 */
.yildiz-hizmet-grup {
	/*
	 * KART DA BİR KONTEYNER OLMALI.
	 *
	 * container-type yalnız .yildiz-blok üzerindeydi ve @container sorgusu
	 * bloğun TAMAMINI ölçüyordu. Hizmet listesi ise kategori kartlarından
	 * oluşan bir ızgara: blok 1250 piksel olsa da bir satırın gerçekte
	 * kullandığı yer 384 piksellik kart. Sorgu 1250'yi görüp "geniş" düzeni
	 * uyguluyor, ad, süre, fiyat ve iki düğme 384 piksele sıkışıp ÜST ÜSTE
	 * BİNİYORDU.
	 *
	 * Aynı adı taşıyan iç içe konteynerlerde sorgu EN YAKIN atayı çözüyor;
	 * kart da "yildiz" adıyla konteyner olunca satır kendi kabına bakıyor.
	 * Bu, "düzen sorgusu görünüm alanına değil konteynere bakmalı" dersinin
	 * bir adım derini: DOĞRU konteynere bakmalı.
	 */
	container-type: inline-size;
	container-name: yildiz;

	/* Aralığı ızgaranın gap'i veriyor; kartın kendi kenar boşluğu çift sayardı. */
	margin: 0;
	padding: 1.25rem;
	border-radius: var( --yildiz-radius );
	background: var( --yildiz-yuzey );
}

/*
 * Başlığın altındaki çizgi İNCE ve NÖTR.
 *
 * Kalın vurgu renkli çizgi listedeki fiyatlarla yarışıyordu: sayfada aynı
 * renkten iki güçlü işaret olunca göz önce çizgiye gidiyor, oysa satılan
 * şey fiyatın yanındaki hizmet. Vurgu rengi kısa bir parçaya çekildi
 * (::after), gerisi saç teli kalınlığında bir ayraç.
 */
.yildiz-hizmet-grup-ad {
	position: relative;
	margin: 0 0 0.75rem;
	padding-bottom: 0.6rem;
	border-bottom: 1px solid var( --yildiz-cizgi );
	font-size: 1.15em;
	letter-spacing: 0.01em;
	/* Kategori başlığı listeyle birlikte kaydırılırken görünür kalsın. */
	line-height: 1.3;
}

.yildiz-hizmet-grup-ad::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 2.5rem;
	height: 2px;
	border-radius: 2px;
	background: var( --yildiz-ana );
}

.yildiz-hizmet-liste {
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Hizmet satırı ızgarayla kurulur, flex ile değil.
 *
 * Dar ekranda ad uzun olduğunda flex düzeninde fiyat satırın sonuna itiliyor ve
 * ad ile fiyat birbirine giriyordu. Izgarada ad kendi sütununu tutar, süre ve
 * fiyat alt satıra iner; hiçbir zaman üst üste binmezler.
 */
.yildiz-hizmet {
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 0.3rem 0.75rem;
	padding: 0.75rem 0.6rem 0.75rem 1.35rem;
	border-bottom: 1px solid var( --yildiz-cizgi );
	border-radius: var( --yildiz-radius-kucuk );
	/* Fare üstünde satır hafifçe boyanır: uzun listede göz nerede olduğunu
	   kaybetmiyor ve satırın tıklanabilir olduğu anlaşılıyor. */
	transition: background 0.15s ease;
}

.yildiz-hizmet:hover {
	background: var( --yildiz-yuzey-hafif );
}

.yildiz-hizmet:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

/*
 * Satır işareti işaretlemeye DEĞİL biçeme yazılır.
 *
 * Kitin fiyat listesinde her satırın başında küçük bir simge var ve o
 * simge listeyi "tablo" olmaktan çıkarıp "menü" yapan şey. Aynı etkiyi
 * ::before ile alıyoruz; şablona tek bir öğe eklenmiyor, yani şablon, JS
 * ve Elementor stil kontrolleri arasındaki sözleşme aynen duruyor.
 *
 * Izgarada yer kaplamasın diye mutlak konumlu: satır iki sütunlu ızgara
 * ve akışa giren bir ::before üçüncü bir hücre açardı.
 */
.yildiz-hizmet::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.15rem;
	width: 0.4rem;
	height: 0.4rem;
	border-radius: 1px;
	background: var( --yildiz-ana );
	opacity: 0.55;
	transform: rotate( 45deg );
}

.yildiz-hizmet-ad {
	grid-column: 1;
	/*
	 * BOYUT VE RENK AÇIKÇA YAZILIR.
	 *
	 * Ölçüldü (kit kurulu canlı site): kitin başlık kuralları bu span'ı 34
	 * piksele çıkarıp griye (#797979) boyuyordu. Sonuç, satırın tamamını
	 * yutan soluk dev bir ad ve yanında kaybolan bir fiyat; liste "liste"
	 * olmaktan çıkıp dağınık bir yığına dönüyordu. em cinsinden değer
	 * kullanılmıyor: şişmiş bir mirasın üstüne çarpardı.
	 */
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.35;
	color: var( --yildiz-metin, inherit );
}

.yildiz-hizmet-sure {
	grid-column: 1;
	grid-row: 2;
	justify-self: start;
	/*
	 * Süre ROZET olur. Düz gri metin olarak adın altında dururken satırın
	 * neresinin ne olduğu belirsizdi; küçük bir kutu onu "etiket" yapıyor ve
	 * listeye rengi de o katıyor.
	 */
	padding: 0.15rem 0.5rem;
	border-radius: var( --yildiz-hap );
	background: var( --yildiz-yuzey-hafif );
	color: var( --yildiz-soluk );
	font-size: 0.8125rem;
	line-height: 1.4;
	white-space: nowrap;
}

.yildiz-hizmet-fiyat {
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: center;
	font-family: var( --yildiz-vurgu-yazi );
	/*
	 * Fiyat ADDAN daha küçük olmamalı. Listeye bakan kişinin aradığı iki
	 * şey var: ne ve kaç para. İkincisi ölçüldüğünde adın yarısı kadardı.
	 */
	font-size: 1.1875rem;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	color: var( --yildiz-ana );
}

.yildiz-hizmet-aciklama {
	grid-column: 1 / -1;
	margin: 0.25rem 0 0;
	color: var( --yildiz-soluk );
	font-size: 0.9em;
}

/*
 * GENİŞ KONTEYNERDE SATIR TEK SATIRA İNER.
 *
 * Ad, süre rozeti, fiyat ve iki düğme aynı hizada durur; düğmeler için ayrı
 * bir alt satır açılmaz. Ölçüldü: eski düzende her satır 127 piksel
 * yüksekliğindeydi ve on üç hizmetlik bir kategori kartı ekranlar boyu
 * uzuyordu. Listenin "dağınık" görünmesinin asıl sebebi buydu: her kalem
 * üç satıra yayılınca göz nerede bir kalemin bittiğini bulamıyor.
 */
@container yildiz ( min-width: 34rem ) {
	.yildiz-hizmet {
		grid-template-columns: 1fr auto auto auto;
		align-items: center;
		column-gap: 0.85rem;
	}

	.yildiz-hizmet-ad {
		grid-column: 1;
		grid-row: 1;
	}

	.yildiz-hizmet-sure {
		grid-column: 2;
		grid-row: 1;
	}

	.yildiz-hizmet-fiyat {
		grid-column: 3;
		grid-row: 1;
		/* Fiyatlar alt alta hizalanmalı: kolon gibi okunuyor. */
		min-width: 5.5rem;
		text-align: right;
	}

	.yildiz-hizmet-dugmeler {
		grid-column: 4;
		grid-row: 1;
		margin: 0;
		flex-wrap: nowrap;
	}

	.yildiz-hizmet-aciklama {
		grid-column: 1 / -1;
		grid-row: 2;
	}
}

/* ------------------------------------------------------------------ GALERİ */

/*
 * Telefonda TEK sütun.
 *
 * Kart içinde öncesi ve sonrası yan yana duruyor; iki sütunlu bir ızgarada
 * 360 piksellik ekranda her görsel 80 piksele düşüyor ve sonuç görünmüyordu.
 * Galerinin bütün değeri farkın görülebilmesi.
 */
.yildiz-galeri {
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --yildiz-bosluk );
	margin: 0;
	padding: 0;
	list-style: none;
}

@container yildiz ( min-width: 30rem ) {
	.yildiz-galeri {
		grid-template-columns: repeat( auto-fill, minmax( 15rem, 1fr ) );
	}
}

.yildiz-galeri-kart {
	margin: 0;
}

/*
 * Öncesi/sonrası şeridi: her görsel tam genişlikte, parmakla kaydırılıyor.
 *
 * Kaydırma tamamen CSS scroll-snap ile: dokunmatik ivme, kaydırma çubuğu ve
 * klavyeyle gezinme tarayıcının kendi işi. Betik yalnız noktaları
 * güncelliyor, kaydırmanın kendisi betiksiz de çalışıyor.
 */
.yildiz-galeri-serit {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	/* Şerit yatay kayarken sayfanın dikey kaydırmasını çalmasın. */
	overscroll-behavior-x: contain;
	border-radius: var( --yildiz-radius );
	/* Kaydırma çubuğu kartın altında bant bırakmasın. */
	scrollbar-width: none;
}

.yildiz-galeri-serit::-webkit-scrollbar {
	display: none;
}

.yildiz-galeri-ikili {
	display: flex;
	gap: 0;
	margin: 0;
}

.yildiz-galeri-ikili > * {
	flex: 0 0 100%;
	scroll-snap-align: center;
	scroll-snap-stop: always;
}

/* Şerit ve okların ortak kabı; oklar buna göre konumlanır. */
.yildiz-galeri-kutu {
	position: relative;
}

/*
 * Oklar masaüstünde şeridin varlığını GÖSTEREN tek işaret.
 *
 * Kaydırma çubuğu gizli, sürükleme yok ve fare tekerleği dikey kaydırıyor;
 * oklar olmadan kullanıcı ikinci görselin varlığını fark etmiyordu.
 * Dokunmatikte parmakla kaydırma zaten çalışıyor ama oklar orada da zarar
 * vermiyor, yalnız küçülüyor.
 */
.yildiz-blok .yildiz-galeri-ok {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	/*
	 * 2.75rem = 44 piksel, dokunma hedefi alt sınırı.
	 *
	 * Bu düğmeler uzun süre 40 pikseldi ve kimse fark etmedi, çünkü BETİK
	 * HİÇ ÇALIŞMIYORDU (satır içi JS'i wptexturize bozuyordu); tıklanan bir
	 * şey olmadığı için boyutu da kimseyi rahatsız etmiyordu. Betik gerçekten
	 * çalışmaya başlayınca ölçü de gerçek bir sorun hâline geldi.
	 */
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	/*
	 * Ok VURGU RENGİNDE, beyaz değil.
	 *
	 * Beyaz daire her fotoğrafın üstünde okunuyordu ama sayfaya ait
	 * değildi; kitin galerisinde ok, markanın kendi renginde bir madalyon.
	 * Fotoğraf zeminine karşı ayrım artık yalnız renge bırakılmıyor:
	 * gölge ve ince beyaz halka her iki durumda da sınırı çiziyor.
	 */
	--yildiz-dugme-zemin: var( --yildiz-ana-dolgu );
	--yildiz-dugme-yazi: var( --yildiz-ana-yazi );
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	box-shadow:
		0 0 0 2px rgba( 255, 255, 255, 0.85 ),
		0 2px 8px rgba( 0, 0, 0, 0.3 );
	touch-action: manipulation;
}

.yildiz-blok .yildiz-galeri-geri { left: 0.5rem; }
.yildiz-blok .yildiz-galeri-ileri { right: 0.5rem; }

.yildiz-blok .yildiz-galeri-ok[disabled] {
	opacity: 0;
	pointer-events: none;
}

.yildiz-blok .yildiz-galeri-noktalar {
	display: flex;
	justify-content: center;
	gap: 0.35rem;
	margin-top: 0.6rem;
}

/*
 * Nokta bir düğme: göstergenin yanında gezinme aracı. Dokunma hedefi görünen
 * noktadan büyük tutulur, yoksa telefonda vurulamıyor.
 */
/*
 * GÖRÜNEN NOKTA KÜÇÜK, DOKUNULAN ALAN BÜYÜK.
 *
 * Göstergenin küçük olması tasarımın kendisi: büyük daireler kartın altını
 * gereksiz ağırlaştırıyor. Ama dokunma hedefi 24 piksel kalınca parmakla
 * ıskalanıyor. Çözüm ikisini ayırmak: düğme 44 piksel, içindeki ::before
 * noktası hâlâ 7 piksel. Kutu görünmez olduğu için tasarım değişmiyor.
 */
.yildiz-blok .yildiz-galeri-nokta {
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	position: relative;
	touch-action: manipulation;
}

.yildiz-blok .yildiz-galeri-nokta::before {
	content: "";
	position: absolute;
	inset: 50% auto auto 50%;
	width: 0.45rem;
	height: 0.45rem;
	transform: translate( -50%, -50% );
	border-radius: 50%;
	background: var( --yildiz-cizgi );
	transition: background 0.2s ease, transform 0.2s ease;
}

.yildiz-blok .yildiz-galeri-nokta.yildiz-acik::before {
	background: var( --yildiz-ana );
	transform: translate( -50%, -50% ) scale( 1.3 );
}

@media ( prefers-reduced-motion: reduce ) {
	.yildiz-galeri-nokta::before {
		transition: none;
	}

	.yildiz-galeri-serit {
		scroll-behavior: auto;
	}
}

/* Kartın hizmet rozetleri: galeriye bakan müşteri hangi işlem olduğunu
   görmeden randevu adımına geçemiyordu. */
.yildiz-galeri-hizmetler {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
	margin: 0.6rem 0 0;
}

.yildiz-galeri-hizmet {
	padding: 0.15rem 0.55rem;
	border: 1px solid var( --yildiz-cizgi );
	border-radius: 99px;
	color: var( --yildiz-soluk );
	font-size: 0.8em;
	line-height: 1.6;
}

.yildiz-blok .yildiz-galeri-buyut {
	position: relative;
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var( --yildiz-radius );
	overflow: hidden;
	--yildiz-dugme-zemin: var( --yildiz-yumusak );
	line-height: 0;
	cursor: zoom-in;
	/* Dokunmada gecikmeyi kaldırır ve çift dokunuş yakınlaştırmasını engeller. */
	touch-action: manipulation;
}

.yildiz-galeri-gorsel,
.yildiz-blok .yildiz-galeri-buyut img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var( --yildiz-galeri-oran );
	object-fit: cover;
	transition: transform 0.25s ease;
}

@media ( hover: hover ) {
	.yildiz-galeri-buyut:hover img {
		transform: scale( 1.03 );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.yildiz-galeri-gorsel,
	.yildiz-galeri-buyut img {
		transition: none;
	}

	.yildiz-galeri-buyut:hover img {
		transform: none;
	}
}

.yildiz-galeri-etiket {
	position: absolute;
	left: 0.4rem;
	bottom: 0.4rem;
	padding: 0.15rem 0.5rem;
	border-radius: 99px;
	background: rgba( 0, 0, 0, 0.66 );
	color: #fff;
	font-size: 0.7rem;
	line-height: 1.6;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.yildiz-galeri-baslik {
	margin: 0.35rem 0 0;
	font-size: 0.925em;
	color: var( --yildiz-soluk );
}

/* -------------------------------------------------------------- BÜYÜTEÇ */

.yildiz-buyutec {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	background: rgba( 0, 0, 0, 0.9 );
	/* Telefonda tarayıcı çubuğu yüksekliği değişince kutu zıplamasın. */
	overscroll-behavior: contain;
}

.yildiz-buyutec[hidden] {
	display: none;
}

.yildiz-buyutec-ic {
	margin: 0;
	max-width: min( 94vw, 68rem );
	text-align: center;
}

.yildiz-buyutec-ic img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 78vh;
	border-radius: var( --yildiz-radius-kucuk );
}

.yildiz-buyutec figcaption {
	margin-top: 0.75rem;
	color: #fff;
	font-size: 0.9rem;
}

/* Kapatma düğmesi başparmakla rahat vurulacak boyutta. */
.yildiz-blok .yildiz-buyutec-kapat {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.14 );
	color: #fff;
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
}

.yildiz-blok .yildiz-buyutec-kapat:hover,
.yildiz-blok .yildiz-buyutec-kapat:focus-visible {
	background: rgba( 255, 255, 255, 0.28 );
}

/* ------------------------------------------------------------------ SAATLER */

/*
 * Kenarlık yerine YÜZEY.
 *
 * Kenarlıklı ve şeffaf bir kutu, kitin kendi kartlarının yanında "çerçeve
 * çizilmiş boşluk" gibi duruyordu; kitte kartlar dolgu ile ayrılıyor,
 * çizgiyle değil. Kenarlık tamamen atılmıyor ama saydamlaşıyor: yüzey ile
 * sayfa aynı renge düştüğünde (salon zemini ayardan değiştirirse) kutu
 * yine de sınırını gösterebilsin.
 */
.yildiz-saatler-kutu {
	padding: 1.35rem;
	border: 1px solid transparent;
	border-radius: var( --yildiz-radius );
	background: var( --yildiz-yuzey );
}

.yildiz-durum {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0;
	font-weight: 700;
}

.yildiz-durum::before {
	content: "";
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	background: currentColor;
	flex: 0 0 auto;
}

.yildiz-durum-acik {
	color: var( --yildiz-basari );
}

.yildiz-durum-kapali {
	color: var( --yildiz-hata );
}

.yildiz-durum-not {
	margin: 0.3rem 0 0;
	color: var( --yildiz-soluk );
	font-size: 0.9em;
}

.yildiz-saatler {
	width: 100%;
	margin: 0.85rem 0 0;
	border-collapse: collapse;
}

.yildiz-saatler th,
.yildiz-saatler td {
	/* Satır yüksekliği dokunma hedefi ölçüsünde tutulur. */
	padding: 0.6rem 0.35rem;
	border-bottom: 1px solid var( --yildiz-cizgi );
	font-weight: 400;
	text-align: left;
}

.yildiz-saatler tr:last-child th,
.yildiz-saatler tr:last-child td {
	border-bottom: 0;
}

.yildiz-saatler td {
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/*
 * Bugünün satırı yalnız kalın yazıyla değil sol şeritle de işaretlenir:
 * kalınlık tek başına renk körlüğünden bağımsız ama küçük ekranda zayıf bir
 * sinyal ve tabloya göz atan kullanıcı kaçırıyor.
 */
.yildiz-saat-bugun {
	background: var( --yildiz-yumusak );
	font-weight: 700;
}

.yildiz-saat-bugun th {
	position: relative;
	padding-left: 0.75rem;
}

.yildiz-saat-bugun th::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5rem;
	bottom: 0.5rem;
	width: 3px;
	border-radius: 2px;
	background: var( --yildiz-ana );
}

.yildiz-rozet {
	display: inline-block;
	margin-left: 0.4rem;
	padding: 0.05rem 0.45rem;
	border: 1px solid currentColor;
	border-radius: 99px;
	color: var( --yildiz-ana );
	font-size: 0.68rem;
	letter-spacing: 0.05em;
	vertical-align: middle;
}

.yildiz-kapali-metin {
	color: var( --yildiz-soluk );
	font-weight: 400;
}

/* ----------------------------------------------------------------- İLETİŞİM */

.yildiz-iletisim {
	display: grid;
	gap: 0.85rem;
	max-width: var( --yildiz-en );
	padding: 1.35rem;
	border: 1px solid transparent;
	border-radius: var( --yildiz-radius );
	background: var( --yildiz-yuzey );
}

.yildiz-iletisim p {
	margin: 0;
}

.yildiz-adres {
	margin: 0;
	color: var( --yildiz-soluk );
	font-style: normal;
}

.yildiz-blok .yildiz-tel {
	display: inline-block;
	/* Numara telefonda tek dokunuşla aranacak; hedef büyük olmalı. */
	min-height: 2.75rem;
	padding: 0.5rem 0;
	color: var( --yildiz-ana );
	font-family: var( --yildiz-vurgu-yazi );
	font-size: 1.45em;
	font-weight: 700;
	text-decoration: none;
	font-variant-numeric: tabular-nums;
}

.yildiz-blok .yildiz-tel:hover,
.yildiz-blok .yildiz-tel:focus-visible {
	text-decoration: underline;
}

/*
 * WhatsApp düğmesi telefonda TAM GENİŞLİK.
 *
 * Sayfanın asıl eylemi bu; dar ekranda metin genişliğinde bir düğme hem zor
 * vuruluyor hem de eylem gibi görünmüyor.
 */
.yildiz-blok .yildiz-wa {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	padding: 0.85rem 1.6rem;
	/* Hap biçimi: kitin bütün eylem düğmeleri tam yuvarlak. */
	border-radius: var( --yildiz-hap );
	background: var( --yildiz-wa );
	/* Yeşilin üstünde koyu yazı beyazdan daha okunur. */
	color: #08331a;
	font-weight: 700;
	text-decoration: none;
	text-align: center;
}

/*
 * "Yol tarifi al" bağlantısı. İşaretlemede bu sınıf vardı ama burada bir
 * kuralı YOKTU ve dosyanın başındaki sözleşme "işaretlemedeki her sınıfın
 * burada bir kuralı vardır" diyor. Bedeli görünürdü: bağlantı temanın
 * biçemine kalmıştı ve bir salon kitinde 48 piksellik bir başlığa dönüşüp
 * iletişim kutusunu eziyordu.
 */
.yildiz-blok .yildiz-harita {
	justify-self: start;
	min-height: 2.75rem;
	padding: 0.5rem 0;
	color: var( --yildiz-ana );
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.yildiz-blok .yildiz-harita:hover,
.yildiz-blok .yildiz-harita:focus-visible {
	text-decoration-thickness: 2px;
}

.yildiz-blok .yildiz-wa:hover,
.yildiz-blok .yildiz-wa:focus-visible {
	filter: brightness( 0.94 );
	color: #05230f;
}

.yildiz-ikon {
	flex: 0 0 auto;
}

@container yildiz ( min-width: 26rem ) {
	.yildiz-wa {
		display: inline-flex;
		justify-self: start;
	}
}

/* ------------------------------------------------------------ İPTAL SAYFASI */

.yildiz-iptal {
	max-width: var( --yildiz-en );
	padding: 1.5rem;
	border: 1px solid transparent;
	border-radius: var( --yildiz-radius );
	background: var( --yildiz-yuzey );
}

.yildiz-iptal-durum {
	margin: 0;
	color: var( --yildiz-soluk );
}

.yildiz-iptal-durum:empty {
	display: none;
}

.yildiz-iptal-hata {
	color: var( --yildiz-hata );
	font-weight: 600;
}

/*
 * Özet dar ekranda alt alta, geniş ekranda etiket + değer olarak yan yana.
 * Telefonda iki sütun zorlamak "Personel" gibi uzun etiketleri kırıyor ve
 * değerleri okunmaz hâle getiriyordu.
 */
.yildiz-iptal-ozet {
	margin: 0.75rem 0 0;
}

.yildiz-iptal-satir {
	display: grid;
	gap: 0 1rem;
	padding: 0.55rem 0;
	border-bottom: 1px solid var( --yildiz-cizgi );
}

.yildiz-iptal-satir:last-child {
	border-bottom: 0;
}

.yildiz-iptal-satir dt {
	margin: 0;
	color: var( --yildiz-soluk );
	font-size: 0.875em;
}

.yildiz-iptal-satir dd {
	margin: 0;
	font-weight: 600;
}

@container yildiz ( min-width: 26rem ) {
	.yildiz-iptal-satir {
		grid-template-columns: 9rem 1fr;
		align-items: baseline;
	}

	.yildiz-iptal-satir dt {
		font-size: 1em;
	}
}

/*
 * PAKET ZİNCİRİ. Kutu sunucuda BOŞ ve hidden basılıyor, betik dolduruyor:
 * içeriği randevuya özel ve bu sayfanın HTML'i her ziyaretçi için aynı olmak
 * zorunda (sayfa önbelleği bir müşterinin randevusunu başkasına servis
 * edemesin).
 */
.yildiz-iptal-plan {
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid var( --yildiz-cizgi );
}

.yildiz-iptal-plan-baslik {
	margin: 0 0 0.625rem;
	font-size: 1rem;
}

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

/*
 * Satır SARMALANIR, sorgu kullanılmaz: dar kapta personel adı alt satıra
 * iniyor, geniş kapta üçü yan yana kalıyor. Saatler tabular-nums ile alt alta
 * hizalanıyor ve zincirin arka arkaya geldiği o hizadan görünüyor.
 */
.yildiz-iptal-plan-satir {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.125rem 0.75rem;
}

.yildiz-iptal-plan-saat {
	flex: none;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.yildiz-iptal-plan-hizmet {
	flex: 1 1 8rem;
	min-width: 0;
	overflow-wrap: anywhere;
}

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

/*
 * Kapsam uyarısı listenin SONUNDA: müşteri önce ne aldığını okuyor, sonra
 * iptalin bunların hepsini götüreceğini. Başa konsaydı, henüz neyden
 * bahsedildiğini bilmeden okunurdu.
 */
.yildiz-iptal-plan-uyari {
	margin-top: 0.25rem;
	font-size: 0.9375em;
}

.yildiz-iptal-eylem {
	display: grid;
	gap: 0.5rem;
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid var( --yildiz-cizgi );
}

.yildiz-blok .yildiz-iptal-sebep-etiket {
	color: var( --yildiz-soluk );
	font-size: 0.9em;
}

.yildiz-blok .yildiz-iptal-sebep {
	width: 100%;
	padding: 0.6rem 0.7rem;
	border: 1px solid var( --yildiz-cizgi );
	border-radius: var( --yildiz-radius-kucuk );
	background: transparent;
	color: inherit;
	font: inherit;
	resize: vertical;
}

/*
 * İptal düğmesi telefonda tam genişlik ve dokunma ölçüsünde.
 *
 * Yıkıcı bir eylem olduğu için vurgu rengiyle DEĞİL, hata rengiyle çizilir:
 * müşteri yanlışlıkla basmamalı. Onay ayrıca soruluyor.
 */
/*
 * İptal düğmesi HAP değil köşeli kalır ve dolgusuz durur.
 *
 * Sayfadaki bütün eylem düğmeleri hap; bu düğme geri alınamaz bir işlem
 * yapıyor ve KASTEN o aileden ayrı duruyor. Aynı biçimi taşısaydı
 * "devam et" düğmelerinin refleksiyle basılırdı.
 */
.yildiz-blok .yildiz-iptal-dugme {
	min-height: 2.75rem;
	padding: 0.75rem 1.25rem;
	--yildiz-dugme-kenar: var( --yildiz-hata );
	--yildiz-dugme-zemin: transparent;
	--yildiz-dugme-yazi: var( --yildiz-hata );
	border-width: 1px;
	border-style: solid;
	border-radius: var( --yildiz-radius-kucuk );
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	touch-action: manipulation;
}

.yildiz-blok .yildiz-iptal-dugme:hover:not( [disabled] ),
.yildiz-blok .yildiz-iptal-dugme:focus-visible {
	--yildiz-dugme-zemin: var( --yildiz-hata );
	--yildiz-dugme-yazi: #fff;
}

.yildiz-blok .yildiz-iptal-dugme[disabled] {
	opacity: 0.6;
	cursor: default;
}

.yildiz-iptal-basarili {
	margin: 0;
	padding: 0.75rem 1rem;
	border-left: 3px solid var( --yildiz-basari );
	background: var( --yildiz-yumusak );
	color: var( --yildiz-basari );
	font-weight: 600;
}

.yildiz-iptal-yardim {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
	margin-top: 1.25rem;
	padding-top: 1rem;
	border-top: 1px solid var( --yildiz-cizgi );
	color: var( --yildiz-soluk );
	font-size: 0.925em;
}

@container yildiz ( min-width: 26rem ) {
	.yildiz-iptal-dugme {
		justify-self: start;
	}
}

/* ------------------------------------------------------ YÜKSEK KONTRAST */

/*
 * Kullanıcı işletim sisteminden yüksek kontrast istediyse türetilmiş soluk
 * tonlar yeterli olmayabilir; çizgiler ve metin tam kontrasta çekilir.
 */
@media ( prefers-contrast: more ) {
	.yildiz-blok {
		--yildiz-cizgi: currentColor;
		--yildiz-soluk: currentColor;
	}
}

/* =========================================================== HİZMET SAYFASI
 *
 * Bu bölüm iki şeyi biçimlendiriyor:
 *
 *   1. Hizmet LİSTESİNE eklenen simge ve iki düğme (incele / randevu al)
 *   2. Hizmet DETAY sayfasının kendisi (/hizmetler/sac-kesimi/)
 *
 * Sözleşme (dosyanın başındaki listeye ek):
 *
 *   .yildiz-hizmet-ikonlu        simgesi olan liste satırı
 *   .yildiz-hizmet-ikon          satır başındaki simge
 *   .yildiz-hizmet-dugmeler      satır altındaki düğme çifti
 *   .yildiz-hizmet-incele        ikincil bağlantı
 *   .yildiz-hizmet-al            birincil düğme
 *   .yildiz-dugme                ortak düğme tabanı (bağlantı olarak da)
 *   .yildiz-hizmet-sayfa         detay sayfası kökü
 *     .yildiz-hizmet-duzen       içerik + yan sütun ızgarası
 *     .yildiz-hizmet-icerik      ana sütun
 *     .yildiz-hizmet-yan         yan sütun
 *     .yildiz-yan-kutu           yan sütundaki kart
 */

/*
 * ORTAK DÜĞME TABANI.
 *
 * .yildiz-dugme randevu formunun biçeminde tanımlıydı ama YALNIZ
 * .yildiz-randevu kökünün altında. Hizmet listesi ve hizmet sayfası o dosyayı
 * hiç yüklemiyor; düğme bu sayfalarda çıplak bir bağlantı olarak kalıyordu.
 * Taban buraya taşınmadı, İKİNCİ BİR KÖK ALTINDA tanımlandı: iki dosya da
 * kendi kökünü boyuyor, ortak dosya diye üçüncü bir istek açılmıyor.
 *
 * Boyama üç değişkenle: kitin `.elementor-kit-N a` kuralı (0,1,1) bizim tek
 * sınıflı kuralımızı (0,1,0) yeniyor ve düğmeler beyaz yazı + saydam zemine
 * düşüyordu. Değişken kendi başına basamaklandığı için kit araya giremiyor.
 */
.yildiz-blok .yildiz-dugme {
	--yildiz-dugme-zemin: var( --yildiz-ana-dolgu );
	--yildiz-dugme-yazi: var( --yildiz-ana-yazi );
	--yildiz-dugme-kenar: transparent;

	/*
	 * YAZI BOYUTU MİRAS ALINMAZ, YAZILIR.
	 *
	 * Ölçüldü (canlı kit kurulumu): kitin `.elementor-kit-N a` kuralı
	 * özgüllük olarak (0,1,1) ve bizim `.yildiz-blok a { font-size: inherit }`
	 * kuralımızla EŞİT; kit sonra yüklendiği için kazanıyordu ve düğme
	 * yazısı 48 piksele çıkıp iki satıra sarıyordu. Bu seçici (0,2,0), yani
	 * kiti geçiyor. Değer rem cinsinden: em olsaydı şişmiş bir miras
	 * değerinin üstüne çarpardı ve sorun sessizce geri gelirdi.
	 */
	font-size: 1rem;
	/*
	 * YAZI TİPİ DE YAZILIR, yalnız boyut yetmiyor. Kitin `.elementor-kit-N a`
	 * kuralı font-family'yi de veriyor ve düğmeler sayfanın başlık serifiyle
	 * çiziliyordu; ölçüldü, "İncele" Cormorant Garamond olarak geliyordu.
	 */
	font-family: inherit;
	line-height: 1.2;
	/*
	 * Düğme metni SARMAZ. Dar bir sütunda "Randevu al" iki satıra bölünüp
	 * düğmeyi kare bir bloğa çeviriyordu; iki kelimelik bir eylem etiketinin
	 * sarması, düğmeyi düğme gibi göstermiyor. Uzun etiketli bir çeviride
	 * düğme kutudan taşmasın diye sarma yerine küçülme tercih edilmiyor:
	 * kap zaten esnek ve alt çağrı satırı geniş ekranda yan yana, dar
	 * ekranda alt alta diziliyor.
	 */
	white-space: nowrap;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	/* Dokunma hedefi en az 44 piksel. */
	min-height: 2.75rem;
	padding: 0.7rem 1.5rem;
	border: 1px solid var( --yildiz-dugme-kenar );
	border-radius: var( --yildiz-hap );
	background: var( --yildiz-dugme-zemin );
	color: var( --yildiz-dugme-yazi );
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	touch-action: manipulation;
}

.yildiz-blok .yildiz-dugme:hover,
.yildiz-blok .yildiz-dugme:focus {
	background: var( --yildiz-dugme-zemin );
	color: var( --yildiz-dugme-yazi );
	text-decoration: none;
}

/* ---------------------------------------------------- LİSTEDEKİ SİMGE */

/*
 * Simge mutlak konumlu, tıpkı yerini aldığı ::before baklavası gibi: satır
 * iki sütunlu bir ızgara ve akışa giren bir öğe üçüncü bir hücre açardı.
 */
.yildiz-hizmet-ikonlu {
	padding-left: 2.6rem;
}

.yildiz-hizmet-ikonlu::before {
	display: none;
}

.yildiz-hizmet-ikon {
	position: absolute;
	left: 0;
	top: 0.6rem;
	width: 1.9rem;
	height: 1.9rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var( --yildiz-radius-kucuk );
	background: var( --yildiz-yuzey-hafif );
	overflow: hidden;
}

.yildiz-hizmet-ikon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* -------------------------------------------------- LİSTEDEKİ DÜĞMELER */

.yildiz-hizmet-dugmeler {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 0.5rem 0 0;
}

/*
 * "İncele" düğme DEĞİL bağlantı.
 *
 * İki eşit ağırlıkta düğme koymak, hangisinin asıl eylem olduğunu
 * belirsizleştiriyor; listenin işi randevuya götürmek. İncele ikincil kalır
 * ama dokunma hedefi yine 44 piksel.
 */
/*
 * "İNCELE" ARTIK BAĞLANTI DEĞİL, ÇERÇEVELİ DÜĞME.
 *
 * Altı çizili bir bağlantı olarak duruyordu ve kitin serif yazısıyla
 * birleşince neredeyse görünmezdi; kullanıcı onu tıklanabilir bir şey olarak
 * fark etmiyordu. Çerçeve onu düğme yapıyor ama dolgusu yok: birincil eylem
 * hâlâ "Randevu al" ve iki dolu düğme yan yana durunca hangisinin asıl iş
 * olduğu belirsizleşirdi.
 */
.yildiz-blok .yildiz-hizmet-incele {
	--yildiz-dugme-kenar: var( --yildiz-ana );

	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.5rem;
	padding: 0.45rem 1.1rem;
	border: 1px solid var( --yildiz-dugme-kenar );
	border-radius: var( --yildiz-hap );
	background: transparent;
	color: var( --yildiz-ana );
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
}

.yildiz-blok .yildiz-hizmet-incele:hover,
.yildiz-blok .yildiz-hizmet-incele:focus {
	background: var( --yildiz-yuzey );
	color: var( --yildiz-ana );
}

/*
 * Listedeki iki düğme AYNI ÖLÇÜDE olmalı. Bu sınıf iki ayrı yerde
 * boyanıyordu (biri 0.9375rem, öteki 0.95em) ve sonuç 15 piksele karşı 17
 * pikseldi; yan yana duran iki düğmenin farklı boyda olması listeyi
 * "dağınık" gösteren şeylerden biriydi. Tek kural, "İncele" ile aynı ölçü.
 */
.yildiz-blok .yildiz-hizmet-al {
	min-height: 2.5rem;
	padding: 0.45rem 1.2rem;
	font-size: 0.9375rem;
}

/* ====================================================== DETAY SAYFASI */

.yildiz-hizmet-sayfa {
	/*
	 * SABİT GENİŞLİK VERİLMEZ. Dış genişliği temanın ya da Elementor
	 * konteynerinin kendisi belirliyor; buraya bir max-width yazmak, dar bir
	 * sütuna konan sayfayı iki kez daraltır ve geniş temada içeriği ortada
	 * asılı bırakırdı. Blok genişlik sözleşmesi --yildiz-en üzerinden.
	 */
	max-width: var( --yildiz-en );
	margin-inline: auto;
}

/*
 * MOBİL ÖNCE: tek sütun. Yan sütun içeriğin ALTINA düşer, çünkü telefonda
 * "tüm hizmetler" listesini asıl metnin önüne koymak, ziyaretçiyi geldiği
 * hizmetten uzaklaştırıyor.
 */
.yildiz-hizmet-duzen {
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --yildiz-bosluk );
	align-items: start;
}

/*
 * Geniş düzen @container ile: kısa kod Elementor'ün dar bir sütununda
 * durabiliyor ve ekran genişliği o sütunun genişliğini bilmiyor.
 */
/*
 * EŞİK 46rem (736px), 52rem DEĞİL.
 *
 * Ölçüldü: WordPress temalarının "sınırlandırılmış" içerik sütunu yaygın
 * olarak 800 piksel ve 52rem = 832 piksel bunu KIL PAYI kaçırıyordu; 800
 * piksellik bir alanda yan sütun rahat sığarken sayfa tek sütuna düşüyordu.
 * 736 pikselde yan sütun 19rem, içeriğe 480 piksel kalıyor.
 */
@container yildiz ( min-width: 46rem ) {
	.yildiz-hizmet-duzen {
		grid-template-columns: minmax( 0, 1fr ) 19rem;
	}

	.yildiz-hizmet-yan {
		position: sticky;
		top: 1.5rem;
	}
}

.yildiz-hizmet-icerik {
	min-width: 0;
}

/* ------------------------------------------------------------ KIRINTI */

.yildiz-yol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-bottom: 0.9rem;
	color: var( --yildiz-soluk );
	font-size: 0.875em;
}

.yildiz-blok .yildiz-yol a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid var( --yildiz-cizgi );
}

/* -------------------------------------------------------------- KAPAK */

.yildiz-hizmet-kapak {
	margin: 0 0 1.2rem;
	border-radius: var( --yildiz-radius );
	overflow: hidden;
	background: var( --yildiz-yuzey-hafif );
}

/*
 * KAPAK GÖRSELİ KIRPILMAZ (contain), KIRPILIRSA (cover) İŞİN KENDİSİ GİDİYOR.
 *
 * cover, kareyi doldurmak için fotoğrafın kenarlarını kesiyor; salonun
 * yüklediği çalışma fotoğraflarında kesilen yer çoğu zaman işin görüldüğü
 * yer oluyordu. contain fotoğrafın tamamını gösterir, oran tutmadığında
 * yanlarda boşluk kalır ve o boşluk yüzey rengiyle dolar.
 */
.yildiz-hizmet-kapak-gorsel {
	display: block;
	width: 100%;
	height: auto;
	/* Dikey fotoğraf sayfayı ekranlar boyu uzatıyordu; oran sabitlenir. */
	aspect-ratio: var( --yildiz-kapak-oran );
	object-fit: contain;
	object-position: center center;
}

/* ------------------------------------------------------------- BAŞLIK */

.yildiz-hizmet-basi {
	margin-bottom: 1.2rem;
}

.yildiz-hizmet-basi .yildiz-hizmet-ikon {
	position: static;
	width: 3rem;
	height: 3rem;
	margin-bottom: 0.6rem;
	background: var( --yildiz-yuzey );
}

/*
 * SINIF ADI ÇAKIŞMASI: detay sayfasının h1'i ile LİSTEDEKİ hizmet adı aynı
 * sınıfı taşıyor (.yildiz-hizmet-ad). Bu kural kapsamsız yazıldığında, dosyada
 * sonra geldiği için listedeki adı da 1.9em'e çıkarıyordu; ölçüldü, kit
 * kurulu sitede 34 piksel. Kural detay başlığının kabına bağlanır.
 */
.yildiz-hizmet-basi .yildiz-hizmet-ad {
	margin: 0 0 0.6rem;
	/*
	 * Sayfanın h1'i. em DEĞİL rem: em, kabın miras aldığı boyutun üstüne
	 * çarpıyor ve kit kurulumlarında öngörülemez büyüyordu.
	 */
	font-size: 2.4rem;
	line-height: 1.12;
}

@container yildiz ( min-width: 46rem ) {
	.yildiz-hizmet-basi .yildiz-hizmet-ad {
		font-size: 2.9rem;
	}
}

/*
 * Künye: kategori, süre ve fiyat tek şeritte.
 *
 * Bu üç değer sayfanın en çok bakılan yeri ve SUNUCUDA basılıyor; "kaç TL"
 * sorusunun cevabı JavaScript arkasında kalsaydı ne arama motoru ne de dil
 * modeli görebilirdi.
 */
.yildiz-hizmet-kunye {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
}

.yildiz-hizmet-kunye li {
	display: inline-flex;
	align-items: baseline;
	gap: 0.35rem;
	padding: 0.4rem 0.8rem;
	border-radius: var( --yildiz-hap );
	background: var( --yildiz-yuzey );
	font-size: 0.9em;
}

.yildiz-kunye-etiket {
	color: var( --yildiz-soluk );
}

.yildiz-kunye-deger {
	font-weight: 700;
}

.yildiz-hizmet-kunye .yildiz-kunye-fiyat .yildiz-kunye-deger {
	color: var( --yildiz-ana );
	font-family: var( --yildiz-vurgu-yazi );
	font-variant-numeric: tabular-nums;
}

.yildiz-hizmet-eylem {
	margin: 0;
}

.yildiz-hizmet-kapali {
	margin: 0;
}

/* -------------------------------------------------------------- METİN */

.yildiz-hizmet-metin {
	margin-bottom: 1.5rem;
	line-height: 1.7;
}

.yildiz-hizmet-metin > :first-child {
	margin-top: 0;
}

.yildiz-hizmet-metin > :last-child {
	margin-bottom: 0;
}

/* ------------------------------------------------------------- GALERİ */

.yildiz-hizmet-galeri {
	margin-bottom: 1.5rem;
}

.yildiz-hizmet-galeri .yildiz-baslik {
	margin-bottom: 0.8rem;
}

/*
 * Detay sayfasındaki galeri bloğu kendi kartını taşımıyor: sayfa zaten
 * bölümlere ayrılmış ve kart içinde kart, kenarlığı iki kez çiziyor.
 */
.yildiz-hizmet-galeri .yildiz-galeri-blok {
	padding: 0;
	background: none;
}

/* ---------------------------------------------------------- ALT ÇAĞRI */

.yildiz-hizmet-alt-cagri {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.8rem;
	padding: 1.25rem;
	border-radius: var( --yildiz-radius );
	background: var( --yildiz-yuzey );
}

.yildiz-hizmet-alt-metin {
	margin: 0;
	color: var( --yildiz-soluk );
}

@container yildiz ( min-width: 34rem ) {
	.yildiz-hizmet-alt-cagri {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.yildiz-hizmet-alt-metin {
		margin-right: 1rem;
	}
}

/* ----------------------------------------------------------- YAN SÜTUN */

.yildiz-hizmet-yan {
	display: grid;
	gap: var( --yildiz-bosluk );
	min-width: 0;
}

.yildiz-yan-kutu {
	padding: 1.15rem;
	border-radius: var( --yildiz-radius );
	background: var( --yildiz-yuzey );
}

/*
 * Yan sütundaki kısa kodlar kendi kartlarını taşıyor; kutu içinde kutu
 * kenarlığı iki kez çiziyordu. İç blok saydamlaştırılır.
 */
.yildiz-yan-kutu > .yildiz-blok {
	padding: 0;
	background: none;
	border: 0;
}

.yildiz-yan-baslik {
	margin: 0 0 0.75rem;
	font-size: 1.15em;
}

.yildiz-yan-liste {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.4rem;
	/*
	 * Uzun hizmet listesi yan sütunu ekranlar boyu uzatıyordu; kaydırılabilir
	 * kutu, sayfanın geri kalanını erişilebilir tutuyor.
	 */
	max-height: 22rem;
	overflow-y: auto;
}

/*
 * Kitin kendi "tüm hizmetler" kutusunda her satır bir hap düğme. Aynı dili
 * konuşuyoruz ama boyama değişkenle: kitin bağlantı kuralı araya giremesin.
 */
.yildiz-blok .yildiz-yan-baglanti {
	--yildiz-dugme-zemin: var( --yildiz-yuzey-hafif );
	--yildiz-dugme-yazi: inherit;

	display: flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 2.75rem;
	padding: 0.55rem 0.9rem;
	border-radius: var( --yildiz-hap );
	background: var( --yildiz-dugme-zemin );
	color: var( --yildiz-dugme-yazi );
	font-size: 0.95em;
	text-decoration: none;
}

.yildiz-blok .yildiz-yan-baglanti.yildiz-acik {
	--yildiz-dugme-zemin: var( --yildiz-ana-dolgu );
	--yildiz-dugme-yazi: var( --yildiz-ana-yazi );

	font-weight: 700;
}

.yildiz-yan-ikon {
	flex: 0 0 auto;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: var( --yildiz-radius-kucuk );
	overflow: hidden;
}

.yildiz-yan-ikon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.yildiz-yan-ad {
	min-width: 0;
}

/* ==================================================== GALERİ SEKMELERİ
 *
 * Sözleşme (betik kuruyor, şablon değil):
 *
 *   .yildiz-galeri-sekmeler   hap sırası
 *   .yildiz-galeri-sekme      tek hap
 *   .yildiz-sekme-sayi        haptaki adet rozeti
 *   .yildiz-acik              seçili hap (aria-pressed="true" ile birlikte)
 */

/*
 * MOBİLDE YATAY KAYDIRMA, SARMA DEĞİL.
 *
 * On hizmetli bir salonda haplar sarınca çubuk telefonda dört satır oluyor ve
 * galerinin kendisi ekranın altına düşüyordu; kullanıcı fotoğrafı görmeden
 * önce bir süzgeç duvarıyla karşılaşıyor. Tek satırda kaydırma, çubuğu sabit
 * yükseklikte tutuyor.
 */
.yildiz-galeri-sekmeler {
	display: flex;
	gap: 0.5rem;
	margin: 0 0 1rem;
	padding-bottom: 0.35rem;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	/* Kaydırma çubuğu haplerin altında yer kaplamasın. */
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}

/*
 * Kaydırılabilir olduğu GÖRÜNMELİ. Şerit dersinde öğrenildi: masaüstünde
 * kaydırma çubuğu gizliyken kullanıcı ikinci yarının varlığını fark etmiyor.
 * Sağ kenardaki soluk geçiş, devamı olduğunu söylüyor.
 *
 * Sınıfı BETİK ÖLÇEREK koyuyor (scrollWidth > clientWidth). CSS tek başına
 * taşmayı bilemiyor; koşulsuz yazılan geçiş, taşmayan bir çubukta son hapı
 * sebepsiz soluklaştırıp olmayan bir devam vaat ediyordu.
 */
.yildiz-galeri-sekmeler.yildiz-kaydirilir {
	-webkit-mask-image: linear-gradient( to right, #000 calc( 100% - 1.5rem ), transparent );
	mask-image: linear-gradient( to right, #000 calc( 100% - 1.5rem ), transparent );
}

.yildiz-blok .yildiz-galeri-sekme {
	--yildiz-dugme-zemin: var( --yildiz-yumusak );
	--yildiz-dugme-yazi: inherit;
	--yildiz-dugme-kenar: var( --yildiz-cizgi );

	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	flex: 0 0 auto;
	/* Dokunma hedefi en az 44 piksel. */
	min-height: 2.75rem;
	padding: 0.5rem 1rem;
	border: 1px solid var( --yildiz-dugme-kenar );
	border-radius: var( --yildiz-hap );
	background: var( --yildiz-dugme-zemin );
	color: var( --yildiz-dugme-yazi );
	font-size: 0.9em;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	scroll-snap-align: start;
	touch-action: manipulation;
}

.yildiz-blok .yildiz-galeri-sekme:hover {
	--yildiz-dugme-kenar: var( --yildiz-ana );
}

/*
 * SEÇİLİ HAP RENKLE **VE** KALINLIKLA AYRIŞIR.
 *
 * Yalnız renkle ayırmak, renk körü kullanıcıda hiçbir şey söylemiyor ve
 * aria-pressed ekran okuyucu dışında görünmüyor. İkinci bir işaret şart.
 */
.yildiz-blok .yildiz-galeri-sekme.yildiz-acik {
	--yildiz-dugme-zemin: var( --yildiz-ana-dolgu );
	--yildiz-dugme-yazi: var( --yildiz-ana-yazi );
	--yildiz-dugme-kenar: var( --yildiz-ana-dolgu );

	font-weight: 700;
}

.yildiz-sekme-sayi {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.4rem;
	padding: 0 0.35rem;
	border-radius: var( --yildiz-hap );
	background: var( --yildiz-yumusak );
	font-size: 0.85em;
	font-variant-numeric: tabular-nums;
	/* Rozet zemini seçili hapta da okunur kalmalı. */
	color: inherit;
}

.yildiz-blok .yildiz-galeri-sekme.yildiz-acik .yildiz-sekme-sayi {
	background: rgba( 255, 255, 255, 0.25 );
}

/*
 * Süzülen kart gizlenirken ızgara boşluk bırakmamalı: hidden özniteliği
 * display:none üretiyor ama bazı temalar li'ye display kuralı yazıyor ve
 * gizli kart yer kaplamaya devam ediyordu.
 */
.yildiz-galeri-kart[hidden] {
	display: none !important;
}

/* ======================================================= INSTAGRAM AKIŞI
 *
 * Sözleşme:
 *
 *   .yildiz-instagram         kök (--yildiz-ig-sutun sütun sayısını taşır)
 *     .yildiz-ig-kunye        avatar + ad + sayaçlar + takip düğmesi
 *     .yildiz-ig-izgara       kare ızgarası (ul)
 *       .yildiz-ig-kare       tek kare (li)
 *       .yildiz-ig-katman     fare üstünde beliren örtü
 *       .yildiz-ig-tur        video / çoklu kare rozeti
 */

.yildiz-instagram {
	--yildiz-ig-sutun: 3;
}

/* ------------------------------------------------------------- KÜNYE */

.yildiz-ig-kunye {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1rem;
	margin-bottom: 1rem;
}

.yildiz-ig-avatar {
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	object-fit: cover;
	/* Marka halkası: Instagram'ın kendi profil çerçevesine gönderme. */
	padding: 2px;
	background: linear-gradient( 45deg, #f09433, #dc2743, #bc1888 );
}

.yildiz-ig-kimlik {
	min-width: 0;
	/* Ad ile sayaçlar arasında esneme payı; dar ekranda sarar. */
	flex: 1 1 8rem;
}

.yildiz-ig-ad {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	margin: 0;
	font-weight: 700;
	line-height: 1.2;
}

.yildiz-ig-onay {
	display: inline-flex;
	color: #3897f0;
}

.yildiz-ig-kullanici {
	margin: 0.1rem 0 0;
	font-size: 0.9em;
}

.yildiz-blok .yildiz-ig-kullanici a {
	color: var( --yildiz-soluk );
	text-decoration: none;
}

.yildiz-ig-sayilar {
	display: flex;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.yildiz-ig-sayilar li {
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: 0.8em;
	line-height: 1.25;
}

.yildiz-ig-sayilar strong {
	font-size: 1.15em;
	font-variant-numeric: tabular-nums;
}

.yildiz-ig-sayilar span {
	color: var( --yildiz-soluk );
}

.yildiz-blok .yildiz-ig-takip {
	--yildiz-dugme-zemin: #3897f0;
	--yildiz-dugme-yazi: #fff;

	/* Dokunma hedefi alt sınırı; 2.5rem 40 piksel ediyordu. */
	min-height: 2.75rem;
	padding: 0.5rem 1.15rem;
	border-radius: var( --yildiz-radius-kucuk );
	font-size: 0.9em;
}

/* ------------------------------------------------------------ IZGARA */

/*
 * MOBİLDE İKİ SÜTUN, sayfayı kuranın seçtiği sayı DEĞİL.
 *
 * Salon Elementor'da "4 sütun" seçtiğinde telefonda her kare 90 piksele
 * düşüyor ve fotoğrafın içindeki iş görünmüyordu; galerinin bütün değeri
 * işin görülmesi. Seçilen sütun sayısı yalnız geniş konteynerde uygulanır.
 */
.yildiz-ig-izgara {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@container yildiz ( min-width: 30rem ) {
	.yildiz-ig-izgara {
		grid-template-columns: repeat( var( --yildiz-ig-sutun ), 1fr );
		gap: 0.5rem;
	}
}

.yildiz-ig-kare {
	position: relative;
	margin: 0;
	border-radius: var( --yildiz-radius-kucuk );
	overflow: hidden;
	background: var( --yildiz-yumusak );
}

.yildiz-blok .yildiz-ig-baglanti {
	display: block;
	position: relative;
	/* Kareler EŞİT: Instagram ızgarası kare, dikey fotoğraf kırpılır. */
	aspect-ratio: 1 / 1;
	text-decoration: none;
	color: #fff;
}

.yildiz-ig-gorsel {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.35s ease;
}

/* Tür rozeti sağ üstte, tıpkı Instagram'da olduğu gibi. */
.yildiz-ig-tur {
	position: absolute;
	top: 0.4rem;
	right: 0.4rem;
	display: flex;
	color: #fff;
	/* Açık fotoğrafta beyaz simge kayboluyordu. */
	filter: drop-shadow( 0 1px 2px rgba( 0, 0, 0, 0.6 ) );
}

/* ------------------------------------------------------------- KATMAN */

.yildiz-ig-katman {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem;
	background: rgba( 0, 0, 0, 0.55 );
	opacity: 0;
	transition: opacity 0.25s ease;
	text-align: center;
}

.yildiz-ig-sayac {
	display: flex;
	gap: 1rem;
	font-weight: 700;
}

.yildiz-ig-sayac-oge {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
}

.yildiz-ig-yazi {
	font-size: 0.8em;
	line-height: 1.4;
	/* Uzun alt yazı kareyi taşırmasın; dört satırda kesilir. */
	display: -webkit-box;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/*
 * KATMAN YALNIZ GERÇEK FARE OLAN CİHAZDA.
 *
 * Dokunmatik ekranda "üstüne gelme" diye bir şey yok: tarayıcı ilk dokunuşu
 * hover sayıp katmanı açıyor, kullanıcı fotoğrafı göremiyor ve ikinci kez
 * dokunmak zorunda kalıyor. Telefonda kareler temiz kalır, dokunmak doğrudan
 * gönderiyi açar.
 */
@media ( hover: hover ) and ( pointer: fine ) {
	.yildiz-ig-baglanti:hover .yildiz-ig-katman,
	.yildiz-ig-baglanti:focus-visible .yildiz-ig-katman {
		opacity: 1;
	}

	.yildiz-ig-baglanti:hover .yildiz-ig-gorsel {
		transform: scale( 1.06 );
	}
}

/* Klavye kullanıcısı katmanı görmeli; odak her cihazda geçerli. */
.yildiz-ig-baglanti:focus-visible .yildiz-ig-katman {
	opacity: 1;
}

/*
 * Hareketi azaltmak isteyen kullanıcıda büyütme ve geçiş kapanır.
 * Vestibüler rahatsızlığı olan kişide ölçek animasyonu baş dönmesi yapıyor.
 */
@media ( prefers-reduced-motion: reduce ) {
	.yildiz-ig-gorsel,
	.yildiz-ig-katman {
		transition: none;
	}

	.yildiz-ig-baglanti:hover .yildiz-ig-gorsel {
		transform: none;
	}
}

/* ==================================================== HİZMET ARAMA KUTUSU
 *
 * Sözleşme (betik kuruyor, şablon değil):
 *
 *   .yildiz-hizmet-arama    kutu ve öneri listesinin kabı
 *   .yildiz-arama-girdi     arama alanı (role="combobox")
 *   .yildiz-arama-oneriler  öneri listesi (role="listbox")
 *   .yildiz-arama-oneri     tek öneri (role="option")
 *   .yildiz-arama-bos       sonuç yok metni
 */

.yildiz-hizmet-arama {
	position: relative;
	margin-bottom: var( --yildiz-bosluk );
}

.yildiz-blok .yildiz-arama-girdi {
	width: 100%;
	/* Dokunma hedefi en az 44 piksel. */
	min-height: 2.75rem;
	padding: 0.7rem 1rem;
	border: 1px solid var( --yildiz-cizgi );
	border-radius: var( --yildiz-hap );
	background: var( --yildiz-yuzey-hafif );
	color: inherit;
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.3;
	/* iOS 16 pikselin altındaki girdide sayfayı yakınlaştırıyor. */
	-webkit-appearance: none;
	appearance: none;
}

.yildiz-blok .yildiz-arama-girdi:focus {
	outline: 2px solid var( --yildiz-ana );
	outline-offset: 2px;
	border-color: var( --yildiz-ana );
}

/*
 * Öneri listesi girdinin ÜSTÜNE biner (mutlak konum): akışa girseydi her tuş
 * vuruşunda altındaki liste aşağı kayar ve sayfa zıplardı.
 */
.yildiz-arama-oneriler {
	position: absolute;
	z-index: 5;
	left: 0;
	right: 0;
	top: calc( 100% + 0.25rem );
	margin: 0;
	padding: 0.3rem;
	list-style: none;
	border: 1px solid var( --yildiz-cizgi );
	border-radius: var( --yildiz-radius-kucuk );
	background: Canvas;
	box-shadow: 0 8px 24px rgba( 0, 0, 0, 0.12 );
	max-height: 17rem;
	overflow-y: auto;
}

.yildiz-arama-oneri {
	padding: 0.6rem 0.75rem;
	border-radius: var( --yildiz-radius-kucuk );
	cursor: pointer;
	line-height: 1.35;
}

.yildiz-arama-oneri:hover,
.yildiz-arama-oneri.yildiz-acik {
	background: var( --yildiz-yuzey );
}

.yildiz-arama-bos {
	margin: 0.75rem 0 0;
	padding: 0.9rem 1rem;
	border-radius: var( --yildiz-radius-kucuk );
	background: var( --yildiz-yuzey-hafif );
	color: var( --yildiz-soluk );
	text-align: center;
}

/* Süzülen satır ve kategori kartı yer kaplamamalı. */
.yildiz-hizmet[hidden],
.yildiz-hizmet-grup[hidden] {
	display: none !important;
}

/* ========================================================== PAKETLER
 *
 * Sözleşme:
 *
 *   .yildiz-paketler          kök (--yildiz-paket-sutun sütun sayısını taşır)
 *     .yildiz-paket-izgara    kart ızgarası (ul)
 *       .yildiz-paket         tek kart (li)
 *         .yildiz-paket-kapak     öne çıkan görsel bandı
 *         .yildiz-paket-ikon      kare simge (kapağın üstüne biner)
 *         .yildiz-paket-rozet     "%20 indirim"
 *         .yildiz-paket-ad / -ozet / -hizmetler
 *         .yildiz-paket-fiyat     eski (çizili) + yeni fiyat
 *         .yildiz-paket-kazanc    "900 ₺ kazanıyorsunuz"
 *         .yildiz-paket-dugme     randevu düğmesi
 *
 * RENKLER TEMADAN GELİR. Kart "şaşalı" görünsün diye sabit bir kampanya
 * kırmızısı kullanılmıyor; vurgu rengi Elementor'ün genel paletinden
 * (--e-global-color-primary) türüyor ve salon o paleti değiştirdiğinde
 * paketler de onunla değişiyor. Dikkat çekiciliği renk DEĞİL, hiyerarşi
 * sağlıyor: rozet, çizili eski fiyat ve büyük yeni fiyat.
 */

.yildiz-paketler {
	--yildiz-paket-sutun: 3;
}

.yildiz-paket-izgara {
	display: grid;
	/* MOBİL ÖNCE tek sütun: kart içinde hizmet listesi ve iki fiyat var,
	   iki sütuna sıkıştırıldığında hiçbiri okunmuyor. */
	grid-template-columns: 1fr;
	gap: var( --yildiz-bosluk );
	margin: 0;
	padding: 0;
	list-style: none;
}

@container yildiz ( min-width: 34rem ) {
	.yildiz-paket-izgara {
		grid-template-columns: repeat( min( var( --yildiz-paket-sutun ), 2 ), 1fr );
	}
}

@container yildiz ( min-width: 52rem ) {
	.yildiz-paket-izgara {
		grid-template-columns: repeat( var( --yildiz-paket-sutun ), 1fr );
	}
}

.yildiz-paket {
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 0;
	border-radius: var( --yildiz-radius );
	background: var( --yildiz-yuzey );
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

@media ( hover: hover ) and ( pointer: fine ) {
	.yildiz-paket:hover {
		transform: translateY( -3px );
		box-shadow: 0 12px 30px -18px rgba( 0, 0, 0, 0.45 );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.yildiz-paket { transition: none; }
	.yildiz-paket:hover { transform: none; }
}

.yildiz-paket-kapak {
	margin: 0;
	background: var( --yildiz-yuzey-hafif );
}

.yildiz-paket-kapak-gorsel {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.yildiz-paket-govde {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	padding: 1.25rem;
	/* Kart yükseklikleri ızgarada eşitlenir; düğmeler alt hizada kalsın. */
	flex: 1 1 auto;
}

.yildiz-paket-ikon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: var( --yildiz-radius-kucuk );
	background: var( --yildiz-ana-dolgu );
	overflow: hidden;
}

.yildiz-paket-ikon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/*
 * Rozet kartın SAĞ ÜSTÜNDE ve kapağın üstüne biner. Akışa girseydi başlığı
 * aşağı iter ve kartlar farklı yüksekliklerde başlardı.
 */
.yildiz-paket-rozet {
	position: absolute;
	top: 0.9rem;
	right: 0.9rem;
	z-index: 2;
	padding: 0.3rem 0.7rem;
	border-radius: var( --yildiz-hap );
	background: var( --yildiz-ana-dolgu );
	color: var( --yildiz-ana-yazi );
	font-family: var( --yildiz-vurgu-yazi );
	font-size: 0.8125rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.yildiz-paket-ad {
	margin: 0;
	font-size: 1.375rem;
	line-height: 1.2;
}

.yildiz-paket-ozet {
	margin: 0;
	color: var( --yildiz-soluk );
	font-size: 0.9375rem;
	line-height: 1.55;
}

.yildiz-paket-hizmetler {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.3rem;
}

.yildiz-paket-hizmetler li {
	position: relative;
	padding-left: 1.4rem;
	font-size: 0.9375rem;
	line-height: 1.45;
}

/* Onay işareti işaretlemeye değil biçeme yazılır: liste "dahil olanlar"
   olduğunu tek bakışta söylesin, DOM'a otuz öğe eklenmesin. */
.yildiz-paket-hizmetler li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.42em;
	width: 0.75rem;
	height: 0.4rem;
	border-left: 2px solid var( --yildiz-ana );
	border-bottom: 2px solid var( --yildiz-ana );
	transform: rotate( -45deg );
}

.yildiz-blok .yildiz-paket-hizmetler a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid var( --yildiz-cizgi );
}

/* ------------------------------------------------------------- FİYAT */

.yildiz-paket-fiyat {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
	margin: 0.35rem 0 0;
	font-family: var( --yildiz-vurgu-yazi );
	font-variant-numeric: tabular-nums;
}

.yildiz-paket-eski {
	color: var( --yildiz-soluk );
	font-size: 1rem;
}

/*
 * İNDİRİMLİ FİYAT KARTIN EN BÜYÜK SAYISI. "10.000 yerine 9.000" etkisini
 * yaratan şey renk değil ölçü farkı: eski fiyat 16 piksel ve çizili, yeni
 * fiyat 30 piksel ve vurgu renginde.
 */
.yildiz-paket-yeni {
	font-size: 1.875rem;
	font-weight: 700;
	line-height: 1.1;
	color: var( --yildiz-ana );
}

.yildiz-paket-kazanc {
	margin: 0;
	font-size: 0.875rem;
	font-weight: 600;
	color: var( --yildiz-ana );
}

.yildiz-paket-fiyat-yok {
	margin: 0.35rem 0 0;
	color: var( --yildiz-soluk );
	font-size: 0.9375rem;
}

.yildiz-paket-eylem {
	/* Düğme kartın en altına yapışır: ızgarada kartlar farklı uzunlukta
	   olsa da düğmeler aynı hizada durur. */
	margin: auto 0 0;
	padding-top: 0.6rem;
}

.yildiz-blok .yildiz-paket-dugme {
	width: 100%;
}