<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bakım Çalışması — Markamama Kariyer</title>
    <style>
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background: #fafafa;
            color: #374151;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 2rem 1rem;
        }

        .card {
            background: #fff;
            border-radius: 1.25rem;
            box-shadow: 0 4px 24px rgba(0,0,0,.07);
            padding: 3rem 2.5rem;
            max-width: 480px;
            width: 100%;
            text-align: center;
        }

        /* Logo alanı */
        .logo-wrap {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #fff7ed;
            border-radius: 50%;
            width: 80px;
            height: 80px;
            margin-bottom: 1.75rem;
        }

        .logo-wrap svg {
            width: 40px;
            height: 40px;
            color: #f97316;
        }

        /* Animasyonlu dişli */
        @keyframes spin-slow {
            from { transform: rotate(0deg); }
            to   { transform: rotate(360deg); }
        }
        .gear-spin {
            animation: spin-slow 6s linear infinite;
            transform-origin: center;
        }

        h1 {
            font-size: 1.5rem;
            font-weight: 700;
            color: #111827;
            margin-bottom: .5rem;
        }

        .brand {
            color: #f97316;
        }

        .subtitle {
            font-size: .95rem;
            color: #6b7280;
            line-height: 1.6;
            margin-bottom: 2rem;
        }

        /* İlerleme çubuğu animasyonu */
        @keyframes progress {
            0%   { width: 5%; }
            50%  { width: 75%; }
            100% { width: 5%; }
        }
        .progress-bar-wrap {
            background: #f3f4f6;
            border-radius: 9999px;
            height: 6px;
            overflow: hidden;
            margin-bottom: 2rem;
        }
        .progress-bar {
            height: 100%;
            background: linear-gradient(90deg, #f97316, #fb923c);
            border-radius: 9999px;
            animation: progress 3s ease-in-out infinite;
        }

        .info-box {
            background: #fff7ed;
            border: 1px solid #fed7aa;
            border-radius: .75rem;
            padding: 1rem 1.25rem;
            text-align: left;
            margin-bottom: 1.75rem;
        }
        .info-box p {
            font-size: .85rem;
            color: #c2410c;
            line-height: 1.6;
        }
        .info-box strong {
            color: #9a3412;
        }

        .footer-note {
            font-size: .8rem;
            color: #9ca3af;
        }
        .footer-note a {
            color: #f97316;
            text-decoration: none;
        }
        .footer-note a:hover {
            text-decoration: underline;
        }

        @media (max-width: 480px) {
            .card { padding: 2rem 1.5rem; }
            h1 { font-size: 1.25rem; }
        }
    </style>
</head>
<body>

    <div class="card">

        {{-- Dişli ikonu --}}
        <div class="logo-wrap">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                <g class="gear-spin">
                    <path d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
                    <path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                </g>
            </svg>
        </div>

        <h1>Bakım Çalışması Yapılıyor</h1>
        <p class="subtitle">
            <span class="brand">Markamama Kariyer</span> şu an kısa süreli bir bakım çalışması nedeniyle geçici olarak erişime kapalıdır.<br>
            En kısa sürede geri döneceğiz.
        </p>

        {{-- Animasyonlu ilerleme çubuğu --}}
        <div class="progress-bar-wrap">
            <div class="progress-bar"></div>
        </div>

        <div class="info-box">
            <p>
                <strong>Ne yapıyoruz?</strong><br>
                Sistemi daha iyi hale getirmek için güncelleme ve iyileştirme çalışmaları yürütüyoruz.
                Kısa bir süre sonra tekrar ziyaret edebilirsiniz.
            </p>
        </div>

        <p class="footer-note">
            Sorularınız için <a href="mailto:kariyer@markamama.com">kariyer@markamama.com</a> adresine yazabilirsiniz.
        </p>

    </div>

</body>
</html>