/** Shopify CDN: Minification failed

Line 5626:8 Expected identifier but found whitespace
Line 5626:9 Unexpected "#0284c7"

**/
/* ==========================================================================
   DropMES Pro - Modern Lüks Mavi & Zümrüt Yeşili Tasarım Sistemi (v4.0)
   Özgün, Canlı, Prestijli E-Ticaret Kimliği (Kopya Değil, Dünya Standardı)
   ========================================================================== */

:root {
  /* Ana Renkler: Safir Mavi, Zümrüt Yeşili, Camgöbeği, Gece Mavisi */
  --dm-blue: #0284c7;
  --dm-blue-hover: #0369a1;
  --dm-cobalt: #2563eb;
  --dm-emerald: #10b981;
  --dm-emerald-dark: #059669;
  --dm-cyan: #06b6d4;
  --dm-dark: #0f172a;
  --dm-dark-sub: #1e293b;
  --dm-text: #334155;
  --dm-light-text: #64748b;
  --dm-bg: #f8fafc;
  --dm-card-bg: #ffffff;
  --dm-border: #e2e8f0;
  --dm-radius: 10px;
  --dm-shadow-sm: 0 2px 6px rgba(15, 23, 42, 0.04);
  --dm-shadow-md: 0 10px 25px -5px rgba(2, 132, 199, 0.08), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
  --dm-shadow-lg: 0 20px 35px -10px rgba(2, 132, 199, 0.18);
  --dm-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--dm-font);
  background-color: var(--dm-bg);
  color: var(--dm-text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
/* K-04/K-05: CSS ile dil ve fiyat gizleme sistemi KALDIRILDI.
   Dil artik Shopify locale + '| t' ceviri filtresi ile sunucuda
   belirleniyor; fiyat money_with_currency ile aktif pazarin para
   biriminde basiliyor. Sayfa yalnizca aktif dilin metnini indiriyor. */

.ty-container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 18px;
}

/* ==================== 1. HEADER (LÜKS MAVİ & ZÜMRÜT) ==================== */
.ty-header-wrapper {
  background: #ffffff;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.05);
  position: sticky;
  top: 0;
  z-index: 200;
}

.ty-top-bar {
  background: linear-gradient(90deg, #0f172a 0%, #1e293b 100%);
  font-size: 12px;
  color: #94a3b8;
  padding: 6px 0;
  width: 100%;
}
.ty-top-bar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.ty-top-left-promo {
  font-size: 12px;
  color: #38bdf8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ty-top-right-links {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ty-top-links-desktop {
  display: flex;
  align-items: center;
  gap: 14px;
}
.ty-market-direct-pills {
  display: flex;
  align-items: center;
  gap: 4px;
}
.ty-market-top-btn {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 3px;
  transition: all 0.2s;
  white-space: nowrap;
}
.ty-market-top-btn.is-current {
  background: #0284c7;
  border-color: #38bdf8;
}
.ty-market-top-btn:hover {
  background: rgba(255, 255, 255, 0.25);
}
.ty-lang-toggle-pills {
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 14px;
  padding: 2px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.ty-lang-toggle-pills button {
  background: transparent;
  color: #94a3b8;
  border: none;
  border-radius: 12px;
  padding: 2px 7px;
  font-size: 10.5px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s;
}
.ty-lang-toggle-pills button.active-lang {
  background: #ffffff;
  color: #0f172a;
}
.ty-top-market-btn {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: #fff;
  border-radius: 6px;
  padding: 3px 6px;
  font-size: 11px;
  cursor: pointer;
}
.ty-top-bar a {
  color: #cbd5e1;
  text-decoration: none;
  font-weight: 600;
  font-size: 11.5px;
  transition: color 0.2s;
}
.ty-top-bar a:hover {
  color: #38bdf8;
}
.hide-on-mobile {
  display: block;
}
@media (max-width: 768px) {
  .hide-on-mobile {
    display: none !important;
  }
  .ty-top-bar-inner {
    justify-content: center;
  }
  .ty-top-right-links {
    width: 100%;
    justify-content: space-between;
  }
  .ty-main-header {
    flex-wrap: wrap;
    gap: 12px;
    padding: 10px 0;
  }
  .ty-brand-logo {
    order: 1;
  }
  .ty-user-actions {
    order: 2;
    margin-left: auto;
    gap: 12px;
  }
  .ty-search-box {
    order: 3;
    width: 100%;
    flex: 0 0 100%;
  }
  .ty-nav-strip {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }
  .ty-nav-strip::-webkit-scrollbar {
    display: none;
  }
}

.ty-main-header {
  padding: 16px 0 14px;
  display: flex;
  align-items: center;
  gap: 32px;
}

.ty-brand-logo a {
  text-decoration: none;
  font-size: 32px;
  font-weight: 900;
  color: var(--dm-dark);
  letter-spacing: -1.2px;
  display: flex;
  align-items: center;
  gap: 2px;
}
.ty-brand-logo .brand-highlight {
  background: linear-gradient(135deg, #0284c7 0%, #10b981 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Arama Çubuğu */
.ty-search-box {
  flex: 1;
  position: relative;
}
.ty-search-input {
  width: 100%;
  background: #f1f5f9;
  border: 2px solid transparent;
  border-radius: 30px;
  padding: 12px 50px 12px 22px;
  font-size: 14px;
  color: #0f172a;
  outline: none;
  transition: all 0.25s ease;
}
.ty-search-input:focus {
  background: #ffffff;
  border-color: var(--dm-blue);
  box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.15);
}
.ty-search-btn {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: linear-gradient(135deg, #0284c7 0%, #10b981 100%);
  color: #ffffff;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.3);
}

.ty-search-suggestions {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--dm-border);
  border-radius: 12px;
  box-shadow: 0 15px 35px rgba(0,0,0,0.1);
  padding: 16px;
  z-index: 100;
}
.ty-search-box:focus-within .ty-search-suggestions {
  display: block;
}
.ty-suggest-heading {
  font-size: 12px;
  font-weight: 800;
  color: var(--dm-light-text);
  margin-bottom: 10px;
}
.ty-suggest-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ty-suggest-chip {
  padding: 6px 14px;
  background: #f1f5f9;
  border-radius: 20px;
  font-size: 12.5px;
  color: #334155;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.2s;
}
.ty-suggest-chip:hover {
  background: var(--dm-blue);
  color: #fff;
}

/* Kullanıcı Menüsü */
.ty-user-actions {
  display: flex;
  align-items: center;
  gap: 22px;
}
.ty-user-action-dropdown-wrap {
  position: relative;
}
.ty-action-item {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--dm-dark);
  font-size: 13.5px;
  font-weight: 700;
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 0;
  transition: color 0.2s;
}
.ty-action-item:hover {
  color: var(--dm-blue);
}
.ty-badge-count {
  position: absolute;
  top: -6px;
  left: 12px;
  background: linear-gradient(135deg, #0284c7 0%, #10b981 100%);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  border-radius: 10px;
  padding: 2px 7px;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.3);
}

.ty-user-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  background: #fff;
  border: 1px solid var(--dm-border);
  border-radius: 10px;
  box-shadow: 0 15px 30px rgba(0,0,0,0.1);
  min-width: 190px;
  padding: 14px;
  z-index: 150;
}
.ty-user-action-dropdown-wrap:hover .ty-user-dropdown-menu {
  display: block;
}
.ty-dropdown-btn-login {
  display: block;
  text-align: center;
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  color: #fff;
  text-decoration: none;
  padding: 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 8px;
}
.ty-dropdown-btn-register {
  display: block;
  text-align: center;
  background: #fff;
  color: var(--dm-dark);
  border: 1px solid #cbd5e1;
  text-decoration: none;
  padding: 8px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
}
.ty-dropdown-divider {
  height: 1px;
  background: #f1f5f9;
  margin: 12px 0;
}
.ty-dropdown-link {
  display: block;
  padding: 6px 0;
  color: #475569;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
}
.ty-dropdown-link:hover {
  color: var(--dm-blue);
}

/* Navigasyon Şeridi */
.ty-nav-strip {
  border-top: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 12px 0;
  position: relative;
}
.ty-nav-item {
  text-decoration: none;
  color: #1e293b;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  transition: color 0.2s;
}
.ty-nav-item:hover, .ty-nav-item.active {
  color: var(--dm-blue);
}
.ty-tag-badge {
  background: linear-gradient(135deg, #0284c7 0%, #10b981 100%);
  color: #fff;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 800;
}
.ty-tag-badge.badge-red {
  background: #10b981;
}

/* Mega Menü */
.ty-mega-menu-trigger {
  position: relative;
}
.ty-mega-menu-panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 800px;
  background: #fff;
  border: 1px solid var(--dm-border);
  border-radius: 12px;
  box-shadow: var(--dm-shadow-lg);
  padding: 28px;
  z-index: 150;
  grid-template-columns: repeat(3, 1fr) 220px;
  gap: 24px;
}
.ty-mega-menu-trigger:hover .ty-mega-menu-panel {
  display: grid;
}
.ty-mega-col h4 {
  font-size: 14px;
  font-weight: 800;
  color: var(--dm-dark);
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1.5px solid #f1f5f9;
}
.ty-mega-col ul {
  list-style: none;
}
.ty-mega-col li {
  margin-bottom: 10px;
}
.ty-mega-col a {
  color: #475569;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  transition: color 0.2s;
}
.ty-mega-col a:hover {
  color: var(--dm-blue);
  font-weight: 700;
}
.ty-mega-promo-card {
  background: linear-gradient(135deg, #f0fdf4 0%, #e0f2fe 100%);
  border: 1px solid #bae6fd;
  border-radius: 10px;
  padding: 16px;
}
.ty-mega-promo-card h5 {
  font-size: 13.5px;
  font-weight: 800;
  color: #0369a1;
  margin-bottom: 6px;
}
.ty-mega-promo-card p {
  font-size: 12px;
  color: #334155;
  margin-bottom: 12px;
  line-height: 1.4;
}
.ty-mega-promo-link {
  font-size: 12px;
  font-weight: 800;
  color: var(--dm-blue);
  text-decoration: none;
}

/* ==================== 2. HİKAYELER / ÇEMBER KATEGORİLER ==================== */
.ty-story-section {
  padding: 20px 0 10px;
}
.ty-story-list {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 8px 0;
}
.ty-story-list::-webkit-scrollbar {
  display: none;
}
.ty-story-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  width: 86px;
  flex-shrink: 0;
}
.ty-story-circle {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border: 2px solid #bae6fd;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.12);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  font-size: 28px;
}
.ty-story-item:hover .ty-story-circle {
  transform: translateY(-4px) scale(1.06);
  border-color: var(--dm-blue);
  box-shadow: 0 8px 20px rgba(2, 132, 199, 0.25);
  background: #ffffff;
}
.ty-story-title {
  font-size: 12px;
  font-weight: 700;
  color: #1e293b;
  text-align: center;
  line-height: 1.3;
}

/* ==================== 3. GÜNÜN FIRSATLARI (CANLI GERİ SAYIM) ==================== */
.ty-flash-section {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 40%, #059669 100%);
  border-radius: 16px;
  padding: 20px 24px;
  margin: 18px 0 28px;
  box-shadow: 0 10px 30px rgba(2, 132, 199, 0.25);
}
.ty-flash-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  color: #ffffff;
}
.ty-flash-title-area {
  display: flex;
  align-items: center;
  gap: 16px;
}
.ty-flash-title {
  font-size: 22px;
  font-weight: 900;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -0.5px;
}
.ty-countdown-box {
  display: flex;
  align-items: center;
  gap: 5px;
}
.ty-count-digit {
  background: #ffffff;
  color: #0369a1;
  font-size: 15px;
  font-weight: 900;
  padding: 4px 9px;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.ty-count-colon {
  font-weight: 900;
  color: #ffffff;
  font-size: 16px;
}
.ty-flash-see-all {
  color: #ffffff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.15);
  padding: 6px 14px;
  border-radius: 20px;
  backdrop-filter: blur(4px);
}
.ty-flash-see-all:hover {
  background: rgba(255, 255, 255, 0.25);
}
.ty-flash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(195px, 1fr));
  gap: 14px;
}

/* ==================== 4. KAMPANYA BANNERLARI ==================== */
.ty-promo-banners-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 24px 0;
}
.ty-promo-banner-card {
  border-radius: 14px;
  overflow: hidden;
  padding: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-decoration: none;
  color: #ffffff;
  box-shadow: var(--dm-shadow-md);
  transition: all 0.3s ease;
}
.ty-promo-banner-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--dm-shadow-lg);
}
.banner-blue { background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%); }
.banner-emerald { background: linear-gradient(135deg, #059669 0%, #10b981 100%); }
.banner-dark { background: linear-gradient(135deg, #0f172a 0%, #334155 100%); }
.ty-banner-text-box h3 { font-size: 19px; font-weight: 900; margin-bottom: 6px; }
.ty-banner-text-box p { font-size: 13px; opacity: 0.92; margin-bottom: 14px; }
.ty-banner-btn { display: inline-block; background: #ffffff; color: #0f172a; padding: 7px 16px; border-radius: 20px; font-size: 12px; font-weight: 800; }
.ty-banner-icon { font-size: 52px; }

/* ==================== 5. SOL FİLTRE ÇUBUĞU ==================== */
.ty-collection-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 24px;
  margin-top: 24px;
  margin-bottom: 60px;
  transition: all 0.3s ease;
}

/* ⚙️ Filtreleri Gizle / Geniş Ekran Modu */
.ty-collection-layout.sidebar-hidden {
  grid-template-columns: 1fr;
}
.ty-collection-layout.sidebar-hidden #TySidebarContainer {
  display: none;
}

.ty-btn-toggle-sidebar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: #ffffff;
  border: 1.5px solid var(--dm-border);
  border-radius: 30px;
  font-size: 13px;
  font-weight: 800;
  color: var(--dm-dark);
  cursor: pointer;
  box-shadow: var(--dm-shadow-sm);
  transition: all 0.2s;
}
.ty-btn-toggle-sidebar:hover {
  background: #f0f9ff;
  border-color: var(--dm-blue);
  color: var(--dm-blue);
}

.ty-filter-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  margin-bottom: 8px;
  border-bottom: 1.5px solid #f1f5f9;
}
.ty-sidebar-head-title {
  font-size: 15px;
  font-weight: 900;
  color: var(--dm-dark);
}
.ty-btn-clear-filters {
  background: none;
  border: none;
  color: var(--dm-blue);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: underline;
}

.ty-active-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  padding: 10px 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 13px;
  color: #166534;
}
.ty-btn-reset-tag {
  background: #166534;
  color: #fff;
  border: none;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.ty-sidebar-filters {
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid var(--dm-border);
  padding: 20px;
  box-shadow: var(--dm-shadow-sm);
}

/* 🌍 Market & Teslimat Kartları Modülü (Sol Filtre En Üstü) */
.ty-market-cards-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.ty-market-card-item {
  display: block;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  background: #f8fafc;
  transition: all 0.25s ease;
}
.ty-market-card-item input {
  display: none;
}
.ty-market-card-inner {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ty-market-icon {
  font-size: 20px;
}
.ty-market-text strong {
  display: block;
  font-size: 13px;
  color: var(--dm-dark);
  font-weight: 800;
  line-height: 1.2;
}
.ty-market-text small {
  display: block;
  font-size: 11px;
  color: #64748b;
  margin-top: 2px;
}
.ty-market-card-item:hover, .ty-market-card-item.is-active {
  border-color: var(--dm-blue);
  background: #f0f9ff;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.12);
}
.ty-market-card-item.is-active .ty-market-text strong {
  color: var(--dm-blue);
}

/* Ürün Üstü Hızlı Pazar Sekmeleri (Pills) */
.ty-collection-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  padding: 12px 18px;
  border-radius: 12px;
  border: 1px solid var(--dm-border);
  margin-bottom: 20px;
  box-shadow: var(--dm-shadow-sm);
  flex-wrap: wrap;
  gap: 12px;
}
.ty-market-pills-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.ty-market-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: #f1f5f9;
  border: 1.5px solid transparent;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 800;
  color: #334155;
  cursor: pointer;
  transition: all 0.2s;
}
.ty-pill-badge {
  background: rgba(0, 0, 0, 0.08);
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 12px;
}
.ty-market-pill:hover, .ty-market-pill.is-active {
  background: linear-gradient(135deg, #0284c7 0%, #10b981 100%);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.25);
}
.ty-market-pill.is-active .ty-pill-badge {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}
.ty-sort-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ty-sort-select {
  padding: 7px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 13px;
  outline: none;
  background: #fff;
  font-weight: 700;
  color: #0f172a;
}
.ty-filter-group {
  border-bottom: 1px solid #f1f5f9;
  padding: 16px 0;
}
.ty-filter-group:last-child {
  border-bottom: none;
}
.ty-filter-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 800;
  color: var(--dm-dark);
  cursor: pointer;
  margin-bottom: 12px;
}
.ty-filter-group.is-closed .ty-filter-title svg { transform: rotate(-90deg); }
.ty-filter-group.is-closed .ty-filter-body { display: none; }
.ty-checkbox-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 9px;
  font-size: 13.5px;
  color: #475569;
  cursor: pointer;
}
.ty-checkbox-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--dm-blue);
  cursor: pointer;
}
.ty-checkbox-item:hover { color: var(--dm-blue); }

.ty-price-inputs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.ty-price-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 12.5px;
  outline: none;
}
.ty-price-input:focus { border-color: var(--dm-blue); }
.ty-price-btn {
  background: linear-gradient(135deg, #0284c7 0%, #10b981 100%);
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 8px 12px;
  cursor: pointer;
}

.ty-radio-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #475569;
  margin-bottom: 7px;
  cursor: pointer;
}
.ty-radio-item input[type="radio"] { accent-color: var(--dm-blue); }

.ty-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 0;
  border-bottom: 1px solid #f8fafc;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--dm-dark);
}
.ty-toggle-switch {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 22px;
}
.ty-toggle-switch input { opacity: 0; width: 0; height: 0; }
.ty-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #cbd5e1;
  transition: .25s;
  border-radius: 20px;
}
.ty-slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .25s;
  border-radius: 50%;
}
.ty-toggle-switch input:checked + .ty-slider { background-color: var(--dm-emerald); }
.ty-toggle-switch input:checked + .ty-slider:before { transform: translateX(16px); }

/* ==================== 6. ÜRÜN KARTI (MAVİ & ZÜMRÜT DETAYLAR) ==================== */
.ty-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
}
.ty-product-card {
  background: #ffffff;
  border: 1px solid var(--dm-border);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: var(--dm-shadow-sm);
}
.ty-product-card:hover {
  border-color: #7dd3fc;
  box-shadow: var(--dm-shadow-md);
  transform: translateY(-3px);
}
.ty-fav-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  background: #ffffff;
  border-radius: 50%;
  border: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  transition: all 0.2s;
}
.ty-fav-btn:hover, .ty-fav-btn.is-fav {
  color: #ef4444;
  border-color: #ef4444;
  background: #fef2f2;
}
.ty-badges-stack {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  z-index: 5;
}
.ty-badge {
  font-size: 10px;
  font-weight: 900;
  padding: 3.5px 7px;
  border-radius: 5px;
  text-transform: uppercase;
}
.ty-badge-orange { background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%); color: #ffffff; }
.ty-badge-purple { background: #0f172a; color: #ffffff; }
.ty-badge-green { background: #10b981; color: #ffffff; }

.ty-card-img-wrap {
  aspect-ratio: 1 / 1;
  background: #f8fafc;
  overflow: hidden;
}
.ty-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.ty-product-card:hover .ty-card-img { transform: scale(1.04); }

.ty-card-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.ty-card-brand { font-size: 12px; font-weight: 800; color: #0284c7; margin-bottom: 3px; text-transform: uppercase; }
.ty-card-title {
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.35;
  margin-bottom: 6px;
  height: 36px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.ty-card-title a { color: inherit; text-decoration: none; }
.ty-card-title a:hover { color: var(--dm-blue); }

.ty-rating-row {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: #64748b;
  margin-bottom: 10px;
}
.ty-stars { color: #f59e0b; font-size: 12px; }

.ty-card-price-box {
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px dashed #e2e8f0;
}
.ty-price-deal-tag { font-size: 11.5px; color: #10b981; font-weight: 800; margin-bottom: 2px; }
.ty-main-price { font-size: 17px; font-weight: 900; color: var(--dm-blue); }
.ty-old-price { font-size: 12.5px; color: #94a3b8; text-decoration: line-through; margin-left: 6px; }

/* ==================== 7. ÜRÜN DETAY (3 SÜTUN) ==================== */
.ty-product-detail-page { padding-top: 20px; padding-bottom: 60px; }
.ty-breadcrumbs { font-size: 12.5px; color: #64748b; margin-bottom: 18px; display: flex; gap: 6px; }
.ty-breadcrumbs a { color: #475569; text-decoration: none; font-weight: 500; }
.ty-breadcrumbs a:hover { color: var(--dm-blue); }

.ty-detail-3col-grid {
  display: grid;
  grid-template-columns: 440px 1fr 290px;
  gap: 28px;
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid var(--dm-border);
  padding: 28px;
  box-shadow: var(--dm-shadow-sm);
}
.ty-detail-main-img-box {
  position: relative;
  aspect-ratio: 1 / 1;
  border: 1px solid #f1f5f9;
  border-radius: 12px;
  overflow: hidden;
  background: #f8fafc;
}
.ty-detail-hero-img { width: 100%; height: 100%; object-fit: cover; }
.ty-detail-img-badges { position: absolute; top: 12px; left: 12px; right: 12px; bottom: 12px; pointer-events: none; }
.ty-badge-stack-left { position: absolute; top: 0; left: 0; display: flex; flex-direction: column; gap: 6px; }
.ty-img-badge-pill { padding: 4px 9px; font-size: 10px; font-weight: 900; border-radius: 5px; color: #fff; }
.ty-img-badge-pill.green { background: #10b981; }
.ty-img-badge-pill.green-dark { background: #059669; }
.ty-img-badge-pill.purple { background: #0284c7; }
.ty-badge-circle-bottom {
  position: absolute; bottom: 0; left: 0; background: linear-gradient(135deg, #0284c7 0%, #10b981 100%); color: #ffffff;
  width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  text-align: center; font-size: 9.5px; line-height: 1.15; font-weight: 800; box-shadow: 0 4px 10px rgba(2, 132, 199, 0.3);
}
.ty-gallery-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 34px;
  background: rgba(255, 255, 255, 0.95); border-radius: 50%; border: 1px solid #cbd5e1;
  font-size: 14px; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.ty-gallery-arrow.prev { left: 10px; }
.ty-gallery-arrow.next { right: 10px; }

.ty-detail-thumbs-strip { display: flex; gap: 12px; margin-top: 14px; overflow-x: auto; }
.ty-thumb-item { width: 64px; height: 64px; border: 1.5px solid #e2e8f0; border-radius: 8px; background: #fff; cursor: pointer; padding: 2px; }
.ty-thumb-item.is-active, .ty-thumb-item:hover { border-color: var(--dm-blue); }
.ty-thumb-item img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }

.ty-detail-brand-row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.ty-detail-brand-name { font-size: 14.5px; font-weight: 800; color: #0284c7; text-transform: uppercase; }
.ty-verified-badge { background: #0284c7; color: #fff; font-size: 9px; width: 16px; height: 16px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.ty-detail-title { font-size: 20px; font-weight: 800; color: #0f172a; line-height: 1.35; margin-bottom: 12px; }
.ty-detail-rating-row { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: #64748b; margin-bottom: 10px; }
.ty-score-text { font-weight: 900; color: #0f172a; }
.ty-stars-gold { color: #f59e0b; font-size: 13px; }
.ty-social-proof { font-size: 12.5px; color: #475569; margin-bottom: 18px; }

.ty-detail-price-card {
  border: 1.5px solid #38bdf8;
  border-radius: 10px;
  padding: 14px 18px;
  background: linear-gradient(135deg, #f0f9ff 0%, #f8fafc 100%);
  margin-bottom: 22px;
}
.ty-price-card-header { font-size: 12.5px; font-weight: 800; color: #0284c7; margin-bottom: 4px; }
.ty-detail-price-card .ty-compare-strike { font-size: 15px; color: #94a3b8; text-decoration: line-through; margin-right: 12px; }
.ty-detail-price-card .ty-huge-price { font-size: 28px; font-weight: 900; color: #0284c7; }
.ty-installment-info { font-size: 12.5px; color: #475569; margin-top: 6px; }

/* ==================== VARYANT VE SEÇENEK SİSTEMİ ==================== */
.ty-options-container {
  margin-bottom: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ty-option-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ty-option-label-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
}
.ty-opt-title {
  font-weight: 800;
  color: #1e293b;
}
.ty-opt-selected-val {
  font-weight: 700;
  color: #0284c7;
}

/* Renk Swatch Grid & Düğmeleri */
.ty-color-swatches-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ty-swatch-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1.5px solid #cbd5e1;
  background: #ffffff;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  font-size: 12.5px;
  font-weight: 700;
  color: #334155;
}
.ty-swatch-btn:hover {
  border-color: #0284c7;
  background: #f0f9ff;
}
.ty-swatch-btn.is-active {
  border-color: #0284c7;
  background: #f0f9ff;
  box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.25);
  color: #0369a1;
}
.ty-color-circle {
  width: 18px;
  height: 18px;
  min-width: 18px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.15);
  display: inline-block;
}

/* Renk Tanımlamaları */
.swatch-color-siyah, .swatch-color-black { background-color: #18181b; }
.swatch-color-beyaz, .swatch-color-white { background-color: #f8fafc; border: 1px solid #cbd5e1; }
.swatch-color-gri, .swatch-color-grey, .swatch-color-gray { background-color: #64748b; }
.swatch-color-antrasit { background-color: #334155; }
.swatch-color-lacivert, .swatch-color-navy { background-color: #1e3a8a; }
.swatch-color-mavi, .swatch-color-blue { background-color: #0284c7; }
.swatch-color-kirmizi, .swatch-color-red { background-color: #dc2626; }
.swatch-color-bordo { background-color: #881337; }
.swatch-color-haki, .swatch-color-khaki { background-color: #4d7c0f; }
.swatch-color-yesil, .swatch-color-green { background-color: #16a34a; }
.swatch-color-bej, .swatch-color-beige { background-color: #d6d3d1; }
.swatch-color-pembe, .swatch-color-pink { background-color: #ec4899; }
.swatch-color-mor, .swatch-color-purple { background-color: #9333ea; }
.swatch-color-sari, .swatch-color-yellow { background-color: #eab308; }
.swatch-color-turuncu, .swatch-color-orange { background-color: #f97316; }
.swatch-color-kahverengi, .swatch-color-brown, .swatch-color-taba { background-color: #78350f; }

/* Ebat / Boyut Butonları */
.ty-size-pills-grid, .ty-generic-pills-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ty-size-pill-btn, .ty-generic-pill-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1.5px solid #cbd5e1;
  background: #ffffff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
  color: #1e293b;
  min-width: 60px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.ty-size-pill-btn:hover, .ty-generic-pill-btn:hover {
  border-color: #0284c7;
  background: #f0f9ff;
}
.ty-size-pill-btn.is-active, .ty-generic-pill-btn.is-active {
  border-color: #0284c7;
  background: #f0f9ff;
  color: #0369a1;
  box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.25);
}
.ty-size-pop-tag {
  position: absolute;
  top: -8px;
  right: -4px;
  background: #10b981;
  color: #ffffff;
  font-size: 8.5px;
  font-weight: 900;
  padding: 1px 5px;
  border-radius: 4px;
}

/* Adet ve Satın Alma Alanı */
.ty-buy-action-area {
  margin-bottom: 22px;
}
.ty-qty-and-cart-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ty-qty-selector {
  display: flex;
  align-items: center;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  overflow: hidden;
  background: #ffffff;
  height: 48px;
}
.ty-qty-btn {
  width: 36px;
  height: 100%;
  border: none;
  background: #f8fafc;
  color: #334155;
  font-size: 16px;
  font-weight: 900;
  cursor: pointer;
  transition: background 0.2s;
}
.ty-qty-btn:hover {
  background: #e2e8f0;
}
.ty-qty-input {
  width: 44px;
  height: 100%;
  border: none;
  text-align: center;
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
  outline: none;
}
.ty-btn-add-cart {
  flex: 1.6;
  position: relative;
  height: 48px;
  padding: 0 16px;
  border: none;
  background: linear-gradient(135deg, #0284c7 0%, #10b981 100%);
  color: #ffffff;
  font-size: 15px;
  font-weight: 900;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.25);
  transition: all 0.2s ease;
}
.ty-btn-add-cart:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(2, 132, 199, 0.35);
}
.ty-btn-add-cart.disabled, .ty-btn-add-cart:disabled {
  background: #94a3b8;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.ty-cart-free-tag {
  position: absolute;
  top: -9px;
  right: 12px;
  background: #0f172a;
  color: #ffffff;
  font-size: 9.5px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
}
.ty-btn-buy-now {
  flex: 1.1;
  height: 48px;
  padding: 0 16px;
  border: 2px solid #0284c7;
  background: #ffffff;
  color: #0284c7;
  font-size: 14.5px;
  font-weight: 800;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.ty-btn-buy-now:hover {
  background: #f0f9ff;
}
.ty-btn-buy-now.disabled, .ty-btn-buy-now:disabled {
  border-color: #cbd5e1;
  color: #94a3b8;
  cursor: not-allowed;
}
.ty-btn-detail-fav {
  width: 48px;
  height: 48px;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  cursor: pointer;
  transition: all 0.2s ease;
}
.ty-btn-detail-fav:hover, .ty-btn-detail-fav.active {
  color: #ef4444;
  border-color: #ef4444;
  background: #fef2f2;
}

/* Stok Durumu Rozeti */
.ty-stock-in {
  color: #16a34a;
  font-weight: 800;
  font-size: 12.5px;
}
.ty-stock-out {
  color: #ef4444;
  font-weight: 800;
  font-size: 12.5px;
}

/* Kargo ve Güvenlik Kutusu */
.ty-shipping-info-box {
  background: #f8fafc;
  border: 1px solid var(--dm-border);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 12.5px;
  color: #334155;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ty-ship-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ship-ico {
  font-size: 16px;
}

/* Ürün Açıklama Sekmeleri */
.ty-product-desc-section {
  margin-top: 30px;
  margin-bottom: 50px;
}
.ty-desc-card {
  background: #ffffff;
  border: 1px solid var(--dm-border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--dm-shadow-sm);
}
.ty-desc-tabs-header {
  display: flex;
  background: #f8fafc;
  border-bottom: 1px solid var(--dm-border);
  overflow-x: auto;
}
.ty-desc-tab-btn {
  padding: 16px 24px;
  border: none;
  background: transparent;
  font-size: 14px;
  font-weight: 800;
  color: #64748b;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.ty-desc-tab-btn:hover {
  color: #0284c7;
}
.ty-desc-tab-btn.active {
  color: #0284c7;
  border-bottom-color: #0284c7;
  background: #ffffff;
}
.ty-desc-tab-content {
  padding: 24px;
  font-size: 14px;
  line-height: 1.7;
  color: #334155;
}
.ty-specs-table {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ty-spec-row {
  display: flex;
  padding: 10px 14px;
  background: #f8fafc;
  border-radius: 8px;
  font-size: 13.5px;
}
.ty-spec-row .k {
  width: 200px;
  font-weight: 800;
  color: #0f172a;
}
.ty-spec-row .v {
  flex: 1;
  color: #475569;
}

/* Sütun 3: Kampanya & Satıcı Kutusu */
.ty-campaigns-box {
  border: 1px solid var(--dm-border);
  border-radius: 12px;
  padding: 16px;
  background: #ffffff;
  margin-bottom: 18px;
  box-shadow: var(--dm-shadow-sm);
}
.ty-box-heading {
  font-size: 12px;
  font-weight: 900;
  color: #64748b;
  margin-bottom: 12px;
  letter-spacing: 0.5px;
}
.ty-campaign-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed #e2e8f0;
  font-size: 12.5px;
  cursor: pointer;
}
.ty-campaign-item:last-child {
  border-bottom: none;
}
.ty-camp-text {
  flex: 1;
}
.ty-camp-text strong {
  display: block;
  font-size: 13px;
  color: #0f172a;
}
.ty-camp-text span {
  display: block;
  font-size: 11.5px;
  color: #64748b;
}
.ty-camp-text .red-highlight {
  color: #0284c7;
  font-weight: 800;
}
.ty-camp-arrow {
  color: #94a3b8;
  font-weight: 800;
}

.ty-seller-card-box {
  border: 1px solid var(--dm-border);
  border-radius: 12px;
  padding: 18px;
  background: #f8fafc;
  box-shadow: var(--dm-shadow-sm);
}
.ty-seller-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.ty-seller-score {
  background: #10b981;
  color: #ffffff;
  font-weight: 900;
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 6px;
}
.ty-seller-followers {
  font-size: 11.5px;
  color: #64748b;
  margin-bottom: 8px;
}
.ty-seller-tag-badge {
  background: #e0f2fe;
  color: #0369a1;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 5px;
  margin-bottom: 14px;
  display: inline-block;
}
.ty-btn-follow-seller {
  width: 100%;
  padding: 10px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  margin-bottom: 8px;
  color: #0f172a;
  transition: background 0.2s;
}
.ty-btn-follow-seller:hover {
  background: #f1f5f9;
}
.ty-btn-visit-store {
  display: block;
  text-align: center;
  padding: 10px;
  background: #0f172a;
  color: #ffffff;
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 800;
  border-radius: 8px;
  transition: background 0.2s;
}
.ty-btn-visit-store:hover {
  background: #1e293b;
}

/* ==================== 8. AÇILIR SEPET ÇEKMECESİ ==================== */
.ty-cart-drawer-overlay {
  display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(3px); z-index: 300;
}
.ty-cart-drawer-overlay.is-active { display: block; }
.ty-cart-drawer {
  position: fixed; top: 0; right: -420px; bottom: 0; width: 400px;
  background: #ffffff; box-shadow: -8px 0 30px rgba(0,0,0,0.15);
  z-index: 310; display: flex; flex-direction: column; transition: right 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.ty-cart-drawer.is-active { right: 0; }
.ty-drawer-header { padding: 18px 22px; border-bottom: 1px solid var(--dm-border); display: flex; align-items: center; justify-content: space-between; }
.ty-drawer-title { display: flex; align-items: center; gap: 8px; font-size: 16.5px; font-weight: 900; color: var(--dm-dark); }
.ty-drawer-close-btn { background: none; border: none; font-size: 20px; color: #64748b; cursor: pointer; }
.ty-drawer-free-shipping { background: #f0fdf4; padding: 14px 22px; border-bottom: 1px solid #dcfce7; }
.ty-free-ship-text { font-size: 12.5px; color: #166534; margin-bottom: 6px; }
.ty-progress-track { height: 7px; background: #e2e8f0; border-radius: 10px; overflow: hidden; }
.ty-progress-bar { height: 100%; background: #10b981; border-radius: 10px; }
.ty-drawer-items-list { flex: 1; overflow-y: auto; padding: 18px 22px; }
.ty-drawer-item { display: flex; gap: 14px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid #f1f5f9; }
.ty-drawer-item-img { width: 70px; height: 70px; object-fit: cover; border-radius: 8px; border: 1px solid #e2e8f0; }
.ty-drawer-item-info { flex: 1; }
.ty-drawer-item-title { font-size: 13.5px; font-weight: 700; color: #0f172a; line-height: 1.3; margin-bottom: 3px; }
.ty-drawer-item-variant { font-size: 11.5px; color: #64748b; margin-bottom: 4px; }
.ty-drawer-item-price { font-size: 15px; font-weight: 900; color: var(--dm-blue); }
.ty-drawer-footer { padding: 18px 22px; border-top: 1px solid var(--dm-border); background: #f8fafc; }
.ty-drawer-total-row { display: flex; justify-content: space-between; font-size: 15.5px; font-weight: 900; margin-bottom: 14px; color: #0f172a; }
.ty-drawer-total-price { color: var(--dm-blue); font-size: 19px; }
.ty-drawer-btn-checkout {
  display: block; text-align: center; background: linear-gradient(135deg, #0284c7 0%, #10b981 100%);
  color: #fff; text-decoration: none; padding: 13px; border-radius: 8px; font-size: 15px; font-weight: 900; margin-bottom: 8px;
}
.ty-drawer-btn-view-cart { display: block; text-align: center; background: #fff; border: 1.5px solid #cbd5e1; color: #334155; text-decoration: none; padding: 10px; border-radius: 8px; font-size: 13.5px; font-weight: 700; }

/* ==================== 9. MOBİL BARI & TOAST ==================== */
.ty-mobile-bottom-bar {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; background: #ffffff;
  border-top: 1px solid var(--dm-border); padding: 7px 12px 9px; z-index: 250;
  justify-content: space-around; align-items: center; box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
}
.ty-mob-nav-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; text-decoration: none; color: #64748b; font-size: 11px; font-weight: 700; background: none; border: none; cursor: pointer; }
.ty-mob-nav-btn.active, .ty-mob-nav-btn:hover { color: var(--dm-blue); }

.ty-toast-notification {
  position: fixed; top: -80px; left: 50%; transform: translateX(-50%); background: #0f172a;
  color: #ffffff; padding: 13px 26px; border-radius: 30px; font-size: 14px; font-weight: 800;
  display: flex; align-items: center; gap: 10px; box-shadow: 0 12px 30px rgba(0,0,0,0.25); z-index: 500; transition: top 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.ty-toast-notification.is-visible { top: 24px; }

/* Mobil */
@media (max-width: 992px) {
  body { padding-bottom: 65px; }
  .ty-mobile-bottom-bar { display: flex; }
  .ty-promo-banners-grid { grid-template-columns: 1fr; }
  .ty-collection-layout { grid-template-columns: 1fr; }
  .ty-sidebar-filters { display: none; }
  .ty-detail-3col-grid { grid-template-columns: 1fr; }
  .ty-main-header { flex-wrap: wrap; gap: 12px; }
  .ty-search-box { order: 3; width: 100%; }
  .ty-cart-drawer { width: 100%; right: -100%; }
}

/* ==========================================================================
   10. PROFESYONEL FOOTER & GÜVENLİK & YASAL SÖZLEŞMELER SİSTEMİ (v4.5)
   ========================================================================== */
.dropmes-footer-section {
  background: #090e1a;
  color: #94a3b8;
  font-size: 13.5px;
  border-top: 3px solid var(--dm-blue);
  margin-top: 50px;
}

/* 10.1. Güven & Hizmet Avantajları Şeridi */
.footer-trust-strip {
  background: #0f172a;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  padding: 24px 0;
}
.footer-trust-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 14px;
}
.trust-icon-box {
  width: 46px;
  height: 46px;
  min-width: 46px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.2) 0%, rgba(16, 185, 129, 0.15) 100%);
  border: 1px solid rgba(2, 132, 199, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #38bdf8;
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.trust-item:hover .trust-icon-box {
  transform: translateY(-3px) scale(1.05);
  border-color: #10b981;
  color: #34d399;
}
.trust-text {
  display: flex;
  flex-direction: column;
}
.trust-text strong {
  color: #f1f5f9;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.3;
}
.trust-text span {
  font-size: 11.5px;
  color: #64748b;
  line-height: 1.3;
  margin-top: 2px;
}

/* 10.2. E-Bülten & Sosyal Medya Barı */
.footer-newsletter-bar {
  background: linear-gradient(90deg, #0c1427 0%, #111d38 50%, #0c1427 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 36px 0;
}
.newsletter-flex-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
}
.newsletter-info {
  flex: 1;
  min-width: 280px;
}
.nl-badge {
  display: inline-block;
  background: linear-gradient(90deg, #0284c7 0%, #10b981 100%);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  padding: 3px 9px;
  border-radius: 20px;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.newsletter-info h3 {
  color: #ffffff;
  font-size: 20px;
  font-weight: 900;
  margin-bottom: 6px;
  letter-spacing: -0.3px;
}
.newsletter-info p {
  color: #94a3b8;
  font-size: 13px;
  line-height: 1.4;
}
.newsletter-info strong {
  color: #38bdf8;
}

.newsletter-form-col {
  flex: 1.2;
  min-width: 320px;
}
.footer-nl-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nl-input-group {
  display: flex;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 30px;
  padding: 4px 4px 4px 18px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.nl-input-group:focus-within {
  border-color: #0284c7;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.25);
}
.nl-email-input {
  flex: 1;
  background: transparent;
  border: none;
  color: #ffffff;
  font-size: 13.5px;
  outline: none;
  font-family: inherit;
}
.nl-email-input::placeholder {
  color: #64748b;
}
.nl-submit-btn {
  background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 100%);
  color: #ffffff;
  border: none;
  border-radius: 25px;
  padding: 10px 22px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: transform 0.2s, background 0.2s, box-shadow 0.2s;
}
.nl-submit-btn:hover {
  background: linear-gradient(135deg, #0369a1 0%, #0284c7 100%);
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.4);
  transform: scale(1.02);
}
.nl-privacy-check {
  font-size: 11px;
  color: #64748b;
  padding-left: 12px;
}
.nl-privacy-check label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.nl-privacy-check a {
  color: #38bdf8;
  text-decoration: underline;
}

/* Demo / Temayla Birebir Uyumlu Sosyal Medya İkonları */
.footer-social-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.social-label {
  font-size: 12px;
  font-weight: 800;
  color: #cbd5e1;
  letter-spacing: 0.3px;
}
.social-icons-modern {
  display: flex;
  align-items: center;
  gap: 8px;
}
.social-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #cbd5e1;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}
.social-btn:hover {
  transform: translateY(-4px) scale(1.1);
  color: #ffffff;
}
/* Temaya Özel Demo / Gradient Hover Efektleri */
.social-btn.sb-instagram:hover {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  border-color: #d6249f;
  box-shadow: 0 6px 18px rgba(214, 36, 159, 0.45);
}
.social-btn.sb-youtube:hover {
  background: #ff0000;
  border-color: #ff0000;
  box-shadow: 0 6px 18px rgba(255, 0, 0, 0.45);
}
.social-btn.sb-tiktok:hover {
  background: #000000;
  border-color: #00f2fe;
  box-shadow: 0 6px 18px rgba(0, 242, 254, 0.4);
}
.social-btn.sb-facebook:hover {
  background: #1877f2;
  border-color: #1877f2;
  box-shadow: 0 6px 18px rgba(24, 119, 242, 0.45);
}
.social-btn.sb-twitter:hover {
  background: #000000;
  border-color: #ffffff;
  box-shadow: 0 6px 18px rgba(255, 255, 255, 0.3);
}
.social-btn.sb-whatsapp:hover {
  background: #25d366;
  border-color: #25d366;
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.45);
}

/* 10.3. Ana Footer Bağlantı Grid (6 Kolonlu Zengin Yapı) */
.footer-main-links {
  padding: 50px 0 40px;
}
.footer-columns-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.1fr 1.1fr 1fr 1.1fr;
  gap: 30px;
}
.footer-col {
  display: flex;
  flex-direction: column;
}
.footer-brand-header .footer-logo {
  font-size: 26px;
  font-weight: 900;
  color: #ffffff;
  text-decoration: none;
  display: inline-block;
  margin-bottom: 12px;
}
.footer-brand-header .brand-highlight {
  color: #38bdf8;
}
.footer-brand-desc {
  font-size: 12.5px;
  color: #94a3b8;
  line-height: 1.6;
  margin-bottom: 20px;
}
.footer-contact-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.contact-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.contact-row .c-icon {
  font-size: 16px;
}
.contact-row small {
  display: block;
  font-size: 10.5px;
  color: #64748b;
  text-transform: uppercase;
  font-weight: 800;
}
.contact-row strong {
  color: #38bdf8;
  font-size: 14px;
  font-weight: 900;
}
.contact-row span {
  color: #e2e8f0;
  font-size: 12px;
}

.footer-heading {
  color: #ffffff;
  font-size: 14.5px;
  font-weight: 900;
  margin-bottom: 18px;
  letter-spacing: -0.2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.col-toggle-icon {
  display: none;
}
.footer-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.footer-nav-list li a {
  color: #94a3b8;
  text-decoration: none;
  font-size: 12.5px;
  transition: all 0.2s ease;
  display: inline-block;
}
.footer-nav-list li a:hover {
  color: #38bdf8;
  transform: translateX(4px);
}
.legal-col .footer-nav-list li a:hover {
  color: #10b981;
}

/* 10.4. Rozetler, Ödeme & Kargo Barı */
.footer-bottom-badges-bar {
  background: #0a0f1e;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding: 18px 0;
}
.bottom-badges-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.badge-group-title {
  font-size: 11.5px;
  font-weight: 800;
  color: #64748b;
  text-transform: uppercase;
  margin-right: 12px;
}
.payment-badges-group, .shipping-badges-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.payment-logos, .shipping-logos {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.pay-badge {
  background: #ffffff;
  border-radius: 5px;
  padding: 3px 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
.ssl-badge {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #34d399;
  font-size: 11px;
  font-weight: 800;
  gap: 4px;
}
.secure-badge {
  background: rgba(2, 132, 199, 0.15);
  border: 1px solid rgba(2, 132, 199, 0.3);
  color: #38bdf8;
  font-size: 11px;
  font-weight: 800;
}
.ship-badge {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 4px;
}

/* 10.5. Telif Hakkı & Alt Hızlı Yasal Bar */
.footer-copyright-bar {
  background: #060913;
  padding: 16px 0;
}
.copyright-inner-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: #64748b;
  flex-wrap: wrap;
  gap: 12px;
}
.copyright-text p {
  margin: 0;
}
.copyright-text strong {
  color: #94a3b8;
}
.legal-mini-links {
  display: flex;
  align-items: center;
  gap: 8px;
}
.legal-mini-links a {
  color: #94a3b8;
  text-decoration: none;
  transition: color 0.2s;
}
.legal-mini-links a:hover {
  color: #38bdf8;
}
.legal-mini-links .sep {
  color: #334155;
}

/* 10.6. Mobil Footer Uyarlaması */
@media (max-width: 992px) {
  .footer-trust-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .footer-columns-grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  .brand-col {
    grid-column: 1 / -1;
  }
}
@media (max-width: 640px) {
  .footer-trust-grid {
    grid-template-columns: 1fr;
  }
  .footer-columns-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .footer-heading {
    cursor: pointer;
    padding: 10px 0;
    margin-bottom: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .col-toggle-icon {
    display: block;
    transition: transform 0.2s;
  }
  .footer-heading.open .col-toggle-icon {
    transform: rotate(180deg);
  }
  .footer-heading:not(.open) + .footer-nav-list {
    display: none;
  }
  .footer-heading.open + .footer-nav-list {
    display: flex;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .bottom-badges-wrapper, .copyright-inner-flex {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
}



/* ==========================================================================
   v3.0 - Cift Kanal Yapisi Duzeltmeleri
   ========================================================================== */

/* --- Erisilebilirlik (N-15) --- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:1000000;padding:12px 20px;background:var(--dm-blue);color:#fff;font-weight:800;border-radius:0 0 8px 0;text-decoration:none}
.skip-link:focus{left:0}
.visually-hidden{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--dm-blue);outline-offset:2px}

/* --- Sunucu tarafi filtreler (U-09 / U-10) --- */
.ty-filter-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--dm-border);font-size:14px}
.ty-filter-group{border:none;padding:0;margin:0 0 18px}
.ty-filter-legend{font-size:13px;font-weight:800;color:var(--dm-dark);padding:0;margin-bottom:8px}
.ty-filter-values{display:flex;flex-direction:column;gap:7px}
.ty-filter-check{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--dm-text);cursor:pointer}
.ty-filter-check.is-disabled{opacity:.45;cursor:not-allowed}
.ty-filter-count{margin-left:auto;font-size:11.5px;color:var(--dm-light-text);font-variant-numeric:tabular-nums}
.ty-filter-price{display:flex;gap:10px}
.ty-filter-price label{flex:1;display:flex;flex-direction:column;gap:4px}
.ty-filter-mini-label{font-size:11px;font-weight:700;color:var(--dm-light-text)}
.ty-filter-price input{width:100%;padding:8px 10px;border:1px solid var(--dm-border);border-radius:7px;font-size:13px}
.ty-active-filter-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:16px}
.ty-active-filter-tag{display:inline-flex;align-items:center;gap:5px;background:#eff6ff;color:var(--dm-blue);border:1px solid #bfdbfe;border-radius:20px;padding:5px 12px;font-size:12.5px;font-weight:600;text-decoration:none}
.ty-active-filter-tag:hover{background:#dbeafe}
.ty-collection-count{font-size:13.5px;font-weight:700;color:var(--dm-light-text);font-variant-numeric:tabular-nums}
.ty-sort-label{font-size:13px;font-weight:700;color:var(--dm-light-text)}
.ty-collection-empty{grid-column:1 / -1;text-align:center;padding:56px 20px;color:var(--dm-light-text);font-size:15px}
.ty-card-img-placeholder{display:flex;align-items:center;justify-content:center;height:100%;background:#f8fafc;color:#cbd5e1}
.ty-badge-muted{background:#e2e8f0;color:#64748b}

/* --- Sayfalama (U-10) --- */
.ty-pagination{display:flex;justify-content:center;gap:6px;margin-top:32px;flex-wrap:wrap}
.ty-page-link{min-width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;padding:0 10px;border:1px solid var(--dm-border);border-radius:8px;background:#fff;color:var(--dm-text);text-decoration:none;font-size:13.5px;font-weight:700}
.ty-page-link:hover{border-color:var(--dm-blue);color:var(--dm-blue)}
.ty-page-link.is-current{background:var(--dm-blue);border-color:var(--dm-blue);color:#fff}

/* --- Sepet sayfasi (K-07) --- */
.ty-cart-page-layout{padding:24px 16px 60px}
.ty-cart-page-title{font-size:24px;font-weight:800;color:var(--dm-dark);margin-bottom:20px}
.ty-cart-page-count{font-size:15px;color:var(--dm-light-text);font-weight:500}
.ty-cart-grid{display:grid;grid-template-columns:1fr 340px;gap:24px;align-items:start}
.ty-cart-items-panel,.ty-cart-summary-panel,.ty-cart-empty-panel{background:#fff;border:1px solid var(--dm-border);border-radius:12px;padding:20px}
.ty-cart-shipping-note{background:#fffbeb;border:1px solid #fde68a;color:#92400e;border-radius:8px;padding:11px 15px;margin-bottom:16px;font-size:13px;font-weight:700}
.ty-cart-shipping-note.is-qualified{background:#f0fdf4;border-color:#bbf7d0;color:#166534}
.ty-cart-line{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid #f1f5f9}
.ty-cart-line-img{width:84px;height:84px;object-fit:cover;border-radius:8px;border:1px solid var(--dm-border)}
.ty-cart-line-info{flex:1;min-width:0}
.ty-cart-line-title{font-size:14.5px;font-weight:700;margin:0 0 4px}
.ty-cart-line-title a{color:var(--dm-dark);text-decoration:none}
.ty-cart-line-variant{font-size:12px;color:var(--dm-light-text);margin-bottom:6px}
.ty-cart-line-price{font-size:15px;font-weight:800;color:var(--dm-blue)}
.ty-cart-line-actions{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.ty-cart-qty-input{width:64px;padding:7px;text-align:center;border:1px solid var(--dm-border);border-radius:7px;font-size:13.5px;font-weight:700}
.ty-cart-line-remove{font-size:12px;color:#94a3b8;font-weight:700;text-decoration:none}
.ty-cart-line-remove:hover{color:#ef4444}
.ty-cart-line-total{font-size:14px;font-weight:800;color:var(--dm-dark)}
.ty-cart-update-btn{margin-top:16px;padding:10px 20px;border:1px solid var(--dm-border);border-radius:8px;background:#fff;font-size:13.5px;font-weight:700;cursor:pointer}
.ty-cart-summary-title{font-size:16px;font-weight:800;color:var(--dm-dark);margin:0 0 16px;padding-bottom:12px;border-bottom:1px solid #f1f5f9}
.ty-cart-summary-row{display:flex;justify-content:space-between;font-size:13.5px;color:var(--dm-light-text);margin-bottom:10px}
.ty-cart-summary-row.is-discount{color:var(--dm-emerald);font-weight:700}
.ty-cart-summary-value{font-weight:700;color:var(--dm-dark)}
.ty-cart-summary-free{font-weight:800;color:var(--dm-emerald)}
.ty-cart-summary-total{border-top:1.5px solid #f1f5f9;margin-top:16px;padding-top:16px;display:flex;justify-content:space-between;align-items:baseline;font-size:16px;font-weight:800;color:var(--dm-dark)}
.ty-cart-total-price{font-size:22px;font-weight:900;color:var(--dm-blue)}
.ty-cart-tax-note{font-size:11.5px;color:var(--dm-light-text);margin:10px 0 0;line-height:1.45}
.ty-cart-checkout-btn{display:block;width:100%;text-align:center;background:var(--dm-blue);color:#fff;border:none;text-decoration:none;padding:14px;border-radius:8px;font-size:15px;font-weight:800;margin-top:18px;cursor:pointer}
.ty-cart-checkout-btn:hover{background:var(--dm-blue-hover)}
.ty-cart-empty-panel{text-align:center;padding:48px 24px}
.ty-cart-empty-icon{font-size:48px;margin-bottom:12px}
.ty-cart-empty-panel .ty-cart-checkout-btn{display:inline-block;width:auto;padding:12px 28px}

/* --- Bulten formu (U-13) --- */
.nl-success{background:#f0fdf4;border:1px solid #bbf7d0;color:#166534;padding:12px 16px;border-radius:8px;font-size:13.5px;font-weight:700}
.nl-error{color:#b91c1c;font-size:12.5px;margin-top:6px}

/* --- Diger --- */
.ty-flash-deals-header.is-expired{opacity:.55}
.ty-banner-image{width:120px;height:120px;object-fit:contain}
.ty-drawer-remove{background:none;border:none;color:#94a3b8;font-size:12px;font-weight:700;cursor:pointer;padding:0}
.ty-drawer-remove:hover{color:#ef4444}

@media (max-width:900px){.ty-cart-grid{grid-template-columns:1fr}}
@media (max-width:560px){
  .ty-cart-line{flex-wrap:wrap}
  .ty-cart-line-actions{flex-direction:row;align-items:center;width:100%;justify-content:space-between}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;transition-duration:.01ms !important}}

.ty-search-results-head{background:#fff;border:1px solid var(--dm-border);border-radius:10px;padding:16px 20px;margin-bottom:20px}
.ty-search-results-head h1{font-size:18px;font-weight:800;color:var(--dm-dark);margin:0}
.ty-search-count{font-size:14px;color:var(--dm-light-text);font-weight:500}


/* ==========================================================================
   STORIES SERIDI  (eksik stiller tamamlandi)
   ========================================================================== */
.ty-stories-wrapper{
  background:var(--dm-card-bg);
  border:1px solid var(--dm-border);
  border-radius:var(--dm-radius);
  padding:16px 8px;
  margin:16px 0;
  box-shadow:var(--dm-shadow-sm);
  overflow:hidden;
}
.ty-stories-track{
  display:flex;
  gap:6px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  padding:2px 8px 6px;
}
.ty-stories-track::-webkit-scrollbar{height:5px}
.ty-stories-track::-webkit-scrollbar-thumb{background:var(--dm-border);border-radius:3px}
.ty-story-item{
  flex:0 0 auto;
  width:88px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  text-decoration:none;
  scroll-snap-align:start;
  padding:4px 2px;
}
.ty-story-avatar-wrap{
  width:64px;height:64px;
  border-radius:50%;
  background:var(--dm-card-bg);
  border:2.5px solid var(--dm-border);
  display:flex;align-items:center;justify-content:center;
  transition:transform .2s cubic-bezier(.16,1,.3,1),border-color .2s;
  overflow:hidden;
}
.ty-story-item.is-unread .ty-story-avatar-wrap{
  border-color:var(--dm-blue);
  box-shadow:0 0 0 2px var(--dm-card-bg) inset;
}
.ty-story-item:hover .ty-story-avatar-wrap{
  transform:translateY(-3px) scale(1.04);
  border-color:var(--dm-blue);
}
.ty-story-avatar-wrap img{width:100%;height:100%;object-fit:cover}
.ty-story-emoji{font-size:28px;line-height:1}
.ty-story-label{
  font-size:11.5px;
  font-weight:700;
  color:var(--dm-text);
  text-align:center;
  line-height:1.25;
  text-decoration:none;
  display:block;
}
.ty-story-item:hover .ty-story-label{color:var(--dm-blue)}

/* ==========================================================================
   KATEGORI KARTLARI  (One cikan koleksiyon bolumu)
   ========================================================================== */
.ty-montessori-cats-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:12px;
  margin:20px 0 24px;
}
.m-cat-card{
  display:flex;
  align-items:center;
  gap:12px;
  background:var(--dm-card-bg);
  border:1px solid var(--dm-border);
  border-radius:var(--dm-radius);
  padding:14px 16px;
  text-decoration:none;
  transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s,border-color .2s;
}
.m-cat-card:hover{
  transform:translateY(-2px);
  border-color:var(--dm-blue);
  box-shadow:var(--dm-shadow-md);
}
.m-cat-icon{
  font-size:26px;
  line-height:1;
  flex:0 0 auto;
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  background:var(--dm-bg);
  border-radius:9px;
}
.m-cat-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.m-cat-info strong{
  font-size:13.5px;
  font-weight:800;
  color:var(--dm-dark);
  line-height:1.3;
  text-decoration:none;
}
.m-cat-info small{
  font-size:11.5px;
  color:var(--dm-light-text);
  line-height:1.35;
}
.m-cat-card:hover .m-cat-info strong{color:var(--dm-blue)}

/* Bolum basligi alani */
.ty-montessori-section{margin:28px 0}
.ty-section-header-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:20px;
  flex-wrap:wrap;
  margin-bottom:8px;
}
.ty-sec-title-wrap{flex:1;min-width:260px}
.ty-montessori-badge{
  display:inline-block;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.06em;
  color:#b45309;
  background:#fef3c7;
  padding:4px 11px;
  border-radius:20px;
  margin-bottom:8px;
}
.ty-sec-title{
  font-size:23px;
  font-weight:900;
  color:var(--dm-dark);
  margin:0 0 4px;
  letter-spacing:-.02em;
}
.ty-sec-subtitle{
  font-size:13.5px;
  color:var(--dm-light-text);
  margin:0;
  max-width:70ch;
  line-height:1.5;
}
.ty-view-all-montessori-btn{
  flex:0 0 auto;
  font-size:13px;
  font-weight:800;
  color:var(--dm-blue);
  text-decoration:none;
  border:1.5px solid var(--dm-blue);
  border-radius:8px;
  padding:9px 16px;
  transition:background .2s,color .2s;
  white-space:nowrap;
}
.ty-view-all-montessori-btn:hover{
  background:var(--dm-blue);
  color:#fff;
}

/* ==========================================================================
   KAMPANYA BANNERLARI  (gorsel destegi)
   ========================================================================== */
.ty-banner-image{
  width:110px;height:110px;
  object-fit:contain;
  flex:0 0 auto;
}

@media (max-width:600px){
  .ty-story-item{width:74px}
  .ty-story-avatar-wrap{width:56px;height:56px}
  .ty-story-emoji{font-size:24px}
  .ty-story-label{font-size:10.5px}
  .ty-montessori-cats-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
  .ty-sec-title{font-size:19px}
}


/* ==========================================================================
   EKSIK KALAN BILESENLER  (v4 tamamlama)
   ========================================================================== */

/* --- Flas indirim serit --- */
.ty-flash-deals-header{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;
  background:linear-gradient(135deg,#fff7ed 0%,#ffedd5 100%);
  border:1px solid #fed7aa;border-radius:var(--dm-radius);
  padding:14px 18px;margin:16px 0;
}
.ty-flash-left{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ty-flash-icon{font-size:24px;line-height:1}
.ty-flash-title{font-size:17px;font-weight:900;color:var(--dm-dark);margin:0;letter-spacing:-.01em}
.ty-flash-timer{display:flex;align-items:center;gap:4px;font-weight:900;color:#c2410c;font-size:14px}
.ty-timer-digit{
  background:var(--dm-dark);color:#fff;border-radius:6px;
  padding:4px 8px;min-width:32px;text-align:center;
  font-variant-numeric:tabular-nums;font-size:14px;
}
.ty-flash-all-btn{
  font-size:13px;font-weight:800;color:#c2410c;text-decoration:none;
  border:1.5px solid #fdba74;border-radius:8px;padding:8px 14px;
  background:var(--dm-card-bg);transition:background .2s,color .2s;white-space:nowrap;
}
.ty-flash-all-btn:hover{background:#c2410c;color:#fff;border-color:#c2410c}

/* --- Toast bildirim --- */
.ty-toast-notification{
  position:fixed;bottom:22px;left:50%;
  transform:translateX(-50%) translateY(140%);
  background:var(--dm-dark);color:#fff;
  border-radius:10px;padding:13px 20px;
  display:flex;align-items:center;gap:10px;
  font-size:13.5px;font-weight:600;
  box-shadow:0 12px 30px rgba(15,23,42,.3);
  z-index:99999;opacity:0;
  transition:transform .28s cubic-bezier(.16,1,.3,1),opacity .28s;
  max-width:calc(100vw - 32px);
}
.ty-toast-notification.is-visible{transform:translateX(-50%) translateY(0);opacity:1}
.ty-toast-icon{font-size:17px;line-height:1;flex:0 0 auto}
.ty-toast-text{line-height:1.4}

/* --- Sepet cekmecesi tamamlayicilari --- */
.ty-drawer-empty{
  text-align:center;padding:44px 20px;color:var(--dm-light-text);font-size:14px;
}
.ty-btn-start-shopping{
  display:inline-block;margin-top:14px;
  background:var(--dm-blue);color:#fff;text-decoration:none;
  padding:11px 22px;border-radius:8px;font-size:13.5px;font-weight:800;
}
.ty-btn-start-shopping:hover{background:var(--dm-blue-hover)}
.ty-drawer-qty-row{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;margin-top:6px;
}
.ty-qty-label{font-size:12px;color:var(--dm-light-text);font-weight:600}

/* --- Urun detay 3 sutun --- */
.ty-detail-3col-grid{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) 290px;
  gap:24px;align-items:start;margin:18px 0 32px;
}
.ty-detail-col-gallery,.ty-detail-col-info,.ty-detail-col-campaigns{min-width:0}
.ty-detail-col-campaigns{position:sticky;top:16px}
.ty-add-cart-label{display:block;line-height:1.2}
.ty-stock-status-wrap{display:inline-flex;align-items:center;gap:4px}
.ty-swatch-text,.ty-size-pill-text{font-size:12.5px;font-weight:700}
.ty-product-raw-content{font-size:14.5px;line-height:1.65;color:var(--dm-text)}
.ty-product-raw-content img{max-width:100%;height:auto;border-radius:8px}
.ty-product-raw-content p{margin:0 0 10px}
.ty-shipping-policy-text{font-size:14px;line-height:1.65;color:var(--dm-text)}
.ty-shipping-policy-text p{margin:0 0 10px}
.ty-qty-btn.minus,.ty-qty-btn.plus{font-size:17px;font-weight:700;line-height:1}

/* --- Header yardimcilari --- */
.ty-search-form-inner{display:flex;width:100%;position:relative}
.ty-btn-cart-trigger{background:none;border:none;cursor:pointer;font-family:inherit}
.ty-all-cats-btn{font-weight:900}
.ty-product-list-section{min-width:0}
.ty-btn-apply-filters{
  width:100%;margin-top:12px;padding:11px;
  background:var(--dm-blue);color:#fff;border:none;border-radius:8px;
  font-size:13.5px;font-weight:800;cursor:pointer;
}

/* --- Duyuru barI --- */
.dropmes-announcement-bar{
  background:var(--dm-dark);color:#fff;
  font-size:12.5px;font-weight:600;text-align:center;
  padding:9px 16px;
}
.announcement-content{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.announcement-badge{
  background:var(--dm-emerald);color:#fff;
  font-size:10px;font-weight:800;letter-spacing:.05em;
  padding:3px 9px;border-radius:12px;
}
.announcement-text{line-height:1.4}

/* --- Footer rozet serit --- */
.footer-bottom-badges-bar{border-top:1px solid rgba(255,255,255,.08);padding:18px 0}
.bottom-badges-flex{
  display:flex;justify-content:space-between;align-items:center;
  gap:20px;flex-wrap:wrap;
}
.etbis-ssl-badge-group{display:flex;gap:12px;flex-wrap:wrap}
.ssl-shield-badge{
  display:flex;align-items:center;gap:9px;
  background:rgba(255,255,255,.06);border-radius:8px;padding:9px 13px;
}
.ssl-icon{font-size:18px;line-height:1}
.ssl-text{display:flex;flex-direction:column;line-height:1.3}
.ssl-text strong{font-size:12px;font-weight:800;color:#fff}
.ssl-text span{font-size:10.5px;color:rgba(255,255,255,.6)}
.payment-methods-row,.shipping-partners-row{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.pm-label{font-size:11px;font-weight:700;color:rgba(255,255,255,.55);white-space:nowrap}
.pm-badges-list{display:flex;gap:6px;flex-wrap:wrap}
.pm-chip,.cargo-chip{
  background:rgba(255,255,255,.1);color:rgba(255,255,255,.85);
  font-size:10.5px;font-weight:700;
  padding:4px 9px;border-radius:5px;white-space:nowrap;
}
.footer-copyright-row{border-top:1px solid rgba(255,255,255,.08);padding:16px 0}
.copyright-flex{
  display:flex;justify-content:space-between;align-items:center;
  gap:16px;flex-wrap:wrap;
}
.cp-text{font-size:11.5px;color:rgba(255,255,255,.5);line-height:1.55;margin:0;max-width:none}
.footer-meta-links{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.footer-meta-links a{font-size:11.5px;color:rgba(255,255,255,.6);text-decoration:none}
.footer-meta-links a:hover{color:#fff}
.footer-meta-links span{color:rgba(255,255,255,.25);font-size:10px}

@media (max-width:1080px){
  .ty-detail-3col-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .ty-detail-col-campaigns{grid-column:1 / -1;position:static}
}
@media (max-width:720px){
  .ty-detail-3col-grid{grid-template-columns:1fr}
  .ty-flash-deals-header{flex-direction:column;align-items:flex-start}
  .bottom-badges-flex,.copyright-flex{flex-direction:column;align-items:flex-start}
}


/* ==========================================================================
   INSTAGRAM BOLUMU
   ========================================================================== */
.ty-instagram-multi-section{margin:30px 0}
.insta-section-header{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:20px;flex-wrap:wrap;margin-bottom:16px;
}
.insta-title-wrap{flex:1;min-width:260px}
.insta-gradient-badge{
  display:inline-block;
  background:linear-gradient(90deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);
  color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.05em;
  padding:4px 12px;border-radius:20px;margin-bottom:8px;
}
.insta-main-title{
  font-size:23px;font-weight:900;color:var(--dm-dark);
  margin:0 0 4px;letter-spacing:-.02em;
}
.insta-sub-text{font-size:13.5px;color:var(--dm-light-text);margin:0;line-height:1.5;max-width:70ch}
.insta-accounts-tabs{display:flex;gap:10px;flex-wrap:wrap}
.insta-tab-btn{
  display:flex;align-items:center;gap:10px;
  background:var(--dm-card-bg);
  border:1.5px solid var(--dm-border);border-radius:12px;
  padding:9px 14px;cursor:pointer;text-decoration:none;
  transition:border-color .2s,box-shadow .2s,transform .2s;
  font-family:inherit;
}
.insta-tab-btn:hover{transform:translateY(-2px);box-shadow:var(--dm-shadow-md)}
.insta-tab-btn.is-active{border-color:#dc2743;box-shadow:0 0 0 3px rgba(220,39,67,.08)}
.insta-tab-avatar{
  width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:17px;flex:0 0 auto;
  background:linear-gradient(135deg,#fce7f3,#fbcfe8);
}
.insta-tab-info{display:flex;flex-direction:column;line-height:1.3;text-align:left;min-width:0}
.insta-handle{font-size:12.5px;font-weight:800;color:var(--dm-dark)}
.insta-tag{font-size:10.5px;color:var(--dm-light-text)}
.insta-active-dot{
  width:8px;height:8px;border-radius:50%;
  background:#dc2743;flex:0 0 auto;
}
.insta-feed-panel{
  background:var(--dm-card-bg);
  border:1px solid var(--dm-border);
  border-radius:var(--dm-radius);
  padding:18px;box-shadow:var(--dm-shadow-sm);
}
.insta-profile-bar{
  display:flex;justify-content:space-between;align-items:center;
  gap:16px;flex-wrap:wrap;
  padding-bottom:14px;margin-bottom:16px;
  border-bottom:1px solid var(--dm-border);
}
.insta-profile-left{display:flex;align-items:center;gap:12px;min-width:0}
.insta-profile-badge-icon{
  width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:22px;
  background:linear-gradient(135deg,#f09433,#dc2743);flex:0 0 auto;
}
.insta-profile-name{
  font-size:15px;font-weight:900;color:var(--dm-dark);
  display:flex;align-items:center;gap:5px;
}
.insta-verif{color:#0095f6;font-size:13px}
.insta-profile-stats{display:flex;gap:16px;margin-top:3px}
.stat-box{font-size:12px;color:var(--dm-light-text)}
.stat-box strong{color:var(--dm-dark);font-weight:800}
.insta-follow-btn{
  background:#0095f6;color:#fff;text-decoration:none;
  padding:9px 20px;border-radius:8px;
  font-size:13px;font-weight:800;white-space:nowrap;
}
.insta-follow-btn:hover{background:#0081d6}
.insta-posts-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:12px;
}
.insta-card{
  border-radius:10px;overflow:hidden;text-decoration:none;
  aspect-ratio:1/1;display:block;
  transition:transform .2s cubic-bezier(.16,1,.3,1);
}
.insta-card:hover{transform:translateY(-3px)}
.insta-card-inner{
  width:100%;height:100%;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;
  padding:14px;text-align:center;
  color:#fff;font-size:12.5px;font-weight:700;line-height:1.35;
}
.insta-card-icon{font-size:30px;line-height:1}
.insta-card .color-1,.insta-card-inner.color-1{background:linear-gradient(135deg,#667eea,#764ba2)}
.insta-card .color-2,.insta-card-inner.color-2{background:linear-gradient(135deg,#f093fb,#f5576c)}
.insta-card .color-3,.insta-card-inner.color-3{background:linear-gradient(135deg,#4facfe,#00f2fe)}
.insta-card .color-4,.insta-card-inner.color-4{background:linear-gradient(135deg,#43e97b,#38f9d7)}
.insta-card-inner.color-maarif{background:linear-gradient(135deg,#fa709a,#fee140)}
.insta-card-inner.color-rehber{background:linear-gradient(135deg,#30cfd0,#330867)}
.insta-card-inner.color-veli{background:linear-gradient(135deg,#a8edea,#fed6e3);color:var(--dm-dark)}
.insta-card-inner.color-etkinlik{background:linear-gradient(135deg,#ff9a9e,#fecfef)}
.insta-view-link{
  display:inline-block;margin-top:14px;
  font-size:13px;font-weight:800;color:#dc2743;text-decoration:none;
}
.insta-view-link:hover{text-decoration:underline}

/* ==========================================================================
   KATEGORI AGACI  (sol menu widget)
   ========================================================================== */
.dropmes-category-tree-widget{
  background:var(--dm-card-bg);
  border:1px solid var(--dm-border);
  border-radius:var(--dm-radius);
  padding:16px;margin-bottom:16px;
}
.category-tree-header{
  display:flex;align-items:center;justify-content:space-between;
  padding-bottom:11px;margin-bottom:11px;
  border-bottom:1px solid var(--dm-border);
}
.category-tree-title{font-size:13.5px;font-weight:900;color:var(--dm-dark)}
.category-tree-nav{font-size:13.5px}
.tree-root-list,.tree-sub-list,.tree-deep-list{list-style:none;margin:0;padding:0}
.tree-sub-list{padding-left:14px;margin-top:5px}
.tree-deep-list{padding-left:12px;margin-top:4px}
.tree-item-row{
  display:flex;align-items:center;justify-content:space-between;
  gap:8px;padding:6px 0;
}
.tree-link-text{
  color:var(--dm-text);text-decoration:none;
  font-size:13px;font-weight:600;line-height:1.35;
}
.tree-link-text:hover{color:var(--dm-blue)}
.tree-toggle-btn{
  background:none;border:none;cursor:pointer;
  color:var(--dm-light-text);padding:2px;
  display:flex;align-items:center;flex:0 0 auto;
}
.chevron-icon{transition:transform .2s}
.tree-item-row.is-open .chevron-icon{transform:rotate(180deg)}
.tree-sub-dot{color:var(--dm-border);margin-right:5px;font-size:9px}
.category-quick-filters{
  margin-top:14px;padding-top:14px;
  border-top:1px solid var(--dm-border);
}
.quick-filter-heading{
  font-size:11.5px;font-weight:800;color:var(--dm-light-text);
  text-transform:uppercase;letter-spacing:.05em;margin-bottom:9px;
}
.quick-size-chips{display:flex;flex-wrap:wrap;gap:6px}
.size-chip{
  background:var(--dm-bg);border:1px solid var(--dm-border);
  border-radius:14px;padding:5px 11px;
  font-size:11.5px;font-weight:700;color:var(--dm-text);
  text-decoration:none;transition:border-color .2s,color .2s;
}
.size-chip:hover{border-color:var(--dm-blue);color:var(--dm-blue)}

@media (max-width:600px){
  .insta-main-title{font-size:19px}
  .insta-posts-grid{grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
  .insta-profile-bar{flex-direction:column;align-items:flex-start}
}


/* --- Filtre cubugu tamamlayicilari (v5) --- */
.ty-filter-sidebar-header{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding-bottom:12px;margin-bottom:12px;
  border-bottom:1px solid var(--dm-border);
}
.ty-sidebar-head-title{font-size:13.5px;font-weight:900;color:var(--dm-dark)}
.ty-btn-clear-filters{
  font-size:11.5px;font-weight:700;color:var(--dm-blue);
  text-decoration:none;background:none;border:none;cursor:pointer;
}
.ty-btn-clear-filters:hover{text-decoration:underline}
.ty-filter-title{
  display:flex;align-items:center;justify-content:space-between;
  gap:8px;cursor:pointer;padding:6px 0;
  font-size:13px;font-weight:800;color:var(--dm-dark);
}
.ty-filter-title svg{transition:transform .2s;flex:0 0 auto;color:var(--dm-light-text)}
.ty-filter-group.is-closed .ty-filter-title svg{transform:rotate(-90deg)}
.ty-filter-group.is-closed .ty-filter-body{display:none}
.ty-filter-body{padding-top:4px}
.ty-filter-link{
  display:block;padding:6px 0;
  font-size:13px;font-weight:600;color:var(--dm-text);
  text-decoration:none;line-height:1.4;
}
.ty-filter-link:hover{color:var(--dm-blue)}
.ty-market-pill{
  text-decoration:none;
  display:inline-flex;align-items:center;gap:6px;
}


/* ==========================================================================
   CANLI GRADYAN SISTEMI  (v6)
   Modul renkleri guclendirildi, hareket eklendi.
   ========================================================================== */

/* --- Kampanya banner kartlari: tam gradyan + parlama --- */
.ty-promo-banners-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:14px;margin:18px 0;
}
.ty-promo-banner-card{
  position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  border-radius:14px;padding:22px 24px;min-height:132px;
  text-decoration:none;color:#fff;
  box-shadow:0 10px 24px -8px rgba(15,23,42,.28);
  transition:transform .28s cubic-bezier(.16,1,.3,1),box-shadow .28s;
  isolation:isolate;
}
.ty-promo-banner-card::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:linear-gradient(135deg,var(--g1) 0%,var(--g2) 55%,var(--g3) 100%);
  background-size:180% 180%;
  transition:background-position .6s ease;
}
/* isik parlamasi */
.ty-promo-banner-card::after{
  content:"";position:absolute;z-index:-1;
  top:-60%;right:-20%;width:70%;height:220%;
  background:radial-gradient(ellipse at center,rgba(255,255,255,.22) 0%,transparent 65%);
  transform:rotate(18deg);
  transition:opacity .35s,transform .5s;
  opacity:.75;
}
.ty-promo-banner-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 38px -10px rgba(15,23,42,.4);
}
.ty-promo-banner-card:hover::before{background-position:100% 0}
.ty-promo-banner-card:hover::after{opacity:1;transform:rotate(18deg) scale(1.15)}

.banner-blue{--g1:#0ea5e9;--g2:#2563eb;--g3:#4f46e5}
.banner-emerald{--g1:#10b981;--g2:#059669;--g3:#0d9488}
.banner-crimson{--g1:#f43f5e;--g2:#e11d48;--g3:#be123c}
.banner-violet{--g1:#a855f7;--g2:#7c3aed;--g3:#6d28d9}
.banner-dark{--g1:#334155;--g2:#1e293b;--g3:#0f172a}

.ty-banner-text-box{position:relative;z-index:1;min-width:0;flex:1}
.ty-banner-text-box h3{
  font-size:17px;font-weight:900;margin:0 0 6px;
  letter-spacing:-.01em;line-height:1.25;
  text-shadow:0 1px 2px rgba(0,0,0,.14);
}
.ty-banner-text-box p{
  font-size:12.5px;margin:0 0 12px;
  color:rgba(255,255,255,.9);line-height:1.45;max-width:34ch;
}
.ty-banner-btn{
  display:inline-block;
  background:rgba(255,255,255,.95);color:#0f172a;
  font-size:12px;font-weight:900;
  padding:8px 16px;border-radius:22px;
  transition:transform .22s,box-shadow .22s;
  box-shadow:0 3px 10px rgba(0,0,0,.14);
}
.ty-promo-banner-card:hover .ty-banner-btn{
  transform:translateX(3px);
  box-shadow:0 5px 16px rgba(0,0,0,.2);
}
.ty-banner-icon{
  position:relative;z-index:1;
  font-size:54px;line-height:1;flex:0 0 auto;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.22));
  transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.ty-promo-banner-card:hover .ty-banner-icon{transform:scale(1.12) rotate(-6deg)}

/* --- Stories: gradyan halka --- */
.ty-story-item.is-unread .ty-story-avatar-wrap{
  border-color:transparent;
  background:
    linear-gradient(var(--dm-card-bg),var(--dm-card-bg)) padding-box,
    linear-gradient(135deg,#0ea5e9,#6366f1,#a855f7,#ec4899) border-box;
  border:2.5px solid transparent;
}
.ty-story-item:hover .ty-story-avatar-wrap{
  transform:translateY(-4px) scale(1.06);
  box-shadow:0 8px 18px -6px rgba(99,102,241,.45);
}
.ty-story-item .ty-story-emoji{transition:transform .3s cubic-bezier(.16,1,.3,1)}
.ty-story-item:hover .ty-story-emoji{transform:scale(1.15)}

/* --- Kategori kartlari: renkli ikon kutusu --- */
.m-cat-icon{
  background:linear-gradient(135deg,#eff6ff,#e0e7ff);
  transition:transform .28s cubic-bezier(.16,1,.3,1),background .28s;
}
.m-cat-card:hover .m-cat-icon{
  transform:scale(1.1) rotate(-5deg);
  background:linear-gradient(135deg,#dbeafe,#c7d2fe);
}
.m-cat-card{position:relative;overflow:hidden}
.m-cat-card::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,#0ea5e9,#6366f1);
  transform:scaleY(0);transform-origin:bottom;
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.m-cat-card:hover::after{transform:scaleY(1)}

/* --- Urun kartlari: canlandirma --- */
.ty-product-card{transition:transform .26s cubic-bezier(.16,1,.3,1),box-shadow .26s,border-color .26s}
.ty-product-card:hover{transform:translateY(-4px)}
.ty-card-img{transition:transform .45s cubic-bezier(.16,1,.3,1)}
.ty-product-card:hover .ty-card-img{transform:scale(1.07)}
.ty-card-img-wrap{overflow:hidden}

/* Rozetler: gradyan */
.ty-badge{
  font-weight:800;letter-spacing:.02em;
  box-shadow:0 2px 6px rgba(0,0,0,.1);
}
.ty-badge-orange{background:linear-gradient(135deg,#fb923c,#ea580c);color:#fff}
.ty-badge-green{background:linear-gradient(135deg,#34d399,#059669);color:#fff}
.ty-badge-purple{background:linear-gradient(135deg,#a78bfa,#7c3aed);color:#fff}
.ty-badge-muted{background:linear-gradient(135deg,#cbd5e1,#94a3b8);color:#fff}

.ty-price-deal-tag{
  background:linear-gradient(135deg,#fef3c7,#fde68a);
  color:#b45309;font-weight:800;
}

/* Favori butonu */
.ty-fav-btn{transition:transform .22s,background .22s,color .22s}
.ty-fav-btn:hover{transform:scale(1.15)}
.ty-fav-btn.is-fav{
  background:linear-gradient(135deg,#fb7185,#e11d48);
  color:#fff;border-color:transparent;
}
.ty-fav-btn.is-fav svg{fill:currentColor}

/* --- Kategori serit: aktif vurgu --- */
.ty-nav-item{position:relative;transition:color .2s}
.ty-nav-item::after{
  content:"";position:absolute;left:10px;right:10px;bottom:4px;height:2.5px;
  background:linear-gradient(90deg,#0ea5e9,#6366f1);border-radius:2px;
  transform:scaleX(0);transform-origin:left;
  transition:transform .28s cubic-bezier(.16,1,.3,1);
}
.ty-nav-item:hover::after,.ty-nav-item.is-active::after{transform:scaleX(1)}
.ty-all-cats-btn::after{display:none}

.ty-tag-badge{
  background:linear-gradient(135deg,#22d3ee,#0891b2);
  color:#fff;font-weight:800;
}
.ty-tag-badge.badge-red{background:linear-gradient(135deg,#fb7185,#e11d48)}

/* --- Flas indirim: canli --- */
.ty-flash-deals-header{
  background:linear-gradient(120deg,#fff7ed 0%,#ffedd5 45%,#fed7aa 100%);
  position:relative;overflow:hidden;
}
.ty-flash-icon{
  animation:tyPulse 2.2s ease-in-out infinite;
  display:inline-block;
}
@keyframes tyPulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.18)}
}
.ty-timer-digit{
  background:linear-gradient(135deg,#1e293b,#0f172a);
  box-shadow:0 3px 8px rgba(15,23,42,.28);
}

/* --- Pazar butonu: gradyan --- */
.ty-market-top-btn{
  background:linear-gradient(135deg,#0ea5e9,#4f46e5);
  color:#fff;border:none;font-weight:800;
  transition:transform .22s,box-shadow .22s;
}
.ty-market-top-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 5px 14px -4px rgba(79,70,229,.55);
}

/* --- Sepet butonu rozeti --- */
.ty-badge-count{
  background:linear-gradient(135deg,#f43f5e,#e11d48);
  box-shadow:0 2px 6px rgba(225,29,72,.4);
}

@media (prefers-reduced-motion:reduce){
  .ty-flash-icon{animation:none}
  .ty-promo-banner-card,.ty-product-card,.ty-story-item,.m-cat-card{transition:none}
}
@media (max-width:600px){
  .ty-banner-icon{font-size:40px}
  .ty-promo-banner-card{min-height:110px;padding:18px 18px}
  .ty-banner-text-box h3{font-size:15px}
}


/* ==========================================================================
   URUN KARTI VARYANT ONIZLEMESI
   ========================================================================== */
.ty-card-variants{
  display:flex;align-items:center;gap:6px;
  margin:6px 0 2px;min-width:0;flex-wrap:wrap;
}
.ty-card-variants-label{
  font-size:11px;font-weight:700;color:var(--dm-light-text);
  flex:0 0 auto;
}
.ty-card-variant-chips{display:flex;gap:4px;flex-wrap:wrap;min-width:0}
.ty-card-variant-chip{
  font-size:10.5px;font-weight:700;
  background:var(--dm-bg);
  border:1px solid var(--dm-border);
  color:var(--dm-text);
  padding:2.5px 7px;border-radius:5px;
  white-space:nowrap;line-height:1.3;
  transition:border-color .2s,color .2s;
}
.ty-product-card:hover .ty-card-variant-chip{border-color:#cbd5e1}
.ty-card-variant-chip.is-more{
  background:linear-gradient(135deg,#eff6ff,#e0e7ff);
  border-color:#bfdbfe;color:var(--dm-blue);
}
.ty-card-variant-chip.is-color{
  background:linear-gradient(135deg,#fdf2f8,#fce7f3);
  border-color:#fbcfe8;color:#be185d;
}

/* Urun sayfasi: ebat pill butonlari guclendirildi */
.ty-size-pills-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.ty-size-pill-btn{
  position:relative;
  background:var(--dm-card-bg);
  border:2px solid var(--dm-border);
  border-radius:9px;
  padding:10px 16px;
  font-size:13px;font-weight:800;color:var(--dm-text);
  cursor:pointer;font-family:inherit;
  transition:border-color .2s,color .2s,transform .2s,box-shadow .2s;
}
.ty-size-pill-btn:hover{
  border-color:var(--dm-blue);color:var(--dm-blue);
  transform:translateY(-1px);
}
.ty-size-pill-btn.is-active{
  border-color:var(--dm-blue);
  color:#fff;
  background:linear-gradient(135deg,#0ea5e9,#4f46e5);
  box-shadow:0 4px 12px -3px rgba(79,70,229,.45);
}
.ty-size-pop-tag{
  position:absolute;top:-9px;right:-6px;
  background:linear-gradient(135deg,#fb7185,#e11d48);
  color:#fff;font-size:8.5px;font-weight:900;
  padding:2px 6px;border-radius:8px;
  letter-spacing:.03em;
}

/* Renk swatch */
.ty-color-swatches-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.ty-swatch-btn{
  display:flex;align-items:center;gap:7px;
  background:var(--dm-card-bg);
  border:2px solid var(--dm-border);
  border-radius:9px;padding:7px 12px;
  cursor:pointer;font-family:inherit;
  font-size:12.5px;font-weight:700;color:var(--dm-text);
  transition:border-color .2s,transform .2s;
}
.ty-swatch-btn:hover{border-color:var(--dm-blue);transform:translateY(-1px)}
.ty-swatch-btn.is-active{
  border-color:var(--dm-blue);
  box-shadow:0 0 0 3px rgba(14,165,233,.12);
}
.ty-color-circle{
  width:18px;height:18px;border-radius:50%;
  border:1px solid rgba(0,0,0,.12);flex:0 0 auto;
  background:linear-gradient(135deg,#e2e8f0,#cbd5e1);
}

/* Genel secenek pill */
.ty-generic-pills-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.ty-generic-pill-btn{
  background:var(--dm-card-bg);
  border:2px solid var(--dm-border);
  border-radius:9px;padding:9px 15px;
  font-size:12.5px;font-weight:700;color:var(--dm-text);
  cursor:pointer;font-family:inherit;
  transition:border-color .2s,color .2s,transform .2s;
}
.ty-generic-pill-btn:hover{border-color:var(--dm-blue);color:var(--dm-blue);transform:translateY(-1px)}
.ty-generic-pill-btn.is-active{
  border-color:var(--dm-blue);color:#fff;
  background:linear-gradient(135deg,#0ea5e9,#4f46e5);
}

/* Secenek grubu basligi */
.ty-option-group{margin-bottom:16px}
.ty-option-label-row{
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
}
.ty-opt-title{font-size:13px;font-weight:800;color:var(--dm-dark)}
.ty-opt-selected-val{
  font-size:12.5px;font-weight:700;color:var(--dm-blue);
}

@media (max-width:600px){
  .ty-card-variants{gap:4px}
  .ty-card-variant-chip{font-size:9.5px;padding:2px 6px}
  .ty-size-pill-btn{padding:8px 13px;font-size:12px}
}


/* Sepette varyant etiketi */
.ty-variant-tag{
  display:inline-block;
  background:var(--dm-bg);
  border:1px solid var(--dm-border);
  border-radius:5px;
  padding:2px 7px;margin:2px 4px 2px 0;
  font-size:11px;color:var(--dm-light-text);
}
.ty-variant-tag strong{color:var(--dm-dark);font-weight:700}

/* ==========================================================================
   TRENDYOL VİTRİN, HİKAYELER, KATEGORİ GRID, BANKA & PROMO BANNER SİSTEMİ
   ========================================================================== */

/* 1. HİKAYELER (STORIES) */
.ty-stories-wrapper {
  padding: 14px 0 10px;
  overflow: hidden;
}
.ty-stories-track {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  padding: 6px 4px 12px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.ty-stories-track::-webkit-scrollbar {
  display: none;
}
.ty-story-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  flex: 0 0 auto;
  position: relative;
  transition: transform 0.2s ease;
}
.ty-story-item:hover {
  transform: translateY(-3px);
}
.ty-story-avatar-wrap {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  padding: 3px;
  background: #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.3s ease;
}
.ty-story-item.is-unread .ty-story-avatar-wrap {
  background: linear-gradient(45deg, #f97316, #ec4899, #8b5cf6, #0284c7);
  background-size: 300% 300%;
  animation: storyGradient 4s ease infinite;
  box-shadow: 0 4px 14px rgba(236, 72, 153, 0.25);
}
@keyframes storyGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.ty-story-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #ffffff;
  background: #f8fafc;
}
.ty-story-emoji {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
}
.ty-story-label {
  margin-top: 7px;
  font-size: 12px;
  font-weight: 700;
  color: var(--dm-dark);
  text-align: center;
  max-width: 82px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ty-story-mini-badge {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 9px;
  font-weight: 900;
  color: #fff;
  background: #f97316;
  padding: 2px 6px;
  border-radius: 10px;
  border: 1.5px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  letter-spacing: 0.02em;
}

/* 2. BANKA & GÜVENCE BARI */
.ty-bank-offers-bar {
  background: #ffffff;
  border: 1px solid var(--dm-border);
  border-radius: 12px;
  padding: 14px 20px;
  margin: 10px 0 20px;
  box-shadow: var(--dm-shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ty-bank-offers-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f1f5f9;
}
.ty-bank-badge {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ty-bank-badge-icon {
  font-size: 26px;
  background: #eff6ff;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #dbeafe;
}
.ty-bank-badge-text strong {
  display: block;
  font-size: 13.5px;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -0.01em;
}
.ty-bank-badge-text span {
  font-size: 12px;
  color: #64748b;
  font-weight: 500;
}
.ty-bank-logos-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.ty-bank-chip {
  font-size: 10px;
  font-weight: 900;
  padding: 5px 10px;
  border-radius: 6px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.bank-bonus { background: #e8f5e9; color: #1b5e20; border: 1px solid #c8e6c9; }
.bank-world { background: #e3f2fd; color: #0d47a1; border: 1px solid #bbdefb; }
.bank-maximum { background: #fce4ec; color: #880e4f; border: 1px solid #f8bbd0; }
.bank-axess { background: #fff3e0; color: #e65100; border: 1px solid #ffe082; }
.bank-cardfinans { background: #ede7f6; color: #4a148c; border: 1px solid #d1c4e9; }
.bank-bankkart { background: #ffebee; color: #b71c1c; border: 1px solid #ffcdd2; }
.bank-paraf { background: #e0f2f1; color: #004d40; border: 1px solid #b2dfdb; }

.ty-trust-badges-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.ty-trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #475569;
}
.ty-trust-item strong {
  color: #0f172a;
}

/* 3. KATEGORİ VİTRİN GRID */
.ty-category-section {
  margin: 24px auto 32px;
}
.ty-section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 18px;
}
.ty-section-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  color: #0284c7;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.ty-section-title {
  font-size: 22px;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.ty-view-all-link {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 800;
  color: #0284c7;
  text-decoration: none;
  transition: gap 0.2s ease, color 0.2s ease;
}
.ty-view-all-link:hover {
  gap: 10px;
  color: #0369a1;
}

.ty-cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (min-width: 1024px) {
  .ty-cat-grid {
    grid-template-columns: repeat(8, 1fr);
    gap: 14px;
  }
}
.ty-cat-card {
  background: #ffffff;
  border: 1px solid var(--dm-border);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.ty-cat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
  border-color: #cbd5e1;
}
.ty-cat-img-box {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #f1f5f9;
  overflow: hidden;
}
.ty-cat-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.ty-cat-card:hover .ty-cat-img-box img {
  transform: scale(1.08);
}
.ty-cat-icon-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 44px;
}
.ty-cat-card-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 9.5px;
  font-weight: 900;
  color: #ffffff;
  padding: 3px 8px;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.ty-cat-info {
  padding: 10px 8px 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ty-cat-title {
  font-size: 13px;
  font-weight: 800;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ty-cat-count {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
}

/* 4. TRENDYOL KAMPANYA BANNERLARI GRID */
.ty-promo-banners-section {
  margin: 18px auto 28px;
}
.ty-promo-banners-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 900px) {
  .ty-promo-banners-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 580px) {
  .ty-promo-banners-grid {
    grid-template-columns: 1fr;
  }
}
.ty-promo-banner-card {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 22px;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08);
}
.ty-promo-banner-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.16);
}
.ty-banner-bg-wrap {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.ty-banner-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.ty-promo-banner-card:hover .ty-banner-bg-img {
  transform: scale(1.06);
}
.ty-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.15) 0%, rgba(15, 23, 42, 0.85) 85%);
  z-index: 2;
}

/* Banner Renk Filtreleri */
.banner-blue .ty-banner-overlay {
  background: linear-gradient(180deg, rgba(2, 132, 199, 0.2) 0%, rgba(15, 23, 42, 0.88) 80%);
}
.banner-pink .ty-banner-overlay {
  background: linear-gradient(180deg, rgba(236, 72, 153, 0.25) 0%, rgba(30, 10, 25, 0.90) 80%);
}
.banner-emerald .ty-banner-overlay {
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.2) 0%, rgba(6, 40, 30, 0.88) 80%);
}
.banner-amber .ty-banner-overlay {
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.25) 0%, rgba(45, 25, 5, 0.90) 80%);
}
.banner-crimson .ty-banner-overlay {
  background: linear-gradient(180deg, rgba(225, 29, 72, 0.25) 0%, rgba(35, 10, 15, 0.90) 80%);
}
.banner-dark .ty-banner-overlay {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.3) 0%, rgba(2, 6, 23, 0.92) 80%);
}

.ty-banner-text-box {
  position: relative;
  z-index: 3;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ty-banner-top-badge {
  align-self: flex-start;
  font-size: 10px;
  font-weight: 900;
  padding: 3px 8px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.ty-banner-text-box h3 {
  font-size: 19px;
  font-weight: 900;
  color: #ffffff;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.ty-banner-text-box p {
  font-size: 12.5px;
  color: #f1f5f9;
  line-height: 1.4;
  font-weight: 500;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.ty-banner-btn {
  align-self: flex-start;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 800;
  color: #0f172a;
  background: #ffffff;
  padding: 6px 14px;
  border-radius: 20px;
  transition: all 0.2s ease;
  box-shadow: 0 3px 10px rgba(0,0,0,0.2);
}
.ty-promo-banner-card:hover .ty-banner-btn {
  background: var(--dm-blue);
  color: #ffffff;
  transform: translateX(4px);
}

/* Renk Yardımcı Sınıfları */
.bg-orange { background: #f97316 !important; color: #fff !important; }
.bg-blue { background: #0284c7 !important; color: #fff !important; }
.bg-pink { background: #ec4899 !important; color: #fff !important; }
.bg-green { background: #10b981 !important; color: #fff !important; }
.bg-purple { background: #8b5cf6 !important; color: #fff !important; }
.bg-teal { background: #0d9488 !important; color: #fff !important; }
.bg-amber { background: #d97706 !important; color: #fff !important; }
.bg-red { background: #e11d48 !important; color: #fff !important; }
.bg-emerald { background: #059669 !important; color: #fff !important; }

/* Mobil Uyumluluk İyileştirmeleri */
@media (max-width: 768px) {
  .ty-trust-badges-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .ty-cat-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .ty-story-avatar-wrap {
    width: 64px;
    height: 64px;
  }
  .ty-promo-banner-card {
    min-height: 190px;
    padding: 16px;
  }
  .ty-banner-text-box h3 {
    font-size: 16.5px;
  }
}

/* ==========================================================================
   5. 6'LI KAYAN HERO BANNER SLIDER & AKTİF/PASİF KATEGORİ SİSTEMİ
   ========================================================================== */

/* Hero Slider */
.ty-hero-slider-section {
  margin: 12px auto 18px;
}
.ty-slider-container {
  position: relative;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
  background: #0f172a;
}
.ty-slider-track {
  display: flex;
  width: 100%;
  transition: transform 0.55s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}
.ty-slide-item {
  flex: 0 0 100%;
  width: 100%;
  position: relative;
}
.ty-slide-link {
  display: block;
  position: relative;
  width: 100%;
  min-height: 380px;
  height: 420px;
  text-decoration: none;
  overflow: hidden;
}
@media (max-width: 768px) {
  .ty-slide-link {
    min-height: 300px;
    height: 320px;
  }
}
.ty-slide-img-box {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.ty-slide-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.8s ease;
}
.ty-slide-link:hover .ty-slide-bg {
  transform: scale(1.04);
}
.ty-slide-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* Slide Gradient Temaları */
.slide-gradient-blue {
  background: linear-gradient(90deg, rgba(15, 23, 42, 0.92) 0%, rgba(2, 132, 199, 0.75) 50%, rgba(15, 23, 42, 0.25) 100%);
}
.slide-gradient-emerald {
  background: linear-gradient(90deg, rgba(6, 40, 30, 0.94) 0%, rgba(16, 185, 129, 0.75) 50%, rgba(15, 23, 42, 0.25) 100%);
}
.slide-gradient-pink {
  background: linear-gradient(90deg, rgba(30, 10, 25, 0.94) 0%, rgba(236, 72, 153, 0.75) 50%, rgba(15, 23, 42, 0.25) 100%);
}
.slide-gradient-purple {
  background: linear-gradient(90deg, rgba(25, 10, 45, 0.94) 0%, rgba(139, 92, 246, 0.75) 50%, rgba(15, 23, 42, 0.25) 100%);
}
.slide-gradient-teal {
  background: linear-gradient(90deg, rgba(10, 35, 40, 0.94) 0%, rgba(13, 148, 136, 0.75) 50%, rgba(15, 23, 42, 0.25) 100%);
}
.slide-gradient-amber {
  background: linear-gradient(90deg, rgba(40, 20, 5, 0.94) 0%, rgba(217, 119, 6, 0.75) 50%, rgba(15, 23, 42, 0.25) 100%);
}

.ty-slide-content {
  position: relative;
  z-index: 3;
  padding: 44px 50px;
  max-width: 620px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  color: #ffffff;
  height: 100%;
  justify-content: center;
}
@media (max-width: 768px) {
  .ty-slide-content {
    padding: 24px 20px;
    max-width: 100%;
    gap: 8px;
  }
}
.ty-slide-badge {
  font-size: 11px;
  font-weight: 900;
  padding: 5px 12px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: 0 3px 10px rgba(0,0,0,0.3);
}
.ty-slide-title {
  font-size: 32px;
  font-weight: 900;
  color: #ffffff;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 10px rgba(0,0,0,0.4);
}
@media (max-width: 768px) {
  .ty-slide-title {
    font-size: 20px;
  }
}
.ty-slide-desc {
  font-size: 14.5px;
  color: #f1f5f9;
  line-height: 1.5;
  font-weight: 500;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
@media (max-width: 768px) {
  .ty-slide-desc {
    font-size: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}
.ty-slide-cta {
  margin-top: 8px;
  font-size: 13.5px;
  font-weight: 800;
  color: #0f172a;
  background: #ffffff;
  padding: 10px 22px;
  border-radius: 30px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  transition: all 0.2s ease;
}
.ty-slide-link:hover .ty-slide-cta {
  background: var(--dm-blue);
  color: #ffffff;
  transform: translateX(5px);
}
@media (max-width: 768px) {
  .ty-slide-cta {
    font-size: 11.5px;
    padding: 7px 16px;
    margin-top: 4px;
  }
}

/* Slider Kontrolleri */
.ty-slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0f172a;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  transition: all 0.2s ease;
  backdrop-filter: blur(4px);
}
.ty-slider-btn:hover {
  background: #ffffff;
  color: var(--dm-blue);
  transform: translateY(-50%) scale(1.1);
}
.ty-slider-prev {
  left: 16px;
}
.ty-slider-next {
  right: 16px;
}
@media (max-width: 768px) {
  .ty-slider-btn {
    width: 34px;
    height: 34px;
  }
  .ty-slider-prev { left: 8px; }
  .ty-slider-next { right: 8px; }
}

.ty-slider-dots {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 8px;
}
.ty-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.25s ease;
}
.ty-dot.is-active {
  width: 28px;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* ==========================================================================
   6. ULTRA KALİTE ÜRÜN KARTLARI, KOYU NEON MAVİ FİYAT KAPSÜLÜ, SLIDEOUT DRAWER
   ========================================================================== */

/* 1. ÜRÜN KARTLARI (REFERANS TASARIM) */
.ty-product-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}
.ty-product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.12);
  border-color: #cbd5e1;
}

/* Rozetler */
.ty-badges-stack {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: flex-start;
}
.ty-badge-kargo-bedava {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff;
  font-size: 10px;
  font-weight: 900;
  padding: 4px 10px;
  border-radius: 6px;
  letter-spacing: 0.03em;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35);
  text-transform: uppercase;
}
.ty-badge-secenek {
  background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
  color: #ffffff;
  font-size: 9.5px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 6px rgba(139, 92, 246, 0.3);
  text-transform: uppercase;
}
.ty-badge-indirim {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  color: #ffffff;
  font-size: 9.5px;
  font-weight: 900;
  padding: 3px 8px;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(249, 115, 22, 0.3);
}
.ty-badge-global {
  background: #0284c7;
  color: #fff;
  font-size: 9.5px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
}

/* Favori Butonu */
.ty-fav-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
  transition: all 0.2s ease;
}
.ty-fav-btn:hover {
  transform: scale(1.15);
  border-color: #f43f5e;
}
.ty-fav-btn:hover svg path {
  fill: #f43f5e;
  stroke: #f43f5e;
}

/* Kart Görseli */
.ty-card-img-wrap {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #f8fafc;
  overflow: hidden;
  position: relative;
}
.ty-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.ty-product-card:hover .ty-card-img {
  transform: scale(1.06);
}

/* Kart Gövdesi & Tipografi */
.ty-card-body {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.ty-card-brand {
  font-size: 12px;
  font-weight: 900;
  color: #0284c7;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
  text-transform: uppercase;
}
.ty-card-title {
  margin-bottom: 6px;
  min-height: 38px;
}
.ty-card-title a {
  color: #0f172a;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.2s ease;
}
.ty-card-title a:hover {
  color: #0284c7;
}

/* Ebat/Boyut Kapsül Kutusu */
.ty-card-options-pill-row {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 11px;
  align-self: flex-start;
  margin-top: 4px;
}
.ty-opt-label-prefix {
  color: #64748b;
  font-weight: 600;
}
.ty-opt-pill-value {
  color: #0f172a;
  font-weight: 800;
}

/* Noktalı Ayırıcı Çizgi */
.ty-card-dotted-divider {
  border-bottom: 1.5px dotted #cbd5e1;
  margin: 10px 0 8px;
  width: 100%;
}

/* KOYU NEON PARLAK MAVİ FİYAT KAPSÜLÜ */
.ty-card-price-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
}
.ty-neon-price-pill {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  color: #ffffff;
  padding: 6px 14px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ty-product-card:hover .ty-neon-price-pill {
  transform: scale(1.04);
  box-shadow: 0 6px 18px rgba(2, 132, 199, 0.55);
}
.ty-neon-price-pill .ty-main-price {
  color: #ffffff !important;
  font-size: 16.5px;
  font-weight: 900;
  letter-spacing: -0.01em;
}
.ty-old-price {
  font-size: 12px;
  color: #94a3b8;
  text-decoration: line-through;
  font-weight: 600;
}

/* 2. BOYDAN BOYA MARQUEE DUYURU BANDI (YAVAŞ & KOYU NEON MAVİ) */
.ty-marquee-banner-wrap {
  width: 100%;
  overflow: hidden;
  background: #0b1329;
}
.ty-marquee-gradient-bar {
  background: linear-gradient(90deg, #0369a1 0%, #0284c7 25%, #0891b2 50%, #0284c7 75%, #0369a1 100%);
  background-size: 200% 100%;
  animation: marqueeGradientShift 14s linear infinite;
  padding: 8.5px 0;
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(2, 132, 199, 0.3);
}
.ty-marquee-track {
  display: flex;
  align-items: center;
  white-space: nowrap;
  animation: marqueeScrollText 85s linear infinite;
}
@keyframes marqueeScrollText {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
.ty-marquee-item {
  padding: 0 16px;
  font-size: 12.5px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: 0.02em;
}

/* 3. SOLA SAKLANIP AÇILAN KATEGORİ AĞACI DRAWER (OFF-CANVAS) */
.ty-cat-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
  z-index: 99998;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}
.ty-cat-drawer-overlay.is-open {
  opacity: 1;
  visibility: visible;
}
.ty-slideout-cat-drawer {
  position: fixed;
  top: 0;
  left: -390px;
  width: 360px;
  max-width: 90vw;
  height: 100vh;
  background: #ffffff;
  z-index: 99999;
  box-shadow: 10px 0 40px rgba(15, 23, 42, 0.25);
  display: flex;
  flex-direction: column;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  transform: translateX(0);
}
.ty-slideout-cat-drawer.is-open {
  transform: translateX(390px);
}
.ty-cat-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: linear-gradient(135deg, #0284c7, #0369a1);
  color: #ffffff;
}
.ty-cat-drawer-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ty-cat-drawer-title-wrap h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: #ffffff;
}
.ty-cat-drawer-close-btn {
  background: rgba(255,255,255,0.2);
  border: none;
  color: #ffffff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
}
.ty-cat-drawer-close-btn:hover {
  background: rgba(255,255,255,0.35);
}
.ty-cat-drawer-search {
  padding: 12px 18px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}
.ty-cat-drawer-search input {
  width: 100%;
  padding: 9px 14px;
  border-radius: 8px;
  border: 1.5px solid #cbd5e1;
  font-size: 13px;
  outline: none;
  font-family: inherit;
}
.ty-cat-drawer-search input:focus {
  border-color: #0284c7;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}
.ty-cat-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 10px 0;
}
.ty-cat-tree-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ty-tree-item {
  border-bottom: 1px solid #f1f5f9;
}
.ty-tree-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  cursor: pointer;
  transition: background 0.2s;
}
.ty-tree-row:hover {
  background: #f0f9ff;
}
.ty-tree-icon {
  font-size: 18px;
}
.ty-tree-name {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  flex: 1;
}
.ty-tree-badge {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
  color: #fff;
}
.ty-tree-arrow {
  color: #94a3b8;
  font-size: 12px;
  font-weight: 700;
}
.ty-tree-sublist {
  list-style: none;
  margin: 0;
  padding: 4px 0 10px 48px;
  background: #f8fafc;
  display: none;
}
.ty-tree-item.is-expanded .ty-tree-sublist {
  display: block;
}
.ty-tree-sublist li a {
  display: block;
  padding: 6px 12px;
  font-size: 12.5px;
  color: #475569;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s;
}
.ty-tree-sublist li a:hover {
  color: #0284c7;
  font-weight: 700;
}
.ty-cat-drawer-footer {
  padding: 14px 18px;
  border-top: 1px solid #e2e8f0;
  background: #ffffff;
}
.ty-cat-drawer-all-btn {
  display: block;
  text-align: center;
  background: #0284c7;
  color: #ffffff;
  padding: 11px;
  border-radius: 8px;
  font-weight: 800;
  text-decoration: none;
  font-size: 13.5px;
  transition: background 0.2s;
}
.ty-cat-drawer-all-btn:hover {
  background: #0369a1;
}


/* 2. NEON HALKALI KATEGORİ VİTRİNİ */
.ty-cat-neon-ring {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  padding: 3.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 14px auto 6px;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}
.ty-cat-neon-ring img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2.5px solid #ffffff;
  background: #ffffff;
}
.ty-cat-card:hover .ty-cat-neon-ring {
  transform: scale(1.10);
}

.ring-cyan { background: linear-gradient(135deg, #06b6d4, #0284c7); box-shadow: 0 6px 18px rgba(6, 182, 212, 0.35); }
.ring-emerald { background: linear-gradient(135deg, #10b981, #059669); box-shadow: 0 6px 18px rgba(16, 185, 129, 0.35); }
.ring-pink { background: linear-gradient(135deg, #ec4899, #be185d); box-shadow: 0 6px 18px rgba(236, 72, 153, 0.35); }
.ring-purple { background: linear-gradient(135deg, #8b5cf6, #6d28d9); box-shadow: 0 6px 18px rgba(139, 92, 246, 0.35); }
.ring-amber { background: linear-gradient(135deg, #f59e0b, #d97706); box-shadow: 0 6px 18px rgba(245, 158, 11, 0.35); }
.ring-teal { background: linear-gradient(135deg, #14b8a6, #0f766e); box-shadow: 0 6px 18px rgba(20, 184, 166, 0.35); }
.ring-blue { background: linear-gradient(135deg, #3b82f6, #1d4ed8); box-shadow: 0 6px 18px rgba(59, 130, 246, 0.35); }
.ring-crimson { background: linear-gradient(135deg, #f43f5e, #be123c); box-shadow: 0 6px 18px rgba(244, 63, 94, 0.35); }
.ring-gray { background: #cbd5e1; }

/* Soft Pastel Kategori Kart Temaları */
.cat-theme-cyan { background: linear-gradient(180deg, #f0fdfa 0%, #ffffff 100%); border-color: #ccfbf1; }
.cat-theme-emerald { background: linear-gradient(180deg, #ecfdf5 0%, #ffffff 100%); border-color: #d1fae5; }
.cat-theme-pink { background: linear-gradient(180deg, #fdf2f8 0%, #ffffff 100%); border-color: #fce7f3; }
.cat-theme-purple { background: linear-gradient(180deg, #f5f3ff 0%, #ffffff 100%); border-color: #ede9fe; }
.cat-theme-amber { background: linear-gradient(180deg, #fffbeb 0%, #ffffff 100%); border-color: #fef3c7; }
.cat-theme-teal { background: linear-gradient(180deg, #f0fdfa 0%, #ffffff 100%); border-color: #ccfbf1; }
.cat-theme-blue { background: linear-gradient(180deg, #eff6ff 0%, #ffffff 100%); border-color: #dbeafe; }
.cat-theme-crimson { background: linear-gradient(180deg, #fff1f2 0%, #ffffff 100%); border-color: #ffe4e6; }
.cat-theme-gray { background: #f8fafc; border-color: #e2e8f0; }

/* 3. BOYDAN BOYA MARQUEE DUYURU BANDI */
.ty-marquee-banner-wrap {
  width: 100%;
  overflow: hidden;
  background: #0f172a;
}
.ty-marquee-gradient-bar {
  background: linear-gradient(90deg, #0284c7 0%, #8b5cf6 25%, #ec4899 50%, #10b981 75%, #0284c7 100%);
  background-size: 300% 100%;
  animation: marqueeGradientShift 10s linear infinite;
  padding: 8px 0;
  color: #ffffff;
}
@keyframes marqueeGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}
.ty-marquee-content {
  display: flex;
  width: max-content;
}
.ty-marquee-track {
  display: flex;
  align-items: center;
  white-space: nowrap;
  animation: marqueeScrollText 35s linear infinite;
}
@keyframes marqueeScrollText {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
.ty-marquee-item {
  padding: 0 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: 0.02em;
}
.ty-marquee-sep {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
}
.ty-coupon-code {
  background: #ffffff;
  color: #0f172a;
  font-weight: 900;
  padding: 2px 7px;
  border-radius: 4px;
  margin-left: 4px;
}

/* 4. SOL ALT DİNAMİK CANLI PROMO TOAST WIDGET */
.ty-floating-promo-toast {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 9999;
  max-width: 350px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px);
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 14px 38px rgba(15, 23, 42, 0.18);
  padding: 12px 14px;
  transition: all 0.3s ease;
  animation: toastPopIn 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes toastPopIn {
  from { transform: translateY(30px) scale(0.9); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}
.ty-toast-close-btn {
  position: absolute;
  top: 6px;
  right: 8px;
  background: transparent;
  border: none;
  font-size: 18px;
  line-height: 1;
  color: #94a3b8;
  cursor: pointer;
  padding: 4px;
  transition: color 0.2s;
}
.ty-toast-close-btn:hover {
  color: #0f172a;
}
.ty-toast-slider {
  position: relative;
}
.ty-toast-card {
  display: none;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}
.ty-toast-card.is-active {
  display: flex;
  animation: fadeIn 0.4s ease;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.ty-toast-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex: 0 0 auto;
}
.bg-blue-glow { background: #eff6ff; border: 1px solid #bfdbfe; box-shadow: 0 0 12px rgba(2, 132, 199, 0.2); }
.bg-pink-glow { background: #fdf2f8; border: 1px solid #fbcfe8; box-shadow: 0 0 12px rgba(236, 72, 153, 0.2); }
.bg-purple-glow { background: #f5f3ff; border: 1px solid #ddd6fe; box-shadow: 0 0 12px rgba(139, 92, 246, 0.2); }
.bg-amber-glow { background: #fffbeb; border: 1px solid #fde68a; box-shadow: 0 0 12px rgba(245, 158, 11, 0.2); }

.ty-toast-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ty-toast-header-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ty-toast-tag {
  font-size: 9.5px;
  font-weight: 900;
  color: #0284c7;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.ty-toast-time {
  font-size: 9px;
  color: #94a3b8;
  font-weight: 600;
}
.ty-toast-title {
  font-size: 12.5px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.3;
}
/* ==========================================================================
   7. İKİLİ KAMPANYA BANNERLARI & KAYAN KATEGORİ ÜRÜN RAFLARI (CAROUSELS)
   ========================================================================== */

/* 1. İKİLİ KAMPANYA BANNERLARI */
.ty-dual-banners-section {
  margin: 18px auto 26px;
}
.ty-dual-banners-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
@media (max-width: 768px) {
  .ty-dual-banners-grid {
    grid-template-columns: 1fr;
  }
}
.ty-dual-banner-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 26px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.10);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}
.ty-dual-banner-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
}
.ty-dual-banner-img-box {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.ty-dual-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.ty-dual-banner-card:hover .ty-dual-bg {
  transform: scale(1.05);
}
.ty-dual-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.overlay-blue {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.2) 0%, rgba(2, 132, 199, 0.85) 85%);
}
.overlay-purple {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.2) 0%, rgba(109, 40, 217, 0.88) 85%);
}
.ty-dual-content {
  position: relative;
  z-index: 3;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ty-dual-badge {
  align-self: flex-start;
  font-size: 10.5px;
  font-weight: 900;
  padding: 4px 10px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.ty-dual-title {
  font-size: 22px;
  font-weight: 900;
  color: #ffffff;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.ty-dual-desc {
  font-size: 13px;
  color: #f1f5f9;
  line-height: 1.45;
  font-weight: 500;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.ty-dual-cta {
  align-self: flex-start;
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 800;
  color: #0f172a;
  background: #ffffff;
  padding: 8px 18px;
  border-radius: 24px;
  box-shadow: 0 3px 12px rgba(0,0,0,0.25);
  transition: all 0.2s ease;
}
.ty-dual-banner-card:hover .ty-dual-cta {
  background: var(--dm-blue);
  color: #ffffff;
  transform: translateX(4px);
}

/* 2. KAYAN KATEGORİ ÜRÜN RAFLARI (CAROUSELS) */
.ty-cat-carousel-section {
  margin: 32px auto 38px;
  position: relative;
}
.ty-carousel-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 2px solid #f1f5f9;
}
.ty-carousel-title-box {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ty-carousel-badge {
  align-self: flex-start;
  font-size: 10.5px;
  font-weight: 900;
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ty-carousel-heading {
  font-size: 23px;
  font-weight: 900;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -0.02em;
  margin: 2px 0 0;
}
.ty-carousel-icon {
  font-size: 24px;
}
.ty-carousel-sub {
  font-size: 12.5px;
  color: #64748b;
  font-weight: 600;
}

.ty-carousel-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}
.ty-carousel-view-all {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13.5px;
  font-weight: 800;
  color: #0284c7;
  text-decoration: none;
  background: #f0f9ff;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid #bae6fd;
  transition: all 0.2s ease;
}
.ty-carousel-view-all:hover {
  background: #0284c7;
  color: #ffffff;
  border-color: #0284c7;
  gap: 8px;
}
.ty-carousel-nav-btns {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ty-nav-arrow {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  color: #0f172a;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
  transition: all 0.2s ease;
}
.ty-nav-arrow:hover {
  border-color: #0284c7;
  color: #0284c7;
  background: #f8fafc;
  transform: scale(1.08);
}

.ty-carousel-viewport {
  position: relative;
  overflow: hidden;
  margin: 0 -6px;
  padding: 8px 6px 14px;
}
.ty-carousel-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 4px 2px 10px;
}
.ty-carousel-track::-webkit-scrollbar {
  display: none;
}
.ty-carousel-card-wrap {
  flex: 0 0 260px;
  width: 260px;
}
@media (max-width: 768px) {
  .ty-carousel-card-wrap {
    flex: 0 0 210px;
    width: 210px;
  }
  .ty-carousel-heading {
    font-size: 17.5px;
  }
  .ty-carousel-view-all {
    font-size: 11.5px;
    padding: 4px 10px;
  }
  .ty-nav-arrow {
    display: none;
  }
}






/* ==========================================================================
   RENK SWATCH GENISLETMESI
   Katalogdaki gercek renklere gore tamamlandi.
   Slug uretimi: main-product.liquid icinde deger kucultulup
   Turkce karakterler sadelestirilir (ornek: "Koyu Vizon" -> koyu-vizon)
   ========================================================================== */

/* --- Coklu / desenli --- */
.ty-color-circle.swatch-color-renkli,
.ty-color-circle.swatch-color-cok-renkli,
.ty-color-circle.swatch-color-cok-rankli,
.ty-color-circle.swatch-color-karisik,
.ty-color-circle.swatch-color-desenli{
  background:conic-gradient(#ef4444,#f59e0b,#10b981,#3b82f6,#8b5cf6,#ec4899,#ef4444);
}

/* --- Nötr tonlar --- */
.ty-color-circle.swatch-color-vizon{background:#a89080}
.ty-color-circle.swatch-color-koyu-vizon{background:#7d6959}
.ty-color-circle.swatch-color-krem{background:#f5ecd9}
.ty-color-circle.swatch-color-fume{background:#6b7280}
.ty-color-circle.swatch-color-duz-siyah{background:#111827}
.ty-color-circle.swatch-color-kahve{background:#6f4e37}
.ty-color-circle.swatch-color-acik-kahve{background:#a97f5e}
.ty-color-circle.swatch-color-koyu-kahve{background:#4a3423}
.ty-color-circle.swatch-color-ekru{background:#f0ead6}
.ty-color-circle.swatch-color-naturel{background:#e8dcc4}
.ty-color-circle.swatch-color-camel{background:#c19a6b}
.ty-color-circle.swatch-color-antrasit-gri{background:#3f4551}
.ty-color-circle.swatch-color-acik-gri{background:#cbd5e1}
.ty-color-circle.swatch-color-koyu-gri{background:#4b5563}

/* --- Renkli tonlar --- */
.ty-color-circle.swatch-color-lila{background:#c8a2c8}
.ty-color-circle.swatch-color-mint-yesili{background:#98e2c6}
.ty-color-circle.swatch-color-mint{background:#98e2c6}
.ty-color-circle.swatch-color-turkuaz{background:#40e0d0}
.ty-color-circle.swatch-color-petrol{background:#005f6a}
.ty-color-circle.swatch-color-hardal{background:#d4a017}
.ty-color-circle.swatch-color-somon{background:#fa8072}
.ty-color-circle.swatch-color-pudra{background:#f7d5cd}
.ty-color-circle.swatch-color-fusya{background:#ff00a0}
.ty-color-circle.swatch-color-koyu-yesil{background:#14532d}
.ty-color-circle.swatch-color-acik-mavi{background:#93c5fd}
.ty-color-circle.swatch-color-koyu-mavi{background:#1e3a8a}
.ty-color-circle.swatch-color-indigo{background:#4f46e5}
.ty-color-circle.swatch-color-sax{background:#4a7fb5}
.ty-color-circle.swatch-color-gul-kurusu{background:#c48189}

/* --- Desenli / özel yüzeyler --- */
.ty-color-circle.swatch-color-siyah-kroko{
  background:repeating-linear-gradient(45deg,#111827 0 3px,#1f2937 3px 6px);
}
.ty-color-circle.swatch-color-siyah-naturel{
  background:linear-gradient(135deg,#111827 50%,#e8dcc4 50%);
}
.ty-color-circle.swatch-color-taba-kroko{
  background:repeating-linear-gradient(45deg,#a0522d 0 3px,#8b4513 3px 6px);
}

/* --- Metalik --- */
.ty-color-circle.swatch-color-gold,
.ty-color-circle.swatch-color-altin{
  background:linear-gradient(135deg,#f7e08c,#d4a017,#f7e08c);
}
.ty-color-circle.swatch-color-silver,
.ty-color-circle.swatch-color-gumus{
  background:linear-gradient(135deg,#f1f5f9,#94a3b8,#f1f5f9);
}
.ty-color-circle.swatch-color-rose-gold{
  background:linear-gradient(135deg,#f9d1c7,#e0a899,#f9d1c7);
}
.ty-color-circle.swatch-color-bronz{
  background:linear-gradient(135deg,#cd7f32,#8c5a24,#cd7f32);
}

/* Beyaz/acik tonlarda kenarlik belirginlestir */
.ty-color-circle.swatch-color-beyaz,
.ty-color-circle.swatch-color-white,
.ty-color-circle.swatch-color-krem,
.ty-color-circle.swatch-color-ekru,
.ty-color-circle.swatch-color-naturel,
.ty-color-circle.swatch-color-pudra{
  border-color:rgba(0,0,0,.22);
}


/* Tanimsiz renkler icin akilli yedek: isimde gecen ana renge gore boya */
.ty-color-circle[class*="siyah"]{background:#111827}
.ty-color-circle[class*="beyaz"]{background:#ffffff;border-color:rgba(0,0,0,.22)}
.ty-color-circle[class*="gri"]{background:#9ca3af}
.ty-color-circle[class*="mavi"]{background:#3b82f6}
.ty-color-circle[class*="yesil"]{background:#22c55e}
.ty-color-circle[class*="kirmizi"]{background:#ef4444}
.ty-color-circle[class*="sari"]{background:#eab308}
.ty-color-circle[class*="kahve"]{background:#6f4e37}
.ty-color-circle[class*="taba"]{background:#a0522d}
.ty-color-circle[class*="bej"]{background:#e8d5b7}
.ty-color-circle[class*="pembe"]{background:#ec4899}
.ty-color-circle[class*="mor"]{background:#a855f7}
.ty-color-circle[class*="lacivert"]{background:#1e3a8a}
.ty-color-circle[class*="turuncu"]{background:#f97316}
.ty-color-circle[class*="bordo"]{background:#7f1d1d}
.ty-color-circle[class*="metalik"]{background:linear-gradient(135deg,#e5e7eb,#9ca3af,#e5e7eb)}
.ty-color-circle[class*="diger"]{background:repeating-linear-gradient(45deg,#e2e8f0 0 4px,#cbd5e1 4px 8px)}


/* ==========================================================================
   FIYAT MODULU - ZARIF SURUM  (v10 ince ayar)
   Onceki hali: mavi gradyan dolgu pill, 16.5px kalin beyaz yazi -> cok kaba.
   Yeni hali: dolgusuz, guclu ama olculu tipografi.
   ========================================================================== */

/* Dolgulu pill'i tamamen sadelestir */
.ty-neon-price-pill{
  background:none !important;
  box-shadow:none !important;
  border:none !important;
  padding:0 !important;
  border-radius:0 !important;
  display:inline-flex !important;
  align-items:baseline !important;
  transform:none !important;
}
.ty-product-card:hover .ty-neon-price-pill{
  transform:none !important;
  box-shadow:none !important;
}
.ty-neon-price-pill .ty-main-price{
  color:var(--dm-dark) !important;
  font-size:16px !important;
  font-weight:800 !important;
  letter-spacing:-.02em !important;
}

/* Fiyat satiri: guncel fiyat solda, ustu cizili SAGDA */
.ty-card-price-row,
.ty-card-price-box > div:last-child{
  display:flex;
  align-items:baseline;
  gap:7px;
  flex-wrap:wrap;
  margin-top:auto;
}

/* Guncel fiyat */
.ty-main-price{
  font-size:16px;
  font-weight:800;
  color:var(--dm-dark);
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  line-height:1.25;
}

/* Ustu cizili eski fiyat - saginda, silik, kucuk */
.ty-old-price{
  font-size:12px;
  font-weight:600;
  color:#a0aab8;
  text-decoration:line-through;
  text-decoration-thickness:1px;
  text-decoration-color:#c7ced9;
  letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
  margin-left:0;
}

/* Indirim yuzdesi: kucuk yesil rozet, fiyatin yaninda */
.ty-price-deal-tag{
  display:inline-block;
  font-size:10.5px;
  font-weight:800;
  color:#0f766e;
  background:#ccfbf1;
  padding:2px 7px;
  border-radius:5px;
  margin-bottom:5px;
  letter-spacing:.01em;
}

.ty-card-price-box{
  margin-top:auto;
  padding-top:9px;
  border-top:1px solid #eef1f5;
}

/* Kart govdesinde daha rahat nefes */
.ty-card-body{padding:12px 13px 13px}
.ty-card-brand{
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--dm-blue);
  margin-bottom:4px;
}
.ty-card-title{margin-bottom:7px}
.ty-card-title a{
  font-size:13px;
  font-weight:600;
  line-height:1.4;
  color:var(--dm-text);
  text-decoration:none;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.ty-card-title a:hover{color:var(--dm-blue)}

/* Varyant satiri sadelestirildi */
.ty-card-options-pill-row{
  display:flex;align-items:center;gap:6px;
  font-size:11px;margin-bottom:7px;flex-wrap:wrap;
}
.ty-opt-label-prefix{color:var(--dm-light-text);font-weight:600}
.ty-opt-pill-value{
  background:#f1f5f9;border:1px solid #e2e8f0;
  color:var(--dm-text);font-weight:700;
  padding:2px 8px;border-radius:5px;
}
.ty-card-dotted-divider{
  border-top:1px dashed #e8edf3;
  margin:7px 0;
}

/* Rozetler biraz daha kucuk ve olculu */
.ty-badges-stack .ty-badge{
  font-size:9.5px;
  padding:3px 8px;
  letter-spacing:.02em;
  box-shadow:0 1px 3px rgba(0,0,0,.08);
}

/* ==========================================================================
   MARQUEE (KAYAN YAZI) - HIZ DUZELTMESI
   Iki ayri tanim catisiyordu (85s ve 35s); sonuncusu kazandigi icin
   yazi cok hizli akiyordu. Tek ve yavas degerde sabitlendi.
   ========================================================================== */
.ty-marquee-track,
.ty-marquee-content,
[class*="marquee"] [class*="track"],
[class*="marquee"] [class*="content"]{
  animation-duration:90s !important;
  animation-timing-function:linear !important;
}

/* Gradyan kaymasi da yumusatildi */
.ty-marquee-banner-wrap,
[class*="marquee"][class*="wrap"]{
  animation-duration:26s !important;
}

/* Uzerine gelince dursun - okumak isteyen okusun */
.ty-marquee-banner-wrap:hover .ty-marquee-track,
.ty-marquee-banner-wrap:hover .ty-marquee-content,
[class*="marquee"]:hover [class*="track"],
[class*="marquee"]:hover [class*="content"]{
  animation-play-state:paused !important;
}

@media (prefers-reduced-motion:reduce){
  .ty-marquee-track,.ty-marquee-content,
  [class*="marquee"] [class*="track"],
  [class*="marquee"] [class*="content"]{
    animation:none !important;
  }
}

@media (max-width:600px){
  .ty-main-price,.ty-neon-price-pill .ty-main-price{font-size:14.5px !important}
  .ty-old-price{font-size:11px}
  .ty-card-title a{font-size:12.5px}
}


/* Ticker hizi artik ayardan gelir */
.ty-marquee-track{ animation-duration: var(--ty-marquee-speed, 90s) !important; }


/* ==========================================================================
   HAREKET MOTORU  (dropmes-motion.js ile calisir)
   Premium tema hareket dili: scroll reveal, kademeli giris, paralaks,
   3D hover, ripple. prefers-reduced-motion'da tamamen devre disi.
   ========================================================================== */

:root{
  --ty-ease: cubic-bezier(.16,1,.3,1);
  --ty-ease-soft: cubic-bezier(.22,.61,.36,1);
}

/* --- Sayfa girisi --- */
html.motion-on body{
  opacity:0;
  transition:opacity .5s var(--ty-ease-soft);
}
html.motion-on body.page-ready{opacity:1}
html.motion-off body{opacity:1}

/* --- 1. SCROLL REVEAL --- */
html.motion-on .will-reveal{
  opacity:0;
  transform:translateY(34px);
  transition:opacity .72s var(--ty-ease), transform .72s var(--ty-ease);
  will-change:opacity, transform;
}
html.motion-on .will-reveal.is-revealed{
  opacity:1;
  transform:translateY(0);
  will-change:auto;
}

/* Yandan giren varyant */
html.motion-on [data-reveal="left"].will-reveal{transform:translateX(-42px)}
html.motion-on [data-reveal="right"].will-reveal{transform:translateX(42px)}
html.motion-on [data-reveal="left"].is-revealed,
html.motion-on [data-reveal="right"].is-revealed{transform:translateX(0)}

/* Olcekle giren varyant */
html.motion-on [data-reveal="scale"].will-reveal{
  transform:scale(.94);
  opacity:0;
}
html.motion-on [data-reveal="scale"].is-revealed{transform:scale(1);opacity:1}

/* --- 2. KADEMELI KART GIRISI --- */
html.motion-on .will-stagger{
  opacity:0;
  transform:translateY(28px) scale(.985);
  transition:opacity .6s var(--ty-ease), transform .6s var(--ty-ease);
  will-change:opacity, transform;
}
html.motion-on .will-stagger.is-staggered{
  opacity:1;
  transform:translateY(0) scale(1);
  will-change:auto;
}

/* --- 3. SAYI SAYACI --- */
[data-count-to]{
  font-variant-numeric:tabular-nums;
  display:inline-block;
  min-width:1ch;
}

/* --- 4. PARALAKS --- */
[data-parallax]{
  will-change:transform;
  transition:none;
}

/* --- 5. 3D HOVER --- */
html.motion-on .ty-promo-banner-card,
html.motion-on .m-cat-card,
html.motion-on [data-tilt]{
  transform-style:preserve-3d;
  transition:transform .38s var(--ty-ease), box-shadow .38s var(--ty-ease);
}
/* JS transform'u yonettigi icin hover'da CSS transform ezilmesin */
html.motion-on .ty-promo-banner-card:hover,
html.motion-on .m-cat-card:hover{
  box-shadow:0 22px 44px -14px rgba(15,23,42,.42);
}

/* Urun karti: derinlikli hover */
html.motion-on .ty-product-card{
  transition:transform .34s var(--ty-ease),
             box-shadow .34s var(--ty-ease),
             border-color .34s var(--ty-ease);
}
html.motion-on .ty-product-card:hover{
  transform:translateY(-7px);
  box-shadow:0 20px 42px -16px rgba(15,23,42,.28);
}
html.motion-on .ty-card-img{
  transition:transform .68s var(--ty-ease);
}
html.motion-on .ty-product-card:hover .ty-card-img{
  transform:scale(1.09);
}

/* --- 6. BUTON DALGASI --- */
.ty-ripple{
  position:absolute;
  border-radius:50%;
  background:rgba(255,255,255,.55);
  transform:scale(0);
  animation:tyRipple .6s var(--ty-ease-soft);
  pointer-events:none;
  z-index:2;
}
@keyframes tyRipple{
  to{transform:scale(2.4);opacity:0}
}
/* Acik zeminli butonlarda koyu dalga */
.ty-banner-btn .ty-ripple,
.ty-size-pill-btn .ty-ripple,
.ty-swatch-btn .ty-ripple{
  background:rgba(15,23,42,.16);
}

/* --- 7. EK MIKRO HAREKETLER --- */

/* Baslik alt cizgisi soldan acilir */
html.motion-on .ty-sec-title{position:relative}
html.motion-on .ty-sec-title::after{
  content:"";
  position:absolute;left:0;bottom:-7px;
  width:0;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--dm-blue),#6366f1);
  transition:width .8s var(--ty-ease) .18s;
}
html.motion-on .is-revealed .ty-sec-title::after,
html.motion-on .ty-sec-title.is-revealed::after{width:56px}

/* Rozetler sirayla belirir */
html.motion-on .ty-badges-stack > span{
  animation:tyBadgeIn .46s var(--ty-ease) backwards;
}
html.motion-on .ty-badges-stack > span:nth-child(1){animation-delay:.05s}
html.motion-on .ty-badges-stack > span:nth-child(2){animation-delay:.13s}
html.motion-on .ty-badges-stack > span:nth-child(3){animation-delay:.21s}
html.motion-on .ty-badges-stack > span:nth-child(4){animation-delay:.29s}
@keyframes tyBadgeIn{
  from{opacity:0;transform:translateX(-12px) scale(.9)}
  to{opacity:1;transform:none}
}

/* Stories: hafif yuzme */
html.motion-on .ty-story-item:hover .ty-story-avatar-wrap{
  animation:tyFloat 2.4s ease-in-out infinite;
}
@keyframes tyFloat{
  0%,100%{transform:translateY(-4px) scale(1.06)}
  50%{transform:translateY(-8px) scale(1.06)}
}

/* Fiyat: hover'da hafif buyume */
html.motion-on .ty-product-card:hover .ty-main-price{
  transform:scale(1.04);
  transition:transform .3s var(--ty-ease);
  display:inline-block;
}

/* Favori kalbi: basinca zipla */
.ty-fav-btn.is-fav svg{
  animation:tyHeartPop .42s var(--ty-ease);
}
@keyframes tyHeartPop{
  0%{transform:scale(1)}
  40%{transform:scale(1.34)}
  70%{transform:scale(.92)}
  100%{transform:scale(1)}
}

/* Sepet rozeti guncellenince nabiz */
.ty-badge-count.is-bump{animation:tyBump .44s var(--ty-ease)}
@keyframes tyBump{
  0%{transform:scale(1)}
  45%{transform:scale(1.32)}
  100%{transform:scale(1)}
}

/* Menu ogeleri: alt cizgi zaten var, hover'da yukari kayma eklendi */
html.motion-on .ty-nav-item{
  transition:color .24s var(--ty-ease), transform .24s var(--ty-ease);
}
html.motion-on .ty-nav-item:hover{transform:translateY(-1px)}

/* Mega menu yumusak acilis */
html.motion-on .ty-mega-menu-panel{
  transform-origin:top center;
  transition:opacity .3s var(--ty-ease), transform .3s var(--ty-ease), visibility .3s;
}
html.motion-on .ty-mega-menu-trigger:not(:hover) .ty-mega-menu-panel{
  transform:translateY(-8px) scaleY(.98);
}

/* Sepet cekmecesi: yumusak kayma */
html.motion-on .ty-cart-drawer{
  transition:transform .42s var(--ty-ease);
}
html.motion-on .ty-cart-drawer-overlay{
  transition:opacity .34s var(--ty-ease-soft);
}

/* Gorsel yuklenirken parlama (skeleton shimmer) */
.ty-card-img-wrap{position:relative;overflow:hidden}
html.motion-on .ty-card-img-wrap::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.42) 50%,transparent 70%);
  transform:translateX(-100%);
  pointer-events:none;
}
html.motion-on .ty-product-card:hover .ty-card-img-wrap::after{
  animation:tyShine .9s var(--ty-ease-soft);
}
@keyframes tyShine{
  to{transform:translateX(100%)}
}

/* --- HAREKET KAPALIYSA HEPSINI SIFIRLA --- */
html.motion-off *{
  animation:none !important;
  transition:none !important;
}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important}
}
html.motion-off .will-reveal,
html.motion-off .will-stagger{
  opacity:1 !important;
  transform:none !important;
}

@media (max-width:768px){
  /* Mobilde daha kisa mesafe, daha hizli */
  html.motion-on .will-reveal{transform:translateY(20px);transition-duration:.55s}
  html.motion-on .will-stagger{transform:translateY(16px);transition-duration:.45s}
  /* Mobilde paralaks ve 3D kapali */
  [data-parallax]{transform:none !important}
}


/* Paralaks gorselleri: kayma sirasinda bosluk olusmasin diye buyutuldu */
html.motion-on .ty-banner-bg-img[data-parallax],
html.motion-on .ty-slide-bg[data-parallax]{
  height:118% !important;
  top:-9% !important;
  position:absolute;
  object-fit:cover;
  width:100%;
  left:0;
}
.ty-promo-banner-card,.ty-hero-slide,[class*="banner"][class*="card"]{overflow:hidden}

/* Sepet rozeti bump icin JS kancasi */
.ty-badge-count{transition:transform .2s var(--ty-ease)}

/* ════════════════════════════════════════════════════════════════════════
   THEMEFOREST ELITE ULTRA LÜKS ÜRÜN KARTI & NEON FİYAT KAPSÜLÜ
   ════════════════════════════════════════════════════════════════════════ */
.ty-product-card {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 18px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.ty-product-card:hover {
  border-color: #00f0ff !important;
  transform: translateY(-8px) !important;
  box-shadow: 0 15px 35px rgba(0, 240, 255, 0.22) !important;
}

/* Rozetler Stack */
.ty-badges-stack {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  z-index: 10 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.ty-badge-indirim {
  background: linear-gradient(135deg, #ef4444 0%, #ec4899 100%) !important;
  color: #ffffff !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.35) !important;
  letter-spacing: 0.3px !important;
}
.ty-badge-secenek {
  background: linear-gradient(135deg, #a855f7 0%, #6366f1 100%) !important;
  color: #ffffff !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
}
.ty-badge-kargo-bedava {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
}

/* Favori Butonu */
.ty-fav-btn {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  z-index: 10 !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid #e2e8f0 !important;
  color: #64748b !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}
.ty-fav-btn:hover {
  background: #f43f5e !important;
  color: #ffffff !important;
  border-color: #f43f5e !important;
  transform: scale(1.1) !important;
}

/* Görsel Alanı */
.ty-card-img-wrap {
  width: 100% !important;
  height: 200px !important;
  background: #f8fafc !important;
  overflow: hidden !important;
  display: block !important;
  position: relative !important;
}
.ty-card-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.45s ease !important;
}
.ty-product-card:hover .ty-card-img {
  transform: scale(1.08) !important;
}

/* Gövde */
.ty-card-body {
  padding: 14px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  flex: 1 !important;
  justify-content: space-between !important;
}

/* Marka Rozeti */
.ty-card-brand-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.ty-card-brand {
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.12), rgba(0, 240, 255, 0.18)) !important;
  border: 1px solid rgba(2, 132, 199, 0.3) !important;
  color: #0284c7 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 3px 9px !important;
  border-radius: 6px !important;
  letter-spacing: 0.6px !important;
  display: inline-block !important;
}
.ty-card-stock-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #10b981 !important;
  box-shadow: 0 0 8px #10b981 !important;
}

/* Başlık */
.ty-card-title {
  margin: 2px 0 !important;
}
.ty-card-title a {
  font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: 38px !important;
  transition: color 0.2s !important;
}
.ty-card-title a:hover {
  color: #0284c7 !important;
}

/* Boyut / Ebat Çipi */
.ty-card-options-pill-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 11px !important;
  color: #64748b !important;
  font-weight: 600 !important;
}
.ty-opt-pill-value {
  background: linear-gradient(135deg, #f1f5f9, #e2e8f0) !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #1e293b !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
}

/* Ayırıcı */
.ty-card-glow-divider {
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(0, 240, 255, 0.4), transparent) !important;
  margin: 4px 0 !important;
}

/* 🔒 CANLI NEON SAFİR/CYAN MAVİ PARLAK SATIŞ FİYATI KAPSÜLÜ */
.ty-card-price-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: 4px !important;
}
.ty-price-stack {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}
.ty-neon-price-pill {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 45%, #00f0ff 100%) !important;
  border: 1.5px solid #00f0ff !important;
  color: #ffffff !important;
  padding: 6px 14px !important;
  border-radius: 12px !important;
  font-size: 14.5px !important;
  font-weight: 900 !important;
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.45) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  letter-spacing: -0.3px !important;
}
.ty-neon-tag-icon {
  font-size: 12px !important;
  color: #fef08a !important;
}
.ty-main-price {
  color: #ffffff !important;
  font-weight: 900 !important;
}
.ty-old-price {
  font-size: 11.5px !important;
  color: #94a3b8 !important;
  text-decoration: line-through !important;
  font-weight: 700 !important;
}

/* Hızlı Sepete Ekle Butonu */
.ty-btn-quick-add {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, #0284c7, #00f0ff) !important;
  border: none !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.4) !important;
  transition: all 0.25s !important;
}
.ty-btn-quick-add:hover {
  transform: scale(1.15) !important;
  box-shadow: 0 0 25px rgba(0, 240, 255, 0.8) !important;
}

/* ════════════════════════════════════════════════════════════════════════
   TRENDYOL BİREBİR YUVARLAK KATEGORİ BALONCUKLARI & SCROLL OKU
   ════════════════════════════════════════════════════════════════════════ */
.ty-stories-wrapper {
  padding: 16px 0 10px !important;
  background: transparent !important;
  position: relative !important;
}
.ty-stories-carousel-container {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
}
.ty-stories-track {
  display: flex !important;
  gap: 22px !important;
  overflow-x: auto !important;
  padding: 6px 4px 12px !important;
  scrollbar-width: none !important;
  width: 100% !important;
  scroll-behavior: smooth !important;
}
.ty-stories-track::-webkit-scrollbar { display: none !important; }

.ty-story-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  text-align: center !important;
  width: 80px !important;
  transition: transform 0.2s ease !important;
}
.ty-story-item:hover {
  transform: translateY(-4px) !important;
}
.ty-story-avatar-wrap {
  width: 72px !important;
  height: 72px !important;
  border-radius: 50% !important;
  padding: 2.5px !important;
  background: #ffffff !important;
  border: 2.5px solid var(--ring-color, #f27a1a) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  transition: all 0.25s ease !important;
}
.ty-story-item:hover .ty-story-avatar-wrap {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16) !important;
  transform: scale(1.05) !important;
}
.ty-story-img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
}
.ty-story-label {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  line-height: 1.25 !important;
  text-align: center !important;
  max-width: 78px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.ty-story-item:hover .ty-story-label {
  color: #0284c7 !important;
}

.btn-stories-scroll-next {
  position: absolute !important;
  right: -10px !important;
  top: 32px !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.15) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  color: #0f172a !important;
  font-size: 14px !important;
  z-index: 10 !important;
  transition: all 0.2s !important;
}
.btn-stories-scroll-next:hover {
  background: #0284c7 !important;
  color: #ffffff !important;
  border-color: #0284c7 !important;
  transform: scale(1.1) !important;
}
  color: #0284c7 !important;
}
.ty-story-mini-badge {
  font-size: 9.5px !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  padding: 2px 8px !important;
  border-radius: 12px !important;
  letter-spacing: 0.4px !important;
}
.bg-cyan { background: linear-gradient(135deg, #0284c7, #00f0ff) !important; }
.bg-pink { background: linear-gradient(135deg, #ec4899, #f43f5e) !important; }
.bg-emerald { background: linear-gradient(135deg, #10b981, #059669) !important; }
.bg-purple { background: linear-gradient(135deg, #a855f7, #6366f1) !important; }
.bg-amber { background: linear-gradient(135deg, #f59e0b, #ea580c) !important; }
.bg-red { background: linear-gradient(135deg, #ef4444, #dc2626) !important; }


/* ==========================================================================
   GLOBAL MAGAZA GECIS MODULU
   ========================================================================== */
.ty-gateway{
  position:relative;
  margin:30px 0;
  border-radius:18px;
  overflow:hidden;
  background:linear-gradient(120deg,#0b1220 0%,#132a4a 45%,#0e3a5c 100%);
  box-shadow:0 20px 46px -18px rgba(11,18,32,.55);
}
/* Isik huzmesi */
.ty-gateway::before{
  content:"";position:absolute;z-index:0;
  top:-70%;right:-8%;width:58%;height:240%;
  background:radial-gradient(ellipse at center,rgba(56,189,248,.24) 0%,transparent 66%);
  transform:rotate(16deg);
  pointer-events:none;
}
/* Ince grid dokusu */
.ty-gateway::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent);
}

.ty-gateway-inner{
  position:relative;z-index:1;
  display:grid;
  grid-template-columns:190px 1fr;
  gap:30px;
  align-items:center;
  padding:34px 38px;
}

/* --- Sol gorsel --- */
.ty-gateway-visual{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  height:150px;
}
.ty-gateway-globe{
  font-size:74px;line-height:1;
  filter:drop-shadow(0 10px 26px rgba(56,189,248,.42));
  animation:tyGatewayFloat 5.5s ease-in-out infinite;
  position:relative;z-index:2;
}
@keyframes tyGatewayFloat{
  0%,100%{transform:translateY(0) rotate(-3deg)}
  50%{transform:translateY(-13px) rotate(3deg)}
}
.ty-gateway-orbit{
  position:absolute;
  width:132px;height:132px;
  border:1.5px dashed rgba(56,189,248,.34);
  border-radius:50%;
  animation:tyGatewaySpin 22s linear infinite;
}
.ty-gateway-orbit::before{
  content:"";position:absolute;
  top:-5px;left:50%;margin-left:-5px;
  width:10px;height:10px;border-radius:50%;
  background:#38bdf8;
  box-shadow:0 0 14px rgba(56,189,248,.95);
}
@keyframes tyGatewaySpin{to{transform:rotate(360deg)}}

/* --- Sag icerik --- */
.ty-gateway-body{min-width:0}
.ty-gateway-eyebrow{
  display:inline-block;
  font-size:10.5px;font-weight:800;
  letter-spacing:.14em;
  color:#7dd3fc;
  background:rgba(56,189,248,.13);
  border:1px solid rgba(56,189,248,.28);
  padding:5px 13px;border-radius:20px;
  margin-bottom:12px;
}
.ty-gateway-title{
  font-size:25px;font-weight:900;
  color:#fff;margin:0 0 9px;
  letter-spacing:-.025em;line-height:1.2;
}
.ty-gateway-text{
  font-size:14px;line-height:1.6;
  color:rgba(226,232,240,.82);
  margin:0 0 16px;max-width:58ch;
}

.ty-gateway-perks{
  display:flex;flex-wrap:wrap;gap:9px;
  list-style:none;padding:0;margin:0 0 20px;
}
.ty-gateway-perks li{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12px;font-weight:600;
  color:rgba(226,232,240,.92);
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.11);
  padding:7px 13px;border-radius:9px;
  margin:0;
}
.ty-gateway-perks li span{
  font-size:13px;font-weight:800;color:#38bdf8;
}

.ty-gateway-form{margin:0}
.ty-gateway-btn{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;gap:10px;
  background:linear-gradient(135deg,#0ea5e9,#4f46e5);
  color:#fff;border:none;
  padding:14px 28px;border-radius:11px;
  font-size:14.5px;font-weight:800;font-family:inherit;
  cursor:pointer;
  box-shadow:0 10px 26px -8px rgba(79,70,229,.62);
  transition:transform .26s var(--ty-ease,cubic-bezier(.16,1,.3,1)),
             box-shadow .26s var(--ty-ease,cubic-bezier(.16,1,.3,1));
}
.ty-gateway-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 34px -8px rgba(79,70,229,.78);
}
.ty-gateway-btn svg{transition:transform .26s var(--ty-ease,cubic-bezier(.16,1,.3,1))}
.ty-gateway-btn:hover svg{transform:translateX(4px)}

.ty-gateway-note{
  font-size:11.5px;
  color:rgba(148,163,184,.9);
  margin:11px 0 0;
  max-width:56ch;
}

@media (max-width:860px){
  .ty-gateway-inner{grid-template-columns:1fr;gap:18px;padding:26px 22px;text-align:center}
  .ty-gateway-visual{height:112px}
  .ty-gateway-globe{font-size:58px}
  .ty-gateway-orbit{width:104px;height:104px}
  .ty-gateway-perks{justify-content:center}
  .ty-gateway-text,.ty-gateway-note{margin-left:auto;margin-right:auto}
  .ty-gateway-title{font-size:21px}
}
@media (prefers-reduced-motion:reduce){
  .ty-gateway-globe,.ty-gateway-orbit{animation:none}
}

/* ════════════════════════════════════════════════════════════════════════
   TRENDYOL BİREBİR KATEGORİ MODÜLÜ & ZENGİN ÜRÜN KARTI SİSTEMİ
   ════════════════════════════════════════════════════════════════════════ */
.ty-category-module-box {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 20px !important;
  padding: 20px 24px !important;
  margin-bottom: 28px !important;
  position: relative !important;
}
.ty-module-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 16px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid rgba(0,0,0,0.06) !important;
}
.ty-module-title-left {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.module-accent-bar {
  width: 5px !important;
  height: 22px !important;
  border-radius: 4px !important;
  background: linear-gradient(180deg, #0284c7, #00f0ff) !important;
}
.ty-module-title {
  font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  letter-spacing: -0.3px !important;
}
.ty-module-view-all {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #0284c7 !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all 0.2s !important;
}
.ty-module-view-all:hover {
  color: #0369a1 !important;
  transform: translateX(4px) !important;
}

/* Carousel Rayı & Ok Butonları */
.ty-module-carousel-wrapper {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
}
.ty-module-track {
  display: flex !important;
  gap: 16px !important;
  overflow-x: auto !important;
  scroll-behavior: smooth !important;
  padding: 8px 4px 14px !important;
  width: 100% !important;
  scrollbar-width: none !important;
}
.ty-module-track::-webkit-scrollbar { display: none !important; }
.ty-carousel-slide {
  flex-shrink: 0 !important;
  width: 230px !important;
}
.carousel-nav-btn {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 25 !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.15) !important;
  color: #0f172a !important;
  font-size: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}
.carousel-nav-btn.prev { left: -16px !important; }
.carousel-nav-btn.next { right: -16px !important; }
.carousel-nav-btn:hover {
  background: #0284c7 !important;
  color: #ffffff !important;
  border-color: #0284c7 !important;
  transform: translateY(-50%) scale(1.1) !important;
}

/* ════════════════════════════════════════════════════════════════════════
   ZENGİN ÜRÜN KARTI (TRENDYOL 1-E-1 YAPISI)
   ════════════════════════════════════════════════════════════════════════ */
.ty-rich-product-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  height: 100% !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04) !important;
  transition: all 0.3s ease !important;
}
.ty-rich-product-card:hover {
  transform: translateY(-6px) !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 12px 28px rgba(2, 132, 199, 0.15) !important;
}

.ty-card-top-badges {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  right: 8px !important;
  z-index: 10 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.badge-en-cok-satan {
  background: linear-gradient(135deg, #f59e0b, #ea580c) !important;
  color: #ffffff !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  padding: 3px 7px !important;
  border-radius: 5px !important;
  letter-spacing: 0.3px !important;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.4) !important;
}
.badge-flas-urun {
  background: linear-gradient(135deg, #a855f7, #ec4899) !important;
  color: #ffffff !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  padding: 3px 7px !important;
  border-radius: 5px !important;
}
.btn-card-wishlist {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.9) !important;
  border: 1px solid #e2e8f0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}
.btn-card-wishlist:hover {
  background: #f43f5e !important;
  border-color: #f43f5e !important;
}
.btn-card-wishlist:hover svg path {
  stroke: #ffffff !important;
}

.ty-rich-img-wrapper {
  width: 100% !important;
  height: 180px !important;
  position: relative !important;
  background: #f8fafc !important;
  display: block !important;
  overflow: hidden !important;
}
.ty-rich-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.4s ease !important;
}
.ty-rich-product-card:hover .ty-rich-img {
  transform: scale(1.06) !important;
}
.ty-strip-kargo-bedava {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background: rgba(15, 23, 42, 0.82) !important;
  color: #ffffff !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  text-align: center !important;
  padding: 3px 0 !important;
  backdrop-filter: blur(4px) !important;
}

.ty-rich-body {
  padding: 10px 12px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  flex: 1 !important;
  justify-content: space-between !important;
}
.ty-rich-title-line {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
.ty-rich-brand {
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #0284c7 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
}
.ty-rich-prod-name a {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  text-decoration: none !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: 32px !important;
  line-height: 1.35 !important;
}

.ty-social-proof-line {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: #ea580c !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.ty-rating-row {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 10.5px !important;
  color: #64748b !important;
}
.rating-num { font-weight: 800 !important; color: #0f172a !important; }
.stars-gold { color: #f59e0b !important; font-size: 11px !important; letter-spacing: -1px !important; }
.rating-count { font-size: 9.5px !important; color: #94a3b8 !important; }
.camera-icon { font-size: 10px !important; }

.fast-delivery-badge {
  background: rgba(16, 185, 129, 0.1) !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
  color: #059669 !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  display: inline-block !important;
}

/* 🔒 SEPETTE ÖZEL FİYAT KAPSÜLÜ */
.ty-rich-price-section {
  margin-top: 4px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
.sepette-label {
  font-size: 9.5px !important;
  font-weight: 800 !important;
  color: #db2777 !important;
}
.sepette-fiyat-pill {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 40%, #00f0ff 100%) !important;
  border: 1px solid #00f0ff !important;
  color: #ffffff !important;
  padding: 4px 10px !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.35) !important;
}
.fiyat-prefix { font-size: 10px !important; font-weight: 700 !important; opacity: 0.9 !important; }
.fiyat-rakam { font-size: 13.5px !important; font-weight: 900 !important; }

.eski-fiyat-rakam {
  font-size: 10.5px !important;
  color: #94a3b8 !important;
  text-decoration: line-through !important;
  font-weight: 700 !important;
}

.btn-rich-add-cart {
  width: 100% !important;
  padding: 6px 0 !important;
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  color: #0f172a !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  margin-top: 4px !important;
  transition: all 0.2s !important;
}
.btn-rich-add-cart:hover {
  background: #0284c7 !important;
  color: #ffffff !important;
  border-color: #0284c7 !important;
}

/* ════════════════════════════════════════════════════════════════════════
   1. STICKY ADD TO CART BAR (MOBİLDE VE MASAÜSTÜNDE YAPIŞAN SATIN ALMA BARI)
   ════════════════════════════════════════════════════════════════════════ */
.ty-sticky-atc-bar {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 280 !important;
  background: rgba(15, 23, 42, 0.96) !important;
  backdrop-filter: blur(16px) !important;
  border-top: 1.5px solid #00f0ff !important;
  box-shadow: 0 -10px 30px rgba(0,0,0,0.5) !important;
  padding: 10px 0 !important;
  transform: translateY(100%) !important;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.ty-sticky-atc-bar.is-visible {
  transform: translateY(0) !important;
}
.ty-sticky-atc-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
}
.ty-sticky-prod-info {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
.ty-sticky-thumb {
  width: 50px !important;
  height: 50px !important;
  border-radius: 8px !important;
  object-fit: cover !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
}
.ty-sticky-brand {
  font-size: 10px !important;
  font-weight: 800 !important;
  color: #00f0ff !important;
  text-transform: uppercase !important;
}
.ty-sticky-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #f8fafc !important;
  max-width: 320px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.ty-sticky-variant-controls {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
.ty-sticky-variant-select {
  background: rgba(30, 41, 59, 0.9) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  color: #ffffff !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  outline: none !important;
}
.ty-sticky-price-capsule {
  background: linear-gradient(135deg, #0284c7, #00f0ff) !important;
  color: #050811 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  padding: 6px 14px !important;
  border-radius: 8px !important;
}
.btn-sticky-buy-now {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  color: #ffffff !important;
  border: none !important;
  padding: 10px 24px !important;
  border-radius: 10px !important;
  font-size: 13.5px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  box-shadow: 0 0 15px rgba(16, 185, 129, 0.4) !important;
  transition: all 0.2s !important;
}
.btn-sticky-buy-now:hover {
  transform: scale(1.05) !important;
  box-shadow: 0 0 25px rgba(16, 185, 129, 0.8) !important;
}

/* ════════════════════════════════════════════════════════════════════════
   2. ÜCRETSİZ KARGO İLERLEME ÇUBUĞU & SEPET ÇEKMECESİ UPSELL
   ════════════════════════════════════════════════════════════════════════ */
.ty-free-shipping-bar-box {
  background: #f1f5f9 !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  margin: 12px 16px !important;
  border: 1px solid #e2e8f0 !important;
}
.fs-text {
  font-size: 11.5px !important;
  color: #334155 !important;
  margin-bottom: 6px !important;
}
.fs-text.is-success {
  color: #059669 !important;
  font-weight: 800 !important;
}
.fs-progress-track {
  width: 100% !important;
  height: 8px !important;
  background: #e2e8f0 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}
.fs-progress-fill {
  height: 100% !important;
  background: linear-gradient(90deg, #0284c7, #00f0ff) !important;
  border-radius: 10px !important;
  transition: width 0.4s ease !important;
}
.fs-progress-fill.is-complete {
  background: linear-gradient(90deg, #10b981, #34d399) !important;
}

.ty-cart-upsell-module {
  background: rgba(2, 132, 199, 0.05) !important;
  border: 1px dashed #38bdf8 !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  margin: 12px 16px !important;
}
.upsell-heading {
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #0284c7 !important;
  margin-bottom: 6px !important;
}
.upsell-card {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}
.upsell-thumb {
  width: 42px !important;
  height: 42px !important;
  border-radius: 8px !important;
  object-fit: cover !important;
}
.upsell-details { flex: 1 !important; }
.upsell-name { font-size: 11.5px !important; font-weight: 700 !important; color: #0f172a !important; }
.upsell-price { font-size: 11px !important; font-weight: 800 !important; color: #059669 !important; }
.upsell-old { text-decoration: line-through !important; color: #94a3b8 !important; font-size: 10px !important; }
.btn-upsell-quick-add {
  background: #0284c7 !important;
  color: #ffffff !important;
  border: none !important;
  padding: 5px 12px !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}
.btn-upsell-quick-add:hover {
  background: #0369a1 !important;
}

/* ════════════════════════════════════════════════════════════════════════
   3. SHOPPABLE VIDEO REELS & LOOKBOOK
   ════════════════════════════════════════════════════════════════════════ */
.ty-shoppable-reels-section {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 20px !important;
  padding: 24px !important;
  margin-bottom: 28px !important;
}
.reels-header-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 16px !important;
}
.reels-title-left {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.reels-badge {
  background: #ec4899 !important;
  color: #ffffff !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
}
.reels-main-title {
  font-family: 'Outfit', sans-serif !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
}
.ty-reels-scroll-track {
  display: flex !important;
  gap: 16px !important;
  overflow-x: auto !important;
  padding-bottom: 10px !important;
}
.ty-reel-card {
  width: 220px !important;
  height: 340px !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  position: relative !important;
  flex-shrink: 0 !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
  cursor: pointer !important;
}
.reel-video-box { width: 100% !important; height: 100% !important; position: relative !important; }
.reel-poster-img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.reel-play-overlay {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: rgba(0,0,0,0.5) !important;
  border: 1.5px solid #ffffff !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
}
.reel-view-counter {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  background: rgba(0,0,0,0.6) !important;
  color: #ffffff !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  padding: 3px 8px !important;
  border-radius: 12px !important;
}
.reel-product-floating-tag {
  position: absolute !important;
  bottom: 12px !important;
  left: 12px !important;
  right: 12px !important;
  background: rgba(255, 255, 255, 0.95) !important;
  border-radius: 10px !important;
  padding: 8px 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
}
.reel-tag-name {
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 130px !important;
}
.reel-tag-price { font-size: 10.5px !important; font-weight: 900 !important; color: #0284c7 !important; }
.btn-reel-quick-add {
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  background: #0284c7 !important;
  color: #ffffff !important;
  border: none !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}

/* Shoppable Lookbook */
.ty-lookbook-section {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 20px !important;
  padding: 24px !important;
  margin-bottom: 28px !important;
}
.lookbook-title {
  font-family: 'Outfit', sans-serif !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
}
.lookbook-subtitle { font-size: 12.5px !important; color: #64748b !important; margin-bottom: 14px !important; }
.lookbook-main-card {
  width: 100% !important;
  height: 380px !important;
  border-radius: 16px !important;
  position: relative !important;
  overflow: hidden !important;
}
.lookbook-bg-img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.lookbook-hotspot {
  position: absolute !important;
  transform: translate(-50%, -50%) !important;
  z-index: 20 !important;
}
.hotspot-pulse-btn {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: #00f0ff !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 0 15px #00f0ff !important;
  cursor: pointer !important;
  animation: pulseHotspot 2s infinite !important;
}
@keyframes pulseHotspot {
  0% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(0, 240, 255, 0.7); }
  70% { transform: scale(1.2); box-shadow: 0 0 0 12px rgba(0, 240, 255, 0); }
  100% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(0, 240, 255, 0); }
}
.hotspot-product-popup {
  position: absolute !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 12px !important;
  padding: 10px !important;
  width: 210px !important;
  display: none !important;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2) !important;
  z-index: 30 !important;
}
.lookbook-hotspot.is-active .hotspot-product-popup {
  display: flex !important;
  gap: 10px !important;
}
.popup-thumb { width: 48px !important; height: 48px !important; border-radius: 6px !important; object-fit: cover !important; }
.popup-title { font-size: 11px !important; font-weight: 800 !important; color: #0f172a !important; }
.popup-price { font-size: 11px !important; font-weight: 900 !important; color: #0284c7 !important; }
.popup-link { font-size: 10px !important; font-weight: 800 !important; color: #059669 !important; text-decoration: none !important; }

/* ════════════════════════════════════════════════════════════════════════
   EN ÜST MEGA DROPSHIPPING KAMPANYA BANNERI (TRENDYOL 1-E-1)
   ════════════════════════════════════════════════════════════════════════ */
.ty-top-mega-announcement-banner {
  width: 100% !important;
  background: #0f172a !important;
  position: relative !important;
  overflow: hidden !important;
  border-bottom: 1.5px solid #00f0ff !important;
}
.top-banner-link-wrap {
  display: block !important;
  text-decoration: none !important;
}
.top-banner-img-container {
  width: 100% !important;
  height: 52px !important;
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
}
.top-banner-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  opacity: 0.85 !important;
  transition: transform 0.4s ease !important;
}
.ty-top-mega-announcement-banner:hover .top-banner-img {
  transform: scale(1.02) !important;
  opacity: 0.95 !important;
}
.top-banner-overlay-content {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 32px !important;
  background: linear-gradient(90deg, rgba(15, 23, 42, 0.75) 0%, rgba(2, 132, 199, 0.5) 50%, rgba(15, 23, 42, 0.75) 100%) !important;
}
.top-banner-text-left {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}
.top-banner-badge {
  background: linear-gradient(135deg, #f59e0b, #ea580c) !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  letter-spacing: 0.4px !important;
  box-shadow: 0 2px 10px rgba(245, 158, 11, 0.5) !important;
}
.top-banner-title-text {
  font-size: 13.5px !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6) !important;
}
.top-banner-title-text b {
  color: #00f0ff !important;
}
.top-banner-cta-btn {
  background: linear-gradient(135deg, #00f0ff, #0284c7) !important;
  color: #050811 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  padding: 7px 18px !important;
  border-radius: 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.4) !important;
  transition: all 0.2s !important;
}
.top-banner-cta-btn:hover {
  transform: scale(1.08) !important;
  box-shadow: 0 0 25px rgba(0, 240, 255, 0.8) !important;
}

@media (max-width: 768px) {
  .top-banner-title-text { font-size: 11px !important; max-width: 220px !important; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .top-banner-cta-btn { display: none !important; }
}


/* ==========================================================================
   HERO SLIDER - YENIDEN YAPILANDIRILMIS SURUM
   ========================================================================== */
.ty-hero-slider-section{margin:16px auto 26px}
.ty-slider-container{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 16px 38px -16px rgba(15,23,42,.34);
  outline:none;
}
.ty-slider-track{
  display:flex;
  transition:transform .72s cubic-bezier(.16,1,.3,1);
  will-change:transform;
}
.ty-slide-item{flex:0 0 100%;min-width:0;position:relative}
.ty-slide-link{
  display:block;position:relative;
  text-decoration:none;color:#fff;
  aspect-ratio:16/6;
  min-height:260px;
}
.ty-slide-img-box{position:absolute;inset:0;overflow:hidden}
.ty-slide-bg{
  width:100%;height:100%;
  object-fit:cover;display:block;
}
.ty-slide-placeholder{
  background:linear-gradient(135deg,#1e293b,#0f172a);
}
.ty-slide-overlay{position:absolute;inset:0}
.slide-gradient-blue{background:linear-gradient(90deg,rgba(2,25,60,.9) 0%,rgba(2,25,60,.55) 45%,transparent 78%)}
.slide-gradient-purple{background:linear-gradient(90deg,rgba(46,16,72,.9) 0%,rgba(46,16,72,.55) 45%,transparent 78%)}
.slide-gradient-green{background:linear-gradient(90deg,rgba(4,47,38,.9) 0%,rgba(4,47,38,.55) 45%,transparent 78%)}
.slide-gradient-dark{background:linear-gradient(90deg,rgba(9,13,22,.92) 0%,rgba(9,13,22,.6) 45%,transparent 78%)}
.slide-gradient-pink{background:linear-gradient(90deg,rgba(80,12,48,.9) 0%,rgba(80,12,48,.55) 45%,transparent 78%)}

.ty-slide-content{
  position:absolute;
  left:0;top:50%;transform:translateY(-50%);
  padding:0 clamp(22px,5vw,58px);
  max-width:min(620px,72%);
  z-index:2;
}
.ty-slide-badge{
  display:inline-block;
  font-size:11px;font-weight:900;letter-spacing:.06em;
  padding:6px 14px;border-radius:20px;
  margin-bottom:13px;
  box-shadow:0 4px 12px rgba(0,0,0,.24);
}
.bg-orange{background:linear-gradient(135deg,#fb923c,#ea580c);color:#fff}
.bg-purple{background:linear-gradient(135deg,#a78bfa,#7c3aed);color:#fff}
.bg-green{background:linear-gradient(135deg,#34d399,#059669);color:#fff}
.bg-pink{background:linear-gradient(135deg,#f472b6,#db2777);color:#fff}
.bg-blue{background:linear-gradient(135deg,#38bdf8,#0284c7);color:#fff}

.ty-slide-title{
  font-size:clamp(19px,2.7vw,33px);
  font-weight:900;line-height:1.16;
  letter-spacing:-.025em;
  margin:0 0 10px;
  text-shadow:0 2px 14px rgba(0,0,0,.4);
  text-wrap:balance;
}
.ty-slide-desc{
  font-size:clamp(12.5px,1.35vw,15px);
  line-height:1.55;
  color:rgba(255,255,255,.9);
  margin:0 0 16px;
  max-width:48ch;
  text-shadow:0 1px 8px rgba(0,0,0,.35);
}
.ty-slide-cta{
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(255,255,255,.96);color:#0f172a;
  font-size:13.5px;font-weight:900;
  padding:11px 22px;border-radius:9px;
  transition:transform .26s cubic-bezier(.16,1,.3,1),box-shadow .26s;
  box-shadow:0 5px 16px rgba(0,0,0,.22);
}
.ty-slide-link:hover .ty-slide-cta{
  transform:translateX(4px);
  box-shadow:0 8px 22px rgba(0,0,0,.3);
}
.ty-slide-link:hover .ty-slide-bg{transform:scale(1.03)}
.ty-slide-bg{transition:transform .9s cubic-bezier(.16,1,.3,1)}

/* Oklar */
.ty-slider-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  z-index:3;
  width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,.92);
  border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:#0f172a;
  box-shadow:0 4px 14px rgba(0,0,0,.2);
  opacity:0;
  transition:opacity .28s,transform .28s,background .2s;
}
.ty-slider-arrow.prev{left:16px}
.ty-slider-arrow.next{right:16px}
.ty-slider-container:hover .ty-slider-arrow{opacity:1}
.ty-slider-arrow:hover{background:#fff;transform:translateY(-50%) scale(1.08)}
.ty-slider-arrow:focus-visible{opacity:1;outline:2px solid #38bdf8;outline-offset:2px}

/* Noktalar */
.ty-slider-dots{
  position:absolute;bottom:16px;left:50%;transform:translateX(-50%);
  z-index:3;display:flex;gap:7px;
}
.ty-slider-dot{
  width:8px;height:8px;border-radius:50%;
  background:rgba(255,255,255,.45);
  border:none;cursor:pointer;padding:0;
  transition:width .3s cubic-bezier(.16,1,.3,1),background .3s;
}
.ty-slider-dot.is-active{
  width:26px;border-radius:5px;
  background:#fff;
}
.ty-slider-dot:focus-visible{outline:2px solid #38bdf8;outline-offset:2px}

@media (max-width:700px){
  .ty-slide-link{aspect-ratio:4/3;min-height:230px}
  .ty-slide-content{max-width:100%;padding:0 20px}
  .ty-slide-desc{display:none}
  .ty-slider-arrow{opacity:1;width:34px;height:34px}
  .ty-slider-arrow.prev{left:8px}
  .ty-slider-arrow.next{right:8px}
}
@media (prefers-reduced-motion:reduce){
  .ty-slider-track{transition:none}
  .ty-slide-bg{transition:none}
}


/* Kategori karti: gorsel yoksa emoji */
.ty-cat-emoji{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  font-size:46px;line-height:1;
  background:linear-gradient(135deg,#f1f5f9,#e2e8f0);
}
.ty-cat-card-count{
  font-size:11.5px;color:var(--dm-light-text);
  font-variant-numeric:tabular-nums;
}