/* === 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 rgba(20, 97, 58, 0.2);
}

/* ── 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: 50%;
}

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

.th-ap {
  position: fixed;
  bottom: 16px;
  right: 16px;
  width: 380px;
  max-height: 520px;
  background: #1a1a2e;
  color: #e0e0e0;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  z-index: 99999;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 12px;
  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: 10px 14px;
  background: #16213e;
  cursor: move;
  user-select: none;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.th-ap__title {
  font-weight: 700;
  font-size: 13px;
  color: #00d2ff;
  letter-spacing: 0.5px;
}
.th-ap__actions { display: flex; gap: 6px; }
.th-ap__btn {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: #aaa;
  padding: 2px 10px;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
  min-height: 24px;
  min-width: auto;
}
.th-ap__btn:hover { background: rgba(255,255,255,0.15); color: var(--th-color-text-inverse); }
.th-ap__btn--close { font-size: 16px; padding: 0 6px; }

.th-ap__metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.05);
  padding: 8px 12px;
}
.th-ap__metric { text-align: center; }
.th-ap__metric-val {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: var(--th-color-text-inverse);
  line-height: 1.2;
}
.th-ap__metric-lbl {
  display: block;
  font-size: 10px;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.th-ap__perf {
  display: flex;
  gap: 12px;
  padding: 6px 14px;
  font-size: 11px;
  color: #7f8c8d;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.th-ap__log-header {
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #666;
}

.th-ap__log {
  list-style: none;
  margin: 0;
  padding: 0 8px 8px;
  overflow-y: auto;
  flex: 1;
  max-height: 280px;
  scrollbar-width: thin;
  scrollbar-color: #333 transparent;
}

.th-ap__log-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border-radius: 6px;
  flex-wrap: wrap;
  animation: th-ap-fadein 0.3s ease;
}
.th-ap__log-item:hover { background: rgba(255,255,255,0.04); }

.th-ap__log-time {
  font-size: 10px;
  color: #555;
  flex-shrink: 0;
  width: 50px;
}

.th-ap__badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  background: #2d3436;
  color: #dfe6e9;
  text-transform: lowercase;
}
.th-ap__badge--cart { background: #00b894; color: var(--th-color-text-inverse); }
.th-ap__badge--checkout { background: #6c5ce7; color: var(--th-color-text-inverse); }
.th-ap__badge--view { background: #0984e3; color: var(--th-color-text-inverse); }

.th-ap__log-count {
  font-size: 10px;
  color: #636e72;
  flex-shrink: 0;
}

.th-ap__log-detail {
  font-size: 10px;
  color: #999;
  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: 480px) {
  .th-ap { width: calc(100% - 16px); right: 8px; bottom: 8px; 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: 8px;
    padding: 1px 10px;
    border-radius: var(--th-radius-xl);
    background: var(--th-color-bg-secondary);
    color: var(--th-neutral-400);
    font-weight: 500;

    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: 5px 14px;
    font-size: 12.5px;
    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: 15px;
    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: 10px;
    }

}

/* Satırlar */

/* İkonlar – sakin */

/* Sayaç satırı */

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

.qsf-topbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 16px 0 18px;
}

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

.qsf-result-count strong {
    font-weight: 600;
    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%;
      border-radius: 22px 22px 22px 22px;
      overflow: hidden;
      background: linear-gradient(150deg, #df1e14 0%, #ef4a25 40%, #ff7848 75%, #ffaa88 100%); /* TODO: legacy-color */
      animation: fsale-in .42s cubic-bezier(.22,1,.36,1) both;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      padding: 20px 25px 44px 25px;
      gap: 0;
    }

    @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%, rgba(255,255,255,.45) 50%, transparent 95%);
      z-index: 2;
    }

    .fsale::after {
      content: "";
      position: absolute;
      width: 300px; height: 300px;
      border-radius: var(--th-radius-full);
      background: rgba(255,255,255,.06);
      bottom: -140px; right: -100px;
      pointer-events: none;
    }

    /* ── CANLI BADGE ── */
    .fsale__badge {
      position: absolute;
      top: 14px; right: 16px;
      display: flex;
      align-items: center;
      gap: 5px;
      background: rgba(0,0,0,.18);
      border: 1px solid rgba(255,255,255,.22);
      border-radius: 999px;
      padding: 4px 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: 9.5px;
      font-weight: 700;
      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: 20px;
    font-weight: 600;
    color: var(--th-color-text-inverse);
    text-align: center;
    margin: 0 0 16px;
    line-height: 1.2;
    letter-spacing: -.25px;
    position: relative;
    z-index: 1;
    /* padding-right: 60px; */
}

    /* ════════════════════════════════════
       2. SAYAÇ — beyaz pill
    ════════════════════════════════════ */
    .fsale__timer {
      display: flex;
      align-items: center;
      background: var(--th-color-bg);
      border-radius: 999px;
      padding: 11px 10px;
      margin-bottom: 14px;
      position: relative;
      z-index: 1;
      box-shadow: 0 4px 18px rgba(0,0,0,.11);
    }

    .fsale__timer-unit {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
      position: relative;
    }

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

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

    .fsale__timer-num.is-urgent { color: #df1e14; } /* TODO: legacy-color */

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

    /* ════════════════════════════════════
       3. AÇIKLAMA
    ════════════════════════════════════ */
    .fsale__desc {
      font-size: 12.5px;
      font-weight: 500;
      color: rgba(255,255,255,.82);
      text-align: center;
      margin: 0 0 14px;
      line-height: 1.5;
      position: relative;
      z-index: 1;
    }

    /* ════════════════════════════════════
       4. ÇOKLU ÜRÜN İNDİRİM TABLOSU
    ════════════════════════════════════ */
    .fsale__bulk {
      background: rgba(255,255,255,.13);
      border: 1px solid rgba(255,255,255,.22);
      border-radius: var(--th-radius-xl);
      overflow: hidden;
      margin-bottom: 14px;
      position: relative;
      z-index: 1;
    }

    .fsale__bulk-head {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      padding: 10px 14px 9px;
      border-bottom: 1px solid rgba(255,255,255,.15);
    }

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

    .fsale__bulk-title {
      font-size: 12.5px;
      font-weight: 700;
      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: 9px 14px;
      gap: 6px;
      border-right: 1px solid rgba(255,255,255,.10);
      border-bottom: 1px solid rgba(255,255,255,.10);
    }

    /* 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: 5px;
    }

    .fsale__bulk-qty-num {
      font-size: 13px;
      font-weight: 700;
      color: var(--th-color-text-inverse);
    }

    .fsale__bulk-qty-label {
      font-size: 10.5px;
      font-weight: 600;
      color: rgba(255,255,255,.65);
    }

    .fsale__bulk-disc {

      border: 1px solid rgba(255,255,255,.30);
      border-radius: 999px;
      padding: 3px 9px;
      font-size: 11.5px;
      font-weight: 600;
      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: rgba(255,255,255,.55);
    }

    .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: 7px;
    text-decoration: none;
    background: var(--th-color-bg);
    color: #df1e14; /* TODO: legacy-color */
    font-size: 13.5px;
    padding: 13px 1px;
    border-radius: 999px;
    width: 100%;
    position: relative;
    z-index: 1;
}

    .fsale__cta:hover {
      background: var(--th-red-50);
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(0,0,0,.16);
    }

    .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: 20px 25px 44px 25px;
        border-radius: 22px 0px 0px 22px;
      }

      .fsale__title { font-size: 22px; }

      .fsale__timer { padding: 12px 20px; }
      .fsale__timer-num { font-size: 28px; }

      .fsale__bulk-title { font-size: 13px; }
      .fsale__bulk-qty-num { font-size: 14px; }
      .fsale__bulk-disc { font-size: 12px; }

      .fsale__cta { font-size: 14px; }
    }

            @media (max-width: 768px) {
      .fsale {
        max-width: 640px;
        padding: 20px 25px 44px 25px;
       border-radius: 22px 22px 22px 22px;

      background: linear-gradient(165deg, #df1e14 0%, #ef4a25 40%, #ff7848 75%, #ffaa88 100%); /* TODO: legacy-color */
      }
      .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:48px auto 0;padding:0 16px;color: var(--th-color-text-secondary);line-height:1.7}
.th-cat-seo__heading{font-size:18px;font-weight:700;color: var(--th-color-text);margin:0 0 12px;padding-bottom:8px;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:32px}
.th-cat-seo__intro p,.th-cat-seo__guide p,.th-cat-seo__faq-a{font-size:14px;margin:0;color: var(--th-color-text-muted)}
.th-cat-seo__link-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.th-cat-seo__link{display:inline-block;padding:6px 14px;border:1px solid var(--th-color-border-strong);border-radius:20px;font-size:13px;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:8px;border:1px solid var(--th-color-border);border-radius: var(--th-radius-md);overflow:hidden}
.th-cat-seo__faq-item[open]{margin-bottom:12px}
.th-cat-seo__faq-q{font-size:15px;font-weight:600;color: var(--th-color-text);padding:12px 16px;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:18px;font-weight:400;color: var(--th-color-text-placeholder);flex-shrink:0;margin-left:12px}
.th-cat-seo__faq-item[open] .th-cat-seo__faq-q::after{content:'\2212'}
.th-cat-seo__faq-a{font-size:14px;padding:0 16px 12px;margin:0}
@media (max-width: 768px) {.th-cat-seo{margin-top:32px;padding:0 12px}.th-cat-seo__heading{font-size:16px}}

/* === SEO Landing Page Engine === */
.th-lp{max-width:900px;margin:48px auto 0;padding:0 16px;color: var(--th-color-text-secondary);line-height:1.7}
.th-lp__title{font-size:22px;font-weight:700;color: var(--th-color-text);margin:0 0 16px}
.th-lp__heading{font-size:18px;font-weight:700;color: var(--th-color-text);margin:0 0 12px;padding-bottom:8px;border-bottom:2px solid var(--th-color-accent)}
.th-lp__intro,.th-lp__guide,.th-lp__faq,.th-lp__links{margin-bottom:32px}
.th-lp__intro p,.th-lp__guide p,.th-lp__faq-a{font-size:14px;margin:0;color: var(--th-color-text-muted)}
.th-lp__link-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.th-lp__link{display:inline-block;padding:6px 14px;border:1px solid var(--th-color-border-strong);border-radius:20px;font-size:13px;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:8px;border:1px solid var(--th-color-border);border-radius: var(--th-radius-md);overflow:hidden}
.th-lp__faq-item[open]{margin-bottom:12px}
.th-lp__faq-q{font-size:15px;font-weight:600;color: var(--th-color-text);padding:12px 16px;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:18px;font-weight:400;color: var(--th-color-text-placeholder);flex-shrink:0;margin-left:12px}
.th-lp__faq-item[open] .th-lp__faq-q::after{content:'\2212'}
.th-lp__faq-a{font-size:14px;padding:0 16px 12px;margin:0}
@media (max-width: 768px) {.th-lp{margin-top:32px;padding:0 12px}.th-lp__title{font-size:19px}.th-lp__heading{font-size:16px}}
.th-lp__related{margin-top:32px}
/* ── Internal Linking Engine (Kategori → Landing) ── */
.th-il{max-width:1200px;margin:40px auto 0;padding:0 16px}
.th-il__heading{font-size:18px;font-weight:700;color: var(--th-color-text);margin:0 0 8px;padding-bottom:8px;border-bottom:2px solid var(--th-color-accent)}
.th-il__desc{font-size:13px;color:var(--th-neutral-500);margin:0 0 14px}
.th-il__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.th-il__link{display:block;padding:10px 14px;background:var(--th-color-bg-secondary);border-radius: var(--th-radius-md);color: var(--th-color-text-secondary);text-decoration:none;font-size:14px;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:13px;padding:8px 10px}}



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

.qsf-quick-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

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

.qsf-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 13px;
    border-radius: 999px;
    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: 14px;
    line-height: 1;
}

/* hover */
.qsf-btn:hover {
    transform: translateY(-1px);
    background: rgba(0,0,0,.04);
}

/* ==================================================
   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: #e91e63; /* TODO: legacy-color */
    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: 500;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

/* X işareti */
.qsf-btn.is-active::after {
    content: "×";
    font-size: 14px;
    margin-left: 6px;
    opacity: .7;
}

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

/* radio gizle */

/* seçili */

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

.category-filter-list .lag-checkbox {
    padding: 6px 8px;
    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: 500;
    color: var(--th-color-info);
}

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

@media (max-width: 768px) {

    .qsf-topbar {
        gap: 6px;
    }

    .qsf-btn {
        font-size: 12px;
        padding: 5px 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: 10px;
    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: 15px 10px
}

.category-filter-order .list-wrap .list li .lag-checkbox .siralama99 {
    font-size: 14px;
    background: var(--th-color-bg);
    font-weight: 600;
    color: #635e62; /* TODO: legacy-color */
    text-align: center;
    border-radius: var(--th-radius-md);
    padding: 22px 4px
}

.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: 5px;
    margin-right: 5px
}

.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: 10px;
    margin-top: 10px;
    font-size: 16px
}

.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: rgb(181 181 181/50%);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5)
}

.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: 16px;
    color: var(--th-neutral-900);
    margin-bottom: 10px;
    font-weight: 400;
    line-height: 25px
}

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

.native-modal.show .hizli-sepet .modal-content .product-reviews .stars {
    margin: 15px 0
}

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

.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: 14px;
    margin-bottom: 15px
}

.native-modal.show .hizli-sepet .carousel-indicators li {
    width: 10px;
    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: 999;
    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: 16px;
    padding-top: 3px;
    -webkit-box-shadow: 0-2px 18px -3px rgb(0 0 0/58%);
    box-shadow: 0-2px 18px -3px rgb(0 0 0/58%)
}

.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: 5px 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: 10px;
    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: 400;
    font-size: 15px;
    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: 10px
    }

    

    .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: 10px 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: 10px;
        position: relative
    }

    footer .info .title::after {
        content: "+";
        right: 10px;
        top: 3px;
        bottom: 0;
        position: absolute;
        font-size: 20px;
        margin-bottom: 10px
    }

    footer .info .fs {
        text-align: center;
        border: 0;
        margin-bottom: 15px;
        padding: 10px
    }

    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: 10px 0
    }
}

/* === legacy.css'ten taşındı — S13 breadcrumb separator === */
.breadcrumb-item + .breadcrumb-item::before {
  font-family: "Font Awesome 5 Free";
  content: "\f105" !important;
  font-weight: 900;
  font-size: 11px;
  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 rgba(198,40,40,0); }
  50% { box-shadow: 0 0 0 4px rgba(198,40,40,.15); }
}

/* === legacy.css'ten taşındı — S13 .th-tag-x === */
.th-tag-x { font-size: 14px; line-height: 1; margin-left: 2px; 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: 10px;
    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: 14px
}

.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: 14px;
    font-weight: 500;
    border-radius: var(--th-radius-md);
    height: 40px;
    margin-right: 10px
}

.p-g-mod.p-g-mod-t-39 .p-g-mod-body .btn-secondary {
    font-size: 15px;
    font-weight: 500;
    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: 12px;
        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: 12px;
    height: 55px;
    line-height: 18px;
    max-width: 100%;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    margin-top: 5px;
    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: 12px;
    padding-right: 15px;
    padding-top: -10px;
    margin-top: -20px
}

.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: 12px;
    text-decoration: line-through;
    padding-right: 15px;
    padding-top: -10px
}

.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: 14px;
    font-weight: 500;
    padding-right: 15px;
    padding-top: -10px;
    padding-bottom: 20px
}

.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: 10px;
    padding-left: 4px;
    padding-top: 3px
}

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

/* === legacy.css'ten taşındı — B10 custom-module-code-11205 === */
.row .custom-module-code-11205 {
    margin-top: 7px;
    margin-right: -2px;
    margin-left: -2px
}

/* ── Platform Nötralizasyon — Z-3 ── */
/* Platform: .sale-price { color: #555; font-size: 17px; font-weight: 500 } */
.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: 12px; 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: 700;
  color: var(--th-color-primary);
}
.sale-variant-price .price,
.sale-list-price .price {
  color: var(--th-color-text-primary, #1a1a1a);
}
.sale-list-price .price {
  font-size: var(--th-font-size-sm);
  font-weight: 400;
  text-decoration: line-through;
  color: var(--th-color-text-muted);
}