/* İstanbul Yarı Final — canlı puan tablosu.
   Yayın grafiği dili: keskin köşeler, arena ızgarası, sarı/mavi/kırmızı vurgu.
   Sıralama değiştikçe satırlar kayar; yükselen yeşil, düşen kırmızı yanar.
   Hareketler prefers-reduced-motion altında sakinleşir. */

/* ---------- Sekmeler ---------- */
.vote-tabs{display:flex;gap:10px;margin:0 0 26px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.vote-tab{
  position:relative;display:flex;flex-direction:column;gap:5px;align-items:flex-start;
  padding:15px 22px 16px;background:transparent;color:#9a9aa6;border:1px solid transparent;border-bottom:0;
  text-align:left;transition:color .2s,background-color .2s;min-height:58px;
}
.vote-tab span{font:800 15px/1.05 ArenaDisplay,Impact,sans-serif;letter-spacing:.01em}
.vote-tab small{font-size:9px;letter-spacing:.12em;color:#6f6f7c}
.vote-tab:hover{color:var(--white);background:#16161d}
.vote-tab[aria-selected=true]{color:var(--white);background:#16161d;border-color:var(--line)}
.vote-tab[aria-selected=true]::after{content:'';position:absolute;left:-1px;right:-1px;top:-1px;height:2px;background:var(--yellow)}
.vote-tab[aria-selected=true] small{color:var(--yellow)}
.vote-tab[data-live=true] span::after{
  content:'CANLI';margin-left:10px;padding:2px 6px;font:700 8px/1 ArenaSans,Arial,sans-serif;letter-spacing:.14em;
  color:#0b0b0f;background:var(--red);vertical-align:middle;
}
.motion .vote-tab[data-live=true] span::after{animation:sf-pulse 1.8s ease-in-out infinite}
.vote-panel[hidden]{display:none}

/* ---------- Pano ---------- */
.sf-board{
  position:relative;border:1px solid var(--line);border-top:2px solid var(--yellow);
  background:linear-gradient(140deg,#15151d 0%,#101017 55%,#15151f 100%);
}
.sf-board::before{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);
  background-size:52px 52px;
}
.sf-board>*{position:relative;z-index:1}
.sf-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,auto);gap:22px 34px;align-items:center;padding:26px 28px 22px}
.sf-live{display:flex;align-items:center;gap:9px;font-size:10px;font-weight:700;letter-spacing:.2em;color:var(--red)}
.sf-live-dot{width:9px;height:9px;background:var(--red);border-radius:50%;box-shadow:0 0 0 0 #ea433566}
.motion .sf-live-dot{animation:sf-ping 1.9s ease-out infinite}
.sf-heading{font:800 clamp(27px,3.4vw,42px)/1 ArenaDisplay,Impact,sans-serif;letter-spacing:-.01em;margin-top:12px}
.sf-note{font-size:12.5px;line-height:1.7;color:var(--muted);margin-top:11px;max-width:560px}
.sf-clock{margin:0;border:1px solid var(--line);border-top:2px solid var(--vurgu,var(--yellow))}

/* ---------- Sayı şeridi ---------- */
.sf-stats{display:flex;flex-wrap:wrap;gap:1px;background:var(--line);border-block:1px solid var(--line)}
.sf-stat{flex:1 1 130px;display:flex;flex-direction:column;gap:6px;padding:15px 18px 16px;background:#101016}
.sf-stat b{font:800 27px/1 ArenaDisplay,Impact,sans-serif;color:var(--white)}
.sf-stat i{font-style:normal;font-size:8.5px;letter-spacing:.16em;color:#84848f}
.sf-stat[data-key=open] b{color:var(--blue)}
.sf-stat[data-key=final] b{color:var(--yellow)}
.sf-stat[data-key=votes] b{color:#5ad07f}
.sf-message{padding:16px 28px;font-size:12px;line-height:1.7;color:#c4c4d0;border-bottom:1px solid var(--line)}

/* ---------- Liste ---------- */
.sf-list{list-style:none;margin:0;padding:10px 14px 16px;display:flex;flex-direction:column;gap:7px}
.sf-row{
  --taraf:#3b3b47;
  position:relative;display:grid;grid-template-columns:58px 44px minmax(0,1fr) auto auto 128px;
  align-items:center;gap:16px;padding:12px 16px 12px 12px;
  background:#14141b;border:1px solid #23232c;border-left:3px solid var(--taraf);
  transition:background-color .25s,border-color .25s;will-change:transform;
}
.sf-row:hover{background:#181820}
.sf-row[data-open=true]{--taraf:var(--blue)}
.sf-row[data-final=true]{--taraf:var(--yellow);background:linear-gradient(90deg,#1d1a12 0%,#15151c 42%)}
.sf-row[data-final=true]:first-child::after{
  content:'';position:absolute;inset:0;pointer-events:none;overflow:hidden;
  background:linear-gradient(105deg,transparent 42%,#fbbc0424 50%,transparent 58%);background-size:260% 100%;
}
.motion .sf-row[data-final=true]:first-child::after{animation:sf-sweep 4.6s linear infinite}
.sf-row[data-mine=true]{outline:2px solid var(--yellow);outline-offset:2px}
.sf-row[data-open=false]{--taraf:var(--red);color:#8b8b96;background:#121218}
.sf-row[data-open=false]::before{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(135deg,#ea433514 0 8px,transparent 8px 17px);
}
.sf-row[data-open=false] .sf-person strong{color:#a6a6b1}

.sf-pos{display:flex;align-items:baseline;gap:6px;justify-content:flex-start}
.sf-pos b{font:800 26px/1 ArenaDisplay,Impact,sans-serif;color:var(--white);font-variant-numeric:tabular-nums}
.sf-row[data-open=false] .sf-pos b{color:#6f6f7b}
.sf-row[data-final=true] .sf-pos b{color:var(--yellow)}
.sf-move{font-style:normal;font-size:9px;font-weight:700;letter-spacing:.04em;color:transparent}
.sf-row[data-move=up] .sf-move{color:#5ad07f}
.sf-row[data-move=down] .sf-move{color:#ef6a5e}

.sf-face{width:44px;height:44px;overflow:hidden;background:#24242e;display:grid;place-items:center;border:1px solid #2e2e39}
.sf-face img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.sf-initials{font:800 15px/1 ArenaDisplay,Impact,sans-serif;color:#9c9caa}
.sf-person{min-width:0;display:flex;flex-direction:column;gap:4px}
.sf-person strong{font-size:14px;font-weight:700;letter-spacing:.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sf-person small{font-size:10.5px;color:#8a8a96;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sf-score{display:flex;flex-direction:column;gap:4px;align-items:flex-end;text-align:right}
.sf-score b{font:800 21px/1 ArenaDisplay,Impact,sans-serif;font-variant-numeric:tabular-nums}
.sf-score i{font-style:normal;font-size:8px;letter-spacing:.14em;color:#7d7d89;white-space:nowrap}

.sf-flag{
  justify-self:end;padding:6px 10px;font-size:8.5px;font-weight:700;letter-spacing:.13em;white-space:nowrap;
  border:1px solid #33333f;color:#9d9daa;
}
.sf-row[data-final=true] .sf-flag{border-color:#6b5715;color:var(--yellow);background:#241e08}
.sf-row[data-open=false] .sf-flag{border-color:#5d2721;color:#f08a80;background:#22100e}

.sf-vote{
  justify-self:end;min-width:128px;min-height:42px;padding:11px 14px;
  font-size:11px;font-weight:700;letter-spacing:.09em;color:var(--bg);background:var(--yellow);
  border:1px solid var(--yellow);transition:transform .18s var(--ease),background-color .2s,color .2s;
}
.sf-vote:hover:not(:disabled){background:#ffcf3a;transform:translateY(-1px)}
.sf-vote:disabled{background:transparent;color:#7f7f8b;border-color:#33333f}
.sf-vote.is-mine:disabled{background:#1d2a1e;border-color:#3f6b45;color:#8ee0a2}
.sf-vote[hidden]{display:none}

/* Final hattı: oylamaya açık ilk dört satırın altındaki ayrım. */
.sf-cut{
  display:flex;align-items:center;gap:14px;margin:4px 2px;padding:7px 12px;
  border-top:1px dashed #6b5715;color:var(--yellow);
}
.sf-cut-label{font:800 12px/1 ArenaDisplay,Impact,sans-serif;letter-spacing:.06em}
.sf-cut i{font-style:normal;font-size:8.5px;letter-spacing:.14em;color:#9a8a4e}
.sf-foot{padding:0 28px 24px;font-size:10.5px;line-height:1.75;color:#7e7e8a}

/* ---------- Hareket ---------- */
.sf-row.is-shift{animation:sf-shift .9s ease-out}
.sf-row[data-move=down].is-shift{animation-name:sf-shift-down}
.sf-row.is-voted{animation:sf-voted 1.1s ease-out}
@keyframes sf-shift{0%{box-shadow:inset 0 0 0 1px #5ad07f,0 0 26px #5ad07f33;background-color:#16241a}100%{box-shadow:none}}
@keyframes sf-shift-down{0%{box-shadow:inset 0 0 0 1px #ef6a5e,0 0 22px #ef6a5e2e;background-color:#241715}100%{box-shadow:none}}
@keyframes sf-voted{0%{box-shadow:0 0 0 0 #fbbc0455}40%{box-shadow:0 0 0 12px #fbbc0400}100%{box-shadow:none}}
@keyframes sf-ping{0%{box-shadow:0 0 0 0 #ea433566}70%{box-shadow:0 0 0 9px #ea433500}100%{box-shadow:0 0 0 0 #ea433500}}
@keyframes sf-pulse{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes sf-sweep{0%{background-position:150% 0}100%{background-position:-50% 0}}
@media(prefers-reduced-motion:reduce){
  .sf-row,.sf-row.is-shift,.sf-row.is-voted{animation:none!important;transition:none!important}
  .sf-live-dot{animation:none!important}
}

/* ---------- Dar ekran ---------- */
@media(max-width:980px){
  .sf-top{grid-template-columns:1fr;padding:22px 20px 18px}
  .sf-message{padding:14px 20px}
  .sf-foot{padding:0 20px 20px}
  .sf-list{padding:10px 10px 14px}
  .sf-row{grid-template-columns:44px 40px minmax(0,1fr) auto;grid-template-areas:'pos face person score' 'pos flag flag vote';gap:10px 12px;row-gap:12px}
  .sf-pos{grid-area:pos;align-self:center}
  .sf-face{grid-area:face;width:40px;height:40px}
  .sf-person{grid-area:person}
  .sf-score{grid-area:score}
  .sf-flag{grid-area:flag;justify-self:start}
  .sf-vote{grid-area:vote;min-width:112px}
}
@media(max-width:560px){
  .vote-tab{flex:1 1 100%;padding:13px 16px 14px}
  .vote-tab span{font-size:14px}
  .sf-heading{font-size:26px}
  .sf-stat{flex-basis:calc(50% - 1px);padding:13px 14px}
  .sf-stat b{font-size:22px}
  .sf-row{grid-template-columns:38px 36px minmax(0,1fr);grid-template-areas:'pos face person' 'score score score' 'flag flag vote';padding:12px;gap:8px 10px}
  .sf-face{width:36px;height:36px}
  .sf-score{flex-direction:row;align-items:baseline;gap:8px;justify-content:flex-start;text-align:left}
  .sf-vote{justify-self:end;min-width:104px;font-size:10px}
  .sf-cut{flex-direction:column;align-items:flex-start;gap:4px}
}

/* ---------- Paylaşım düğmesi ----------
   Satırın sonuna, oy düğmesinin sağına ince bir "oy iste" düğmesi eklenir.
   Izgara tanımları burada yeniden yazılır: yukarıdaki kurallardan sonra
   geldiği için sütun/alan şeması bu değerlerle biter. */
.sf-row { grid-template-columns: 58px 44px minmax(0, 1fr) auto auto 128px auto; }
.sf-share { display: flex; justify-content: flex-end; }
@media (max-width: 980px) {
  .sf-row { grid-template-areas: 'pos face person score' 'pos flag vote share'; }
  .sf-share { grid-area: share; }
}
@media (max-width: 560px) {
  .sf-row { grid-template-areas: 'pos face person' 'score score score' 'flag vote share'; }
  .sf-vote { justify-self: stretch; min-width: 0; }
  .sf-share .share-trigger { min-height: 40px; }
}
/* Deneme kilidi (08.10.2026): sarı çerçeve */
.sf-vote.is-deneme:disabled, button.is-deneme:disabled { background: transparent; color: #fbbc04; border: 1px solid #fbbc04; }