<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- Meta Tags -->
    <title>Akun Ditangguhkan - AnymHost</title>
    <meta name="description" content="Akun hosting ini telah ditangguhkan. Silakan hubungi support untuk informasi lebih lanjut.">
    <meta name="author" content="AnymHost">
    <meta name="robots" content="index, follow">
    <link rel="icon" href="https://kawaiihost.net/logo-anymhost-new.png" type="image/png">

    <!-- Styling -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" xintegrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <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 src="https://kawaiihost.net/logo-anymhost-new.png" alt="AnymHost Logo" class="logo">
        <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 href="https://anymhost.id/blog/panduan-memperpanjang-masa-aktif-layanan-anymhost/" class="btn primary">
                        <i class="fas fa-file-invoice-dollar"></i>
                        <span>Bayar Tagihan</span>
                    </a>
                    <a href="https://wa.me/anymhost" class="btn secondary">
                        <i class="fas fa-life-ring"></i>
                        <span>Hubungi Support</span>
                    </a>
                </div>
            </div>
            <div class="character-panel">
                <img src="https://kawaiihost.net/anymchan-suspend.png" alt="Karakter Akun Ditangguhkan" class="character-image" onerror="this.style.display='none'">
            </div>
        </div>
    </main>

    <footer class="page-footer">
        <p>&copy; <span id="current-year"></span> <a style="color: inherit;text-decoration: none;" href="https://anymhost.id">AnymHost.</a> | Dibuat dengan <span style="color: var(--accent-red);">♥</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>
