/* === kaynak: components.css 2768-4521 (BOLUM 9+: micro-interactions, analytics, legacy) - Z-2 sprint === */

   BOLUM 9: MICRO-INTERACTIONS & UX POLISH
   ═══════════════════════════════════════════════════════════════════ */

/* ── 9B: Toast Notification Animations ── */
.th-toast,
[role="status"],
.th-pdp__toast {
  animation: th-toast-in 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.th-toast.hiding,
.th-pdp__toast.hiding {
  animation: th-toast-out 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes th-toast-in {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes th-toast-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(-8px) scale(0.96); }
}

/* ── 9C: Smooth Collapsible/Accordion Transitions ── */
.th-collapse {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.25s ease;
}
.th-collapse.open {
  max-height: 2000px;
  opacity: 1;
}

/* ── 9E: WhatsApp Footer Icon ── */
.tf2-c-icon--whatsapp { color: var(--th-whatsapp-bg); }

/* ── 9F: Checkbox/Radio Transitions ── */
input[type="checkbox"],
input[type="radio"] {
  transition: box-shadow 0.15s ease;
}
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--th-color-primary) 20%, transparent);
}

/* ── 9G: Smooth Image Load Fade-in ── */
.th-card__image img,
.tilbe-anasayfa01-image img {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.th-card__image img.loaded,
.tilbe-anasayfa01-image img.loaded,
.th-card__image img[src],
.tilbe-anasayfa01-image img[src] {
  opacity: 1;
}

/* ── 9H: Button Press Feedback ── */
.th-btn:active,
button:active {
  transform: scale(0.97);
  transition: transform 0.1s ease;
}

/* ── 9I: Link Underline Animation ── */
.th-card__body:hover .th-card__title {
  text-decoration-color: var(--th-color-primary);
}

/* ── 9J: Focus Ring for Carousel Indicators ── */
.carousel-indicators li:focus-visible {
  outline: 2px solid var(--th-color-primary);
  outline-offset: 2px;
  border-radius: var(--th-radius-circle);
}

/* ═══════════════════════════════════════════════════════════════════
   BOLUM 10: ANALYTICS DEBUG PANEL
   Activate: ?th_debug=1 or Ctrl+Shift+A
   ═══════════════════════════════════════════════════════════════════ */

.th-ap {
  position: fixed;
  bottom: var(--th-space-4);
  right: var(--th-space-4);
  width: 380px;
  max-height: 520px;
  background: var(--th-neutral-900);
  color: var(--th-neutral-300);
  border-radius: var(--th-radius-xl);
  box-shadow: var(--th-shadow-xl);
  z-index: var(--th-z-max);
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: var(--th-text-xs-plus);
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  overflow: hidden;
}
.th-ap--visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.th-ap__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--th-space-2-5) var(--th-space-3-5);
  background: var(--th-neutral-900);
  cursor: move;
  user-select: none;
  border-bottom: 1px solid color-mix(in srgb, var(--th-neutral-0) 8%, transparent);
}
.th-ap__title {
  font-weight: var(--th-font-bold);
  font-size: var(--th-text-sm);
  color: var(--th-cyan-400);
  letter-spacing: 0.5px;
}
.th-ap__actions { display: flex; gap: var(--th-space-1-5); }
.th-ap__btn {
  background: color-mix(in srgb, var(--th-neutral-0) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--th-neutral-0) 12%, transparent);
  color: var(--th-neutral-400);
  padding: var(--th-space-0-5) var(--th-space-2-5);
  border-radius: var(--th-radius-sm);
  font-size: var(--th-text-xs);
  cursor: pointer;
  min-height: 24px;
  min-width: auto;
}
.th-ap__btn:hover { background: color-mix(in srgb, var(--th-neutral-0) 15%, transparent); color: var(--th-color-text-inverse); }
.th-ap__btn--close { font-size: var(--th-text-md); padding: 0 var(--th-space-1-5); }

.th-ap__metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: color-mix(in srgb, var(--th-neutral-0) 5%, transparent);
  padding: var(--th-space-2) var(--th-space-3);
}
.th-ap__metric { text-align: center; }
.th-ap__metric-val {
  display: block;
  font-size: var(--th-text-lg);
  font-weight: var(--th-font-bold);
  color: var(--th-color-text-inverse);
  line-height: 1.2;
}
.th-ap__metric-lbl {
  display: block;
  font-size: var(--th-text-2xs);
  color: var(--th-neutral-400);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.th-ap__perf {
  display: flex;
  gap: var(--th-space-3);
  padding: var(--th-space-1-5) var(--th-space-3-5);
  font-size: var(--th-text-xs);
  color: var(--th-neutral-500);
  border-bottom: 1px solid color-mix(in srgb, var(--th-neutral-0) 6%, transparent);
}

.th-ap__log-header {
  padding: var(--th-space-1-5) var(--th-space-3-5);
  font-size: var(--th-text-xs);
  font-weight: var(--th-font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--th-neutral-500);
}

.th-ap__log {
  list-style: none;
  margin: 0;
  padding: 0 var(--th-space-2) 8px;
  overflow-y: auto;
  flex: 1;
  max-height: 280px;
  scrollbar-width: thin;
  scrollbar-color: var(--th-neutral-700) transparent;
}

.th-ap__log-item {
  display: flex;
  align-items: center;
  gap: var(--th-space-2);
  padding: var(--th-space-1) 6px;
  border-radius: var(--th-radius-md);
  flex-wrap: wrap;
  animation: th-ap-fadein 0.3s ease;
}
.th-ap__log-item:hover { background: color-mix(in srgb, var(--th-neutral-0) 4%, transparent); }

.th-ap__log-time {
  font-size: var(--th-text-2xs);
  color: var(--th-neutral-600);
  flex-shrink: 0;
  width: 50px;
}

.th-ap__badge {
  display: inline-block;
  padding: var(--th-space-0-5) var(--th-space-2);
  border-radius: var(--th-radius-sm);
  font-size: var(--th-text-2xs);
  font-weight: var(--th-font-semibold);
  background: var(--th-neutral-800);
  color: var(--th-neutral-200);
  text-transform: lowercase;
}
.th-ap__badge--cart { background: var(--th-emerald-500); color: var(--th-color-text-inverse); }
.th-ap__badge--checkout { background: var(--th-violet-500); color: var(--th-color-text-inverse); }
.th-ap__badge--view { background: var(--th-blue-500); color: var(--th-color-text-inverse); }

.th-ap__log-count {
  font-size: var(--th-text-2xs);
  color: var(--th-neutral-500);
  flex-shrink: 0;
}

.th-ap__log-detail {
  font-size: var(--th-text-2xs);
  color: var(--th-neutral-400);
  width: 100%;
  padding-left: 58px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@keyframes th-ap-fadein {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}

@media (max-width: 576px) {
  .th-ap { width: calc(100% - 16px); right: var(--th-space-2); bottom: var(--th-space-2); max-height: 400px; }
}

@media print { .th-ap { display: none !important; } }


/* === legacy.css'ten tasindi: 2A — Bundle Box === */
/* =========================
   BUNDLE BOX
========================= */
/* =========================
   PAKETLER
========================= */
.bundle-badge {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    font-size: var(--th-text-2xs);
    padding: 1px var(--th-space-2-5);
    border-radius: var(--th-radius-xl);
    background: var(--th-color-bg-secondary);
    color: var(--th-neutral-400);
    font-weight: var(--th-font-medium);

    white-space: nowrap;
}

/* =========================
   ALT ÖZET ALANI
========================= */
.bundle-summary {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    border: 1px solid var(--th-color-border);
    border-radius: var(--th-radius-lg);
    padding: var(--th-space-1) 14px;
    font-size: var(--th-text-xs-plus);
    background: var(--th-color-bg);
}

/* =========================
   ADET ALANI (BUNDLE İÇİ)
========================= */
/* − ve + → YUVARLAK */
.qty-btn {
    width: 26px;
    height: 26px;
    border: 1px solid var(--th-color-border-strong);
    border-radius: var(--th-radius-full);
    background: var(--th-color-bg);
    cursor: pointer;
    font-size: var(--th-text-base-plus);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--th-color-text);
}

.qty-btn:hover {
    border-color: var(--th-color-accent);
    color: var(--th-color-accent);
}

/* ORTA INPUT KUTUSU */
/* =========================
   MOBİL
========================= */
@media (max-width: 768px) {

    .bundle-summary {
        grid-template-columns: 1fr;
        gap: var(--th-space-2-5);
    }

}

/* Satırlar */

/* İkonlar – sakin */

/* Sayaç satırı */

/* Geri planda */
/* Ayırıcı */

.qsf-topbar {
    display: flex;
    align-items: center;
    gap: var(--th-space-2-5);
    flex-wrap: wrap;
    margin: var(--th-space-4) 0 18px;
}

/* Ürün sayısı */
.qsf-result-count {
    font-size: var(--th-text-base);
    color: var(--th-color-text-secondary);
    margin-right: var(--th-space-2);
    white-space: nowrap;
}

.qsf-result-count strong {
    font-weight: var(--th-font-semibold);
    color: var(--th-color-text);
}


/* === legacy.css'ten tasindi: 2G — Trust Bar (fsale) === */
/* =========================
   Trendyol-Style Trust Bar (Legacy Safe)
   ========================= */

/* Tablet: 2 satıra böl (3 + 2) */

/* Mobil: Trendyol gibi yatay kaydırmalı şerit */

/* scrollbar sade (opsiyonel) */

    /* ════════════════════════════════════
       BANNER
    ════════════════════════════════════ */
    .fsale {
      position: relative;
      width: 100%;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      padding: var(--th-space-5) 25px 44px 25px;
      gap: 0;
      background: linear-gradient(90deg, var(--th-red-500) 0.31%, transparent 98.86%);
    }

    @keyframes fsale-in {
      from { opacity: 0; transform: translateY(10px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .fsale::before {
      content: "";
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent 5%, color-mix(in srgb, var(--th-neutral-0) 45%, transparent) 50%, transparent 95%);
      z-index: 2;
    }

    .fsale::after {
      content: "";
      position: absolute;
      width: 300px; height: 300px;
      border-radius: var(--th-radius-full);
      background: color-mix(in srgb, var(--th-neutral-0) 6%, transparent);
      bottom: -140px; right: -100px;
      pointer-events: none;
    }

    /* ── CANLI BADGE ── */
    .fsale__badge {
      position: absolute;
      top: var(--th-space-3-5); right: var(--th-space-4);
      display: flex;
      align-items: center;
      gap: var(--th-space-1);
      background: color-mix(in srgb, var(--th-red-500) 87%, transparent);
      border: 1px solid color-mix(in srgb, var(--th-neutral-0) 22%, transparent);
      border-radius: var(--th-radius-full);
      padding: var(--th-space-1) 10px 4px 7px;
      z-index: 3;
    }

    .fsale__badge-dot {
      width: 7px; height: 7px;
      border-radius: var(--th-radius-full);
      background: var(--th-color-bg);
      flex-shrink: 0;
      animation: fsale-blink 1.9s ease-in-out infinite;
    }

    @keyframes fsale-blink {
      0%,100% { opacity: 1; }
      50%      { opacity: .22; }
    }

    .fsale__badge-text {
      font-size: var(--th-text-2xs);
      font-weight: var(--th-font-bold);
      letter-spacing: .6px;
      text-transform: uppercase;
      color: var(--th-color-text-inverse);
    }

    /* ── DEKORATİF ŞİMŞEK ── */
    .fsale__deco {
      position: absolute;
      bottom: -18px; right: -14px;
      pointer-events: none;
      z-index: 0;
    }

    .fsale__deco svg {
      width: 130px; height: 130px;
      opacity: .08;
    }

    /* ════════════════════════════════════
       1. BAŞLIK
    ════════════════════════════════════ */
.fsale__title {
    font-size: var(--th-text-xl);
    font-weight: var(--th-font-semibold);
    color: var(--th-color-text-inverse);
    text-align: center;
    margin: 0 0 var(--th-space-4);
    line-height: 1.2;
    letter-spacing: -.25px;
    position: relative;
    z-index: 1;
    /* padding-right: var(--th-space-16); */
}

    /* ════════════════════════════════════
       2. SAYAÇ — beyaz pill
    ════════════════════════════════════ */
    .fsale__timer {
      display: flex;
      align-items: center;
      background: var(--th-color-bg);
      border-radius: var(--th-radius-full);
      padding: var(--th-space-3) var(--th-space-2-5);
      margin-bottom: var(--th-space-3-5);
      position: relative;
      z-index: 1;
      box-shadow: var(--th-shadow-lg);
      border: 1.5px solid var(--th-red-500);
    }

    .fsale__timer-unit {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--th-space-1);
      position: relative;
    }

    .fsale__timer-unit + .fsale__timer-unit::before {
      content: "";
      position: absolute;
      left: 0; top: var(--th-space-1-5); bottom: var(--th-space-1-5);
      width: 1px;
      background: var(--th-color-bg-tertiary);
    }

    .fsale__timer-num {
      font-size: var(--th-text-2xl);
      font-weight: var(--th-font-bold);
      line-height: 1;
      color: var(--th-red-500);
      letter-spacing: -1px;
      font-variant-numeric: tabular-nums;
      min-width: 32px;
      text-align: center;
      transition: color .2s;
    }

    .fsale__timer-num.is-urgent { color: var(--th-color-danger); }

    .fsale__timer-lbl {
      font-size: var(--th-text-2xs);
      font-weight: var(--th-font-bold);
      color: var(--th-neutral-300);
      letter-spacing: .5px;
      text-transform: uppercase;
    }

    /* ════════════════════════════════════
       3. AÇIKLAMA
    ════════════════════════════════════ */
    .fsale__desc {
      font-size: var(--th-text-xs-plus);
      font-weight: var(--th-font-medium);
      color: color-mix(in srgb, var(--th-neutral-0) 82%, transparent);
      text-align: center;
      margin: 0 0 var(--th-space-3-5);
      line-height: 1.5;
      position: relative;
      z-index: 1;
    }

    /* ════════════════════════════════════
       4. ÇOKLU ÜRÜN İNDİRİM TABLOSU
    ════════════════════════════════════ */
    .fsale__bulk {
      background: color-mix(in srgb, var(--th-red-500) 68%, transparent);
      border: 1px solid color-mix(in srgb, var(--th-neutral-0) 22%, transparent);
      border-radius: var(--th-radius-xl);
      overflow: hidden;
      margin-bottom: var(--th-space-3-5);
      position: relative;
      z-index: 1;
    }

    .fsale__bulk-head {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--th-space-2);
      padding: var(--th-space-2-5) 14px var(--th-space-2);
      border-bottom: 1px solid color-mix(in srgb, var(--th-neutral-0) 15%, transparent);
    }

    .fsale__bulk-head svg {
      width: 14px; height: 14px;
      flex-shrink: 0;
      color: var(--th-color-text-inverse);
    }

    .fsale__bulk-title {
      font-size: var(--th-text-xs-plus);
      font-weight: var(--th-font-bold);
      color: var(--th-color-text-inverse);
      letter-spacing: .05px;
    }

    .fsale__bulk-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
    }

    .fsale__bulk-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: var(--th-space-2) 14px;
      gap: var(--th-space-1-5);
      border-right: 1px solid color-mix(in srgb, var(--th-neutral-0) 10%, transparent);
      border-bottom: 1px solid color-mix(in srgb, var(--th-neutral-0) 10%, transparent);
    }

    /* Son satır alt border'ı kaldır */
    .fsale__bulk-item:nth-child(3),
    .fsale__bulk-item:nth-child(4) {
      border-bottom: none;
    }

    /* Sağ kolon border'ı kaldır */
    .fsale__bulk-item:nth-child(even) {
      border-right: none;
    }

    .fsale__bulk-qty {
      display: flex;
      align-items: center;
      gap: var(--th-space-1);
    }

    .fsale__bulk-qty-num {
      font-size: var(--th-text-sm);
      font-weight: var(--th-font-bold);
      color: var(--th-color-text-inverse);
    }

    .fsale__bulk-qty-label {
      font-size: var(--th-text-2xs);
      font-weight: var(--th-font-semibold);
      color: color-mix(in srgb, var(--th-neutral-0) 65%, transparent);
    }

    .fsale__bulk-disc {

      border: 1px solid color-mix(in srgb, var(--th-neutral-0) 30%, transparent);
      border-radius: var(--th-radius-full);
      padding: var(--th-space-1) 9px;
      font-size: var(--th-text-xs);
      font-weight: var(--th-font-semibold);
      color: var(--th-color-text-inverse);
      letter-spacing: .1px;
      white-space: nowrap;
    }

    /* En yüksek indirim vurgusu */
    .fsale__bulk-item--best .fsale__bulk-disc {

      border-color: color-mix(in srgb, var(--th-neutral-0) 55%, transparent);
    }

    .fsale__bulk-item--best .fsale__bulk-qty-num {
      color: var(--th-color-text-inverse);
    }

    

    

    

    

    

    

    
    
    
    

    @keyframes fsale-pulse {
      0%,100% { opacity: .4; transform: scaleY(.6); }
      50%      { opacity: 1;  transform: scaleY(1); }
    }

    /* ════════════════════════════════════
       6. CTA BUTONU
    ════════════════════════════════════ */
.fsale__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--th-space-2);
    text-decoration: none;
    background: var(--th-color-bg);
    color: var(--th-color-danger);
    font-size: var(--th-text-sm);
    padding: var(--th-space-3) 1px;
    border-radius: var(--th-radius-full);
    width: 100%;
    position: relative;
    z-index: 1;
    border: 1.5px solid var(--th-red-500);
}

    .fsale__cta:hover {
      background: var(--th-red-50);
      transform: translateY(-2px);
      box-shadow: var(--th-shadow-lg);
    }

    .fsale__cta svg { transition: transform .14s; flex-shrink: 0; }
    .fsale__cta:hover svg { transform: translateX(3px); }

    /* ════════════════════════════════════
       MASAÜSTÜ  ≥ 660px — sadece genişler
    ════════════════════════════════════ */
    @media (min-width: 660px) {
      .fsale {
        max-width: 640px;
        padding: var(--th-space-5) 25px 44px 25px;
        border-radius: 2var(--th-radius-xs) 0px 0px 22px;
      }

      .fsale__title { font-size: var(--th-text-xl); }

      .fsale__timer { padding: var(--th-space-3) var(--th-space-5); }
      .fsale__timer-num { font-size: var(--th-text-3xl); }

      .fsale__bulk-title { font-size: var(--th-text-sm); }
      .fsale__bulk-qty-num { font-size: var(--th-text-base); }
      .fsale__bulk-disc { font-size: var(--th-text-xs-plus); }

      .fsale__cta { font-size: var(--th-text-base); }
    }

            @media (max-width: 768px) {
      .fsale {
        max-width: 640px;
        padding: var(--th-space-5) 25px 44px 25px;
       border-radius: 2var(--th-radius-xs) 22px 22px 22px;

      background: linear-gradient(165deg, var(--th-red-600) 0%, var(--th-orange-500) 40%, var(--th-orange-400) 75%, var(--th-orange-200) 100%);
      }
      .fsale__bulk {
display:none;
    }
      .fsale__badge {

    top: 21px;
    right: 7px;

}
            }


/* === legacy.css'ten tasindi: 2F-2 — th-cat-seo__ / th-lp__ / th-il__ === */
/* === Category SEO Programmatic Content === */
.th-cat-seo{max-width:900px;margin:var(--th-space-12) auto 0;padding:0 var(--th-space-4);color: var(--th-color-text-secondary);line-height:1.7}
.th-cat-seo__heading{font-size:var(--th-text-lg);font-weight:var(--th-font-bold);color: var(--th-color-text);margin:0 0 var(--th-space-3);padding-bottom:var(--th-space-2);border-bottom:2px solid var(--th-color-accent)}
.th-cat-seo__intro,.th-cat-seo__guide,.th-cat-seo__faq,.th-cat-seo__links{margin-bottom:var(--th-space-8)}
.th-cat-seo__intro p,.th-cat-seo__guide p,.th-cat-seo__faq-a{font-size:var(--th-text-base);margin:0;color: var(--th-color-text-muted)}
.th-cat-seo__link-grid{display:flex;flex-wrap:wrap;gap:var(--th-space-2);margin-top:var(--th-space-2)}
.th-cat-seo__link{display:inline-block;padding:var(--th-space-1-5) var(--th-space-3-5);border:1px solid var(--th-color-border-strong);border-radius:var(--th-radius-2xl);font-size:var(--th-text-sm);color: var(--th-color-text-secondary);text-decoration:none;transition:border-color .2s,color .2s}
.th-cat-seo__link:hover{border-color:var(--th-color-accent);color:var(--th-color-accent)}
.th-cat-seo__faq-item{margin-bottom:var(--th-space-2);border:1px solid var(--th-color-border);border-radius: var(--th-radius-md);overflow:hidden}
.th-cat-seo__faq-item[open]{margin-bottom:var(--th-space-3)}
.th-cat-seo__faq-q{font-size:var(--th-text-base-plus);font-weight:var(--th-font-semibold);color: var(--th-color-text);padding:var(--th-space-3) var(--th-space-4);cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between}
.th-cat-seo__faq-q::-webkit-details-marker{display:none}
.th-cat-seo__faq-q::after{content:'+';font-size:var(--th-text-lg);font-weight:var(--th-font-regular);color: var(--th-color-text-placeholder);flex-shrink:0;margin-left:var(--th-space-3)}
.th-cat-seo__faq-item[open] .th-cat-seo__faq-q::after{content:'\2212'}
.th-cat-seo__faq-a{font-size:var(--th-text-base);padding:0 var(--th-space-4) var(--th-space-3);margin:0}
@media (max-width: 768px) {.th-cat-seo{margin-top:var(--th-space-8);padding:0 var(--th-space-3)}.th-cat-seo__heading{font-size:var(--th-text-md)}}

/* === SEO Landing Page Engine === */
.th-lp{max-width:900px;margin:var(--th-space-12) auto 0;padding:0 var(--th-space-4);color: var(--th-color-text-secondary);line-height:1.7}
.th-lp__title{font-size:var(--th-text-xl);font-weight:var(--th-font-bold);color: var(--th-color-text);margin:0 0 var(--th-space-4)}
.th-lp__heading{font-size:var(--th-text-lg);font-weight:var(--th-font-bold);color: var(--th-color-text);margin:0 0 var(--th-space-3);padding-bottom:var(--th-space-2);border-bottom:2px solid var(--th-color-accent)}
.th-lp__intro,.th-lp__guide,.th-lp__faq,.th-lp__links{margin-bottom:var(--th-space-8)}
.th-lp__intro p,.th-lp__guide p,.th-lp__faq-a{font-size:var(--th-text-base);margin:0;color: var(--th-color-text-muted)}
.th-lp__link-grid{display:flex;flex-wrap:wrap;gap:var(--th-space-2);margin-top:var(--th-space-2)}
.th-lp__link{display:inline-block;padding:var(--th-space-1-5) var(--th-space-3-5);border:1px solid var(--th-color-border-strong);border-radius:var(--th-radius-2xl);font-size:var(--th-text-sm);color: var(--th-color-text-secondary);text-decoration:none;transition:border-color .2s,color .2s}
.th-lp__link:hover{border-color:var(--th-color-accent);color:var(--th-color-accent)}
.th-lp__faq-item{margin-bottom:var(--th-space-2);border:1px solid var(--th-color-border);border-radius: var(--th-radius-md);overflow:hidden}
.th-lp__faq-item[open]{margin-bottom:var(--th-space-3)}
.th-lp__faq-q{font-size:var(--th-text-base-plus);font-weight:var(--th-font-semibold);color: var(--th-color-text);padding:var(--th-space-3) var(--th-space-4);cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between}
.th-lp__faq-q::-webkit-details-marker{display:none}
.th-lp__faq-q::after{content:'+';font-size:var(--th-text-lg);font-weight:var(--th-font-regular);color: var(--th-color-text-placeholder);flex-shrink:0;margin-left:var(--th-space-3)}
.th-lp__faq-item[open] .th-lp__faq-q::after{content:'\2212'}
.th-lp__faq-a{font-size:var(--th-text-base);padding:0 var(--th-space-4) var(--th-space-3);margin:0}
@media (max-width: 768px) {.th-lp{margin-top:var(--th-space-8);padding:0 var(--th-space-3)}.th-lp__title{font-size:var(--th-text-lg)}.th-lp__heading{font-size:var(--th-text-md)}}
.th-lp__related{margin-top:var(--th-space-8)}
/* ── Internal Linking Engine (Kategori → Landing) ── */
.th-il{max-width:1200px;margin:var(--th-space-10) auto 0;padding:0 var(--th-space-4)}
.th-il__heading{font-size:var(--th-text-lg);font-weight:var(--th-font-bold);color: var(--th-color-text);margin:0 0 var(--th-space-2);padding-bottom:var(--th-space-2);border-bottom:2px solid var(--th-color-accent)}
.th-il__desc{font-size:var(--th-text-sm);color:var(--th-neutral-500);margin:0 0 var(--th-space-3-5)}
.th-il__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--th-space-2-5)}
.th-il__link{display:block;padding:var(--th-space-2-5) var(--th-space-3-5);background:var(--th-color-bg-secondary);border-radius: var(--th-radius-md);color: var(--th-color-text-secondary);text-decoration:none;font-size:var(--th-text-base);transition:background .2s,color .2s}
.th-il__link:hover{background:var(--th-color-accent);color:var(--th-color-text-inverse);text-decoration:none}
@media (max-width: 576px) {.th-il__grid{grid-template-columns:1fr 1fr}.th-il__link{font-size:var(--th-text-sm);padding:var(--th-space-2) var(--th-space-2-5)}}



/* === legacy.css'ten taşındı — 2B Quick Button / qsf-* === */
/* ==================================================
   QUICK BUTTON CONTAINER
================================================== */

.qsf-quick-buttons {
    display: flex;
    gap: var(--th-space-2);
    flex-wrap: wrap;
}

/* ==================================================
   CHIP / BUTTON BASE
================================================== */

.qsf-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--th-space-1-5);
    padding: var(--th-space-1-5) var(--th-space-3);
    font-size: var(--th-text-sm);
    border-radius: var(--th-radius-full);
    border: 1px solid;
    background: var(--th-color-bg);
    color: var(--th-color-text-secondary);
    text-decoration: none;
    line-height: 1;
    transition: all .15s ease;
    cursor: pointer;
    white-space: nowrap;
}

/* ikon */
.qsf-btn .qsf-ico {
    font-size: var(--th-text-base);
    line-height: 1;
}

/* hover */
.qsf-btn:hover {
    transform: translateY(-1px);
    background: color-mix(in srgb, var(--th-ink-900) 4%, transparent);
}

/* ==================================================
   RENK VARYANTLARI (TRENDYOL STİL)
================================================== */

/* Stok */

/* Ücretsiz kargo */
.qsf-free {
    color: var(--th-color-accent);
    background: var(--th-orange-50);
    border-color: var(--th-orange-200);
}

/* Hızlı */
.qsf-fast {
    color: var(--th-rose-500);
    background: var(--th-rose-50);
    border-color: var(--th-rose-200);
}

/* Puan */

/* Viral */
.qsf-viral {
    color: var(--th-purple-700);
    background: var(--th-purple-50);
    border-color: var(--th-purple-200);
}

/* İndirim */
.qsf-sale {
    color: var(--th-teal-600);
    background: var(--th-teal-50);
    border-color: var(--th-teal-200);
}

/* ==================================================
   AKTİF CHIP
================================================== */

.qsf-btn.is-active {
    font-weight: var(--th-font-medium);
    box-shadow: var(--th-shadow-sm);
}

/* X işareti */
.qsf-btn.is-active::after {
    content: "×";
    font-size: var(--th-text-base);
    margin-left: var(--th-space-1-5);
    opacity: .7;
}

/* ==================================================
   SIRALAMA (RADIO) – CHIP GİBİ
================================================== */

/* radio gizle */

/* seçili */

/* ==================================================
   SOL FİLTRELER – UYUMLU
================================================== */

.category-filter-list .lag-checkbox {
    padding: var(--th-space-1-5) var(--th-space-2);
    border-radius: var(--th-radius-md);
    transition: background .15s ease;
}

.category-filter-list .lag-checkbox:hover {
    background: var(--th-color-bg-secondary);
}

.category-filter-list input[type="checkbox"]:checked + label {
    font-weight: var(--th-font-medium);
    color: var(--th-color-info);
}

/* ==================================================
   MOBİL
================================================== */

@media (max-width: 768px) {

    .qsf-topbar {
        gap: var(--th-space-1-5);
    }

    .qsf-btn {
        font-size: var(--th-text-xs-plus);
        padding: var(--th-space-1) 10px;
    }
}

/* === legacy.css'ten taşındı — 2C Category Filter / Ordering === */
/* ======================================================
   SECTION: Category Page – Filters & Ordering
   Lines: approx 10500–11025
   Purpose: category filter list, ordering, lag-checkbox,
            pattern-group showcase, product card content,
            product-details-tab
   ====================================================== */

.category-filter-order .list-wrap {
    margin-top: var(--th-space-2-5);
    align-items: center;
    justify-content: center;
    background: var(--th-color-bg);
    border: 1px solid var(--th-color-border);
    overflow: hidden;
    border-radius: var(--th-radius-lg);
    padding: var(--th-space-4) var(--th-space-2-5)
}

.category-filter-order .list-wrap .list li .lag-checkbox .siralama99 {
    font-size: var(--th-text-base);
    background: var(--th-color-bg);
    font-weight: var(--th-font-semibold);
    color: var(--th-color-text-secondary);
    text-align: center;
    border-radius: var(--th-radius-md);
    padding: var(--th-space-5) var(--th-space-1)
}

.category-filter-order .list-wrap .list li::visited:hover .lag-checkbox {
    background: var(--th-blue-50)
}

.category-filter-order-mobile {
    display: none
}

.th-card .th-card__inner .product-label img {
    max-height: 25px;
    margin-bottom: var(--th-space-1);
    margin-right: var(--th-space-1)
}

.product-profile-1 .carousel .carousel-indicators li.active {
    border-color: var(--th-color-accent)
}

.p-g-mod-t-2 .p-g-mod-body a {
    transition: all var(--th-transition-normal)
}

.th-card .right-to-left .cart-group a:hover i {
    color: var(--th-color-accent)
}

footer .bar .cards {
    min-height: auto;
    background: inherit
}

footer .bar .right-image {
    text-align: right;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end
}

.hizli-sepet .sale-price-discount {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--th-color-border);
    padding: var(--th-space-2-5);
    margin-top: var(--th-space-2-5);
    font-size: var(--th-text-md)
}

.native-modal.show .hizli-sepet .related-products {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: inherit
}

.native-modal.show .hizli-sepet .fast-product-cart-box::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px
}

.native-modal.show .hizli-sepet .fast-product-cart-box::-webkit-scrollbar-thumb {
    border-radius: var(--th-radius-sm);
    background-color: color-mix(in srgb, var(--th-neutral-400) 50%, transparent);
    -webkit-box-shadow: var(--th-shadow-xs)
}

.hizli-sepet {
    max-width: 960px
}

.native-modal.show .hizli-sepet .modal-content .prices {
    display: flex;
    align-items: center
}

.native-modal.show .hizli-sepet .modal-content .fast-product-title {
    font-size: var(--th-text-md);
    color: var(--th-neutral-900);
    margin-bottom: var(--th-space-2-5);
    font-weight: var(--th-font-regular);
    line-height: 25px
}

.native-modal.show .hizli-sepet .modal-content .product-reviews .stars .star {
    margin-right: 1px;
    margin-top: var(--th-space-0-5);
    color: var(--th-neutral-300);
    font-size: var(--th-text-lg)
}

.native-modal.show .hizli-sepet .modal-content .product-reviews .stars {
    margin: var(--th-space-4) 0
}

.native-modal.show .hizli-sepet .modal-content .iliskili-urunler {
    color: var(--th-neutral-500);
    font-weight: var(--th-font-semibold)
}

.native-modal.show .hizli-sepet .modal-content .iliskili-urunler .value {
    color: var(--th-color-text)
}

.native-modal.show .hizli-sepet .modal-content .short-desc {
    color: var(--th-neutral-600);
    font-size: var(--th-text-base);
    margin-bottom: var(--th-space-4)
}

.native-modal.show .hizli-sepet .carousel-indicators li {
    width: var(--th-space-2-5);
    height: 10px;
    background-color: var(--th-neutral-500);
    border-radius: var(--th-radius-full);
    border: 4px solid transparent
}

.native-modal.show .hizli-sepet .carousel-indicators li.active {
    opacity: 1;
    background-color: var(--th-color-bg-inverse);
    border: 4px solid var(--th-neutral-300)
}

.native-modal.show .hizli-sepet .product-favourite2 {
    position: absolute;
    top: 15px;
    left: 25px;
    z-index: var(--th-z-toast);
    width: 40px;
    height: 40px;
    background: var(--th-color-bg);
    border-radius: var(--th-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--th-text-md);
    padding-top: var(--th-space-1);
    -webkit-box-shadow: var(--th-shadow-lg);
    box-shadow: var(--th-shadow-lg)
}

.native-modal.show .hizli-sepet .product-buttons {
    display: inline-flex;
    flex-wrap: nowrap
}

.native-modal .native-modal-close {
    z-index: 9;
    outline: 0
}

.native-modal.show .hizli-sepet .fast-product-cart-box {
    height: 100%;
    display: flex;
    flex-direction: column;
    max-height: 600px;
    overflow-y: auto
}

.native-modal.show .hizli-sepet .modal-body {
    padding: 0
}

.th-card .th-card__inner .quantity {
    margin: var(--th-space-1) 0;
    width: 100%;
    text-align: center;
    display: flex;
    flex-basis: auto;
    justify-content: center
}

.th-card .th-card__inner .quantity .btn {
    display: flex;
    width: 35px;
    height: 35px;
    color: var(--th-color-text-muted);
    font-size: var(--th-text-2xs);
    border: 1px solid var(--th-color-border);
    border-radius: 0;
    align-items: center;
    justify-content: center
}

.th-card .th-card__inner .quantity .btn:first-child {
    border-radius: 0
}

.th-card .th-card__inner .quantity .btn:hover {
    color: var(--th-color-text-secondary);
    background: var(--th-color-bg-tertiary);
    border-color: var(--th-color-bg-tertiary)
}

.th-card .th-card__inner .quantity input {
    min-width: 35px;
    max-width: 50px;
    height: 35px;
    border-radius: 0;
    border-color: var(--th-color-border-strong);
    background: var(--th-color-bg);
    color: var(--th-color-text-muted);
    text-align: center;
    font-weight: var(--th-font-regular);
    font-size: var(--th-text-base-plus);
    border-right: 0;
    border-left: 0
}

/* === legacy.css'ten taşındı — 2D product-view-select === */
.product-view-select {
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    height: 100%;
    align-items: center
}

/* === legacy.css'ten taşındı — 2D th-card right-to-left === */
@media (max-width: 768px) {
.th-card .right-to-left {
        display: none
    }

    

    footer .bar .right-image {
        justify-content: center
    }

    footer .bb .pr-5 {
        padding-right: var(--th-space-2-5)
    }

    

    .product-carousel-desktop.normal,footer .info ul li a:before,footer .logo-area {
        display: none
    }

    .mobile-header-space,.product-carousel-mobile,header.mobile {
        display: block
    }

    .stores .cards {
        display: block;
        text-align: center
    }

    .stores .card {
        display: inline-block;
        margin: 0;
        max-width: 45%;
        height: 50px;
        border: 0
    }

    footer .bar .right-image,footer .bar p {
        text-align: center
    }

    footer .bar .right-image {
        margin: var(--th-space-2-5) 0
    }

    footer .bb {
        border-top: 0;
        border-bottom: 0
    }

    footer .info {
        padding-top: 0
    }

    footer .info .title {
        color: var(--th-color-text-inverse);
        border: 0;
        padding: var(--th-space-2-5);
        position: relative
    }

    footer .info .title::after {
        content: "+";
        right: var(--th-space-2-5);
        top: 3px;
        bottom: 0;
        position: absolute;
        font-size: var(--th-text-xl);
        margin-bottom: var(--th-space-2-5)
    }

    footer .info .fs {
        text-align: center;
        border: 0;
        margin-bottom: var(--th-space-4);
        padding: var(--th-space-2-5)
    }

    footer .info ul {
        margin: 0
    }

    footer .info .fs,footer .info ul li {
        color: var(--th-color-text)
    }

    footer .info ul li a {
        color: var(--th-color-text)
    }

    

    footer .secure {
        text-align: center;
        margin: var(--th-space-2-5) 0
    }
}

/* === legacy.css'ten taşındı — S13 breadcrumb separator === */
.breadcrumb-item + .breadcrumb-item::before {
  font-family: "Font Awesome 5 Free";
  content: "\f105";
  font-weight: var(--th-font-black);
  font-size: var(--th-text-xs);
  color: var(--th-neutral-400);
}
@media (max-width: 576px) {
  .breadcrumb { flex-wrap: nowrap; overflow: hidden; }
  .breadcrumb-item:not(:last-child):not(:first-child) { display: none; }
  .breadcrumb-item:first-child::after { content: " / ..."; color: var(--th-neutral-400); }
}

/* === legacy.css'ten taşındı — S13 @keyframes th-stock-pulse === */
@keyframes th-stock-pulse {
  0%,100% { box-shadow: 0 0 0 0 transparent; }
  50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--th-red-700) 15%, transparent); }
}

/* === legacy.css'ten taşındı — S13 .th-tag-x === */
.th-tag-x { font-size: var(--th-text-base); line-height: 1; margin-left: var(--th-space-0-5); opacity: .7; }

/* === legacy.css'ten taşındı — S13 blog card CLS shield === */
/* ── C3-3: Blog card image CLS shield ── */
.card-blog .image{aspect-ratio:3/2;overflow:hidden}
.card-blog .image img{width:100%;height:100%;object-fit:cover;display:block}

/* === legacy.css'ten taşındı — B3 @keyframes inset-blink === */
@keyframes inset-blink {
    0%,to {
        opacity: 1
    }

    50% {
        opacity: .6
    }
}

/* === legacy.css'ten taşındı — B3 @keyframes scroll-left === */
@keyframes scroll-left {
    0% {
        transform: translateZ(0)
    }

    to {
        transform: translate3d(-100%,0,0)
    }
}

/* === legacy.css'ten taşındı — B3 @keyframes fadeInOut === */
@keyframes fadeInOut {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

/* === legacy.css'ten taşındı — B3 @keyframes fadeIn9d === */
@keyframes fadeIn9d {
    0% {
        opacity: 0;
        transform: translateY(-5px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

/* === legacy.css'ten taşındı — B3 @keyframes unique-slideUp === */
@keyframes unique-slideUp {
    0%,30%,to {
        transform: translateY(0)
    }

    35%,50% {
        transform: translateY(-30px)
    }

    55%,70% {
        transform: translateY(-60px)
    }

    75%,90% {
        transform: translateY(-90px)
    }
}

/* === legacy.css'ten taşındı — B3 @keyframes blink === */
@keyframes blink {
    0%,to {
        opacity: 1
    }

    50% {
        opacity: .5
    }
}

/* === legacy.css'ten taşındı — B3 @keyframes slideKampanya === */
@keyframes slideKampanya {
    0%,10%,to {
        transform: translateX(0)
    }

    14.29%,24.29% {
        transform: translateX(-100%)
    }

    28.57%,38.57% {
        transform: translateX(-200%)
    }

    42.86%,52.86% {
        transform: translateX(-300%)
    }

    57.14%,67.14% {
        transform: translateX(-400%)
    }

    71.43%,81.43% {
        transform: translateX(-500%)
    }

    85.71%,95.71% {
        transform: translateX(-600%)
    }
}

/* === legacy.css'ten taşındı — B9 .p-g-mod-t-39 === */
.p-g-mod.p-g-mod-t-39 .p-g-mod-header {
    height: 35px;
    padding: var(--th-space-2-5);
    color: var(--th-color-text-secondary)
}

.p-g-mod.p-g-mod-t-39 .p-g-mod-header .p-g-m-h-info .p-g-m-h-i-title {
    font-size: var(--th-text-base)
}

.p-g-mod.p-g-mod-t-39 .p-g-mod-body:not(.p-g-mod-body-p-0) {
    padding: 0
}

.p-g-mod.p-g-mod-t-39 .p-g-mod-body input {
    padding: .275rem .7rem;
    font-size: var(--th-text-base);
    font-weight: var(--th-font-medium);
    border-radius: var(--th-radius-md);
    height: 40px;
    margin-right: var(--th-space-2-5)
}

.p-g-mod.p-g-mod-t-39 .p-g-mod-body .btn-secondary {
    font-size: var(--th-text-base-plus);
    font-weight: var(--th-font-medium);
    background: var(--th-emerald-500);
    border-color: var(--th-emerald-500);
    height: 40px;
    border-radius: var(--th-radius-md)
}

.card-list-product .card-list-product-inner .th-card__image-wrap .image img,.product-carousel-desktop.normal .carousel-item a img {
    width: 75%
}

/* === legacy.css'ten taşındı — B9 card-list img width === */
.card-list-product .card-list-product-inner .th-card__image-wrap .image img,.product-carousel-desktop.normal .carousel-item a img {
    width: 75%
}

/* === legacy.css'ten taşındı — B10 breadcrumb-item last-child === */
.breadcrumb-wrapper .breadcrumb .breadcrumb-item:last-child a {
    color: var(--th-color-text-secondary);
    font-family: "Poppins",sans-serif
}

/* === legacy.css'ten taşındı — B10 th-card__price-old mobile === */
@media (max-width: 768px) {
    

    .th-card .th-card__inner .th-card__prices .th-card__price-wrap .th-card__price-old {
        font-size: var(--th-text-xs-plus);
        color: var(--th-neutral-400);
        text-decoration: line-through
    }
}

/* === legacy.css'ten taşındı — B10 mm-alt subtitle-img === */
@media (min-width: 900px) {
    .mm-alt,.subtitle-img {
        display: none
    }
}

/* === legacy.css'ten taşındı — B10 card-list-product family === */
.card-list-product .card-list-product-inner .info .title {
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    display: block;
    display: -webkit-box;
    font-size: var(--th-text-xs-plus);
    height: 55px;
    line-height: 18px;
    max-width: 100%;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    margin-top: var(--th-space-1);
    margin-left: -17px
}

.card-list-product .card-list-product-inner .th-card__prices .th-card__price-wrap .discount {
    color: var(--th-color-danger);
    font-size: var(--th-text-xs-plus);
    padding-right: var(--th-space-4);
    padding-top: -var(--th-space-2-5);
    margin-top: -var(--th-space-5)
}

.card-list-product .card-list-product-inner .th-card__prices .th-card__price-wrap .th-card__price-old {
    color: var(--th-color-text-muted);
    font-size: var(--th-text-xs-plus);
    text-decoration: line-through;
    padding-right: var(--th-space-4);
    padding-top: -var(--th-space-2-5)
}

.card-list-product .card-list-product-inner .th-card__prices .th-card__price-wrap .th-card__price-sale {
    color: var(--th-color-text-muted);
    font-size: var(--th-text-base);
    font-weight: var(--th-font-medium);
    padding-right: var(--th-space-4);
    padding-top: -var(--th-space-2-5);
    padding-bottom: var(--th-space-5)
}

.card-list-product .card-list-product-inner .th-card__image-wrap .image {
    display: block
}

.card-list-product .product-reviews .count {
    color: var(--th-color-text-muted);
    font-size: var(--th-text-2xs);
    padding-left: var(--th-space-1);
    padding-top: var(--th-space-1)
}

.card-list-product {
    overflow: hidden;
    border-radius: var(--th-radius-md);
    padding: 0;
    border: 1px solid var(--th-color-border);
    margin: -var(--th-space-1)
}

/* === legacy.css'ten taşındı — B10 custom-module-code-11205 === */
.row .custom-module-code-11205 {
    margin-top: 7px;
    margin-right: -var(--th-space-0-5);
    margin-left: -var(--th-space-0-5)
}

/* ── Platform Nötralizasyon — Z-3 ── */
/* Platform: .sale-price { color: #555; font-size: var(--th-text-md); font-weight: var(--th-font-medium) } */
.sale-price {
  color: var(--th-color-accent);
  font-size: var(--th-text-base);
  font-weight: var(--th-font-semibold);
}
/* Platform: .list-price { color: #555; font-size: var(--th-text-xs-plus); text-decoration: line-through } */
.list-price {
  color: var(--th-color-text-muted);
  font-size: var(--th-text-sm);
  text-decoration: line-through;
}

/* ── Platform Nötralizasyon: .price ── */
.price {
  font-size: var(--th-font-size-xl);
  font-weight: var(--th-font-bold);
  color: var(--th-color-primary);
}
.sale-variant-price .price,
.sale-list-price .price {
  color: var(--th-color-text-primary, var(--th-ink-800));
}
.sale-list-price .price {
  font-size: var(--th-font-size-sm);
  font-weight: var(--th-font-regular);
  text-decoration: line-through;
  color: var(--th-color-text-muted);
}

/* === footer.css'ten taşındı — custom-module btn-cart mobile hide === */
@media (max-width: 992px) {
    .custom-module-code-10564 .th-card .th-card__inner .buttons .btn-cart,.custom-module-code-8397 .th-card .th-card__inner .buttons .btn-cart,.modal-content .buttons .btn-cart,.product-profile-1 .carousel .carousel-indicators {
        display: none
    }
    .custom-module-code-10564 .th-card .th-card__inner .title,.custom-module-code-8397 .th-card .th-card__inner .title {
        width: 95%;
        padding: 0;
        margin-left: var(--th-space-1);
        line-height: 14px;
        height: 40px;
        font-weight: var(--th-font-regular);
        font-size: var(--th-text-2xs);
        color: var(--th-neutral-700);
        overflow: hidden;
        text-overflow: ellipsis;
        overflow-wrap: break-word;
        display: -webkit-box;
        max-width: 100%;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        text-align: center
    }
}

/* === footer.css'ten taşındı — video player === */
.video {
    position: relative;
    display: inline-block
}
.video video {
    width: 100%;
    height: auto;
    display: block
}

/* === footer.css'ten taşındı — video-play, category-image, misc === */
.video-play i {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center
}
.video-play {
    position: relative
}
.video-play i {
    top: 0;
    width: 30px;
    height: 30px;
    border: 3px solid var(--th-neutral-0);
    border-radius: 100%;
    line-height: 25px;
    margin: auto;
    text-indent: 1px;
    color: var(--th-color-text-inverse);
}
.cateogory-image img {
    height: 150px;
    width: 150px;
    border-radius: var(--th-radius-full)
}
.custom-image-container {
    text-align: center
}
.custom-image-container img {
    width: 100%;
    height: auto
}
@media (max-width: 992px) {
    .category-filter-order-desktop,.dt-discount-img img,.product-view-select {
        display: none
    }
    .th-card .right-to-left {
        display: none
    }
    .stores .cards {
        display: block;
        text-align: center
    }
    .stores .card {
        display: inline-block;
        margin: 0;
        max-width: 45%;
        height: 50px;
        border: 0
    }
    .product-carousel-desktop.normal {
        display: none
    }
}
#payment-methods-content-0 .payment-method-form .alert,.product-carousel-mobile {
    display: none
}

/* ── Cookie Consent Banner (account.css'ten taşındı) ── */
/* ── Cookie Consent Banner — Trendyol-inspired ── */
.th-cookie-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: var(--th-z-toast);
  background: transparent;
  pointer-events: none;
  padding: var(--th-space-4);
  transform: translateY(110%);
  opacity: 0;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1), opacity .4s ease;
}
.th-cookie-banner.visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.th-cookie-inner {
  max-width: 480px;
  margin: 0 auto 0 0;
  background: var(--th-neutral-0);
  border-radius: var(--th-radius-2xl);
  padding: var(--th-space-5);
  display: flex;
  align-items: flex-start;
  gap: var(--th-space-4);
  box-shadow: 0 8px 32px color-mix(in srgb, var(--th-ink-900) 12%, transparent), 0 2px 8px color-mix(in srgb, var(--th-ink-900) 6%, transparent);
  border: 1px solid var(--th-neutral-100);
  backdrop-filter: blur(12px);
}
.th-cookie-icon {
  flex-shrink: 0;
  width: 44px; height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--th-green-50, var(--th-emerald-50));
  border-radius: var(--th-radius-xl);
  color: var(--th-color-primary);
}
.th-cookie-icon svg { width: 24px; height: 24px; }
.th-cookie-content { flex: 1; min-width: 0; }
.th-cookie-title {
  margin: 0 0 var(--th-space-0-5);
  font-size: var(--th-text-sm);
  font-weight: var(--th-font-bold);
  color: var(--th-neutral-900);
  letter-spacing: -0.01em;
}
.th-cookie-text {
  margin: 0 0 var(--th-space-3);
  font-size: var(--th-text-sm);
  line-height: 1.5;
  color: var(--th-neutral-500);
}
.th-cookie-text a {
  color: var(--th-color-primary);
  text-decoration: none;
  font-weight: var(--th-font-medium);
  transition: color .2s;
}
.th-cookie-text a:hover { color: var(--th-color-accent); text-decoration: underline; }
.th-cookie-actions {
  display: flex;
  gap: var(--th-space-2);
  width: 100%;
}
.th-cookie-accept {
  flex: 1;
  padding: var(--th-space-2-5) var(--th-space-5);
  background: var(--th-color-primary);
  color: var(--th-neutral-0);
  border: none;
  border-radius: var(--th-radius-lg);
  font-size: var(--th-text-sm);
  font-weight: var(--th-font-semibold);
  cursor: pointer;
  transition: background .2s, transform .15s, box-shadow .2s;
  letter-spacing: .01em;
}
.th-cookie-accept:hover {
  background: var(--th-green-700, var(--th-green-900));
  transform: translateY(-1px);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--th-color-primary) 25%, transparent);
}
.th-cookie-accept:active { transform: translateY(0); }
.th-cookie-reject {
  flex: 1;
  padding: var(--th-space-2-5) var(--th-space-5);
  background: var(--th-neutral-50, var(--th-color-bg-page));
  color: var(--th-neutral-600);
  border: 1px solid var(--th-neutral-200);
  border-radius: var(--th-radius-lg);
  font-size: var(--th-text-sm);
  font-weight: var(--th-font-medium);
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .15s;
}
.th-cookie-reject:hover {
  background: var(--th-neutral-100);
  border-color: var(--th-neutral-300);
  transform: translateY(-1px);
}
.th-cookie-reject:active { transform: translateY(0); }

/* Desktop: yatay compact layout */
@media (min-width: 769px) {
  .th-cookie-banner { padding: var(--th-space-4) var(--th-space-6); }
  .th-cookie-inner { max-width: 520px; }
  .th-cookie-actions { width: auto; flex-shrink: 0; }
  .th-cookie-accept, .th-cookie-reject { flex: none; white-space: nowrap; }
}

/* Mobile */
@media (max-width: 768px) {
  .th-cookie-banner { padding: var(--th-space-3); }
  .th-cookie-inner {
    max-width: 100%;
    flex-wrap: wrap;
    padding: var(--th-space-4);
    border-radius: var(--th-radius-sm);
    gap: var(--th-space-2-5);
  }
  .th-cookie-icon { width: 36px; height: 36px; border-radius: var(--th-radius-lg); }
  .th-cookie-icon svg { width: 20px; height: 20px; }
  .th-cookie-content { flex-basis: calc(100% - 50px); }
  .th-cookie-actions { flex-basis: 100%; }
  .th-cookie-accept, .th-cookie-reject { padding: var(--th-space-2-5) var(--th-space-4); }
}

/* ── Newsletter Popup (account.css'ten taşındı) ── */
.th-nl-overlay {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--th-ink-900) 50%, transparent);
  z-index: calc(var(--th-z-modal) - 1);
  opacity: 0;
  pointer-events: none;
  transition: var(--th-transition-normal);
}
.th-nl-overlay.active { opacity: 1; pointer-events: auto; }
.th-nl-popup {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  background: var(--th-color-bg);
  border-radius: var(--th-radius-2xl);
  box-shadow: var(--th-shadow-2xl);
  z-index: var(--th-z-modal);
  width: 90%; max-width: 576px;
  padding: var(--th-space-8);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: var(--th-transition-normal);
}
.th-nl-popup.active {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}
.th-nl-popup-close {
  position: absolute;
  top: var(--th-space-3); right: var(--th-space-3);
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: var(--th-color-bg-tertiary);
  border: none; border-radius: var(--th-radius-full);
  cursor: pointer; color: var(--th-color-text-muted);
  font-size: var(--th-text-md);
}
.th-nl-popup h3 { font-size: var(--th-text-xl); font-weight: var(--th-font-bold); margin-bottom: var(--th-space-2); }
.th-nl-popup p { font-size: var(--th-text-sm); color: var(--th-color-text-muted); margin-bottom: var(--th-space-5); }
.th-nl-popup-form { display: flex; gap: var(--th-space-2); }
.th-nl-popup-form input {
  flex: 1; padding: var(--th-space-3);
  border: 1px solid var(--th-color-border);
  border-radius: var(--th-radius-lg);
  font-size: var(--th-text-base);
}
.th-nl-popup-form button {
  padding: var(--th-space-3) var(--th-space-5);
  background: var(--th-btn-accent-bg);
  color: var(--th-btn-accent-text);
  border: none; border-radius: var(--th-radius-lg);
  font-weight: var(--th-font-semibold);
  cursor: pointer; white-space: nowrap;
}
.th-nl-popup-note { font-size: var(--th-text-2xs); color: var(--th-color-text-muted); margin-top: var(--th-space-3); }

/* ── Compare Bar (account.css'ten taşındı) ── */
.th-compare-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--th-color-bg);
  border-top: 1px solid var(--th-color-border);
  box-shadow: var(--th-shadow-lg);
  z-index: var(--th-z-sticky);
  padding: var(--th-space-3) var(--th-space-6);
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--th-space-4);
}
.th-compare-bar.active { display: flex; }
.th-compare-items { display: flex; gap: var(--th-space-2); }
.th-compare-item {
  width: 56px; height: 56px;
  border-radius: var(--th-radius-lg);
  border: 2px solid var(--th-color-border);
  overflow: hidden; position: relative;
}
.th-compare-item img { width: 100%; height: 100%; object-fit: cover; }
.th-compare-item .remove {
  position: absolute; top: -6px; right: -6px;
  width: 20px; height: 20px;
  background: var(--th-color-danger); color: var(--th-color-text-inverse);
  border-radius: var(--th-radius-full);
  font-size: var(--th-text-xs-plus);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; border: none;
}
.th-compare-btn {
  padding: var(--th-space-2) var(--th-space-5);
  background: var(--th-btn-primary-bg);
  color: var(--th-btn-primary-text);
  border: none; border-radius: var(--th-btn-radius);
  font-weight: var(--th-font-semibold);
  cursor: pointer;
}
.th-compare-clear { color: var(--th-color-text-muted); background: none; border: none; cursor: pointer; font-size: var(--th-text-sm); text-decoration: underline; }
.th-compare-bar__actions { display: flex; align-items: center; gap: var(--th-space-3); }
@media (max-width: 768px) {
  .th-compare-bar { flex-direction: column; padding: var(--th-space-2) var(--th-space-4); bottom: 64px; }
  .th-compare-item { width: 44px; height: 44px; }
}

/* ═══════════════════════════════════════════════════════════════════
   FAZ 5.4 — MOBİL UX İYİLEŞTİRME
   ═══════════════════════════════════════════════════════════════════ */

/* ── Smooth Scroll Behavior ── */
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ── Bottom Sheet Component ── */
.th-bottom-sheet__overlay {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--th-ink-900) 45%, transparent);
  z-index: var(--th-z-modal);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.th-bottom-sheet__overlay.is-open {
  opacity: 1;
  visibility: visible;
}
.th-bottom-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: calc(var(--th-z-modal) + 1);
  background: var(--th-color-bg);
  border-radius: var(--th-radius-2xl) var(--th-radius-2xl) 0 0;
  box-shadow: 0 -4px 24px color-mix(in srgb, var(--th-ink-900) 12%, transparent);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.th-bottom-sheet.is-open {
  transform: translateY(0);
}
.th-bottom-sheet__handle {
  display: flex;
  justify-content: center;
  padding: var(--th-space-3) 0 var(--th-space-1);
  cursor: grab;
  flex-shrink: 0;
}
.th-bottom-sheet__handle::after {
  content: '';
  width: 36px;
  height: 4px;
  background: var(--th-neutral-300);
  border-radius: var(--th-radius-full);
}
.th-bottom-sheet__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--th-space-2) var(--th-space-5) var(--th-space-3);
  border-bottom: var(--th-border-width-default) solid var(--th-color-border-light);
  flex-shrink: 0;
}
.th-bottom-sheet__title {
  font-size: var(--th-text-lg);
  font-weight: var(--th-font-bold);
  color: var(--th-color-text);
  margin: 0;
}
.th-bottom-sheet__close {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--th-color-text-muted);
  font-size: var(--th-text-lg);
}
.th-bottom-sheet__body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--th-space-4) var(--th-space-5);
}
.th-bottom-sheet__footer {
  flex-shrink: 0;
  padding: var(--th-space-3) var(--th-space-5);
  border-top: var(--th-border-width-default) solid var(--th-color-border-light);
  display: flex;
  gap: var(--th-space-2);
}
.th-bottom-sheet__footer .th-btn {
  flex: 1;
}

/* ── Touch-friendly Quantity Selector ── */
.th-qty {
  display: inline-flex;
  align-items: center;
  border: var(--th-border-width-default) solid var(--th-color-border);
  border-radius: var(--th-radius-lg);
  overflow: hidden;
}
.th-qty__btn {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--th-color-bg);
  border: none;
  cursor: pointer;
  color: var(--th-color-text);
  font-size: var(--th-text-lg);
  transition: background var(--th-transition-fast);
  -webkit-tap-highlight-color: transparent;
}
.th-qty__btn:hover {
  background: var(--th-color-bg-secondary);
}
.th-qty__btn:active {
  background: var(--th-color-bg-tertiary);
}
.th-qty__btn:disabled {
  opacity: 0.3;
  pointer-events: none;
}
.th-qty__value {
  width: 48px;
  text-align: center;
  font-size: var(--th-text-md);
  font-weight: var(--th-font-semibold);
  color: var(--th-color-text);
  border: none;
  border-left: var(--th-border-width-default) solid var(--th-color-border);
  border-right: var(--th-border-width-default) solid var(--th-color-border);
  background: var(--th-color-bg);
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.th-qty__value::-webkit-inner-spin-button,
.th-qty__value::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ── Swipe-to-dismiss hint (drawer/sheet) ── */
.th-swipe-hint {
  position: absolute;
  top: var(--th-space-2);
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 4px;
  background: var(--th-neutral-300);
  border-radius: var(--th-radius-full);
  opacity: 0.6;
}

/* ── Sticky Sepete Ekle Bar (PDP mobil) ── */
.th-sticky-addcart {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--th-z-sticky);
  display: none;
  align-items: center;
  gap: var(--th-space-3);
  padding: var(--th-space-3) var(--th-space-4);
  padding-bottom: calc(var(--th-space-3) + env(safe-area-inset-bottom, 0px));
  background: var(--th-ink-900);
  box-shadow: 0 -2px 12px color-mix(in srgb, var(--th-ink-900) 20%, transparent);
}
.th-sticky-addcart__price {
  flex: 1;
  min-width: 0;
}
.th-sticky-addcart__current {
  font-size: var(--th-text-lg);
  font-weight: var(--th-font-extrabold);
  color: var(--th-color-accent);
}
.th-sticky-addcart__old {
  font-size: var(--th-text-xs);
  color: var(--th-neutral-400);
  text-decoration: line-through;
}
.th-sticky-addcart__btn {
  flex-shrink: 0;
  padding: var(--th-space-3) var(--th-space-6);
  background: var(--th-color-accent);
  color: var(--th-neutral-0);
  border: none;
  border-radius: var(--th-radius-lg);
  font-size: var(--th-text-base);
  font-weight: var(--th-font-bold);
  cursor: pointer;
  transition: background var(--th-transition-fast);
  white-space: nowrap;
}
.th-sticky-addcart__btn:hover {
  background: var(--th-orange-700);
}

@media (max-width: 768px) {
  .th-sticky-addcart {
    display: flex;
  }
}

/* ── Pull-to-refresh visual hint ── */
.th-pull-indicator {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(-100%);
  z-index: var(--th-z-sticky);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--th-color-bg);
  border-radius: var(--th-radius-full);
  box-shadow: var(--th-shadow-md);
  transition: transform 0.3s ease;
}
.th-pull-indicator.is-pulling {
  transform: translateX(-50%) translateY(var(--th-space-4));
}
.th-pull-indicator__icon {
  width: var(--th-space-5);
  height: var(--th-space-5);
  border: 2px solid var(--th-color-primary);
  border-top-color: transparent;
  border-radius: var(--th-radius-circle);
  animation: th-spin 0.6s linear infinite;
}


/* ═══════════════════════════════════════════════════════════════════
   FAZ 6.1 — GÜVEN SİNYALLERİ (Trust Signals)
   SSL badge, checkout trust bar, satisfaction counter,
   review highlight cards, payment trust enhancements
   ═══════════════════════════════════════════════════════════════════ */

/* ── SSL / Secure Badge (Header) ── */
.th-ssl-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--th-space-1-5);
  padding: var(--th-space-1) var(--th-space-2-5);
  background: color-mix(in srgb, var(--th-color-success) 8%, transparent);
  border: var(--th-border-width-default) solid color-mix(in srgb, var(--th-color-success) 20%, transparent);
  border-radius: var(--th-radius-full);
  font-size: var(--th-text-xs);
  font-weight: var(--th-font-medium);
  color: var(--th-color-success);
  white-space: nowrap;
  transition: background var(--th-transition-fast);
}
.th-ssl-badge i {
  font-size: var(--th-text-sm);
}
.th-ssl-badge:hover {
  background: color-mix(in srgb, var(--th-color-success) 14%, transparent);
}

/* ── Checkout Trust Bar ── */
.th-checkout-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--th-space-4);
  padding: var(--th-space-3) var(--th-space-4);
  background: var(--th-checkout-trust-bg, var(--th-emerald-50));
  border: var(--th-border-width-default) solid var(--th-checkout-trust-border, var(--th-emerald-200));
  border-radius: var(--th-trust-radius);
  margin-bottom: var(--th-space-4);
}
.th-checkout-trust__item {
  display: inline-flex;
  align-items: center;
  gap: var(--th-space-1-5);
  font-size: var(--th-text-xs);
  font-weight: var(--th-font-medium);
  color: var(--th-checkout-trust-text, var(--th-emerald-700));
  white-space: nowrap;
}
.th-checkout-trust__item i {
  font-size: var(--th-text-sm);
  color: var(--th-checkout-trust-icon, var(--th-emerald-600));
}
.th-checkout-trust__sep {
  width: 1px;
  height: var(--th-space-4);
  background: var(--th-checkout-trust-border, var(--th-emerald-200));
}
@media (max-width: 576px) {
  .th-checkout-trust {
    flex-wrap: wrap;
    gap: var(--th-space-2);
    padding: var(--th-space-2-5) var(--th-space-3);
  }
  .th-checkout-trust__sep { display: none; }
  .th-checkout-trust__item { font-size: var(--th-text-2xs); }
}

/* ── Müşteri Memnuniyet Sayacı ── */
.th-satisfaction {
  display: flex;
  align-items: center;
  gap: var(--th-space-3);
  padding: var(--th-trust-padding);
  background: var(--th-trust-bg);
  border: var(--th-border-width-default) solid var(--th-trust-border);
  border-radius: var(--th-trust-radius);
}
.th-satisfaction__number {
  font-size: var(--th-text-3xl);
  font-weight: var(--th-font-black);
  color: var(--th-color-primary);
  line-height: 1;
  letter-spacing: -0.02em;
}
.th-satisfaction__label {
  font-size: var(--th-trust-title-font);
  font-weight: var(--th-trust-title-weight);
  color: var(--th-trust-title-color);
  line-height: var(--th-leading-snug);
}
.th-satisfaction__label span {
  display: block;
  font-size: var(--th-trust-desc-font);
  font-weight: normal;
  color: var(--th-trust-desc-color);
}
.th-satisfaction__stars {
  display: flex;
  gap: var(--th-space-0-5);
  color: var(--th-color-accent);
  font-size: var(--th-text-sm);
  margin-top: var(--th-space-1);
}

/* ── Review Highlight Cards (Müşteri Yorumları Widget) ── */
.th-review-highlights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--th-space-4);
}
.th-review-card {
  display: flex;
  flex-direction: column;
  gap: var(--th-space-3);
  padding: var(--th-space-5);
  background: var(--th-color-bg);
  border: var(--th-border-width-default) solid var(--th-color-border-light);
  border-radius: var(--th-trust-radius);
  transition: box-shadow var(--th-transition-fast), border-color var(--th-transition-fast);
}
.th-review-card:hover {
  border-color: var(--th-color-primary);
  box-shadow: var(--th-shadow-md);
}
.th-review-card__stars {
  display: flex;
  gap: var(--th-space-0-5);
  color: var(--th-color-accent);
  font-size: var(--th-text-sm);
}
.th-review-card__text {
  font-size: var(--th-text-sm);
  color: var(--th-color-text);
  line-height: var(--th-leading-relaxed);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.th-review-card__author {
  display: flex;
  align-items: center;
  gap: var(--th-space-2-5);
  margin-top: auto;
}
.th-review-card__avatar {
  width: var(--th-space-8);
  height: var(--th-space-8);
  border-radius: var(--th-radius-full);
  background: color-mix(in srgb, var(--th-color-primary) 10%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--th-text-sm);
  font-weight: var(--th-font-bold);
  color: var(--th-color-primary);
  flex-shrink: 0;
}
.th-review-card__name {
  font-size: var(--th-text-sm);
  font-weight: var(--th-font-semibold);
  color: var(--th-color-text);
  line-height: 1.2;
}
.th-review-card__date {
  font-size: var(--th-text-xs);
  color: var(--th-color-text-muted);
}
.th-review-card__verified {
  display: inline-flex;
  align-items: center;
  gap: var(--th-space-1);
  font-size: var(--th-text-xs);
  color: var(--th-color-success);
  font-weight: var(--th-font-medium);
}
.th-review-card__verified i {
  font-size: var(--th-text-xs);
}
.th-review-card__photo {
  width: 100%;
  border-radius: var(--th-radius-md);
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

@media (max-width: 768px) {
  .th-review-highlights { grid-template-columns: 1fr; }
  .th-review-card { padding: var(--th-space-4); }
}

/* ── PDP Trust Guarantees (Ürün Sayfası Güven Şeridi) ── */
.th-pdp-trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--th-space-2);
  padding: var(--th-trust-pdp-padding);
  border: var(--th-border-width-default) solid var(--th-trust-border);
  border-radius: var(--th-trust-radius);
  background: var(--th-trust-bg);
}
.th-pdp-trust__item {
  display: inline-flex;
  align-items: center;
  gap: var(--th-space-1-5);
  font-size: var(--th-trust-pdp-font);
  color: var(--th-trust-title-color);
  font-weight: var(--th-font-medium);
}
.th-pdp-trust__item i {
  color: var(--th-trust-icon-color);
  font-size: var(--th-text-sm);
}
.th-pdp-trust__sep {
  color: var(--th-color-border);
}

/* ── ETBİS Rozeti (Geliştirilmiş) ── */
.th-etbis-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--th-space-2);
  padding: var(--th-space-2) var(--th-space-3);
  background: color-mix(in srgb, var(--th-color-primary) 5%, transparent);
  border: var(--th-border-width-default) solid color-mix(in srgb, var(--th-color-primary) 15%, transparent);
  border-radius: var(--th-radius-md);
  text-decoration: none;
  transition: border-color var(--th-transition-fast), background var(--th-transition-fast);
}
.th-etbis-badge:hover {
  border-color: var(--th-color-primary);
  background: color-mix(in srgb, var(--th-color-primary) 10%, transparent);
}
.th-etbis-badge img {
  width: var(--th-space-6);
  height: auto;
}
.th-etbis-badge__text {
  font-size: var(--th-text-xs);
  font-weight: var(--th-font-medium);
  color: var(--th-color-text);
  line-height: 1.3;
}
.th-etbis-badge__text strong {
  display: block;
  font-weight: var(--th-font-semibold);
  color: var(--th-color-primary);
}

/* ── Payment Logos Enhanced Strip ── */
.th-payment-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--th-space-3);
  padding: var(--th-space-3) var(--th-space-4);
  background: var(--th-color-bg-secondary);
  border-radius: var(--th-trust-radius);
}
.th-payment-strip__logo {
  height: var(--th-space-6);
  width: auto;
  opacity: 0.6;
  filter: grayscale(100%);
  transition: opacity var(--th-transition-fast), filter var(--th-transition-fast);
}
.th-payment-strip__logo:hover {
  opacity: 1;
  filter: grayscale(0%);
}
@media (max-width: 576px) {
  .th-payment-strip {
    flex-wrap: wrap;
    gap: var(--th-space-2);
    padding: var(--th-space-2-5) var(--th-space-3);
  }
  .th-payment-strip__logo { height: var(--th-space-5); }
}

/* ── Trust Counter Animation ── */
@keyframes th-count-up {
  from { opacity: 0; transform: translateY(var(--th-space-2)); }
  to   { opacity: 1; transform: translateY(0); }
}
.th-satisfaction[data-animated] .th-satisfaction__number {
  animation: th-count-up 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .th-satisfaction[data-animated] .th-satisfaction__number,
  .th-review-card {
    animation: none;
    transition: none;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   FAZ 6.3 — İADE & DESTEK
   Return badge, return stepper, WhatsApp pulse, support form,
   FAQ accordion + search
   ═══════════════════════════════════════════════════════════════════ */

/* ── PDP Return Badge ("14 gün ücretsiz iade") ── */
.th-return-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--th-space-2);
  padding: var(--th-space-2) var(--th-space-3);
  background: color-mix(in srgb, var(--th-color-success) 6%, transparent);
  border: var(--th-border-width-default) solid color-mix(in srgb, var(--th-color-success) 18%, transparent);
  border-radius: var(--th-radius-md);
  font-size: var(--th-text-xs);
  font-weight: var(--th-font-medium);
  color: var(--th-color-success);
}
.th-return-badge i {
  font-size: var(--th-text-sm);
}
.th-return-badge strong {
  font-weight: var(--th-font-bold);
}

/* ── İade Stepper (Return Process Steps) ── */
.th-return-stepper {
  display: flex;
  align-items: flex-start;
  gap: var(--th-stepper-gap);
  padding: var(--th-space-4) 0;
}
.th-return-stepper__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  text-align: center;
  position: relative;
}
.th-return-stepper__step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: calc(var(--th-stepper-size) / 2);
  left: calc(50% + var(--th-stepper-size) / 2 + var(--th-space-1));
  right: calc(-50% + var(--th-stepper-size) / 2 + var(--th-space-1));
  height: var(--th-stepper-line-width);
  background: var(--th-stepper-line-color);
  transition: background var(--th-transition-fast);
}
.th-return-stepper__step.completed:not(:last-child)::after {
  background: var(--th-stepper-line-active);
}
.th-return-stepper__circle {
  width: var(--th-stepper-size);
  height: var(--th-stepper-size);
  border-radius: var(--th-radius-full);
  background: var(--th-stepper-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--th-text-sm);
  font-weight: var(--th-font-semibold);
  color: var(--th-stepper-text);
  margin-bottom: var(--th-space-2);
  transition: background var(--th-transition-fast), color var(--th-transition-fast);
}
.th-return-stepper__step.active .th-return-stepper__circle {
  background: var(--th-stepper-active-bg);
  color: var(--th-stepper-active-text);
}
.th-return-stepper__step.completed .th-return-stepper__circle {
  background: var(--th-stepper-complete-bg);
  color: var(--th-stepper-complete-text);
}
.th-return-stepper__step.error .th-return-stepper__circle {
  background: var(--th-stepper-error-bg);
  color: var(--th-neutral-0);
}
.th-return-stepper__label {
  font-size: var(--th-stepper-label-font);
  color: var(--th-stepper-label-color);
  line-height: var(--th-leading-snug);
}
.th-return-stepper__step.active .th-return-stepper__label {
  color: var(--th-color-primary);
  font-weight: var(--th-font-semibold);
}

@media (max-width: 576px) {
  .th-return-stepper { flex-direction: column; align-items: stretch; gap: 0; }
  .th-return-stepper__step { flex-direction: row; text-align: left; gap: var(--th-space-3); padding: var(--th-space-2-5) 0; }
  .th-return-stepper__step:not(:last-child)::after {
    top: calc(var(--th-stepper-size) + var(--th-space-1));
    left: calc(var(--th-stepper-size) / 2 - var(--th-stepper-line-width) / 2);
    right: auto;
    width: var(--th-stepper-line-width);
    height: var(--th-space-5);
  }
  .th-return-stepper__circle { margin-bottom: 0; flex-shrink: 0; }
}

/* ── WhatsApp Pulse Animation (enhancement for existing widget) ── */
@keyframes th-wa-pulse {
  0%   { box-shadow: var(--th-whatsapp-shadow), 0 0 0 0 var(--th-whatsapp-pulse-color); }
  70%  { box-shadow: var(--th-whatsapp-shadow), 0 0 0 12px transparent; }
  100% { box-shadow: var(--th-whatsapp-shadow), 0 0 0 0 transparent; }
}
.th-wa-widget.th-pulse-active {
  animation: th-wa-pulse 2s infinite;
}

/* ── Support Form ── */
.th-support-form {
  max-width: 600px;
  display: flex;
  flex-direction: column;
  gap: var(--th-space-4);
}
.th-support-form__group {
  display: flex;
  flex-direction: column;
  gap: var(--th-space-1-5);
}
.th-support-form__label {
  font-size: var(--th-text-sm);
  font-weight: var(--th-font-medium);
  color: var(--th-color-text);
}
.th-support-form__label .required {
  color: var(--th-color-danger);
  margin-left: var(--th-space-0-5);
}
.th-support-form__select {
  padding: var(--th-space-3) var(--th-space-4);
  padding-right: var(--th-space-10);
  font-size: var(--th-text-base);
  color: var(--th-color-text);
  background: var(--th-color-bg);
  border: var(--th-border-width-default) solid var(--th-color-border);
  border-radius: var(--th-radius-lg);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--th-space-4) center;
  transition: border-color var(--th-transition-fast);
}
.th-support-form__select:focus {
  border-color: var(--th-color-primary);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--th-color-primary) 10%, transparent);
}
.th-support-form__file {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--th-space-2);
  padding: var(--th-space-6);
  border: 2px dashed var(--th-color-border);
  border-radius: var(--th-radius-lg);
  color: var(--th-color-text-muted);
  font-size: var(--th-text-sm);
  cursor: pointer;
  transition: border-color var(--th-transition-fast), background var(--th-transition-fast);
}
.th-support-form__file:hover {
  border-color: var(--th-color-primary);
  background: color-mix(in srgb, var(--th-color-primary) 3%, transparent);
}
.th-support-form__file i {
  font-size: var(--th-text-2xl);
}
.th-support-form__file input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.th-support-form__submit {
  align-self: flex-start;
  padding: var(--th-space-3) var(--th-space-6);
  background: var(--th-color-primary);
  color: var(--th-neutral-0);
  border: none;
  border-radius: var(--th-radius-lg);
  font-size: var(--th-text-base);
  font-weight: var(--th-font-semibold);
  cursor: pointer;
  transition: background var(--th-transition-fast);
}
.th-support-form__submit:hover {
  background: var(--th-color-primary-dark, var(--th-ink-900));
}

/* ── FAQ Accordion + Search ── */
.th-faq {
  max-width: 800px;
}
.th-faq__search {
  position: relative;
  margin-bottom: var(--th-space-5);
}
.th-faq__search-input {
  width: 100%;
  padding: var(--th-space-3-5) var(--th-space-4);
  padding-left: var(--th-space-10);
  font-size: var(--th-text-base);
  color: var(--th-color-text);
  background: var(--th-color-bg);
  border: var(--th-border-width-default) solid var(--th-color-border);
  border-radius: var(--th-radius-xl);
  transition: border-color var(--th-transition-fast), box-shadow var(--th-transition-fast);
}
.th-faq__search-input:focus {
  border-color: var(--th-color-primary);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--th-color-primary) 10%, transparent);
}
.th-faq__search-icon {
  position: absolute;
  left: var(--th-space-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--th-color-text-muted);
  font-size: var(--th-text-base);
  pointer-events: none;
}
.th-faq__categories {
  display: flex;
  flex-wrap: wrap;
  gap: var(--th-space-2);
  margin-bottom: var(--th-space-5);
}
.th-faq__cat-btn {
  padding: var(--th-space-1-5) var(--th-space-3);
  background: transparent;
  border: var(--th-border-width-default) solid var(--th-color-border);
  border-radius: var(--th-radius-full);
  font-size: var(--th-text-sm);
  font-weight: var(--th-font-medium);
  color: var(--th-color-text-muted);
  cursor: pointer;
  transition: all var(--th-transition-fast);
}
.th-faq__cat-btn:hover {
  border-color: var(--th-color-primary);
  color: var(--th-color-primary);
}
.th-faq__cat-btn.active {
  background: var(--th-color-primary);
  border-color: var(--th-color-primary);
  color: var(--th-neutral-0);
}
.th-faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--th-space-2);
}
.th-faq__item {
  border: var(--th-border-width-default) solid var(--th-color-border-light);
  border-radius: var(--th-radius-lg);
  overflow: hidden;
  transition: border-color var(--th-transition-fast);
}
.th-faq__item.open {
  border-color: var(--th-color-primary);
}
.th-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--th-space-4);
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: var(--th-text-sm);
  font-weight: var(--th-font-semibold);
  color: var(--th-color-text);
  text-align: left;
  gap: var(--th-space-3);
  transition: background var(--th-transition-fast);
}
.th-faq__question:hover {
  background: var(--th-color-bg-secondary);
}
.th-faq__question i {
  flex-shrink: 0;
  font-size: var(--th-text-xs);
  color: var(--th-color-text-muted);
  transition: transform 0.3s ease;
}
.th-faq__item.open .th-faq__question i {
  transform: rotate(180deg);
}
.th-faq__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.th-faq__item.open .th-faq__answer {
  max-height: 500px;
}
.th-faq__answer-content {
  padding: 0 var(--th-space-4) var(--th-space-4);
  font-size: var(--th-text-sm);
  color: var(--th-color-text-muted);
  line-height: var(--th-leading-relaxed);
}
.th-faq__empty {
  text-align: center;
  padding: var(--th-space-8) var(--th-space-4);
  color: var(--th-color-text-muted);
  font-size: var(--th-text-sm);
}
.th-faq__empty i {
  display: block;
  font-size: var(--th-text-3xl);
  margin-bottom: var(--th-space-3);
  color: var(--th-color-border);
}

@media (max-width: 576px) {
  .th-faq__question { padding: var(--th-space-3); font-size: var(--th-text-xs-plus); }
  .th-faq__answer-content { padding: 0 var(--th-space-3) var(--th-space-3); font-size: var(--th-text-xs); }
  .th-support-form__submit { width: 100%; text-align: center; }
  .th-support-form__file { padding: var(--th-space-4); }
}

/* ── Reduced motion: FAZ 6.3 ── */
@media (prefers-reduced-motion: reduce) {
  .th-wa-widget.th-pulse-active { animation: none; }
  .th-faq__answer { transition: none; }
  .th-faq__question i { transition: none; }
}


/* ═══════════════════════════════════════════════════════════════════
   FAZ 6.4 — SOSYAL KANIT (Social Proof)
   Live viewer, purchase notification, consistent star rating,
   photo review incentive
   ═══════════════════════════════════════════════════════════════════ */

/* ── Live Viewer Counter ("X kişi görüntülüyor") ── */
.th-live-viewers {
  display: inline-flex;
  align-items: center;
  gap: var(--th-space-1-5);
  font-size: var(--th-text-xs);
  color: var(--th-color-text-muted);
}
.th-live-viewers__dot {
  width: var(--th-space-2);
  height: var(--th-space-2);
  border-radius: var(--th-radius-full);
  background: var(--th-color-success);
  animation: th-live-pulse 2s ease-in-out infinite;
}
@keyframes th-live-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}
.th-live-viewers__count {
  font-weight: var(--th-font-semibold);
  color: var(--th-color-text);
}

/* ── Social Proof Notification Toast ("Y kişi satın aldı") ── */
.th-social-toast {
  position: fixed;
  bottom: var(--th-space-6);
  left: var(--th-space-6);
  z-index: var(--th-social-proof-z);
  display: flex;
  align-items: center;
  gap: var(--th-space-3);
  padding: var(--th-social-proof-padding);
  background: var(--th-social-proof-bg);
  color: var(--th-social-proof-text);
  border-radius: var(--th-social-proof-radius);
  box-shadow: var(--th-social-proof-shadow);
  font-size: var(--th-social-proof-font);
  max-width: 340px;
  opacity: 0;
  transform: translateY(var(--th-space-4));
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}
.th-social-toast.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.th-social-toast__img {
  width: var(--th-space-10);
  height: var(--th-space-10);
  border-radius: var(--th-radius-md);
  object-fit: cover;
  flex-shrink: 0;
}
.th-social-toast__info {
  flex: 1;
  min-width: 0;
}
.th-social-toast__name {
  font-weight: var(--th-font-semibold);
  color: var(--th-social-proof-accent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.th-social-toast__action {
  font-size: var(--th-text-xs);
  color: var(--th-social-proof-text);
  opacity: 0.8;
}
.th-social-toast__time {
  font-size: var(--th-text-2xs);
  color: var(--th-social-proof-view-icon);
  margin-top: var(--th-space-0-5);
}
.th-social-toast__close {
  position: absolute;
  top: var(--th-space-2);
  right: var(--th-space-2);
  background: none;
  border: none;
  color: var(--th-social-proof-view-icon);
  font-size: var(--th-text-xs);
  cursor: pointer;
  padding: var(--th-space-1);
  opacity: 0;
  transition: opacity var(--th-transition-fast);
}
.th-social-toast:hover .th-social-toast__close {
  opacity: 1;
}

@media (max-width: 768px) {
  .th-social-toast {
    left: var(--th-space-3);
    right: var(--th-space-3);
    bottom: calc(var(--th-space-16) + env(safe-area-inset-bottom, 0px));
    max-width: none;
  }
}

/* ── Consistent Star Rating Component ── */
.th-stars {
  display: inline-flex;
  align-items: center;
  gap: var(--th-space-0-5);
  --th-star-size: var(--th-text-sm);
  --th-star-color: var(--th-color-accent);
  --th-star-empty: var(--th-neutral-300);
}
.th-stars i {
  font-size: var(--th-star-size);
  color: var(--th-star-empty);
}
.th-stars i.filled {
  color: var(--th-star-color);
}
.th-stars i.half {
  position: relative;
  color: var(--th-star-empty);
}
.th-stars i.half::before {
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  overflow: hidden;
  color: var(--th-star-color);
}
.th-stars--lg {
  --th-star-size: var(--th-text-lg);
}
.th-stars--sm {
  --th-star-size: var(--th-text-xs);
}

/* ── Photo Review Incentive Banner ── */
.th-photo-review-cta {
  display: flex;
  align-items: center;
  gap: var(--th-space-3);
  padding: var(--th-space-3) var(--th-space-4);
  background: color-mix(in srgb, var(--th-color-accent) 6%, transparent);
  border: var(--th-border-width-default) solid color-mix(in srgb, var(--th-color-accent) 18%, transparent);
  border-radius: var(--th-radius-lg);
}
.th-photo-review-cta__icon {
  flex-shrink: 0;
  width: var(--th-space-10);
  height: var(--th-space-10);
  border-radius: var(--th-radius-full);
  background: color-mix(in srgb, var(--th-color-accent) 12%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--th-text-lg);
  color: var(--th-color-accent);
}
.th-photo-review-cta__text {
  flex: 1;
  font-size: var(--th-text-sm);
  color: var(--th-color-text);
  line-height: var(--th-leading-normal);
}
.th-photo-review-cta__text strong {
  font-weight: var(--th-font-semibold);
  color: var(--th-color-accent);
}
.th-photo-review-cta__btn {
  flex-shrink: 0;
  padding: var(--th-space-2) var(--th-space-4);
  background: var(--th-color-accent);
  color: var(--th-neutral-0);
  border: none;
  border-radius: var(--th-radius-md);
  font-size: var(--th-text-sm);
  font-weight: var(--th-font-semibold);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--th-transition-fast);
}
.th-photo-review-cta__btn:hover {
  background: var(--th-orange-700);
  color: var(--th-neutral-0);
}

@media (max-width: 576px) {
  .th-photo-review-cta { flex-direction: column; text-align: center; }
  .th-photo-review-cta__btn { width: 100%; }
}

/* ── Reduced motion: FAZ 6.4 ── */
@media (prefers-reduced-motion: reduce) {
  .th-live-viewers__dot { animation: none; }
  .th-social-toast { transition: none; }
}