/* ==========================================================================
   TEKLİF FORMU (7 adım) + MALZEME SEÇİCİ
   Yalnızca teklif.php ve malzemeler.php sayfalarında yüklenir.
   ========================================================================== */

.teklif-sayfa .kapsa { max-width: 880px; }

.teklif-form {
  display: flex; flex-direction: column; gap: var(--bo-8);
  background: var(--renk-beyaz);
  border: 1px solid var(--cizgi);
  border-radius: var(--yari-3);
  padding: var(--bo-9);
}


/* --- İlerleme çubuğu ------------------------------------------------------ */

.teklif-ilerleme ol {
  display: flex; gap: var(--bo-2);
  list-style: none; margin: 0 0 var(--bo-5); padding: 0;
  overflow-x: auto; scrollbar-width: none;
}
.teklif-ilerleme ol::-webkit-scrollbar { display: none; }
.teklif-ilerleme li { flex: 0 0 auto; }

.teklif-adim-dugme {
  display: flex; align-items: center; gap: var(--bo-2);
  padding: 8px 12px;
  border-radius: var(--yari-3);
  font: 600 var(--p-mini)/1 var(--yazi-baslik);
  color: var(--renk-metin-3);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--gecis), background var(--gecis);
}
.teklif-adim-dugme:hover { color: var(--renk-koyu); background: var(--renk-panel); }

.teklif-adim-no {
  display: grid; place-items: center;
  width: 22px; height: 22px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font-size: 11px;
}

/* Bulunulan adım */
.teklif-adim-dugme[aria-current="step"] { color: var(--renk-turuncu-koyu); }
.teklif-adim-dugme[aria-current="step"] .teklif-adim-no {
  background: var(--renk-turuncu); border-color: var(--renk-turuncu); color: #fff;
}
/* Tamamlanmış adım */
.teklif-adim-dugme.bitti { color: var(--renk-koyu); }
.teklif-adim-dugme.bitti .teklif-adim-no {
  background: var(--renk-koyu); border-color: var(--renk-koyu); color: var(--acik-metin);
}

.teklif-cubuk { height: 3px; background: var(--cizgi); border-radius: 2px; overflow: hidden; }
.teklif-cubuk span {
  display: block; height: 100%; width: 0;
  background: var(--renk-turuncu);
  transition: width .25s ease;
}


/* --- Adım gövdesi --------------------------------------------------------- */

.form-adimi {
  display: flex; flex-direction: column; gap: var(--bo-6);
  border: 0; margin: 0; padding: 0; min-width: 0;
}
/* Adım değişince odak başlığa taşınıyor (ekran okuyucu için). Bu programatik
   odakta halka çizilmesin — ziyaretçi tıklayarak geldiğinde çerçeve görmek
   istemiyor. Klavyeyle gezen zaten adım düğmelerinde halkayı görüyor. */
.form-adimi legend { padding: 0; margin-bottom: var(--bo-2); }
.form-adimi legend:focus { outline: none; }
.form-adimi > .metin-silik { margin-top: calc(var(--bo-6) * -1 + var(--bo-2)); }

.teklif-ops {
  display: inline-block; vertical-align: middle;
  margin-left: var(--bo-3);
  padding: 4px 8px;
  background: var(--renk-panel);
  border-radius: var(--yari-2);
  font: 600 11px/1 var(--yazi-govde);
  color: var(--renk-metin-2);
  text-transform: uppercase; letter-spacing: .06em;
}


/* --- Çip seçimi (mekân türü, malzeme) ------------------------------------ */

.cip-secim {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--bo-4);
}

.secim-cip { position: relative; cursor: pointer; }
.secim-cip input {
  position: absolute; inset: 0;
  opacity: 0; margin: 0; cursor: pointer;
}
.secim-cip-govde {
  display: flex; flex-direction: column; gap: 4px;
  padding: var(--bo-6);
  background: var(--renk-beyaz);
  border: 1.5px solid var(--cizgi-16);
  border-radius: var(--yari-3);
  transition: border-color var(--gecis), background var(--gecis), box-shadow var(--gecis);
}
.secim-cip:hover .secim-cip-govde { border-color: var(--renk-metin-3); }

/* Seçili çip — dolgu değil kenar ve tik ile belirtiliyor: renk körü
   ziyaretçi için de ayırt edilebilir olsun. */
.secim-cip input:checked + .secim-cip-govde {
  border-color: var(--renk-turuncu);
  background: var(--renk-vurgu-zemin);
  box-shadow: inset 0 0 0 1px var(--renk-turuncu);
}
.secim-cip input:checked + .secim-cip-govde::after {
  content: '✓';
  position: absolute; top: 10px; right: 12px;
  font: 700 14px/1 var(--yazi-baslik);
  color: var(--renk-turuncu-koyu);
}
.secim-cip input:focus-visible + .secim-cip-govde {
  outline: 2px solid var(--renk-turuncu); outline-offset: 2px;
}

.secim-cip-ad  { font: 700 var(--p-govde-2)/1.3 var(--yazi-baslik); color: var(--renk-koyu); }
.secim-cip-alt { font: 400 var(--p-mini)/1.5 var(--yazi-govde); color: var(--renk-metin-2); }


/* Fotoğraf yükleme alanının stilleri bilesenler.css'te — penceredeki hızlı
   form da aynısını kullanıyor, bu dosya her sayfada yüklenmiyor.
   Teklif sayfasında önizleme kutuları biraz daha büyük olsun: */
.teklif-form .yukleme-onizleme { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }


/* --- Malzeme seçimi (5. adım) --------------------------------------------
   Kapak ve kapı modelleri fotoğraflı seçilir. Seramik/tezgâh burada
   listelenmez — çok fazla ürün var, katalog bağlantısı verilir.          */

.tk-malzeme-grup { display: flex; flex-direction: column; gap: var(--bo-4); }
.tk-malzeme-baslik { font: 700 var(--p-govde-2)/1.3 var(--yazi-baslik); color: var(--renk-koyu); }

.tk-malzeme-izgara {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--bo-4);
}

.tk-malzeme { position: relative; cursor: pointer; }
.tk-malzeme input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }

.tk-malzeme-govde { display: flex; flex-direction: column; gap: var(--bo-2); }

.tk-malzeme-foto {
  position: relative; display: block;
  aspect-ratio: 1; overflow: hidden;
  border: 2px solid var(--cizgi-16);
  border-radius: var(--yari-3);
  background: var(--renk-panel);
  transition: border-color var(--gecis);
}
.tk-malzeme-foto picture,
.tk-malzeme-foto img,
.tk-malzeme-foto .gorsel-yer {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* Seçili — kenar + tik işareti (renk körü ziyaretçi de ayırt etsin) */
.tk-malzeme-tik {
  position: absolute; top: 6px; right: 6px;
  width: 24px; height: 24px;
  display: none; place-items: center;
  background: var(--renk-turuncu); color: #fff;
  border-radius: 50%;
  font: 700 13px/1 var(--yazi-baslik);
}
.tk-malzeme input:checked + .tk-malzeme-govde .tk-malzeme-foto { border-color: var(--renk-turuncu); }
.tk-malzeme input:checked + .tk-malzeme-govde .tk-malzeme-tik { display: grid; }
.tk-malzeme input:focus-visible + .tk-malzeme-govde .tk-malzeme-foto {
  outline: 2px solid var(--renk-turuncu); outline-offset: 2px;
}
.tk-malzeme:hover .tk-malzeme-foto { border-color: var(--renk-metin-3); }

.tk-malzeme-ad {
  font: 500 var(--p-mini)/1.4 var(--yazi-govde);
  color: var(--renk-metin-2);
  text-align: center;
}

/* Seramik / tezgâh — seçilmez, katalog verilir */
.tk-katalog {
  display: flex; flex-direction: column; gap: var(--bo-2);
  padding: var(--bo-6);
  background: var(--renk-panel);
  border-radius: var(--yari-3);
}
.tk-katalog b { font: 700 var(--p-govde-2)/1.3 var(--yazi-baslik); }
.tk-katalog span { font: 400 var(--p-mini)/1.6 var(--yazi-govde); color: var(--renk-metin-2); }
.tk-katalog-baglar { display: flex; flex-wrap: wrap; gap: var(--bo-2) var(--bo-5); margin-top: var(--bo-2); }
.tk-katalog-baglar a {
  font: 600 var(--p-mini)/1.4 var(--yazi-govde);
  color: var(--renk-turuncu-koyu);
}
.tk-katalog-baglar a:hover { text-decoration: underline; }


/* --- Ölçü alanı ----------------------------------------------------------- */

.olcu-alani {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--bo-5);
}


/* --- Plan adımı ----------------------------------------------------------- */

.teklif-plan-kutu {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--bo-6); flex-wrap: wrap;
  padding: var(--bo-7);
  background: var(--renk-panel);
  border-radius: var(--yari-3);
}
.teklif-plan-yazi { display: flex; flex-direction: column; gap: 4px; }
.teklif-plan-yazi b { font: 700 var(--p-govde-2)/1.3 var(--yazi-baslik); }
.teklif-plan-yazi span { font: 400 var(--p-mini)/1.6 var(--yazi-govde); color: var(--renk-metin-2); }

.teklif-plan-sonuc {
  display: flex; align-items: center; gap: var(--bo-5);
  padding: var(--bo-5) var(--bo-6);
  background: #EAF6EC;
  border: 1px solid #B7DCC0;
  border-radius: var(--yari-3);
}
.teklif-plan-onay { font: 600 var(--p-govde-2)/1 var(--yazi-govde); color: #1F6B32; }

.dugme-metin {
  font: 600 var(--p-mini)/1 var(--yazi-govde);
  color: var(--renk-metin-2);
  text-decoration: underline;
  cursor: pointer;
}
.dugme-metin:hover { color: var(--renk-hata); }


/* --- Özet ----------------------------------------------------------------- */

.teklif-ozet {
  display: flex; flex-direction: column;
  border: 1px solid var(--cizgi);
  border-radius: var(--yari-3);
  overflow: hidden;
}
.teklif-ozet-satir {
  display: flex; gap: var(--bo-6);
  padding: var(--bo-5) var(--bo-6);
  font: 400 var(--p-govde-2)/1.6 var(--yazi-govde);
}
.teklif-ozet-satir + .teklif-ozet-satir { border-top: 1px solid var(--cizgi); }
.teklif-ozet-ad {
  flex: 0 0 150px;
  font-weight: 600; color: var(--renk-metin-2);
}
.teklif-ozet-deger { flex: 1 1 auto; min-width: 0; color: var(--renk-koyu); }
.teklif-ozet-deger.bos { color: var(--renk-metin-3); font-style: italic; }

.onay-secenek {
  display: flex; align-items: flex-start; gap: var(--bo-4);
  font: 400 var(--p-mini)/1.6 var(--yazi-govde);
  color: var(--renk-metin-2);
  cursor: pointer;
}
.onay-secenek input { flex: none; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--renk-turuncu); }
.onay-secenek a { color: var(--renk-turuncu-koyu); text-decoration: underline; }


/* --- Gezinme -------------------------------------------------------------- */

.teklif-gezinme {
  display: flex; align-items: center; gap: var(--bo-5);
  padding-top: var(--bo-7);
  border-top: 1px solid var(--cizgi);
}
.teklif-gezinme [data-ileri],
.teklif-gezinme [data-gonder] { margin-left: auto; }
.teklif-sayac {
  font: 500 var(--p-mini)/1 var(--yazi-govde);
  color: var(--renk-metin-3);
}


/* --- Teşekkür ekranı ------------------------------------------------------ */

.teklif-tesekkur {
  display: flex; flex-direction: column; align-items: center; gap: var(--bo-5);
  padding: var(--bo-10) var(--bo-8);
  background: var(--renk-beyaz);
  border: 1px solid var(--cizgi);
  border-radius: var(--yari-3);
  text-align: center;
}
.teklif-tesekkur-isaret {
  display: grid; place-items: center;
  width: 56px; height: 56px;
  background: #EAF6EC; color: #1F6B32;
  border-radius: 50%;
  font: 700 26px/1 var(--yazi-baslik);
}
.teklif-tesekkur-eylem { display: flex; gap: var(--bo-4); flex-wrap: wrap; justify-content: center; }


/* --- JavaScript kapalıyken -----------------------------------------------
   Adımlar arası geçişi JS yapıyor. JS yoksa bütün adımlar alt alta
   görünmeli ki form yine doldurulabilsin.                                */
.teklif-form:not(.js-hazir) .form-adimi[hidden] { display: flex; }
.teklif-form:not(.js-hazir) .teklif-ilerleme,
.teklif-form:not(.js-hazir) [data-ileri],
.teklif-form:not(.js-hazir) [data-geri] { display: none; }
.teklif-form:not(.js-hazir) [data-gonder] { display: inline-flex; }


@media (max-width: 760px) {
  .teklif-form { padding: var(--bo-7); gap: var(--bo-7); }
  .teklif-adim-ad { display: none; }        /* dar ekranda yalnız numaralar */
  .teklif-adim-dugme { padding: 8px; }
  .cip-secim { grid-template-columns: minmax(0, 1fr); }
  .teklif-gezinme { flex-wrap: wrap; }
  .teklif-sayac { order: 3; flex: 1 1 100%; text-align: center; }
  .teklif-ozet-satir { flex-direction: column; gap: 2px; }
  .teklif-ozet-ad { flex: none; }
}