/* Says Teklif formu — tasarım sistemi token'ları üzerinden. Ham renk/ölçü yok. */

.st-sarmal{margin-top:var(--sp-4)}
.st-izgara{display:grid;grid-template-columns:1fr 340px;gap:var(--gutter);align-items:start}

/* Bal küpü — ekran dışı, ekran okuyucudan da gizli. */
.st-tuzak{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.st-form{display:flex;flex-direction:column;gap:var(--sp-5)}
.st-alan{margin:0}

/* Kurulum alanı seçim kartları */
.st-secim{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-2)}
.st-secim__kart{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:var(--sp-4) var(--sp-2);border:var(--bw-hair) solid var(--border-default);border-radius:var(--r-control);cursor:pointer;text-align:center;transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease),color var(--dur) var(--ease)}
.st-secim__kart:hover{border-color:var(--border-strong);background:var(--n-50)}
.st-secim__kart input{position:absolute;opacity:0;width:1px;height:1px}
.st-secim__kart input:focus-visible + .st-secim__ikon{outline:2px solid var(--focus-ring);outline-offset:3px;border-radius:2px}
.st-secim__ikon{color:var(--text-muted);display:inline-flex}
.st-secim__etiket{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-body);line-height:1.25}
/* Seçili: lacivert dolgu — asla sarı (marka kuralı). */
.st-secim__kart--secili{background:var(--says-navy-900);border-color:var(--says-navy-900)}
.st-secim__kart--secili .st-secim__ikon{color:var(--says-yellow-500)}
.st-secim__kart--secili .st-secim__etiket{color:var(--text-inverse)}

/* Pompa gücü + birim */
.st-guc{display:flex;gap:var(--sp-2);align-items:stretch}
.st-guc .says-input{flex:1}
.st-birim{display:flex;border:var(--bw-hair) solid var(--border-default);border-radius:var(--r-control);overflow:hidden;flex:none}
.st-birim__sec{display:flex;align-items:center;padding:0 var(--sp-4);font-family:var(--font-display);font-weight:var(--fw-bold);font-size:12px;letter-spacing:.04em;color:var(--text-muted);cursor:pointer;transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.st-birim__sec + .st-birim__sec{border-left:var(--bw-hair) solid var(--border-default)}
.st-birim__sec input{position:absolute;opacity:0;width:1px;height:1px}
.st-birim__sec:hover{background:var(--n-50)}
.st-birim__sec--secili{background:var(--says-navy-900);color:var(--text-inverse)}

.st-kvkk{margin-top:var(--sp-1)}
.st-kvkk-hata{margin-top:calc(var(--sp-2) * -1)}
.st-kucuk{font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--text-muted);margin:0}
.st-gonder{margin-top:var(--sp-1)}

.st-uyari{display:flex;align-items:center;gap:var(--sp-2);margin:0;padding:11px 14px;background:var(--danger-50);border-left:var(--bw-rule) solid var(--danger-500);color:var(--danger-700);font-size:var(--fs-body-sm)}

/* Başarı bildirimi */
.st-basari{display:flex;gap:var(--sp-4);align-items:flex-start;padding:var(--sp-6);margin-bottom:var(--sp-6);background:var(--success-50);border-left:var(--bw-rule) solid var(--success-500);border-radius:0 var(--r-card) var(--r-card) 0}
/* 26px glif, 18px h3'ün cap bandına göre optik olarak 3px yukarı çekiliyor.
   Sistemin diğer yerlerindeki +2px küçük ikonlar (14-16px) için doğru; bu boyutta değil. */
.st-basari__ikon{color:var(--success-500);flex:none;display:inline-flex;margin-top:-3px}
.st-basari h3{margin:0 0 var(--sp-2);font-size:var(--fs-h4);letter-spacing:.02em}
.st-basari p{margin:0 0 var(--sp-4);max-width:56ch;font-size:var(--fs-body-sm)}

/* Yan panel */
.st-yan{display:flex;flex-direction:column;gap:var(--gutter);position:sticky;top:96px}
.st-tahmin .says-rule,.st-surec .says-rule{margin:var(--sp-2) 0 var(--sp-4)}
.st-tahmin__liste{margin:0;display:flex;flex-direction:column;gap:var(--sp-4)}
.st-tahmin__liste div{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-3);border-bottom:var(--bw-hair) solid var(--border-subtle);padding-bottom:var(--sp-3)}
.st-tahmin__liste div:last-child{border-bottom:0;padding-bottom:0}
.st-tahmin__liste dt{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--text-muted)}
.st-tahmin__liste dd{margin:0;font-size:var(--fs-data-lg);font-weight:var(--fw-semibold);color:var(--text-strong);white-space:nowrap;font-variant-numeric:tabular-nums}
.st-tahmin__liste dd .says-unit{font-size:13px;margin-left:3px}
.st-tahmin__not{margin-top:var(--sp-5)}

.st-surec__liste{list-style:none;margin:0;padding:0;counter-reset:adim;display:flex;flex-direction:column;gap:var(--sp-5)}
.st-surec__liste li{display:flex;gap:var(--sp-3);align-items:flex-start}
.st-surec__ikon{flex:none;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:var(--r-sm);background:var(--says-blue-50);color:var(--says-blue-500)}
/* DİKKAT: burada çıplak eleman seçicisi (`.st-surec__liste span`) KULLANMA.
   says_icon() bir <span class="says-icon"> sarmalayıcı üretiyor; çıplak seçici onu da
   yakalayıp display:block yapıyor, flex merkezlemeyi öldürüyor (ikon karonun sol-üstüne
   8px kaçıyordu) ve currentColor'ı griye çeviriyordu. Daima çocuk seçici (>) kullan. */
.st-surec__liste li > div > strong{display:block;font-family:var(--font-display);font-weight:var(--fw-bold);font-size:13px;letter-spacing:.03em;text-transform:uppercase;color:var(--text-strong);margin-bottom:3px}
.st-surec__liste li > div > span{display:block;font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--text-muted)}

@media (max-width:900px){
	/* minmax(0,1fr): düz "1fr" grid öğesinin min-content genişliğinin altına inemiyor;
	   sarılmayan gönder butonu sütunu şişirip 385px altında sayfayı yatay kaydırıyordu. */
	.st-izgara{grid-template-columns:minmax(0,1fr)}
	.st-yan,.st-form{min-width:0}
	.st-yan{position:static;order:2}
	.st-secim{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:480px){
	/* Blok buton zaten width:100% — dar ekranda iki satıra sarması taşmadan iyidir. */
	.says-btn--block{white-space:normal;text-align:center;line-height:1.25}
	.st-gonder{padding-left:var(--sp-4);padding-right:var(--sp-4)}
}

/* Hatalı KVKK onayı: renk tek başına yeterli değil (WCAG 1.4.1) — kenarlık da kalınlaşır. */
.says-check--invalid .says-check__box{border-color:var(--danger-500);border-width:var(--bw-thick)}