/**
 * Divit — ön yüz teklif formu.
 *
 * TÜM kurallar .divit-rfq altına scope'ludur; host tema etkilenmez
 * (CLAUDE.md Bölüm 14 — beyaz etiket).
 *
 * Görünüm tamamen CSS değişkenleriyle gelir. Konsept değiştirmek yalnızca
 * [data-concept] değerini değiştirmektir; hiçbir yapısal kural değişmez.
 *
 * Harici font YÜKLENMEZ: "theme" konsepti host temanın fontunu devralır,
 * diğerleri sistem font yığınlarını kullanır. Böylece ne render engellenir
 * ne de üçüncü tarafa istek gider.
 */

.divit-rfq {
	--rfq-bg: #fff;
	--rfq-surface: #fff;
	--rfq-field: #fff;
	--rfq-line: #e2e8f0;
	--rfq-line-2: #cbd5e1;
	--rfq-ink: #0f172a;
	--rfq-muted: #64748b;
	--rfq-accent: #0e7c86;
	--rfq-accent-ink: #fff;
	--rfq-accent-soft: #e6f4f5;
	--rfq-ok: #15803d;
	--rfq-ok-soft: #e7f4ec;
	--rfq-warn: #b45309;
	--rfq-warn-soft: #fbf0e2;
	--rfq-bad: #b91c1c;
	--rfq-bad-soft: #fbeaea;
	--rfq-info: #1e6f8b;
	--rfq-info-soft: #e6f1f5;
	--rfq-radius: 12px;
	--rfq-field-radius: 9px;
	--rfq-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--rfq-display: var(--rfq-font);
	--rfq-mono: ui-monospace, Menlo, Consolas, monospace;
	--rfq-lbl-tr: uppercase;
	--rfq-lbl-sp: .07em;
	--rfq-lbl-sz: 11px;
	--rfq-lbl-wt: 600;
	--rfq-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 14px 40px -24px rgba(15, 23, 42, .4);
	--rfq-head-bg: transparent;
	--rfq-head-ink: var(--rfq-ink);
	--rfq-grid-bg: none;

	box-sizing: border-box;
	background: var(--rfq-bg);
	background-image: var(--rfq-grid-bg);
	color: var(--rfq-ink);
	font-family: var(--rfq-font);
	line-height: 1.5;
	border: 1px solid var(--rfq-line);
	border-radius: var(--rfq-radius);
	box-shadow: var(--rfq-shadow);
	overflow: clip;
}

.divit-rfq *,
.divit-rfq *::before,
.divit-rfq *::after { box-sizing: inherit; }

/*
 * İki seçici de gerekli. `.divit-rfq .hidden` yalnızca formun İÇİNDEKİ
 * öğeleri gizler; oysa `hidden` sınıfı iki yerde kökün KENDİSİNE konur:
 * başarı kartı (`<div class="divit-rfq hidden" id="divit-success">`) ve
 * gönderim başarılı olduğunda formun kendisi. Bileşik seçici olmadan başarı
 * kartı sayfada sürekli görünür ve gönderimden sonra form kaybolmaz.
 */
.divit-rfq .hidden,
.divit-rfq.hidden { display: none !important; }

.divit-rfq-error {
	padding: 14px 16px;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	color: #64748b;
}

/* --- başlık --- */
.divit-rfq .rfq-head {
	padding: 26px 30px 22px;
	background: var(--rfq-head-bg);
	color: var(--rfq-head-ink);
	border-bottom: 1px solid var(--rfq-line);
}
/* Başlık tamamı büyük harf. Dönüşüm CSS'te yapılır, dizede DEĞİL: metin
   `__()` içinden geçer ve her dilin kendi büyük harf kuralı vardır (Türkçe
   "i" → "İ" gibi). Tarayıcı bunu sayfanın diline göre uygular; dizeyi büyük
   harfle yazmak çeviriyi de bozardı.
   `letter-spacing` sıfırlanır: büyük harfte negatif aralık harfleri birbirine
   yapıştırır. */
.divit-rfq .rfq-head h2 {
	font-family: var(--rfq-display);
	font-size: 26px;
	margin: 0;
	font-weight: 650;
	letter-spacing: .01em;
	text-transform: uppercase;
	text-wrap: balance;
	color: inherit;
}
.divit-rfq .rfq-head p {
	margin: 7px 0 0;
	color: var(--rfq-muted);
	font-size: 13.5px;
	/* Tam genişlik: başlığın altında satır sınırlaması olmadan uzar. */
	max-width: none;
}

.divit-rfq .rfq-body {
	padding: 26px 30px 30px;
	display: flex;
	flex-direction: column;
	gap: 26px;
}

.divit-rfq .sec-div { border: 0; border-top: 1px solid var(--rfq-line); margin: 0; }

/*
 * Paneller: 01+02 (ürün seçimi), 03 (firma), 04 (teslimat) ayrı kartlarda.
 * Ayraç çizgisi yerine hafif bir yüzey kullanılır — uzun formda hangi
 * bilginin nereye ait olduğu tek bakışta anlaşılsın.
 */
.divit-rfq .panel {
	display: flex;
	flex-direction: column;
	gap: 22px;
	padding: 20px 22px 24px;
	border: 1px solid var(--rfq-line);
	border-radius: var(--rfq-radius);
	background: var(--rfq-surface);
}

/*
 * Ürün arama katmanı paneli aşarak açılır; `overflow` kırpmamalı.
 * (Panelde overflow tanımlanmaz, burada niyet belgelenir.)
 */
.divit-rfq .panel .search { z-index: 1; }

@media (max-width: 640px) {
	.divit-rfq .panel { padding: 16px 14px 18px; gap: 18px; }
}

/* Onay kutulu satır (teslimat adresi anahtarı). */
.divit-rfq .samewrap { gap: 4px; }

.divit-rfq label.check {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--rfq-ink);
	cursor: pointer;
	text-transform: none;
	letter-spacing: 0;
}

.divit-rfq label.check input[type="checkbox"] {
	width: 17px;
	height: 17px;
	min-height: 0;
	margin: 0;
	flex: none;
	accent-color: var(--rfq-accent);
	cursor: pointer;
}

.divit-rfq section.block { display: flex; flex-direction: column; gap: 13px; }
.divit-rfq .block > h3 {
	font-family: var(--rfq-display);
	font-size: 12px;
	margin: 0;
	/* Numaralı bölüm başlıkları her konseptte büyük harf; alan etiketleri
	   konseptin kendi --rfq-lbl-tr değerini izlemeyi sürdürür. */
	text-transform: uppercase;
	letter-spacing: var(--rfq-lbl-sp);
	font-weight: 700;
	color: var(--rfq-ink);
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.divit-rfq .block > h3 .n { color: var(--rfq-muted); font-variant-numeric: tabular-nums; }
.divit-rfq .block > h3 .sub-note {
	font-weight: 400;
	color: var(--rfq-muted);
	text-transform: none;
	letter-spacing: 0;
	font-size: 11.5px;
}

/* --- ürün arama --- */
.divit-rfq .search { position: relative; display: flex; gap: 9px; }
.divit-rfq .search .field { flex: 1; position: relative; }
.divit-rfq .search svg.mag {
	position: absolute;
	left: 13px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--rfq-muted);
	pointer-events: none;
}
.divit-rfq .search input { padding-left: 38px; }

/* 16px BİR TASARIM TERCİHİ DEĞİL, ZORUNLULUK.
 *
 * Mobile Safari, odaklanılan girdinin yazı boyu 16px'in ALTINDAysa sayfayı
 * kendiliğinden yakınlaştırır. 14px'te ziyaretçi her alana dokunduğunda ekran
 * zoom'a giriyor ve geri çıkmak için parmakla küçültmesi gerekiyordu —
 * 10 alanlık bir formda 10 kez. */
.divit-rfq input,
.divit-rfq select,
.divit-rfq textarea {
	width: 100%;
	font: inherit;
	font-size: 16px;
	color: var(--rfq-ink);
	background: var(--rfq-field);
	border: 1px solid var(--rfq-line-2);
	border-radius: var(--rfq-field-radius);
	padding: 11px 13px;
	min-height: 44px;
	margin: 0;
	transition: border-color .15s, box-shadow .15s;
}
.divit-rfq input::placeholder,
.divit-rfq textarea::placeholder { color: var(--rfq-muted); opacity: .8; }
.divit-rfq input:focus,
.divit-rfq select:focus,
.divit-rfq textarea:focus {
	outline: none;
	border-color: var(--rfq-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--rfq-accent) 22%, transparent);
}
.divit-rfq textarea { min-height: 80px; resize: vertical; line-height: 1.45; }
/* Mesaj alanı bilinçli olarak kısa tutulur: çoğu talepte birkaç satırlık not
   girilir ve uzun bir kutu formu gereksiz uzatır. Yine de iki satır fazla
   dardı — üç satırlık bir kutu yazmaya davet eder ama sayfayı şişirmez.
   Dikey olarak genişletilebilir kalır. */
.divit-rfq #divit-note { min-height: 78px; }

/* Telefon: alan kodu seçicisi + ulusal numara --------------------------- */

.divit-rfq .phonewrap {
	display: flex;
	align-items: stretch;
	gap: 6px;
}

.divit-rfq .phonewrap .dialcombo {
	flex: 0 0 auto;
	position: relative;
}

/* ALAN KODU DÜĞMESİ KOMŞUSUNUN KUTUSUNU GİYER.
 *
 * Eskiden eklentinin kendi belirteçlerini kullanıyordu (`--rfq-line-2`,
 * `--rfq-field-radius`) ve "theme" konseptinde yanındaki telefon kutusundan
 * FARKLI görünüyordu: tema girdilere `rgba(0,0,0,.1)` kenarlık ve 5px köşe
 * veriyor, düğme ise `#c3ccd6` ve 4px çiziyordu. Aynı satırda duran iki
 * denetimin ayrı görünmesi, formdaki en kolay fark edilen kusurdu.
 *
 * Değerler JS tarafında telefon kutusundan OKUNUR ve özel değişkenlerle
 * geçirilir (`makeDialCombo`) — `.selbtn`'deki çözümün aynısı. Satır içi stil
 * kullanılsaydı aşağıdaki `:hover` ve `:focus-visible` kuralları hiçbir zaman
 * görünmezdi. Yedekler eklentinin kendi değerleridir: betik düşerse ya da
 * ölçü okunamazsa düğme yine çizilir. */
.divit-rfq .dialbtn {
	display: flex;
	align-items: center;
	gap: 5px;
	height: 100%;
	min-height: 44px;
	padding: 0 9px;
	font: inherit;
	font-size: 14px;
	color: var(--rfq-dial-ink, var(--rfq-ink));
	background: var(--rfq-dial-bg, var(--rfq-field));
	border-style: solid;
	border-width: var(--rfq-dial-bw, 1px);
	border-color: var(--rfq-dial-bc, var(--rfq-line-2));
	border-radius: var(--rfq-dial-radius, var(--rfq-field-radius));
	cursor: pointer;
	white-space: nowrap;
	transition: border-color .15s, box-shadow .15s;
}

.divit-rfq .dialbtn:hover { border-color: var(--rfq-accent); }

.divit-rfq .dialbtn:focus-visible {
	outline: none;
	border-color: var(--rfq-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--rfq-accent) 22%, transparent);
}

/*
 * Bayrak emojisi. Windows'un bazı sürümleri bayrak çizmez ve iki harf
 * gösterir; bu yüzden kod (+49) her zaman ayrıca yazılır — bayrak süs,
 * bilgi taşıyan kodun kendisidir.
 */
.divit-rfq .dialbtn .flag,
.divit-rfq .combo-opt .flag {
	font-size: 15px;
	line-height: 1;
	font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

.divit-rfq .dialbtn .code { font-variant-numeric: tabular-nums; }

.divit-rfq .phonewrap input[type="tel"] { flex: 1 1 auto; }

/* Açılır liste, ülke combobox'ıyla aynı görünümü paylaşır. */
.divit-rfq .dialcombo .combo-pop { min-width: 280px; }

.divit-rfq .combo-search {
	width: 100%;
	border: none;
	border-bottom: 1px solid var(--rfq-line);
	border-radius: 0;
	min-height: 40px;
}

.divit-rfq .combo-search:focus { box-shadow: none; border-color: var(--rfq-accent); }

.divit-rfq .dialcombo .combo-opt {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 8px;
	align-items: center;
}

@media (max-width: 480px) {
	/* Dar ekranda ülke adı taşmasın diye liste kutuya göre hizalanır. */
	.divit-rfq .dialcombo .combo-pop { min-width: min(280px, 78vw); }
}

/* Alan bazlı doğrulama hatası ------------------------------------------ */

.divit-rfq .f.invalid > input,
.divit-rfq .f.invalid > textarea,
.divit-rfq .f.invalid .selectwrap > input,
.divit-rfq .f.invalid .selectwrap > select {
	border-color: var(--rfq-bad);
	background: var(--rfq-bad-soft);
}

.divit-rfq .f.invalid > input:focus,
.divit-rfq .f.invalid > textarea:focus,
.divit-rfq .f.invalid .selectwrap > input:focus,
.divit-rfq .f.invalid .selectwrap > select:focus {
	border-color: var(--rfq-bad);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--rfq-bad) 22%, transparent);
}

/*
 * Etiket de renklenir: kırmızı çerçeve tek başına gösterge değildir
 * (renk körlüğü). İletinin kendisi ayrıca metin olarak yazılır.
 */
.divit-rfq .f.invalid > label { color: var(--rfq-bad); }

.divit-rfq .fielderr {
	display: flex;
	align-items: flex-start;
	gap: 5px;
	margin: 6px 0 0;
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--rfq-bad);
}

.divit-rfq .fielderr::before {
	content: "!";
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	margin-top: 1px;
	border-radius: 50%;
	background: var(--rfq-bad);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 14px;
	text-align: center;
}
.divit-rfq select { appearance: none; padding-right: 36px; }

.divit-rfq .btn {
	appearance: none;
	cursor: pointer;
	font: inherit;
	font-weight: 650;
	font-size: 14px;
	border-radius: var(--rfq-field-radius);
	border: 1px solid transparent;
	min-height: 44px;
	padding: 11px 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	transition: filter .15s, background .15s, color .15s, border-color .15s;
}
.divit-rfq .btn.primary { background: var(--rfq-accent); color: var(--rfq-accent-ink); }
.divit-rfq .btn.primary:hover { filter: brightness(1.06); }
.divit-rfq .btn:focus-visible { outline: 2px solid var(--rfq-accent); outline-offset: 2px; }
/*
 * Fazladan `:disabled` yalnızca ÖZGÜLLÜK içindir, seçimi daraltmaz: aynı
 * butonu seçer. Gerekçesi somut — buton tasarımı "Özel" iken gönder butonu
 * ayarlardan üretilen ve `cursor: pointer` yazan bir kural alır
 * (`Shortcode::SUBMIT_SELECTOR`); o kural bu satırdan daha özgül olduğu için
 * gönderim sırasındaki "çalışıyor" imleci sessizce kaybolurdu.
 */
.divit-rfq .btn[disabled]:disabled { opacity: .6; cursor: progress; }

/* Taslak geri yükleme SESSİZDİR — bilgi çubuğu yok (bkz. rfq-form.js). */

/* --- arama sonuçları --- */
/*
 * Sonuçlar arama kutusunun altına açılan katmandır.
 *
 * Sayfa akışında dursaydı 20 sonuç formu ekranlarca aşağı iter, kullanıcı
 * yerini kaybederdi. Yükseklik sınırlı ve içeride kaydırılır; kalan sonuçlar
 * kaybolmaz ama sayfa düzeni bozulmaz.
 */
.divit-rfq .results {
	position: absolute;
	top: calc(100% + 5px);
	left: 0;
	right: 0;
	z-index: 45;
	display: flex;
	flex-direction: column;
	max-height: 320px;
	overflow-y: auto;
	overscroll-behavior: contain;
	border: 1px solid var(--rfq-line);
	border-radius: var(--rfq-field-radius);
	background: var(--rfq-surface);
	box-shadow: 0 10px 28px rgba(0, 0, 0, .12);
	-webkit-overflow-scrolling: touch;
}

.divit-rfq .results[hidden] { display: none; }

/* Arama sürerken gösterilen satır. */
.divit-rfq .searching {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 15px;
	color: var(--rfq-muted);
	font-size: 13px;
}

.divit-rfq .searching .spin {
	width: 13px;
	height: 13px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: divit-spin .7s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
	.divit-rfq .searching .spin { animation-duration: 2.4s; }
}
.divit-rfq .res {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 14px;
	border-bottom: 1px solid var(--rfq-line);
	cursor: pointer;
	transition: background .13s;
}
.divit-rfq .res:last-child { border-bottom: 0; }
.divit-rfq .res:hover,
.divit-rfq .res:focus-visible { background: var(--rfq-accent-soft); outline: none; }
.divit-rfq .res .meta { flex: 1; min-width: 0; }
.divit-rfq .res .nm {
	font-size: 14px;
	font-weight: 550;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.divit-rfq .res .sub { font-size: 12px; color: var(--rfq-muted); font-family: var(--rfq-mono); }
.divit-rfq .res .add {
	flex: none;
	color: var(--rfq-accent);
	font-size: 12.5px;
	font-weight: 650;
}
.divit-rfq .empty { padding: 14px; color: var(--rfq-muted); font-size: 13px; text-align: center; }

/* "Bunu mu demek istediniz?" — boş sonucun altında, tıklanabilir.
   `min-height` sıfırlanır: temalar `button` etiketine taban yükseklik verir
   ve satır boş sonucun içinde bir düğme kadar yer kaplardı. */
.divit-rfq .empty .dym {
	display: block;
	margin: 8px auto 0;
	padding: 0;
	min-height: 0;
	border: 0;
	background: none;
	box-shadow: none;
	appearance: none;
	font: inherit;
	font-weight: 600;
	color: var(--rfq-accent);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.divit-rfq .empty .dym:hover { filter: brightness(1.15); }
.divit-rfq .empty .dym:focus-visible { outline: 2px solid var(--rfq-accent); outline-offset: 2px; border-radius: 3px; }

/* --- stok etiketi: sayı ASLA gösterilmez (CLAUDE.md Bölüm 4) --- */
.divit-rfq .pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11.5px;
	font-weight: 600;
	padding: 3px 9px;
	border-radius: 999px;
	white-space: nowrap;
}
.divit-rfq .pill .d { width: 7px; height: 7px; border-radius: 50%; }
.divit-rfq .pill.in { background: var(--rfq-ok-soft); color: var(--rfq-ok); }
.divit-rfq .pill.in .d { background: var(--rfq-ok); }
.divit-rfq .pill.lead { background: var(--rfq-warn-soft); color: var(--rfq-warn); }
.divit-rfq .pill.lead .d { background: var(--rfq-warn); }
/* "Montaja hazır": stokta DEĞİL ama bileşenleri var. Yeşilin soluk tonu
   bilinçli — müşteri onu rafta duran bir ürünle karıştırmamalı. */
.divit-rfq .pill.build { background: var(--rfq-ok-soft); color: var(--rfq-ok); opacity: .85; }
.divit-rfq .pill.build .d { background: var(--rfq-ok); opacity: .6; }
/* "Sipariş üzerine üretilir": nötr; bir söz değil, bir açıklama. */
.divit-rfq .pill.order { background: var(--rfq-info-soft); color: var(--rfq-info); }
.divit-rfq .pill.order .d { background: var(--rfq-info); }
.divit-rfq .pill.ask { background: var(--rfq-info-soft); color: var(--rfq-info); }
.divit-rfq .pill.ask .d { background: var(--rfq-info); }

/* --- satırlar --- */
.divit-rfq .lines { display: flex; flex-direction: column; gap: 9px; }
.divit-rfq .lines .head,
.divit-rfq .line {
	display: grid;
	grid-template-columns: 1fr 92px 96px 36px;
	gap: 12px;
	align-items: center;
}
.divit-rfq .lines .head {
	font-size: 10.5px;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--rfq-muted);
	font-weight: 600;
	padding: 0 2px;
}
/*
 * Seçili ürünler kasıtlı olarak belirgindir: form uzundur ve müşterinin
 * "sepetini" bir bakışta görebilmesi gerekir. Hafif petrol arka plan +
 * sol vurgu şeridi, satırları çevredeki beyaz alandan ayırır.
 */
.divit-rfq .line {
	background: var(--rfq-accent-soft);
	border: 1px solid color-mix(in srgb, var(--rfq-accent) 32%, var(--rfq-line));
	border-left: 3px solid var(--rfq-accent);
	border-radius: var(--rfq-field-radius);
	padding: 11px 12px;
}
.divit-rfq .line .nm { font-size: 13.5px; font-weight: 550; min-width: 0; }
.divit-rfq .line .nm small {
	display: block;
	color: var(--rfq-muted);
	font-weight: 400;
	font-family: var(--rfq-mono);
	font-size: 11.5px;
	margin-top: 2px;
}
.divit-rfq .qty {
	display: flex;
	align-items: center;
	border: 1px solid var(--rfq-line-2);
	border-radius: 8px;
	overflow: clip;
	background: var(--rfq-field);
}
.divit-rfq .qty button {
	appearance: none;
	border: 0;
	background: transparent;
	color: var(--rfq-muted);
	width: 30px;
	min-height: 40px;
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
}
.divit-rfq .qty button:hover { color: var(--rfq-accent); background: var(--rfq-accent-soft); }
.divit-rfq .qty input {
	border: 0;
	text-align: center;
	min-height: 40px;
	padding: 0;
	box-shadow: none;
	font-variant-numeric: tabular-nums;
	background: transparent;
}
.divit-rfq .qty input:focus { box-shadow: none; }
.divit-rfq .uom { font-size: 12.5px; color: var(--rfq-muted); }
.divit-rfq .rm {
	appearance: none;
	border: 0;
	background: transparent;
	color: var(--rfq-muted);
	cursor: pointer;
	width: 36px;
	height: 36px;
	border-radius: 8px;
	display: grid;
	place-items: center;
}
.divit-rfq .rm:hover { color: var(--rfq-bad); background: var(--rfq-bad-soft); }
.divit-rfq .lines-empty {
	border: 1px dashed var(--rfq-line-2);
	border-radius: var(--rfq-field-radius);
	padding: 22px;
	text-align: center;
	color: var(--rfq-muted);
	font-size: 13px;
}

/* --- alan ızgarası --- */
.divit-rfq .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px 16px; }
.divit-rfq .f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.divit-rfq .f.full { grid-column: 1 / -1; }
.divit-rfq label {
	font-size: var(--rfq-lbl-sz);
	text-transform: var(--rfq-lbl-tr);
	letter-spacing: var(--rfq-lbl-sp);
	font-weight: var(--rfq-lbl-wt);
	color: var(--rfq-ink);
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
}
.divit-rfq label .req { color: var(--rfq-bad); font-weight: 700; }
.divit-rfq .hint { font-size: 12px; color: var(--rfq-muted); line-height: 1.4; }

/* Yöneticinin form oluşturucudan girdiği alan yardım metni. */
/* --- yönetici tanımlı alanlar --------------------------------------------
 * Görsel bloklar (başlık / açıklama / ayraç) veri toplamaz; uzun formu
 * bölümlemek için vardır. Grup tipleri <fieldset> ile çizilir çünkü radyo ve
 * çoklu onay kutusunun ortak etiketi <legend> olmalıdır — <label> bir gruba
 * bağlanamaz. */
.divit-rfq .fhead {
	margin: 6px 0 0;
	font-family: var(--rfq-display);
	font-size: 14px;
	font-weight: 600;
	color: var(--rfq-ink);
}

.divit-rfq .fnote { margin: 0; font-size: 13px; line-height: 1.55; color: var(--rfq-muted); }
.divit-rfq .fdiv { border: 0; border-top: 1px solid var(--rfq-line); margin: 4px 0; }

.divit-rfq fieldset.fset {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.divit-rfq fieldset.fset > legend {
	padding: 0;
	margin: 0 0 3px;
	font-size: var(--rfq-lbl-sz);
	font-weight: var(--rfq-lbl-wt);
	letter-spacing: var(--rfq-lbl-sp);
	text-transform: var(--rfq-lbl-tr);
	color: var(--rfq-ink);
}

.divit-rfq fieldset.fset label.check input[type="radio"] {
	width: 17px;
	height: 17px;
	min-height: 0;
	margin: 0;
	flex: none;
	accent-color: var(--rfq-accent);
	cursor: pointer;
}

/*
 * Grup hatası: yukarıdaki `.f.invalid > label` seçicisi bir <legend>'i
 * yakalayamaz, alan da doğrudan çocuk bir input taşımaz. Bu kural olmadan
 * zorunlu bir grup GÖRÜNMEDEN geçersiz işaretlenirdi.
 */
.divit-rfq .f.invalid fieldset.fset > legend { color: var(--rfq-bad); }

.divit-rfq .f.invalid fieldset.fset {
	border-left: 2px solid var(--rfq-bad);
	padding-left: 10px;
}

.divit-rfq .fhelp { font-size: 12px; color: var(--rfq-muted); line-height: 1.45; margin: 5px 0 0; }
.divit-rfq .req-note { text-transform: none; letter-spacing: 0; font-weight: 400; }
.divit-rfq .addr3 { display: grid; grid-template-columns: 1fr 1fr; gap: 15px 16px; }
.divit-rfq .addr3 .f { min-width: 0; }

.divit-rfq .addline {
	appearance: none;
	border: 0;
	background: none;
	padding: 2px 0;
	margin-top: 2px;
	font: inherit;
	font-size: 12px;
	font-weight: 650;
	color: var(--rfq-accent);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	align-self: flex-start;
}
.divit-rfq .addline:hover { filter: brightness(1.12); }
.divit-rfq .addline:focus-visible { outline: 2px solid var(--rfq-accent); outline-offset: 2px; border-radius: 3px; }

.divit-rfq .selectwrap { position: relative; }
/* Açılır liste oku.
 *
 * Seçici DOĞRUDAN çocukla sınırlıdır. Torun eşleşmesi bırakılsaydı temizleme
 * düğmesinin İÇİNDEKİ çarpı da bu kurala girer, mutlak konumlanıp düğmenin
 * sağından 12px içeri kaçar ve dairenin ortasında durmazdı. */
.divit-rfq .selectwrap > svg {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	color: var(--rfq-muted);
}

/* --- seçimi temizle (×) ---
 *
 * Okun SOLUNA konumlanır; ok `pointer-events: none` olduğu için üstünde
 * durmasa bile tıklamayı engellemezdi, ama iki simge üst üste okunmaz olurdu.
 * Yalnızca dolu alanda görünür (JS `makeClearable`). */
.divit-rfq .selectwrap .clearsel {
	position: absolute;
	right: 32px;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	/*
	 * `min-*` ve `appearance` AÇIKÇA sıfırlanır. Temalar `button` etiketine
	 * genellikle bir taban yükseklik verir (`min-height: var(--btn-height)`);
	 * `min-height` `height`'ı EZDİĞİ için düğme 22×42 olur ve `border-radius:
	 * 50%` yuvarlak değil elips çizer. Eklenti herhangi bir temaya kurulabilmeli
	 * (Bölüm 14), bu yüzden kutu tema kurallarına bırakılmaz.
	 */
	min-width: 0;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
	appearance: none;
	line-height: 1;
	color: var(--rfq-muted);
	cursor: pointer;
	transition: background .15s, color .15s;
}

/* Kapalı hâli AÇIKÇA yazılmalı: `display: inline-flex` tarayıcının kendi
   `[hidden] { display: none }` kuralını ezer ve düğme boş alanda da görünürdü. */
.divit-rfq .selectwrap .clearsel[hidden] { display: none; }

.divit-rfq .selectwrap .clearsel:hover {
	background: var(--rfq-line);
	color: var(--rfq-ink);
}

.divit-rfq .selectwrap .clearsel:focus-visible {
	outline: 2px solid var(--rfq-accent);
	outline-offset: 1px;
}

/* Metin düğmenin altına girmesin. Yalnızca düğme görünürken uygulanır. */
.divit-rfq .selectwrap.has-clear > select,
.divit-rfq .selectwrap.has-clear > input { padding-right: 60px; }

/* --- yerel select'in yerine geçen düğme ---------------------------------
 *
 * `appearance: none` yalnızca KAPALI kutuyu biçimlendirir; açılan listeyi
 * işletim sistemi çizer ve hiçbir CSS ona ulaşamaz. Ülke ve alan kodu özel
 * bir panel açarken teslimat seçeneği işletim sisteminin gri menüsünü
 * açıyordu; aynı bölümde yan yana durdukları için fark göze batıyordu.
 *
 * Select DOM'da KALIR — `name`, `value` ve `required` yerinde durur, gönderilen
 * gövde değişmez — ama görünmez olur. `display: none` DEĞİL: kutu ölçüsünü
 * koruyan mutlak konum, ölçümün ve tarayıcının denetimi gerçek bir form
 * denetimi saymasının önünü açar.
 */
.divit-rfq .selectwrap.enhanced > select {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	pointer-events: none;
}

/*
 * Kutu ölçüsü ve yazı tipi BURADA SABİTLENMEZ; JS bunları select'in gerçekte
 * hesaplanmış değerlerinden kopyalar (bkz. enhanceSelect → copyBox).
 *
 * Sebep somut: `theme` konsepti host temayı devralır ve temalar `input`/
 * `select` kurallarını eklentininkiyle aynı özgüllükte yazar — sonra yüklenen
 * tema kazanır. Bu dosyada 16px yazıp bırakmak, düğmeyi komşularından FARKLI
 * gösterirdi; yani düzeltilmek istenen sorunun aynısını üretirdi.
 *
 * Aşağıdakiler yalnızca yedektir: JS düşerse ya da tema hiçbir şey ezmiyorsa
 * geçerli olur.
 */
.divit-rfq .selbtn {
	display: flex;
	align-items: center;
	/* Temalar `button`'a genellikle `justify-content: center` verir; yazı
	   ortada durur ve alan komşularından farklı görünürdü. */
	justify-content: flex-start;
	width: 100%;
	/* Tema kuralları ezmesin — `.clearsel`'deki gerekçenin aynısı. */
	min-width: 0;
	min-height: 44px;
	margin: 0;
	padding: 11px 36px 11px 13px;
	font: inherit;
	font-size: 16px;
	line-height: 1.2;
	text-align: left;
	box-sizing: border-box;
	border-style: solid;
	border-width: 1px;
	border-radius: var(--rfq-field-radius);
	box-shadow: none;
	appearance: none;
	cursor: pointer;
	transition: border-color .15s, box-shadow .15s;

	/*
	 * Renkler ÖZEL DEĞİŞKEN üzerinden gelir, satır içi stille değil: satır içi
	 * stil `!important` dışında her şeyi ezer ve aşağıdaki hata durumu kuralı
	 * hiçbir zaman görünmezdi.
	 */
	color: var(--rfq-sel-ink, var(--rfq-ink));
	background: var(--rfq-sel-bg, var(--rfq-field));
	border-color: var(--rfq-sel-bc, var(--rfq-line-2));
}

.divit-rfq .selbtn:focus-visible {
	outline: none;
	border-color: var(--rfq-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--rfq-accent) 22%, transparent);
}

.divit-rfq .selbtn-text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Yer tutucu bir SEÇİM DEĞİLDİR ("Select…") ve dolu bir alan gibi koyu
   yazılmamalıdır; kullanıcı alanı doldurulmuş sanardı. Girdi yer tutucularıyla
   aynı ton kullanılır. */
.divit-rfq .selbtn.is-placeholder .selbtn-text { color: var(--rfq-muted); opacity: .8; }

/* Hata çerçevesi düğmeye de uygulanır: select görünmediği için tek başına onu
   boyamak ekranda hiçbir şey göstermezdi. */
.divit-rfq .f.invalid .selectwrap > .selbtn {
	border-color: var(--rfq-bad);
	background: var(--rfq-bad-soft);
}

.divit-rfq .f.invalid .selectwrap > .selbtn:focus-visible {
	border-color: var(--rfq-bad);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--rfq-bad) 22%, transparent);
}

/* Temizleme düğmesi yazı ile okun arasında durur ve tıklanabilir kalmalıdır. */
.divit-rfq .selectwrap.has-clear > .selbtn { padding-right: 60px; }
.divit-rfq .selectwrap .clearsel { z-index: 2; }

/* --- ülke combobox --- */
.divit-rfq .combo { position: relative; }
.divit-rfq .combo .selectwrap input { padding-right: 36px; }
.divit-rfq .combo-pop {
	position: absolute;
	z-index: 40;
	top: calc(100% + 5px);
	left: 0;
	right: 0;
	background: var(--rfq-surface);
	border: 1px solid var(--rfq-line-2);
	border-radius: var(--rfq-field-radius);
	box-shadow: var(--rfq-shadow);
	max-height: 262px;
	overflow: auto;
	overscroll-behavior: contain;
}
/* Aşağıda yer yoksa panel yukarı açılır (JS `up` sınıfını koyar).
 *
 * Gerekli çünkü form kökünde `overflow: clip` var: aşağı taşan panel form
 * kenarında kırpılır, ekranda yarım görünür. `top: auto` ŞART — yalnızca
 * `bottom` vermek üstteki kuralı ezmez ve panel iki uca birden gerilirdi.
 *
 * Ölçü buradaki `max-height`ten okunur; JS onu yalnızca daraltır. */
.divit-rfq .combo-pop.up {
	top: auto;
	bottom: calc(100% + 5px);
}
.divit-rfq .combo-list { list-style: none; margin: 0; padding: 5px; }
.divit-rfq .combo-opt {
	padding: 9px 11px;
	border-radius: 7px;
	cursor: pointer;
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}
.divit-rfq .combo-opt:hover,
.divit-rfq .combo-opt.active { background: var(--rfq-accent-soft); color: var(--rfq-accent); }
.divit-rfq .combo-opt .cc {
	font-family: var(--rfq-mono);
	font-size: 11px;
	color: var(--rfq-muted);
	flex: none;
}
.divit-rfq .combo-opt.active .cc { color: var(--rfq-accent); }
.divit-rfq .combo-eu {
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .05em;
	margin-left: 8px;
	padding: 1px 5px;
	border-radius: 4px;
	background: var(--rfq-accent-soft);
	color: var(--rfq-accent);
}
.divit-rfq .combo-opt.active .combo-eu { background: var(--rfq-accent); color: var(--rfq-accent-ink); }
.divit-rfq .combo-empty { padding: 13px; color: var(--rfq-muted); font-size: 13px; text-align: center; }

/* --- incoterm yardımı --- */
.divit-rfq .inco-help {
	font-size: 12.5px;
	color: var(--rfq-muted);
	background: var(--rfq-accent-soft);
	border-left: 2px solid var(--rfq-accent);
	padding: 9px 12px;
	border-radius: 0 8px 8px 0;
	line-height: 1.45;
	margin: 0;
}
.divit-rfq .inco-help:empty { display: none; }

/* --- VAT durumu: dört durum, hiçbiri gönderimi engellemez --- */
.divit-rfq .vat-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 600;
	min-height: 16px;
}
.divit-rfq .vat-status.checking { color: var(--rfq-muted); }
.divit-rfq .vat-status.valid { color: var(--rfq-ok); }
.divit-rfq .vat-status.invalid { color: var(--rfq-bad); }
.divit-rfq .vat-status.unverified { color: var(--rfq-warn); }
.divit-rfq .email-suggest { color: var(--rfq-warn); font-weight: 500; }
.divit-rfq .email-suggest button {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: var(--rfq-accent);
	font-weight: 650;
	cursor: pointer;
	text-decoration: underline;
}

.divit-rfq .spin {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: 2px solid currentColor;
	border-top-color: transparent;
	animation: divit-spin .7s linear infinite;
}
@keyframes divit-spin { to { transform: rotate(360deg); } }

/* --- alt bölüm ---
 *
 * Düğme ortada, hata iletisi ÜSTÜNDE. Yan yana dizildiklerinde ileti düğmenin
 * solunda kalıyordu: göz gönderme eylemine odaklıyken hatayı çevresel görüşte
 * kaçırıyor ve tıklamayı yineliyordu. Üstte, tam okuma yolunun üzerinde durur.
 *
 * İşaretlemede ileti zaten düğmeden önce gelir; sütun düzeni sırayı olduğu
 * gibi kullanır — `order` ile yer değiştirme YAPILMAZ, aksi halde görsel sıra
 * ile klavye/ekran okuyucu sırası ayrışırdı. */
.divit-rfq .foot {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}
.divit-rfq .foot .err {
	color: var(--rfq-bad);
	font-size: 13px;
	margin: 0;
	text-align: center;
}

/* --- dosya ekleri --- */
.divit-rfq .drop {
	border: 1.5px dashed var(--rfq-line-2);
	border-radius: var(--rfq-field-radius);
	padding: 20px;
	text-align: center;
	color: var(--rfq-muted);
	font-size: 13px;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	transition: border-color .15s, background .15s;
}
.divit-rfq .drop:hover,
.divit-rfq .drop.over { border-color: var(--rfq-accent); background: var(--rfq-accent-soft); }
.divit-rfq .drop b { color: var(--rfq-ink); font-weight: 600; }
.divit-rfq .drop .lim { font-size: 11.5px; }

/* Gerçek input gizlenir; tetikleyici .drop alanıdır. */
.divit-rfq .hp-file { position: absolute; left: -9999px; width: 1px; height: 1px; }

.divit-rfq .filelist { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.divit-rfq .filelist li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	font-size: 12.5px;
	color: var(--rfq-muted);
	background: var(--rfq-surface);
	border: 1px solid var(--rfq-line);
	border-radius: 8px;
	padding: 7px 10px;
}
.divit-rfq .filelist li.err { color: var(--rfq-bad); border-color: var(--rfq-bad); }
.divit-rfq .filelist li.done { color: var(--rfq-ok); }

/* Uzun dosya adi satiri buyutmez; boyut ve cikar dugmesi sabit kalir. */
.divit-rfq .filelist li .nm {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.divit-rfq .filelist li .note { flex: 0 0 auto; }
.divit-rfq .filelist .rm {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	margin: -3px -4px -3px 0;
}

/* Honeypot: display:none yerine ekran dışı (Bölüm 8). */
.divit-rfq .hp {
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --- başarı ekranı --- */
.divit-rfq .success {
	padding: 44px 30px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}
.divit-rfq .success .ok {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--rfq-ok-soft);
	color: var(--rfq-ok);
	display: grid;
	place-items: center;
}
.divit-rfq .success h2 { font-family: var(--rfq-display); font-size: 23px; margin: 0; font-weight: 650; }
/* Açıklama metni tam genişlikte akar; karakter ölçüsüyle sınırlanmaz
   (proje kuralı — aynısı `admin.css` içinde de geçerli). */
.divit-rfq .success p { margin: 0; color: var(--rfq-muted); font-size: 14px; }
.divit-rfq .success .ref {
	font-family: var(--rfq-mono);
	font-size: 13px;
	background: var(--rfq-accent-soft);
	color: var(--rfq-accent);
	padding: 6px 12px;
	border-radius: 8px;
	font-weight: 600;
}
.divit-rfq .success .ref:empty { display: none; }

/* ==========================================================================
   KONSEPTLER — yalnızca değişken takası
   ========================================================================== */

/* theme: host WordPress temasını devralır. Font ve renkler mümkün olduğunca
   inherit edilir; eklenti kendi kimliğini dayatmaz. */
.divit-rfq[data-concept="theme"] {
	--rfq-accent: #2271b1;
	--rfq-accent-soft: #eaf2f8;
	--rfq-line: #dcdcde;
	--rfq-line-2: #8c8f94;
	--rfq-ink: inherit;
	--rfq-muted: #646970;
	--rfq-radius: 4px;
	--rfq-field-radius: 3px;
	--rfq-shadow: none;
	--rfq-lbl-tr: none;
	--rfq-lbl-sp: 0;
	--rfq-lbl-sz: 13px;
	--rfq-info: #2271b1;
	--rfq-info-soft: #eaf2f8;
	--rfq-font: inherit;
	--rfq-bg: transparent;
	--rfq-surface: transparent;
	--rfq-field: #fff;
	border-color: #c3c4c7;
}

/* clinical: hairline çizgiler, klinik teal, serif başlık. */
.divit-rfq[data-concept="clinical"] {
	--rfq-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
	--rfq-ink: #0b1f24;
	--rfq-muted: #5a6b70;
}

/* technical: koyu başlık şeridi, grid zemin, mono etiketler. */
.divit-rfq[data-concept="technical"] {
	--rfq-accent: #b45309;
	--rfq-accent-soft: #fbf0e2;
	--rfq-ink: #111827;
	--rfq-muted: #5f6b7a;
	--rfq-line: #dbe0e6;
	--rfq-line-2: #c3ccd6;
	--rfq-radius: 6px;
	--rfq-field-radius: 4px;
	--rfq-font: ui-sans-serif, "Segoe UI", system-ui, sans-serif;
	--rfq-display: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	--rfq-lbl-sp: .11em;
	--rfq-lbl-sz: 10.5px;
	--rfq-head-bg: #0f172a;
	--rfq-head-ink: #e2e8f0;
	--rfq-bg: #f6f8fa;
	--rfq-grid-bg: linear-gradient(#eef1f5 1px, transparent 1px), linear-gradient(90deg, #eef1f5 1px, transparent 1px);
	background-size: 22px 22px;
}
.divit-rfq[data-concept="technical"] .rfq-head h2 { font-family: var(--rfq-display); font-size: 20px; font-weight: 600; }
.divit-rfq[data-concept="technical"] .rfq-head p { color: #94a3b8; }
.divit-rfq[data-concept="technical"] .line,
.divit-rfq[data-concept="technical"] .results { background: var(--rfq-surface); }
.divit-rfq[data-concept="technical"] .res .sub,
.divit-rfq[data-concept="technical"] .line .nm small { color: var(--rfq-warn); }

/* editorial: soğuk kağıt, serif display, lacivert vurgu. */
.divit-rfq[data-concept="editorial"] {
	--rfq-accent: #1f3a5f;
	--rfq-accent-soft: #e9eef4;
	--rfq-bg: #f5f4f1;
	--rfq-surface: #fcfbf9;
	--rfq-field: #fffefc;
	--rfq-line: #e3e0d8;
	--rfq-line-2: #cdc8bb;
	--rfq-ink: #23201b;
	--rfq-muted: #6b6459;
	--rfq-radius: 3px;
	--rfq-field-radius: 2px;
	--rfq-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
	--rfq-font: "Seravek", "Gill Sans", "Gill Sans MT", Calibri, system-ui, sans-serif;
	--rfq-lbl-sp: .14em;
	--rfq-lbl-sz: 10.5px;
	--rfq-info: #1f3a5f;
	--rfq-info-soft: #e9eef4;
	--rfq-shadow: 0 1px 0 rgba(35, 32, 27, .04), 0 20px 50px -30px rgba(35, 32, 27, .5);
}
.divit-rfq[data-concept="editorial"] .rfq-head { border-bottom: 2px solid var(--rfq-ink); }
.divit-rfq[data-concept="editorial"] .rfq-head h2 { font-size: 33px; font-weight: 600; line-height: 1.05; }

/* soft: yuvarlak köşeler, dostane mavi. */
.divit-rfq[data-concept="soft"] {
	--rfq-accent: #2563eb;
	--rfq-accent-soft: #eaf0fe;
	--rfq-bg: #f8fafc;
	--rfq-line: #e6ebf2;
	--rfq-line-2: #d3dbe6;
	--rfq-radius: 18px;
	--rfq-field-radius: 11px;
	--rfq-lbl-tr: none;
	--rfq-lbl-sp: 0;
	--rfq-lbl-sz: 12.5px;
	--rfq-info: #2563eb;
	--rfq-info-soft: #eaf0fe;
	--rfq-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 24px 60px -30px rgba(37, 99, 235, .45);
}
.divit-rfq[data-concept="soft"] .rfq-head h2 { font-weight: 700; letter-spacing: -.02em; }

/* --- dar ekran --- */
@media (max-width: 620px) {
	.divit-rfq .rfq-head { padding: 22px 18px 18px; }
	.divit-rfq .rfq-body { padding: 20px 18px 24px; }
	.divit-rfq .grid,
	.divit-rfq .addr3 { grid-template-columns: 1fr; }
	.divit-rfq .lines .head { display: none; }
	.divit-rfq .line {
		grid-template-columns: 1fr auto;
		grid-template-areas: "nm rm" "qty qty";
		gap: 10px 12px;
	}
	.divit-rfq .line .nm { grid-area: nm; }
	.divit-rfq .line .rm { grid-area: rm; align-self: start; }
	.divit-rfq .line .qty { grid-area: qty; justify-self: start; width: 132px; }
	.divit-rfq .line .uom { display: none; }

	/* ARAMA SONUCU DAR EKRANDA SARILIR.
	 *
	 * Satır tek sıra flex'ti: ürün adı, nowrap bir stok etiketi ve "Ekle" yan
	 * yana duruyordu. 360 piksellik bir telefonda etiket ("Yaklaşık 14 gün
	 * termin") ada ~110 piksel bırakıyor, yani ~13 karakter — "Stainless ball
	 * valve DN50 PN40" ile "Stainless ball valve DN80 PN16" ekranda AYNI
	 * görünüyordu. Oysa ürün araması formun zorunlu ilk adımı; ayırt
	 * edilemeyen bir sonuç listesi ziyaretçiyi orada bırakır.
	 *
	 * Etiket gizlenmez, ALT SATIRA alınır: stok durumu ürünü seçmeden önce
	 * bilinmesi gereken bilgidir. */
	.divit-rfq .res {
		flex-wrap: wrap;
		gap: 6px 12px;
	}

	.divit-rfq .res .meta { flex: 1 0 100%; }
	.divit-rfq .res .nm { white-space: normal; }
	.divit-rfq .res .pill { order: 2; }
	.divit-rfq .res .add { order: 3; margin-left: auto; }
}

@media (prefers-reduced-motion: reduce) {
	.divit-rfq *,
	.divit-rfq *::before,
	.divit-rfq *::after {
		animation-duration: .001ms !important;
		transition: none !important;
	}
}

/* --- şartlar onayı ------------------------------------------------------
 *
 * Blok gönder düğmesinin hemen ÜSTÜNDEDİR ve `.foot` bir sütun olduğu için
 * ortalanmış gelir; metin ortalanmış okunmaz, bu yüzden kutunun kendisi tam
 * genişlikte ve sola dayalı kalır. */
.divit-rfq .foot > .legal {
	align-self: stretch;
	width: 100%;
	gap: 8px;
	padding: 14px 16px;
	border: 1px solid var(--rfq-line-2);
	border-radius: var(--rfq-radius);
	/* Zemin panellerinkiyle aynı belirteçten gelir. Bloğa kendi rengi
	   verilseydi konsept değiştiğinde tek başına eski temada kalırdı. */
	background: var(--rfq-bg);
}

/* Etiket kutunun YANINDA başlar ama iki satıra taştığında altına kaymaz:
   uzun bir hukuki cümlede `align-items: center` metni kutunun ortasına
   hizalar ve ilk satır kutudan yukarı çıkmış görünür. */
.divit-rfq .foot > .legal label.check { align-items: flex-start; line-height: 1.5; }
.divit-rfq .foot > .legal label.check input[type="checkbox"] { margin-top: 2px; }

/* Metin sekme açıkken güncellendiğinde belirir ve onayın neden sıfırlandığını
   söyler. Hata rengi DEĞİL: ziyaretçi yanlış bir şey yapmadı — uyarı tonu,
   düzeltilecek bir hata varmış gibi okunurdu. */
.divit-rfq .foot > .legal .legal-note {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--rfq-muted);
}

/* Açılır panel `<details>`'tir; JS yoktur. Özet satırı bir bağlantı gibi
   okunur çünkü işlevi odur. */
.divit-rfq .legal-docs > summary {
	cursor: pointer;
	font-size: 12.5px;
	color: var(--rfq-accent);
	list-style: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 2px 0;
}
.divit-rfq .legal-docs > summary::-webkit-details-marker { display: none; }
.divit-rfq .legal-docs > summary::before {
	content: "";
	width: 0;
	height: 0;
	border: 4px solid transparent;
	border-left-color: currentColor;
	transition: transform .15s;
}
.divit-rfq .legal-docs[open] > summary::before { transform: rotate(90deg) translateX(-1px); }

/* Metnin KENDİSİ. Kutu kaydırılır: iki uzun belge sayfayı metrelerce uzatıp
   gönder düğmesini ekrandan sürüklerdi. */
.divit-rfq .legal-doc {
	max-height: 300px;
	overflow-y: auto;
	margin-top: 8px;
	padding: 12px 14px;
	border: 1px solid var(--rfq-line-2);
	border-radius: var(--rfq-field-radius);
	font-size: 12.5px;
	line-height: 1.65;
	color: var(--rfq-muted);
	text-align: left;
}
.divit-rfq .legal-doc > *:first-child { margin-top: 0; }
.divit-rfq .legal-doc > *:last-child { margin-bottom: 0; }
.divit-rfq .legal-doc h4 {
	margin: 16px 0 6px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--rfq-ink);
}
.divit-rfq .legal-doc ul,
.divit-rfq .legal-doc ol { margin: 6px 0; padding-left: 20px; }
.divit-rfq .legal-doc li { margin: 3px 0; }
.divit-rfq .legal-doc a { color: var(--rfq-accent); }

/* Hata durumunda kutunun tamamı işaretlenir; tek bir onay kutusunun kırmızı
   çerçevesi 17 pikselde kaybolur. */
.divit-rfq .foot > .legal.invalid { border-color: var(--rfq-bad); background: var(--rfq-bad-soft); }
.divit-rfq .foot > .legal.invalid label.check { color: var(--rfq-bad); }

/* --- şartlar penceresi --------------------------------------------------
 *
 * Pencere `.divit-rfq[data-concept]` sınıfını taşır, yani konsept
 * değişkenlerini formun kendisinden alır: renk, font ve köşe yarıçapı iki
 * yerde ayrı tanımlanmaz. Kabuğun `overflow: clip` ve gölge kuralları burada
 * geri alınır — o kurallar bir kart içindir, bir pencere için değil. */
.divit-rfq.divit-legal-modal {
	width: min(680px, calc(100vw - 32px));
	max-height: min(78vh, 760px);
	padding: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--rfq-line);
	box-shadow: 0 24px 70px -20px rgba(15, 23, 42, .45);
}

.divit-legal-modal::backdrop { background: rgba(15, 23, 42, .55); }

/* `<dialog>` kapalıyken `display: none` olmalı; üstteki flex bunu ezer. */
.divit-legal-modal:not([open]) { display: none; }

.divit-legal-modal .lm-head {
	flex: none;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 20px;
	border-bottom: 1px solid var(--rfq-line);
}
.divit-legal-modal .lm-head h3 {
	margin: 0;
	flex: 1 1 auto;
	font-size: 15px;
	font-weight: 600;
	color: var(--rfq-ink);
}
.divit-legal-modal .lm-x {
	flex: none;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	line-height: 1;
	color: var(--rfq-muted);
	background: none;
	border: 0;
	border-radius: var(--rfq-field-radius);
	cursor: pointer;
}
.divit-legal-modal .lm-x:hover { background: var(--rfq-line); color: var(--rfq-ink); }

/* Metin TEK KAYDIRILAN alandır — "sonuna kadar okundu" ölçümü tam olarak bu
   kutunun kaydırma konumuna bakar. Pencerenin kendisi kaydırılabilir olsaydı
   ölçüm iki yere bölünür ve hangisinin sayıldığı belirsizleşirdi. */
.divit-legal-modal .legal-doc {
	flex: 1 1 auto;
	min-height: 0;
	max-height: none;
	overflow-y: auto;
	margin: 0;
	padding: 18px 20px;
	border: 0;
	border-radius: 0;
}
/*
 * ODAK HALKASI — `!important` BURADA ZORUNLU.
 *
 * Metin kutusu `tabindex="0"` taşır (klavyeyle gezen biri metni kaydırıp sona
 * inebilsin diye) ve ölçüldü: WoodMart, `base-deferred.css` içinde
 * `:is(a, button, input[...], [tabindex="0"]):focus-visible` seçicisine
 * `!important` ile SİYAH KESİKLİ bir halka koyuyor. Normal bir kural onu
 * ezemez; kaskadın tek çıkışı aynı silahtır.
 *
 * Halka KALDIRILMAZ, DEĞİŞTİRİLİR: klavyeyle gezen birinin nerede olduğunu
 * görmesi gerekir. Değişen yalnızca görüntüsü — formun kendi vurgu rengiyle
 * ince bir çerçeve, kutunun içine çekilmiş (`-2px`) ki kaydırma çubuğunu
 * kesmesin.
 *
 * Fareyle açıldığında halka hiç doğmaz: odak o durumda metne taşınmıyor
 * (bkz. `enhanceLegal` → `openModal`).
 */
/*
 * ÖZGÜLLÜK BİLEREK YÜKSEK. Temanın seçicisi `[tabindex="0"]:focus-visible`
 * (0,2,0) ve `!important` taşıyor; aynı ağırlıkta bir kural yazmak yetmiyordu —
 * ölçüldü, tema bizden sonra yüklendiği için kaynak sırası onu kazandırıyordu.
 * Her hedef bir sınıfla nitelenir, böylece (0,3,0) ile öne geçilir.
 */
.divit-legal-modal .legal-doc:focus-visible,
.divit-legal-modal .legal-doc :focus-visible,
.divit-legal-modal .lm-head :focus-visible,
.divit-legal-modal .lm-foot :focus-visible {
	outline: 2px solid var(--rfq-accent) !important;
	outline-offset: 2px;
}
/* Metin kutusunda halka İÇERİ çekilir: dışarıda dursaydı kaydırma çubuğunu ve
   alt/üst şeritlerin kenarlığını keserdi. */
.divit-legal-modal .legal-doc:focus-visible { outline-offset: -2px; }
/* Pencerenin kendisi odak alır ama halka ÇİZİLMEZ: o odak bir gezinme adımı
   değil, ekran okuyucunun başlığı duyurabilmesi için bir başlangıç noktası. */
.divit-legal-modal:focus,
.divit-legal-modal:focus-visible { outline: none !important; }

.divit-legal-modal .lm-foot {
	flex: none;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 20px;
	border-top: 1px solid var(--rfq-line);
}
.divit-legal-modal .lm-hint {
	flex: 1 1 auto;
	margin: 0;
	font-size: 12.5px;
	color: var(--rfq-muted);
}
.divit-legal-modal .lm-hint.is-done { color: var(--rfq-ok); }
/* Kapalı hâlin soluk görünümü `.btn:disabled` kuralından gelir; burada
   tekrarlanmaz — iki yerde tanımlanan bir ölçü er geç ayrışır. */
.divit-legal-modal .lm-accept { flex: none; }

/* Belgeleri açan düğme ETİKET METNİNİN İÇİNDE akar.
 *
 * `display: inline` ve `font: inherit` bilinçli: düğme, cümlenin bir parçası
 * gibi okunmalı ve satır sonunda metinle birlikte sarmalı. Blok ya da
 * inline-flex olsaydı uzun bir etikette cümleden kopup tek başına bir satıra
 * inerdi — kabul edilen cümle ile açılan belge arasındaki bağ tam da orada
 * kopar. */
.divit-rfq .foot > .legal .legal-open {
	/*
	 * HOST TEMANIN DÜĞME ÖLÇÜLERİ AÇIKÇA GERİ ALINIR.
	 *
	 * Ölçüldü: WoodMart bu düğmeye `min-height: 42px` veriyordu ve tek
	 * satırlık bir etikette satır kutusu 42 piksele şişiyor, onay kutusu
	 * metnin epey üstünde kalıyordu — kullanıcının gördüğü "aşağı kaymış"
	 * görüntü buydu. Düzelten kural `min-height: 0`.
	 *
	 * `display: inline` YAZILI AMA UYGULANMIYOR: temanın `inline-block`
	 * değeri kazanıyor. Bırakıldı çünkü zararsız ve `inline-block` burada
	 * işe yarıyor — bağlantı satır sonunda kelime ortasından bölünmeden
	 * bütün olarak alt satıra iniyor.
	 *
	 * `text-transform: none` da temaya karşı: düğme metni "Read The
	 * Documents" diye büyük harfe çevriliyordu, oysa cümlenin içinde akan bir
	 * bağlantı cümle gibi okunmalı.
	 */
	display: inline;
	min-height: 0;
	height: auto;
	/* İki yanda da boşluk: solda cümleden, sağda zorunluluk yıldızından ayrılır.
	   Yalnızca sola verildiğinde yıldız bağlantıya yapışıyordu. */
	margin: 0 4px;
	padding: 0;
	font: inherit;
	line-height: inherit;
	/* Temanın `middle` değeri bağlantıyı cümlenin temel çizgisinden koparıyordu. */
	vertical-align: baseline;
	color: var(--rfq-accent);
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	text-transform: none;
	letter-spacing: inherit;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.divit-rfq .foot > .legal .legal-open:hover { text-decoration-thickness: 2px; }
/* `!important`: tema `button:focus-visible` halkasını da `!important` ile
   koyuyor ve önem, özgüllükten önce gelir (bkz. pencere içindeki aynı sorun). */
.divit-rfq .foot > .legal .legal-open:focus-visible {
	outline: 2px solid var(--rfq-accent) !important;
	outline-offset: 2px;
	border-radius: 2px;
}

/* Etiket artık bir cümle taşıyor: kutu üstte hizalanır, metin normal satır
   yüksekliğiyle akar. */
.divit-rfq .foot > .legal label.check > span { line-height: 1.55; }

/* Kilitli kutu tıklanabilir GÖRÜNMEZ ama etiketi tıklanınca pencere açılır. */
.divit-rfq .legal-accept input[type="checkbox"]:disabled { cursor: pointer; opacity: .55; }