/* ═══════════════════════════════════════════════════════════════
   Overdal Thickness Guide — kalınlık karşılaştırma paneli
   ═══════════════════════════════════════════════════════════════
   Seçenekler `OverdalThicknessOption` olarak editörden eklenir ve
   `IkasComponentRenderer` ile render edilir. Seçeneğin kendi CSS'i
   ayrı scope'ta; burada yalnızca panel ve grid hücresi verilir.

   Üç seçenek ayrı kart değil, tek panelin kolonlarıdır. Mobilde
   panelin satırlarına dönüşür ve aralarına 1px ayırıcı girer.
   Kolon sayısı JSX'ten gelen count modifier ile belirlenir.
   ═══════════════════════════════════════════════════════════════ */

.cc_kKHOfYr6vG_VT4iVTiGBL .od-thickness-guide {
  width: 100%;
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}

.cc_kKHOfYr6vG_VT4iVTiGBL .od-thickness-guide__container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 clamp(16px, 5vw, 80px);
}

/* ─── Başlık ───────────────────────────────────────────────── */

.cc_kKHOfYr6vG_VT4iVTiGBL .od-thickness-guide__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-lg);
  max-width: 760px;
}

.cc_kKHOfYr6vG_VT4iVTiGBL .od-thickness-guide__eyebrow {
  font-family: var(--font-label);
  font-size: var(--text-label);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.14em;
  color: var(--color-accent);
}

.cc_kKHOfYr6vG_VT4iVTiGBL .od-thickness-guide__title {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(28px, 5.5vw, 32px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-primary);
  overflow-wrap: break-word;
}

.cc_kKHOfYr6vG_VT4iVTiGBL .od-thickness-guide__description {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-text-secondary);
  overflow-wrap: break-word;
}

/* ─── Panel ────────────────────────────────────────────────── */

.cc_kKHOfYr6vG_VT4iVTiGBL .od-thickness-guide__panel {
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: var(--space-md);
}

.cc_kKHOfYr6vG_VT4iVTiGBL .od-thickness-guide__options {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.cc_kKHOfYr6vG_VT4iVTiGBL .od-thickness-guide__item {
  display: flex;
  min-width: 0;
  padding: var(--space-md) 0;
}

.cc_kKHOfYr6vG_VT4iVTiGBL .od-thickness-guide__item:first-child { padding-top: 0; }
.cc_kKHOfYr6vG_VT4iVTiGBL .od-thickness-guide__item:last-child { padding-bottom: 0; }

/* Mobilde seçenekler panelin satırları — aralarında ince ayırıcı. */
.cc_kKHOfYr6vG_VT4iVTiGBL .od-thickness-guide__item:not(:last-child) {
  border-bottom: 1px solid var(--color-border);
}

/* Renderer araya sarmalayıcı koyarsa hücre ölçüsünü geçirir. */
.cc_kKHOfYr6vG_VT4iVTiGBL .od-thickness-guide__item > * {
  width: 100%;
  height: 100%;
}

/* ─── CTA ──────────────────────────────────────────────────── */

.cc_kKHOfYr6vG_VT4iVTiGBL .od-thickness-guide__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* Dokunma hedefi minimum 44px. */
  min-height: 48px;
  padding: 0 22px;
  /* Panelin doğal devamı — kopuk durmasın. */
  margin-top: 28px;
  border: 1px solid var(--color-primary);
  border-radius: 10px;
  background-color: var(--color-primary);
  color: var(--color-surface);
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: background-color 200ms ease, border-color 200ms ease;
}

.cc_kKHOfYr6vG_VT4iVTiGBL .od-thickness-guide__cta:hover {
  border-color: var(--color-primary-hover);
  background-color: var(--color-primary-hover);
}

.cc_kKHOfYr6vG_VT4iVTiGBL .od-thickness-guide__cta:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.cc_kKHOfYr6vG_VT4iVTiGBL .od-thickness-guide__cta-icon {
  flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
  .cc_kKHOfYr6vG_VT4iVTiGBL .od-thickness-guide__cta { transition: none; }
}

/* ─── Tablet (≥768px) — 2 kolon ────────────────────────────── */

@media (min-width: 768px) {
  .cc_kKHOfYr6vG_VT4iVTiGBL .od-thickness-guide__header {
    margin-bottom: var(--space-xl);
  }

  .cc_kKHOfYr6vG_VT4iVTiGBL .od-thickness-guide__panel {
    padding: var(--space-lg);
  }

  .cc_kKHOfYr6vG_VT4iVTiGBL .od-thickness-guide__options {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg) var(--space-md);
  }

  /* Kolonlara geçince satır ayırıcıları kalkar; panel tek yüzey
   * olarak birleştirici görevi görür. */
  .cc_kKHOfYr6vG_VT4iVTiGBL .od-thickness-guide__item, .cc_kKHOfYr6vG_VT4iVTiGBL .od-thickness-guide__item:first-child, .cc_kKHOfYr6vG_VT4iVTiGBL .od-thickness-guide__item:last-child {
    padding: 0;
  }

  .cc_kKHOfYr6vG_VT4iVTiGBL .od-thickness-guide__item:not(:last-child) {
    border-bottom: none;
  }

  .cc_kKHOfYr6vG_VT4iVTiGBL .od-thickness-guide__title {
    font-size: 34px;
  }

  .cc_kKHOfYr6vG_VT4iVTiGBL .od-thickness-guide__cta {
    margin-top: 32px;
  }
}

/* ─── Masaüstü (≥1024px) — seçenek sayısına göre kolon ─────── */

@media (min-width: 1024px) {
  .cc_kKHOfYr6vG_VT4iVTiGBL .od-thickness-guide {
    padding-top: 76px;
    padding-bottom: 76px;
  }

  .cc_kKHOfYr6vG_VT4iVTiGBL .od-thickness-guide__title {
    font-size: 38px;
  }

  .cc_kKHOfYr6vG_VT4iVTiGBL .od-thickness-guide__description {
    font-size: var(--text-body-lg);
    line-height: 28px;
  }

  .cc_kKHOfYr6vG_VT4iVTiGBL .od-thickness-guide__panel {
    padding: 32px;
  }

  .cc_kKHOfYr6vG_VT4iVTiGBL .od-thickness-guide__options {
    gap: var(--space-lg) var(--space-md);
  }

  .cc_kKHOfYr6vG_VT4iVTiGBL .od-thickness-guide__options--one {
    grid-template-columns: minmax(0, 420px);
  }

  .cc_kKHOfYr6vG_VT4iVTiGBL .od-thickness-guide__options--two {
    grid-template-columns: repeat(2, 1fr);
  }

  .cc_kKHOfYr6vG_VT4iVTiGBL .od-thickness-guide__options--three {
    grid-template-columns: repeat(3, 1fr);
  }

  .cc_kKHOfYr6vG_VT4iVTiGBL .od-thickness-guide__options--four {
    grid-template-columns: repeat(4, 1fr);
  }

  /* 5+ seçenek: kolon 240px altına inmez, taşanlar alt satıra sarar. */
  .cc_kKHOfYr6vG_VT4iVTiGBL .od-thickness-guide__options--many {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
}