@import url('https://fonts.googleapis.com/css2?family=Playfair+Display&family=Cormorant+Garamond:ital,wght@1,400..700&family=Caveat&family=Ubuntu:wght@400;700&display=swap');

/*
 * v1.1.0 - Kart/kutu tabanli secim arayuzu.
 * Native radio/checkbox input'lar gorsel olarak gizlenir (bkz. .da-pers-choice
 * input), yaninda duran <span class="da-pers-choice-inner"> kutu olarak
 * stillendirilir. Boylece form semantigi (name/value, :checked, klavye ile
 * erisim) korunurken gorunum tamamen ozellestirilebiliyor.
 */

#da-pers-wrap {
	--da-accent: #BE7637;
	--da-accent-soft: rgba(190, 118, 55, .08);
	--da-accent-soft-strong: rgba(190, 118, 55, .18);
	--da-ink: #171511;
	--da-cream: #F8F7F2;
	--da-border: #E3DCCA;
	--da-radius: 14px;
	margin: 20px 0;
	padding: 18px 18px 16px;
	border: 1px solid var(--da-border);
	border-radius: 16px;
	background: var(--da-cream);
	box-sizing: border-box;
	/* v1.3.3: bu konteynerin GERCEK render genisligine gore olcekleyen
	   (cqw) bir "container query" referans noktasi - bkz. asagida
	   .da-pers-main-label-text. Cihazin ekran genisligi degil, bu
	   kutunun kendi genisligi baz alinir; boylece tema/kenar bosluklari
	   telefondan telefona farkli olsa bile dogru olcekleme yapilir. */
	container-type: inline-size;
}

#da-pers-wrap * {
	box-sizing: border-box;
}

#da-pers-wrap .da-pers-row {
	margin-bottom: 14px;
}

#da-pers-wrap .da-pers-row:last-child {
	margin-bottom: 0;
}

#da-pers-wrap .da-pers-main-label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 800;
	letter-spacing: .03em;
	text-transform: uppercase;
	margin: 0 0 12px;
	color: #2b2420;
	min-width: 0;
}

/*
 * v1.3.3 - "KİŞİSELLEŞTİRME İSTİYOR MUSUN?" basligi, telefondan telefona
 * (ayni marka/tema olsa bile kenar bosluklari farkli olabildigi icin)
 * bazen tek, bazen iki satira bolunuyordu (sabit 15px font-size'in her
 * genislige sigmamasi). Metin artik ayri bir <span> icinde: font-size
 * konteynerin GERCEK genisligine gore dinamik olcekleniyor (cqw birimi,
 * yukaridaki #da-pers-wrap container-type:inline-size sayesinde) ve
 * personalization.js -> fitMainLabelText() sayfa yuklendikten sonra
 * gercek render genisligini olcup gerekirse font-size'i daha da kuculterek
 * metnin HER ZAMAN tek satirda ve TAM olarak (kesilmeden) gorunmesini
 * garanti eder. white-space:nowrap + min-width:0, flex ic ogesinin
 * kucultulebilmesi icin sart (aksi halde tarayici flex item'i icerigin
 * "min-content" genisligine gore buyuk tutup tasirir).
 */
#da-pers-wrap .da-pers-main-label-text {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
	font-size: clamp(11px, 4.2cqw, 15px);
}

#da-pers-wrap .da-pers-main-icon {
	flex: 0 0 auto;
	color: var(--da-accent);
}

#da-pers-wrap .da-pers-label {
	font-weight: 600;
	margin: 0 0 8px;
	font-size: 13px;
	color: #55483d;
}

#da-pers-wrap .da-pers-note {
	font-size: 13px;
	color: #7a6a5c;
	margin: 0 0 10px;
}

/* ---------- Kart / kutu secim gridi ---------- */

#da-pers-wrap .da-pers-choice-grid {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

#da-pers-wrap .da-pers-choice-grid--4 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 480px) {
	#da-pers-wrap .da-pers-choice-grid--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

#da-pers-wrap .da-pers-choice {
	position: relative;
	display: block;
	cursor: pointer;
}

#da-pers-wrap .da-pers-choice input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

#da-pers-wrap .da-pers-choice-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	text-align: center;
	min-height: 54px;
	padding: 12px 10px;
	border: 2px solid var(--da-border);
	border-radius: var(--da-radius);
	background: #fff;
	font-weight: 600;
	font-size: 14px;
	color: #3a322b;
	transition: border-color .15s ease, background-color .15s ease;
}

#da-pers-wrap .da-pers-choice-inner small {
	display: block;
	font-weight: 500;
	font-size: 11px;
	color: #948a7f;
}

/* Isim Yazimi / Tasarim ana kutucuklarindaki ucret etiketi: musteri
   fiyati net gorsun diye kalin (bold) ve daha koyu/kontrastli. */
#da-pers-wrap .da-pers-choice-inner .da-pers-price-tag {
	font-weight: 800;
	font-size: 12px;
	color: #3a322b;
}

#da-pers-wrap .da-pers-choice input:checked + .da-pers-choice-inner .da-pers-price-tag {
	color: #6b3f1c;
}

#da-pers-wrap .da-pers-choice:hover .da-pers-choice-inner {
	border-color: #d3a97e;
}

#da-pers-wrap .da-pers-choice input:checked + .da-pers-choice-inner {
	border-color: var(--da-accent);
	background: var(--da-accent-soft);
	color: #6b3f1c;
}

#da-pers-wrap .da-pers-choice input:checked + .da-pers-choice-inner small {
	color: #a8703f;
}

#da-pers-wrap .da-pers-choice input:focus-visible + .da-pers-choice-inner {
	outline: 2px solid var(--da-accent);
	outline-offset: 2px;
}

/* ---------- Metin girisi ---------- */

#da-pers-wrap .da-pers-text-label {
	display: block;
	font-weight: 600;
	font-size: 13px;
	color: #55483d;
	margin-bottom: 6px;
}

#da-pers-wrap input[type=text] {
	width: 100%;
	max-width: 340px;
	padding: 10px 12px;
	border: 2px solid var(--da-border);
	border-radius: 10px;
	font-size: 15px;
	transition: border-color .15s ease;
}

#da-pers-wrap input[type=text]:focus {
	border-color: var(--da-accent);
	outline: none;
}

/* ---------- Dosya yukleme kutusu ---------- */

#da-pers-wrap .da-pers-file-box {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 16px;
	border: 2px dashed var(--da-border);
	border-radius: var(--da-radius);
	cursor: pointer;
	background: #fff;
	transition: border-color .15s ease, background-color .15s ease;
}

#da-pers-wrap .da-pers-file-box:hover {
	border-color: #d3a97e;
}

#da-pers-wrap .da-pers-file-box.has-file {
	border-color: var(--da-accent);
	background: var(--da-accent-soft);
}

#da-pers-wrap .da-pers-file-box input[type=file] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

#da-pers-wrap .da-pers-file-icon {
	flex: 0 0 auto;
	color: var(--da-accent);
}

#da-pers-wrap .da-pers-file-text {
	font-size: 13px;
	color: #6a5d51;
	font-weight: 500;
	overflow-wrap: anywhere;
}

/* ---------- Genel ---------- */

#da-pers-wrap .da-pers-extra {
	display: none;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px dashed var(--da-border);
}

#da-pers-price-note {
	font-size: 14px;
	font-weight: 700;
	color: var(--da-ink, #171511);
	margin: 14px 0 0;
}

#da-pers-name-preview-wrap > div {
	margin-top: 12px;
	padding: 18px;
	border: 1px dashed var(--da-border);
	border-radius: var(--da-radius);
	background: #fafaf8;
}