/* ============================================================
   YILDIZ MOTOR - PREMIUM ETIKET KUTUPHANESI
   Birlesik_Etiket_Kutuphanesi.html icerigi programa entegre edildi.
   Tum siniflar "ek-" onekiyle namespace'lendi (Bootstrap .badge ile
   cakismamasi icin). Rozetler satir-ici (inline) kullanim icin
   position:relative + inline-flex olarak uyarlandi.
   ------------------------------------------------------------
   Kullanim:
     <span class="ek-badge ek-sh-sphere ek-c-orange"><span class="ek-t">METIN</span></span>
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&display=swap');

/* ---- Temel rozet ---- */
.ek-badge{
  /* Renk aileleri (palet) */
  --orange-l:#ffb46b; --orange-m:#ff6f00; --orange-d:#b34e00;
  --red-l:#ff6b6b;    --red-m:#e11900;    --red-d:#8e0d00;
  --dark-l:#4b5563;   --dark-m:#1f2530;   --dark-d:#080b10;
  --green-l:#5fd27a;  --green-m:#16a34a;  --green-d:#0c6b30;
  --gold-l:#ffe79a;   --gold-m:#f5b301;   --gold-d:#a9760f;
  --purple-l:#c084fc; --purple-m:#8b2fc9; --purple-d:#581c87;
  --blue-l:#60a5fa;   --blue-m:#2563eb;   --blue-d:#143f93;
  --teal-l:#5eead4;   --teal-m:#0d9488;   --teal-d:#0a5b54;
  --pink-l:#fb7bd0;   --pink-m:#db2777;   --pink-d:#9d174d;
  --rose-l:#f6cdbd;   --rose-m:#d98c6a;   --rose-d:#9c5a3c;
  --silver-l:#ffffff; --silver-m:#cdd2da; --silver-d:#878d97;
  --brand-m:#e23744;
  --brand-l:color-mix(in srgb,var(--brand-m) 60%,#fff);
  --brand-d:color-mix(in srgb,var(--brand-m) 72%,#000);

  --badge-font:'Oswald','Arial Narrow','Segoe UI',sans-serif;
  --badge-size:12px;

  position:relative;
  display:inline-flex; align-items:center; justify-content:center; text-align:center;
  vertical-align:middle;
  font-family:var(--badge-font); font-weight:700; font-size:var(--badge-size);
  line-height:1.05; letter-spacing:.04em; text-transform:uppercase;
  color:var(--txt,#fff); -webkit-user-select:none; user-select:none;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
  filter:drop-shadow(0 6px 10px rgba(15,23,42,.18));
}
.ek-badge .ek-t{display:inline-block}

/* Kucuk / buyuk olcek yardimcilari (kart yerlesimine gore) */
.ek-badge.ek-sm{transform:scale(.82); transform-origin:center}
.ek-badge.ek-xs{transform:scale(.68); transform-origin:center}

/* Renk aileleri -> degiskenleri besler (--bl/--bm/--bd) */
.ek-c-orange{--bl:var(--orange-l);--bm:var(--orange-m);--bd:var(--orange-d)}
.ek-c-red{--bl:var(--red-l);--bm:var(--red-m);--bd:var(--red-d)}
.ek-c-dark{--bl:var(--dark-l);--bm:var(--dark-m);--bd:var(--dark-d)}
.ek-c-green{--bl:var(--green-l);--bm:var(--green-m);--bd:var(--green-d)}
.ek-c-purple{--bl:var(--purple-l);--bm:var(--purple-m);--bd:var(--purple-d)}
.ek-c-blue{--bl:var(--blue-l);--bm:var(--blue-m);--bd:var(--blue-d)}
.ek-c-teal{--bl:var(--teal-l);--bm:var(--teal-m);--bd:var(--teal-d)}
.ek-c-pink{--bl:var(--pink-l);--bm:var(--pink-m);--bd:var(--pink-d)}
.ek-c-gold{--bl:var(--gold-l);--bm:var(--gold-m);--bd:var(--gold-d);--txt:#4a3500;text-shadow:0 1px 0 rgba(255,255,255,.55)}
.ek-c-rose{--bl:var(--rose-l);--bm:var(--rose-m);--bd:var(--rose-d);--txt:#3c2114;text-shadow:0 1px 0 rgba(255,255,255,.5)}
.ek-c-silver{--bl:var(--silver-l);--bm:var(--silver-m);--bd:var(--silver-d);--txt:#2a2f37;text-shadow:0 1px 0 rgba(255,255,255,.6)}
.ek-c-brand{--bl:var(--brand-l);--bm:var(--brand-m);--bd:var(--brand-d)}
/* UI Kit renk aileleri (--g: hazir cift renkli gradient) */
.ek-c-aqua{--bl:#38bdf8;--bm:#2563eb;--bd:#0e7490;--g:linear-gradient(135deg,#2563eb,#06b6d4)}
.ek-c-amber{--bl:#fcd34d;--bm:#f59e0b;--bd:#b45309;--g:linear-gradient(135deg,#fbbf24,#d97706)}
.ek-c-emerald{--bl:#4ade80;--bm:#22c55e;--bd:#15803d;--g:linear-gradient(135deg,#22c55e,#15803d)}
.ek-c-violet{--bl:#a78bfa;--bm:#8b5cf6;--bd:#6d28d9;--g:linear-gradient(135deg,#8b5cf6,#6d28d9)}
.ek-c-slate{--bl:#4b5563;--bm:#1f2937;--bd:#111827;--g:linear-gradient(135deg,#111827,#374151)}

/* ---- Kuresel 3B daire (sphere) ---- */
.ek-sh-sphere{width:66px;height:66px;border-radius:50%;
  background:radial-gradient(circle at 33% 28%,var(--bl),var(--bm) 58%,var(--bd));
  border:1px solid rgba(255,255,255,.35);
  box-shadow:inset 0 3px 7px rgba(255,255,255,.5),inset 0 -9px 16px rgba(0,0,0,.3),0 8px 16px rgba(0,0,0,.16)}
.ek-sh-sphere::after{content:'';position:absolute;top:9px;left:14px;width:18px;height:11px;border-radius:50%;
  background:rgba(255,255,255,.55);filter:blur(3px)}

/* ---- Yumusak squircle (puffy) ---- */
.ek-sh-squircle{width:62px;height:62px;border-radius:19px;
  background:linear-gradient(150deg,var(--bl),var(--bm) 55%,var(--bd));
  border:1px solid rgba(255,255,255,.2);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.55),inset 0 -6px 12px rgba(0,0,0,.28),0 10px 18px rgba(0,0,0,.15)}

/* ---- Pill / Serit ---- */
.ek-sh-pill{padding:8px 16px;border-radius:999px;
  background:linear-gradient(180deg,var(--bl),var(--bm));
  border:1px solid rgba(255,255,255,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 2px 0 var(--bd),0 8px 16px rgba(0,0,0,.16)}

/* ---- Cam / Glassmorphism ---- */
.ek-sh-glass{padding:9px 16px;border-radius:14px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--bm) 26%,transparent),color-mix(in srgb,var(--bm) 9%,transparent));
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 8px 22px rgba(0,0,0,.12);
  color:var(--bd);text-shadow:none;filter:none}

/* ---- Metalik folyo ---- */
.ek-sh-foil{padding:8px 16px;border-radius:11px;
  background:linear-gradient(125deg,var(--bd) 0%,var(--bl) 26%,var(--bm) 50%,var(--bl) 72%,var(--bd) 100%);
  border:1px solid rgba(255,255,255,.65);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 8px 18px rgba(0,0,0,.2)}

/* ---- Neon glow ---- */
.ek-sh-neon{padding:8px 16px;border-radius:999px;background:#0a0e16;
  border:1.5px solid var(--bm);color:var(--bl);text-shadow:0 0 7px var(--bm);filter:none;
  box-shadow:0 0 11px color-mix(in srgb,var(--bm) 65%,transparent),
             inset 0 0 9px color-mix(in srgb,var(--bm) 32%,transparent),
             0 6px 14px rgba(0,0,0,.28)}

/* ---- Minimal flat ---- */
.ek-sh-flat{padding:7px 13px;border-radius:8px;background:var(--bm);
  text-shadow:none;filter:none;box-shadow:0 3px 8px rgba(0,0,0,.12)}
.ek-sh-flat-line{padding:7px 13px 7px 14px;border-radius:8px;background:#fff;color:var(--bm);
  border-left:4px solid var(--bm);text-shadow:none;
  box-shadow:0 4px 12px rgba(0,0,0,.08),inset 0 0 0 1px rgba(0,0,0,.04);filter:none}

/* ---- Egimli plaka (skew) ---- */
.ek-sh-skew{padding:8px 17px;background:linear-gradient(135deg,var(--bm),var(--bd));
  transform:skewX(-11deg);border-left:3px solid rgba(255,255,255,.6);
  box-shadow:0 8px 16px rgba(0,0,0,.2)}
.ek-sh-skew .ek-t{transform:skewX(11deg)}

/* ---- Yildizli kure ---- */
.ek-sh-star{width:72px;height:72px;border-radius:50%;padding-top:13px;
  background:radial-gradient(circle at 33% 28%,var(--bl),var(--bm) 60%,var(--bd));
  border:3px solid var(--gold-m);
  box-shadow:inset 0 -8px 14px rgba(0,0,0,.3),0 8px 16px rgba(0,0,0,.18)}
.ek-sh-star::after{content:'\2605 \2605 \2605';position:absolute;top:9px;left:0;right:0;
  font-family:'Segoe UI',sans-serif;font-size:9px;color:var(--gold-m);text-align:center;letter-spacing:1px;
  text-shadow:0 1px 2px rgba(0,0,0,.5)}

/* ---- Cyber / Tech ---- */
.ek-sh-tech{padding:9px 16px;clip-path:polygon(0 0,86% 0,100% 42%,100% 100%,14% 100%,0 58%);
  background:linear-gradient(135deg,var(--bd),var(--bl));
  border-bottom:2px solid rgba(255,255,255,.7);box-shadow:0 8px 16px rgba(0,0,0,.22)}

/* ---- Patlama (burst) ---- */
.ek-sh-burst{width:74px;height:74px;
  clip-path:polygon(50% 0,63% 13%,81% 9%,81% 27%,95% 33%,89% 50%,95% 67%,81% 73%,81% 91%,63% 87%,50% 100%,37% 87%,19% 91%,19% 73%,5% 67%,11% 50%,5% 33%,19% 27%,19% 9%,37% 13%);
  background:radial-gradient(circle at 38% 32%,var(--bl),var(--bm) 60%,var(--bd))}

/* ---- Ok (arrow) ---- */
.ek-sh-arrow{padding:7px 19px 7px 13px;clip-path:polygon(0 0,86% 0,100% 50%,86% 100%,0 100%);
  background:linear-gradient(90deg,var(--bm),var(--bd));
  box-shadow:inset 0 2px 3px rgba(255,255,255,.35),0 6px 14px rgba(0,0,0,.18)}

/* ---- Kalkan (shield) ---- */
.ek-sh-shield{width:62px;height:70px;padding-bottom:9px;
  clip-path:polygon(0 0,100% 0,100% 46%,50% 100%,0 46%);
  background:linear-gradient(180deg,var(--bl),var(--bd));
  border-top:3px solid rgba(255,255,255,.55)}

/* ---- Hexagon ---- */
.ek-sh-hex{width:74px;height:66px;
  clip-path:polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0 50%);
  background:linear-gradient(150deg,var(--bl),var(--bm) 55%,var(--bd));
  box-shadow:0 8px 16px rgba(0,0,0,.18)}

/* ---- Banner / asili bayrak ---- */
.ek-sh-banner{padding:8px 12px 14px;min-width:58px;
  clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%);
  background:linear-gradient(180deg,var(--bl),var(--bd));
  box-shadow:0 8px 14px rgba(0,0,0,.2)}

/* ---- Satis etiketi (delikli) ---- */
.ek-sh-tag{padding:8px 14px 8px 22px;border-radius:6px;
  background:linear-gradient(135deg,var(--bl),var(--bm));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 8px 16px rgba(0,0,0,.18)}
.ek-sh-tag::before{content:'';position:absolute;left:8px;top:50%;transform:translateY(-50%);
  width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px var(--bd)}

/* ---- Kucuk bildirim noktasi ---- */
.ek-sh-dot{min-width:34px;height:34px;padding:0 9px;border-radius:999px;font-size:13px;font-weight:700;
  background:radial-gradient(circle at 35% 30%,var(--bl),var(--bm) 65%,var(--bd));
  border:2px solid #fff;box-shadow:0 6px 12px rgba(0,0,0,.22)}

/* ---- Isik suzulen pill ---- */
.ek-sh-shine{padding:8px 16px;border-radius:999px;overflow:hidden;
  background:linear-gradient(180deg,var(--bl),var(--bm));
  border:1px solid rgba(255,255,255,.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 8px 16px rgba(0,0,0,.18)}
.ek-sh-shine::before{content:'';position:absolute;top:0;left:0;width:34%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.8),transparent);
  animation:ek-sweep 2.6s ease-in-out infinite}

/* ---- Nabiz atan rozet ---- */
.ek-sh-pulse{padding:8px 16px;border-radius:10px;
  background:linear-gradient(135deg,var(--bm),var(--bd));
  box-shadow:0 8px 16px rgba(0,0,0,.2);animation:ek-pulse 1.3s ease-in-out infinite}

/* ---- Donen isik halkasi ---- */
.ek-sh-ring{width:64px;height:64px;border-radius:50%;background:#0c0f16;color:var(--bl);
  text-shadow:0 0 6px var(--bm);filter:none}
.ek-sh-ring::before{content:'';position:absolute;inset:-3px;border-radius:50%;z-index:0;
  background:conic-gradient(var(--bm),transparent 42%,var(--bm));animation:ek-spin 2.4s linear infinite}
.ek-sh-ring::after{content:'';position:absolute;inset:0;border-radius:50%;background:#0c0f16;z-index:0}
.ek-sh-ring .ek-t{position:relative;z-index:1}

/* ---- Holografik / iridescent ---- */
.ek-sh-holo{padding:9px 16px;border-radius:12px;color:#241b3a;text-shadow:0 1px 0 rgba(255,255,255,.4);filter:none;
  background:linear-gradient(120deg,#a18cd1,#fbc2eb,#8fd3f4,#a6c1ee,#fbc2eb,#a18cd1);
  background-size:300% 100%;animation:ek-holo 7s linear infinite;
  border:1px solid rgba(255,255,255,.7);box-shadow:0 8px 20px rgba(120,90,200,.25)}

/* ---- Madalya / coin ---- */
.ek-sh-coin{width:66px;height:66px;border-radius:50%;padding-top:24px;
  background:radial-gradient(circle at 35% 30%,var(--bl),var(--bm) 55%,var(--bd));
  border:3px solid color-mix(in srgb,var(--bl) 70%,#fff);
  box-shadow:inset 0 0 0 4px color-mix(in srgb,var(--bd) 45%,transparent),inset 0 -8px 14px rgba(0,0,0,.3),0 8px 16px rgba(0,0,0,.2)}
.ek-sh-coin::after{content:'\2605';position:absolute;top:8px;left:0;right:0;text-align:center;font-size:12px;
  color:color-mix(in srgb,var(--bd) 55%,#fff);text-shadow:0 1px 1px rgba(0,0,0,.4)}

/* ---- Aciliyet - saat ---- */
.ek-sh-timer{padding:8px 14px 8px 27px;border-radius:8px;
  background:linear-gradient(135deg,var(--bm),var(--bd));box-shadow:0 8px 16px rgba(0,0,0,.2)}
.ek-sh-timer::before{content:'\23F1';position:absolute;left:9px;top:50%;transform:translateY(-52%);
  font-family:'Segoe UI',sans-serif;font-size:15px;font-weight:400}

/* ---- Stok cubugu ---- */
.ek-sh-stock{padding:7px 13px 12px;border-radius:8px;background:var(--bm);text-shadow:none;
  box-shadow:0 6px 14px rgba(0,0,0,.18)}
.ek-sh-stock::after{content:'';position:absolute;left:8px;right:8px;bottom:5px;height:3px;border-radius:2px;background:rgba(255,255,255,.32)}
.ek-sh-stock::before{content:'';position:absolute;left:8px;bottom:5px;width:34%;height:3px;border-radius:2px;background:#fff}

/* ---- Modern flat gradient pill (UI Kit imzasi) ---- */
.ek-sh-kit{padding:9px 16px;border-radius:999px;color:var(--txt,#fff);text-shadow:0 1px 2px rgba(0,0,0,.25);
  background:var(--g,linear-gradient(135deg,var(--bl),var(--bm)));
  border:1px solid rgba(255,255,255,.18);box-shadow:0 8px 20px rgba(0,0,0,.2)}

/* ---- Kontur / outline etiket ---- */
.ek-sh-outline{padding:8px 15px;border-radius:999px;background:#fff;color:var(--bm);
  border:2px solid var(--bm);text-shadow:none;filter:none;box-shadow:0 6px 14px rgba(0,0,0,.1)}

/* ---- Dikkat cekici animasyonlar ---- */
.ek-sh-blink{padding:8px 16px;border-radius:8px;background:linear-gradient(135deg,var(--bm),var(--bd));
  box-shadow:0 8px 16px rgba(0,0,0,.2);animation:ek-blink .85s ease-in-out infinite}
.ek-sh-grow{padding:9px 17px;border-radius:999px;background:linear-gradient(135deg,var(--bl),var(--bm));
  box-shadow:0 8px 18px rgba(0,0,0,.2);animation:ek-grow 1.1s ease-in-out infinite}
.ek-sh-heartbeat{width:60px;height:60px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,var(--bl),var(--bm) 60%,var(--bd));
  box-shadow:0 8px 16px rgba(0,0,0,.18);animation:ek-heartbeat 1.5s ease-in-out infinite}
.ek-sh-radiate{padding:9px 16px;border-radius:999px;filter:none;
  background:linear-gradient(135deg,var(--bm),var(--bd));animation:ek-radiate 1.6s ease-out infinite}
.ek-sh-cflash{padding:8px 16px;border-radius:8px;background:var(--bm);
  box-shadow:0 8px 16px rgba(0,0,0,.2);animation:ek-cflash .8s steps(1,end) infinite}
.ek-sh-wiggle{padding:8px 15px;border-radius:8px;transform-origin:center;
  background:linear-gradient(135deg,var(--bm),var(--bd));
  box-shadow:0 8px 16px rgba(0,0,0,.2);animation:ek-wiggle .5s ease-in-out infinite}

/* ---- Kose kurdelesi (ribbon) - kart kosesine oturur ---- */
.ek-ribbon{position:absolute;top:0;left:0;width:92px;height:92px;overflow:hidden;z-index:3;pointer-events:none}
.ek-ribbon .ek-t{position:absolute;top:16px;left:-26px;width:140px;transform:rotate(-45deg);text-align:center;
  padding:5px 0;font-family:var(--badge-font,'Oswald');font-weight:700;font-size:11px;color:var(--txt,#fff);
  text-transform:uppercase;letter-spacing:.04em;text-shadow:0 1px 2px rgba(0,0,0,.45);
  background:linear-gradient(180deg,var(--bl),var(--bd));box-shadow:0 6px 12px rgba(0,0,0,.3)}

/* ---- Tarih rozeti (etikete ilistirilen tarih) ---- */
.ek-badge-date{
  display:inline-flex;align-items:center;gap:4px;
  font-family:'Segoe UI',system-ui,sans-serif;font-weight:600;font-size:11px;letter-spacing:0;
  text-transform:none;color:#334155;background:#f1f5f9;border:1px solid #e2e8f0;
  border-radius:999px;padding:2px 9px;vertical-align:middle;text-shadow:none;
}
.ek-badge-date::before{content:'\1F4C5';font-size:11px}

/* ---- Animasyonlar ---- */
@keyframes ek-sweep{0%{transform:translateX(-130%) skewX(-20deg)}55%,100%{transform:translateX(360%) skewX(-20deg)}}
@keyframes ek-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes ek-spin{to{transform:rotate(1turn)}}
@keyframes ek-holo{0%{background-position:0% 50%}100%{background-position:300% 50%}}
@keyframes ek-blink{0%,100%{opacity:1}50%{opacity:.16}}
@keyframes ek-grow{0%,100%{transform:scale(1)}50%{transform:scale(1.16)}}
@keyframes ek-heartbeat{0%,100%{transform:scale(1)}14%{transform:scale(1.2)}28%{transform:scale(1)}42%{transform:scale(1.12)}56%{transform:scale(1)}}
@keyframes ek-radiate{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--bm) 75%,transparent)}70%{box-shadow:0 0 0 16px color-mix(in srgb,var(--bm) 0%,transparent)}100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--bm) 0%,transparent)}}
@keyframes ek-cflash{0%,100%{background:var(--bm)}50%{background:var(--bd)}}
@keyframes ek-wiggle{0%,100%{transform:rotate(-3.5deg)}50%{transform:rotate(3.5deg)}}

@media (prefers-reduced-motion:reduce){
  .ek-badge, .ek-badge::before, .ek-badge::after{animation:none!important}
}

/* ============================================================
   MOBIL UYUM — sabit boyutlu (geometrik) rozetler mobilde
   küçültülür. Padding tabanlı rozetler zaten metinle ölçeklenir.
   ============================================================ */
@media (max-width:575.98px){
  .ek-badge{--badge-size:11px}

  /* Küre */
  .ek-sh-sphere{width:52px;height:52px}
  .ek-sh-sphere::after{top:7px;left:11px;width:14px;height:9px}
  /* Yumuşak kare */
  .ek-sh-squircle{width:50px;height:50px;border-radius:15px}
  /* Yıldızlı küre */
  .ek-sh-star{width:56px;height:56px;padding-top:11px;border-width:2px}
  .ek-sh-star::after{top:7px;font-size:8px}
  /* Madalya */
  .ek-sh-coin{width:53px;height:53px;padding-top:19px}
  .ek-sh-coin::after{top:6px;font-size:10px}
  /* Patlama */
  .ek-sh-burst{width:58px;height:58px}
  /* Hexagon */
  .ek-sh-hex{width:60px;height:54px}
  /* Kalkan */
  .ek-sh-shield{width:50px;height:56px;padding-bottom:7px}
  /* Işık halkası */
  .ek-sh-ring{width:52px;height:52px}
  /* Kalp atışı */
  .ek-sh-heartbeat{width:50px;height:50px}
  /* Mini bildirim */
  .ek-sh-dot{min-width:30px;height:30px;font-size:12px}
  /* Banner */
  .ek-sh-banner{min-width:50px;padding:6px 10px 12px}
  /* Tarih rozeti biraz daha küçük */
  .ek-badge-date{font-size:10px;padding:2px 7px}
}

/* ============================================================
   ÜRÜN KARTI OVERLAY BAĞLAMI (.product-badges)
   Kartların küçük görselinde rozetler kompakt ve ortalı olmalı.
   product-badges.css içindeki 'display:inline-block' kuralı metni
   sola/üste kaydırdığı için burada inline-flex'e geri döndürülür.
   Bu blok tüm ekran boyutlarında geçerlidir (kart her zaman küçük).
   ============================================================ */
.product-badges .ek-badge{
  display:inline-flex!important;
  --badge-size:9px;
  letter-spacing:.02em;
  white-space:normal;
  filter:drop-shadow(0 3px 5px rgba(15,23,42,.18));
}
.product-badges .ek-badge .ek-t{white-space:normal}

/* Sabit boyutlu (geometrik) rozetler kart için küçültülür */
.product-badges .ek-sh-sphere{width:42px;height:42px}
.product-badges .ek-sh-sphere::after{top:5px;left:9px;width:12px;height:7px}
.product-badges .ek-sh-squircle{width:42px;height:42px;border-radius:13px}
.product-badges .ek-sh-star{width:46px;height:46px;padding-top:9px;border-width:2px}
.product-badges .ek-sh-star::after{top:5px;font-size:7px}
.product-badges .ek-sh-coin{width:44px;height:44px;padding-top:15px}
.product-badges .ek-sh-coin::after{top:5px;font-size:8px}
.product-badges .ek-sh-burst{width:48px;height:48px}
.product-badges .ek-sh-hex{width:50px;height:45px}
.product-badges .ek-sh-shield{width:42px;height:48px;padding-bottom:6px}
.product-badges .ek-sh-ring{width:44px;height:44px}
.product-badges .ek-sh-heartbeat{width:42px;height:42px}
.product-badges .ek-sh-dot{min-width:26px;height:26px;font-size:11px}
.product-badges .ek-sh-banner{min-width:42px;padding:5px 9px 10px}

/* Padding tabanlı rozetler kartta biraz daha sıkı dursun */
.product-badges .ek-sh-pill,
.product-badges .ek-sh-shine,
.product-badges .ek-sh-grow,
.product-badges .ek-sh-radiate,
.product-badges .ek-sh-outline,
.product-badges .ek-sh-kit{padding:5px 11px}
.product-badges .ek-sh-flat,
.product-badges .ek-sh-flat-line,
.product-badges .ek-sh-neon,
.product-badges .ek-sh-glass,
.product-badges .ek-sh-foil,
.product-badges .ek-sh-blink,
.product-badges .ek-sh-cflash,
.product-badges .ek-sh-wiggle,
.product-badges .ek-sh-pulse{padding:5px 10px}
.product-badges .ek-sh-skew{padding:5px 12px}
.product-badges .ek-sh-tag{padding:5px 10px 5px 18px}
.product-badges .ek-sh-arrow{padding:5px 15px 5px 10px}
.product-badges .ek-sh-tech{padding:6px 12px}
.product-badges .ek-sh-timer{padding:5px 10px 5px 22px}
.product-badges .ek-sh-stock{padding:5px 10px 10px}

/* Çok dar ekranlar (ör. 360px) için bir tık daha küçük */
@media (max-width:400px){
  .ek-badge{--badge-size:10px}
  .ek-sh-sphere{width:46px;height:46px}
  .ek-sh-squircle{width:44px;height:44px;border-radius:13px}
  .ek-sh-star{width:50px;height:50px;padding-top:9px}
  .ek-sh-coin{width:47px;height:47px;padding-top:16px}
  .ek-sh-burst{width:52px;height:52px}
  .ek-sh-hex{width:54px;height:48px}
  .ek-sh-shield{width:46px;height:52px}
  .ek-sh-ring{width:48px;height:48px}
  .ek-sh-heartbeat{width:46px;height:46px}
}