
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="robots" content="noindex, nofollow" />
  <meta name="theme-color" content="#0b0b0c" />
  <title>Politics of the Plate — Maintenance</title>
  <style>
    :root{
      --bg:#0b0b0c;
      --card:#121214;
      --text:#f4f4f5;
      --muted:#a1a1aa;
      --line:rgba(255,255,255,.10);
      --accent:#f59e0b;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      background:
        radial-gradient(900px 500px at 10% 10%, rgba(245,158,11,.14), transparent 55%),
        radial-gradient(900px 500px at 90% 20%, rgba(59,130,246,.10), transparent 60%),
        radial-gradient(1000px 700px at 50% 100%, rgba(16,185,129,.08), transparent 55%),
        var(--bg);
      color:var(--text);
      display:flex;
      align-items:center;
      justify-content:center;
      padding:24px;
    }
    .wrap{width:min(920px,100%)}
    .card{
      background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
      border:1px solid var(--line);
      border-radius:18px;
      box-shadow: 0 18px 60px rgba(0,0,0,.45);
      overflow:hidden;
    }
    header{
      padding:26px 26px 18px;
      display:flex;
      gap:14px;
      align-items:center;
      border-bottom:1px solid var(--line);
      background:rgba(0,0,0,.18);
    }
    .badge{
      width:42px;height:42px;border-radius:12px;
      display:grid;place-items:center;
      background:rgba(245,158,11,.14);
      border:1px solid rgba(245,158,11,.25);
      flex:0 0 auto;
    }
    .badge svg{width:22px;height:22px;fill:var(--accent)}
    .brand{line-height:1.15}
    .brand h1{margin:0;font-size:18px;font-weight:700;letter-spacing:.2px}
    .brand p{margin:4px 0 0;color:var(--muted);font-size:13px}
    main{padding:26px}
    h2{
      margin:0 0 10px;
      font-size:34px;
      letter-spacing:-.5px;
    }
    .lead{margin:0 0 18px;color:var(--muted);font-size:16px;max-width:70ch}
    .grid{
      display:grid;
      grid-template-columns: 1.2fr .8fr;
      gap:18px;
      margin-top:18px;
    }
    .panel{
      border:1px solid var(--line);
      border-radius:16px;
      padding:18px;
      background:rgba(0,0,0,.18);
    }
    .panel h3{margin:0 0 8px;font-size:14px;letter-spacing:.3px;text-transform:uppercase;color:#e4e4e7}
    .panel p{margin:0;color:var(--muted);font-size:14px;line-height:1.6}
    .status{
      display:flex;
      gap:10px;
      align-items:center;
      margin-top:12px;
      padding-top:12px;
      border-top:1px dashed var(--line);
      color:var(--muted);
      font-size:13px;
    }
    .dot{
      width:10px;height:10px;border-radius:999px;
      background:var(--accent);
      box-shadow:0 0 0 6px rgba(245,158,11,.10);
      flex:0 0 auto;
    }
    .cta{
      margin-top:14px;
      display:flex;
      flex-wrap:wrap;
      gap:10px;
    }
    .btn{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:10px 12px;
      border-radius:12px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.03);
      color:var(--text);
      text-decoration:none;
      font-size:14px;
      transition:transform .08s ease, background .15s ease, border-color .15s ease;
    }
    .btn:hover{
      background:rgba(255,255,255,.06);
      border-color:rgba(255,255,255,.18);
      transform:translateY(-1px);
    }
    .btn svg{width:16px;height:16px;fill:currentColor;opacity:.9}
    footer{
      padding:18px 26px;
      border-top:1px solid var(--line);
      color:var(--muted);
      font-size:12px;
      display:flex;
      justify-content:space-between;
      gap:10px;
      flex-wrap:wrap;
      background:rgba(0,0,0,.14);
    }
    .mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}
    @media (max-width: 820px){
      .grid{grid-template-columns:1fr}
      h2{font-size:30px}
    }
  </style>
</head>

<body>
  <div class="wrap">
    <div class="card" role="region" aria-label="Maintenance notice">
      <header>
        <div class="badge" aria-hidden="true">
          <svg viewBox="0 0 24 24" aria-hidden="true">
            <path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2Zm1 5v6h-2V7Zm0 10v2h-2v-2Z"/>
          </svg>
        </div>
        <div class="brand">
          <h1>Politics of the Plate</h1>
          <p class="mono">politicsoftheplate.com</p>
        </div>
      </header>

      <main>
        <h2>We’ll be back soon.</h2>
        <p class="lead">
          Politics of the Plate is currently undergoing scheduled maintenance.
          We’re making improvements to performance, security, and content. Thank you for your patience.
        </p>

        <div class="grid">
          <section class="panel">
            <h3>What’s happening?</h3>
            <p>
              We’re updating the site and running checks to ensure everything works smoothly.
              During this time, some pages may be unavailable.
            </p>
            <div class="status">
              <span class="dot" aria-hidden="true"></span>
              <span>Maintenance status: <strong>In progress</strong></span>
            </div>

            <div class="cta" aria-label="Actions">
              <a class="btn" href="/" aria-label="Try again">
                <svg viewBox="0 0 24 24" aria-hidden="true">
                  <path d="M12 6V3L8 7l4 4V8c2.76 0 5 2.24 5 5a5 5 0 0 1-9.9 1H5.02A7 7 0 0 0 19 13c0-3.87-3.13-7-7-7Z"/>
                </svg>
                Refresh
              </a>

              <!-- Ganti alamat email di bawah jika ada -->
              <a class="btn" href="/cdn-cgi/l/email-protection#60030f0e1401031420100f0c09140903130f06140805100c0114054e030f0d" aria-label="Contact us by email">
                <svg viewBox="0 0 24 24" aria-hidden="true">
                  <path d="M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2Zm0 4-8 5L4 8V6l8 5 8-5Z"/>
                </svg>
                Contact
              </a>
            </div>
          </section>

          <aside class="panel">
            <h3>Quick info</h3>
            <p>
              You can bookmark this page and check back shortly.
              If you manage the site, you can replace this file when the update is complete.
            </p>
            <div class="status">
              <span class="mono">Tip:</span>
              <span>Set a temporary 503 response for best SEO.</span>
            </div>
          </aside>
        </div>
      </main>

      <footer>
        <div>© <span id="y"></span> Politics of the Plate</div>
        <div class="mono">Status: maintenance</div>
      </footer>
    </div>
  </div>

  <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script>
    document.getElementById("y").textContent = new Date().getFullYear();
  </script>
</body>
</html>
