/* public/css/vitrin-seviye.css — Bayi vitrin seviyesi efektleri (services/bayi/vitrinSeviye.js).
   Kart sınıfı: .vs-kart.vs--gumus | --altin | --platin | --elmas | --vip  · rozet: .vs-rozet.vs--...
   Haritada (.bh-kart) ve bayi dizini / marka sayfalarında (.bl-kart) kullanılır.
   Hareket azaltma tercihinde (prefers-reduced-motion) animasyonlar durur, renkler kalır. */

@property --vs-aci { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* ---------- ortak ---------- */
.vs-kart { position: relative; isolation: isolate; border: 2px solid transparent !important; }
.vs-kart::after {                       /* parlak şerit (shimmer) */
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
    background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / .55) 50%, transparent 65%);
    background-size: 250% 100%; background-position: 130% 0; mix-blend-mode: soft-light;
    animation: vs-parilti 4.5s ease-in-out infinite;
}
@keyframes vs-parilti { 0%, 55% { background-position: 130% 0; } 100% { background-position: -40% 0; } }
@keyframes vs-don { to { --vs-aci: 360deg; } }

.vs-rozet {
    display: inline-flex; align-items: center; gap: .3rem; font-size: .68rem; font-weight: 900; letter-spacing: .08em;
    padding: .28rem .55rem; border-radius: 6px; text-transform: uppercase; line-height: 1; white-space: nowrap;
}
.vs-rozet svg { width: 12px; height: 12px; flex: none; }

/* ---------- Gümüş ---------- */
.vs-kart.vs--gumus {
    background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #e5e7eb, #9ca3af, #f3f4f6, #9ca3af) border-box;
    box-shadow: 0 4px 16px rgb(100 116 139 / .18);
}
.vs-rozet.vs--gumus { background: linear-gradient(135deg, #f3f4f6, #cbd5e1); color: #334155; box-shadow: inset 0 0 0 1px #94a3b8; }

/* ---------- Altın ---------- */
.vs-kart.vs--altin {
    background: linear-gradient(#fffdf5, #fff) padding-box, linear-gradient(135deg, #fde68a, #d97706, #fef3c7, #b45309) border-box;
    animation: vs-altin-nabiz 3s ease-in-out infinite;
}
@keyframes vs-altin-nabiz { 0%, 100% { box-shadow: 0 4px 18px rgb(217 119 6 / .22); } 50% { box-shadow: 0 6px 30px rgb(245 158 11 / .45); } }
.vs-rozet.vs--altin { background: linear-gradient(135deg, #fde68a, #f59e0b); color: #78350f; box-shadow: 0 0 0 1px #d97706 inset, 0 2px 8px rgb(245 158 11 / .4); }

/* ---------- Platin ---------- */
.vs-kart.vs--platin {
    border-width: 2.5px !important;
    background: linear-gradient(#fbfdff, #fff) padding-box,
        conic-gradient(from var(--vs-aci), #e2e8f0, #93c5fd, #f8fafc, #a5b4fc, #e2e8f0) border-box;
    animation: vs-don 6s linear infinite;
    box-shadow: 0 6px 24px rgb(99 102 241 / .2);
}
.vs-rozet.vs--platin { background: linear-gradient(135deg, #f8fafc, #c7d2fe 60%, #e0e7ff); color: #312e81; box-shadow: 0 0 0 1px #818cf8 inset, 0 2px 10px rgb(129 140 248 / .35); }

/* ---------- Elmas ---------- */
.vs-kart.vs--elmas {
    border-width: 3px !important;
    background: linear-gradient(#f7feff, #fff) padding-box,
        conic-gradient(from var(--vs-aci), #22d3ee, #a78bfa, #f0abfc, #67e8f9, #c4b5fd, #22d3ee) border-box;
    animation: vs-don 4s linear infinite, vs-elmas-isik 2.6s ease-in-out infinite;
}
@keyframes vs-elmas-isik { 0%, 100% { box-shadow: 0 6px 24px rgb(34 211 238 / .3), 0 0 0 rgb(167 139 250 / 0); } 50% { box-shadow: 0 8px 34px rgb(34 211 238 / .45), 0 0 26px rgb(167 139 250 / .45); } }
.vs-kart.vs--elmas::before {            /* ışıltılar */
    content: ""; position: absolute; inset: -6px; pointer-events: none; z-index: 3; border-radius: inherit;
    background:
        radial-gradient(circle, #fff 0 1.5px, transparent 2.5px) 12% 8% / 14px 14px no-repeat,
        radial-gradient(circle, #e0f2fe 0 1.5px, transparent 2.5px) 88% 14% / 14px 14px no-repeat,
        radial-gradient(circle, #fff 0 2px, transparent 3px) 94% 78% / 16px 16px no-repeat,
        radial-gradient(circle, #f5d0fe 0 1.5px, transparent 2.5px) 6% 86% / 14px 14px no-repeat,
        radial-gradient(circle, #fff 0 1.5px, transparent 2.5px) 52% 2% / 14px 14px no-repeat;
    filter: drop-shadow(0 0 4px #a5f3fc);
    animation: vs-isilti 2.2s ease-in-out infinite;
}
@keyframes vs-isilti { 0%, 100% { opacity: .15; } 50% { opacity: .6; } }
.vs-rozet.vs--elmas { background: linear-gradient(135deg, #67e8f9, #a78bfa, #f0abfc); color: #1e1b4b; box-shadow: 0 2px 12px rgb(167 139 250 / .5); }

/* ---------- VIP (en üst seviye: altın-bordo, sade ve kurumsal) ---------- */
.vs-kart.vs--vip {
    border-width: 2.5px !important;
    background:
        linear-gradient(180deg, #fffbf3 0%, #fff 38%) padding-box,
        conic-gradient(from var(--vs-aci), #b45309, #f5d27a, #7f1d1d, #d4a017, #fde68a, #9a3412, #b45309) border-box;
    animation: vs-don 9s linear infinite, vs-vip-isik 3.2s ease-in-out infinite;
}
@keyframes vs-vip-isik {
    0%, 100% { box-shadow: 0 6px 22px rgb(180 83 9 / .18), 0 0 0 rgb(212 160 23 / 0); }
    50%      { box-shadow: 0 10px 32px rgb(180 83 9 / .28), 0 0 22px rgb(212 160 23 / .25); }
}
.vs-kart.vs--vip::before {              /* üst kenarda ince altın şerit */
    content: ""; position: absolute; left: 16px; right: 16px; top: 0; height: 3px; border-radius: 0 0 3px 3px; pointer-events: none; z-index: 2;
    background: linear-gradient(90deg, transparent, #d4a017 20%, #fde68a 50%, #d4a017 80%, transparent);
}
.vs-kart.vs--vip::after { animation-duration: 6s; }
.vs-rozet.vs--vip {
    background: linear-gradient(135deg, #1f1a14, #3b2a12); color: #f5d27a;
    box-shadow: inset 0 0 0 1px #b8860b, 0 2px 8px rgb(120 53 15 / .25);
    letter-spacing: .12em;
}

/* Seviyeli kartların başlığı biraz daha güçlü */
.vs-kart h3 { font-weight: 800; }

@media (prefers-reduced-motion: reduce) {
    .vs-kart, .vs-kart::before, .vs-kart::after, .vs-rozet { animation: none !important; }
}