/* ==========================================================================
   DenemeBonusu — mobile-first landing stylesheet
   ========================================================================== */
:root{
  --primary:      #06b6d4;
  --primary-dark: #0891b2;
  --primary-light:#22d3ee;
  --accent:       #eab308;
  --accent-light: #fbbf24;
  --bg:           #0b1220;
  --bg-2:         #0f172a;
  --card:         #111827;
  --border:       rgba(255,255,255,.08);
  --text:         #f8fafc;
  --muted:        #94a3b8;
}

/* ---- reset & base ---- */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{
  -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior-y:none;
  scroll-behavior:smooth;
}
body{
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:14px;
  line-height:1.5;
  color:var(--text);
  background:var(--bg);
  min-height:100vh;
  min-height:100dvh;
  padding-bottom:env(safe-area-inset-bottom);
}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%;height:auto}
button{
  font:inherit;color:inherit;background:transparent;border:0;padding:0;cursor:pointer;
}
::-webkit-scrollbar{display:none}
.no-scrollbar{scrollbar-width:none;-ms-overflow-style:none}
.no-scrollbar::-webkit-scrollbar{display:none}

/* ---- layout ---- */
.app{
  position:relative;
  max-width:520px;
  margin:0 auto;
  min-height:100vh;
  min-height:100dvh;
  padding-bottom:170px;                     /* alt için yer */
  padding-bottom:calc(170px + env(safe-area-inset-bottom));
}
.bg-wash{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.bg-wash::before,.bg-wash::after{content:"";position:absolute;inset:0}
.bg-wash::before{
  background:
    radial-gradient(circle at 50% 0%, rgba(6,182,212,.18), transparent 55%),
    radial-gradient(circle at 20% 60%, rgba(6,182,212,.09), transparent 45%),
    radial-gradient(circle at 80% 20%, rgba(6,182,212,.10), transparent 40%),
    linear-gradient(180deg, var(--bg), var(--bg-2));
}
.bg-wash::after{
  background:radial-gradient(circle at 50% 50%, transparent 20%, rgba(11,18,32,.5) 130%);
}
.content{position:relative;z-index:1}

/* ---- top sticky CTA (alt bantla aynı görsel) ---- */
.top{
  position:sticky;top:0;z-index:40;
  padding:8px 12px 4px;
  background:linear-gradient(180deg, rgba(11,18,32,.92), rgba(11,18,32,.55) 70%, transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.top-inner{max-width:496px;margin:0 auto}

/* Üst ve alt CTA'lar aynı stil — tek noktadan bakım */
.top-cta, .bottom-cta{
  display:block;
  background:linear-gradient(90deg, var(--primary-dark), var(--primary), var(--primary-light));
  padding:8px 12px;
  border-radius:12px;
  box-shadow:0 8px 20px rgba(6,182,212,.30);
  position:relative;overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
}
.top-cta::after, .bottom-cta::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(110deg, transparent 25%, rgba(255,255,255,.20) 50%, transparent 75%);
  transform:translateX(-100%);animation:shimmer 3s linear infinite;
}
.top-cta .inner, .bottom-cta .inner{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.top-cta .lft, .bottom-cta .lft{display:flex;align-items:center;gap:8px;min-width:0}
.top-cta .lft img, .bottom-cta .lft img{
  width:22px;height:22px;object-fit:contain;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.35));
  flex-shrink:0;
}
.top-cta h3, .bottom-cta h3{
  margin:0;color:#fff;font-size:12px;font-weight:700;line-height:1.15;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.top-cta .btn, .bottom-cta .btn{
  flex-shrink:0;background:#fff;color:var(--primary-dark);
  font-size:10px;font-weight:700;
  padding:5px 10px;border-radius:6px;
  box-shadow:0 2px 6px rgba(0,0,0,.2);
}

/* ---- search + tabs ---- */
.filters{padding:8px 12px}
.filters-inner{
  display:flex;align-items:center;gap:8px;
  background:rgba(30,41,59,.7);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--border);
  border-radius:14px;padding:8px;
}
.search-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:10px;
  background:rgba(255,255,255,.06);border:1px solid var(--border);
  color:rgba(255,255,255,.55);font-size:11px;font-weight:500;
}
.search-btn svg{width:14px;height:14px;color:var(--primary-light)}
.divider-v{width:1px;height:22px;background:var(--border);flex-shrink:0}
.tabs{display:flex;gap:6px;overflow-x:auto;flex:1}
.tabs button{
  flex:0 0 auto;
  display:inline-flex;align-items:center;gap:4px;
  padding:6px 12px;border-radius:10px;
  font-size:11px;font-weight:600;white-space:nowrap;
  color:rgba(255,255,255,.55);
  transition:all .25s ease;
}
.tabs button.active{
  background:linear-gradient(90deg, var(--primary), var(--primary-dark));
  color:#fff;box-shadow:0 4px 12px rgba(6,182,212,.35);
}
.tabs button:hover:not(.active){background:rgba(255,255,255,.08);color:#fff}

/* ---- section headings ---- */
.section-head{display:flex;align-items:center;gap:8px;padding:6px 12px 4px}
.section-head .line{flex:1;height:1px;background:linear-gradient(90deg, transparent, rgba(234,179,8,.4))}
.section-head .line.right{background:linear-gradient(-90deg, transparent, rgba(234,179,8,.4))}
.section-head h2{
  margin:0;font-size:10px;font-weight:900;
  letter-spacing:.15em;text-transform:uppercase;
  color:rgba(250,204,21,.9);
}
.section-head.light .line{background:linear-gradient(90deg, transparent, rgba(255,255,255,.2))}
.section-head.light .line.right{background:linear-gradient(-90deg, transparent, rgba(255,255,255,.2))}
.section-head.light h2{color:rgba(255,255,255,.8)}

/* ---- hero banner strip (vertical stack of full-width bordered cards) ---- */
.hero-list{display:flex;flex-direction:column;gap:8px;padding:6px 12px}
.hero-card{
  position:relative;
  display:block;
  border-radius:16px;overflow:hidden;
  border:1px solid rgba(234,179,8,.7);
  height:100px;
  transition:transform .25s ease;
  box-shadow:0 4px 16px rgba(0,0,0,.35);
}
.hero-card:active{transform:scale(.98)}
.hero-card.border-yellow{border-color:rgba(234,179,8,.7)}
.hero-card.border-slate {border-color:rgba(203,213,225,.6)}
.hero-card.border-orange{border-color:rgba(251,146,60,.6)}
.hero-card.border-blue  {border-color:rgba(6,182,212,.55)}
.hero-card img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease;transform:scale(1.03)}
.hero-card:hover img{transform:scale(1.1)}

/* ---- operators list ---- */
.operators-wrap{
  margin:8px 12px 0;
  background:var(--card);
  border:1px solid rgba(255,255,255,.05);
  border-radius:14px;overflow:hidden;
  box-shadow:0 12px 24px rgba(0,0,0,.35);
}
.op{
  position:relative;
  display:flex;align-items:center;gap:6px;
  padding:6px 8px;
  border-top:1px solid rgba(255,255,255,.06);
  transition:background .2s ease;
}
.op:first-child{border-top:0}
.op:hover{background:linear-gradient(90deg, rgba(6,182,212,.10), transparent)}
.op::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg, var(--primary-light), var(--primary-dark));
  opacity:0;transition:opacity .2s;
}
.op:hover::before{opacity:1}
.op-logo{
  flex:0 0 120px;width:120px;height:40px;
  background:linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border-radius:6px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  padding:2px;
}
.op-logo img{max-width:100%;max-height:100%;object-fit:contain;transition:transform .2s}
.op:hover .op-logo img{transform:scale(1.05)}
.op-info{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 6px}
.op-amount{
  font-size:11px;font-weight:700;line-height:1.1;
  background:linear-gradient(90deg, #fff, #a5f3fc, #fff);
  background-clip:text;-webkit-background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.op-type{font-size:9px;color:var(--muted);margin-top:2px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.op-cta{
  position:relative;flex:0 0 auto;overflow:hidden;
  display:inline-flex;align-items:center;gap:4px;
  background:linear-gradient(90deg, var(--primary-dark), var(--primary));
  color:#fff;font-size:10px;font-weight:700;
  padding:0 12px;height:32px;border-radius:6px;
  box-shadow:0 4px 10px rgba(6,182,212,.30);
}
.op-cta::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(110deg, transparent 25%, rgba(255,255,255,.30) 50%, transparent 75%);
  transform:translateX(-100%);
}
.op:hover .op-cta::before{animation:shimmer 2s linear infinite}
.op-cta svg{width:10px;height:10px}

/* ---- bottom nav ---- */
.bottom{
  position:fixed;bottom:0;left:0;right:0;z-index:50;
  pointer-events:none;
  padding:0 12px 6px;
  padding-bottom:calc(6px + env(safe-area-inset-bottom));
}
.bottom-inner{
  pointer-events:auto;
  max-width:496px;margin:0 auto;
}
.bottom-cta{
  display:block;
  background:linear-gradient(90deg, var(--primary-dark), var(--primary), var(--primary-light));
  padding:8px 12px;border-radius:12px;
  box-shadow:0 8px 20px rgba(6,182,212,.30);
  position:relative;overflow:hidden;
  margin-bottom:8px;
  border:1px solid rgba(255,255,255,.10);
}
.bottom-cta::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(110deg, transparent 25%, rgba(255,255,255,.20) 50%, transparent 75%);
  transform:translateX(-100%);animation:shimmer 3s linear infinite;
}
.bottom-cta .inner{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:8px}
.bottom-cta .lft{display:flex;align-items:center;gap:8px;min-width:0}
.bottom-cta .lft img{width:22px;height:22px;object-fit:contain}
.bottom-cta h3{margin:0;color:#fff;font-size:12px;font-weight:700;line-height:1.15;text-shadow:0 1px 2px rgba(0,0,0,.35);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bottom-cta .btn{flex-shrink:0;background:#fff;color:var(--primary-dark);font-size:10px;font-weight:700;padding:5px 10px;border-radius:6px}
.nav{
  position:relative;
  background:linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.05), rgba(255,255,255,.10));
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border:1px solid rgba(255,255,255,.2);
  border-radius:24px;
  padding:4px;
  box-shadow:0 20px 40px rgba(0,0,0,.5);
}
.nav::before{
  content:"";position:absolute;inset:-3px;z-index:-1;
  background:linear-gradient(90deg, rgba(6,182,212,.2), rgba(234,179,8,.2), rgba(6,182,212,.2));
  border-radius:26px;filter:blur(16px);opacity:.6;
}
.nav-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:0;height:54px;align-items:center}
.nav-item{
  display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;
  border-radius:16px;color:rgba(255,255,255,.7);transition:all .3s;
}
.nav-item img{width:26px;height:26px;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(0,0,0,.35))}
.nav-item span{margin-top:2px;font-size:9px;font-weight:500;line-height:1}
.nav-item.active{background:rgba(255,255,255,.2);color:#fff;transform:scale(1.05)}
.nav-item:hover:not(.active){background:rgba(255,255,255,.1);color:#fff}

/* ---- top notification popups ---- */
.notif-stack{
  position:fixed;top:52px;left:50%;transform:translateX(-50%);z-index:60;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  width:100%;padding:0 12px;
  pointer-events:none;
}
.notif{
  --life:8000ms;
  pointer-events:auto;position:relative;
  background:rgba(0,0,0,.8);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border:1px solid rgba(255,255,255,.10);
  border-radius:9999px;overflow:hidden;
  box-shadow:0 12px 25px rgba(0,0,0,.5);
  animation:notifIn .5s ease-out both;
  width:auto;                                 /* İçeriğe göre daralır */
  max-width:calc(100vw - 24px);
}
.notif.out{animation:notifOut .5s ease-in forwards}
.notif-inner{
  display:flex;align-items:center;gap:10px;   /* gap-2.5 */
  padding:8px 12px;                           /* px-3 py-2 */
  color:#cbd5e1;
}
.notif-body{
  display:flex;align-items:center;gap:8px;    /* gap-2 */
  flex-wrap:nowrap;
  padding-right:20px;                         /* pr-5 → kapatma butonu için */
}
.notif-body .user{
  font-size:12px;font-weight:500;color:#cbd5e1;
  white-space:nowrap;                          /* Kesme yok — kullanıcı adı tam görünsün */
}
.notif-body .sep{font-size:12px;color:rgba(255,255,255,.3);flex-shrink:0}
.notif-body .amount{
  display:inline-flex;align-items:center;gap:4px;flex-shrink:0;
  font-size:14px;font-weight:700;color:#3b82f6;   /* text-sm bold blue-500 */
}
.notif-body .amount svg{width:12px;height:12px;color:#3b82f6}
.notif-body .won{
  display:inline-flex;align-items:center;gap:4px;flex-shrink:0;
  font-size:12px;font-weight:600;color:#fff;      /* text-xs semibold white */
}
.notif-body .won svg{width:12px;height:12px;color:#fff}
.notif-close{
  position:absolute;top:50%;right:8px;transform:translateY(-50%);
  width:18px;height:18px;border-radius:9999px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.1);color:rgba(255,255,255,.6);
  transition:background .15s, color .15s;z-index:2;
}
.notif-close:hover{background:rgba(255,255,255,.2);color:#fff}
.notif-close svg{width:10px;height:10px}
.notif-progress{position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(255,255,255,.05);overflow:hidden}
.notif-progress::after{
  content:"";display:block;height:100%;width:100%;
  background:linear-gradient(90deg, #36558f, rgba(54,85,143,.87), rgba(54,85,143,.67));
  animation:notifProgress var(--life) linear forwards;
  transform-origin:left center;
}
@keyframes notifIn      {from{opacity:0;transform:translateY(-150%)}to{opacity:1;transform:translateY(0)}}
@keyframes notifOut     {from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-150%)}}
@keyframes notifProgress{from{transform:scaleX(1)}to{transform:scaleX(0)}}

/* ---- intro modal ---- */
.modal{
  position:fixed;inset:0;z-index:200;
  background:rgba(0,0,0,.8);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  display:flex;align-items:center;justify-content:center;
  padding:16px;
  animation:fadeIn .4s ease both;
}
.modal.hidden{display:none}
.modal-wrap{
  position:relative;width:100%;
  max-width:min(320px, 95vw);
  animation:modalIn .3s ease-out both;
}
.modal-close{
  position:absolute;top:-8px;right:-8px;z-index:20;
  width:28px;height:28px;border-radius:9999px;
  background:rgba(239,68,68,.9);color:#fff;
  border:1px solid rgba(248,113,113,.3);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 14px rgba(0,0,0,.35);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  transition:background .2s;
}
.modal-close:hover{background:#ef4444}
.modal-close svg{width:14px;height:14px}
.modal-card{
  display:block;position:relative;
  background:linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.05), rgba(255,255,255,.10));
  backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);
  border:1px solid rgba(255,255,255,.2);
  border-radius:18px;overflow:hidden;
  box-shadow:0 25px 50px -12px rgba(0,0,0,.5);
  transition:border-color .3s;
}
.modal-card:hover{border-color:rgba(255,255,255,.4)}
.modal-inner{padding:6px}
.modal-img{
  width:100%;border-radius:12px;overflow:hidden;
  aspect-ratio:280/560;max-height:calc(100vh - 80px);
  background:rgba(0,0,0,.3);
}
.modal-img img{width:100%;height:100%;object-fit:contain;display:block}
.modal-card::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  border-radius:18px;
  background:linear-gradient(to top, rgba(0,0,0,.2), transparent);
  opacity:0;transition:opacity .3s;
}
.modal-card:hover::after{opacity:1}
.modal-tag{
  position:absolute;bottom:12px;left:12px;z-index:10;
  display:inline-flex;align-items:center;gap:4px;
  background:rgba(255,255,255,.10);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.2);
  color:#fff;font-size:10px;font-weight:500;
  padding:4px 8px;border-radius:9999px;
  box-shadow:0 4px 10px rgba(0,0,0,.35);
  animation:modalBounce 1s ease-in-out infinite;
}
.modal-tag svg{width:10px;height:10px;color:#fbbf24;flex-shrink:0}

/* ---- keyframes ---- */
@keyframes shimmer     {from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@keyframes fadeIn      {from{opacity:0}to{opacity:1}}
@keyframes slideDownIn {from{opacity:0;transform:translateY(-40px) translateX(-50%)}to{opacity:1;transform:translateY(0) translateX(-50%)}}
@keyframes slideUpOut  {from{opacity:1;transform:translateY(0) translateX(-50%)}to{opacity:0;transform:translateY(-40px) translateX(-50%)}}
@keyframes modalIn     {from{opacity:0;transform:translateY(-40px)}to{opacity:1;transform:translateY(0)}}
@keyframes modalBounce {0%,100%{transform:translateY(-25%);animation-timing-function:cubic-bezier(0.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,0.2,1)}}

/* ---- second popup (intro modal kapatıldıktan sonra çıkan dikey stack) ---- */
.modal2{
  position:fixed;inset:0;z-index:190;
  background:rgba(0,0,0,.75);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  display:flex;align-items:flex-start;justify-content:center;
  padding:36px 24px 40px;overflow-y:auto;overflow-x:hidden;
  animation:fadeIn .35s ease both;
  -webkit-overflow-scrolling:touch;
}
.modal2.hidden{display:none}
.modal2-wrap{
  width:100%;
  max-width:min(320px, calc(100vw - 48px));
  display:flex;flex-direction:column;gap:18px;
  animation:modalIn .3s ease-out both;
  padding-bottom:env(safe-area-inset-bottom);
}
.modal2-card{
  position:relative;display:block;
  background:linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.05), rgba(255,255,255,.10));
  backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);
  border:1px solid rgba(255,255,255,.2);
  border-radius:18px;overflow:visible;              /* X butonu dışarı taşabilsin */
  transition:border-color .3s, transform .3s, box-shadow .3s;
  animation:card2In .35s ease-out both;
}
.modal2-card:hover{border-color:rgba(255,255,255,.4);transform:scale(1.01);box-shadow:0 8px 32px rgba(0,0,0,.35)}
.modal2-card.dismiss{animation:card2Out .3s ease-in forwards}
.modal2-inner{
  padding:6px;
  border-radius:18px;overflow:hidden;               /* iç kısım rounded, dış overflow'a izin ver */
  position:relative;
}
.modal2-img{
  width:100%;border-radius:12px;overflow:hidden;
  background:rgba(0,0,0,.4);
  display:block;
}
.modal2-img img{
  width:100%;height:auto;                           /* aspect zorlama yok — görselin kendi oranı */
  display:block;object-fit:contain;
  max-height:200px;                                  /* çok uzun görseller için tavan */
}
.modal2-close{
  position:absolute;top:-10px;right:-10px;z-index:20;
  width:26px;height:26px;border-radius:9999px;
  background:rgba(239,68,68,.95);color:#fff;
  border:1.5px solid rgba(248,113,113,.5);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px rgba(0,0,0,.5);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  transition:background .2s, transform .15s;
  cursor:pointer;
}
.modal2-close:hover{background:#ef4444;transform:scale(1.08)}
.modal2-close svg{width:13px;height:13px}
.modal2-tag{
  position:absolute;bottom:10px;left:10px;z-index:10;
  display:inline-flex;align-items:center;gap:5px;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;font-size:10px;font-weight:600;
  padding:5px 10px;border-radius:9999px;
  box-shadow:0 4px 10px rgba(0,0,0,.5);
  pointer-events:none;                              /* karta tıklamayı engellemesin */
}
.modal2-tag svg{width:11px;height:11px;color:#fbbf24;flex-shrink:0}
@keyframes card2In  {from{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes card2Out {from{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-20px) scale(.9);max-height:0;margin:0;padding:0;border-width:0}}

/* Küçük telefonlar */
@media (max-width:380px){
  .modal2{padding:28px 18px 32px}
  .modal2-wrap{gap:14px;max-width:calc(100vw - 36px)}
  .modal2-close{width:24px;height:24px;top:-8px;right:-8px}
  .modal2-close svg{width:12px;height:12px}
}
/* Tablet ve üzeri: biraz daha geniş */
@media (min-width:520px){
  .modal2-wrap{max-width:360px}
}

/* ---- responsive tweaks ---- */
@media (max-width:360px){
  .op-logo{flex-basis:100px;width:100px}
  .op-cta{padding:0 10px}
  .promo-inner .promo-title,.bottom-cta h3{font-size:11px}
}
@media (min-width:480px){
  .app{padding-bottom:190px}
}

/* ---- winners page ---- */
.winners{padding:16px 14px}
.winners-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.winners-avatar{position:relative;width:40px;height:40px;flex-shrink:0}
.winners-avatar img{width:100%;height:100%;object-fit:contain;display:block}
.winners-pulse{
  position:absolute;right:-2px;bottom:-2px;
  width:12px;height:12px;border-radius:9999px;
  background:linear-gradient(135deg, #4ade80, #10b981);
  border:2px solid var(--bg);
  animation:winnersPulse 2s ease-in-out infinite;
}
@keyframes winnersPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.85)}}
.winners-title{margin:0;font-size:20px;font-weight:700;color:#fff;letter-spacing:-.02em}
.winners-sub{margin:2px 0 0;font-size:12px;color:var(--muted)}
.winners-list{display:flex;flex-direction:column;gap:8px}
.winner-row{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;border-radius:14px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:background .2s, border-color .2s, transform .2s;
}
.winner-row:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1);transform:translateY(-1px)}
.winner-row:active{transform:translateY(0)}
.winner-logo{
  flex:0 0 56px;width:56px;height:56px;
  border-radius:12px;overflow:hidden;
  background:linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center;
  padding:2px;
}
.winner-logo img{max-width:100%;max-height:100%;object-fit:contain}
.winner-body{flex:1;min-width:0}
.winner-top{display:flex;align-items:center;gap:8px}
.winner-label{color:#fff;font-size:14px;font-weight:500;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.winner-tag-new{
  display:inline-block;
  font-size:10px;font-weight:700;color:#4ade80;
  padding:1px 6px;border-radius:4px;
  background:rgba(74,222,128,.12);
  border:1px solid rgba(74,222,128,.3);
  letter-spacing:.03em;
}
.winner-meta{display:flex;align-items:center;gap:6px;margin-top:2px}
.winner-user, .winner-time{font-size:11px;color:rgba(255,255,255,.4)}
.winner-sep{color:rgba(255,255,255,.2);font-size:11px}
.winner-amount{
  flex-shrink:0;font-size:14px;font-weight:600;color:#fbbf24;
  font-variant-numeric:tabular-nums;
}
.winners-empty{
  padding:60px 20px;text-align:center;color:var(--muted);
  background:rgba(255,255,255,.02);border:1px dashed rgba(255,255,255,.08);
  border-radius:14px;
}

/* ---- wheel page ---- */
.wheel-page{padding:12px 14px 8px}
.wheel-head{display:flex;align-items:center;gap:12px;justify-content:center;margin:6px 0 14px}
.wheel-head-icon{width:40px;height:40px;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(0,0,0,.4))}
.wheel-title{margin:0;font-size:20px;font-weight:700;color:#fff;letter-spacing:-.02em}
.wheel-sub{margin:1px 0 0;font-size:12px;color:rgba(255,255,255,.5)}
.wheel-stage{display:flex;justify-content:center;padding:6px 0 18px}
.wheel{
  position:relative;
  width:min(324px, calc(100vw - 40px));
  aspect-ratio:1;
}

/* Dış çerçeve — border.png (dekoratif altın halka) */
.wheel-border{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;z-index:10;pointer-events:none;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.55));
}

/* Rotating disk wrapper — border.png içinden 12px içeri */
.wheel-disc-outer{
  position:absolute;inset:12px;
  border-radius:9999px;overflow:hidden;
  z-index:1;
}
.wheel-disc{
  width:100%;height:100%;position:relative;
  transition:transform 5s cubic-bezier(.15,.85,.25,1);
  will-change:transform;
}

/* Renkli conic-gradient katman (dilim renkleri) */
.wheel-slices{
  position:absolute;inset:0;
  border-radius:9999px;overflow:hidden;
  box-shadow:inset 0 0 40px rgba(0,0,0,.35);
}

/* Beyaz dilim ayıraç çizgileri (dinamik açılarda) */
.wheel-divider{
  position:absolute;inset:0;pointer-events:none;
  transform-origin:center;
}
.wheel-divider::before{
  content:"";position:absolute;left:50%;top:0;width:2px;height:50%;
  background:rgba(255,255,255,.8);transform:translateX(-50%);
  transform-origin:bottom;
}

/* Dilim etiketleri — dış çeperde, orijine göre okunur */
.wheel-label{
  position:absolute;inset:0;pointer-events:none;
  transform-origin:center;
}
.wheel-label > span{
  position:absolute;left:50%;top:12%;
  transform:translateX(-50%) rotate(-90deg);
  display:block;text-align:center;
  color:#fff;font-size:12px;font-weight:700;
  text-shadow:1px 1px 3px rgba(0,0,0,.9);
  width:70px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* Merkez altın disk — sadece görsel taban (yazı YOK, buton üstte durur) */
/* Merkez altın disk = tıklanabilir buton; .wheel-disc'in içinde olduğu için çarkla birlikte döner */
.wheel-center{
  position:absolute;inset:32%;
  display:flex;align-items:center;justify-content:center;
  border-radius:9999px;z-index:10;
  background:radial-gradient(circle at 30% 30%, #fde68a, #fbbf24 55%, #f59e0b 100%);
  color:#fff;font-weight:800;font-size:14px;letter-spacing:.08em;text-transform:uppercase;
  border:0;cursor:pointer;
  box-shadow:
    0 0 25px rgba(245,158,11,.5),
    inset 0 -3px 8px rgba(120,53,15,.4),
    inset 0 3px 6px rgba(255,255,255,.35);
  transition:box-shadow .25s, filter .25s;
  pointer-events:auto;
}
.wheel-center span{
  display:block;
  text-shadow:0 1px 2px rgba(0,0,0,.4), 0 0 6px rgba(120,53,15,.3);
  pointer-events:none;
}
.wheel-center:hover{
  box-shadow:
    0 0 38px rgba(245,158,11,.7),
    inset 0 -3px 8px rgba(120,53,15,.4),
    inset 0 3px 6px rgba(255,255,255,.4);
  filter:brightness(1.05);
}
.wheel-center[disabled]{cursor:not-allowed;filter:brightness(.85)}

/* Üstten sarkan ok — uc.png */
.wheel-pointer{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:32px;height:40px;object-fit:contain;
  z-index:20;pointer-events:none;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.5));
}

/* ---- son çevirimler card ---- */
.spins-card{
  position:relative;margin:6px 6px 12px;
  border-radius:24px;
  background:linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.05), rgba(255,255,255,.10));
  backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);
  border:1px solid rgba(255,255,255,.20);
  box-shadow:0 25px 50px -12px rgba(0,0,0,.4);
  padding:4px;overflow:hidden;
}
.spins-glow{
  position:absolute;inset:-4px;z-index:0;pointer-events:none;
  background:linear-gradient(90deg, rgba(16,185,129,.2), rgba(34,197,94,.2), rgba(16,185,129,.2));
  border-radius:24px;filter:blur(24px);opacity:.6;
}
.spins-inner{position:relative;z-index:1;padding:16px}
.spins-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.spins-title-wrap{display:flex;align-items:center;gap:8px}
.spins-title-wrap img{
  width:28px;height:28px;object-fit:contain;
  filter:drop-shadow(0 10px 8px rgba(0,0,0,.04)) drop-shadow(0 4px 3px rgba(0,0,0,.1));
}
.spins-head h3{margin:0;color:#fff;font-size:18px;line-height:1.75rem;font-weight:700}
.spins-live{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border-radius:9999px;
  background:rgba(16,185,129,.2);
  border:1px solid rgba(16,185,129,.3);
  color:#34d399;font-size:12px;font-weight:500;
}
.spins-live-dot{
  width:8px;height:8px;border-radius:9999px;background:#10b981;
  animation:pulseDot 2s cubic-bezier(0.4,0,0.6,1) infinite;
}
@keyframes pulseDot{0%,100%{opacity:1}50%{opacity:.5}}

/* Liste — 300px scrollable */
.spins-list{
  display:flex;flex-direction:column;gap:8px;
  max-height:300px;overflow-y:auto;padding-right:4px;
}

/* Satır */
.spin-row{
  display:flex;align-items:center;gap:12px;
  padding:12px;border-radius:12px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  transition:background .2s, border-color .2s;
}
.spin-row:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1)}

/* Live-feed enter/leave animasyonları */
.spin-row{transition:transform .35s cubic-bezier(.2,.9,.3,1), opacity .35s ease, background .2s, border-color .2s}
.spin-row-in{
  animation:spinRowIn .45s cubic-bezier(.2,1.05,.4,1) both;
}
.spin-row-out{
  animation:spinRowOut .35s ease forwards;
  pointer-events:none;
}
@keyframes spinRowIn{
  0%   {opacity:0;transform:translateY(-24px) scale(.96);background:rgba(16,185,129,.18);border-color:rgba(16,185,129,.3);box-shadow:0 4px 14px rgba(16,185,129,.2)}
  60%  {opacity:1;transform:translateY(0) scale(1)}
  100% {background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.06);box-shadow:none}
}
@keyframes spinRowOut{
  from {opacity:1;transform:translateY(0);max-height:80px;margin-bottom:8px}
  to   {opacity:0;transform:translateY(8px) scale(.95);max-height:0;margin-bottom:0;padding-top:0;padding-bottom:0;border-width:0}
}

/* Logo kutusu — 40×40 rounded-lg */
.spin-logo{
  flex:0 0 40px;width:40px;height:40px;
  border-radius:8px;overflow:hidden;
  background:linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.10);
  display:flex;align-items:center;justify-content:center;
}
.spin-logo img{width:32px;height:32px;object-fit:contain}

/* Gövde */
.spin-body{flex:1;min-width:0}
.spin-user{
  color:#fff;font-size:14px;font-weight:500;line-height:1.25rem;
}
.spin-prize{
  margin:0;
  color:#fbbf24;font-size:12px;font-weight:500;line-height:1rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* Zaman etiketi */
.spin-time{
  flex-shrink:0;display:inline-flex;align-items:center;gap:4px;
  color:rgba(255,255,255,.4);white-space:nowrap;
}
.spin-time svg{width:12px;height:12px}
.spin-time span{font-size:12px;line-height:1rem}

.spins-empty{
  padding:40px 20px;text-align:center;
  color:rgba(255,255,255,.45);font-size:13px;
}

/* Özel scroll — ince ve şeffaf */
.custom-scrollbar::-webkit-scrollbar{width:4px}
.custom-scrollbar::-webkit-scrollbar-track{background:rgba(255,255,255,.05);border-radius:4px}
.custom-scrollbar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:4px}
.custom-scrollbar::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.2)}
.custom-scrollbar{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.1) rgba(255,255,255,.05)}

/* ---- Ödül pop-up (çark bittiğinde) ---- */
.prize-modal{
  position:fixed;inset:0;z-index:220;
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  background:rgba(0,0,0,.7);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  animation:fadeIn .35s ease both;
}
.prize-modal.hidden{display:none}

/* Dış kart (glass + amber glow ring) */
.prize-modal-card{
  position:relative;width:100%;
  max-width:min(384px, calc(100vw - 32px));      /* max-w-sm = 24rem */
  background:linear-gradient(135deg, rgba(255,255,255,.15), rgba(255,255,255,.10), rgba(255,255,255,.15));
  backdrop-filter:blur(40px) saturate(140%);-webkit-backdrop-filter:blur(40px) saturate(140%);
  border:1px solid rgba(255,255,255,.20);
  border-radius:16px;                            /* rounded-2xl */
  padding:24px;                                  /* p-6 */
  box-shadow:0 25px 50px -12px rgba(0,0,0,.5);
  animation:prizeIn .4s cubic-bezier(.2,1.2,.4,1) both;
}
/* Dış amber halo — kartın arkasında blur ring */
.prize-modal-card::before{
  content:"";position:absolute;inset:-4px;      /* -inset-1 */
  background:linear-gradient(90deg, rgba(245,158,11,.3), rgba(234,179,8,.3), rgba(245,158,11,.3));
  border-radius:16px;filter:blur(24px);opacity:.6;
  z-index:-1;pointer-events:none;
}
@keyframes prizeIn{from{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}

/* Head: ikon + başlık solda, X kapatma sağda */
.prize-modal-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-bottom:16px;
}
.prize-modal-head-left{display:flex;align-items:center;gap:12px;min-width:0}
.prize-modal-icon{
  flex:0 0 48px;width:48px;height:48px;border-radius:12px;
  background:linear-gradient(135deg, #f59e0b, #eab308);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
}
.prize-modal-icon img{width:32px;height:32px;object-fit:contain}
.prize-modal-title-wrap{min-width:0}
.prize-modal-title{
  margin:0;color:#fff;font-size:18px;line-height:1.75rem;
  font-weight:700;letter-spacing:-.01em;
}
.prize-modal-subtitle{
  margin:0;color:rgba(255,255,255,.5);font-size:12px;line-height:1rem;
}
.prize-modal-close{
  flex:0 0 32px;width:32px;height:32px;border-radius:9999px;
  background:rgba(255,255,255,.1);color:rgba(255,255,255,.7);
  display:flex;align-items:center;justify-content:center;
  border:0;cursor:pointer;transition:background .3s;
}
.prize-modal-close:hover{background:rgba(255,255,255,.2);color:#fff}
.prize-modal-close svg{width:16px;height:16px}

/* Ödül alt kart (dark glass panel) */
.prize-modal-body{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;                            /* rounded-xl */
  padding:16px;                                  /* p-4 */
  margin-bottom:16px;
  text-align:center;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.prize-modal-label{
  color:#fff;font-size:24px;line-height:2rem;
  font-weight:700;margin-bottom:4px;
  text-shadow:0 1px 2px rgba(0,0,0,.2);
}
.prize-modal-desc{
  color:rgba(255,255,255,.5);font-size:14px;line-height:1.25rem;
  font-weight:400;
}

/* Ana CTA — altın-sarı gradient */
.prize-modal-cta{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:12px 0;border-radius:12px;
  background:linear-gradient(90deg, #f59e0b, #eab308);
  color:#fff;font-size:15px;font-weight:600;
  box-shadow:0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
  transition:background .3s, box-shadow .3s, transform .12s;
}
.prize-modal-cta:hover{
  background:linear-gradient(90deg, #fbbf24, #facc15);
  box-shadow:0 10px 15px -3px rgba(245,158,11,.3), 0 4px 6px -4px rgba(245,158,11,.3);
}
.prize-modal-cta:active{transform:scale(.95)}
.prize-modal-cta svg{width:18px;height:18px;flex-shrink:0}

/* ---- Telegram nav öğesi özel rengi (referansla aynı — #229ED9) ---- */
.nav-item-telegram{color:#229ED9}
.nav-item-telegram:hover{color:#1a8cc4;background:rgba(34,158,217,.10)}
.nav-item-telegram.active{color:#229ED9;background:rgba(34,158,217,.18)}

/* ---- iletişim pop-up (nav üstünde açılır kart) ---- */
.contacts-popup{
  margin-bottom:8px;
  animation:contactsIn .3s cubic-bezier(.2,1.05,.4,1) both;
}
.contacts-popup.hidden{display:none}
.contacts-popup-inner{
  padding:8px;border-radius:16px;
  background:linear-gradient(135deg, rgba(255,255,255,.15), rgba(255,255,255,.10), rgba(255,255,255,.15));
  backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);
  border:1px solid rgba(255,255,255,.20);
  box-shadow:0 24px 50px -12px rgba(0,0,0,.5);
  display:flex;flex-direction:column;gap:6px;
}
.contact-item{
  display:flex;align-items:center;gap:12px;
  padding:12px;border-radius:12px;
  color:#fff;text-decoration:none;
  box-shadow:0 8px 20px rgba(0,0,0,.28);
  transition:transform .25s cubic-bezier(.2,1.05,.4,1), filter .25s;
  min-height:64px;
}
.contact-item:hover{transform:scale(1.02);filter:brightness(1.08)}
.contact-item:active{transform:scale(.96)}
.contact-icon{
  flex:0 0 40px;width:40px;height:40px;border-radius:8px;
  background:rgba(255,255,255,.20);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;
}
.contact-icon img{width:24px;height:24px;object-fit:contain;display:block}
.contact-body{flex:1;min-width:0;text-align:left}
.contact-body h4{margin:0;color:#fff;font-size:14px;font-weight:600;line-height:1.15}
.contact-body p{margin:2px 0 0;color:rgba(255,255,255,.7);font-size:12px}

@keyframes contactsIn{
  from {opacity:0;transform:translateY(16px) scale(.96)}
  to   {opacity:1;transform:translateY(0)    scale(1)}
}

/* İletişim nav butonu: plus ikonu 45° döner (X görünümü) — popup açıkken */
.nav-item-contact img{transition:transform .3s cubic-bezier(.4,0,.2,1)}
.nav-item-contact.is-open img{transform:rotate(45deg)}

/* ---- çekilişler sayfası ---- */
.gw-page{padding:12px 14px 8px;display:flex;flex-direction:column;gap:22px}
.gw-block{}
.gw-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.gw-head-icon{width:40px;height:40px;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(0,0,0,.4))}
.gw-head-icon-muted{filter:grayscale(100%);opacity:.7}
.gw-title{margin:0;font-size:20px;font-weight:700;color:#fff;letter-spacing:-.02em}
.gw-title-muted{color:rgba(255,255,255,.7)}
.gw-sub{margin:1px 0 0;font-size:12px;color:rgba(255,255,255,.5)}
.gw-sub-muted{color:rgba(255,255,255,.4)}

/* Kart sarmalayıcı (glass) */
.gw-card{
  position:relative;border-radius:24px;padding:4px;overflow:hidden;
  background:linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.05), rgba(255,255,255,.10));
  backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);
  border:1px solid rgba(255,255,255,.20);
  box-shadow:0 25px 50px -12px rgba(0,0,0,.4);
}
.gw-card-glow{position:absolute;inset:-4px;z-index:0;border-radius:24px;filter:blur(24px);pointer-events:none}
.gw-glow-gold{background:linear-gradient(90deg, rgba(245,158,11,.2), rgba(234,179,8,.2), rgba(245,158,11,.2));opacity:.6}
.gw-glow-white{background:linear-gradient(90deg, rgba(255,255,255,.1), rgba(255,255,255,.05), rgba(255,255,255,.1));opacity:.4}
.gw-card-inner{position:relative;z-index:1;padding:16px}
.gw-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}

/* AKTİF çekiliş kartı */
.gw-active{
  position:relative;display:block;
  background:rgba(255,255,255,.03);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;overflow:hidden;
  padding:12px;
  transition:background .3s, border-color .3s, transform .3s;
}
.gw-active:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);transform:scale(1.02)}
.gw-active:active{transform:scale(.98)}
.gw-active-logo{
  height:56px;border-radius:12px;padding:8px;margin-bottom:12px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.05);
  display:flex;align-items:center;justify-content:center;
}
.gw-active-logo img{max-width:100%;max-height:100%;object-fit:contain}
.gw-active-title{text-align:center;margin-bottom:12px}
.gw-active-title h3{
  margin:0;font-size:14px;font-weight:700;color:#fff;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  transition:color .3s;
}
.gw-active:hover .gw-active-title h3{color:#fbbf24}
.gw-active-title p{margin:0;font-size:10px;color:rgba(255,255,255,.4)}
.gw-active-stats{
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05);
  border-radius:12px;padding:10px;margin-bottom:12px;
}
.gw-stat-row{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:8px}
.gw-users-icon{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg, rgba(245,158,11,.2), rgba(234,179,8,.2));flex-shrink:0}
.gw-users-icon svg{width:14px;height:14px;color:#fbbf24}
.gw-count{font-size:18px;font-weight:700;color:#fff;line-height:1}
.gw-count-lbl{font-size:10px;color:rgba(255,255,255,.4)}
.gw-bar{height:6px;background:rgba(255,255,255,.05);border-radius:9999px;overflow:hidden}
.gw-bar-fill{height:100%;background:linear-gradient(90deg, #f59e0b, #eab308);border-radius:9999px;transition:width 1s ease}
.gw-time{display:flex;align-items:center;justify-content:center;gap:4px;margin-top:6px}
.gw-clock{display:inline-flex}
.gw-clock svg{width:10px;height:10px;color:rgba(255,255,255,.4)}
.gw-time-lbl{font-size:10px;color:rgba(255,255,255,.6)}
.gw-time-val{font-size:10px;font-weight:500;color:#fbbf24}
.gw-join{
  display:flex;align-items:center;justify-content:center;gap:6px;
  background:linear-gradient(90deg, #f59e0b, #eab308);
  color:#fff;font-size:12px;font-weight:600;
  border-radius:12px;padding:8px;
  box-shadow:0 8px 16px rgba(245,158,11,.25);
  transition:filter .3s, box-shadow .3s;
}
.gw-active:hover .gw-join{filter:brightness(1.06);box-shadow:0 10px 22px rgba(245,158,11,.4)}
.gw-join svg{width:12px;height:12px;transition:transform .3s}
.gw-active:hover .gw-join svg{transform:translateX(2px)}

/* GEÇMİŞ çekiliş kartı */
.gw-past{
  position:relative;
  background:rgba(255,255,255,.02);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,.05);
  border-radius:16px;overflow:hidden;
  padding:12px;
}
.gw-past-logo{
  height:48px;border-radius:12px;padding:8px;margin-bottom:8px;
  background:rgba(255,255,255,.02);
  display:flex;align-items:center;justify-content:center;
  filter:grayscale(100%);opacity:.6;
}
.gw-past-logo img{max-width:100%;max-height:100%;object-fit:contain}
.gw-past-title{margin-bottom:8px}
.gw-past-title h3{
  margin:0;font-size:14px;font-weight:500;color:rgba(255,255,255,.7);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.gw-past-title p{margin:0;font-size:10px;color:rgba(255,255,255,.3)}
.gw-past-foot{
  display:flex;align-items:center;justify-content:space-between;
  font-size:11px;padding-top:8px;border-top:1px solid rgba(255,255,255,.05);
}
.gw-past-users{display:inline-flex;align-items:center;gap:4px}
.gw-past-users .gw-users-icon{width:auto;height:auto;background:none;border-radius:0}
.gw-past-users svg{width:11px;height:11px;color:rgba(255,255,255,.3)}
.gw-past-users span{color:rgba(255,255,255,.5)}
.gw-past-winner{display:inline-flex;align-items:center;gap:4px}
.gw-trophy{display:inline-flex}
.gw-trophy svg{width:11px;height:11px;color:rgba(245,158,11,.7)}
.gw-past-winner span{color:rgba(255,255,255,.7);font-weight:500}

.gw-empty{padding:40px 20px;text-align:center;color:rgba(255,255,255,.45);font-size:13px}

/* Çok küçük ekran: kartlar tek sütun olabilir ama 2 sütun daha kompakt duruyor — koru */
@media (max-width:340px){
  .gw-grid{gap:8px}
  .gw-card-inner{padding:12px}
}

/* Çekiliş süresi dolunca soluklaşma (yenilenmeden önce) */
.gw-active.gw-expired{
  opacity:.45;filter:grayscale(60%);
  transition:opacity .5s ease, filter .5s ease;
  pointer-events:none;
}
.gw-active.gw-expired .gw-time-val{color:#f87171}
.gw-active.gw-expired .gw-join{filter:grayscale(80%);opacity:.7}