/* <picture> sarmalayıcısı yerleşimde görünmez olmalı (bkz. CMC_Media). */
picture { display: contents; }

/**
 * CyberMap Çiçek Core — form, onay ekranı ve ürün ızgarası stilleri.
 *
 * TASARIM NOTU: Buradaki her renk, yarıçap ve gölge bir CSS değişkeninden
 * okunur. İki tema da yalnızca bu değişkenleri ezerek tamamen farklı
 * görünür; tek satır CSS kopyalamaya gerek kalmaz.
 */

.cmc-form,
.cmc-confirm,
.cmc-grid {
	--cmc-accent: #b3123c;
	--cmc-accent-ink: #ffffff;
	--cmc-accent-soft: color-mix(in srgb, var(--cmc-accent) 8%, transparent);
	--cmc-ink: #16130f;
	--cmc-muted: #6f6a64;
	--cmc-line: #e4dfd8;

	/*
	 * FORM DENETİMİ KENARLIĞI.
	 * --cmc-line kart ve bölüm ayrımı için yeterince yumuşak, ama bir
	 * girdi kutusunun TEK görsel sınırı o çizgi. WCAG 1.4.11 metin dışı
	 * ögelerde 3:1 istiyor; bu jeton onu karşılıyor. Ayrılmasaydı ya
	 * kutular görünmez kalırdı ya bütün kartlar sertleşirdi.
	 */
	--cmc-field: #8d8479;
	--cmc-surface: #ffffff;
	--cmc-surface-2: #faf7f3;

	/*
	 * BİLGİ TAŞIYAN "SÖNÜK" METİN.
	 *
	 * "Tükendi" ve "bu bölgeye teslimat yok" birer durum süsü değil,
	 * müşterinin o bilgiyi öğrendiği TEK yer. Önceki sürümde ikisi de
	 * `opacity` ile soldurulduğu için sırasıyla 2,54:1 ve 3,64:1'e
	 * düşüyordu; güneş altındaki bir telefonda "Tükendi" yazısı hiç
	 * okunmuyordu. opacity bir metni "kapalı" yapmaz, yalnızca
	 * okunmaz yapar. Bu yüzden artık açık bir ön plan/arka plan çifti
	 * var ve ikisi de 4,5:1 eşiğinin üstünde (8,36:1 ve 8,59:1).
	 */
	--cmc-off-ink: #4a443e;
	--cmc-off-bg: #f1efec;
	/*
	 * Kenarlık da bir sınırdır: 1.4.11 metin dışı ögelerde 3:1 ister.
	 * --cmc-field ile aynı ton — kendi zemininde 3,21:1, beyazda
	 * 3,68:1. Daha soluk bir gri "Tükendi" rozetinin nerede bittiğini
	 * göstermiyordu.
	 */
	--cmc-off-line: #8d8479;
	--cmc-radius: 14px;
	--cmc-radius-sm: 9px;
	--cmc-shadow: 0 1px 2px rgba(22,19,15,.05), 0 8px 24px -12px rgba(22,19,15,.18);
	--cmc-ok: #147a4b;
	--cmc-warn: #9a6400;
	--cmc-bad: #b3123c;
	--cmc-wa: #25d366;
	--cmc-font: inherit;

	color: var(--cmc-ink);
	font-family: var(--cmc-font);
}

/* =================================================================
   Form iskeleti
   ================================================================= */

.cmc-form {
	display: grid;
	gap: 26px;
	max-width: 720px;
	margin-inline: auto;
}

.cmc-form__title {
	margin: 0 0 6px;
	font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem);
	line-height: 1.2;
}

.cmc-form__intro,
.cmc-form__note {
	margin: 0;
	color: var(--cmc-muted);
	font-size: .9rem;
	line-height: 1.55;
}

/* Toplam, gönder düğmesinin hemen üstünde (2.1.0 · P2-10). */
.cmc-form__total {
	margin: 0;
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px 10px;
	padding-block: 12px;
	border-top: 1px solid var(--cmc-line);
	color: var(--cmc-ink);
	font-variant-numeric: tabular-nums;
}
.cmc-form__total strong { font-size: 1.25rem; font-weight: 700; }
.cmc-form__total small { color: var(--cmc-muted); font-size: .85rem; }

/* Tek il: salt okunur girdi kutusu yerine düz metin (2.1.0 · P2-6). */
.cmc-static {
	margin: 0;
	padding-block: 10px;
	color: var(--cmc-ink);
	font-weight: 600;
}

/* Seçilen teslimat gününün adı (2.1.0 · P3-7). */
.cmc-help--day { color: var(--cmc-ink); font-weight: 600; }
.cmc-help--day:empty { display: none; }

.cmc-fieldset {
	margin: 0;
	padding: 22px;
	border: 1px solid var(--cmc-line);
	border-radius: var(--cmc-radius);
	background: var(--cmc-surface);
	box-shadow: var(--cmc-shadow);
	display: grid;
	gap: 16px;
}

.cmc-fieldset__legend {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 8px;
	margin-inline-start: -8px;
	font-weight: 650;
	font-size: 1.02rem;
}

.cmc-step {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--cmc-accent);
	color: var(--cmc-accent-ink);
	font-size: .8rem;
	font-weight: 700;
	flex: none;
}

.cmc-row {
	display: grid;
	gap: 16px;
}

@media (min-width: 620px) {
	.cmc-row--2 { grid-template-columns: 1fr 1fr; }
}

/* =================================================================
   Alanlar
   ================================================================= */

.cmc-field { display: grid; gap: 6px; }

/*
 * [hidden] ÖZGÜLLÜK ÇATIŞMASI.
 * Tarayıcının kendi [hidden]{display:none} kuralı, yazar tarafından
 * yazılan .cmc-field{display:grid} kuralına yeniliyor: JS alanı
 * gizlese bile ekranda kalıyordu. "Mahallem listede yok" seçilmeden
 * serbest metin kutusu görünüyordu.
 */
.cmc-field[hidden] { display: none; }

.cmc-field label {
	font-weight: 600;
	font-size: .88rem;
	letter-spacing: .01em;
}

.cmc-field abbr {
	color: var(--cmc-bad);
	text-decoration: none;
	border: 0;
}

.cmc-optional {
	font-weight: 400;
	color: var(--cmc-muted);
	font-size: .82rem;
}

/*
 * ÖZEL AÇILIR LİSTENİN PARÇALARI BU KURALLARIN DIŞINDA.
 *
 * Combobox artık bir <input type="text"> (APG örüntüsü) ve gizlenen
 * <select> hâlâ DOM'da duruyor. `.cmc-field input[type="text"]`
 * seçicisi 0-2-1 özgüllükte; `.cmc-sel__input` ise 0-1-0. Yani
 * dışlanmasalardı bileşenin kendi kuralları HER ZAMAN yenilir,
 * kutunun içinde ikinci bir kenarlık, ikinci bir iç boşluk ve ikinci
 * bir odak halkası belirirdi. Gizli <select> de 100% genişliğe
 * dönüp alanın üstünü kaplardı.
 */
.cmc-field input[type="text"]:not(.cmc-sel__input),
.cmc-field input[type="tel"],
.cmc-field input[type="email"],
.cmc-field input[type="date"],
.cmc-field select:not(.cmc-sel__native),
.cmc-field textarea {
	width: 100%;
	padding: 11px 13px;
	border: 1px solid var(--cmc-field);
	border-radius: var(--cmc-radius-sm);
	background: var(--cmc-surface);
	color: inherit;
	font: inherit;
	line-height: 1.4;
	transition: border-color .16s ease, box-shadow .16s ease;
	-webkit-appearance: none;
	appearance: none;
}

.cmc-field textarea { resize: vertical; min-height: 84px; }

.cmc-field select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f6a64' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 16px;
	padding-inline-end: 38px;
}

/*
 * ODAK HALKASI
 *
 * Önceki sürümde outline kapatılıp yalnızca %13 opaklıkta bir gölgeye
 * güveniliyordu. Klavyeyle form dolduran biri hangi alanda olduğunu
 * göremiyordu — özellikle güneş altındaki bir telefonda.
 *
 * Şimdi iki katman var: net bir 2px kontur (nerede olduğunuzu söyler)
 * ve yumuşak bir hale (tasarımı sertleştirmeden yumuşatır).
 */
.cmc-field :is(input, select, textarea):not(.cmc-sel__input):not(.cmc-sel__native):focus-visible {
	outline: 2px solid var(--cmc-accent);
	outline-offset: 1px;
	border-color: var(--cmc-accent);
	box-shadow: 0 0 0 2px var(--cmc-surface), 0 0 0 5px var(--cmc-accent-soft);
}

.cmc-checkbox input:focus-visible {
	outline: 2px solid var(--cmc-accent);
	outline-offset: 2px;
}

.cmc-field .is-invalid:not(.cmc-sel__input):not(.cmc-sel__native) {
	border-color: var(--cmc-bad);
	background: color-mix(in srgb, var(--cmc-bad) 4%, var(--cmc-surface));
}

.cmc-help {
	color: var(--cmc-muted);
	font-size: .8rem;
	line-height: 1.4;
}

.cmc-error:empty { display: none; }

.cmc-error {
	color: var(--cmc-bad);
	font-size: .82rem;
	font-weight: 500;
	line-height: 1.4;
}

/* Onay kutusu */

.cmc-field--consent {
	padding: 16px 18px;
	border: 1px solid var(--cmc-line);
	border-radius: var(--cmc-radius);
	background: var(--cmc-surface-2);
}

.cmc-checkbox {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	font-weight: 400 !important;
	font-size: .87rem;
	line-height: 1.5;
	cursor: pointer;
}

.cmc-checkbox input {
	margin-top: 1px;
	width: 22px;
	height: 22px;
	accent-color: var(--cmc-accent);
	flex: none;
	cursor: pointer;
}

/* Satırın tamamı dokunulabilir olsun; kutu tek başına küçük bir hedef. */
.cmc-checkbox { padding: 4px 0; min-height: 30px; }

.cmc-checkbox a { color: var(--cmc-accent); }

/* =================================================================
   Bireysel / Kurumsal (2.3.0)
   ================================================================= */

.cmc-choice {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
	display: grid;
	gap: 8px;
}

.cmc-choice__legend {
	padding: 0;
	margin-bottom: 8px;
	font-weight: 600;
	font-size: .88rem;
	letter-spacing: .01em;
}

.cmc-choice__opts {
	display: grid;
	gap: 10px;
}

@media (min-width: 480px) {
	.cmc-choice__opts { grid-template-columns: 1fr 1fr; }
}

/*
 * Seçenek kartı: bütün kart dokunulabilir. Seçili kart kenarlığıyla
 * ve zemin tonuyla ayrışıyor; yalnızca renge dayanmıyor, radyo
 * düğmesinin kendisi de görünür kalıyor (WCAG 1.4.1).
 */
.cmc-choice__opt {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	padding: 13px 15px;
	border: 1px solid var(--cmc-field);
	border-radius: var(--cmc-radius-sm);
	background: var(--cmc-surface);
	cursor: pointer;
	transition: border-color .16s ease, background-color .16s ease;
}

.cmc-choice__opt input {
	margin-top: 2px;
	width: 20px;
	height: 20px;
	accent-color: var(--cmc-accent);
	flex: none;
	cursor: pointer;
}

.cmc-choice__opt input:focus-visible {
	outline: 2px solid var(--cmc-accent);
	outline-offset: 2px;
}

.cmc-choice__opt:has(input:checked) {
	border-color: var(--cmc-accent);
	background: var(--cmc-accent-soft);
	box-shadow: inset 0 0 0 1px var(--cmc-accent);
}

.cmc-choice__txt { display: grid; gap: 2px; line-height: 1.35; }
.cmc-choice__txt strong { font-weight: 650; font-size: .95rem; }
.cmc-choice__txt small { color: var(--cmc-muted); font-size: .8rem; }

.cmc-corp {
	display: grid;
	gap: 16px;
	padding: 18px;
	border: 1px solid var(--cmc-line);
	border-radius: var(--cmc-radius);
	background: var(--cmc-surface-2);
}

.cmc-corp[hidden] { display: none; }

.cmc-corp__title {
	margin: 0;
	font-weight: 650;
	font-size: .95rem;
}

.cmc-corp__same { margin-top: 2px; }

/* Betik çalışıyorsa blok zaten yalnızca kurumsal seçilince açık. */
.cmc-form.is-js .cmc-corp__when { display: none; }

/* Bot tuzağı — görünmez ama display:none değil (botlar onu atlar) */

.cmc-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* =================================================================
   Ürün özeti
   ================================================================= */

.cmc-summary {
	display: flex;
	gap: 16px;
	padding: 16px;
	border: 1px solid var(--cmc-line);
	border-radius: var(--cmc-radius);
	background: var(--cmc-surface-2);
}

.cmc-summary__media img {
	width: 84px;
	height: 84px;
	object-fit: cover;
	border-radius: var(--cmc-radius-sm);
	display: block;
}

.cmc-summary__body { flex: 1; display: grid; gap: 4px; align-content: start; }

.cmc-summary__label {
	font-size: .74rem;
	text-transform: uppercase;
	letter-spacing: .09em;
	color: var(--cmc-muted);
}

.cmc-summary__name { font-size: 1.03rem; line-height: 1.3; margin-bottom: 6px; }
.cmc-summary__more {
	display: inline-block;
	margin: -2px 0 8px;
	padding: 4px 0;
	color: var(--cmc-accent);
	font-size: .88rem;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: .18em;
}

.cmc-summary__row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: .88rem;
	color: var(--cmc-muted);
}

.cmc-summary__row--total {
	margin-top: 6px;
	padding-top: 8px;
	border-top: 1px solid var(--cmc-line);
	color: var(--cmc-ink);
	font-size: 1rem;
}

/*
 * "TOPLAM KESİN DEĞİL" UYARISI TOPLAMIN YANINDA DURUR.
 *
 * "Mahallem listede yok" seçildiğinde teslimat ücreti sipariş
 * sonrası teyit ediliyor; ama özet kutusu varsayılan ücretle
 * hesaplanmış bir rakam göstermeye devam ediyordu. Uyarı mahalle
 * alanının altındaki yardım metnindeydi — ekranın bambaşka bir
 * yerinde. Ekranda YANLIŞ olabilecek tek sayı toplam olduğuna göre
 * uyarının yeri de toplamın dibi.
 */
.cmc-summary__hint {
	margin: 4px 0 0;
	font-size: .78rem;
	line-height: 1.4;
	font-weight: 600;
	color: var(--cmc-warn);
}

.cmc-summary__hint[hidden] { display: none; }

/* =================================================================
   Butonlar
   ================================================================= */

.cmc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 12px 22px;
	border: 1px solid transparent;
	border-radius: 999px;
	font: inherit;
	font-weight: 650;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: transform .14s ease, box-shadow .14s ease, background-color .14s ease;
}

.cmc-btn:active { transform: translateY(1px); }

.cmc-btn--primary {
	background: var(--cmc-accent);
	color: var(--cmc-accent-ink);
	box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--cmc-accent) 70%, transparent);
}

.cmc-btn--primary:hover { background: color-mix(in srgb, var(--cmc-accent) 88%, #000); }

.cmc-btn--ghost {
	background: transparent;
	border-color: var(--cmc-line);
	color: var(--cmc-muted);
}

.cmc-btn--wa { background: var(--cmc-wa); color: #04331a; }
.cmc-btn--wa:hover { background: color-mix(in srgb, var(--cmc-wa) 88%, #000); }

.cmc-btn--lg { padding: 15px 30px; font-size: 1.02rem; width: 100%; }

/*
 * KAPALI DÜĞME — opacity İLE DEĞİL, KENDİ RENK ÇİFTİYLE.
 *
 * `opacity: .55` metni de arka planı da aynı anda soldurduğu için
 * "Tükendi" rozeti 2,54:1'e düşüyordu. Oysa o yazı, müşterinin
 * ürünün tükendiğini öğrendiği tek yer; okunmak zorunda. Artık
 * açık bir zemin/mürekkep çifti kullanılıyor: 8,36:1.
 */
.cmc-btn.is-disabled,
.cmc-btn[disabled] {
	opacity: 1;
	pointer-events: none;
	background: var(--cmc-off-bg, #f1efec);
	border-color: var(--cmc-off-line, #8d8479);
	color: var(--cmc-off-ink, #4a443e);
	box-shadow: none;
}

/*
 * ODAK HALKASI — İKİ TONLU.
 *
 * ESKİ HÂLİ VE NESİ YANLIŞTI
 *   outline: 3px solid var(--cmc-accent-soft);
 * --cmc-accent-soft saydam bir karışım; beyaz sayfada 1,36:1'e
 * düşüyordu (WCAG 1.4.11 en az 3:1 ister). Daha kötüsü: bu kural
 * 0-2-0 özgüllüğüyle temanın ÇALIŞAN genel odak halkasını da
 * eziyordu, yani düğmeyi yalnız bırakmakla kalmıyor, çalışan
 * çözümü de siliyordu. "Siparişi Oluştur" dahil her düğme etkilendi.
 *
 * YENİ HÂLİ
 * İç halka beyaz (düğmenin kendi dolgusu koyu olabilir — birincil
 * düğme aksan rengiyle dolu, WhatsApp düğmesi yeşil), dış halka
 * aksan (sayfa beyaz). Böylece halka HANGİ zeminin üstüne düşerse
 * düşsün en az bir kenarı 3:1'i geçiyor. En dışta duran yumuşak
 * hale artık bir bilgi taşımıyor, yalnızca süs.
 *
 * Ölçümler: aksan #b3123c beyazda 6,84:1 / halede 5,95:1.
 * Tema aksanı #5a4a8f ile 7,47:1 / 5,49:1.
 */
.cmc-btn:focus-visible {
	outline: 2px solid var(--cmc-accent);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--cmc-surface), 0 0 0 5px var(--cmc-accent-soft);
}

/*
 * GÖNDERİM SIRASINDA DÜĞME `disabled` YAPILMAZ.
 *
 * `disabled` özelliği düğmeyi odak ağacından çıkarır; gönderim
 * anında odak <body>'ye düşüyor, ekran okuyucu kullanan müşteri
 * "neredeyim, gitti mi" diye kalıyordu (WCAG 4.1.3). Artık gerçek
 * engelleme JS'teki `busy` bayrağıyla yapılıyor, düğme odakta
 * kalıyor ve durumunu aria-busy ile söylüyor.
 */
.cmc-btn[aria-busy="true"] { cursor: progress; }

/* Yükleniyor durumu */

.cmc-spinner { display: none; width: 17px; height: 17px; }

.cmc-btn.is-loading .cmc-spinner {
	display: block;
	border: 2.5px solid rgba(255,255,255,.35);
	border-top-color: currentColor;
	border-radius: 50%;
	animation: cmc-spin .7s linear infinite;
}

@keyframes cmc-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
	.cmc-btn, .cmc-spinner { transition: none; animation: none; }
}

/* =================================================================
   Uyarı kutuları
   ================================================================= */

.cmc-alert,
.cmc-notice {
	padding: 13px 16px;
	border-radius: var(--cmc-radius-sm);
	font-size: .89rem;
	line-height: 1.5;
	border: 1px solid;
}

.cmc-alert--error,
.cmc-notice--warn {
	background: color-mix(in srgb, var(--cmc-bad) 6%, #fff);
	border-color: color-mix(in srgb, var(--cmc-bad) 25%, #fff);
	color: color-mix(in srgb, var(--cmc-bad) 85%, #000);
}

.cmc-alert--success {
	background: color-mix(in srgb, var(--cmc-ok) 6%, #fff);
	border-color: color-mix(in srgb, var(--cmc-ok) 25%, #fff);
	color: color-mix(in srgb, var(--cmc-ok) 85%, #000);
}

/*
 * "Siparişiniz gönderiliyor…" bu kutudan duyuruluyor. Hata değil,
 * bu yüzden kırmızı olmamalı: kırmızı bir kutuya bakan müşteri
 * gönderim sürerken bir şeyin ters gittiğini sanıyor.
 * #0f4c63 üstteki #eef5f8 zemininde 8,54:1; kenarlık 3,18:1.
 */
.cmc-alert--info {
	background: #eef5f8;
	border-color: #5b93a8;
	color: #0f4c63;
}

.cmc-form__foot { display: grid; gap: 14px; }

/* =================================================================
   Onay ekranı
   ================================================================= */

.cmc-confirm {
	display: grid;
	gap: 20px;
	max-width: 680px;
	margin-inline: auto;
}

.cmc-confirm__hero {
	text-align: center;
	display: grid;
	gap: 12px;
	justify-items: center;
	padding: 8px 0 4px;
}

.cmc-confirm__check {
	display: grid;
	place-items: center;
	width: 62px;
	height: 62px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--cmc-ok) 12%, #fff);
	color: var(--cmc-ok);
}

.cmc-confirm__title {
	margin: 0;
	font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
	line-height: 1.15;
}

.cmc-confirm__lead {
	margin: 0;
	max-width: 46ch;
	color: var(--cmc-muted);
	line-height: 1.6;
}

.cmc-orderno {
	display: grid;
	gap: 8px;
	justify-items: center;
	padding: 18px 24px;
	border: 1px dashed var(--cmc-line);
	border-radius: var(--cmc-radius);
	background: var(--cmc-surface-2);
	width: 100%;
}

.cmc-orderno__label {
	font-size: .74rem;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--cmc-muted);
}

.cmc-orderno__value {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.75rem);
	font-weight: 700;
	letter-spacing: .04em;
	font-variant-numeric: tabular-nums;
}

.cmc-badge {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: .76rem;
	font-weight: 650;
	letter-spacing: .02em;
}

.cmc-badge--ok { background: color-mix(in srgb, var(--cmc-ok) 12%, #fff); color: var(--cmc-ok); }
.cmc-badge--warn { background: color-mix(in srgb, var(--cmc-warn) 13%, #fff); color: var(--cmc-warn); }
.cmc-badge--bad { background: color-mix(in srgb, var(--cmc-bad) 10%, #fff); color: var(--cmc-bad); }
.cmc-badge--info { background: #eef2f7; color: #35506e; }
.cmc-badge--muted { background: #f1efec; color: var(--cmc-muted); }

.cmc-panel {
	padding: 22px;
	border: 1px solid var(--cmc-line);
	border-radius: var(--cmc-radius);
	background: var(--cmc-surface);
	box-shadow: var(--cmc-shadow);
	display: grid;
	gap: 14px;
}

.cmc-panel--pay { border-color: color-mix(in srgb, var(--cmc-accent) 22%, var(--cmc-line)); }
.cmc-panel--wa { border-color: color-mix(in srgb, var(--cmc-wa) 34%, var(--cmc-line)); }

.cmc-panel__title { margin: 0; font-size: 1.05rem; }
.cmc-panel__lead { margin: 0; color: var(--cmc-muted); font-size: .9rem; line-height: 1.55; }
.cmc-panel__note { margin: 0; font-size: .85rem; color: var(--cmc-muted); }

.cmc-panel__fine {
	margin: 0;
	font-size: .8rem;
	color: var(--cmc-muted);
	line-height: 1.5;
}

/* IBAN */

.cmc-iban {
	display: grid;
	gap: 8px;
	padding: 15px 16px;
	border-radius: var(--cmc-radius-sm);
	background: var(--cmc-surface-2);
	border: 1px solid var(--cmc-line);
}

.cmc-iban__label {
	font-size: .74rem;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--cmc-muted);
}

.cmc-iban__value {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.cmc-iban code {
	font-size: clamp(.95rem, .85rem + .5vw, 1.15rem);
	font-weight: 600;
	letter-spacing: .06em;
	font-variant-numeric: tabular-nums;
	word-break: break-all;
}

.cmc-copy {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	border: 1px solid var(--cmc-line);
	border-radius: 999px;
	background: var(--cmc-surface);
	color: var(--cmc-ink);
	font: inherit;
	font-size: .82rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.cmc-copy:hover { border-color: var(--cmc-accent); color: var(--cmc-accent); }

/*
 * Kopyala düğmesinin HİÇ odak kuralı yoktu; temanın genel halkasına
 * kalıyordu ve `.cmc-copy--solid` aksan dolgulu olduğu için o halka
 * dolgunun üstüne düştüğünde kayboluyordu. Düğmelerdekiyle aynı iki
 * tonlu halka: iç beyaz, dış aksan.
 */
.cmc-copy:focus-visible {
	outline: 2px solid var(--cmc-accent);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--cmc-surface), 0 0 0 5px var(--cmc-accent-soft);
}

.cmc-copy--solid {
	background: var(--cmc-accent);
	border-color: var(--cmc-accent);
	color: var(--cmc-accent-ink);
}

.cmc-copy--solid:hover { color: var(--cmc-accent-ink); background: color-mix(in srgb, var(--cmc-accent) 88%, #000); }

.cmc-copy.is-copied { background: var(--cmc-ok); border-color: var(--cmc-ok); color: #fff; }
.cmc-copy.is-failed { background: var(--cmc-bad); border-color: var(--cmc-bad); color: #fff; }

.cmc-amount {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--cmc-line);
	font-size: .9rem;
	color: var(--cmc-muted);
}

.cmc-amount strong {
	font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem);
	color: var(--cmc-accent);
	font-variant-numeric: tabular-nums;
}

/* Tanım listesi ve tablo */

.cmc-deflist { margin: 0; display: grid; gap: 10px; }
.cmc-deflist--tight { gap: 7px; }

.cmc-deflist__row {
	display: grid;
	grid-template-columns: minmax(96px, 30%) 1fr;
	gap: 12px;
	font-size: .89rem;
	line-height: 1.5;
}

.cmc-deflist dt { color: var(--cmc-muted); }
.cmc-deflist dd { margin: 0; font-weight: 500; }

.cmc-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.cmc-table td { padding: 9px 0; border-bottom: 1px solid var(--cmc-line); }
.cmc-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cmc-table__total td { font-weight: 700; border-bottom: 0; padding-top: 12px; }
.cmc-muted { color: var(--cmc-muted); }

/* =================================================================
   Ürün ızgarası
   ================================================================= */

.cmc-grid {
	display: grid;
	gap: 22px;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
}

.cmc-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--cmc-line);
	border-radius: var(--cmc-radius);
	background: var(--cmc-surface);
	overflow: hidden;
	transition: transform .2s ease, box-shadow .2s ease;
}

.cmc-card:hover { transform: translateY(-3px); box-shadow: var(--cmc-shadow); }

/*
 * TÜKENEN ÜRÜN KARTI SOLDURULMAZ.
 *
 * `opacity: .72` kartın TAMAMINI, yani ürün adını, fiyatı ve
 * "Tükendi" yazısını da soldurup kontrastı eşiğin altına indiriyordu
 * (Tükendi rozeti 2,54:1). Üstelik bilgiyi taşıyan öge tam da o
 * yazı. Artık yalnızca GÖRSEL geri çekiliyor; metin tam kontrastta
 * kalıyor.
 */
.cmc-card.is-soldout { opacity: 1; }
.cmc-card.is-soldout .cmc-card__img { filter: grayscale(.6); }

.cmc-card__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	background: var(--cmc-surface-2);
	overflow: hidden;
}

/*
 * Rozetler artık bağlantının DIŞINDA duruyor (bkz. product-grid.php):
 * görsel bağlantısı aria-hidden olduğu için "Tükendi" ve kampanya
 * rozeti ekran okuyucuya hiç ulaşmıyordu. Bağlantı kutunun tamamını
 * kaplasın diye ayrı bir sınıf aldı.
 */
.cmc-card__media-link {
	position: absolute;
	inset: 0;
	display: block;
}

.cmc-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s cubic-bezier(.2,.7,.3,1);
}

.cmc-card:hover .cmc-card__img { transform: scale(1.05); }

.cmc-card__badge {
	position: absolute;
	inset-block-start: 12px;
	inset-inline-start: 12px;
	padding: 5px 11px;
	border-radius: 999px;
	background: var(--cmc-accent);
	color: var(--cmc-accent-ink);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .03em;
}

.cmc-card__badge--out { background: #4b4540; inset-inline-start: auto; inset-inline-end: 12px; }

.cmc-card__body { padding: 15px 16px 17px; display: grid; gap: 9px; align-content: start; flex: 1; }

.cmc-card__title { margin: 0; font-size: .98rem; line-height: 1.35; }
.cmc-card__title a { color: inherit; text-decoration: none; }
.cmc-card__title a:hover { color: var(--cmc-accent); }

.cmc-card__price { display: flex; align-items: baseline; gap: 8px; }
.cmc-card__price del { color: var(--cmc-muted); font-size: .85rem; }
.cmc-card__price ins { text-decoration: none; font-weight: 700; font-size: 1.05rem; color: var(--cmc-accent); }

.cmc-card__cta { margin-top: auto; padding: 10px 18px; font-size: .88rem; }

@media (prefers-reduced-motion: reduce) {
	.cmc-card, .cmc-card__img { transition: none; }
	.cmc-card:hover { transform: none; }
	.cmc-card:hover .cmc-card__img { transform: none; }
}

/* =================================================================
   Hukuki metin sayfaları
   ================================================================= */

.cmc-legal { max-width: 760px; line-height: 1.7; }
.cmc-legal h2 { margin: 1.8em 0 .5em; font-size: 1.12rem; }
.cmc-legal ul { padding-inline-start: 1.3em; }
.cmc-legal li { margin-bottom: .4em; }

.cmc-legal__draft {
	padding: 12px 16px;
	border-inline-start: 3px solid var(--cmc-warn, #9a6400);
	background: #fdf8ee;
	border-radius: 0 var(--cmc-radius-sm) var(--cmc-radius-sm) 0;
	font-size: .88rem;
}

/* =================================================================
   Adet seçici
   ================================================================= */

.cmc-qty {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--cmc-line);
}

.cmc-qty__label {
	font-size: .82rem;
	font-weight: 600;
	color: var(--cmc-muted);
}

.cmc-qty__box {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--cmc-line);
	border-radius: var(--cmc-radius-sm);
	overflow: hidden;
	background: var(--cmc-surface);
}

.cmc-qty__btn {
	width: 40px;
	min-height: 40px;
	border: 0;
	background: transparent;
	color: var(--cmc-ink);
	font-size: 1.05rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

.cmc-qty__btn:hover { background: var(--cmc-surface-2); color: var(--cmc-accent); }
.cmc-qty__btn:focus-visible { outline: 2px solid var(--cmc-accent); outline-offset: -2px; }

.cmc-qty__box input {
	width: 52px;
	min-height: 40px;
	padding: 0;
	border: 0;
	border-inline: 1px solid var(--cmc-line);
	background: transparent;
	color: inherit;
	font: inherit;
	font-weight: 600;
	text-align: center;
	font-variant-numeric: tabular-nums;
	-moz-appearance: textfield;
}

.cmc-qty__box input::-webkit-outer-spin-button,
.cmc-qty__box input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cmc-qty__box input:focus-visible { outline: 2px solid var(--cmc-accent); outline-offset: -2px; }

/* =====================================================================
 * İletişim formu
 * ================================================================== */

.cmc-form--contact { max-width: 46rem; }

/*
 * BU KURAL ARTIK YALNIZCA İLETİŞİM FORMUNA AİT.
 *
 * Seçici `.cmc-form__foot` olduğu ve dosyada YUKARIDAKİ
 * `display: grid` kuralından SONRA geldiği için sipariş formunun
 * alt bloğunu da esnek satıra çeviriyordu: uyarı kutusu, güven
 * cümlesi ve tam genişlikli gönder düğmesi aynı satıra dizilmeye
 * çalışıyor, sarma yüzünden sıra rastgele bozuluyordu. Güven
 * cümlesini düğmenin ÜSTÜNE almak da bu yüzden işe yaramıyordu.
 */
.cmc-form--contact .cmc-form__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem 1.25rem;
	margin-top: 1.25rem;
}

.cmc-form__alt {
	margin: 0;
	color: var(--cmc-muted);
	font-size: .9rem;
}

/*
 * Cümle içinde geçen telefon ve WhatsApp bağlantıları WCAG 2.5.8'in
 * "satır içi bağlantı" istisnasına girer, yani hedef boyutu kuralı
 * uygulanmaz. Yine de telefonda 16 px'lik bir hedefe basmak zordur:
 * dikey iç boşluk satır düzenini bozmadan dokunma alanını büyütür.
 */
.cmc-form__alt a,
.cmc-faq__a a {
	color: var(--cmc-ink);
	font-weight: 600;
	text-underline-offset: .18em;
	padding-block: 5px;
}

.cmc-form__status {
	margin-top: .85rem;
	font-size: .92rem;
	line-height: 1.55;
}

.cmc-form__status.is-error {
	padding: .7rem .9rem;
	border-radius: var(--cmc-radius-sm);
	border: 1px solid color-mix(in srgb, var(--cmc-bad) 30%, transparent);
	background: color-mix(in srgb, var(--cmc-bad) 5%, var(--cmc-surface));
	color: var(--cmc-bad);
}

/* Bal küpü: ekranda ve sekme sırasında yok, ekran okuyucuda etiketli.
   display:none KULLANILMAZ; bazı botlar gizli alanı atlar, bazı ekran
   okuyucular etiketsiz alan uyarısı verir. */
.cmc-hp {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* =====================================================================
 * İletişim künyesi
 * ================================================================== */

.cmc-info { margin: 0; display: grid; gap: .9rem; }

.cmc-info__row {
	display: grid;
	gap: .15rem;
	padding-bottom: .9rem;
	border-bottom: 1px solid var(--cmc-line);
}

.cmc-info__row:last-child { padding-bottom: 0; border-bottom: 0; }

.cmc-info dt {
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--cmc-muted);
}

.cmc-info dd { margin: 0; font-size: 1rem; line-height: 1.55; }
.cmc-info dd a { color: inherit; font-weight: 600; }

/* =====================================================================
 * Sıkça sorulan sorular
 *
 * <details>/<summary> ile: klavye desteği tarayıcıdan gelir, JS kapalıyken
 * de tüm cevaplar okunur ve arama motoru içeriği görür.
 * ================================================================== */

.cmc-faq {
	display: grid;
	gap: .6rem;
	max-width: 52rem;
}

.cmc-faq__item {
	border: 1px solid var(--cmc-line);
	border-radius: var(--cmc-radius);
	background: var(--cmc-surface);
	overflow: hidden;
	transition: border-color .18s ease, box-shadow .18s ease;
}

.cmc-faq__item:hover { border-color: color-mix(in srgb, var(--cmc-accent) 28%, var(--cmc-line)); }
.cmc-faq__item[open] { border-color: color-mix(in srgb, var(--cmc-accent) 34%, var(--cmc-line)); box-shadow: var(--cmc-shadow); }

.cmc-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 1.15rem;
	min-height: 44px;
	font-weight: 600;
	font-size: 1.02rem;
	line-height: 1.45;
	cursor: pointer;
	list-style: none;
	transition: color .16s ease;
}

.cmc-faq__q::-webkit-details-marker { display: none; }
.cmc-faq__q:hover { color: var(--cmc-accent); }

.cmc-faq__q:focus-visible {
	outline: 2px solid var(--cmc-accent);
	outline-offset: -2px;
	border-radius: var(--cmc-radius);
}

.cmc-faq__chev {
	flex: none;
	width: 20px;
	height: 20px;
	color: var(--cmc-muted);
	transition: transform .22s cubic-bezier(.4, 0, .2, 1);
}

.cmc-faq__item[open] .cmc-faq__chev { transform: rotate(180deg); }

.cmc-faq__a {
	padding: 0 1.15rem 1.15rem;
	color: var(--cmc-muted);
	font-size: .97rem;
	line-height: 1.7;
}

.cmc-faq__a p { margin: 0; }
.cmc-faq__a strong { color: var(--cmc-ink); }

/* =====================================================================
 * Hukuki metin tablosu (KVKK başvuru formu)
 * ================================================================== */

.cmc-legal__table {
	width: 100%;
	margin: 1.25rem 0;
	border-collapse: collapse;
	font-size: .95rem;
}

.cmc-legal__table th,
.cmc-legal__table td {
	padding: .75rem .9rem;
	border: 1px solid var(--cmc-line);
	text-align: start;
	vertical-align: top;
}

.cmc-legal__table th {
	width: 38%;
	background: var(--cmc-surface-2);
	font-weight: 600;
}

.cmc-legal__table td { min-height: 2.5rem; }

@media (max-width: 540px) {
	.cmc-legal__table th { width: 45%; }
	.cmc-legal__table th,
	.cmc-legal__table td { padding: .6rem .65rem; font-size: .88rem; }
}

@media print {
	.cmc-legal__draft { display: none; }
	.cmc-legal__table td { height: 2.6rem; }
}

@media (prefers-reduced-motion: reduce) {
	.cmc-faq__item,
	.cmc-faq__chev,
	.cmc-faq__q { transition: none; }
}

/* =================================================================
   ÖZEL AÇILIR LİSTE

   Gerçek <select> ekranda görünmez ama DOM'da durur: form gönderimi,
   sunucu doğrulaması ve JavaScript kapalıyken çalışma ona bağlı.
   display:none KULLANILMAZ — gizlenmiş bir alan bazı tarayıcılarda
   required doğrulamasına takılır ve "odaklanamayan alan" hatası verir.
   ================================================================= */

.cmc-sel { position: relative; }

.cmc-sel__native {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
	inset-inline-start: 12px;
	inset-block-start: 50%;
	border: 0;
	padding: 0;
	margin: 0;
}

/*
 * DENETİM ARTIK BİR DÜĞME DEĞİL, BİR METİN KUTUSU.
 *
 * Eski katman bir <button role="combobox"> ile ayrı bir
 * <input role="searchbox"> karışımıydı: iki farklı ARIA örüntüsünün
 * yarısı. Odak arama kutusuna geçiyor ama aria-activedescendant
 * artık odakta olmayan DÜĞMEYE de yazılıyordu; NVDA/JAWS önce
 * "düzenleme alanı" diyor, sonra ok tuşlarında tamamen susuyordu.
 * Şimdi APG'nin "Editable Combobox with List Autocomplete"
 * örüntüsü var: yazılan kutunun KENDİSİ combobox, odak hiç
 * kıpırdamıyor. `.cmc-sel__field` yalnızca görsel kap.
 */
.cmc-sel__field {
	display: flex;
	align-items: center;
	gap: 6px;
	width: 100%;
	padding: 0 4px 0 13px;
	border: 1px solid var(--cmc-field);
	border-radius: var(--cmc-radius-sm);
	background: var(--cmc-surface);
	transition: border-color .16s ease, box-shadow .16s ease;
}

.cmc-sel__input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 11px 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	line-height: 1.4;
	text-overflow: ellipsis;
	-webkit-appearance: none;
	appearance: none;
}

.cmc-sel__input:focus { outline: none; }
.cmc-sel__input::placeholder { color: var(--cmc-muted); opacity: 1; }
.cmc-sel__field:hover { border-color: var(--cmc-line-2, var(--cmc-accent)); }

/*
 * Odak halkası KABIN üstünde: gerçek odak içerideki metin
 * kutusunda ama görünen sınır bu. İki tonlu — iç beyaz halka
 * (aksan dolgulu bir zemine düşse de görünür), dış aksan halka
 * (beyaz sayfada 6,84:1 / temada 7,47:1).
 */
.cmc-sel__field:focus-within {
	outline: 2px solid var(--cmc-accent);
	outline-offset: 2px;
	border-color: var(--cmc-accent);
	box-shadow: 0 0 0 2px var(--cmc-surface), 0 0 0 5px var(--cmc-accent-soft);
}

.cmc-sel__field.is-invalid {
	border-color: var(--cmc-bad);
	background: color-mix(in srgb, var(--cmc-bad) 4%, var(--cmc-surface));
}

/*
 * Kilitli alan ("Önce il seçin"): readonly kullanılıyor, disabled
 * DEĞİL. disabled bir alan odağı kaybettirir ve ekran okuyucu onu
 * hiç duyurmaz — müşteri neden yazamadığını öğrenemez. readonly +
 * aria-disabled odakta bırakır, yer tutucu sebebi söyler.
 */
.cmc-sel__field.is-locked {
	background: var(--cmc-off-bg, #f1efec);
	border-color: var(--cmc-off-line, #8d8479);
}

.cmc-sel__field.is-locked .cmc-sel__input { cursor: not-allowed; color: var(--cmc-off-ink, #4a443e); }
.cmc-sel__field.is-locked .cmc-sel__input::placeholder { color: var(--cmc-off-ink, #4a443e); }

/*
 * Aç/kapa oku. tabindex="-1" — APG bu düğmeyi sekme sırasının
 * DIŞINDA ister; klavye kullanıcısı zaten metin kutusundan
 * Alt+Aşağı ile açıyor. Fare için 30x30'luk gerçek bir hedef.
 */
.cmc-sel__toggle {
	flex: none;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--cmc-muted);
	cursor: pointer;
}

.cmc-sel__toggle:hover { background: var(--cmc-surface-2); color: var(--cmc-accent); }
.cmc-sel__toggle svg { width: 16px; height: 16px; display: block; transition: transform .2s ease; }
.cmc-sel.is-open .cmc-sel__toggle svg { transform: rotate(180deg); }

/* Açılan katman
 *
 * KATMAN SIRASI: tema kromu 55-60 arasını kullanıyor (alt eylem
 * çubuğu 60, yüzen düğme 56). 60 ile eşitlikte DOM sırası kazanıyor
 * ve telefonda alttan açılan tabakanın son seçenekleri "WhatsApp /
 * Çiçek Gönder" çubuğunun ALTINDA kalıyordu: görünen seçeneğe
 * dokunan kullanıcı WhatsApp'a gidiyordu. Seçim katmanı geçicidir
 * ve o an en üstte olmalıdır.
 */
.cmc-sel__pop {
	position: absolute;
	z-index: 200;
	inset-inline: 0;
	top: calc(100% + 6px);
	background: var(--cmc-surface);
	border: 1px solid var(--cmc-line);
	border-radius: var(--cmc-radius-sm);
	box-shadow: 0 4px 12px -4px rgba(0,0,0,.10), 0 22px 44px -26px rgba(0,0,0,.30);
	padding: 6px;
	animation: cmc-sel-in .16s ease;
}

.cmc-sel.is-up .cmc-sel__pop { top: auto; bottom: calc(100% + 6px); }

@keyframes cmc-sel-in {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: none; }
}

/*
 * Katmanın içindeki ayrı arama kutusu KALDIRILDI. Yazılan yer artık
 * combobox'ın kendisi; iki metin kutusu göstermek kullanıcıya
 * "hangisine yazacağım" sorusunu sordurmaktan başka işe yaramıyordu.
 */

.cmc-sel__list {
	max-height: 268px;
	overflow-y: auto;
	overscroll-behavior: contain;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cmc-sel__group { padding: 0; }
.cmc-sel__group[hidden] { display: none; }

.cmc-sel__group-label {
	display: block;
	padding: 9px 10px 5px;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--cmc-muted);
}

.cmc-sel__opt {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 9px 11px;
	min-height: 38px;
	border-radius: var(--cmc-radius-sm);
	cursor: pointer;
	line-height: 1.35;
}

.cmc-sel__opt[hidden] { display: none; }

/* Uzun mahalle adları rozetin altına kaymasın. */
.cmc-sel__opt-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/*
 * SANAL ODAK GÖSTERGESİ DE BİR ODAK HALKASIDIR.
 *
 * Gerçek odak metin kutusunda kaldığı için ok tuşlarıyla gezilen
 * seçeneğin üstündeki işaret, klavye kullanıcısının "neredeyim"
 * sorusunun tek cevabı. Yalnızca --cmc-accent-soft zemini beyaza
 * karşı 1,15:1 idi; artık içeriden 2px aksan halka var (6,84:1).
 */
.cmc-sel__opt.is-active {
	background: var(--cmc-accent-soft);
	box-shadow: inset 0 0 0 2px var(--cmc-accent);
}

.cmc-sel__opt[aria-selected="true"] { font-weight: 600; }

.cmc-sel__opt[aria-selected="true"]::after {
	content: "";
	flex: none;
	width: 14px; height: 14px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6.5 9.5 17 4 11.5'/%3E%3C/svg%3E") center/contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6.5 9.5 17 4 11.5'/%3E%3C/svg%3E") center/contain no-repeat;
	color: var(--cmc-accent);
}

/*
 * TESLİMAT YAPILMAYAN BÖLGE: görünür ama seçilemez.
 *
 * "Bu bölgeye teslimat yok" cümlesi, müşterinin kendi ilçesine
 * hizmet verilmediğini öğrendiği TEK yer — yani süs değil, içerik.
 * `opacity: .72` ile soldurulunca 3,64:1'e düşüyordu. Artık kendi
 * zemin/mürekkep çifti var: #4a443e üstünde #f4f2ef = 8,59:1.
 */
.cmc-sel__opt.is-off {
	opacity: 1;
	cursor: not-allowed;
	color: var(--cmc-off-ink, #4a443e);
	background: #f4f2ef;
}

.cmc-sel__opt.is-off:hover { background: #f4f2ef; }

.cmc-sel__note {
	flex: none;
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 2px 7px;
	border-radius: 100px;
	border: 1px solid var(--cmc-off-line, #8d8479);
	background: var(--cmc-surface);
	color: var(--cmc-off-ink, #4a443e);
}

/*
 * role="status" taşır (bkz. cmc-select.js): süzme sonucu sıfıra
 * düştüğünde ekran okuyucu bunu kendiliğinden söyler. Önceden
 * yalnızca gören kullanıcı fark ediyordu; klavyeyle yazan biri
 * boş bir listede ok tuşlarına basıp duruyordu.
 */
.cmc-sel__empty {
	margin: 0;
	padding: 14px 11px;
	color: var(--cmc-off-ink, #4a443e);
	font-size: .9rem;
	text-align: center;
}

.cmc-sel__empty[hidden] { display: none; }

/*
 * TELEFONDA ARTIK ALTTAN AÇILAN TABAKA YOK.
 *
 * Eski katman ekranın altına yapışıyordu; o zaman odak bir DÜĞMEDE
 * kaldığı için sanal klavye açılmıyor ve bu işe yarıyordu. Denetim
 * artık bir metin kutusu (APG "Editable Combobox"), yani liste
 * açıkken sanal klavye de açık — ekranın altına yapışan tabaka tam
 * olarak klavyenin arkasında kalırdı. Liste alanın hemen altında
 * duruyor ve klavyenin üstünde kalacak kadar kısa tutuluyor.
 */
@media (max-width: 560px) {
	.cmc-sel__pop { padding: 8px; }
	.cmc-sel__list { max-height: 44vh; }
	.cmc-sel__opt { min-height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
	.cmc-sel__pop { animation: none; }
	.cmc-sel__toggle svg { transition: none; }
	.cmc-sel__field { transition: none; }
}

/* İki sütunlu satırda alanlar tepeden hizalanır.
   Grid satırları varsayılan olarak esner; yardım metni olan alanın
   yanındaki alan bu yüzden uzayıp kutuları kaydırıyordu. */
.cmc-row > .cmc-field { align-self: start; }

/* =================================================================
   TEŞEKKÜR GEÇİŞİ

   Form silinmez, yalnızca görünmez olur; panel üstüne biner. İkisi de
   aynı kapta durduğu için kap yüksekliği JS tarafından kilitlenir ve
   geçiş sırasında sayfa zıplamaz.
   ================================================================= */

.cmc-thanks-host { position: relative; }

/*
 * TEŞEKKÜR PANELİ AÇIKKEN FORM GERÇEKTEN YOK SAYILIR.
 *
 * Yalnızca opacity ve pointer-events sıfırlanıyordu; alanlar hâlâ
 * sekme sırasındaydı ve aria-hidden="true" bir ağacın içinde
 * odaklanılabiliyordu — ekran okuyucu için tanımsız bir durum.
 * visibility geçişin sonunda devreye girer, böylece solma animasyonu
 * bozulmaz.
 */
.cmc-form.is-gone {
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px) scale(.985);
	pointer-events: none;
	transition: opacity .32s ease, transform .32s cubic-bezier(.16,1,.3,1), visibility 0s linear .32s;
}

.cmc-form {
	transition: opacity .34s ease .06s, transform .34s cubic-bezier(.16,1,.3,1) .06s;
}

.cmc-thanks {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	text-align: center;
	padding: 32px 24px;
	border-radius: var(--cmc-radius, 12px);
	background: var(--cmc-surface);
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .34s ease, transform .34s cubic-bezier(.16,1,.3,1);
}

.cmc-thanks.is-in { opacity: 1; transform: none; }
.cmc-thanks.is-out { opacity: 0; transform: translateY(-8px); }
.cmc-thanks:focus { outline: none; }
.cmc-thanks:focus-visible { outline: 2px solid var(--cmc-accent); outline-offset: 3px; }

.cmc-thanks__art { width: 54px; height: 54px; color: var(--cmc-ok, #147a4b); }
.cmc-thanks__art svg { width: 100%; height: 100%; display: block; }

.cmc-thanks__c,
.cmc-thanks__k {
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.cmc-thanks__c { stroke-width: 2; opacity: .28; }
.cmc-thanks__k { stroke-width: 3.4; }

/* Halka ve tik çiziliyormuş gibi görünsün — 120 birim yol uzunluğu
   ikisi için de fazlasıyla yeterli, kalanı sadece beklemeye düşer. */
.cmc-thanks.is-in .cmc-thanks__c {
	stroke-dasharray: 150;
	stroke-dashoffset: 150;
	animation: cmc-draw .6s cubic-bezier(.16,1,.3,1) forwards;
}

.cmc-thanks.is-in .cmc-thanks__k {
	stroke-dasharray: 40;
	stroke-dashoffset: 40;
	animation: cmc-draw .42s cubic-bezier(.16,1,.3,1) .34s forwards;
}

@keyframes cmc-draw { to { stroke-dashoffset: 0; } }

.cmc-thanks__t {
	font-size: 1.22rem;
	line-height: 1.3;
	color: var(--cmc-ink, inherit);
}

.cmc-thanks__b {
	margin: 0;
	max-width: 46ch;
	color: var(--cmc-muted);
	line-height: 1.7;
}

@media (prefers-reduced-motion: reduce) {
	.cmc-form,
	.cmc-form.is-gone,
	.cmc-thanks { transition: opacity .01s linear; transform: none; }
	.cmc-thanks.is-in .cmc-thanks__c,
	.cmc-thanks.is-in .cmc-thanks__k { animation: none; stroke-dashoffset: 0; }
}

/* Yardım metni uyarı durumundayken (aralık doldu, bölge dışı mahalle) */
.cmc-help.is-warn { color: var(--cmc-bad); font-weight: 600; }

/* --- Hukuki metinler ------------------------------------------------- */

.cmc-legal__meta { font-size: .84rem; color: var(--cmc-muted); margin-bottom: 1.6rem; }

.cmc-legal__note {
	padding: 12px 16px;
	border-inline-start: 3px solid var(--cmc-accent);
	background: var(--cmc-accent-soft);
	border-radius: 0 6px 6px 0;
	font-size: .92rem;
	line-height: 1.7;
}

.cmc-legal__table { width: 100%; border-collapse: collapse; margin: 1.2rem 0 1.8rem; font-size: .9rem; }
.cmc-legal__table th,
.cmc-legal__table td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--cmc-line); vertical-align: top; line-height: 1.6; }
.cmc-legal__table th { background: var(--cmc-wash, #F2F4F0); font-weight: 600; font-size: .82rem; }
.cmc-legal__table tr:last-child td { border-bottom: 0; }

/* Dar ekranda tablo kendi içinde kaysın; sayfa yana kaymasın. */
.cmc-legal__table { display: block; overflow-x: auto; white-space: normal; }
@media (min-width: 640px) { .cmc-legal__table { display: table; } }

.cmc-legal__dl { margin: 1.2rem 0 1.8rem; }
.cmc-legal__dl dt { font-weight: 600; margin-top: 1.1rem; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cmc-legal__dl dd { margin: .4rem 0 0; color: var(--cmc-body, #4E5A52); line-height: 1.75; }

.cmc-legal__tag {
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 2px 8px;
	border-radius: 100px;
	border: 1px solid var(--cmc-line);
	color: var(--cmc-muted);
}

/* Onay kutusunun kendisi de görünür bir kenarlık ister. */
.cmc-checkbox input[type="checkbox"] { accent-color: var(--cmc-accent); }
.cmc-field--consent .cmc-checkbox { align-items: flex-start; }

/* =====================================================================
 * ONAY EKRANI — YAZDIRMA
 *
 * Ekran "bu sayfayı kaydedin ya da bağlantısını saklayın" diyordu ama
 * kaydetmenin hiçbir yolunu sunmuyordu: yazdırıldığında IBAN'ın yanına
 * "Kopyala" düğmesi, WhatsApp bölümünün tamamı ve gezinme kromu da
 * basılıyordu. Havale yapacak kişi çoğu zaman siparişi veren kişi
 * değil (eşi, muhasebeci); ona uzatılacak kâğıtta yalnız IBAN, tutar
 * ve sipariş numarası olmalı.
 *
 * Bağlantılar da basılır: kâğıtta "buraya tıklayın" yazmak, kâğıdı
 * eline alan için hiçbir anlam taşımıyor.
 * ================================================================== */
@media print {
	.cmc-confirm {
		max-width: none;
		gap: 14px;
		color: #000;
	}

	/* Etkileşimli ve yazdırıldığında anlamsız kalan ögeler. */
	.cmc-confirm .cmc-copy,
	.cmc-confirm .cmc-btn,
	.cmc-confirm .cmc-panel--wa,
	.cmc-confirm .cmc-share__hint { display: none !important; }

	.cmc-confirm .cmc-panel,
	.cmc-confirm .cmc-orderno,
	.cmc-confirm .cmc-iban {
		border: 1px solid #767676;
		box-shadow: none;
		background: #fff;
		break-inside: avoid;
		page-break-inside: avoid;
	}

	/* Kâğıtta bağlantının nereye gittiği yazılmalı. */
	.cmc-confirm .cmc-print-url {
		display: block;
		font-size: 10pt;
		word-break: break-all;
	}

	.cmc-confirm__lead,
	.cmc-panel__lead,
	.cmc-panel__fine,
	.cmc-panel__note,
	.cmc-deflist dt,
	.cmc-muted { color: #000; }
}

/* Yazdırma için basılan tam adres ekranda görünmez; kâğıtta görünür. */
.cmc-print-url { display: none; }

/* Onay ekranındaki "bu sayfayı sakla" eylem satırı. */
.cmc-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.cmc-share__hint { margin: 0; font-size: .8rem; color: var(--cmc-muted); line-height: 1.5; }

/*
 * "Alıcı benim" kısayolu. Kutu satırın tamamını kaplar; 30 px'lik
 * dokunma hedefi .cmc-checkbox kuralından geliyor.
 */
.cmc-field--samesender { margin-top: 2px; }
.cmc-field--samesender .cmc-help { margin-inline-start: 33px; }

/* ------------------------------------------------------------------ *
 * GÜVENLİK DOĞRULAMASI ENGELLENDİĞİNDE GÖSTERİLEN KAÇIŞ YOLU
 *
 * reCAPTCHA jetonu tarayıcıda üretilemezse sipariş/mesaj gönderilemiyor.
 * Eskiden yalnızca "sayfayı yenileyin" yazıyordu; yenilemek sebebi
 * (reklam engelleyici, ağ filtresi) ortadan kaldırmadığı için müşteri
 * kayboluyordu. Artık uyarı kutusunda WhatsApp bağlantısı çıkıyor.
 *
 * Bağlantı DÜĞME gibi görünür: uyarı metninin içinde kaybolan bir
 * bağlantı, panikteki bir kullanıcı tarafından fark edilmiyor.
 * ------------------------------------------------------------------ */

.cmc-alert__wa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-block-start: 10px;
  padding: 10px 18px;
  border-radius: 999px;
  /* #1f8f4e beyaz yazıyla 4,12:1 veriyordu (14 px metinde yetersiz);
     #17703d 6,1:1. */
  background: #17703d;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  line-height: 1.2;
}

.cmc-alert__wa:hover,
.cmc-alert__wa:focus-visible { background: #0f5a30; color: #fff; }

.cmc-alert__alt {
  margin-block: 10px 0;
  font-size: .92em;
  opacity: .85;
}

/* Mesaj kutusu tek satırlık metin için kurulmuştu; bağlantı eklenince
   alt alta sarması gerekiyor. */
.cmc-form__status.is-error .cmc-alert__wa { margin-inline-start: 0; }


/* Ürünsüz sipariş sayfası: iki çıkış yolu (2.1.0 · P3-8). */
.cmc-notice__acts { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 0; }
.cmc-notice > p { margin: 0; }