<!DOCTYPE html>
<html lang="id">
    <head>
        <meta charset="utf-8">
        <meta content="width=device-width, initial-scale=1.0" name="viewport">
        <!-- Meta Tags -->
        <title>
   Akun Ditangguhkan - AnymHost
        </title>
        <meta content="Akun hosting ini telah ditangguhkan. Silakan hubungi support untuk informasi lebih lanjut." name="description">
        <meta content="AnymHost" name="author">
        <meta content="index, follow" name="robots">
        <link href="https://kawaiihost.net/logo-anymhost-new.png" rel="icon" type="image/png">
        <!-- Styling -->
        <link href="https://fonts.googleapis.com" rel="preconnect">
        <link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect">
        <link href="https://fonts.googleapis.com/css2?family=Archivo+Black&amp;family=Space+Mono:wght@400;700&amp;display=swap" rel="stylesheet">
        <link crossorigin="anonymous" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" referrerpolicy="no-referrer" rel="stylesheet" xintegrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==">
        <style>
            :root {
                --bg-color          : #f1f5f9;
                --border-color      : #1e293b;
                --accent-red        : #ef4444;
                --accent-blue       : #3b82f6;
                --panel-bg          : #ffffff;
                --text-color        : #1e293b;
                --text-light        : #64748b;
                --font-display      : "Archivo Black", sans-serif;
                --font-mono         : "Space Mono", monospace;
            }
            * {
                box-sizing          : border-box;
                margin              : 0;
                padding             : 0;
            }
            html, body {
                height              : 100%;
            }
            body {
                background-color    : var(--bg-color);
                color               : var(--text-color);
                font-family         : var(--font-mono);
                display             : flex;
                flex-direction      : column;
                overflow-x          : hidden;
            }
            .page-main {
                flex-grow           : 1;
                display             : flex;
                justify-content     : center;
                align-items         : center;
                padding             : 2rem;
            }
            .page-header {
                display             : flex;
                justify-content     : space-between;
                align-items         : center;
                padding             : 1rem 2rem;
                border-bottom       : 3px solid var(--border-color);
                background-color    : var(--panel-bg);
                width               : 100%;
                flex-shrink         : 0;
            }
            .logo {
                max-width           : 180px;
                height              : auto;
            }
            .status-badge {
                display             : flex;
                align-items         : center;
                gap                 : 0.75rem;
                background-color    : var(--accent-red);
                color               : var(--panel-bg);
                padding             : 0.5rem 1rem;
                border              : 3px solid var(--border-color);
                border-radius       : 4px;
                font-size           : 0.9rem;
                font-weight         : 700;
                font-family         : var(--font-display);
            }
            /* Main Layout */
            .main-layout {
                display             : grid;
                grid-template-columns: 1fr;
                gap                 : 2rem;
                align-items         : center;
                width               : 100%;
                max-width           : 1100px;
            }
            @media (min-width: 992px) {
                .main-layout {
                    grid-template-columns: 1fr 1fr; /* Two equal columns */
                }
            }
            .content-column {
                text-align          : left;
            }
            .character-panel {
                background-color    : var(--panel-bg);
                border              : 3px solid var(--border-color);
                box-shadow          : 8px 8px 0px var(--border-color);
                padding             : 2rem 1rem 0 1rem;
                border-radius       : 4px;
                display             : flex;
                justify-content     : center;
                align-items         : flex-end;
                height              : 100%;
            }
            .character-image {
                width               : 100%;
                max-width           : 350px;
                height              : auto;
                display             : block;
            }
            .title {
                font-family         : var(--font-display);
                font-size           : clamp(2.5rem, 8vw, 3.5rem);
                text-transform      : uppercase;
                line-height         : 1.2;
                margin              : 0 0 1rem 0;
                letter-spacing      : 1px;
                color               : var(--accent-red);
            }
            .suspend-text {
                font-size           : 1.1rem;
                color               : var(--text-light);
                margin-bottom       : 2rem;
                line-height         : 1.6;
                max-width           : 50ch;
            }
            .reference-code {
                background          : var(--bg-color);
                border              : 2px dashed var(--text-light);
                padding             : 1rem;
                margin-bottom       : 2.5rem;
                font-size           : 1rem;
                text-align          : center;
            }
            .cta-container {
                display             : grid;
                grid-template-columns: 1fr;
                gap                 : 1rem;
            }
            @media (min-width: 600px) {
                .cta-container {
                    grid-template-columns: 1fr 1fr;
                }
            }
            .btn {
                display             : flex;
                align-items         : center;
                justify-content     : center;
                gap                 : 0.75rem;
                width               : 100%;
                border              : 3px solid var(--border-color);
                box-shadow          : 8px 8px 0px var(--border-color);
                font-family         : var(--font-display);
                font-size           : 1rem;
                text-decoration     : none;
                padding             : 1rem;
                cursor              : pointer;
                transition          : all 0.2s ease-in-out;
                text-align          : center;
            }
            .btn.primary {
                background          : var(--accent-blue);
                color               : var(--panel-bg);
            }
            .btn.secondary {
                background          : var(--panel-bg);
                color               : var(--text-color);
            }
            .btn:hover, .btn:focus {
                transform           : translate(-4px, -4px);
            }
            .btn.primary:hover {
                box-shadow          : 8px 8px 0px var(--accent-blue);
            }
            .btn.secondary:hover {
                box-shadow          : 8px 8px 0px var(--text-light);
            }
            .btn:active {
                transform           : translate(4px, 4px);
            }
            .btn.primary:active {
                box-shadow          : 4px 4px 0px var(--accent-blue);
            }
            .btn.secondary:active {
                box-shadow          : 4px 4px 0px var(--text-light);
            }
            .page-footer {
                padding             : 1.5rem 2rem;
                border-top          : 3px solid var(--border-color);
                text-align          : center;
                font-size           : 0.9rem;
                background-color    : var(--panel-bg);
                flex-shrink         : 0;
            }
            .page-footer a {
                color               : var(--accent-blue);
                font-weight         : 700;
            }
            .page-footer a:hover {
                text-decoration     : none;
            }
            /* Responsive Adjustments */
            @media (max-width: 991px) {
                .content-column {
                    order               : 2;
                    text-align          : center;
                }
                .character-panel {
                    order               : 1;
                    padding             : 1rem 1rem 0 1rem;
                }
                .suspend-text {
                    margin-left         : auto;
                    margin-right        : auto;
                }
            }
            @media (max-width: 767px) {
                .page-main {
                    padding             : 1.5rem 1rem;
                }
                .title {
                    font-size           : clamp(2rem, 8vw, 2.5rem);
                }
                .suspend-text {
                    font-size           : 1rem;
                }
            }
            @media (max-width: 600px) {
                .page-header {
                    flex-direction      : column;
                    gap                 : 1rem;
                    padding             : 1.5rem 1rem;
                }
            }
        </style>
    </head>
    <body>
        <header class="page-header">
            <img alt="AnymHost Logo" class="logo" src="https://kawaiihost.net/logo-anymhost-new.png">
            <div class="status-badge">
                <i class="fas fa-times-circle">
                </i>
                <span>
                    DITANGGUHKAN
                </span>
            </div>
        </header>
        <main class="page-main">
            <div class="main-layout">
                <div class="content-column">
                    <h1 class="title">
                        AKUN ANDA DITANGGUHKAN
                    </h1>
                    <p class="suspend-text">
                        Akses ke situs ini dibatasi untuk sementara. Jika Anda adalah pemilik, silakan periksa status tagihan Anda atau hubungi tim support untuk bantuan lebih lanjut.
                    </p>
                    <div class="reference-code">
                        <p>
                            Jika menghubungi support, mohon sertakan:
                            <br>
                            <strong>
                                <span id="suspended-domain">
                                </span>
                            </strong>
                        </p>
                    </div>
                    <div class="cta-container">
                        <a class="btn primary" href="https://anymhost.id/blog/panduan-memperpanjang-masa-aktif-layanan-anymhost/">
                            <i class="fas fa-file-invoice-dollar">
                            </i>
                            <span>
                                Bayar Tagihan
                            </span>
                        </a>
                        <a class="btn secondary" href="https://wa.me/anymhost">
                            <i class="fas fa-life-ring">
                            </i>
                            <span>
                                Hubungi Support
                            </span>
                        </a>
                    </div>
                </div>
                <div class="character-panel">
                    <img alt="Karakter Akun Ditangguhkan" class="character-image" onerror="this.style.display='none'" src="https://kawaiihost.net/anymchan-suspend.png">
                </div>
            </div>
        </main>
        <footer class="page-footer">
            <p>
                &copy;
                <span id="current-year">
                </span>
                <a href="https://anymhost.id" style="color: inherit;text-decoration: none;">
                    AnymHost.
                </a>
                | Dibuat dengan
                <span style="color: var(--accent-red);">
                    &acirc;™&yen;
                </span>
                di Surabaya, Indonesia
            </p>
        </footer>
        <script>
            document.getElementById('current-year').textContent = new Date().getFullYear();
            document.getElementById('suspended-domain').textContent = window.location.hostname;
        </script>
    </body>
</html>