/* ==========================================================================
   Orchards — Dilek Kavanozu Charm Tasarım Seçici
   Stil değerleri orchards.info ürün sayfasından birebir alınmıştır.
   Yükleme yeri: child-theme/dilek-kavanozu/dilek-kavanozu-secici.css
   ========================================================================== */

.orch-dk {
	--dk-ink: #000;
	--dk-ink-mid: #1a1a1a;
	--dk-ink-soft: #6b6b6b;
	--dk-gray: #a0a0a0;
	--dk-line: #d8d3cc;   /* tema input çerçevesi ile birebir */
	--dk-accent: #b0472e; /* zorunlu alan yıldızı */
	--dk-stage: #f7f2ea;
}

/* ---------- Tetik butonu (ürün sayfasında görünen satır) ---------- */

.orch-dk-field {
	margin: 18px 0 6px;
}

.orch-dk-field > label {
	display: block;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.36px;   /* tema etiketleriyle birebir */
	text-transform: uppercase;
	color: var(--dk-ink-mid);
	margin-bottom: 8.4px;
}

.orch-dk-field > label .req {
	color: var(--dk-accent);
}

.orch-dk-trigger {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 12px;
	text-align: left;
	padding: 11px 12px;   /* tema .orch-pf input ile birebir */
	background: #fff;
	border: 0.8px solid var(--dk-line);
	border-radius: 0;
	font-family: inherit;
	cursor: pointer;
	transition: border-color 0.2s ease;
}

.orch-dk-trigger:hover,
.orch-dk-trigger:focus-visible {
	border-color: var(--dk-ink);
	outline: none;
}

.orch-dk-tt {
	flex: none;
	width: 30px;
	height: 38px;
	background: var(--dk-stage) center / cover no-repeat;
	border: 1px solid var(--dk-line);
}

.orch-dk-tx {
	flex: 1;
	min-width: 0;
}

.orch-dk-tx .a {
	display: block;
	font-size: 14px;    /* tema .orch-pf input: 14px / 400 */
	font-weight: 400;
	color: var(--dk-ink);
}

.orch-dk-tx .b {
	display: block;
	font-size: 11px;
	color: var(--dk-ink-soft);
	margin-top: 1px;
}

.orch-dk-arrow {
	flex: none;
	font-size: 12px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--dk-ink-soft);
}

/* Seçim yapıldığında */
.orch-dk.is-selected .orch-dk-trigger {
	border-color: var(--dk-ink);
}

/* ---------- Modal ---------- */

.orch-dk-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	opacity: 0;
	transition: opacity 0.22s ease;
	z-index: 9998;
}

/* KRİTİK: .orch-dk-modal{display:flex} tarayıcının [hidden]{display:none}
   kuralını EZİYORDU → modal kapalıyken bile ekranı kaplıyor, içindeki panel
   (pointer-events:auto) mobilde tüm dokunuşları yutuyordu: sayfa kaymıyor,
   linkler çalışmıyor, buton basılamıyordu. */
.orch-dk-modal[hidden],
.orch-dk-overlay[hidden] {
	display: none !important;
}

.orch-dk-modal {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	z-index: 9999;
	pointer-events: none;
}

.orch-dk-panel {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 720px;
	max-height: 86vh;
	background: #fff;
	border: 1px solid var(--dk-line);
	transform: translateY(10px);
	opacity: 0;
	transition: transform 0.26s ease, opacity 0.26s ease;
	pointer-events: auto;
}

.orch-dk-overlay.is-open,
.orch-dk-modal.is-open .orch-dk-panel {
	opacity: 1;
}

.orch-dk-modal.is-open {
	pointer-events: auto;
}

.orch-dk-modal.is-open .orch-dk-panel {
	transform: none;
}

/* Mobilde alttan açılan sayfa */
@media (max-width: 720px) {
	.orch-dk-modal {
		align-items: flex-end;
		padding: 0;
	}

	.orch-dk-panel {
		max-width: 100%;
		max-height: 90vh;
		transform: translateY(24px);
	}
}

/* ---------- Modal başlık + arama ---------- */

.orch-dk-head {
	padding: 20px 22px 14px;
	border-bottom: 1px solid var(--dk-line);
}

.orch-dk-head-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
}

.orch-dk-head h2 {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--dk-ink);
}

.orch-dk-close {
	background: none;
	border: 0;
	padding: 0 4px;
	font-size: 24px;
	line-height: 1;
	color: var(--dk-ink-soft);
	cursor: pointer;
}

.orch-dk-close:hover {
	color: var(--dk-ink);
}

.orch-dk-search {
	width: 100%;
	padding: 10px 14px;
	font-family: inherit;
	font-size: 13px;
	color: var(--dk-ink);
	background: #fff;
	border: 0.8px solid var(--dk-line);
	border-radius: 0;
	outline: none;
}

.orch-dk-search:focus {
	border-color: var(--dk-ink);
}

/* ---------- Kategori sekmeleri ---------- */

.orch-dk-tabs {
	display: flex;
	gap: 0;
	padding: 0 22px;
	border-bottom: 1px solid var(--dk-line);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.orch-dk-tab {
	flex: none;
	margin-right: 22px;
	padding: 12px 0;
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	font-family: inherit;
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--dk-gray);
	cursor: pointer;
	white-space: nowrap;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.orch-dk-tab:hover {
	color: var(--dk-ink-mid);
}

.orch-dk-tab[aria-selected='true'] {
	color: var(--dk-ink);
	border-bottom-color: var(--dk-ink);
}

/* ---------- Tasarım ızgarası ---------- */

.orch-dk-grid {
	flex: 1;
	overflow-y: auto;
	padding: 18px 22px 26px;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
	gap: 12px;
	align-content: start;
}

.orch-dk-card {
	display: flex;
	flex-direction: column;
	padding: 0;
	background: #fff;
	border: 0.8px solid var(--dk-line);
	border-radius: 0;
	font-family: inherit;
	cursor: pointer;
	transition: border-color 0.18s ease;
}

.orch-dk-card:hover,
.orch-dk-card:focus-visible {
	border-color: var(--dk-ink);
	outline: none;
}

.orch-dk-card[aria-selected='true'] {
	border-color: var(--dk-ink);
	border-width: 1.5px;
}

.orch-dk-card img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	background: var(--dk-stage);
}

.orch-dk-card span {
	padding: 7px 4px;
	font-size: 12px;
	color: var(--dk-ink-mid);
	text-align: center;
}

.orch-dk-card[hidden] {
	display: none !important;
}

.orch-dk-empty {
	grid-column: 1 / -1;
	padding: 24px 0;
	text-align: center;
	font-size: 13px;
	color: var(--dk-ink-soft);
}

/* ---------- Sayfa kaydırma kilidi ---------- */

body.orch-dk-lock {
	overflow: hidden;
}

/* ---------- Hareket azaltma tercihi ---------- */

@media (prefers-reduced-motion: reduce) {
	.orch-dk-overlay,
	.orch-dk-panel,
	.orch-dk-trigger,
	.orch-dk-card {
		transition: none;
	}
}

/* ── Tetikleyici + Rastgele yan yana ─────────────────────────── */
.orch-dk-row {
	display: flex;
	align-items: stretch;
	gap: 8px;
}

.orch-dk-row .orch-dk-trigger {
	flex: 1 1 auto;
	width: auto;      /* taban kuralda 100% — satırda taşmaya sebep oluyordu */
	min-width: 0;
}

.orch-dk-random {
	flex: 0 0 auto;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 10px 12px;
	background: #fff;
	border: 0.8px solid var(--dk-line);
	border-radius: 0;
	font-family: inherit;
	color: var(--dk-ink);
	cursor: pointer;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.orch-dk-random:hover,
.orch-dk-random:focus-visible {
	border-color: var(--dk-ink);
	background: #fafafa;
	outline: none;
}

.orch-dk-random:active { transform: scale(0.97); }

.orch-dk-random-ic { display: inline-flex; }

.orch-dk-random-tx {
	font-size: 9.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}

@media (max-width: 480px) {
	/* Mobilde de TEK SIRA: tetikleyici + rastgele yan yana */
	.orch-dk-row { flex-wrap: nowrap; gap: 6px; }
	.orch-dk-row .orch-dk-trigger { padding: 11px 10px; gap: 9px; }
	.orch-dk-tt { width: 28px; height: 35px; }
	.orch-dk-tx .a { font-size: 14px; }   /* tema ile aynı, küçültülmüyor */
	.orch-dk-tx .b { font-size: 11px; }
	.orch-dk-arrow { display: none; }   /* dar ekranda yer açar, taşmayı önler */
	.orch-dk-random { padding: 10px 8px; }
	.orch-dk-random-tx { font-size: 8.5px; letter-spacing: 0.04em; }
}


/* ── Mobil kaydırma güvenlik ağı ───────────────────────────────
   Modal kapalıyken gövde kilidi ASLA takılı kalmamalı. Bazı
   tarayıcılarda class kalıntısı sayfayı kaydırılamaz bırakıyordu. */
body:not(.orch-dk-lock) {
	overflow-y: auto !important;
}

/* ── Arka yüz yazısı (v256) ────────────────────────────────────────
   Ölçüler temanın kendi .orch-pf alanlarından birebir alındı:
   input padding 11px 12px · border 0.8px #D8D3CC · 14px/400
   etiket 12px/400/uppercase/ls 0.36px. Mobilde punto KÜÇÜLTÜLMEZ
   (iOS odaklanınca yakınlaştırma yapıyor).                          */
.orch-dk-arka {
	margin: 14px 0 0;
}

.orch-dk-arka label {
	display: block;
	margin-bottom: 8.4px;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.36px;
	text-transform: uppercase;
	color: var(--text-primary, #1a1a1a);
}

.orch-dk-arka input[type="text"] {
	width: 100%;
	padding: 11px 12px;
	border: 0.8px solid #D8D3CC;
	border-radius: 0;
	background: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 400;
	color: var(--text-primary, #1a1a1a);
}

.orch-dk-arka input[type="text"]::placeholder {
	color: #a9a49c;
}

.orch-dk-arka input[type="text"]:focus {
	outline: none;
	border-color: #1a1a1a;
}

.orch-dk-arka-not {
	display: block;
	margin-top: 7px;
	font-size: 11.5px;
	line-height: 1.65;
	color: var(--text-muted, #9a9791);
}

/* ── Özel tasarım talebi → WhatsApp (v257) ─────────────────────────
   Listede olmayan ya da tamamen kişiye özel tasarım isteyenleri
   sohbete yönlendirir. Sepete ekle butonunun ÜSTÜNDE ama satın alma
   akışını bölmeyecek kadar sakin; hairline çerçeve, vurgu yok. */
.orch-dk-ozel {
	margin: 16px 0 0;
	padding: 12px 14px;
	border: 0.8px solid #D8D3CC;
	background: #fbfaf8;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
}

.orch-dk-ozel-tx {
	flex: 1 1 220px;
	font-size: 12px;
	line-height: 1.6;
	color: var(--text-secondary, #6b6b6b);
}

.orch-dk-ozel-btn {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 14px;
	border: 0.8px solid #1a1a1a;
	background: #fff;
	color: #1a1a1a;
	font-size: 11.5px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background 0.18s ease, color 0.18s ease;
}

.orch-dk-ozel-btn:hover,
.orch-dk-ozel-btn:focus-visible {
	background: #1a1a1a;
	color: #fff;
	outline: none;
}

/* MOBİL — kritik: dikey flex'te `flex-basis` YÜKSEKLİĞE uygulanır.
   Metnin `flex: 1 1 220px` tanımı sütun yönünde onu 220px YÜKSEK
   yapıyor ve altında kocaman boşluk bırakıyordu. Mobilde flex'i
   sıfırlıyoruz, öğe kendi içeriği kadar yer kaplasın. */
@media (max-width: 480px) {
	.orch-dk-ozel {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}

	.orch-dk-ozel-tx {
		flex: 0 0 auto;
	}

	.orch-dk-ozel-btn {
		flex: 0 0 auto;
		justify-content: center;
	}
}