/* Otomatik: Tipografi ayarları kaydedilince üretilir — elle düzenlemeyin */
:root {
  --tg-body-font-family: 'Jost', sans-serif;
  --tg-heading-font-family: 'Jost', sans-serif;
  --tg-body-font-size: 16px;
  --tg-h1-font-size: 20px;
  --tg-h2-font-size: 32px;
  --tg-h3-font-size: 28px;
  --tg-h4-font-size: 24px;
  --tg-h5-font-size: 20px;
  --tg-h6-font-size: 16px;
  --tg-body-font-color: #252525;
  --tg-heading-font-color: #222222;
  --tg-tertiary-font-color: #ff6720;
  --ws-pro-font: 'Jost', sans-serif;
}

body {
  font-family: var(--tg-body-font-family);
  font-size: var(--tg-body-font-size);
  color: var(--tg-body-font-color);
}

p {
  font-family: var(--tg-body-font-family);
  font-size: var(--tg-body-font-size) !important;
  color: var(--tg-body-font-color);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--tg-heading-font-family);
  color: var(--tg-heading-font-color);
}

h1 { font-size: var(--tg-h1-font-size); }
h2 { font-size: var(--tg-h2-font-size); }
h3 { font-size: var(--tg-h3-font-size); }
h4 { font-size: var(--tg-h4-font-size); }
h5 { font-size: var(--tg-h5-font-size); }
h6 { font-size: var(--tg-h6-font-size); }

/* Tema bileşen başlıkları — sabit px yerine tipografi ölçeği */
.title,
.wl-featured__title,
.section-title .title,
.section-title-two .title,
.tg-section-title .title,
.shop-details-content > .title,
.breadcrumb-content .title,
.home-shop-content .title,
.home-shop-price,
.features-product-bottom .price,
.features-product-quantity {
  font-family: var(--tg-heading-font-family);
  color: var(--tg-heading-font-color);
}

.section-title .title,
.section-title-two .title,
.tg-section-title .title,
.wl-featured__title {
  font-size: var(--tg-h2-font-size);
}

.breadcrumb-content .title {
  font-size: calc(var(--tg-h1-font-size) * 1.5);
}

.banner-content .title,
.banner-content-two .title,
.tg-banner-content .title {
  font-family: var(--tg-heading-font-family);
  font-size: calc(var(--tg-h1-font-size) * 1.6667);
}

.shop-details-content > .title {
  font-size: var(--tg-h1-font-size);
}

/* Otomatik: Buton stilleri */
:root {
  --tg-btn-bg: #0d9b4d;
  --tg-btn-hover-bg: #faa432;
  --tg-btn-hover-solid: #0d9b4d;
  --tg-btn-color: #ffffff;
  --tg-btn-hover-color: #ffffff;
  --tg-btn-border-color: #0d9b4d;
  --tg-btn-border-hover-color: #faa432;
  --tg-btn-border-width: 0;
  --tg-btn-radius: 5px;
  --tg-btn-padding-y: 19px;
  --tg-btn-padding-x: 30px;
  --tg-btn-hover-before: block;
  --tg-btn-two-bg: #faa432;
  --tg-btn-two-hover-bg: #0d9b4d;
  --tg-btn-two-hover-solid: #0d9b4d;
  --tg-btn-two-color: #ffffff;
  --tg-btn-two-hover-color: #ffffff;
  --tg-btn-two-border-color: #faa432;
  --tg-btn-two-border-hover-color: #0d9b4d;
  --tg-btn-two-border-width: 0;
  --tg-btn-two-radius: 5px;
  --tg-btn-two-padding-y: 19px;
  --tg-btn-two-padding-x: 30px;
  --tg-btn-two-hover-before: none;
  --tg-btn-three-bg: #ffffff;
  --tg-btn-three-hover-bg: #0d9b4d;
  --tg-btn-three-hover-solid: #0d9b4d;
  --tg-btn-three-color: #222222;
  --tg-btn-three-hover-color: #ffffff;
  --tg-btn-three-border-color: #222222;
  --tg-btn-three-border-hover-color: #0d9b4d;
  --tg-btn-three-border-width: 1px;
  --tg-btn-three-radius: 5px;
  --tg-btn-three-padding-y: 12px;
  --tg-btn-three-padding-x: 20px;
  --tg-btn-three-hover-before: none;
}

.btn {
  background: var(--tg-btn-bg);
  color: var(--tg-btn-color);
  border: var(--tg-btn-border-width) solid var(--tg-btn-border-color);
  border-radius: var(--tg-btn-radius);
  padding: var(--tg-btn-padding-y) var(--tg-btn-padding-x);
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.btn:hover {
  background: var(--tg-btn-hover-solid);
  color: var(--tg-btn-hover-color);
  border-color: var(--tg-btn-border-hover-color);
}

.btn::before {
  background: var(--tg-btn-hover-bg);
  display: var(--tg-btn-hover-before);
}

.btn-two {
  background: var(--tg-btn-two-bg);
  color: var(--tg-btn-two-color);
  border: var(--tg-btn-two-border-width) solid var(--tg-btn-two-border-color);
  border-radius: var(--tg-btn-two-radius);
  padding: var(--tg-btn-two-padding-y) var(--tg-btn-two-padding-x);
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.btn-two:hover {
  background: var(--tg-btn-two-hover-solid);
  color: var(--tg-btn-two-hover-color);
  border-color: var(--tg-btn-two-border-hover-color);
}

.btn-two::before {
  background: var(--tg-btn-two-hover-bg);
  display: var(--tg-btn-two-hover-before);
}

.btn-three {
  background: var(--tg-btn-three-bg);
  color: var(--tg-btn-three-color);
  border: var(--tg-btn-three-border-width) solid var(--tg-btn-three-border-color);
  border-radius: var(--tg-btn-three-radius);
  padding: var(--tg-btn-three-padding-y) var(--tg-btn-three-padding-x);
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.btn-three:hover {
  background: var(--tg-btn-three-hover-solid);
  color: var(--tg-btn-three-hover-color);
  border-color: var(--tg-btn-three-border-hover-color);
}

.btn-three::before {
  background: var(--tg-btn-three-hover-bg);
  display: var(--tg-btn-three-hover-before);
}