/**
 * CSS Yapaysoft Erkan Gunes 2026 July
 */

:root{
    --bg:#0B111E;
    --bg-elevated:#111A2C;
    --bg-elevated-2:#0E1830;
    --panel:#16213A;
    --panel-2:#1B2740;
    --line:rgba(255,255,255,.08);
    --text:#EAF0FF;
    --text-dim:#8B97B8;
    --text-dimmer:#5C6A8C;
    --radial-1:#17223B;
    --radial-2:#14213A;
    --shadow:rgba(0,0,0,.35);

    /* fixed podium theme — stays the same regardless of light/dark */
    --gold:#F5B942;
    --gold-dim:#3A2E14;
    --silver:#C7D0DD;
    --silver-dim:#232B3A;
    --bronze:#D98A56;
    --bronze-dim:#2E1F13;
    --live:#34D399;
    --live-dim:#0E2A22;
    --rank-chip-bg:#22345E;
    --rank-chip-text:#EAF0FF;
  }

  @media (prefers-color-scheme: light){
    :root{
      --bg:#F3F5FA;
      --bg-elevated:#FFFFFF;
      --bg-elevated-2:#E9EEF9;
      --panel:#FFFFFF;
      --panel-2:#F2F5FB;
      --line:rgba(16,23,42,.10);
      --text:#101728;
      --text-dim:#48526B;
      --text-dimmer:#7C879E;
      --radial-1:#E3E9F7;
      --radial-2:#EAF3EF;
      --shadow:rgba(30,40,70,.10);
    }
    .table-card, .header-card, .stat, .weather-pill{ box-shadow:0 1px 3px var(--shadow); }
  }

  *{box-sizing:border-box; margin:0; padding:0;}

  body{
    background:
      radial-gradient(1200px 600px at 15% -10%, var(--radial-1) 0%, transparent 60%),
      radial-gradient(900px 500px at 110% 10%, var(--radial-2) 0%, transparent 55%),
      var(--bg);
    color:var(--text);
    font-family:'Inter', sans-serif;
    min-height:100vh;
    padding:28px 16px 60px;
    transition:background-color .3s ease, color .3s ease;
  }

  .wrap{ max-width:1000px; margin:0 auto; }

  /* ---------- header ---------- */
  .topline{
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:18px; color:var(--text-dimmer); font-size:12.5px;
    letter-spacing:.06em; text-transform:uppercase; font-weight:600;
  }
  .topline .loft{ color:var(--text-dim); }
  .topline-right{ display:flex; align-items:center; gap:10px; }

  .weather-pill{
    display:flex; align-items:center; gap:7px;
    background:var(--panel); border:1px solid var(--line);
    border-radius:999px; padding:5px 12px 5px 8px;
    color:var(--text); font-weight:600; font-size:12.5px;
  }
  .weather-pill .w-icon{ width:18px; height:18px; display:flex; align-items:center; justify-content:center; }
  .weather-pill .w-city{ color:var(--text-dimmer); font-weight:600; text-transform:uppercase; font-size:10.5px; letter-spacing:.05em; }
  .weather-pill .w-temp{ font-family:'JetBrains Mono', monospace; }

  .section-title-row{ display:flex; align-items:center; gap:8px; }
  .trophy-icon{ width:15px; height:15px; color:var(--gold); }
  .p-1 .p-trophy{ width:16px; height:16px; color:var(--gold); margin:0 auto 6px; display:block; }

  .header-card{
    position:relative;
    background:linear-gradient(160deg, var(--bg-elevated) 0%, var(--bg-elevated-2) 100%);
    border:1px solid var(--line);
    border-radius:20px;
    padding:26px 26px 22px;
    overflow:hidden;
    margin-bottom:22px;
  }
  .header-card::before{
    content:"";
    position:absolute; inset:0;
    background-image:
      repeating-linear-gradient(100deg, transparent 0 90px, rgba(255,255,255,.025) 90px 91px);
    pointer-events:none;
  }
  .flight-svg{ position:absolute; right:-10px; top:-10px; width:260px; height:180px; opacity:.5; pointer-events:none; }

  .live-row{
    display:flex; align-items:center; gap:8px; margin-bottom:14px;
  }
  .live-dot{
    width:9px; height:9px; border-radius:50%; background:var(--live);
    box-shadow:0 0 0 0 rgba(52,211,153,.6);
    animation:pulse 1.6s infinite;
  }
  @keyframes pulse{
    0%{ box-shadow:0 0 0 0 rgba(52,211,153,.55); }
    70%{ box-shadow:0 0 0 9px rgba(52,211,153,0); }
    100%{ box-shadow:0 0 0 0 rgba(52,211,153,0); }
  }
  .live-label{
    font-size:12px; font-weight:700; letter-spacing:.14em; color:var(--live);
    text-transform:uppercase;
  }

  .race-title{
    font-family:'Bebas Neue', sans-serif;
    font-size:clamp(30px,5vw,42px);
    letter-spacing:.02em;
    line-height:1;
    margin-bottom:6px;
  }
  .race-meta{
    color:var(--text-dim); font-size:13.5px; font-weight:500;
    margin-bottom:20px;
  }

  .stat-row{ display:flex; gap:12px; flex-wrap:wrap; }
  .stat{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:12px;
    padding:12px 16px;
    min-width:120px;
    flex:1;
  }
  .stat .label{ font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-dimmer); font-weight:700; margin-bottom:4px; }
  .stat .value{ font-family:'JetBrains Mono', monospace; font-size:20px; font-weight:700; color:var(--text); }
  .stat .value span{ font-size:13px; color:var(--text-dim); font-weight:500; }

  /* ---------- podium carousel ---------- */
  .section-label{
    font-size:11.5px; text-transform:uppercase; letter-spacing:.12em;
    color:var(--text-dimmer); font-weight:700; margin:30px 0 12px 4px;
  }

  .podium-wrap{ margin-bottom:8px; }
  .podium-viewport{ overflow:hidden; border-radius:20px; }
  .podium-track{ display:flex; transition:transform .65s cubic-bezier(.65,0,.35,1); }
  .podium-slide{ min-width:100%; box-sizing:border-box; }

  .podium-card{
    position:relative; overflow:hidden;
    border-radius:20px; padding:22px 22px 20px; color:#fff;
    min-height:168px;
  }
  .podium-card::after{
    content:""; position:absolute; inset:0;
    background:radial-gradient(220px 140px at 105% -20%, rgba(255,255,255,.22), transparent 60%);
    pointer-events:none;
  }
  .pc-1{ background:linear-gradient(135deg,#F6C453 0%,#E0902A 55%,#C97A1E 100%); }
  .pc-2{ background:linear-gradient(135deg,#D7DEE8 0%,#A7B1C2 55%,#818CA0 100%); }
  .pc-3{ background:linear-gradient(135deg,#F6A15C 0%,#E4762F 55%,#C85A1C 100%); }

  .pc-rank{
    font-family:'Bebas Neue', sans-serif; font-size:34px; letter-spacing:.02em;
    line-height:1; margin-bottom:14px;
  }
  .pc-trophy{ position:absolute; top:20px; right:20px; width:30px; height:30px; opacity:.9; }
  .pc-row{ display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:600; margin-bottom:8px; }
  .pc-row:last-child{ margin-bottom:0; }
  .pc-row .ic{ width:15px; height:15px; flex-shrink:0; opacity:.9; }
  .pc-flag{ font-size:16px; }
  .pc-name{ font-weight:700; }
  .pc-offset{ opacity:.75; font-weight:500; margin-left:6px; }

  .podium-dots{ display:flex; justify-content:center; gap:6px; margin-top:12px; }
  .podium-dot{
    width:7px; height:7px; border-radius:50%; background:var(--line);
    border:none; cursor:pointer; padding:0; transition:all .3s ease;
  }
  .podium-dot.active{ width:20px; border-radius:4px; background:var(--gold); }

  .youtube {
  position: relative;
  width: 100%;
  max-width: 900px;
  margin: 20px auto;
  padding-top: 56.25%; /* 16:9 oran */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.youtube iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

  /* ---------- result list ---------- */
  .table-card{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:16px;
    overflow:hidden;
  }
  .result-row{
    display:flex; gap:12px; align-items:flex-start;
    padding:13px 14px; border-bottom:1px solid var(--line);
    transition:background .6s ease;
  }
  .result-row:last-child{ border-bottom:none; }
  .result-row.new-row{ background:rgba(52,211,153,.12); }

  .r-rank{
    flex-shrink:0; min-width:38px; text-align:center;
    background:var(--rank-chip-bg); color:var(--rank-chip-text);
    font-family:'JetBrains Mono', monospace; font-weight:800; font-size:12.5px;
    padding:6px 6px; border-radius:8px;
  }
  .r-body{ flex:1; min-width:0; }
  .r-top{ display:flex; align-items:center; gap:7px; margin-bottom:5px; }
  .r-flag{ font-size:15px; line-height:1; flex-shrink:0; }
  .r-name{
    font-weight:700; font-size:13.5px; flex:1; min-width:0;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .r-24h{ color:#E5484D; font-weight:700; font-size:11px; flex-shrink:0; }
  .r-mid, .r-bottom{
    display:flex; align-items:center; gap:6px; color:var(--text-dim);
    font-size:12px; margin-bottom:3px;
  }
  .r-mid{ justify-content:space-between; }
  .r-mid .r-ring-txt{ display:flex; align-items:center; gap:6px; font-family:'JetBrains Mono', monospace; }
  .r-mid .r-speed{ font-family:'JetBrains Mono', monospace; font-weight:700; color:var(--text); }
  .r-bottom{ color:var(--text-dimmer); font-family:'JetBrains Mono', monospace; margin-bottom:0; }
  .r-ic{ width:13px; height:13px; flex-shrink:0; opacity:.8; }

  footer{ text-align:center; color:var(--text-dimmer); font-size:11.5px; margin-top:26px; }

  @media (max-width:640px){
    .stat-row{ flex-direction:column; }
  }