/* =========================================
   pc-calc.css — Renkli kutucuklar + responsive görseller
   (B1+Qs, Filtre/Pompa/Nozul, Isitma+Özet için)
   ========================================= */

/* ---- Degiskenler ---- */
:root{
  --pc-gap:12px;
  --pc-radius:10px;
  --pc-border:#e5e7eb;
  --pc-bg:#ffffff;
  --pc-muted:#6b7280;
  --pc-text:#111827;

  /* KUTU RENKLERI (beyaz hariç) */
  --pc-input-manual:#FFFFCC; /* Elle girilen (text/number) */
  --pc-input-select:#FFFBE8;   /* Açilir liste (select) */
  --pc-out-bg:#f3f4f6;     /* Dokunulamaz/otomatik (açik gri) */

  --pc-ctrl-h:40px;
  --pc-font:13px;
}

/* ---- Blok/Kolon/Kart iskeleti ---- */
.pc-block{ margin:0 0 20px }
.pc-col{
  border:1px solid var(--pc-border);
  border-radius:10px;
  background:var(--pc-bg);
  padding:12px;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
  box-sizing:border-box;
}
.pc-card{
  background:var(--pc-bg);
  border:1px solid var(--pc-border);
  border-radius:8px;
  padding:12px 14px;
  color:#FBFDDF
}
.pc-title{ font-size:22px; font-weight:600; margin:8px 0 }
.pc-subtitle{ font-size:14px; font-weight:600; margin:10px 0 8px }
.pc-heading{ font-size:16px; font-weight:600; margin:14px 0 8px }
.pc-muted{ color:var(--pc-muted); font-size:12px }
.pc-warn{ border:1px solid #f59e0b; background:#fff7ed; color:#92400e; border-radius:8px; padding:10px 12px }
.pc-hr{ border:none; border-top:1px solid #eee; margin:10px 0 }

/* ---- Form satiri (tüm kolonlar) ---- */
.pc-calc{ color:var(--pc-text); line-height:1.45; font-size:var(--pc-font) }
.pc-field{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin:12px 0; min-height:var(--pc-ctrl-h);
}
.pc-field label{
  flex:0 0 50%; max-width:50%;
  margin:0; font-weight:600; text-align:left;
}
.pc-input{
  width:100%; height:var(--pc-ctrl-h); min-height:var(--pc-ctrl-h);
  padding:0 12px; border:1px solid var(--pc-border); border-radius:8px;
  outline:none; font-size:var(--pc-font); line-height:1.2; box-sizing:border-box;
  background:var(--pc-input-manual);            /* 1) Elle girilen (text/number) */
}
select.pc-input{                                 /* 2) Açilir liste */
  background:var(--pc-input-select);
}
.pc-out{                                         /* 3) Otomatik (dokunulamaz) */
  display:flex; align-items:center; justify-content:flex-end;
  height:var(--pc-ctrl-h); min-height:var(--pc-ctrl-h);
  padding:0 12px; border:1px solid var(--pc-border); border-radius:8px;
  background:var(--pc-out-bg); font-size:var(--pc-font);
  color:var(--pc-text); text-align:right; width:100%; box-sizing:border-box;
}
/* readonly/disabled her zaman otomatik gri görünür */
.pc-input[readonly], .pc-input:disabled{
  background:var(--pc-out-bg) !important;
  color:#555; cursor:default;
}
/* checkbox satiri */
.pc-field.pc-field-checkbox label{ display:flex; gap:8px; align-items:center }

/* ---- Kart bazli (Isitma) ---- */
#pc-card-heat .pc-field label{ flex:0 0 230px; max-width:230px }
#pc-card-heat .pc-field .pc-input,
#pc-card-heat .pc-field .pc-out{ flex:1 1 auto; min-width:0 }

/* ---- Görseller ---- */
.pc-simg img{
  width:100%;
  height:100px;            /* masaüstü yüksekligi */
  object-fit:cover;
  border-radius:6px;
  border:1px solid var(--pc-border);
  display:block;
  margin-bottom:10px;
}
.pc-simg.full img{ width:100% }

/* Article içindeki büyük görsel: yatayda %100 sigsin */
figure.media{ margin:0 } /* bos kenarlari yok et */
figure.media img{
  display:block;
  width:100% !important;   /* yatayda %100 */
  max-width:100% !important;
  height:auto !important;
}

/* ---- Özet karti ---- */
#pc-card-summary .pc-simg.full{ margin-bottom:12px }
#pc-card-summary .pc-simg.full img{ height:100px; border-radius:8px }

#pc-card-summary .pc-srow{
  display:flex; align-items:flex-start; gap:12px;
  border:1px dashed #e6e6e6; border-radius:6px;
  padding:8px 10px; margin-bottom:10px;
}
#pc-card-summary .pc-srow:last-child{ margin-bottom:0 }
#pc-card-summary .pc-simg{ order:-1; flex:0 0 120px }
#pc-card-summary .pc-simg img{
	width:100%;
	height:100px;
	object-fit:cover;
	border-radius:6px
}
#pc-card-summary .pc-sinfo{ flex:1 1 auto; min-width:0 }

#pc-card-summary .pc-sline{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin-bottom:8px;
}
#pc-card-summary .pc-sline:last-child{ margin-bottom:0 }

#pc-card-summary .pc-label,
#pc-card-summary .pc-value{ font-size:var(--pc-font); font-weight:600; color:var(--pc-text) }
#pc-card-summary .pc-label{
  flex:0 0 180px; min-height:var(--pc-ctrl-h);
  display:flex; align-items:center;
}
#pc-card-summary .pc-value{
  flex:1 1 auto; min-width:0;
  background:var(--pc-out-bg); border:1px solid var(--pc-border); border-radius:8px;
  padding:0 10px; min-height:var(--pc-ctrl-h);
  display:flex; align-items:center; justify-content:flex-end; text-align:right; box-sizing:border-box;
}

/* =========================================
   RESPONSIVE
   ========================================= */

/* Tablet ve asagisi */
@media (max-width:991px){
  .pc-title{ font-size:20px }
  .pc-field{ gap:8px; margin:10px 0 }
}

/* Mobil */
@media (max-width:767px){
  /* Sayfa içi H1 basligi ~%50 küçült */
  section#content article h1{
    font-size: 1.7rem !important;
    line-height:1.2 !important;
    margin:0.5rem 0 0.75rem !important;
    text-align:center !important;
  }
h2 {
    font-size: 1.7rem !important;
    line-height:1.2 !important;
    margin:0.5rem 0 0.75rem !important;
    text-align:center !important;
  }  
  
  /* Özet satir gruplari: RESIM ÜSTTE ? altinda label ? altinda kutucuk */
  #pc-card-summary .pc-srow{
    display:block;            /* hepsi dikey */
    margin-bottom:10px;
  }

  #pc-card-summary .pc-srow .pc-simg{
    width:100%;
    margin-bottom:8px;        /* resim ile metin arasi */
  }
  #pc-card-summary .pc-srow .pc-simg img{
    width:100%;
    height:auto;              /* en-boy oranini koru */
    max-height:180px;         /* istersen 140–200 arasi oynatabilirsin */
    object-fit:cover;
    border-radius:6px;
  }

  #pc-card-summary .pc-srow .pc-sinfo{
    display:block;
    width:100%;
  }

  /* "Seçilen Filtre" etiketi ÜSTTE */
  #pc-card-summary .pc-srow .pc-sinfo .pc-sline{
    display:block;
    margin:0 0 8px 0;         /* her satir arasi bosluk */
  }
  #pc-card-summary .pc-srow .pc-sinfo .pc-label{
    display:block;
    width:100%;
    min-height:auto;
    margin:0 0 4px 0;         /* etiket ile kutu arasi */
    font-size:1rem;
    text-align:left;
  }

  /* KUTUCUK (pc-value) ALTA ve tam genislik */
  #pc-card-summary .pc-srow .pc-sinfo .pc-value{
    display:block;
    width:100%;
    min-height:var(--pc-ctrl-h);
    padding:6px 10px;
    text-align:left;
    justify-content:flex-start;
  }
  
  
  
  
  
  
  
  

  /* Kart görselleri: masaüstü yüksekligi korunur, yatay tam */
  .pc-simg img, .pc-simg.full img{
    width:100% !important; max-width:100% !important;
    height:100px !important; object-fit:cover; margin:0 0 10px;
  }

  /* Isitma alani: 50/50; çok darsa üst-alt’a geçer */
  #pc-card-heat .pc-field label{ flex:0 0 50% !important; max-width:50% !important }
  #pc-card-heat .pc-field .pc-input,
  #pc-card-heat .pc-field .pc-out{ flex:0 0 50% !important; max-width:50% !important }

  @media (max-width:420px){
    #pc-card-heat .pc-field{ flex-direction:column; align-items:stretch; gap:6px }
    #pc-card-heat .pc-field label,
    #pc-card-heat .pc-field .pc-input,
    #pc-card-heat .pc-field .pc-out{ width:100% !important; max-width:100% !important }
  }

  /* Özet satir gruplari: resim solda; sagda label üstte, kutu altta */
  #pc-card-summary .pc-srow{ display:flex; align-items:flex-start; gap:10px }
  #pc-card-summary .pc-srow .pc-simg{ flex:0 0 80px }
  #pc-card-summary .pc-srow .pc-simg img{ width:80px; height:60px }
  #pc-card-summary .pc-srow .pc-sinfo{
    flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:4px;
  }
  #pc-card-summary .pc-srow .pc-sinfo .pc-sline{
    flex-direction:column; align-items:stretch; gap:4px;
  }
  #pc-card-summary .pc-srow .pc-sinfo .pc-label{
    width:100%; font-size:0.95rem; text-align:left; min-height:auto;
  }
  #pc-card-summary .pc-srow .pc-sinfo .pc-value{
    width:100%; text-align:left; justify-content:flex-start; min-height:32px; padding:6px 10px;
  }

  /* Yatay tasmalari önle */
  html, body, #wrapper, .container{ overflow-x:hidden }
}

/* Çok küçük cihazlar */
@media (max-width:360px){
  .pc-title{ font-size:17px }
}