<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Akkurtcast Girişi</title>
    <link rel="icon" type="image/png" href="/static/img/icon.png">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <style>
        body { min-height: 100vh; background: #eef1f5; display: grid; place-items: center; }
        .login-panel { width: min(420px, 92vw); background: #fff; border: 1px solid #dde2e8; border-radius: 6px; }
        .login-logo { display: block; width: 220px; max-width: 80%; margin: 0 auto 18px; }
    
        /* Mobile shell fix: keep the sidebar from squeezing content on phones. */
        @media (max-width: 767px) {
            html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
            .container-fluid > .row.g-0 { display: block; width: 100%; margin: 0; }
            aside.sidebar,
            .sidebar {
                width: 100% !important;
                min-width: 0 !important;
                max-width: 100% !important;
                min-height: auto !important;
                height: auto !important;
                position: relative !important;
                top: auto !important;
                flex-direction: row !important;
                align-items: stretch;
                overflow-x: auto;
                overflow-y: hidden;
                white-space: nowrap;
                -webkit-overflow-scrolling: touch;
            }
            .brand { min-width: 188px; padding: 10px 12px !important; }
            .brand img { width: 40px !important; height: 40px !important; }
            .brand-name { font-size: 1rem !important; }
            .brand-subtitle { font-size: .55rem !important; letter-spacing: .9px !important; }
            .sidebar a { flex: 0 0 auto; padding: 12px 10px !important; }
            .sidebar a .nav-icon { width: 28px; height: 28px; min-width: 28px; }
            .sidebar-footer { display: flex; flex: 0 0 auto; }
            main.col,
            main[class*="col"] {
                display: block;
                width: 100% !important;
                max-width: 100% !important;
                flex: 0 0 100% !important;
                min-width: 0 !important;
            }
            .topbar { position: sticky; top: 0; z-index: 50; padding: 10px 14px !important; }
            .topbar-title { font-size: 1rem; }
            .topbar-status { font-size: .75rem; padding: 4px 9px; }
            main > .p-4 { padding: 14px !important; }
            .card-panel { border-radius: 10px; }
            .card-panel-header { align-items: flex-start; flex-direction: column; padding: 14px !important; }
            .card-panel-header > .d-flex,
            .card-panel-header .d-flex { flex-wrap: wrap; }
            .card-panel-body { padding: 14px !important; }
            .broadcast-controls { display: grid !important; grid-template-columns: 1fr; gap: 10px; }
            .broadcast-controls .action-btn { width: 100%; min-height: 44px; }
            .stream-row,
            .stream-actions { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; }
            .stream-url,
            .stream-row a { max-width: 100%; overflow-wrap: anywhere; word-break: break-word; }
            .history-item { align-items: flex-start; }
            .history-time { margin-left: 0; white-space: normal; }
            .now-playing-card { padding: 16px !important; }
            .next-track-box .next-path { white-space: normal; overflow-wrap: anywhere; }
        }
    </style>
</head>
<body>
    <main class="login-panel p-4">
        <img class="login-logo" src="/static/img/akkurtcast-logo.png" alt="Akkurtcast">
        <h1 class="h4 mb-3">Akkurtcast</h1>
        {% if hata %}<div class="alert alert-danger py-2">{{ hata }}</div>{% endif %}
        <form method="post" class="vstack gap-3">
            <div>
                <label class="form-label">Kullanıcı adı</label>
                <input class="form-control" name="username" autocomplete="username" required>
            </div>
            <div>
                <label class="form-label">Şifre</label>
                <input class="form-control" type="password" name="password" autocomplete="current-password" required>
            </div>
            <button class="btn btn-primary w-100">Giriş yap</button>
        </form>
    </main>
</body>
</html>








