/**
 * Çerçeve hesapla — sağ panel düzeni
 * ---------------------------------------------------------------
 * Amaç: üstteki form alanı sıkışsın, alttaki profil ızgarası
 * büyüsün — aynı ekranda daha fazla çerçeve görünsün.
 *
 * Ölçüm (1920×945, sağ panel 914 px):
 *   önce            : ızgara 320 px → 4 satır × 10 sütun = 40 çerçeve
 *   dikey düzeltme  : ızgara 386 px → 5 satır × 10 sütun = 50 çerçeve
 *   tam tasarım     : ızgara 456 px → 6 satır × 10 sütun = 60 çerçeve
 *
 * Not: atolye-redesign.css bu ekranda etkisiz; kazanan kurallar
 * calc-screen-override.css'te. Bu dosya en son yüklenir.
 */

/* ════════════════════════════════════════════
   1. Sağ panel dikey esnek
   Izgara `max-height: 20rem` ile 320 px'e kilitliydi; pencere ne
   kadar uzun olursa olsun 4 satır gösterip altında 111 px ölü
   alan bırakıyordu. Artık kalan yüksekliği dolduruyor.
   ════════════════════════════════════════════ */
body.calc-view-active .form-card {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  padding: 14px 16px 12px !important;
}

body.calc-view-active .calc-form-title {
  margin-bottom: 8px !important;
  padding-bottom: 4px !important;
}

body.calc-view-active .calc-mode-chips,
body.calc-view-active .calc-subchips,
body.calc-view-active .calc-measure-row,
body.calc-view-active .calc-eser-iscilik-row,
body.calc-view-active .calc-price-row {
  flex-shrink: 0 !important;
}

body.calc-view-active .calc-mode-chips { margin-bottom: 10px !important; }
body.calc-view-active .calc-subchips { margin-bottom: 8px !important; }

body.calc-view-active .calc-measure-row,
body.calc-view-active .calc-eser-iscilik-row {
  margin-bottom: 10px !important;
}

body.calc-view-active .frame-picker {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  margin-top: 8px !important;
  padding-top: 8px !important;
}

body.calc-view-active .picker-tabs-wrap,
body.calc-view-active .frame-picker-head {
  flex-shrink: 0 !important;
}

/* Buradaki `display` kuralları JS'in gizlemesini ezmemeli.
   Cam ve Ekstra sekmelerinde JS `.frame-picker`e `hidden` sınıfı
   ekliyor; `display: flex !important` bunu ezip alakasız çerçeve
   profillerini o sekmelerde de gösteriyordu. */
body.calc-view-active .frame-picker.hidden,
body.calc-view-active .frame-picker[hidden],
body.calc-view-active .picker-panel.hidden,
body.calc-view-active .picker-panel[hidden],
body.calc-view-active #calc_price_display.hidden,
body.calc-view-active .calc-eser-iscilik-row > label.hidden {
  display: none !important;
}

/* YALNIZ aktif panel esnesin — pasif paneller `display: none` kalmalı.
   Bu kuralı `.picker-panel`e genel yazmak beş paneli birden görünür
   yapıp ızgarayı 192 px'e düşürüyordu. */
body.calc-view-active .picker-panel.active {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

body.calc-view-active .frame-picker-grid {
  flex: 1 1 auto !important;
  min-height: 10rem !important;
  max-height: none !important;
  /* Izgara kalan yüksekliği alınca CSS grid'in varsayılanı
     `align-content: stretch` satırları uzatıyor. Çerçeve sekmesinde
     150 öğe taştığı için fark edilmiyor, ama Slip/Cam gibi az öğeli
     sekmelerde kartlar 270 px'e geriliyordu. Satırlar doğal
     yüksekliğinde kalsın, artan boşluk altta dursun. */
  align-content: start !important;
  /* Satır adımı 69+6=75 px iken Çerçeve sekmesi 446 px'de kalıp
     6. satırı 4 px farkla kaçırıyordu. 4 px boşlukla adım 73 px
     oluyor ve satır sığıyor. */
  gap: 4px !important;
}

/* Kartlar da kendi içinde gerilmesin */
body.calc-view-active .frame-picker-grid > .frame-pick {
  align-self: start !important;
}

/* ════════════════════════════════════════════
   2. Sekmeler — hangisinin seçili olduğu bariz
   Önce yalnız 2 px alt çizgi ve hafif renk farkı vardı; aynı
   kalınlıktaki yazıyla ayırt edilmiyordu.
   ════════════════════════════════════════════ */
body.calc-view-active .calc-mode-chips .calc-chip {
  font-weight: 500 !important;
  padding: 8px 16px !important;
  border-radius: 8px 8px 0 0 !important;
  border-bottom: 3px solid transparent !important;
}

body.calc-view-active .calc-mode-chips .calc-chip.active {
  font-weight: 700 !important;
  background: #eef2f7 !important;
  border-bottom-color: #384f6c !important;
}

/* ════════════════════════════════════════════
   3. Ölçü satırı — sayı alanları gereğinden geniş değil
   En/Boy/Adet 194'er px idi; iki üç haneli sayı için fazla.
   ════════════════════════════════════════════ */
body.calc-view-active .calc-measure-row {
  grid-template-columns:
    minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.85fr) !important;
}

/* ════════════════════════════════════════════
   4. Eser adı — tam satır yerine etiket solda, alan sağda
   İsteğe bağlı bir alan için 881 px'lik tam satır ayrılıyordu.
   56 px → 33 px.
   ════════════════════════════════════════════ */
/* `:not(.hidden)`: bu kural `display: grid !important` ile `.hidden`
   sinifini eziyordu. `syncIscilikUi()` misafir/gomulu modda «Iscilik (TL,
   manuel)» alanina dogru sekilde `.hidden` ekliyor ama alan yine goruntuleniyordu
   — cercevedunyasi.com'daki tasarim sayfasinda atolye ici bir alan halka
   acik biciminde gorunuyordu. */
body.calc-view-active .calc-eser-iscilik-row > label:first-child:not(.hidden) {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
}

body.calc-view-active .calc-eser-iscilik-row > label:first-child:not(.hidden) > input {
  margin: 0 !important;
}

/* ════════════════════════════════════════════
   5. Fiyat — dikey yığın yerine tek şerit
   Etiket, tutar, ölçü ve düğmeler alt alta diziliyordu (127 px).
   Artık aynı hizada (76 px).
   ════════════════════════════════════════════ */
body.calc-view-active #calc_price_row {
  align-items: center !important;
  padding: 10px 14px !important;
  gap: 14px !important;
}

body.calc-view-active #calc_price_display {
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  flex-wrap: wrap !important;
  gap: 2px 14px !important;
  flex: 1 1 320px !important;
  width: auto !important;
}

body.calc-view-active .calc-live-price-label,
body.calc-view-active #calc_live_olcu {
  width: auto !important;
  margin: 0 !important;
  align-self: center !important;
}

body.calc-view-active #calc_live_price {
  width: auto !important;
  margin: 0 !important;
  font-size: 1.4rem !important;
  line-height: 1.1 !important;
}

/* Yardım metni alt satıra inse bile şeridi uzatmasın */
body.calc-view-active #calc_price_hint {
  flex: 1 1 100% !important;
  width: auto !important;
  margin: 0 !important;
  font-size: 0.72rem !important;
  line-height: 1.25 !important;
}

/* Düğmeler tek satırda kalsın — sıkışınca alt alta kayıp
   şeridi 85 px'e çıkarıyorlardı. */
body.calc-view-active .calc-price-actions {
  flex: 0 0 auto !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
}

/* ════════════════════════════════════════════
   6. Kısa ekran — ızgara taban yüksekliğinin altına inmesin
   ════════════════════════════════════════════ */
@media (max-height: 700px) {
  body.calc-view-active .frame-picker-grid {
    min-height: 8rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   ÖLÇÜ PANELİ — ÜST BLOĞU SIKILAŞTIRMA
   893px'lik pencerede ölçüm: üst bloklar 375px yer kaplıyor, çerçeve
   seçiciye 506px kalıyordu. Blok yükseklikleri korunuyor, kazanç
   gereksiz başlık ve blok arası boşluklardan geliyor.
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 721px) {
  /* «Ölçü» başlığı: kenar çubuğunda zaten «Çerçeve hesapla» yazıyor ve hemen
     altındaki sekmeler bölümü söylüyor — 31px + 8px boşluk bilgi katmıyordu. */
  #view_calc .calc-form-title {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    margin-bottom: 0 !important;
  }

  #view_calc section.card.form-card {
    padding-top: 0.5rem;
  }

  /* Blok arası boşluklar 8–12px'ten 6px'e.
     Önek ve `!important`, bu dosyadaki mevcut kuralların düzenine uyuyor —
     aksi hâlde onlar kazanıp değişiklik görünmüyordu. */
  body.calc-view-active .calc-mode-chips,
  body.calc-view-active #calc_frame_subchips,
  body.calc-view-active .calc-measure-row,
  body.calc-view-active .calc-eser-iscilik-row {
    margin-bottom: 6px !important;
  }

  /* Fiyat şeridi: iç boşluk kırpılır, düğme boyu korunur. */
  body.calc-view-active #calc_price_row {
    /* margin-top 16px idi; blok arası boşluk 6px'e eşitlendi. */
    margin-top: 6px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    margin-bottom: 6px !important;
  }

  body.calc-view-active #calc_price_display {
    line-height: 1.25;
  }

  body.calc-view-active .frame-picker {
    margin-top: 4px !important;
  }
}

/* ── Çerçeve kutucukları: satırda 8 yerine 9 ──
   Kutucuk 74px, kapsayıcı 638px idi. Taban genişlik, 158 kodun kaçının
   kesildiği ölçülerek seçildi: 10 sütun/8px → 13 kesik, 9 sütun/8px → 5,
   8 sütun → 0. 9 sütun %12 daha yoğun ve kodların %97'si tam görünüyor.
   Kesilen kod da kutucuğa tıklanınca «Dış çerçeve» alanında tam yazıyor. */
body.calc-view-active #cerceve_gorsel_secim {
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)) !important;
}

body.calc-view-active #cerceve_gorsel_secim .frame-pick {
  padding: 4px 3px 3px !important;
}

body.calc-view-active #cerceve_gorsel_secim .frame-pick-img {
  height: 31px !important;
}

body.calc-view-active #cerceve_gorsel_secim .frame-pick-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Kod dar kutuda taşmasın; sığmazsa üç noktayla kesilir. */
body.calc-view-active #cerceve_gorsel_secim .frame-pick-kod {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 8px !important;
  letter-spacing: -0.01em;
}

/* ── «Eser adı» ölçü satırına taşındı (app.js: compactCalcMeasureRow) ── */
@media (min-width: 721px) {
  body.calc-view-active .calc-measure-row.has-eser-field {
    grid-template-columns:
      minmax(140px, 1.5fr) minmax(130px, 1.4fr) 92px 92px 78px !important;
  }

  /* Eser satırında yalnız gizli «İşçilik» kaldıysa satır tamamen kalksın. */
  body.calc-view-active .calc-eser-iscilik-row:not(:has(> :not(.hidden))) {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   ÇERÇEVE KUTUCUĞU — GÖRSELİ BÜYÜT, YOĞUNLUĞU KORU
   Kaynak görseller 415×120 (3,46:1 şerit). 58×31'lik kutuda cover ile
   genişliğin %46'sı kırpılıyor, kalan da 31px yüksekliğinde okunmuyordu.
   Kod ayrı satır yerine görselin üzerine alınınca aynı 56px'lik kutucukta
   görsel 31px → 49px'e çıkıyor (%58 daha büyük), satır sayısı değişmiyor.
   ═══════════════════════════════════════════════════════════════════════ */
body.calc-view-active #cerceve_gorsel_secim .frame-pick {
  position: relative;
  display: block !important;
  padding: 0 !important;
  overflow: hidden;
  border-radius: 7px;
}

body.calc-view-active #cerceve_gorsel_secim .frame-pick-img {
  display: block !important;
  width: 100%;
  height: 100% !important;
  margin: 0;
}

body.calc-view-active #cerceve_gorsel_secim .frame-pick-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Kod, görselin altına okunur bir şeritle bindirilir. */
body.calc-view-active #cerceve_gorsel_secim .frame-pick-kod {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 7px 3px 2px;
  background: linear-gradient(to top, rgba(12, 16, 20, 0.82) 45%, rgba(12, 16, 20, 0));
  color: #fff;
  font-size: 8px !important;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Sabit yükseklik — `aspect-ratio` ile ızgara satırı 41px hesaplanıp
   56px'lik kutucuklar üst üste biniyor, alttaki görsel üstteki kodu
   örtüyordu. Açık yükseklik satırı doğru boyutlandırır. */
body.calc-view-active #cerceve_gorsel_secim .frame-pick {
  height: 58px;
}

/* ── Fiyat şeridi ──
   «Fiyat» etiketi gereksiz: hemen yanında ₺ ile başlayan rakam duruyor.
   «Detaylar» ise ölçü metninin sonuna iliştirilmiş 45×14'lük bir yazıydı;
   sağa alınıp gerçek bir düğme hâline getirildi. */
body.calc-view-active #calc_price_display {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 0.9rem;
  row-gap: 1px;
}

body.calc-view-active #calc_price_display .calc-live-price-label {
  display: none !important;
}

body.calc-view-active #calc_live_price {
  grid-column: 1;
  grid-row: 1;
}

body.calc-view-active #calc_live_olcu {
  grid-column: 1;
  grid-row: 2;
}

body.calc-view-active #calc_fiyat_breakdown_btn {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  height: auto;
  padding: 0.32rem 0.7rem;
  border: 1px solid var(--os-border, #d7e0e8);
  border-radius: 999px;
  background: #fff;
  color: #384f6c;
  font-size: 0.75rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

body.calc-view-active #calc_fiyat_breakdown_btn:hover {
  border-color: #384f6c;
  background: #eaf0f7;
}

body.calc-view-active #calc_fiyat_breakdown_btn::after {
  content: " ›";
  font-weight: 400;
}

/* Fiyat henüz hesaplanmamışken «Detaylar» gösterilecek bir şey yok.
   Uygulama düğmeyi hep görünür bırakıyor; eskiden ölçü metninin sonunda
   ufak bir yazıydı, göze batmıyordu — artık belirgin bir düğme.
   Güvenilir sinyal: hesap yokken `#calc_price_hint` görünür oluyor
   (hesap yapılınca `.hidden` sınıfı alıyor). */
body.calc-view-active #calc_price_display:has(#calc_price_hint:not(.hidden)) #calc_fiyat_breakdown_btn {
  display: none !important;
}

/* Hesap yokken ipucu, «—» ile aynı satırda dursun. */
body.calc-view-active #calc_price_hint {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 0;
}

/* ── Sekme çipinde seçim göstergesi ──
   Çipler düz metindi; Paspartu/Slip/Cam adımlarında seçim olup olmadığı
   ancak sekmeye girilince görülüyordu. Nokta, seçim olduğunu söyler;
   `title` ile üzerine gelince seçilen değer okunur. */
body.calc-view-active #view_calc .calc-mode-chips .calc-chip {
  position: relative;
}

body.calc-view-active #view_calc .calc-mode-chips .calc-chip.has-secim::after {
  content: "";
  position: absolute;
  top: 5px;
  right: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #1e6b42;
  box-shadow: 0 0 0 2px #fff;
}

/* Aktif sekmenin zemini koyu olabildiği için halka o durumda uyum sağlar. */
body.calc-view-active #view_calc .calc-mode-chips .calc-chip.active.has-secim::after {
  box-shadow: 0 0 0 2px currentColor;
}

/* Nokta yazının üzerine binmesin. */
body.calc-view-active #view_calc .calc-mode-chips .calc-chip.has-secim {
  padding-right: 1.15rem;
}

/* ── Seçili çerçeve kutucuğu daha belirgin ──
   1px kenarlık + %15 saydam halka, desenli görsellerin üzerinde kayboluyordu. */
body.calc-view-active #cerceve_gorsel_secim .frame-pick.active {
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px var(--os-accent, #384f6c) !important;
  border-color: transparent !important;
  z-index: 1;
}

body.calc-view-active #cerceve_gorsel_secim .frame-pick.active::before {
  content: "✓";
  position: absolute;
  top: 2px;
  right: 3px;
  z-index: 2;
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--os-accent, #384f6c);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
}