#cirolig-harita {
    --ch-yesil: #0e9f7e; --ch-yesil-acik: #d9efe8; --ch-altin: #b7791f; --ch-altin-acik: #fdf3dc;
    --ch-kenar: #c9ced6; --ch-metin: #2b2f36; --ch-soluk: #8a919c; --ch-zemin: #ffffff; --ch-harita: #f6f7f9;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--ch-metin);
    width: 100%; margin: 0 auto; background: var(--ch-zemin); border: 1px solid var(--bs-border-color, #e3e6ea);
    border-radius: 8px; overflow: hidden; box-sizing: border-box;
  }
  #cirolig-harita * { box-sizing: border-box; }
  #cirolig-harita .ch-canli {
    display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
    padding: 5px 9px; border-radius: 4px; background: #217f7d; color: #fff;
    font-size: 12px; font-weight: 600; line-height: 16px; letter-spacing: 0;
  }
  #cirolig-harita .ch-canli-nokta {
    width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: currentColor;
    animation: ch-canli-nabiz 2s ease-in-out infinite;
  }
  @keyframes ch-canli-nabiz { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
  #cirolig-harita .ch-baslik { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center;
    padding: 14px 18px; font-weight: 700; font-size: 16px; border-bottom: 1px solid #eceef1; }
  #cirolig-harita .ch-tekrar { font: inherit; font-size: 12px; font-weight: 600; color: var(--ch-yesil);
    display: inline-flex; align-items: center; gap: 5px;
    background: none; border: 1px solid #cfe9e1; border-radius: 6px; padding: 5px 10px; min-height: 36px; cursor: pointer; }
  #cirolig-harita .ch-tekrar:hover { background: var(--ch-yesil-acik); }
  #cirolig-harita .ch-alan { position: relative; background: var(--ch-harita); padding: 8px; }
  #cirolig-harita svg { display: block; width: 100%; height: auto; overflow: visible; }
  #cirolig-harita .ch-il { fill: #fff; stroke: var(--ch-kenar); stroke-width: .6; stroke-linejoin: round;
    transition: fill .6s ease; }
  #cirolig-harita .ch-il.aktif { fill: var(--ch-yesil-acik); }
  #cirolig-harita .ch-hat { fill: none; stroke: var(--ch-yesil); stroke-width: 2; stroke-dasharray: 6 6;
    stroke-linecap: round; }
  #cirolig-harita.oynuyor .ch-hat.akis { animation: ch-akis 1.2s linear infinite; }
  @keyframes ch-akis { to { stroke-dashoffset: -12; } }
  #cirolig-harita .ch-nokta { fill: var(--ch-yesil); opacity: 0; }
  #cirolig-harita .ch-isaret { opacity: 0; transform-box: fill-box; transform-origin: center; }
  #cirolig-harita .ch-isaret.gorunur { animation: ch-pop .55s cubic-bezier(.34,1.56,.64,1) forwards; }
  @keyframes ch-pop { 0% { opacity: 0; transform: scale(.2); } 100% { opacity: 1; transform: scale(1); } }
  #cirolig-harita .ch-halka { fill: #fff; stroke-width: 3; }
  #cirolig-harita .ch-nabiz { fill: none; stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
  #cirolig-harita .ch-isaret.gorunur .ch-nabiz { animation: ch-nabiz 2.4s ease-out .6s infinite; }
  @keyframes ch-nabiz { 0% { opacity: .55; transform: scale(1); } 70%,100% { opacity: 0; transform: scale(1.9); } }
  #cirolig-harita .ch-sayi { font-size: 13px; font-weight: 700; text-anchor: middle; dominant-baseline: central; }
  #cirolig-harita .ch-ad { font-size: 12.5px; font-weight: 600; text-anchor: middle; fill: var(--ch-metin);
    paint-order: stroke; stroke: var(--ch-harita); stroke-width: 3px; stroke-linejoin: round; }
  #cirolig-harita .ch-rozet-zemin { fill: #fff; stroke-width: 1.3; }
  #cirolig-harita .ch-kupa rect { fill: var(--ch-altin-acik); stroke: #ecc56d; stroke-width: 1; }
  #cirolig-harita .ch-kupa text { font-size: 11px; font-weight: 700; fill: var(--ch-altin); dominant-baseline: central; }
  @media (max-width: 640px) {
    #cirolig-harita .ch-tekrar { min-height: 44px; }
  }
  [data-bs-theme="dark"] #cirolig-harita {
    --ch-yesil: #67cfb3; --ch-yesil-acik: #24483f; --ch-altin: #e1b45d; --ch-altin-acik: #4b3f27;
    --ch-kenar: #697188; --ch-metin: #e5e7ef; --ch-soluk: #afb5c7; --ch-zemin: #30334e; --ch-harita: #282b41;
  }
  [data-bs-theme="dark"] #cirolig-harita .ch-il:not(.aktif),
  [data-bs-theme="dark"] #cirolig-harita .ch-halka,
  [data-bs-theme="dark"] #cirolig-harita .ch-rozet-zemin { fill: var(--ch-zemin); }
  [data-bs-theme="dark"] #cirolig-harita .ch-sayi { fill: var(--ch-metin); }
  @media (prefers-reduced-motion: reduce) {
    #cirolig-harita *, #cirolig-harita *::before { animation: none !important; transition: none !important; }
    #cirolig-harita .ch-isaret { opacity: 1; }
  }