/**
 * Tutku — yeniden kullanılabilir toggle bileşeni (ŞABLON).
 * Tüm site genelinde aç/kapa anahtarları için bu stili kullan.
 *
 * Görünüm: açık zeminli, İNCE border + ince yazı; solda mini switch
 * (renkli yuva + beyaz nokta). AÇIK = yeşil yuva, KAPALI = kırmızı yuva.
 *
 * Markup:
 *   <button class="tutku-toggle is-off" role="switch">
 *     <span class="tutku-toggle__sw"><span class="tutku-toggle__dot"></span></span>
 *     <span class="tutku-toggle__txt">Etiket</span>
 *   </button>
 *   JS ile is-on / is-off değiştirilir.
 */
.tutku-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px 4px 5px;
  border: 1px solid #e2241a;          /* KAPALI: ince kırmızı border */
  border-radius: 999px;
  cursor: pointer;
  background: #fff;
  color: #c01d12;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 11px;
  font-weight: 500;                   /* ince yazı */
  line-height: 1;
  white-space: nowrap;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
  -webkit-appearance: none;
  appearance: none;
}

.tutku-toggle.is-on {
  border-color: #1a9d55;              /* AÇIK: ince yeşil border */
  color: #15803d;
}

/* Hover/focus'ta border-radius (ve genel form) DEĞİŞMESİN — sabit kalsın */
.tutku-toggle:hover,
.tutku-toggle:focus,
.tutku-toggle:active {
  border-radius: 999px !important;
  border-width: 1px !important;
  outline: none !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Mini switch: renkli yuva + beyaz nokta */
.tutku-toggle__sw {
  position: relative;
  width: 22px;
  height: 12px;
  border-radius: 999px;
  background: #e2241a;                /* KAPALI: kırmızı yuva */
  flex: 0 0 auto;
  transition: background .18s ease;
}
.tutku-toggle.is-on .tutku-toggle__sw {
  background: #1a9d55;                /* AÇIK: yeşil yuva */
}
.tutku-toggle__dot {
  position: absolute;
  top: 1.5px;
  left: 1.5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff;                   /* beyaz nokta */
  transition: left .18s ease;
}
.tutku-toggle.is-on .tutku-toggle__dot {
  left: 11.5px;                       /* açıkta sağa kayar */
}

.tutku-toggle__txt { pointer-events: none; }
.tutku-toggle[disabled] { opacity: .55; cursor: wait; }