/* Üyelik / admin alanı — style.css'teki :root değişkenlerini kullanır. */

.app-body {
    background: var(--bg);
    min-height: 100vh;
}

.app-nav-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-left: auto;
}

.app-nav-user {
    color: var(--text-light);
    font-size: 0.9rem;
}

.app-nav-link {
    color: var(--text);
    font-weight: 600;
    text-decoration: none;
    font-size: 0.92rem;
}

.app-nav-link:hover { color: var(--primary); }

.app-nav-cta {
    padding: 8px 18px !important;
    font-size: 0.92rem;
}

.app-main {
    /* .navbar (style.css) fixed ve 68px yüksekliğinde — üstüne çıkmasın diye yeterli boşluk */
    padding: 108px 0 80px;
}

.app-container { max-width: 960px; }

.app-alert {
    padding: 14px 18px;
    border-radius: var(--radius-sm);
    margin-bottom: 24px;
    font-size: 0.95rem;
    font-weight: 500;
}
.app-alert-error   { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.app-alert-success { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.app-alert-info    { background: var(--primary-light); color: var(--primary-dark); border: 1px solid #bfdbfe; }

.app-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 32px;
    margin-bottom: 28px;
}

.app-card h1, .app-card h2 { margin-top: 0; color: var(--dark); }

.app-form-row { margin-bottom: 18px; }

.app-form-row label {
    display: block;
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--text);
    margin-bottom: 6px;
}

.app-form-row input[type="text"],
.app-form-row input[type="email"],
.app-form-row input[type="password"],
.app-form-row input[type="tel"],
.app-form-row input[type="date"],
.app-form-row input[type="number"],
.app-form-row select,
.app-form-row textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    font-family: inherit;
    box-sizing: border-box;
}

.app-form-row input:focus,
.app-form-row select:focus,
.app-form-row textarea:focus {
    outline: none;
    border-color: var(--primary);
}

.app-form-hint { font-size: 0.82rem; color: var(--text-light); margin-top: 4px; }

.app-btn {
    display: inline-block;
    background: var(--primary);
    color: #fff;
    border: none;
    padding: 12px 24px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    text-decoration: none;
}
.app-btn:hover { background: var(--primary-dark); }
.app-btn-sm { padding: 7px 14px; font-size: 0.85rem; }
.app-btn-danger { background: #dc2626; }
.app-btn-danger:hover { background: #b91c1c; }
.app-btn-outline {
    background: transparent;
    color: var(--primary);
    border: 1px solid var(--primary);
}
.app-btn-outline:hover { background: var(--primary-light); }

.app-muted-link { color: var(--text-light); font-size: 0.88rem; }

.app-table-wrap { overflow-x: auto; }
.app-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.app-table th, .app-table td {
    text-align: left;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.app-table th { color: var(--text-light); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; }

.app-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 100px;
    font-size: 0.76rem;
    font-weight: 700;
}
.app-badge-pending   { background: #fef3c7; color: #92400e; }
.app-badge-approved,
.app-badge-active    { background: #dcfce7; color: #166534; }
.app-badge-rejected,
.app-badge-cancelled { background: #fee2e2; color: #991b1b; }
.app-badge-expired   { background: #f1f5f9; color: #475569; }
.app-badge-manual    { background: var(--primary-light); color: var(--primary-dark); }
.app-badge-api       { background: #ede9fe; color: #5b21b6; }

.app-pkg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 18px;
    margin: 20px 0;
}
.app-pkg-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    text-align: center;
}
.app-pkg-card.popular { border-color: var(--accent); }
.app-pkg-name { font-weight: 700; color: var(--dark); }
.app-pkg-price { font-size: 1.6rem; font-weight: 800; color: var(--primary); margin: 8px 0; }
.app-pkg-meta { color: var(--text-light); font-size: 0.82rem; margin-bottom: 14px; }

.app-tabs { display: flex; gap: 10px; margin-bottom: 20px; }
.app-tab {
    padding: 8px 18px;
    border-radius: 100px;
    border: 1px solid var(--border);
    background: var(--white);
    font-weight: 600;
    cursor: pointer;
    font-size: 0.88rem;
}
.app-tab.active { background: var(--primary); color: #fff; border-color: var(--primary); }

.app-stat-row { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 28px; }
.app-stat {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 26px;
    flex: 1;
    min-width: 160px;
}
.app-stat-num { font-size: 1.8rem; font-weight: 800; color: var(--primary); }
.app-stat-label { color: var(--text-light); font-size: 0.85rem; }

.app-admin-menu { display: flex; gap: 10px; margin-bottom: 28px; flex-wrap: wrap; }