/* Catalog frontend — D4b.10 sonrası: :root tokens + var() referansları.
 * Marketing renk değişikliği isterse aşağıdaki tek `:root` bloğunu güncellemek
 * yeterli; hardcoded hex stylesheet boyunca arama gerektirmez.
 */

:root {
  --cl-primary: #2c5530;
  --cl-primary-dark: #1f3d22;
  --cl-primary-active: #143018;
  --cl-primary-soft: #eef4ec;

  --cl-danger: #d04c2a;
  --cl-danger-soft: #f6e7e1;
  --cl-danger-border: #eccab9;
  --cl-danger-text: #b03a16;

  --cl-warning: #f29423;
  --cl-warning-dark: #d87a0a;

  --cl-text: #222;
  --cl-text-muted: #555;
  --cl-text-faint: #6f6f6f;
  --cl-text-dim: #6f6f6f;
  --cl-text-meta: #666;

  --cl-border: #eee;
  --cl-border-soft: #f0f0f0;
  --cl-border-divider: #f3f3f3;
  --cl-divider-faint: #ccc;

  --cl-bg: #fff;
  --cl-bg-soft: #f8faf6;
  --cl-bg-tint: #fafafa;
}

.catalog-page {
  max-width: 1200px;
  margin: 2rem auto;
  padding: 0 1rem;
}

/* --- Breadcrumb --- */

.breadcrumb-nav {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.75rem 1rem 0.25rem;
  font-size: 0.85rem;
}

.breadcrumb {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  color: #666;
}

.breadcrumb__item + .breadcrumb__item::before {
  content: "›";
  margin-right: 0.4rem;
  color: #aaa;
}

.breadcrumb__item a {
  color: var(--cl-primary);
  text-decoration: none;
}

.breadcrumb__item a:hover { text-decoration: underline; }

.breadcrumb__item--active span {
  color: #222;
  font-weight: 600;
}

/* --- List header & filters --- */

.catalog-header {
  margin-bottom: 2rem;
  text-align: center;
}

.catalog-header h1 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.catalog-tagline {
  color: #555;
  margin: 0 auto;
  /* Dar ekranda kaçınılmaz sarmada satırlar eşit dağılsın */
  text-wrap: balance;
}

.catalog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-end;
  /* extra top padding leaves room for the absolutely-positioned field labels */
  padding: 1.85rem 1rem 1rem;
  background: #f8f8f8;
  border-radius: 8px;
  margin-bottom: 1.5rem;
}

.catalog-filters__field--search {
  flex: 1 1 220px;
}

.catalog-filters__q {
  width: 100%;
  height: 42px;
  padding: 0 0.85rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 0.95rem;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}

.catalog-filters__field {
  position: relative;
  display: flex;
  flex-direction: column;
  font-size: 0.85rem;
  color: #555;
  /* Canvas teması label'a margin-bottom verir (--cnvs-input-label-mb);
   * align-items: flex-end margin kutusuna göre hizaladığından buton
   * alanlardan aşağıda kalıyordu. */
  margin: 0;
}

.catalog-filters__field select {
  height: 42px;
  padding: 0 0.75rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
  font-size: 0.95rem;
  box-sizing: border-box;
}

/* The actions wrapper reuses .catalog-filters__field (which the 3 inputs
 * already align by) but lays Filter + Reset out in a row. It collapses to
 * 42px like the other fields, so the button lands on exactly the same line. */
.catalog-filters__actions {
  flex-direction: row;
  gap: 0.5rem;
}

/* Labels float ABOVE each control (out of flow), so every flex item in the
 * row collapses to just its 42px control. With all controls the same height
 * and align-items: flex-end, search/sector/type/button land on one line —
 * no column-height matching, no engine-dependent drift. */
.catalog-filters__field > span {
  position: absolute;
  bottom: calc(100% + 0.25rem);
  left: 0;
  white-space: nowrap;
  line-height: 1.2;
}

.catalog-filters__submit,
.catalog-filters__reset {
  height: 42px;
  padding: 0 1.2rem;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  border: none;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.catalog-filters__submit {
  background: var(--cl-primary);
  color: #fff;
}

.catalog-filters__reset {
  background: #fff;
  color: var(--cl-primary);
  border: 1px solid var(--cl-primary);
}

/* --- Tag pills --- */

.catalog-tag-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.catalog-tag-pill {
  display: inline-block;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 500;
  border: 1.5px solid #d0d0d0;
  color: #444;
  background: #fff;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}

.catalog-tag-pill:hover {
  border-color: var(--cl-primary);
  color: var(--cl-primary);
  background: #f0f9fb;
}

.catalog-tag-pill--active {
  background: var(--cl-primary);
  border-color: var(--cl-primary);
  color: #fff;
}

.catalog-tag-pill--active:hover {
  background: #1a6575;
  border-color: #1a6575;
  color: #fff;
}

/* Aktif pill'in "kaldır" işareti — link zaten yalnız o etiketi düşürüyor. */
.catalog-tag-pill__x {
  margin-left: 0.45em;
  font-weight: 700;
  opacity: 0.85;
}

/* Tek satıra katlama (catalog-tags.js). `display: inline-block` yukarıda
 * `hidden`'ı ezer — gizlenecek pill için kural şart (bu repoda 3 kez yaşandı). */
.catalog-tag-pill[hidden] {
  display: none;
}

/* "+N daha" / "Daha az" düğmesi — kesikli çerçeveli pill; <button> UA
 * fontunu almasın diye font/line-height miras. */
.catalog-tag-pill--toggle {
  border-style: dashed;
  color: var(--cl-primary);
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  line-height: inherit;
  margin: 0;
}

.catalog-tag-pill--toggle:hover,
.catalog-tag-pill--toggle:focus-visible {
  background: #f0f9fb;
  border-color: var(--cl-primary);
}

/* --- Master grid --- */

.catalog-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.catalog-card {
  display: flex;
  align-items: stretch;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  overflow: visible;
  transition: box-shadow 0.2s;
}

.catalog-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.catalog-card__media {
  flex: 0 0 138px;
  display: block;
  text-decoration: none;
}

.catalog-card__img {
  width: 138px;
  height: 138px;
  object-fit: cover;
  display: block;
}

.catalog-card__img--placeholder {
  background: linear-gradient(135deg, #e8efe5 0%, #c8d8c0 100%);
}

.catalog-card__info {
  /* Taban 0: kart flex-wrap ile sarıyor (sipariş bandı her genişlikte alt satırda); taban
   * "auto" olsaydı uzun (nowrap) başlığın içerik genişliği sipariş kolonunu masaüstünde
   * de alt satıra iterdi. Boş alanı yine bu kolon alır. */
  flex: 1 1 0;
  padding: 0.75rem 1rem;
  min-width: 0;
}

.catalog-card__title {
  font-size: 1.05rem;
  margin: 0 0 0.25rem;
  line-height: 1.3;
  /* Uzun (özellikle RU) ürün adları kartı 2 satıra bölüyordu — tek satır,
   * taşan kısım üç noktayla kesilir. (info kolonunda min-width:0 var.) */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.catalog-card__title a {
  color: inherit;
  text-decoration: none;
}

.catalog-card__title a:hover {
  color: var(--cl-primary);
}

/* Boş satır spacing - 2 satır */
.catalog-card__sci-spacer {
  margin: 0;
  min-height: 2rem;
}

/* Tooltip - başlık ve resim için */
.catalog-card__title {
  position: relative;
  overflow: visible;
}

.catalog-card__media {
  position: relative;
  overflow: visible;
}

[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 0;
  bottom: -0.5rem;
  transform: translateY(100%);
  padding: 0.5rem 0.75rem;
  background: #222;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 400;
  font-style: italic;
  border-radius: 5px;
  white-space: nowrap;
  z-index: 9999;
  box-shadow: 0 3px 12px rgba(0,0,0,0.25);
  pointer-events: none;
}

.catalog-card__meta {
  font-size: 0.8rem;
  color: #555;
  margin: 0.45rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: center;
}

.catalog-card__chip {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  background: var(--cl-primary-soft);
  color: var(--cl-primary);
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}

.catalog-card__field {
  color: #666;
  word-break: break-word;
}

.catalog-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0.55rem 0 0;
}

/* Kartın sipariş kolonu — sahibin 1b tasarımı "Tek satır, kompakt" (2026-09-14,
 * upload/Order Widget Redesign.dc.html) parçaları, ürün sayfasıyla AYNI iki satırlı düzende
 * (sahip 15:20: "ürün sayfasındaki düzeni listeye aynen koyalım"): üstte biçim çipleri tam satır,
 * altta miktar + CTA yan yana (`order-form--stacked`). Kolon görsel ve bilgiyle aynı satırda,
 * yazılı 390px = kartın 4/12'si (sahip 15:35: "7-5 ise 8-4 yap, sağı daraltalım"; iç genişlik
 * 358 ≥ miktar 190 + CTA 130 + boşluk; içerik genişliğinde bırakılsa tarayıcı
 * max-content'i alt öğelerin flex-basis'iyle değil içerik genişliğiyle tek satır gibi toplar —
 * kolon karttan karta kayar, CTA taşar; 2026-09-14 14:30 dersi). Ambalajsız üründeki tek
 * "Dökme · kg" çipi de aynı satırı doldurur. Kademeler: ≥992 sağ kolon 390px;
 * 641–991 kartın altında tam genişlik bant (aynı iki satır); ≤640 kart dikey. */
.catalog-card {
  flex-wrap: wrap;
}

.catalog-card__actions {
  flex: 0 0 390px;
  width: 390px;
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  border-left: 1px solid #f0f0f0;
}

@media (max-width: 991px) {
  .catalog-card__actions {
    flex: 1 1 100%;
    width: auto;
    border-left: 0;
    border-top: 1px solid #f0f0f0;
  }
}

.master-add-queue .order-form {
  max-width: 460px;
}

/* ---- Sipariş biçimi bileşeni (.order-form) — sahibin 1b tasarımı, ölçüler canvas'tan ---- */
.order-form {
  --of-ink: #1e2a4a; --of-line: #e3e1dc; --of-tint: #f2f6f0; --of-muted: #9a9a94;
  display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px;
  width: 100%; min-width: 0; font-size: 0.8rem;
}
.order-form__seg { display: flex; gap: 6px; flex: 1 1 210px; min-width: 210px; }
/* İki satırlı düzen (`order-form--stacked`, ürün sayfası — sahip isteği 2026-09-14): üstte biçim
 * çipleri tam satır, altta miktar kutusu + CTA yan yana (ikisi de esner, 460px'te ≈256/196). */
.order-form--stacked .order-form__seg { flex: 1 1 100%; min-width: 0; }
.order-form__format {
  flex: 1 1 0; min-width: 0; margin: 0; position: relative;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--of-line); border-radius: 8px; background: #fff;
  padding: 0 8px; min-height: 38px; cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.order-form__format input { position: absolute; opacity: 0; width: 0; height: 0; }
.order-form__title {
  font-size: 0.75rem; font-weight: 600; color: #7a7a74; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Seçili çip: JS `is-sel` sınıfı + (JS'siz yedek) :has(). AYRI kurallar — bir seçici listesinde
   tanınmayan :has() tüm kuralı düşürür, is-sel de onunla giderdi. */
.order-form__format.is-sel { border-color: var(--cl-primary); background: var(--of-tint); }
.order-form__format:has(input:checked) { border-color: var(--cl-primary); background: var(--of-tint); }
.order-form__format.is-sel .order-form__title { color: var(--cl-primary); }
.order-form__format:has(input:checked) .order-form__title { color: var(--cl-primary); }
.order-form__format:has(input:focus-visible) { outline: 2px solid var(--cl-primary-dark); outline-offset: 2px; }
.order-form__format--static { cursor: default; }
.order-form__qty {
  display: flex; align-items: center; gap: 6px; flex: 1 1 190px; min-width: 190px; height: 38px;
  border: 1px solid var(--of-line); border-radius: 9px; background: #fff; padding: 0 6px;
}
.order-form__step {
  width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--of-line); background: #fff;
  color: var(--of-ink); font-size: 0.8rem; font-weight: 600; line-height: 1; cursor: pointer; flex: none;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.order-form__step:hover { background: #f6f5f2; }
.order-form__input {
  flex: 1 1 0; min-width: 0; width: 100%; border: 0; padding: 0; background: transparent; outline: none;
  font-size: 0.8rem; font-weight: 600; color: var(--of-ink); text-align: center;
  -moz-appearance: textfield;
}
.order-form__input::-webkit-outer-spin-button, .order-form__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.order-form__input:focus { box-shadow: 0 1px 0 var(--cl-primary); }
.order-form__unit { flex: none; font-size: 0.7rem; font-weight: 500; color: var(--of-muted); white-space: nowrap; }
.order-form__cta {
  flex: 1 1 130px; display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 38px; padding: 0 16px; border: 0; border-radius: 9px;
  background: var(--cl-primary); color: #fff; font-size: 0.8rem; font-weight: 600;
  white-space: nowrap; cursor: pointer; transition: background 0.15s;
}
.order-form__cta:hover { background: var(--cl-primary-dark); }
.order-form__cta:active { background: var(--cl-primary-active); }

@media (max-width: 640px) {
  .catalog-card {
    flex-direction: column;
  }
  .catalog-card__media,
  .catalog-card__img {
    flex: 0 0 auto;
    width: 100%;
    height: 200px;
  }
  .catalog-card__actions {
    flex: 0 0 auto;
    width: auto;
    border-left: none;
    border-top: 1px solid #f0f0f0;
  }
}

/* --- Pagination --- */

.catalog-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2.5rem;
  padding: 1.5rem 0 0.5rem;
  border-top: 1px solid var(--cl-border);
}

.catalog-pagination__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 1.2rem;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--cl-primary);
  color: var(--cl-primary);
  background: #fff;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

.catalog-pagination__btn:hover {
  background: var(--cl-primary);
  color: #fff;
}

.catalog-pagination__btn--disabled {
  border-color: var(--cl-border);
  color: var(--cl-text-dim);
  cursor: default;
  pointer-events: none;
}

.catalog-pagination__btn--disabled:hover {
  background: #fff;
  color: var(--cl-text-dim);
}

.catalog-pagination__info {
  font-size: 0.9rem;
  color: var(--cl-text-muted);
  min-width: 5rem;
  text-align: center;
}

@media (max-width: 480px) {
  .catalog-pagination__btn {
    padding: 0.5rem 0.85rem;
    font-size: 0.85rem;
  }
}

.catalog-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: #777;
}

/* --- Error pages (404) --- */

.error-page {
  max-width: 720px;
  margin: 3rem auto;
  text-align: center;
  padding: 2rem 1rem;
}

.error-page__code {
  font-size: 6rem;
  font-weight: 700;
  color: var(--cl-primary);
  line-height: 1;
  margin-bottom: 0.5rem;
  letter-spacing: -0.05em;
}

.error-page h1 {
  margin: 0 0 1rem;
  font-size: 1.75rem;
}

.error-page p {
  color: #555;
  margin: 0 auto 2rem;
  max-width: 480px;
}

.error-page__actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.catalog-results-count {
  margin: 0 0 1rem;
  font-size: 0.85rem;
  color: #666;
}

/* --- Master detail header --- */

.master-header {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
  align-items: start;
}

.master-header__img {
  width: 100%;
  height: auto;
  min-height: 320px;
  max-height: 480px;
  border-radius: 10px;
  object-fit: cover;
}

.master-header__img--placeholder {
  background: var(--cl-primary-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}

.master-header__leaf {
  width: 55%;
  height: auto;
  max-width: 220px;
  color: var(--cl-primary);
  opacity: 0.4;
}

.master-header__text {
  flex: 1 1 320px;
}

.master-header__text h1 {
  font-size: 1.75rem;
  margin-top: 0;
  margin-bottom: 0.25rem;
  line-height: 1.2;
}

.master-header__sci {
  color: var(--cl-text-faint);
  font-size: 1.05rem;
  margin-bottom: 1.25rem;
}

/* Single unified panel that wraps the title, scientific name,
   documents, product info and add-to-queue into one card. */
.master-panel {
  background: var(--cl-bg);
  border: 1px solid var(--cl-border);
  border-radius: 12px;
  padding: 1.5rem;
  overflow: hidden;
}

.master-panel h1 { margin-top: 0; }

/* Make every nested section render flush inside the panel:
   no own border/background, separator handled by border-top. */
.master-panel > section {
  margin: 1.25rem 0 0;
  padding: 1.25rem 0 0;
  border: 0;
  border-top: 1px solid var(--cl-border);
  border-radius: 0;
  background: transparent;
}

/* Unified section heading style — applies to docs (h3), info (h2),
   add-to-queue (h2). All three speak the same visual language. */
.master-panel > section > h2,
.master-panel .master-docs__title,
.master-panel .master-tags-section__title {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cl-text-meta);
  font-weight: 600;
}

/* Tag chips — marketing-curated attributes (Vegan, Antioxidant, etc.).
   Lives inside the master-panel below the add-to-queue block. */

.master-tags-section {
  /* Render flush with the panel divider — same rule that handles docs/info/queue. */
}

.master-tags-section__title {
  margin: 0 0 0.6rem;
}

.master-tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.master-tag {
  display: inline-block;
  padding: 0.1rem 0.35rem;
  border-radius: 999px;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: var(--cl-bg-tint);
  color: var(--cl-text-meta);
  border: 1px solid var(--cl-border);
}

/* Category-based colors — keyed to semantic meaning. */
.master-tag--effect         { background: #e3f2fd; color: #1565c0; border-color: #e3f2fd; } /* mavi — biyolojik etki */
.master-tag--cosmetic_use   { background: #fce4ec; color: #880e4f; border-color: #fce4ec; } /* pembe — kozmetik */
.master-tag--certification  { background: #fff3e0; color: #a63c00; border-color: #fff3e0; } /* amber — sertifika/kalite */
.master-tag--sustainability { background: #e8f5e9; color: #1b5e20; border-color: #e8f5e9; } /* yeşil — sürdürülebilirlik */
.master-tag--other          { background: #f5f5f5; color: #555;    border-color: #f5f5f5; } /* nötr */

/* Documents (specification + MSDS) directly under master name */

.master-docs {
  margin-top: 0.5rem;
  padding: 1rem;
  background: var(--cl-bg-tint);
  border: 1px solid var(--cl-border);
  border-radius: 8px;
}


.master-docs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.master-docs__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.75rem;
  background: var(--cl-bg);
  border: 1px solid var(--cl-border);
  border-radius: 6px;
  color: var(--cl-text-muted);
  text-decoration: none;
  font-size: 0.9rem;
  transition: background 0.15s;
}

.master-docs__link:hover:not(.master-docs__link--placeholder) {
  background: var(--cl-primary-soft);
  color: var(--cl-primary);
  border-color: var(--cl-primary-soft);
}

.master-docs__link--placeholder {
  opacity: 0.65;
  cursor: not-allowed;
}

.master-docs__badge {
  margin-left: auto;
  padding: 0.1rem 0.55rem;
  background: var(--cl-border);
  color: var(--cl-text-meta);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Gallery — additional master images, lightbox-clickable */

.master-gallery {
  margin: 2.5rem 0;
}

.master-gallery__title {
  font-size: 1.25rem;
  margin: 0 0 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cl-text-meta);
  font-weight: 600;
}

.master-gallery__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.75rem;
}

.master-gallery__item {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 8px;
  position: relative;
}

.master-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}

.master-gallery__item:hover img {
  transform: scale(1.04);
}

/* Description block below the master header */

.master-description {
  margin: 2.5rem 0;
  padding-top: 1rem;
  border-top: 1px solid var(--cl-border);
}

/* Product Information block — sits inside the right column under documents */

.master-info {
  margin: 1rem 0 0;
  padding: 1.25rem 1.5rem;
  background: var(--cl-bg);
  border: 1px solid var(--cl-border);
  border-radius: 10px;
}

.master-info__list {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.6rem 1.5rem;
}

.master-info__row {
  display: contents;
}

.master-info__row dt {
  font-weight: 600;
  color: var(--cl-text-meta);
  font-size: 0.85rem;
  align-self: start;
}

.master-info__row dd {
  margin: 0;
  color: var(--cl-text);
  font-size: 0.95rem;
  word-break: break-word;
}

.master-info__sub {
  color: var(--cl-text-faint);
  font-size: 0.85rem;
}

/* Add-to-Queue separate block — sits beneath the Product Information block */

.master-add-queue {
  margin: 0.75rem 0 0;
  padding: 1.25rem 1.5rem;
  background: var(--cl-primary-soft);
  border-radius: 10px;
}

/* Sıra bloğunun satırı artık .order-form (biçim · miktar · CTA tek satır, dar yerde sarar);
 * eski kg kutusu/buton kuralları kaldırıldı (2026-09-14). */

/* Variant table qty cell — match catalog list compact look */

.variant-table__qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--cl-divider-faint);
  border-radius: 6px;
  background: var(--cl-bg);
  overflow: hidden;
  margin-right: 0.5rem;
  vertical-align: middle;
}

.variant-table__qty-input {
  border: 0;
  padding: 0.3rem 0.45rem;
  font-size: 0.9rem;
  width: 64px;
  outline: none;
  background: transparent;
}

.variant-table__qty-unit {
  padding: 0 0.5rem;
  color: var(--cl-text-meta);
  font-size: 0.8rem;
  font-weight: 600;
  border-left: 1px solid var(--cl-border);
}

.master-description h2 {
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
}

.master-description__body {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--cl-text);
}

.master-header__description {
  font-size: 1rem;
  line-height: 1.6;
  color: #333;
}

/* --- Variant table --- */

.variant-section h2 {
  margin-bottom: 1rem;
}

.variant-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
}

.variant-table thead {
  background: #f5f5f5;
}

.variant-table th,
.variant-table td {
  padding: 0.85rem 1rem;
  text-align: left;
  border-bottom: 1px solid #eee;
  vertical-align: top;
}

.variant-table tr:last-child td {
  border-bottom: none;
}

.variant-table__inci {
  display: block;
  color: #555;
  font-size: 0.8rem;
}

.variant-table__cas {
  display: block;
  color: #6f6f6f;
  font-size: 0.78rem;
  margin-top: 2px;
}

.variant-table__composition {
  display: block;
  font-size: 0.78rem;
  color: #6f6f6f;
  font-weight: 400;
  margin-top: 2px;
}

.btn-add-cart {
  background: var(--cl-primary);
  color: #fff;
  padding: 0.55rem 1.1rem;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.btn-add-cart:hover { background: var(--cl-primary-dark); }

.sector-chip {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  background: var(--cl-primary-soft);
  color: var(--cl-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: 0.3rem;
}

.variant-empty {
  padding: 2rem;
  text-align: center;
  color: #777;
  background: #f8f8f8;
  border-radius: 8px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* --- Mobile (<= 768px) --- */

@media (max-width: 768px) {
  .catalog-filters {
    flex-direction: column;
    align-items: stretch;
    padding: 1rem;
  }

  /* Stacked layout: put labels back in flow so they don't overlap. */
  .catalog-filters__field > span {
    position: static;
    margin-bottom: 0.25rem;
  }

  .master-header {
    grid-template-columns: 1fr;
  }

  .master-header__img {
    width: 100%;
    min-height: 240px;
  }

  /* Tablo → kart layout */
  .variant-table thead {
    display: none;
  }

  .variant-table,
  .variant-table tbody,
  .variant-table tr,
  .variant-table td {
    display: block;
    width: 100%;
  }

  .variant-table tr {
    margin-bottom: 1rem;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 0.75rem;
  }

  .variant-table td {
    padding: 0.4rem 0;
    border: none;
  }

  .variant-table td[data-label]::before {
    content: attr(data-label) " — ";
    font-weight: 600;
    color: #555;
  }

  .variant-table__action {
    margin-top: 0.5rem;
  }

  .btn-add-cart {
    width: 100%;
  }
}

/* =====================================================================
 * Cart — D4b.1.B: navbar inline trigger + body-level overlay panel
 * ===================================================================== */

.cart-fab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  border: none;
  border-radius: 6px;
  background: var(--cl-primary);
  color: #fff;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.15s;
}

.cart-fab:hover { background: var(--cl-primary-dark); }

/* Navbar CTA buttons (B2B / Message / Cart) — uniform height & alignment.
 * The three buttons used three different sizing mechanisms (inline style,
 * Bootstrap .btn defaults, .cart-fab), so they rendered at different heights
 * and the row looked misaligned — most visible on longer RU labels.
 * Loaded after bootstrap.min.css; class+element specificity beats .btn. */
a.navbar-cta,
button.navbar-cta,
.cart-fab.navbar-cta {
  height: 38px;
  min-height: 38px;
  padding: 0 0.9rem;
  font-size: 0.875rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border-radius: 6px;
  box-sizing: border-box;
  white-space: nowrap;
}

.cart-fab__badge {
  position: absolute;
  top: -6px;
  right: -8px;
  background: var(--cl-danger);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cart-badge--hidden { display: none; }

/* Üst bardaki mobil sepet düğmesi — _header2.html, `d-lg-none`.
 * Navbar'daki `.cart-fab` <992px'te collapse'ın içinde kalıyor; ziyaretçi ürün
 * ekleyince hamburger'i açmadan göremiyordu (2026-08-10). Bu ikinci tetikleyici
 * dil seçicinin yanında duruyor.
 * Ölçüler `#top-social` hücreleriyle aynı (--cnvs-topbar-cell × --cnvs-topbar-height,
 * _base2.html üst bar bloğu) ki üst bar tek sıra kalsın ve komşu ikonlarla hizalansın.
 * İkon boyu: fa-flask-vial em kutusunun tamamını dolduruyor (1em), komşu marka
 * ikonları .875em — aynı .875 çarpanıyla mürekkep yüksekliği eşitlenir. */
.topbar-cart {
  position: relative;            /* rozet buna göre konumlanır */
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--cnvs-topbar-cell, 50px);
  height: var(--cnvs-topbar-height, 34px);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cnvs-topbar-social-icon-color, #fff);
  font-size: calc(var(--cnvs-topbar-icon-size, 1.4rem) * .875);
  cursor: pointer;
}

.topbar-cart:hover,
.topbar-cart:focus-visible { background: rgba(255, 255, 255, 0.15); }

/* `.cart-fab__badge` rozeti bilerek dışarı taşırıyor (top:-6px/right:-8px) —
 * 34px'lik üst barda o taşma kesilir, rozet içeri alınıp küçültülür. */
.topbar-cart .cart-fab__badge {
  top: 1px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 0.62rem;
}

.cart-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: min(420px, 100vw);
  height: 100vh;
  background: #fff;
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.15);
  z-index: 998;
  display: none;
  flex-direction: column;
  overflow: hidden;
  transform: translateX(100%);
  transition: transform 0.25s ease;
}

.cart-panel--open {
  display: flex;
  transform: translateX(0);
}

.cart-panel__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid #eee;
  background: #f8faf6;
}

.cart-panel__head h2 {
  margin: 0;
  font-size: 1.05rem;
}

.cart-panel__close {
  background: none;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  color: #666;
  padding: 0.25rem 0.5rem;
}

.cart-panel__lines {
  list-style: none;
  margin: 0;
  padding: 0.5rem 0;
  overflow-y: auto;
  flex: 1;
}

.cart-empty {
  padding: 2rem 1rem;
  text-align: center;
  color: #6f6f6f;
  margin: 0;
}

.cart-line {
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid #f3f3f3;
}

.cart-line:last-child { border-bottom: none; }

.cart-line__name {
  display: block;
  font-size: 0.95rem;
  line-height: 1.25;
  margin-bottom: 0.35rem;
  /* Uzun ürün isimleri tek satır; taşarsa ... ile kesilir, tam isim title'da. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cart-line__remove {
  flex: 0 0 auto;
  background: var(--cl-danger-soft);
  border: 1px solid var(--cl-danger-border);
  color: var(--cl-danger-text);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.15rem 0.55rem;
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
}

.cart-line__remove:hover {
  background: var(--cl-danger);
  color: #fff;
  border-color: var(--cl-danger);
}

/* Tek satır: [SKU | miktar | birim | sil] — drawer ve inquiry sayfası ortak. */
.cart-line__row,
.inquiry-line__row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cart-line__code {
  font-size: 0.75rem;
  color: #6f6f6f;
  font-family: monospace;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cart-line__row input[type="number"],
.inquiry-line__row input[type="number"] {
  width: 5.5rem;
  flex: 0 0 auto;
  padding: 0.4rem 0.6rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.9rem;
}

.cart-line__row select,
.inquiry-line__row select {
  width: auto;
  flex: 0 0 auto;
  padding: 0.4rem 0.6rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  font-size: 0.9rem;
}

.cart-panel__foot {
  padding: 1rem;
  border-top: 1px solid #eee;
  background: #fafafa;
}

.cart-panel__cta {
  display: block;
  background: var(--cl-primary);
  color: #fff;
  padding: 0.7rem;
  text-align: center;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
}

.cart-panel__cta[disabled] {
  background: #aaa;
  pointer-events: none;
  opacity: 0.7;
}

.cart-panel__note {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: #6f6f6f;
  text-align: center;
}

.cart-toast {
  position: fixed;
  bottom: 5.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--cl-primary);
  color: #fff;
  padding: 0.7rem 1.2rem;
  border-radius: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  font-size: 0.9rem;
  opacity: 0;
  transition: opacity 0.25s, transform 0.25s;
  z-index: 1000;
  pointer-events: none;
}

.cart-toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.cart-toast--error {
  background: #b3261e;
}

/* =====================================================================
 * Inquiry form — D6
 * ===================================================================== */

.inquiry-page,
.inquiry-success {
  max-width: 760px;
  margin: 2rem auto;
  padding: 0 1rem;
}

.inquiry-header h1 {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
}

.inquiry-tagline {
  color: #555;
  margin-bottom: 1.5rem;
}

.inquiry-error {
  background: #fef7f5;
  border: 1px solid var(--cl-danger);
  border-radius: 6px;
  padding: 0.85rem 1rem;
  margin-bottom: 1.5rem;
  color: #6b2010;
}

.inquiry-error strong { display: block; margin-bottom: 0.2rem; }
.inquiry-error p { margin: 0; }

.inquiry-session {
  background: #f3f7fb;
  border: 1px solid #cfd8e3;
  border-radius: 6px;
  padding: 0.7rem 1rem;
  margin-bottom: 1.25rem;
  font-size: 0.95rem;
  color: #2c4258;
}
.inquiry-session__login {
  color: var(--cl-primary, #126);
  font-weight: 600;
  text-decoration: underline;
  margin-left: 0.4rem;
}
.inquiry-session__user strong { color: #19324a; }

.inquiry-fieldset {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 1rem 1.25rem 1.25rem;
  margin-bottom: 1.5rem;
}

.inquiry-fieldset legend {
  padding: 0 0.5rem;
  font-weight: 600;
  color: var(--cl-primary);
}

.inquiry-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 0.85rem;
}

.inquiry-row__single { display: block; margin-bottom: 0.85rem; }

.inquiry-form label > span {
  display: block;
  font-size: 0.85rem;
  color: #555;
  margin-bottom: 0.25rem;
}

.inquiry-form input[type="text"],
.inquiry-form input[type="email"],
.inquiry-form input[type="tel"],
.inquiry-form select,
.inquiry-form textarea {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 0.95rem;
  font-family: inherit;
}

.inquiry-form textarea { resize: vertical; min-height: 80px; }

/* Telefon ülke kodu seçici (_phone_cc.html) — `label > span{display:block}`
   label-metni kuralı ve `select{width:100%}` bu sarmalayıcıyı dikeye
   kırıyordu; inquiry'ye özel, daha yüksek specificity ile düzelt. */
.inquiry-form label > span.phone-field {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0;
}

.inquiry-form .phone-field select {
  width: auto;
  max-width: 10.5rem;   /* bayrak dolgusu (+2.1rem) eklendi */
  flex: 0 0 auto;
}

.inquiry-form .phone-field input[type="tel"] {
  flex: 1 1 auto;
  min-width: 0;
}

.inquiry-cart {
  list-style: none;
  margin: 0;
  padding: 0;
}

.inquiry-line {
  padding: 0.75rem 0;
  border-bottom: 1px solid #f3f3f3;
}

.inquiry-line:last-child { border-bottom: none; }

.inquiry-cart__back-link {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.3rem 0.85rem;
  background: var(--cl-warning);
  color: #fff;
  border-radius: 4px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s;
}

.inquiry-cart__back-link:hover {
  background: var(--cl-warning-dark);
  color: #fff;
}

.inquiry-line__remove {
  flex: 0 0 auto;
  background: var(--cl-danger-soft);
  border: 1px solid var(--cl-danger-border);
  color: var(--cl-danger-text);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.15rem 0.55rem;
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
}

.inquiry-line__remove:hover {
  background: var(--cl-danger);
  color: #fff;
  border-color: var(--cl-danger);
}

.inquiry-line__name {
  display: block;
  margin-bottom: 0.35rem;
  /* Drawer ile aynı: uzun isim tek satır, taşarsa ... (tam isim title'da). */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inquiry-line__code {
  font-family: monospace;
  font-size: 0.8rem;
  color: #6f6f6f;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* `.inquiry-form select { width: 100% }` genel kuralını satır içinde ez. */
.inquiry-form .inquiry-line__row input[type="number"] {
  width: 5.5rem;
  flex: 0 0 auto;
}

.inquiry-form .inquiry-line__row select {
  width: auto;
  flex: 0 0 auto;
}

.inquiry-custom-note {
  margin: 1rem 0 0;
  font-size: 0.85rem;
  color: #666;
}

.inquiry-custom-note a {
  color: var(--cl-primary);
  font-weight: 600;
}

.inquiry-cart__hint,
.inquiry-cart__empty {
  margin: 0.75rem 0 0;
  font-size: 0.85rem;
  color: #666;
}

.cf-turnstile { margin-bottom: 1rem; }

.inquiry-submit {
  background: var(--cl-primary);
  color: #fff;
  padding: 0.85rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  width: 100%;
}

.inquiry-submit:hover:not([disabled]) { background: var(--cl-primary-dark); }

.inquiry-submit[disabled] {
  background: #aaa;
  cursor: not-allowed;
}

/* Submitting state — distinct from cart-empty disabled. Active loading
   colour stays brand-tinted so the user sees the action is underway. */
.inquiry-submit--loading[disabled] {
  background: var(--cl-primary);
  opacity: 0.7;
  cursor: progress;
  position: relative;
  padding-right: 3rem;
}

.inquiry-submit--loading[disabled]::after {
  content: '';
  position: absolute;
  right: 1.25rem;
  top: 50%;
  width: 1rem;
  height: 1rem;
  margin-top: -0.5rem;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: inquiry-submit-spin 0.7s linear infinite;
}

@keyframes inquiry-submit-spin {
  to { transform: rotate(360deg); }
}

.inquiry-disclaimer {
  font-size: 0.8rem;
  color: #777;
  margin-top: 1rem;
  text-align: center;
}

.inquiry-disclaimer a { color: var(--cl-primary); }

/* Success page */

.inquiry-success { text-align: center; padding-top: 3rem; }

.inquiry-success h1 { color: var(--cl-primary); }

.inquiry-success__ref {
  font-size: 1.1rem;
  margin: 1rem 0;
}

.inquiry-success__portal { margin: 1.5rem 0; word-break: break-all; }

.inquiry-success__back {
  display: inline-block;
  margin-top: 2rem;
  padding: 0.7rem 1.5rem;
  background: var(--cl-primary);
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
}

@media (max-width: 600px) {
  .inquiry-row { grid-template-columns: 1fr; }
}


/* --- "Daha fazla yükle" (catalog-more.js ile açılır) --- */

.catalog-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin: 2rem 0 1rem;
}

.catalog-more__btn {
  cursor: pointer;
  min-width: 12rem;
  justify-content: center;
}

.catalog-more__btn--busy { opacity: 0.6; cursor: progress; }

.catalog-more__status {
  margin: 0;
  font-size: 0.85rem;
  color: #777;
}

/* `hidden` özniteliği tek başına yetmez: bu iki seçicide açık `display` var ve
   onu yener — JS'siz kullanıcı ölü bir düğme, JS'li kullanıcı hem düğme hem
   sayfalama görürdü. */
.catalog-more__btn[hidden],
.catalog-pagination[hidden] { display: none; }