/* ══════════════════════════════════════════════════════════════════════
   Canlı sekmesi — "gece nöbeti" panosu.

   Panelin geri kalanı krem/gündüz; bu sekme bilerek KOYU: gözün tek işi
   hareketi yakalamak. Renk yalnızca olay olduğunda görünür (bkz. minimal
   tasarım tercihi), sayılar Fraunces ile büyük ve okunur.
   ══════════════════════════════════════════════════════════════════════ */

.live-board{
  --lv-ink:#F6EEE0; --lv-ink2:#B9A88F; --lv-ink3:#7E7160;
  --lv-gold:#F5B23E; --lv-pink:#FF6E9C; --lv-green:#7BD45F; --lv-blue:#7CA9F5;
  --lv-line:rgba(246,238,224,.10); --lv-fill:rgba(246,238,224,.045);
  position:relative;overflow:hidden;isolation:isolate;
  border-radius:26px;padding:22px 24px 24px;
  color:var(--lv-ink);
  background:
    radial-gradient(900px 380px at 12% -10%, rgba(245,178,62,.16), transparent 62%),
    radial-gradient(700px 340px at 92% 8%, rgba(255,110,156,.11), transparent 60%),
    linear-gradient(168deg,#241D15 0%,#1A150F 52%,#141009 100%);
  box-shadow:0 2px 4px rgba(40,30,16,.16),0 26px 60px -28px rgba(40,30,16,.55);
  animation:rise .5s cubic-bezier(.2,.9,.3,1) both;
}
/* yıldız tozu dokusu */
.live-board::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(246,238,224,.13) 1px,transparent 1px);
  background-size:26px 26px;
  mask-image:radial-gradient(120% 90% at 50% 0%,#000 35%,transparent 78%);
}

/* ── başlık ───────────────────────────────────────────────────────── */
.live-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.live-title{display:flex;align-items:center;gap:11px;font-family:var(--font-display);font-size:20px;font-weight:600}
.live-title .egg{width:32px;height:32px;flex:none;transform-origin:50% 80%}
.live-title .egg.hop{animation:eggHop .62s cubic-bezier(.3,1.5,.4,1)}
@keyframes eggHop{
  0%{transform:translateY(0) scale(1)}
  30%{transform:translateY(-9px) scale(1.06,.94)}
  60%{transform:translateY(0) scale(.94,1.06)}
  100%{transform:translateY(0) scale(1)}
}
.live-badge{
  display:inline-flex;align-items:center;gap:7px;border-radius:99px;
  padding:5px 12px 5px 10px;font-size:11.5px;font-weight:900;letter-spacing:.12em;
  background:rgba(255,110,156,.14);color:#FF97B8;border:1px solid rgba(255,110,156,.28);
}
.live-badge i{width:7px;height:7px;border-radius:50%;background:#FF6E9C;animation:beat 1.6s ease-in-out infinite}
.live-badge.paused{background:rgba(246,238,224,.07);color:var(--lv-ink3);border-color:var(--lv-line)}
.live-badge.paused i{background:var(--lv-ink3);animation:none}
@keyframes beat{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
.live-head .sp{flex:1}
.live-ago{font-size:12px;color:var(--lv-ink3);font-variant-numeric:tabular-nums;white-space:nowrap}
.live-btn{
  border:1px solid var(--lv-line);background:var(--lv-fill);color:var(--lv-ink2);
  border-radius:12px;height:34px;padding:0 12px;font-size:13px;font-weight:800;
  display:inline-flex;align-items:center;gap:7px;transition:color .15s,background .15s,transform .1s;
}
.live-btn:hover{color:var(--lv-ink);background:rgba(246,238,224,.1)}
.live-btn:active{transform:scale(.95)}
.live-btn.on{color:var(--lv-gold);background:rgba(245,178,62,.14);border-color:rgba(245,178,62,.34)}
.live-btn.on:hover{background:rgba(245,178,62,.22);color:#FFCF74}

/* ── büyük sayılar ────────────────────────────────────────────────── */
.live-tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.lv-tile{
  position:relative;overflow:hidden;border-radius:20px;padding:16px 18px 15px;
  background:var(--lv-fill);border:1px solid var(--lv-line);
}
.lv-tile .k{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:900;letter-spacing:.09em;text-transform:uppercase;color:var(--lv-ink3)}
.lv-tile .k .ic{font-size:14px;line-height:1}
.lv-tile .v{font-family:var(--font-display);font-weight:700;font-size:38px;line-height:1.08;letter-spacing:-.015em;margin-top:6px;font-variant-numeric:tabular-nums}
.lv-tile .s{font-size:12.5px;font-weight:700;color:var(--lv-ink2);margin-top:4px}
.lv-tile .s b{color:var(--lv-ink)}
.lv-tile.hit{animation:tileHit 1.1s cubic-bezier(.2,.9,.3,1)}
@keyframes tileHit{
  0%{box-shadow:0 0 0 0 rgba(245,178,62,.55);background:rgba(245,178,62,.22)}
  100%{box-shadow:0 0 0 22px rgba(245,178,62,0);background:var(--lv-fill)}
}
.lv-tile.money.hit{animation-name:tileHitPink}
@keyframes tileHitPink{
  0%{box-shadow:0 0 0 0 rgba(255,110,156,.55);background:rgba(255,110,156,.24)}
  100%{box-shadow:0 0 0 22px rgba(255,110,156,0);background:var(--lv-fill)}
}
/* "şu an online" nabzı */
.lv-pulse{position:relative;width:9px;height:9px;border-radius:50%;background:var(--lv-green);flex:none}
.lv-pulse::after{
  content:"";position:absolute;inset:0;border-radius:50%;background:var(--lv-green);
  animation:ping 2.2s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes ping{0%{transform:scale(1);opacity:.7}80%,100%{transform:scale(3.2);opacity:0}}

/* ── 60 dakika grafiği + harita ───────────────────────────────────── */
.live-mid{display:grid;grid-template-columns:1.25fr 1fr;gap:14px;margin-top:14px}
.lv-panel{
  border-radius:20px;padding:16px 18px;background:var(--lv-fill);border:1px solid var(--lv-line);
  min-width:0;display:flex;flex-direction:column;
}
/* Grafik, yanındaki harita paneli kadar uzayıp altında boşluk bırakmasın. */
.lv-panel > div:last-child{flex:1;display:flex;flex-direction:column}
.lv-panel h4{
  font-size:11px;font-weight:900;letter-spacing:.09em;text-transform:uppercase;
  color:var(--lv-ink3);margin-bottom:12px;display:flex;align-items:center;gap:9px;flex-wrap:wrap;
}
.lv-panel h4 .sp{flex:1}
.lv-key{display:inline-flex;align-items:center;gap:5px;letter-spacing:0;text-transform:none;font-size:11.5px;font-weight:800;color:var(--lv-ink2)}
.lv-key i{width:8px;height:8px;border-radius:3px;display:inline-block}

.lv-bars{display:flex;align-items:flex-end;gap:2px;height:88px;flex:1;min-height:88px}
.lv-bars .col{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;border-radius:4px}
.lv-bars .col:hover{background:rgba(246,238,224,.06)}
.lv-bars .b{border-radius:3px;min-height:0;transition:height .5s cubic-bezier(.2,.9,.3,1)}
.lv-bars .b.s{background:linear-gradient(180deg,#F5B23E,#C97F1B)}
.lv-bars .b.p{background:linear-gradient(180deg,#FF6E9C,#D63C72)}
.lv-bars .col.now .b.empty{background:repeating-linear-gradient(90deg,rgba(246,238,224,.22) 0 2px,transparent 2px 4px);height:3px;border-radius:2px}
.lv-axis{display:flex;justify-content:space-between;font-size:10.5px;color:var(--lv-ink3);margin-top:8px;font-variant-numeric:tabular-nums}

/* dünya takımyıldızı */
.lv-map{width:100%;height:auto;display:block;overflow:visible}
.lv-map .land{fill:rgba(246,238,224,.22)}
.lv-map .hit-s{fill:var(--lv-gold)}
.lv-map .hit-p{fill:var(--lv-pink)}
/* Halka `r` yerine transform ile büyür — SVG geometri özelliklerinin CSS
   animasyonu her tarayıcıda yok, transform her yerde var. */
.lv-map .ring{fill:none;stroke:var(--lv-gold);opacity:0;transform-box:fill-box;transform-origin:center}
.lv-map .ring.p{stroke:var(--lv-pink)}
.lv-map .ring.go{animation:mapPing 2.6s cubic-bezier(0,0,.2,1) infinite}
@keyframes mapPing{0%{opacity:.8;transform:scale(.35)}70%,100%{opacity:0;transform:scale(2.6)}}
.lv-maplist{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.lv-cty{
  display:inline-flex;align-items:center;gap:6px;border-radius:99px;padding:4px 10px;
  font-size:12px;font-weight:800;background:rgba(246,238,224,.06);border:1px solid var(--lv-line);color:var(--lv-ink2);
}
.lv-cty b{color:var(--lv-ink)}

/* ── canlı akış ───────────────────────────────────────────────────── */
.live-feed{margin-top:14px;border-radius:20px;background:var(--lv-fill);border:1px solid var(--lv-line);padding:16px 18px 8px}
/* Alt kenarda yumuşak kesim: liste kaydırılabilir olduğunu kendisi söylesin,
   satır ortadan bıçakla kesilmiş gibi durmasın. */
.lv-rows{
  max-height:440px;overflow-y:auto;margin:0 -6px;padding:0 6px 8px;
  scrollbar-width:thin;scrollbar-color:rgba(246,238,224,.18) transparent;
  mask-image:linear-gradient(180deg,#000 calc(100% - 34px),transparent 100%);
}
.lv-rows::-webkit-scrollbar{width:6px}
.lv-rows::-webkit-scrollbar-thumb{background:rgba(246,238,224,.16);border-radius:99px}
.lv-row{
  display:flex;align-items:center;gap:13px;padding:11px 12px;border-radius:15px;
  border:1px solid transparent;
}
.lv-row + .lv-row{margin-top:4px}
.lv-row:hover{background:rgba(246,238,224,.05)}
.lv-row .av{
  width:38px;height:38px;flex:none;border-radius:13px;display:grid;place-items:center;font-size:18px;
  background:rgba(246,238,224,.07);border:1px solid var(--lv-line);
}
.lv-row.k-purchase .av,.lv-row.k-renewal .av{background:rgba(255,110,156,.16);border-color:rgba(255,110,156,.3)}
.lv-row.k-signup .av{background:rgba(245,178,62,.14);border-color:rgba(245,178,62,.28)}
.lv-row.k-trial .av{background:rgba(124,169,245,.14);border-color:rgba(124,169,245,.3)}
.lv-row .txt{min-width:0;flex:1}
.lv-row .t1{font-size:14px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lv-row .t2{font-size:12px;color:var(--lv-ink3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lv-row .amt{font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--lv-pink);white-space:nowrap;flex:none}
.lv-row .when{font-size:11.5px;color:var(--lv-ink3);white-space:nowrap;flex:none;font-variant-numeric:tabular-nums;min-width:58px;text-align:right}
.lv-tag{display:inline-block;border-radius:99px;padding:1px 8px;font-size:10.5px;font-weight:900;letter-spacing:.03em;margin-left:6px;vertical-align:1px}
.lv-tag.sb{background:rgba(246,238,224,.1);color:var(--lv-ink2)}
.lv-tag.tr{background:rgba(124,169,245,.16);color:#A9C8FA}

/* yeni satır: yukarıdan düşer + sıcak bir flaş bırakır */
.lv-row.fresh{animation:rowIn .5s cubic-bezier(.2,1.3,.4,1) both,rowGlow 2.6s ease-out .3s both}
@keyframes rowIn{from{opacity:0;transform:translateY(-14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes rowGlow{
  0%{background:rgba(245,178,62,.2);border-color:rgba(245,178,62,.45)}
  100%{background:transparent;border-color:transparent}
}
.lv-row.fresh.k-purchase,.lv-row.fresh.k-renewal,.lv-row.fresh.k-trial{animation-name:rowIn,rowGlowP}
@keyframes rowGlowP{
  0%{background:rgba(255,110,156,.22);border-color:rgba(255,110,156,.5)}
  100%{background:transparent;border-color:transparent}
}

.lv-empty{text-align:center;padding:34px 10px 40px;color:var(--lv-ink3);font-size:13.5px}
.lv-empty .z{font-size:34px;display:block;margin-bottom:10px;animation:wobble 3.2s ease-in-out infinite}
.lv-note{
  margin-top:14px;border-radius:16px;border:1px dashed var(--lv-line);background:rgba(246,238,224,.04);
  padding:12px 15px;font-size:12.5px;color:var(--lv-ink3);line-height:1.6;
}
.lv-note b{color:var(--lv-ink2)}
.lv-note.warn{border-color:rgba(255,110,156,.32);background:rgba(255,110,156,.07);color:#FFB6CD}
.lv-note.warn b{color:#FFD9E4}

/* konfeti — satın almada kısa bir kutlama */
.lv-conf{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:5}
.lv-conf span{position:absolute;font-size:17px;will-change:transform,opacity}

@media(max-width:1180px){.live-tiles{grid-template-columns:repeat(3,1fr)}}
@media(max-width:860px){
  .live-tiles{grid-template-columns:repeat(2,1fr)}
  .live-mid{grid-template-columns:1fr}
}
@media(max-width:560px){
  .live-board{padding:18px 15px 20px;border-radius:22px}
  .lv-tile .v{font-size:31px}
  .lv-row .when{display:none}
}
@media(prefers-reduced-motion:reduce){
  .live-board *,.live-board *::after,.live-board *::before{animation:none!important;transition:none!important}
}