/* DCD — Donatı Çapı Değişimi · modül stili (DCD-3.1.5)
 * Renk, ölçü ve tipografi kabuk.css'ten gelir; bu dosyada palet, kap genişliği
 * veya yazı ölçüsü tanımı YOKTUR. Yalnız bu sayfaya özgü bileşenler burada.
 *
 * Motor (donati-motor.php, DCD-3.1.3) kesit çizimini ve bazı kartları eski değişken
 * adlarıyla üretir (var(--concrete), var(--steel), var(--bar-s) …). Motora dokunulmadığı
 * için bu adlar aşağıda kabuk değişkenlerine bağlanır; kendi değeri olan değişken yoktur. */
:root {
  --concrete: var(--beton);
  --steel: var(--donati);
  --surface: var(--kagit);
  --surface2: var(--bilgi-zemin);
  --ink: var(--murekkep);
  --muted: var(--ikincil);
  --line: var(--cizgi);
  --err: var(--red);
  --ok: var(--uygun);
  --warn: var(--dikkat);
  --info: var(--vurgu);
  --bar-s: var(--donati);     /* sahadaki (yeni) donatı */
  --bar-p: var(--soluk);      /* projedeki donatı */
}

.form-sutun form { padding: 4px 18px 18px; }
.atla { margin-top: 6px; font-size: .9375rem; }
.atla a, .bos li a { display: inline-flex; align-items: center; min-height: var(--hedef-ik); }
.bos ul { margin: 6px 0 0; padding-left: 20px; }
.alan-hata { display: none; margin: 4px 0 0; font-size: .8125rem; font-weight: 600; color: var(--red); }
.alan-k.hatali .alan-hata { display: block; }
.alan-k.hatali .secim { border-color: var(--red); }
.temizle-satir { margin: 8px 0 0; text-align: center; }

/* ---- gelişmiş ayarlar (form içi açılır bölüm) ---- */
details.gelismis { border: 1px dashed var(--cizgi); border-radius: 3px; margin-top: 14px; }
details.gelismis > summary { list-style: none; cursor: pointer; padding: 8px 12px; min-height: var(--hedef); display: flex; flex-direction: column; justify-content: center; font-weight: 650; }
details.gelismis > summary::-webkit-details-marker { display: none; }
details.gelismis > summary .alt-yazi { display: block; font-size: .8125rem; font-weight: 400; color: var(--ikincil); }
details.gelismis .gelismis-ic { padding: 0 12px 12px; }
details.gelismis h3 { margin: 16px 0 4px; padding-top: 12px; border-top: 1px solid var(--cizgi-ince); font-size: .9375rem; font-weight: 650; }
details.gelismis h3:first-child { margin-top: 4px; padding-top: 0; border-top: 0; }

/* ---- sonuç: genel açılır bölüm ---- */
details.acilir > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; min-height: var(--hedef-ik); font-weight: 650; color: var(--vurgu); }
details.acilir > summary::-webkit-details-marker { display: none; }
details.acilir > summary::before { content: "▸"; font-size: .8em; }
details.acilir[open] > summary::before { content: "▾"; }
details.blok > summary { font-size: 1.0625rem; color: var(--murekkep); }
details.blok .neden { margin-top: 8px; }

/* ---- cevap bloğu ---- */
.damga.dikkat { color: var(--dikkat); }     /* kabukta ok/red var; DİKKAT damgası için (kabuğa eklenmesi önerildi) */
#cevapBlok > details { margin-top: 10px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0 0; }
.stats div { background: var(--bilgi-zemin); border-radius: 3px; padding: 8px 10px; min-width: 0; }
.stats dt { font-size: .75rem; color: var(--ikincil); font-weight: 600; }
.stats dd { margin: 0; font-weight: 650; }
.why { margin-top: 10px; background: var(--bilgi-zemin); border-left: 3px solid var(--cizgi); padding: 10px 12px; font-size: .9375rem; }
.why strong { color: var(--vurgu); }

/* ---- sipariş (motor HTML: .lbl .big2 .num .stats .why #toW) ---- */
.lbl { font-size: .875rem; font-weight: 600; color: var(--ikincil); }
.big2 { font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem); font-weight: 650; line-height: 1.25; margin-top: 4px; }
#orderBox > div.num, #wTot > div.num { font-weight: 600; margin-top: 4px; }
#toW { margin-top: 12px; width: 100%; min-height: var(--hedef); border: 1px solid var(--cizgi); background: var(--kagit); color: var(--vurgu); border-radius: 3px; cursor: pointer; font-weight: 600; }

/* ---- kontrol kartları (motor HTML: .chk.c-xxx h3 i .m .w .ref) ---- */
.kontroller { display: grid; gap: 10px; }
.chk { border-left: 3px solid var(--cizgi); background: var(--bilgi-zemin); padding: 10px 12px; min-width: 0; }
.chk h3 { margin: 0; font-size: .9375rem; font-weight: 650; display: flex; align-items: flex-start; gap: 8px; }
.chk h3 i { font-style: normal; flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--kagit); font-size: .75rem; background: var(--ikincil); }
.chk .m { margin-top: 6px; font-size: .9375rem; }
.chk .w { margin-top: 8px; font-size: .875rem; }
.chk .w b { display: block; font-size: .75rem; }
.chk .ref { font-size: .75rem; color: var(--ikincil); margin-top: 6px; }
.chk details { margin-top: 6px; }
.chk details > summary { cursor: pointer; display: flex; align-items: center; min-height: var(--hedef-ik); font-weight: 600; font-size: .875rem; }
.chk.c-error { border-left-color: var(--red); background: var(--red-zemin); }
.chk.c-error h3 { color: var(--red); } .chk.c-error h3 i { background: var(--red); }
.chk.c-warn { border-left-color: var(--dikkat); background: var(--dikkat-zemin); }
.chk.c-warn h3 { color: var(--dikkat); } .chk.c-warn h3 i { background: var(--dikkat); }
.chk.c-ok { border-left-color: var(--uygun); background: var(--uygun-zemin); }
.chk.c-ok h3 { color: var(--uygun); } .chk.c-ok h3 i { background: var(--uygun); }
.chk.c-info { border-left-color: var(--vurgu); background: var(--vurgu-zemin); }
.chk.c-info h3 { color: var(--vurgu); } .chk.c-info h3 i { background: var(--vurgu); }
#okBox .kontroller { margin-top: 8px; }

/* ---- kesit çizimi ---- */
.gorunum { max-width: 260px; margin-bottom: 10px; }
.gorunum .secim-k span { min-height: var(--hedef-ik); }
svg.kesit { display: block; width: 100%; max-width: 420px; height: auto; max-height: 360px; margin: 0 auto; }
.cizim-alt { margin: 6px 0 0; font-size: .9375rem; text-align: center; }
.cizim-not { margin: 4px 0 0; font-size: .8125rem; color: var(--ikincil); text-align: center; }

/* ---- hesap adımları (motor HTML: ol.steps code) ---- */
.steps { margin: 8px 0 0; padding-left: 20px; font-size: .9375rem; }
.steps li { margin: 8px 0; }
.steps code { font-family: inherit; background: var(--bilgi-zemin); padding: 1px 6px; border-radius: 3px; font-weight: 600; white-space: normal; }

/* ---- diğer çaplar (motor HTML: button.alt-item .d .x .st) ---- */
.alt-item { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px; align-items: center; width: 100%; margin-top: 8px; padding: 10px 12px; min-height: var(--hedef); border: 1px solid var(--cizgi); border-radius: 3px; background: var(--kagit); color: inherit; text-align: left; cursor: pointer; }
.alt-item.cur { border-color: var(--vurgu); background: var(--vurgu-zemin); }
.alt-item .d { font-weight: 650; font-size: 1.0625rem; }
.alt-item .x { font-size: .8125rem; color: var(--ikincil); }
.alt-item .st { font-weight: 600; font-size: .8125rem; text-align: right; }
.alt-item .st-ok { color: var(--uygun); } .alt-item .st-dikkat { color: var(--dikkat); } .alt-item .st-red { color: var(--red); }
.yasal-not { color: var(--dikkat); font-weight: 600; font-size: .9375rem; }

/* ---- bağımsız ağırlık hesabı ---- */
.agirlik, #dogrulamaKutu { margin-top: var(--ara); }
.w-satir { display: grid; grid-template-columns: 1.1fr 1fr 1fr auto; gap: 8px; align-items: end; padding: 10px 0; border-bottom: 1px solid var(--cizgi-ince); }
.w-satir label { display: block; font-size: .75rem; font-weight: 600; color: var(--ikincil); margin-bottom: 3px; }
.w-satir .w-cikti { grid-column: 1 / -1; font-size: .875rem; color: var(--ikincil); }
.w-satir .w-cikti b { color: var(--murekkep); }
.w-satir .sil { align-self: center; }
.hata-not { color: var(--red); }
.w-toplam { margin-top: 14px; background: var(--bilgi-zemin); border-radius: 3px; padding: 12px 14px; }
#wTot .help, #wTot .lbl { font-size: .875rem; color: var(--ikincil); }
@media (max-width: 420px) { .w-satir { grid-template-columns: 1fr 1fr; } }

/* ---- uzman görünümü (?uzman=1) ---- */
.denetim-not { margin-top: 12px; padding: 10px 12px; font-size: .875rem; border-left: 3px solid var(--cizgi); background: var(--bilgi-zemin); }
.denetim-not.audit-ok { border-left-color: var(--uygun); background: var(--uygun-zemin); color: var(--uygun); }
.denetim-not.audit-bad { border-left-color: var(--red); background: var(--red-zemin); color: var(--red); }
.denetim-not ul { margin: 6px 0 0; padding-left: 18px; }
.rozet { margin-top: 10px; min-height: var(--hedef-ik); padding: 4px 12px; border: 1px solid var(--uygun); background: var(--uygun-zemin); color: var(--uygun); border-radius: 3px; font-weight: 600; font-size: .875rem; cursor: pointer; }
.rozet.bad { border-color: var(--red); background: var(--red-zemin); color: var(--red); }
.sx { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 8px; }
.vt { min-width: 460px; font-size: .875rem; }
.vt th, .vt td { text-align: left; white-space: normal; vertical-align: top; }
.vt .okc { color: var(--uygun); font-weight: 650; } .vt .bad { color: var(--red); font-weight: 650; }
.vt tr.grp td { background: var(--bilgi-zemin); font-weight: 650; }
.vt .help { font-size: .8125rem; color: var(--ikincil); }
.layer { margin-top: 14px; }
.layer h3 { margin: 0 0 4px; font-size: 1rem; font-weight: 650; }
.layer .help { margin: 0 0 6px; font-size: .875rem; color: var(--ikincil); }
#xBox .help { font-size: .875rem; color: var(--ikincil); }

/* ---- kullanım koşulları penceresi ---- */
.kosul-zemin { position: fixed; inset: 0; z-index: 60; background: var(--zemin); overflow-y: auto; padding: calc(14px + env(safe-area-inset-top, 0px)) 12px calc(14px + env(safe-area-inset-bottom, 0px)); }
.kosul { background: var(--kagit); color: var(--murekkep); max-width: 620px; margin: 0 auto; border-top: 4px solid var(--serit); border-radius: 3px; padding: 18px; }
.kosul h2 { margin: 0; font-size: 1.25rem; font-weight: 650; }
.kosul ul { padding-left: 20px; margin: 10px 0; }
.kosul li { margin: 6px 0; font-size: .9375rem; }
.kosul ol { padding-left: 20px; margin: 8px 0 0; font-size: .875rem; color: var(--ikincil); }
.kosul-onay { display: flex; align-items: center; gap: 10px; min-height: var(--hedef-ik); margin-top: 12px; font-weight: 600; cursor: pointer; }
.kosul .hesapla { margin-top: 14px; }
body.kilit { overflow: hidden; }

.mesgul { position: fixed; top: calc(10px + env(safe-area-inset-top, 0px)); right: 10px; z-index: 65; background: var(--serit); color: var(--serit-yazi); padding: 6px 12px; border-radius: 3px; font-weight: 600; font-size: .875rem; pointer-events: none; }

/* ===== Masaüstü düzeni (≥ 1100 px): cevap ve sipariş solda, kesit çizimi sağda ===== */
@media (min-width: 1100px) {
  .sonuc-ic { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .sonuc-ic > * { grid-column: 1 / -1; min-width: 0; }
  .sonuc-ic > #cevapBlok { grid-column: 1; grid-row: 1; }
  .sonuc-ic > #orderBox { grid-column: 1; grid-row: 2; }
  .sonuc-ic > #drawBox { grid-column: 2; grid-row: 1 / 3; border-top: 0; border-left: 1px solid var(--cizgi); align-self: stretch; }
  .sonuc-ic > #probBox { border-top: 1px solid var(--cizgi); }
  .kontroller { grid-template-columns: 1fr 1fr; }
  #okBox .kontroller { grid-template-columns: 1fr 1fr; }
  svg.kesit { max-height: 300px; }
}