<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Halı Saha Kadroları</title>
<style>
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }

  body {
    background-color: #0f172a;
    color: #f8fafc;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    padding: 20px 10px;
  }

  h1 {
    margin-bottom: 20px;
    font-size: 1.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: center;
    color: #38bdf8;
    text-shadow: 0 0 10px rgba(56, 189, 248, 0.3);
  }

  .pitch-container {
    width: 100%;
    max-width: 500px;
    height: 780px;
    background: linear-gradient(to bottom, #15803d, #166534);
    background-image: repeating-linear-gradient(
      0deg,
      #16a34a,
      #16a34a 40px,
      #15803d 40px,
      #15803d 80px
    );
    border: 4px solid #ffffff;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.5);
  }

  /* Saha Çizgileri */
  .center-line {
    position: absolute;
    top: 50%;
    width: 100%;
    height: 3px;
    background-color: rgba(255, 255, 255, 0.85);
    transform: translateY(-50%);
  }

  .center-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 110px;
    height: 110px;
    border: 3px solid rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    transform: translate(-50%, -50%);
  }

  .center-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    background-color: rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    transform: translate(-50%, -50%);
  }

  /* Ceza Sahaları */
  .penalty-area-top {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 220px;
    height: 100px;
    border: 3px solid rgba(255, 255, 255, 0.85);
    border-top: none;
  }

  .penalty-area-bottom {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 220px;
    height: 100px;
    border: 3px solid rgba(255, 255, 255, 0.85);
    border-bottom: none;
  }

  .goal-top {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-top: none;
    background: rgba(255, 255, 255, 0.2);
  }

  .goal-bottom {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-bottom: none;
    background: rgba(255, 255, 255, 0.2);
  }

  /* Oyuncu İkon ve Etiket */
  .player {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translate(-50%, -50%);
    z-index: 10;
    width: 110px;
  }

  .badge {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.85rem;
    color: #fff;
    box-shadow: 0 4px 6px rgba(0,0,0,0.4);
    border: 2px solid #ffffff;
    margin-bottom: 4px;
    transition: transform 0.2s;
  }

  .player:hover .badge {
    transform: scale(1.15);
  }

  .team-a .badge {
    background: linear-gradient(135deg, #ef4444, #b91c1c);
  }

  .team-a.gk .badge {
    background: linear-gradient(135deg, #f59e0b, #d97706);
  }

  .team-b .badge {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  }

  .team-b.gk .badge {
    background: linear-gradient(135deg, #10b981, #047857);
  }

  .name {
    background-color: rgba(15, 23, 42, 0.85);
    color: #ffffff;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  }

  /* Takım Başlıkları */
  .team-header {
    position: absolute;
    left: 12px;
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 1px;
    padding: 4px 10px;
    border-radius: 6px;
    text-transform: uppercase;
    opacity: 0.9;
  }

  .header-a {
    top: 12px;
    background-color: #ef4444;
    color: white;
  }

  .header-b {
    bottom: 12px;
    background-color: #3b82f6;
    color: white;
  }

  /* Skorboard / Bilgi Paneli */
  .info-panel {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 500px;
    margin-top: 15px;
    gap: 10px;
  }

  .team-box {
    flex: 1;
    background-color: #1e293b;
    padding: 12px;
    border-radius: 8px;
    border-left: 4px solid;
  }

  .team-box.a { border-color: #ef4444; }
  .team-box.b { border-color: #3b82f6; }

  .team-box h3 {
    font-size: 0.95rem;
    margin-bottom: 6px;
  }

  .team-box ul {
    list-style: none;
    font-size: 0.78rem;
    color: #cbd5e1;
  }

  .team-box li {
    margin-bottom: 3px;
  }
</style>
</head>
<body>

<h1>GÜNCELLENMİŞ HALI SAHA KADROLARI (3-1-2)</h1>

<div class="pitch-container">
  <!-- Saha Çizgileri -->
  <div class="goal-top"></div>
  <div class="penalty-area-top"></div>
  <div class="center-line"></div>
  <div class="center-circle"></div>
  <div class="center-dot"></div>
  <div class="penalty-area-bottom"></div>
  <div class="goal-bottom"></div>

  <!-- Takım Etiketleri -->
  <div class="team-header header-a">A Takımı</div>
  <div class="team-header header-b">B Takımı</div>

  <!-- A TAKIMI (ÜST TARAFTAN AŞAĞIYA DOĞRU HÜCUM) -->
  <!-- Kaleci -->
  <div class="player team-a gk" style="top: 7%; left: 50%;">
    <div class="badge">KL</div>
    <div class="name">Ahmet Çelebi</div>
  </div>

  <!-- Defans Hattı -->
  <div class="player team-a" style="top: 22%; left: 80%;">
    <div class="badge">SĞD</div>
    <div class="name">Hıdır Ataman</div>
  </div>
  <div class="player team-a" style="top: 19%; left: 50%;">
    <div class="badge">STD</div>
    <div class="name">Alper Eker</div>
  </div>
  <div class="player team-a" style="top: 22%; left: 20%;">
    <div class="badge">SLD</div>
    <div class="name">Yakup Biçen</div>
  </div>

  <!-- Orta Saha -->
  <div class="player team-a" style="top: 34%; left: 50%;">
    <div class="badge">OS</div>
    <div class="name">Ömer Faruk Öz</div>
  </div>

  <!-- Forvet Hattı -->
  <div class="player team-a" style="top: 44%; left: 32%;">
    <div class="badge">FV</div>
    <div class="name">Ömer Eser</div>
  </div>
  <div class="player team-a" style="top: 44%; left: 68%;">
    <div class="badge">FV</div>
    <div class="name">Cengiz</div>
  </div>


  <!-- B TAKIMI (AŞAĞIDAN YUKARIYA DOĞRU HÜCUM) -->
  <!-- Forvet Hattı -->
  <div class="player team-b" style="top: 56%; left: 32%;">
    <div class="badge">FV</div>
    <div class="name">Ergin Tepe</div>
  </div>
  <div class="player team-b" style="top: 56%; left: 68%;">
    <div class="badge">FV</div>
    <div class="name">Yunus Bozkaya</div>
  </div>

  <!-- Orta Saha -->
  <div class="player team-b" style="top: 66%; left: 50%;">
    <div class="badge">OS</div>
    <div class="name">Ahmet Bozkurt</div>
  </div>

  <!-- Defans Hattı -->
  <div class="player team-b" style="top: 78%; left: 80%;">
    <div class="badge">SĞD</div>
    <div class="name">Cihat Öztürk</div>
  </div>
  <div class="player team-b" style="top: 81%; left: 50%;">
    <div class="badge">STD</div>
    <div class="name">Fatih Can</div>
  </div>
  <div class="player team-b" style="top: 78%; left: 20%;">
    <div class="badge">SLD</div>
    <div class="name">Hanefi Oral</div>
  </div>

  <!-- Kaleci -->
  <div class="player team-b gk" style="top: 93%; left: 50%;">
    <div class="badge">KL</div>
    <div class="name">Murat Akbudak</div>
  </div>
</div>

<!-- Liste Özeti -->
<div class="info-panel">
  <div class="team-box a">
    <h3 style="color: #ef4444;">A Takımı (Kırmızı)</h3>
    <ul>
      <li><b>KL:</b> Ahmet Çelebi</li>
      <li><b>STD:</b> Alper Eker</li>
      <li><b>SĞD:</b> Hıdır Ataman</li>
      <li><b>SLD:</b> Yakup Biçen</li>
      <li><b>OS:</b> Ömer Faruk Öz</li>
      <li><b>FV:</b> Ömer Eser</li>
      <li><b>FV:</b> Cengiz</li>
    </ul>
  </div>
  <div class="team-box b">
    <h3 style="color: #3b82f6;">B Takımı (Mavi)</h3>
    <ul>
      <li><b>KL:</b> Murat Akbudak</li>
      <li><b>STD:</b> Fatih Can</li>
      <li><b>SĞD:</b> Cihat Öztürk</li>
      <li><b>SLD:</b> Hanefi Oral</li>
      <li><b>OS:</b> Ahmet Bozkurt</li>
      <li><b>FV:</b> Ergin Tepe</li>
      <li><b>FV:</b> Yunus Bozkaya</li>
    </ul>
  </div>
</div>

</body>
</html>
