<!doctype html>
<html lang="tr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>OnSarj — Yakında</title>
<meta name="description" content="OnSarj yenileniyor. Türkiye'nin elektrikli araç şarj istasyonu haritası çok yakında.">
<meta name="robots" content="noindex, nofollow">
<meta name="theme-color" content="#16a34a" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#0a0f0d" media="(prefers-color-scheme: dark)">
<link rel="icon" href="/icons/favicon-96x96.png">
<link rel="apple-touch-icon" href="/icons/apple-touch-icon.png">
<style>
  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; height: 100%; }

  :root {
    --bg: #ffffff;
    --bg-glow: rgba(34, 197, 94, 0.10);
    --fg: #0f172a;
    --muted: #64748b;
    --line: rgba(15, 23, 42, 0.08);
    --green: #16a34a;
    --ring-track: rgba(15, 23, 42, 0.07);
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #0a0f0d;
      --bg-glow: rgba(34, 197, 94, 0.14);
      --fg: #f1f5f9;
      --muted: #8b9bab;
      --line: rgba(255, 255, 255, 0.10);
      --green: #22c55e;
      --ring-track: rgba(255, 255, 255, 0.09);
    }
  }

  body {
    background: var(--bg);
    color: var(--fg);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    -webkit-font-smoothing: antialiased;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    position: relative;
    overflow: hidden;
  }

  /* Arka planda yumuşak yeşil hâle */
  body::before {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: min(120vw, 900px);
    height: min(120vw, 900px);
    transform: translate(-50%, -58%);
    background: radial-gradient(circle, var(--bg-glow) 0%, transparent 62%);
    pointer-events: none;
  }

  main {
    position: relative;
    text-align: center;
    max-width: 460px;
    animation: rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  @keyframes rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
  }

  /* ── Logo + şarj halkası ── */
  .mark {
    position: relative;
    width: 132px;
    height: 132px;
    margin: 0 auto 30px;
  }
  .mark svg { display: block; width: 100%; height: 100%; }

  .tile { filter: drop-shadow(0 12px 28px rgba(21, 128, 61, 0.28)); }

  .ring-track { stroke: var(--ring-track); }

  .ring-fill {
    stroke: var(--green);
    stroke-linecap: round;
    stroke-dasharray: 351.9;          /* 2πr, r = 56 */
    stroke-dashoffset: 351.9;
    transform: rotate(-90deg);
    transform-origin: 64px 64px;
    animation: charge 3.4s ease-in-out infinite;
  }
  @keyframes charge {
    0%        { stroke-dashoffset: 351.9; opacity: 0.85; }
    62%       { stroke-dashoffset: 0;     opacity: 1; }
    82%, 100% { stroke-dashoffset: 0;     opacity: 0; }
  }

  .bolt { animation: flicker 3.4s ease-in-out infinite; transform-origin: center; }
  @keyframes flicker {
    0%, 45% { opacity: 0.82; }
    64%     { opacity: 1; }
    88%,100%{ opacity: 0.82; }
  }

  /* ── Tipografi ── */
  h1 {
    margin: 0 0 8px;
    font-size: clamp(30px, 7vw, 40px);
    font-weight: 800;
    letter-spacing: -0.9px;
    line-height: 1.1;
  }
  h1 .accent { color: var(--green); }

  .tagline {
    margin: 0 0 30px;
    font-size: 13px;
    font-weight: 500;
    color: var(--muted);
    letter-spacing: 0.2px;
  }

  .divider {
    width: 44px;
    height: 1px;
    margin: 0 auto 28px;
    background: var(--line);
  }

  .message {
    margin: 0;
    font-size: clamp(15px, 3.6vw, 16.5px);
    line-height: 1.65;
    color: var(--muted);
  }
  .message strong { color: var(--fg); font-weight: 600; }

  footer {
    margin-top: 40px;
    font-size: 12px;
    color: var(--muted);
    opacity: 0.72;
  }

  @media (prefers-reduced-motion: reduce) {
    main { animation: none; }
    .ring-fill { animation: none; stroke-dashoffset: 0; }
    .bolt { animation: none; opacity: 1; }
  }
</style>
</head>
<body>
  <main>
    <div class="mark">
      <svg viewBox="0 0 128 128" role="img" aria-label="OnSarj">
        <defs>
          <linearGradient id="tile" x1="0" y1="0" x2="128" y2="128" gradientUnits="userSpaceOnUse">
            <stop offset="0%" stop-color="#22c55e"/>
            <stop offset="100%" stop-color="#15803d"/>
          </linearGradient>
        </defs>

        <!-- şarj halkası -->
        <circle class="ring-track" cx="64" cy="64" r="56" fill="none" stroke-width="3"/>
        <circle class="ring-fill"  cx="64" cy="64" r="56" fill="none" stroke-width="3"/>

        <!-- logo -->
        <g class="tile">
          <rect x="20" y="20" width="88" height="88" rx="20" fill="url(#tile)"/>
          <path class="bolt" d="M69.5 40L55 65.5h11.5L63 91l21.5-31.5H71l4-19.5z" fill="#fff"/>
        </g>
      </svg>
    </div>

    <h1>On<span class="accent">Sarj</span></h1>
    <p class="tagline">Şarjın açık adresi</p>

    <div class="divider"></div>

    <p class="message">
      Sistemimizi baştan aşağı <strong>yeniliyoruz</strong>.<br>
      Türkiye'nin şarj istasyonu haritası çok yakında burada.
    </p>

    <footer>onsarj.com</footer>
  </main>
</body>
</html>
