/* ═══════════════════════════════════════════════════
   Hakediş Hesaplama - Tasarım Sistemi
   Premium Dark Theme with Glassmorphism
   ═══════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ─── CSS Variables ─── */
:root {
    --bg-primary: #0a0e1a;
    --bg-secondary: #111827;
    --bg-card: rgba(17, 24, 39, 0.7);
    --bg-card-hover: rgba(31, 41, 55, 0.8);
    /* Cam yüzeyler ve iç paneller için taban renkler: tema değişince terslerine döner */
    --ink: 255, 255, 255;
    --shade: 0, 0, 0;
    --header-bg: rgba(10, 14, 26, 0.85);

    --bg-glass: rgba(255, 255, 255, 0.03);
    --bg-glass-hover: rgba(255, 255, 255, 0.06);

    --border-color: rgba(255, 255, 255, 0.06);
    --border-light: rgba(255, 255, 255, 0.1);
    --border-accent: rgba(99, 102, 241, 0.3);

    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --text-accent: #818cf8;

    --accent-indigo: #6366f1;
    --accent-indigo-light: #818cf8;
    --accent-violet: #8b5cf6;
    --accent-violet-light: #a78bfa;
    --accent-emerald: #10b981;
    --accent-emerald-light: #34d399;
    --accent-rose: #f43f5e;
    --accent-rose-light: #fb7185;
    --accent-amber: #f59e0b;
    --accent-amber-light: #fbbf24;
    --accent-cyan: #06b6d4;
    --accent-sky: #0ea5e9;

    --gradient-primary: linear-gradient(135deg, #6366f1, #8b5cf6);
    --gradient-success: linear-gradient(135deg, #10b981, #06b6d4);
    --gradient-warning: linear-gradient(135deg, #f59e0b, #f97316);
    --gradient-danger: linear-gradient(135deg, #f43f5e, #e11d48);
    --gradient-bg: linear-gradient(135deg, #0a0e1a 0%, #111827 50%, #0f172a 100%);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6);
    --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.15);

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;

    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── Reset & Base ─── */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 14px;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--gradient-bg);
    color: var(--text-primary);
    min-height: 100vh;
    line-height: 1.6;
    overflow-x: hidden;
}

/* ─── Background Animation ─── */
body::before {
    content: '';
    position: fixed;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background:
        radial-gradient(circle at 20% 50%, rgba(99, 102, 241, 0.04) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.04) 0%, transparent 50%),
        radial-gradient(circle at 40% 80%, rgba(16, 185, 129, 0.03) 0%, transparent 50%);
    animation: bgFloat 30s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes bgFloat {

    0%,
    100% {
        transform: translate(0, 0) rotate(0deg);
    }

    33% {
        transform: translate(2%, -2%) rotate(1deg);
    }

    66% {
        transform: translate(-1%, 1%) rotate(-1deg);
    }
}

/* ─── Header ─── */
.app-header {
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    background: var(--header-bg);
    border-bottom: 1px solid var(--border-color);
    padding: 0 2rem;
}

.header-content {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-icon {
    width: 36px;
    height: 36px;
    background: var(--gradient-primary);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
}

.logo-text {
    font-size: 1.25rem;
    font-weight: 700;
    background: linear-gradient(135deg, #f1f5f9, #818cf8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.02em;
}

/* ─── Navigation Tabs ─── */
.nav-tabs {
    display: flex;
    gap: 4px;
    background: rgba(var(--ink), 0.03);
    padding: 4px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.nav-tab,
.tool-btn {
    padding: 8px 20px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-normal);
    white-space: nowrap;
    position: relative;
}

.nav-tab:hover,
.tool-btn:hover {
    color: var(--text-primary);
    background: rgba(var(--ink), 0.05);
}

.nav-tab.active {
    color: var(--text-primary);
    background: var(--accent-indigo);
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
}

/* ─── Main Content ─── */
.main-content {
    position: relative;
    z-index: 1;
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
}

/* ─── Tab Panels ─── */
.tab-panel {
    display: none;
    animation: fadeSlideIn 0.4s ease;
}

.tab-panel.active {
    display: block;
}

@keyframes fadeSlideIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ─── Stats Cards ─── */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: var(--bg-card);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.stat-card.indigo::before {
    background: var(--gradient-primary);
}

.stat-card.emerald::before {
    background: var(--gradient-success);
}

.stat-card.amber::before {
    background: var(--gradient-warning);
}

.stat-card.rose::before {
    background: var(--gradient-danger);
}

.stat-card.violet::before {
    background: linear-gradient(135deg, #8b5cf6, #d946ef);
}

.stat-card:hover {
    transform: translateY(-2px);
    border-color: var(--border-light);
    box-shadow: var(--shadow-lg);
}

.stat-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.stat-value {
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.stat-card.indigo .stat-value {
    color: var(--accent-indigo-light);
}

.stat-card.emerald .stat-value {
    color: var(--accent-emerald-light);
}

.stat-card.amber .stat-value {
    color: var(--accent-amber-light);
}

.stat-card.rose .stat-value {
    color: var(--accent-rose-light);
}

.stat-card.violet .stat-value {
    color: var(--accent-violet-light);
}

/* ─── Cards / Panels ─── */
.card {
    background: var(--bg-card);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.card-title {
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-title .icon {
    font-size: 1.15rem;
}

.card-body {
    padding: 1.5rem;
}

/* ─── Forms ─── */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group.full-width {
    grid-column: 1 / -1;
}

.form-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.form-control {
    background: rgba(var(--ink), 0.04);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.9rem;
    transition: all var(--transition-fast);
    outline: none;
}

.form-control:focus {
    border-color: var(--accent-indigo);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
    background: rgba(var(--ink), 0.06);
}

.form-control:disabled {
    background: rgba(var(--ink), 0.02);
    border-color: rgba(var(--ink), 0.05);
    color: var(--text-primary);
    opacity: 1;
    -webkit-text-fill-color: var(--text-primary);
    cursor: not-allowed;
}

.form-control::placeholder {
    color: var(--text-muted);
}

select.form-control {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 20px;
    padding-right: 36px;
}

select.form-control option {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

/* ─── Buttons ─── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
    white-space: nowrap;
    text-decoration: none;
}

.btn-primary {
    background: var(--gradient-primary);
    color: white;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.35);
}

.btn-success {
    background: var(--gradient-success);
    color: white;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
}

.btn-success:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.35);
}

.btn-danger {
    background: transparent;
    color: var(--accent-rose);
    border: 1px solid rgba(244, 63, 94, 0.3);
    padding: 6px 12px;
    font-size: 0.8rem;
}

.btn-danger:hover {
    background: rgba(244, 63, 94, 0.1);
    border-color: var(--accent-rose);
}

.btn-ghost {
    background: rgba(var(--ink), 0.05);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.btn-ghost:hover {
    background: rgba(var(--ink), 0.08);
    color: var(--text-primary);
}

.btn-icon {
    padding: 8px;
    width: 36px;
    height: 36px;
}

/* ─── Tables ─── */
.table-wrapper {
    overflow-x: auto;
    border-radius: var(--radius-md);
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

thead th {
    background: rgba(var(--ink), 0.03);
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}

tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(var(--ink), 0.03);
    color: var(--text-secondary);
    vertical-align: middle;
}

tbody tr {
    transition: background var(--transition-fast);
}

tbody tr:hover {
    background: rgba(var(--ink), 0.02);
}

tbody tr:last-child td {
    border-bottom: none;
}

.text-right {
    text-align: right !important;
}

.text-center {
    text-align: center !important;
}

.amount {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

.amount.positive {
    color: var(--accent-emerald-light);
}

.amount.negative {
    color: var(--accent-rose-light);
}

/* ─── Badges ─── */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.badge-indigo {
    background: rgba(99, 102, 241, 0.15);
    color: var(--accent-indigo-light);
}

.badge-emerald {
    background: rgba(16, 185, 129, 0.15);
    color: var(--accent-emerald-light);
}

.badge-amber {
    background: rgba(245, 158, 11, 0.15);
    color: var(--accent-amber-light);
}

.badge-rose {
    background: rgba(244, 63, 94, 0.15);
    color: var(--accent-rose-light);
}

.badge-cyan {
    background: rgba(6, 182, 212, 0.15);
    color: var(--accent-cyan);
}

/* ─── Hakediş Person Cards ─── */
.hakedis-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

.hakedis-person-card {
    background: var(--bg-glass);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition-normal);
}

.hakedis-person-card:hover {
    border-color: var(--border-light);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.hakedis-person-card.firma-card {
    border-color: rgba(245, 158, 11, 0.2);
    background: rgba(245, 158, 11, 0.03);
}

.hakedis-person-card.firma-card:hover {
    border-color: rgba(245, 158, 11, 0.4);
}

.hakedis-person-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
}

.hakedis-person-name {
    font-weight: 700;
    font-size: 0.95rem;
}

.hakedis-person-total {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--accent-emerald-light);
    font-variant-numeric: tabular-nums;
}

.hakedis-person-details {
    padding: 0.75rem 1.25rem;
    max-height: 300px;
    overflow-y: auto;
}

.hakedis-detail-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid rgba(var(--ink), 0.02);
    font-size: 0.8rem;
}

.hakedis-detail-item:last-child {
    border-bottom: none;
}

.hakedis-detail-customer {
    color: var(--text-secondary);
    flex: 1;
}

.hakedis-detail-amount {
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    margin-left: 1rem;
}

/* ─── Modal ─── */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.modal-overlay.active {
    display: flex;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.modal {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 700px;
    max-height: 90vh;
    overflow-y: auto;
    animation: slideUp 0.3s ease;
    box-shadow: var(--shadow-xl);
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.modal-title {
    font-size: 1.15rem;
    font-weight: 700;
}

.modal-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    transition: color var(--transition-fast);
}

.modal-close:hover {
    color: var(--text-primary);
}

.modal-body {
    padding: 1.5rem;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem;
    border-top: 1px solid var(--border-color);
}

/* ─── Toast Notifications ─── */
.toast-container {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.toast {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 14px 20px;
    min-width: 300px;
    box-shadow: var(--shadow-xl);
    display: flex;
    align-items: center;
    gap: 10px;
    animation: slideInRight 0.3s ease;
    font-size: 0.875rem;
}

.toast.success {
    border-left: 3px solid var(--accent-emerald);
}

.toast.error {
    border-left: 3px solid var(--accent-rose);
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ─── Empty State ─── */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    color: var(--text-muted);
    text-align: center;
}

.empty-state .icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.empty-state .message {
    font-size: 0.95rem;
    font-weight: 500;
}

.empty-state .sub-message {
    font-size: 0.8rem;
    margin-top: 0.5rem;
}

/* ─── Distribution Preview ─── */
.distribution-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
    padding: 1rem;
    background: rgba(var(--ink), 0.02);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.dist-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dist-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.dist-value {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--accent-indigo-light);
    font-variant-numeric: tabular-nums;
}

/* ─── Search ─── */
.search-box {
    position: relative;
}

.search-box input {
    padding-left: 40px;
    width: 100%;
}

.search-box::before {
    content: '🔍';
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.85rem;
    pointer-events: none;
}

/* ─── Loading Spinner ─── */
.spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(var(--ink), 0.1);
    border-top-color: var(--accent-indigo);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ─── Custom Scrollbar ─── */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(var(--ink), 0.1);
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--ink), 0.2);
}

/* ─── Responsive ─── */
@media (max-width: 768px) {
    .main-content {
        padding: 1rem;
    }

    .header-content {
        flex-direction: column;
        height: auto;
        padding: 0.75rem 0;
        gap: 0.75rem;
    }

    .nav-tabs {
        width: 100%;
        overflow-x: auto;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .hakedis-grid {
        grid-template-columns: 1fr;
    }
}

/* ─── Action Row ─── */
.action-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.action-row .search-box {
    min-width: 250px;
}

/* ─── Pulse Animation ─── */
.pulse {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(99, 102, 241, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(99, 102, 241, 0);
    }
}

/* ─── Tooltip ─── */
.tooltip {
    position: relative;
}

.tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-fast);
}

.tooltip:hover::after {
    opacity: 1;
}

/* ─── Oranlar Sayfası Layout Optimizasyonları ─── */
#panel-rates .card-body {
    padding: 0.5rem;
}

#panel-rates .table-wrapper {
    overflow-x: auto;
    border-radius: var(--radius-md);
    background: rgba(var(--shade), 0.1);
}

#panel-rates table {
    width: 100%;
    border-collapse: collapse;
}

#panel-rates thead th {
    padding: 8px 3px !important;
    font-size: 0.72rem !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    text-align: center !important;
    vertical-align: bottom !important;
    word-break: break-word;
    border-bottom: 1px solid rgba(var(--ink), 0.08);
}

#panel-rates thead th:first-child {
    text-align: left !important;
    padding-left: 0.75rem !important;
}

#panel-rates tbody td {
    padding: 4px 2px !important;
    border-bottom: 1px solid rgba(var(--ink), 0.02);
    vertical-align: middle;
}

#panel-rates tbody td:first-child {
    padding-left: 0.75rem !important;
}

#panel-rates tbody td input.form-control {
    width: 48px !important;
    height: 28px !important;
    padding: 0.15rem 0.1rem !important;
    font-size: 0.8rem !important;
    text-align: center !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    background: rgba(var(--ink), 0.02) !important;
    border: 1px solid rgba(var(--ink), 0.08) !important;
    display: inline-block;
    box-sizing: border-box;
}

#panel-rates tbody td input.form-control:focus {
    border-color: var(--accent-indigo) !important;
    background: rgba(var(--ink), 0.06) !important;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15) !important;
}

/* Sayı giriş kutularındaki spinner (arttırma/azaltma) oklarını gizleme */
#panel-rates input[type=number]::-webkit-outer-spin-button,
#panel-rates input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#panel-rates input[type=number] {
    -moz-appearance: textfield;
}

/* ─── Arama Kutusu Temizleme (X) Butonu ─── */
.search-box {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.search-box input {
    padding-right: 38px !important;
    width: 100%;
}

.search-clear {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
    z-index: 10;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(var(--ink), 0.1);
    border: 1px solid rgba(var(--ink), 0.15);
    display: none;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.search-clear:hover {
    color: #ffffff;
    background: var(--accent-rose);
    border-color: var(--accent-rose);
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 0 8px rgba(244, 63, 94, 0.5);
}
/* ─── Başlık düzeni ve mobil kaydırma düzeltmeleri ─── */
.header-content {
    height: auto;
    min-height: 64px;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    padding: 0.4rem 0;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1 1 0%;
    min-width: 0;
    justify-content: flex-end;
}

/* Filtreler de daralabilsin, yoksa sekme şeridini alt satıra iterler */
.team-filter-wrapper,
.month-filter-wrapper {
    min-width: 0;
}

.team-filter-wrapper select,
.month-filter-wrapper select {
    min-width: 0;
    max-width: 220px;
}

/* Sekme şeridi sığmadığında kendi içinde yatay kayar, düğmeleri ekran dışına itmez */
.nav-tabs {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--ink), 0.2) transparent;
}

.nav-tabs::-webkit-scrollbar {
    height: 6px;
}

.nav-tabs::-webkit-scrollbar-thumb {
    background: rgba(var(--ink), 0.18);
    border-radius: 3px;
}

.nav-tab,
.tool-btn {
    flex: 0 0 auto;
}

/* Yedek / Çıkış: her zaman görünür, hiç daralmaz */
.header-tools {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    background: rgba(var(--ink), 0.03);
    padding: 4px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.header-tools .tool-btn {
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
}

.table-wrapper {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

/* Masaüstü: başlık ekranın tamamını kullansın, filtreler kısalmasın */
@media (min-width: 769px) {
    .header-content {
        max-width: none;
    }

    .team-filter-wrapper,
    .month-filter-wrapper {
        flex: 0 0 auto;
    }

    .nav-tab,
    .tool-btn {
        padding: 8px 14px;
    }
}

/* ─── Masaüstünde sekmeleri kaydırmadan sığdırma (ekran daraldıkça kademeli) ─── */
@media (min-width: 769px) {
    .filtre-etiket {
        display: none;
    }

    .app-header {
        padding: 0 1rem;
    }

    .team-filter-wrapper,
    .month-filter-wrapper {
        padding-left: 0.6rem;
    }
}

@media (min-width: 769px) and (max-width: 1600px) {
    .logo-text {
        display: none;
    }
}

@media (min-width: 769px) and (max-width: 1500px) {
    .tool-label {
        display: none;
    }

    .header-actions {
        gap: 0.5rem;
    }

    .team-filter-wrapper select,
    .month-filter-wrapper select {
        max-width: 130px;
    }
}

/* 11 sekme (Ödeme eklendi, 16.09.2026): emojiler 1900px altında gizlenir, şerit 1366px altında kendi satırına iner,
   1100px altında iki satıra sarılır. Genişlikler 2560-769px arasında canlıdaki gibi (Çıkış düğmesi, uyarı rozeti,
   ay seçimi dolu) ölçülerek ayarlandı. */
@media (min-width: 769px) and (max-width: 1900px) {
    .tab-emoji {
        display: none;
    }

    .nav-tabs {
        gap: 2px;
        padding: 3px;
    }

    .nav-tab,
    .tool-btn {
        padding: 8px 9px;
        font-size: 0.82rem;
    }
}

/* 1901px ve üstü (ör. 1920 ekran) emojili tek satır: Çıkış düğmesi ve uyarı rozetiyle şerit 24px taşıyor, kaydırma
   çubuğu çıkıyordu (16.09.2026). Sekmelerin iç boşluğu biraz daraltıldı; 1901px'te 45px pay kalır. */
@media (min-width: 1901px) {
    .nav-tab {
        padding: 8px 10px;
    }
}

/* Ölçüye girmeyen içerik yine de sığdırmazsa (yeni sekme, büyüyen rozet) app.js kaydırma çubuğu yerine başlığı
   kademeli sıkıştırır: sekme emojileri, logo yazısı, araç düğmelerinin yazıları gizlenir; yetmezse şerit kendi
   satırına iner, en son iki satıra sarılır. */
.app-header.sikis-emoji .tab-emoji,
.app-header.sikis-logo .logo-text,
.app-header.sikis-arac .tool-label {
    display: none;
}

.app-header.sikis-satir .header-content,
.app-header.sikis-satir .header-actions,
.app-header.sikis-sar .nav-tabs {
    flex-wrap: wrap;
}

.app-header.sikis-satir .nav-tabs {
    order: 3;
    flex: 1 1 100%;
    width: 100%;
}

@media (min-width: 769px) and (max-width: 1099px) {
    .nav-tabs {
        flex-wrap: wrap;
    }
}

@media (min-width: 769px) and (max-width: 1000px) {
    .nav-tab {
        padding: 7px 6px;
        font-size: 0.78rem;
    }
}

/* Dar pencerede sekme şeridi kaydırmak yerine kendi satırına iner */
@media (min-width: 769px) and (max-width: 1365px) {
    .header-content {
        flex-wrap: wrap;
    }

    .header-actions {
        flex-wrap: wrap;
    }

    .nav-tabs {
        order: 3;
        flex: 1 1 100%;
        width: 100%;
    }

    .nav-tab {
        padding: 8px 9px;
    }
}

@media (max-width: 768px) {
    .app-header {
        padding: 0 0.75rem;
    }

    .header-content {
        flex-direction: row;
        align-items: center;
    }

    .logo {
        flex: 0 0 auto;
    }

    .header-tools {
        margin-left: auto;
    }

    .tool-label {
        display: none;
    }

    .header-tools .tool-btn {
        padding: 8px 10px;
        font-size: 1rem;
    }

    .header-actions {
        order: 1;              /* logo ve düğmeler üstte kalsın, filtreler alt satıra insin */
        flex: 1 1 100%;
        width: 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 0.4rem;
    }

    /* Telefonda başlık az yer kaplasın */
    .header-content {
        gap: 0.4rem;
        padding: 0.3rem 0;
        min-height: 0;
    }

    .nav-tabs {
        padding: 3px;
    }

    .nav-tab,
    .tool-btn {
        padding: 6px 12px;
        font-size: 0.8rem;
    }

    .team-filter-wrapper,
    .month-filter-wrapper {
        padding: 0.15rem 0.4rem;
    }

    .team-filter-wrapper,
    .month-filter-wrapper {
        flex: 1 1 46%;
        min-width: 0;
        padding-left: 0.6rem;
    }

    .team-filter-wrapper select,
    .month-filter-wrapper select {
        width: 100%;
        min-width: 0;
    }

    .nav-tabs {
        width: 100%;
        flex: 1 1 100%;
    }

    .modal-overlay {
        padding: 0.5rem;
    }

    .modal {
        max-width: 100%;
        max-height: 94vh;
    }

    .action-row .search-box {
        min-width: 0;
        width: 100%;
    }

    table {
        font-size: 0.8rem;
    }
}

/* Ödeme uyarısı kartının alt satırı: dar ekranda düğmeler alta insin, kartın dışında kalmasın */
.alert-actions {
    flex-wrap: wrap;
    gap: 0.75rem;
}

@media (max-width: 768px) {
    .alert-actions {
        align-items: stretch;
    }

    .alert-actions-period,
    .alert-actions-buttons {
        width: 100%;
    }

    .alert-actions-period {
        flex-wrap: wrap;
    }

    .alert-actions-period input[type="month"] {
        width: 100% !important;
    }

    .alert-actions-buttons .btn {
        flex: 1 1 auto;
        justify-content: center;
    }

    .modal-footer {
        flex-wrap: wrap;
    }
}

/* ─── Açık tema (kırık beyaz) ─── */
[data-theme="light"] {
    --ink: 15, 23, 42;
    --shade: 100, 116, 139;
    --header-bg: rgba(255, 255, 255, 0.88);

    --bg-primary: #f4f5f7;
    --bg-secondary: #ffffff;
    --bg-card: rgba(255, 255, 255, 0.92);
    --bg-card-hover: #ffffff;
    --bg-glass: rgba(15, 23, 42, 0.035);
    --bg-glass-hover: rgba(15, 23, 42, 0.07);

    --border-color: rgba(15, 23, 42, 0.10);
    --border-light: rgba(15, 23, 42, 0.16);
    --border-accent: rgba(99, 102, 241, 0.35);

    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #64748b;
    --text-accent: #4f46e5;

    /* Beyaz zeminde okunurluk için vurgu tonları koyulaştırıldı */
    --accent-amber: #b45309;
    --accent-cyan: #0e7490;
    --accent-emerald: #047857;
    --accent-rose: #be123c;
    --gradient-success: linear-gradient(135deg, #047857, #0e7490);
    --gradient-warning: linear-gradient(135deg, #b45309, #c2410c);
    --gradient-danger: linear-gradient(135deg, #be123c, #9f1239);

    --accent-indigo-light: #4f46e5;
    --accent-violet-light: #7c3aed;
    --accent-emerald-light: #047857;
    --accent-rose-light: #be123c;
    --accent-amber-light: #b45309;

    --gradient-bg: linear-gradient(135deg, #f7f8fa 0%, #eef0f5 50%, #f4f5f7 100%);

    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.10);
    --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.12);
    --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.12);
}

/* Renkli zemin üzerindeki yazılar açık temada da beyaz kalmalı */
[data-theme="light"] .nav-tab.active {
    color: #ffffff;
}

[data-theme="light"] .logo-text {
    background: linear-gradient(135deg, #1e293b, #4f46e5);
    -webkit-background-clip: text;
    background-clip: text;
}

/* Rozet zeminleri beyazda biraz daha belirgin olsun */
[data-theme="light"] .badge {
    border: 1px solid rgba(15, 23, 42, 0.06);
}

/* ─── ERP aktarım ekranı ─── */
.erp-durum {
    padding: 0.7rem 0.9rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    background: rgba(var(--ink), 0.05);
    border: 1px solid var(--border-color);
}
.erp-durum.tamam { border-color: var(--accent-emerald); }
.erp-durum.hata { border-color: var(--accent-rose); }
.erp-durum.uyari { border-color: var(--accent-amber); background: rgba(245, 158, 11, 0.1); }

.erp-kontroller {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    align-items: flex-end;
}
.erp-kontroller label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}
.erp-kontroller .form-control { min-width: 150px; }
.erp-ay-dugmeleri { display: flex; gap: 0.4rem; }
.erp-ay-dugmeleri .btn { padding: 10px 12px; }

/* Önceki ayın kilidi: açıkken (icmal sürerken) sarı, kilitliyken sade */
.erp-ay-kilidi {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-top: 0.9rem;
    padding: 0.55rem 0.8rem;
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    background: rgba(var(--ink), 0.04);
    border: 1px solid var(--border-color);
}
.erp-ay-kilidi.acik { color: var(--text-primary); border-color: var(--accent-amber); background: rgba(245, 158, 11, 0.1); }
.erp-ay-kilidi .btn { padding: 6px 12px; font-size: 0.8rem; }

.erp-not {
    margin: 0.9rem 0 0;
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.erp-rozet {
    background: rgba(var(--ink), 0.12);
    border-radius: 10px;
    padding: 1px 8px;
    font-size: 0.8rem;
    margin-left: 6px;
}

.erp-uyari {
    color: var(--accent-amber);
    font-size: 0.75rem;
    margin-top: 2px;
}

.erp-kilitli { opacity: 0.55; }

#erpYeniTablo .form-control {
    padding: 4px 6px;
    font-size: 0.82rem;
    min-width: 90px;
}

.erp-atlanan {
    font-size: 0.83rem;
    color: var(--text-secondary);
    display: grid;
    gap: 3px;
}

.erp-aktar-cubugu {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.8rem 1rem;
    margin-top: 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
}

@media (max-width: 768px) {
    .erp-kontroller { flex-direction: column; align-items: stretch; }
    .erp-kontroller .form-control { width: 100%; }
    .erp-ay-dugmeleri .btn { flex: 1; }
    .erp-aktar-cubugu { flex-direction: column; align-items: stretch; }
}

/* ERP tablosu: sütunlar sıkışıp metni harf harf bölmesin; dar ekranda sarıcı kaydırsın */
#erpYeniTablo { min-width: 1180px; }
#erpYeniTablo th, #erpYeniTablo td { white-space: nowrap; vertical-align: top; }
#erpYeniTablo td:nth-child(3) { white-space: normal; min-width: 230px; max-width: 320px; }
#erpYeniTablo .erp-uyari { white-space: normal; line-height: 1.35; }
#erpFarkliTablo td:nth-child(4) { min-width: 280px; }

/* PET ile sözleşme tutarı ayrıştığında tutar alanı göze çarpsın */
#erpYeniTablo .erp-tutar { min-width: 110px; text-align: right; }
#erpYeniTablo .erp-dikkat-alan { border-color: var(--accent-amber); }

/* ERP aktarım tablosu geniş; bu sekmede orta alan tam genişlik kullansın */
.main-content.genis { max-width: none; }   /* ERP sekmesinde orta alan tam genişlik */
#panel-erp .table-wrapper { overflow-x: auto; }
#erpYeniTablo { min-width: 1240px; }
#erpYeniTablo select.form-control { min-width: 104px; }
#erpYeniTablo .erp-tutar { min-width: 104px; }

/* 12 sütunlu aktarım tablosu geniş ekranda kaydırmasız otursun */
#erpYeniTablo th, #erpYeniTablo td { padding-left: 8px; padding-right: 8px; }
#erpYeniTablo .form-control { padding: 4px 6px; }
#erpYeniTablo select.form-control { min-width: 96px; }
#erpYeniTablo .erp-tutar { min-width: 96px; }
#erpYeniTablo td:nth-child(3) { min-width: 200px; max-width: 280px; }

/* O işlem türünde geçerli olmayan opsiyonel alan: kapalı ve soluk */
#erpYeniTablo .erp-kapali {
    opacity: 0.35;
    cursor: not-allowed;
    background: rgba(var(--ink), 0.04);
}

/* Sözleşme no: ERP'deki üye sayfasına (proposal formu) açılır */
#erpYeniTablo .erp-baglanti { color: var(--accent-indigo-light, #818cf8); text-decoration: none; white-space: nowrap; }
#erpYeniTablo .erp-baglanti:hover { text-decoration: underline; }

/* Proposal'ı olan satırda numaranın tamamı düğme gibi tıklanır (küçük 📄'yi tutturmak zordu) */
#erpYeniTablo .erp-proposal {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    /* İç boşluk kadar sola çekilir: numara, başlıktaki "SÖZLEŞME" ile aynı hizada başlasın
       (kullanıcı, 27.09.2026: "hâlâ sağa doğru kaymış görünüyor") */
    padding: 4px 6px;
    margin-left: -6px;
    border-radius: 999px;
    font-weight: 600;
    background: rgba(99, 102, 241, 0.12);
    border: 1px solid rgba(99, 102, 241, 0.35);
}
#erpYeniTablo .erp-proposal:hover {
    text-decoration: none;
    background: rgba(99, 102, 241, 0.22);
    border-color: var(--accent-indigo-light, #818cf8);
}
#erpYeniTablo .erp-proposal-ikon { font-size: 0.95em; line-height: 1; }

/* Aktarım tablosu: ekip ve gelen ödeme bilgisi küçük not olarak */
#erpYeniTablo .erp-ekip { font-size: 0.72rem; color: var(--text-secondary); margin-top: 1px; }
#erpYeniTablo .erp-para { font-size: 0.72rem; color: var(--text-secondary); margin-top: 2px; white-space: nowrap; }

/* ─── Proposal görüntüleyici: tabloyu kapatmayan, taşınabilir pencere ─── */
.erp-gorsel {
    position: fixed;
    top: 90px;
    right: 24px;
    width: min(46vw, 760px);
    height: calc(100vh - 120px);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    resize: both;
    min-width: 320px;
    min-height: 260px;
}
.erp-gorsel[hidden] { display: none !important; }
.erp-gorsel-baslik {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.6rem 0.5rem 0.9rem;
    border-bottom: 1px solid var(--border-color);
    cursor: move;
    user-select: none;
    touch-action: none;
}
.erp-gorsel-ad {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.erp-gorsel-araclar { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.erp-gorsel-araclar button,
.erp-gorsel-araclar a {
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    background: rgba(var(--ink), 0.04);
    color: var(--text-primary);
    font-size: 0.95rem;
    line-height: 28px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}
.erp-gorsel-araclar button:hover,
.erp-gorsel-araclar a:hover { background: rgba(var(--ink), 0.1); }
.erp-gorsel-yuzde { min-width: 46px; text-align: center; font-size: 0.78rem; color: var(--text-secondary); }
.erp-gorsel-sahne {
    position: relative;
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--ink), 0.06);
    cursor: grab;
    touch-action: none;
}
.erp-gorsel-sahne.surukleniyor { cursor: grabbing; }
.erp-gorsel-sahne img {
    max-width: none;
    transform-origin: center center;
    user-select: none;
    -webkit-user-drag: none;
    will-change: transform;
}
.erp-gorsel-sahne iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.erp-gorsel-durum {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: 85%;
    text-align: center;
    font-size: 0.88rem;
    color: var(--text-secondary);
    pointer-events: none;
}
.erp-gorsel-durum:empty { display: none; }
.erp-gorsel-durum.hata { color: var(--accent-rose); }
.erp-gorsel-ipucu {
    padding: 0.35rem 0.8rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.72rem;
    color: var(--text-secondary);
}
#erpYeniTablo tr.erp-bakiliyor td { background: rgba(99, 102, 241, 0.10); }

@media (max-width: 768px) {
    .erp-gorsel {
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw;
        height: 100vh;
        border-radius: 0;
        resize: none;
    }
    .erp-gorsel-ipucu { display: none; }
}

/* Form inerken durum yazısı ortayı kapatmasın, üstte küçük bir şerit olsun */
.erp-gorsel-durum.yukleniyor {
    top: 12px;
    transform: translateX(-50%);
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    font-size: 0.78rem;
}

/* ─── Proposal penceresi: solda satışın alanları, sağda form ─── */
.erp-gorsel { width: min(74vw, 1200px); }
.erp-gorsel-gezin { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.erp-gorsel-gezin button {
    min-width: 30px; height: 30px; padding: 0 8px;
    border: 1px solid var(--border-color); border-radius: 7px;
    background: rgba(var(--ink), 0.04); color: var(--text-primary);
    font-size: 1.05rem; line-height: 28px; cursor: pointer;
}
.erp-gorsel-gezin button:hover:not(:disabled) { background: rgba(var(--ink), 0.1); }
.erp-gorsel-gezin button:disabled { opacity: 0.35; cursor: default; }
.erp-gorsel-sira { min-width: 52px; text-align: center; font-size: 0.78rem; color: var(--text-secondary); }
.erp-gorsel-ad { flex: 1; min-width: 0; }
.erp-gorsel-araclar a.erp-kapali { opacity: 0.35; pointer-events: none; }

.erp-gorsel-govde { flex: 1; display: flex; min-height: 0; }
.erp-gorsel-form {
    flex: 0 0 250px;
    width: 250px;
    overflow-y: auto;
    padding: 0.7rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    border-right: 1px solid var(--border-color);
    background: var(--bg-card);
}
.erp-panel-bilgi { font-size: 0.8rem; line-height: 1.45; color: var(--text-secondary); padding-bottom: 0.3rem; border-bottom: 1px solid var(--border-color); }
.erp-panel-bilgi b { color: var(--text-primary); font-size: 0.86rem; }
.erp-panel-alan { display: flex; flex-direction: column; gap: 2px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; color: var(--text-secondary); }
.erp-panel-alan .form-control { padding: 5px 8px; font-size: 0.86rem; font-weight: 400; }
.erp-panel-alan .erp-kapali { opacity: 0.35; cursor: not-allowed; }
.erp-panel-aktar { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--text-primary); margin-top: 0.2rem; }
.erp-panel-uyari:empty { display: none; }

@media (max-width: 768px) {
    .erp-gorsel-govde { flex-direction: column; }
    .erp-gorsel-form { flex: 0 0 auto; width: auto; max-height: 42vh; border-right: 0; border-bottom: 1px solid var(--border-color); }
    .erp-gorsel-sahne { min-height: 45vh; }
}

/* Telefon: yukarıdaki masaüstü genişlik kuralından SONRA gelmeli, yoksa onu ezemez.
   Başlık iki satıra iner; ✕ her zaman ekranda kalır (telefonda Esc yok). */
@media (max-width: 768px) {
    .erp-gorsel { width: 100vw !important; height: 100vh; min-width: 0; }
    .erp-gorsel-baslik { flex-wrap: wrap; row-gap: 4px; padding: 6px 8px; }
    .erp-gorsel-ad { order: 3; flex: 0 0 100%; font-size: 0.8rem; }
    .erp-gorsel-araclar { margin-left: auto; }
    .erp-gorsel-yuzde, #erpGorselDis { display: none; }
    .erp-gorsel-araclar button, .erp-gorsel-gezin button { min-width: 36px; height: 36px; }
}

/* Kart rengi (--bg-card) saydam; üste binen pencere ve yapışkan çubuk arkadaki yazıyı
   göstermesin diye iki temada da opak olan --bg-secondary kullanılır. */
.erp-gorsel,
.erp-gorsel-form,
.erp-gorsel-durum.yukleniyor,
.erp-aktar-cubugu { background: var(--bg-secondary); }

/* ─── Penceredeki satır başına "Onayla ve Aktar" ─── */
.erp-panel-eylem {
    position: sticky;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 0.3rem;
    padding: 0.55rem 0 0.1rem;
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
}
.erp-panel-onayla { width: 100%; padding: 0.55rem 0.6rem; font-weight: 600; }
.erp-panel-onayla:disabled { opacity: 0.55; cursor: not-allowed; }
.erp-panel-onayla.erp-panel-tamam:disabled { opacity: 1; background: rgba(16, 185, 129, 0.15); color: var(--accent-emerald); border-color: transparent; }
.erp-panel-bildirim { font-size: 0.74rem; line-height: 1.35; color: var(--accent-amber); }
.erp-panel-bildirim:empty { display: none; }
.erp-panel-son {
    font-size: 0.76rem;
    line-height: 1.4;
    padding: 0.4rem 0.55rem;
    border-radius: 7px;
    background: rgba(16, 185, 129, 0.12);
    color: var(--text-primary);
}
.erp-panel-son.hata { background: rgba(244, 63, 94, 0.12); }
/* Boşken gizli ama erişilebilirlik ağacında kalsın: ekran okuyucu ilk mesajı da okusun */
.erp-panel-son:empty { padding: 0; margin-bottom: -0.35rem; background: none; }
/* Sekme ile geçilen alan alttaki yapışkan düğme çubuğunun arkasında kalmasın */
.erp-gorsel-form { scroll-padding-bottom: 6rem; }
#erpYeniTablo tr.erp-aktarildi td { background: rgba(16, 185, 129, 0.07); }
#erpYeniTablo tr.erp-aktarildi .form-control { opacity: 0.6; }
.erp-aktarildi-not { font-size: 0.74rem; font-weight: 600; color: var(--accent-emerald); margin-bottom: 2px; }
.erp-aktarildi-not.onceden { color: var(--accent-amber); }
/* Pencerede bakılan satır, aktarılmış olsa da tabloda belli olsun */
#erpYeniTablo tr.erp-aktarildi.erp-bakiliyor td { background: rgba(99, 102, 241, 0.10); }

/* ─── Aktarıldıktan sonra ERP'de değişen satışlar ─── */
.erp-degisen-kart { border: 1px solid var(--accent-amber); }
.erp-degisen-not { margin: 0; padding: 0.7rem 1rem; font-size: 0.82rem; color: var(--text-secondary); border-bottom: 1px solid var(--border-color); }
#erpDegisenTablo td { vertical-align: top; }
#erpDegisenTablo .erp-degisiklik { line-height: 1.5; min-width: 260px; }
#erpDegisenTablo .erp-degisen-zaman { white-space: nowrap; font-size: 0.85rem; }
#erpDegisenTablo .erp-ekip { font-size: 0.72rem; color: var(--text-secondary); margin-top: 1px; }
#erpDegisenTablo .erp-uyari { white-space: normal; }
.erp-degisen-eylem { display: flex; flex-wrap: wrap; gap: 6px; }
.erp-degisen-eylem .btn { padding: 5px 10px; font-size: 0.8rem; white-space: nowrap; }

/* ─── Tahsilat listesi: iade / iptal (eksi tutarlı) kayıtlar ─── */
tbody tr.odeme-iade td { background: rgba(244, 63, 94, 0.07); }
tbody tr.odeme-iade td:first-child { box-shadow: inset 3px 0 0 var(--accent-rose); }
/* Tutar hücresi satırla aynı tonda (kullanıcı, 19.09.2026: iki kırmızı tonu olmasın), yalnız kalın */
tbody tr.odeme-iade td.odeme-iade-tutar { font-weight: 700; }
/* Aylık yedek hatırlatması: 💾 Yedek düğmesinin köşesinde kırmızı nokta (her ayın 5'i, yedek indirilince söner) */
.tool-btn.yedek-hatirlat::after {
    content: '';
    position: absolute;
    top: 3px;
    right: 5px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--accent-rose);
    box-shadow: 0 0 0 2px var(--bg-secondary);
    animation: yedekNabiz 2s ease-in-out infinite;
}
@keyframes yedekNabiz { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) { .tool-btn.yedek-hatirlat::after { animation: none; } }

/* Hakedişi önceden kesilmiş (ya da hiç dağıtılmamış) iadenin rozet altındaki kısa notu */
.iade-hakedis-not { margin-top: 3px; font-size: 0.68rem; color: var(--text-secondary); white-space: nowrap; cursor: help; }

/* ─── ERP iptal / iade ─── */
.erp-hukuk { background: rgba(245, 158, 11, 0.2); color: var(--accent-amber); font-size: 0.7rem; }
/* ERP'nin işlem türü rozetleri: sıradan yeni satış rozetsiz, devir / downgrade / upgrade göze çarpsın */
.erp-rozet-downgrade { background: rgba(239, 68, 68, 0.18); color: var(--accent-rose, #f87171); font-size: 0.7rem; font-weight: 700; }
.erp-rozet-devir { background: rgba(99, 102, 241, 0.2); color: var(--accent-indigo-light); font-size: 0.7rem; font-weight: 700; }
.erp-rozet-upgrade { background: rgba(16, 185, 129, 0.18); color: var(--accent-emerald, #34d399); font-size: 0.7rem; font-weight: 700; }
#erpYeniTablo .erp-hakedis-etki { white-space: nowrap; font-size: 0.85rem; }
#erpYeniTablo td.text-right .erp-ekip { white-space: nowrap; }
.erp-sebep { font-weight: 600; color: var(--accent-amber); margin-bottom: 2px; }
#erpGeriAlinanTablo td { vertical-align: top; }
#erpGeriAlinanTablo .erp-ekip { font-size: 0.72rem; color: var(--text-secondary); margin-top: 1px; }
.erp-islem-not { font-size: 0.72rem; font-weight: 600; color: var(--accent-indigo-light); margin-top: 2px; white-space: nowrap; }
#erpBekleyenTablo td { vertical-align: top; }
#erpBekleyenTablo .erp-ekip { font-size: 0.72rem; color: var(--text-secondary); margin-top: 1px; }
#erpYeniTablo .erp-tutar[readonly] { background: rgba(var(--ink), 0.02); border-color: rgba(var(--ink), 0.05); cursor: not-allowed; }
/* Kasa harcama satırındaki düzenle / sil: dar kartta iki düğme yan yana sığsın */
.kasa-islem { width: 24px; height: 24px; padding: 0; font-size: 0.65rem; line-height: 1; }

/* ─── Ödeme tablosu ─── */
.odeme-ust { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.odeme-ay { font-size: 1.15rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.25rem; }
.odeme-dugmeler { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.odeme-not { font-size: 0.72rem; color: var(--text-secondary); }
.odeme-uyarilar { display: grid; gap: 0.35rem; }
.odeme-uyari { font-size: 0.78rem; padding: 0.45rem 0.7rem; border-radius: var(--radius-sm); border: 1px solid rgba(245, 158, 11, 0.35); background: rgba(245, 158, 11, 0.08); color: var(--text-primary); }
.odeme-uyari.kotu { border-color: rgba(244, 63, 94, 0.4); background: rgba(244, 63, 94, 0.08); }
.odeme-mutabakat { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 0.6rem; margin-top: 0.75rem; }
.odeme-kart { border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 0.55rem 0.75rem; background: rgba(var(--ink), 0.03); }
.odeme-kart .etiket { font-size: 0.66rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.03em; }
.odeme-kart .deger { font-size: 1.1rem; font-weight: 700; margin-top: 2px; color: var(--text-primary); }
.odeme-kart .alt { font-size: 0.66rem; color: var(--text-secondary); margin-top: 2px; }
.odeme-kart.iyi .deger { color: var(--accent-emerald-light); }
.odeme-kart.dikkat .deger { color: var(--accent-amber-light); }
.odeme-kart.kotu .deger { color: var(--accent-rose-light); }
.odeme-bloklar { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(620px, 100%), 1fr)); gap: 1rem; margin-top: 1rem; }
.odeme-alt { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr)); gap: 1rem; margin-top: 1rem; align-items: start; }
.odeme-blok-baslik { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.odeme-tablo { width: 100%; font-size: 0.8rem; }
.odeme-tablo th, .odeme-tablo td { padding: 0.3rem 0.4rem; white-space: nowrap; }
.odeme-tablo input.form-control { padding: 0.2rem 0.35rem; font-size: 0.78rem; min-width: 92px; text-align: right; }
.odeme-tablo tfoot td { font-weight: 700; border-top: 2px solid var(--border-color); }
.odeme-isim { cursor: pointer; font-weight: 600; color: var(--text-primary); }
.odeme-ok { display: inline-block; width: 0.8rem; color: var(--text-secondary); }
.odeme-satir.spiff td { background: rgba(139, 92, 246, 0.07); }
.odeme-satir.uyari td:first-child { box-shadow: inset 3px 0 0 var(--accent-amber); }
.odeme-satir.kalan-var td { background: rgba(245, 158, 11, 0.06); }
.odeme-kalan-sifir { color: var(--accent-emerald-light); }
.odeme-kalan-var { color: var(--accent-amber-light); font-weight: 700; }
.odeme-mini { width: 22px; height: 22px; padding: 0; font-size: 0.65rem; line-height: 1; margin-left: 2px; }
.odeme-detay td { background: rgba(var(--ink), 0.03); white-space: normal; }
.odeme-detay-ic { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.5rem 1.25rem; font-size: 0.74rem; color: var(--text-secondary); padding: 0.25rem 0.5rem; }
.odeme-kalem { display: flex; justify-content: space-between; gap: 0.75rem; border-bottom: 1px dashed rgba(var(--ink), 0.08); padding: 1px 0; }
.odeme-detay-uyari { color: var(--accent-amber-light); }
.odeme-dep { border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 0.5rem 0.65rem; margin-bottom: 0.55rem; }
.odeme-dep-baslik { display: flex; justify-content: space-between; gap: 0.5rem; font-weight: 600; font-size: 0.82rem; color: var(--text-primary); }
.odeme-satirlik { display: flex; gap: 0.4rem; align-items: center; margin-top: 0.35rem; flex-wrap: wrap; }
.odeme-satirlik select.form-control { flex: 1 1 170px; min-width: 0; padding: 0.25rem 0.4rem; font-size: 0.78rem; }
.odeme-satirlik input.form-control { width: 120px; padding: 0.25rem 0.4rem; font-size: 0.78rem; text-align: right; }
.odeme-satirlik input.odeme-aciklama { flex: 1 1 140px; width: auto; text-align: left; }
.odeme-ekle { margin-top: 0.4rem; padding: 0.2rem 0.5rem; font-size: 0.74rem; }
/* Ödeme tablosunda ismin yanındaki WhatsApp düğmesi ve ayarlardaki numara listesi */
.odeme-wa { padding: 0 3px; border: none; background: none; font-size: 0.95rem; line-height: 1; cursor: pointer; opacity: 0.55; }
.odeme-wa:hover { opacity: 1; }

.odeme-ayar-baslik { margin: 1.25rem 0 0.35rem; font-size: 0.95rem; color: var(--text-primary); }
.odeme-ayar-baslik:first-child { margin-top: 0; }
.odeme-ayar-ekip { margin-top: 0.75rem; }
.odeme-ayar-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.2rem 0.75rem; margin-top: 0.35rem; font-size: 0.8rem; }
.odeme-ayar-liste label { display: flex; align-items: center; gap: 0.35rem; cursor: pointer; }
.odeme-maas { border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 0.45rem 0.6rem; margin-bottom: 0.45rem; }
.odeme-maas-baslik { display: flex; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; font-weight: 600; font-size: 0.8rem; color: var(--text-primary); }

/* ─── Ödeme sekmesinin alt sayfaları: ödeme tablosu, avans bakiyeleri, havale listesi (16.09.2026) ─── */
#panel-odeme [hidden], #odemeAvansModal [hidden], #odemeAliciModal [hidden] { display: none !important; }
.odeme-alt-sekmeler { display: flex; gap: 4px; flex-wrap: wrap; width: fit-content; max-width: 100%; padding: 4px; margin-bottom: 0.75rem; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: rgba(var(--ink), 0.03); }
.odeme-alt-sekme { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--text-secondary); font-family: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; }
.odeme-alt-sekme:hover { color: var(--text-primary); background: rgba(var(--ink), 0.05); }
.odeme-alt-sekme.aktif { color: #ffffff; background: var(--accent-indigo); }
.odeme-rozet { min-width: 18px; padding: 1px 6px; border-radius: 10px; background: var(--accent-rose); color: #ffffff; font-size: 0.68rem; font-weight: 700; line-height: 1.4; text-align: center; }
.odeme-arac-cubugu { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; justify-content: flex-end; margin-bottom: 0.5rem; }
.odeme-arac-not { flex: 1 1 320px; line-height: 1.45; }
.odeme-kart.tiklanir { cursor: pointer; }
.odeme-kart.tiklanir:hover { border-color: var(--accent-indigo); }
.odeme-bakiye { font-size: 0.72rem; cursor: help; }
.odeme-hareket { justify-content: space-between; padding-bottom: 0.3rem; border-bottom: 1px dashed rgba(var(--ink), 0.08); font-size: 0.8rem; color: var(--text-primary); }
.odeme-hareket-metin { flex: 1 1 220px; min-width: 0; }
.odeme-hareket-tutar { font-weight: 700; white-space: nowrap; }
.havale-hesap { margin-bottom: 0.5rem; padding: 0.45rem 0.6rem; border: 1px solid var(--border-color); border-radius: var(--radius-md); }
.havale-hesap.sinir-asildi { border-color: rgba(244, 63, 94, 0.55); background: rgba(244, 63, 94, 0.05); }
.havale-hesap-baslik { display: flex; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; font-size: 0.82rem; color: var(--text-primary); }
.havale-toplam { font-weight: 700; }
.havale-hesap.sinir-asildi .havale-toplam { color: var(--accent-rose-light); }
.havale-iban { margin-top: 1px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.02em; overflow-wrap: anywhere; }
.havale-parca { justify-content: space-between; margin-top: 0.25rem; font-size: 0.78rem; }
.havale-parca span { flex: 1 1 150px; min-width: 0; color: var(--text-secondary); }
.odeme-alici-modal { max-width: 880px; }
.odeme-alici-form { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.odeme-alici-form input { flex: 1 1 150px; min-width: 0; }
.odeme-alici-form #odemeAliciIban { flex: 2 1 260px; }
.odeme-alici-ice { display: grid; gap: 0.4rem; margin-bottom: 0.75rem; padding: 0.5rem 0.65rem; border: 1px dashed var(--border-color); border-radius: var(--radius-md); font-size: 0.8rem; color: var(--text-secondary); }
.odeme-alici-ice input[type=file] { max-width: 100%; }
.odeme-alici-ice details summary { cursor: pointer; color: var(--text-primary); }

@media (max-width: 768px) {
    .odeme-alt-sekmeler { width: 100%; }
    .odeme-alt-sekme { flex: 1 1 auto; justify-content: center; padding: 6px 8px; font-size: 0.78rem; }
    .odeme-arac-cubugu { justify-content: flex-start; }
}

/* Ödeme sekmesi: yazılmış tutarı tek tıkla silme (✕), kutunun sağ içinde */
.odeme-girdi-kutu { position: relative; display: flex; align-items: center; min-width: 92px; }
.odeme-tablo .odeme-girdi-kutu input.form-control { width: 100%; padding-right: 26px; }
.odeme-temizle { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); width: 20px; height: 20px; padding: 0; border: none; border-radius: 50%; background: rgba(var(--ink), 0.08); color: var(--text-secondary); font-size: 0.68rem; line-height: 20px; text-align: center; cursor: pointer; }
.odeme-temizle:hover, .odeme-temizle:focus-visible { background: var(--accent-rose); color: #ffffff; outline: none; }

/* Yazılan metin büyük harf (app.js büyukHarfKutusuMu ile aynı kapsam; 24.10.2026'dan beri arama kutuları da): yazarken
   ekranda büyük görünsün, ipucu yazıları olduğu gibi */
input[type="text"]:not(.currency-format):not([data-kucuk-harf]),
input[type="search"]:not([data-kucuk-harf]),
input:not([type]):not(.currency-format):not([data-kucuk-harf]),
textarea:not([data-kucuk-harf]) { text-transform: uppercase; }
input::placeholder, textarea::placeholder { text-transform: none; }

/* Tahsilat listesi: aynı ay içinde sıfırlanan tahsilatların notu ve (gösterilince) soluk satırları */
.tahsilat-gizli-not { padding: 0.55rem 0.9rem; font-size: 0.8rem; color: var(--text-secondary); border-bottom: 1px solid var(--border-color); }
.baglanti-dugme { padding: 0; border: none; background: none; color: var(--accent-indigo-light, #818cf8); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
.tahsilat-sifirlanan td { opacity: 0.55; }

/* ERP satırını programdaki satışla eşleştirme (devir / downgrade zeyli) */
/* Satır düğmeleri alt alta, eşit boyda ve numarayla aynı hizada (kullanıcı, 27.09.2026) */
.erp-eslestir-dugme { display: inline-flex; align-items: center; justify-content: flex-start; gap: 4px;
    padding: 4px 6px; min-height: 24px; font-size: 0.72rem; line-height: 1; white-space: nowrap;
    background: rgba(var(--ink), 0.06);
    border: 1px solid var(--border-color); border-radius: 8px; color: var(--text-secondary); cursor: pointer; }
.erp-eslestir-dugme:hover { color: var(--text-primary); border-color: var(--accent-indigo-light); }
.erp-eslestir-bilgi { font-size: 0.9rem; margin-bottom: 0.6rem; color: var(--text-primary); }
.erp-eslestir-sonuc { margin-top: 1rem; max-height: 320px; overflow-y: auto; }
.erp-eslestir-satir { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 0.5rem 0; border-bottom: 1px solid var(--border-color); }
.erp-eslestir-satir .btn { flex: 0 0 auto; padding: 4px 10px; font-size: 0.8rem; }
.erp-eslestir-not { color: var(--text-secondary); font-size: 0.85rem; }

.erp-satir-islem { display: flex; flex-direction: column; align-items: stretch; gap: 4px;
    margin-top: 6px; margin-left: -6px; max-width: 120px; }
#erpYoksayilanTablo td { vertical-align: middle; }
#erpYoksayilanTablo .btn { padding: 4px 10px; font-size: 0.8rem; }

/* Oranlar: satırın Nakit / Kart / Taksitli toplam oranı (11.10.2026) */
#panel-rates th.oran-toplam,
#panel-rates td.oran-toplam {
    background: rgba(var(--ink), 0.05);
    color: var(--accent-indigo-light);
    font-weight: 700;
    white-space: nowrap;
}

/* Telefonda Satışlar ve Tahsilatlar: her kayıt ekrana sığan bir kart, yatay kaydırma yok (kullanıcı, 12.10.2026:
   "her satış ekrana sığacak şekilde, gerekirse alta doğru uzasın"). Masaüstünde tablo aynı. */
@media (max-width: 768px) {
    table.kart-tablo,
    table.kart-tablo tbody {
        display: block;
        width: 100%;
    }

    table.kart-tablo thead {
        display: none;
    }

    table.kart-tablo tbody tr {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));   /* her satır aynı üç sütun: alt alta hizalı */
        gap: 10px 12px;
        align-items: start;
        padding: 12px 14px;
        border-bottom: 1px solid var(--border-light);
    }

    table.kart-tablo tbody tr.bos-satir {
        display: block;
    }

    table.kart-tablo tbody td {
        padding: 0;
        border: none;
        min-width: 0;
        text-align: left !important;   /* .text-right / .text-center !important; kartta etiketle aynı hizada */
        overflow-wrap: anywhere;
    }

    table.kart-tablo td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 2px;
        font-size: 0.66rem;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--text-muted);
    }

    table.kart-tablo .k-musteri { grid-area: musteri; font-size: 0.95rem; line-height: 1.3; }
    table.kart-tablo .k-sozlesme { grid-area: sozlesme; }
    table.kart-tablo .k-tarih { grid-area: tarih; }
    table.kart-tablo .k-islem { grid-area: islem; }
    table.kart-tablo .k-odeme { grid-area: odeme; }
    table.kart-tablo .k-rep { grid-area: rep; }
    table.kart-tablo .k-to { grid-area: to; }
    table.kart-tablo .k-volume { grid-area: volume; }
    table.kart-tablo .k-tahsilat { grid-area: tahsilat; }
    table.kart-tablo .k-kalan { grid-area: kalan; }
    table.kart-tablo .k-yer { grid-area: yer; }
    table.kart-tablo .k-tutar { grid-area: tutar; }
    table.kart-tablo .k-hakedis { grid-area: hakedis; }
    table.kart-tablo .k-butonlar { grid-area: butonlar; justify-self: end; }

    /* Uzun işlem türü (ör. LINE EREN KAYSERİ-ADANA) iki satıra inince hap değil etiket gibi dursun */
    table.kart-tablo .k-islem .badge { border-radius: var(--radius-sm); }

    /* Rozetin kenarı etiketle aynı çizgide başlasın */
    table.kart-tablo td .badge { margin-left: 0; }

    table.kart-satis tbody tr {
        grid-template-areas:
            "musteri musteri sozlesme"
            "tarih islem odeme"
            "rep to ."
            "volume tahsilat kalan"
            "butonlar butonlar butonlar";
    }

    table.kart-tahsilat tbody tr {
        grid-template-areas:
            "musteri musteri sozlesme"
            "tarih odeme yer"
            "tutar hakedis butonlar";
    }

    /* Tahsilatta iki düğme tutar satırının boş üçüncü hücresine sığıyor: kart kısalır */
    table.kart-tahsilat .k-butonlar {
        align-self: end;
    }

    /* İade satırının rengi hücre hücre değil, kartın tamamında */
    table.kart-tablo tbody tr.odeme-iade {
        background: rgba(244, 63, 94, 0.07);
        box-shadow: inset 3px 0 0 var(--accent-rose);
    }

    table.kart-tablo tbody tr.odeme-iade td,
    table.kart-tablo tbody tr.odeme-iade td:first-child {
        background: transparent;
        box-shadow: none;
    }
}

/* Telefonda Hakedişler (kullanıcı, 12.10.2026: "hakedişler sayfasını da bu şekilde düzenleyelim").
   Kişi kartı: kategori etiketi adın altında, tutarlar sağda tek hizada.
   Ayrıntı penceresi: tablo yerine kayıt kayıt kart; Tutar sütunu ekran dışında kalmıyor. */
@media (max-width: 768px) {
    .hakedis-detail-item {
        gap: 12px;
    }

    .hakedis-detail-customer {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        min-width: 0;
        line-height: 1.3;
        overflow-wrap: anywhere;
    }

    .hakedis-detail-amount {
        margin-left: 0;
        white-space: nowrap;
    }

    table.kart-hakedis tbody tr {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "musteri musteri tutar"
            "tarih kategori tutar";
        padding: 10px 4px;
    }

    table.kart-hakedis tbody tr.toplam-satir {
        grid-template-areas: "musteri musteri tutar";
    }

    table.kart-hakedis .k-kategori { grid-area: kategori; }
    table.kart-hakedis .k-tarih { font-size: 0.75rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
    table.kart-hakedis .k-musteri { color: var(--text-primary); font-weight: 600; font-size: 0.9rem; }

    table.kart-hakedis .k-tutar {
        align-self: center;
        justify-self: end;
        text-align: right !important;
        white-space: nowrap;
    }
}

/* Telefonda İcmal (kullanıcı, 12.10.2026: "icmal sayfasını da düzeltelim").
   Müşteri bazlı icmal: müşteri kart kart (ad + sözleşme, altında Total Yatan / Firma / İnhouse); ekip ve ay başlıkları
   tam genişlik şerit; ay toplamı ve genel toplam da aynı üç sütunda. Ekstra ödemeler: açıklama tam genişlik.
   Alacak hesabı özeti başlığı: düğmeler alt satıra iner. */
@media (max-width: 768px) {
    table.kart-icmal tfoot {
        display: block;
    }

    table.kart-icmal tbody tr,
    table.kart-icmal tfoot tr {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px 12px;
        align-items: start;
        padding: 12px 14px;
        grid-template-areas:
            "musteri musteri sozlesme"
            "yatan firma inhouse";
    }

    table.kart-icmal tr.toplam-satir {
        grid-template-areas:
            "musteri musteri musteri"
            "yatan firma inhouse";
    }

    table.kart-icmal tbody tr.grup-satir {
        display: block;
        padding: 0;
    }

    table.kart-icmal tbody tr.grup-satir td {
        display: block;
        padding: 8px 14px !important;
        text-align: center !important;
    }

    table.kart-icmal tfoot td {
        padding: 0 !important;
        border: none;
        min-width: 0;
        text-align: left !important;
    }

    table.kart-icmal .k-yatan { grid-area: yatan; }
    table.kart-icmal .k-firma { grid-area: firma; }
    table.kart-icmal .k-inhouse { grid-area: inhouse; }
    table.kart-icmal .k-musteri { padding-left: 0 !important; }

    table.kart-ekstra tbody tr {
        grid-template-areas:
            "aciklama aciklama aciklama"
            "tutar tutar butonlar";
        align-items: center;
    }

    table.kart-ekstra .k-aciklama { grid-area: aciklama; }
    table.kart-ekstra .k-butonlar { justify-self: end; }

    #icmalSummaryModule .card-header {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    #icmalSummaryModule .card-header > div:last-child {
        flex-wrap: wrap;
    }
}

/* Telefonda Ödeme sayfası (kullanıcı, 12.10.2026: "ödeme sayfasını da düzeltelim"). Ödeme tablosu, avans bakiyeleri ve
   havale listesindeki satırlar kart kart, üç eşit sütun; toplam satırı da aynı sütunlarda. Tutar kutuları sütuna sığar. */
@media (max-width: 768px) {
    table.kart-odeme tfoot,
    table.kart-avans tfoot,
    table.kart-havale tfoot {
        display: block;
    }

    table.kart-odeme tfoot tr,
    table.kart-avans tfoot tr,
    table.kart-havale tfoot tr {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px 12px;
        align-items: start;
        padding: 12px 14px;
        border-top: 2px solid var(--border-color);
    }

    table.kart-odeme tfoot td,
    table.kart-avans tfoot td,
    table.kart-havale tfoot td {
        padding: 0 !important;
        border: none;
        min-width: 0;
        text-align: left !important;
    }

    /* Hücre içi: kaydırma yok, tutar kutusu sütuna sığar */
    table.kart-odeme td,
    table.kart-avans td,
    table.kart-havale td {
        white-space: normal;
    }

    table.kart-tablo .odeme-girdi-kutu {
        min-width: 0;
    }

    table.kart-tablo .odeme-girdi-kutu input.form-control {
        min-width: 0;
        width: 100%;
    }

    table.kart-tablo .k-isim { grid-area: isim; font-size: 0.92rem; }
    table.kart-tablo .k-avans { grid-area: avans; }
    table.kart-tablo .k-toplam { grid-area: toplam; }
    table.kart-tablo .k-nakit { grid-area: nakit; }
    table.kart-tablo .k-hesap { grid-area: hesap; }
    table.kart-tablo .k-onceki { grid-area: onceki; }
    table.kart-tablo .k-eklenen { grid-area: eklenen; }
    table.kart-tablo .k-odenecek { grid-area: odenecek; }
    table.kart-tablo .k-kesilecek { grid-area: kesilecek; }
    table.kart-tablo .k-sonu { grid-area: sonu; }
    table.kart-tablo .k-atilan { grid-area: atilan; }
    table.kart-tablo .k-dagitilan { grid-area: dagitilan; }

    table.kart-odeme tbody tr,
    table.kart-odeme tfoot tr {
        grid-template-areas:
            "isim isim isim"
            "hakedis avans toplam"
            "nakit hesap kalan";
    }

    table.kart-avans tbody tr,
    table.kart-avans tfoot tr {
        grid-template-areas:
            "isim isim isim"
            "onceki eklenen odenecek"
            "kesilecek sonu .";
    }

    table.kart-havale tbody tr,
    table.kart-havale tfoot tr {
        grid-template-areas:
            "isim isim butonlar"
            "atilan dagitilan kalan";
    }

    /* Kalanı nakit ver / hesaba at düğmeleri her kartta tutarın altında */
    table.kart-odeme .odeme-kalan-dugmeler {
        display: flex;
        gap: 6px;
        margin-top: 6px;
    }

    table.kart-odeme .odeme-kalan-dugmeler .odeme-mini {
        width: 30px;
        height: 30px;
        margin-left: 0;
        font-size: 0.85rem;
    }

    /* Havale listesindeki hesap kartı: satır adı daralır, tutar kutusu ve ✕ aynı satırda kalır */
    .havale-parca {
        flex-wrap: nowrap;
    }

    .havale-parca span {
        flex: 1 1 0;
    }

    .havale-parca input.form-control {
        width: 110px;
        flex: 0 0 110px;
    }

    /* Tek seferlik aktarma: kimden, ↓, kime alt alta; altında tutar, not ve sil */
    #odemeAktarmalar .odeme-satirlik {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
        gap: 6px;
        align-items: center;
    }

    #odemeAktarmalar .odeme-satirlik > select {
        grid-column: 1 / -1;
        width: 100%;
    }

    #odemeAktarmalar .odeme-satirlik > span {
        grid-column: 1 / -1;
        justify-self: center;
        transform: rotate(90deg);
        color: var(--text-secondary);
    }

    #odemeAktarmalar .odeme-satirlik > input.form-control {
        width: 100%;
        min-width: 0;
    }

    /* Açılan ayrıntı ve hesaba dağıtma formu kartın altında tam genişlik */
    table.kart-tablo tbody tr.odeme-detay {
        display: block;
        padding: 0;
    }

    table.kart-tablo tbody tr.odeme-detay td {
        display: block;
        padding: 8px 14px !important;
    }

    /* Satır renkleri hücre hücre değil, kartın tamamında */
    table.kart-tablo tbody tr.odeme-satir.spiff { background: rgba(139, 92, 246, 0.07); }
    table.kart-tablo tbody tr.odeme-satir.kalan-var { background: rgba(245, 158, 11, 0.06); }
    table.kart-tablo tbody tr.odeme-satir.uyari { box-shadow: inset 3px 0 0 var(--accent-amber); }
    table.kart-tablo tbody tr.odeme-satir td,
    table.kart-tablo tbody tr.odeme-satir td:first-child {
        background: transparent;
        box-shadow: none;
    }
}

/* Telefonda Kasa (kullanıcı, 12.10.2026: "kasa sayfasını da düzeltelim"). Ekip kasaları tek sütun ve ekrana sığar;
   alınan nakitler ve harcamalar kayıt kayıt kart, ad ve açıklama kesilmeden; listeler küçük kaydırma kutusu yerine
   sayfayla birlikte aşağı uzar. */
@media (max-width: 768px) {
    #panel-kasa .kasa-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    #panel-kasa .kasa-liste {
        max-height: none !important;
        overflow: visible !important;
    }

    table.kart-kasa-nakit tbody tr,
    table.kart-kasa-harcama tbody tr {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 4px 12px;
        align-items: center;
        padding: 10px 12px;
    }

    table.kart-kasa-nakit tbody tr {
        grid-template-areas:
            "musteri sozlesme"
            "tarih tutar";
    }

    table.kart-kasa-harcama tbody tr {
        grid-template-areas:
            "metin tutar"
            "tarih butonlar";
    }

    table.kart-kasa-nakit tbody td,
    table.kart-kasa-harcama tbody td {
        padding: 0 !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    table.kart-kasa-nakit .k-musteri { font-size: 0.85rem; }
    table.kart-kasa-nakit .k-sozlesme { justify-self: end; }
    table.kart-kasa-harcama .k-metin { grid-area: metin; font-size: 0.82rem !important; line-height: 1.35; }

    table.kart-kasa-nakit .k-tutar,
    table.kart-kasa-harcama .k-tutar {
        justify-self: end;
        text-align: right !important;
        font-size: 0.85rem !important;
    }

    table.kart-kasa-nakit .k-tarih,
    table.kart-kasa-harcama .k-tarih {
        font-variant-numeric: tabular-nums;
    }
}

/* Telefonda ERP (kullanıcı, 12.10.2026: "ERP sayfasını da düzeltelim"). Sonuç tabloları (yeni kayıtlar, farklılar,
   değişenler, iadeler, bekleyenler…) kayıt kayıt kart: iki sütun, her alanın üstünde sütun başlığı (erp.js
   erpKartEtiketleri). Sözleşme, müşteri, farklar ve not tam genişlik; seçim kutusu kartın sağ üstünde; düzeltilebilir
   alanlar (volume, REP, TO, işlem türü…) sütuna sığar. */
@media (max-width: 768px) {
    #erpSonuc .table-wrapper {
        overflow-x: visible;
    }

    #erpSonuc table {
        display: block;
        width: 100%;
        min-width: 0 !important;
    }

    #erpSonuc thead {
        display: none;
    }

    #erpSonuc tbody {
        display: block;
    }

    #erpSonuc tbody tr {
        position: relative;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px 12px;
        align-items: start;
        padding: 12px 14px;
        border-bottom: 1px solid var(--border-light);
    }

    #erpSonuc tbody td {
        display: block;
        padding: 0 !important;
        border: none;
        min-width: 0 !important;
        max-width: none !important;
        white-space: normal !important;
        text-align: left !important;
        overflow-wrap: anywhere;
    }

    #erpSonuc td[data-label]:not([data-label=""])::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 3px;
        font-size: 0.66rem;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--text-muted);
    }

    #erpSonuc td.erp-tam,
    #erpSonuc td[data-label="Sözleşme"],
    #erpSonuc td[data-label="Müşteri"],
    #erpSonuc td[data-label="Farklar"],
    #erpSonuc td[data-label="Değişiklik"],
    #erpSonuc td[data-label="ERP’de geri alınan iade"],
    #erpSonuc td[data-label="Programdaki kayıt"],
    #erpSonuc td[data-label="Not"],
    #erpSonuc td[data-label="Sebep"] {
        grid-column: 1 / -1;
    }

    /* Seçim kutusu kartın sağ üst köşesinde; sözleşme satırı ona yer bırakır */
    #erpSonuc td.erp-sec-hucre {
        position: absolute;
        top: 12px;
        right: 14px;
    }

    #erpSonuc td.erp-sec-hucre + td {
        padding-right: 36px !important;
    }

    #erpSonuc td.erp-sec-hucre input[type=checkbox] {
        width: 22px;
        height: 22px;
    }

    #erpSonuc .form-control {
        width: 100%;
        min-width: 0 !important;
    }

    #erpSonuc .erp-para {
        white-space: normal !important;
    }

    /* Sözleşme altındaki Eşleştir / Yoksay düğmeleri yan yana */
    #erpSonuc .erp-satir-islem {
        flex-direction: row;
        flex-wrap: wrap;
        max-width: none;
        margin-left: 0;
    }
}

/* Telefonda tarih kutuları ekrandan taşmasın (kullanıcı, 12.10.2026: "ERP sayfasında başlangıç ve bitiş tarihi seçme
   alanı ekrandan taşıyor"). iPhone'un tarih kutusu kendi en küçük genişliğini dayatıp verilen genişliği aşıyor:
   genişlik kutuya bağlanır, iPhone'da yerel görünüm kaldırılır (dokununca tarih seçici yine açılır). */
@media (max-width: 768px) {
    .erp-kontroller label {
        min-width: 0;
        width: 100%;
    }

    .erp-kontroller .form-control {
        min-width: 0;
    }

    .erp-kontroller input[type="date"].form-control {
        display: block;
        width: 100%;
    }

    input[type="date"].form-control {
        min-width: 0;
        max-width: 100%;
    }
}

@supports (-webkit-touch-callout: none) {
    @media (max-width: 768px) {
        input[type="date"].form-control {
            -webkit-appearance: none;
            appearance: none;
            min-height: 44px;
            line-height: 1.2;
        }

        input[type="date"].form-control::-webkit-date-and-time-value {
            text-align: left;
        }
    }
}

/* Telefonda Oranlar (kullanıcı, 12.10.2026: "oranlar sayfasını da düzeltelim"). Her işlem türü bir kart: ad, Rep,
   sonra TO ve SPİFF Nakit / Kart / Taksitli üçlüleri, kişi oranları, en altta aynı üç sütunda canlı toplamlar.
   Masaüstü tablo kuralları #panel-rates ile !important; buradakiler onları yalnız dar ekranda geçer. */
@media (max-width: 768px) {
    #panel-rates .card-header > div:last-child {
        flex-wrap: wrap;
    }

    #panel-rates table.kart-oran tbody tr {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px 12px;
        padding: 14px;
    }

    #panel-rates table.kart-oran tbody td,
    #panel-rates table.kart-oran tbody td:first-child {
        padding: 0 !important;
        border: none;
        text-align: left !important;
    }

    #panel-rates table.kart-oran td.oran-islem {
        grid-column: 1 / -1;
        font-size: 0.95rem;
        color: var(--text-primary);
    }

    #panel-rates table.kart-oran td.oran-yeni-satir {
        grid-column-start: 1;
    }

    #panel-rates table.kart-oran tbody td input.form-control {
        width: 100% !important;
        height: 36px !important;
        font-size: 0.9rem !important;
    }

    #panel-rates table.kart-oran td.oran-toplam {
        align-self: stretch;
        padding: 6px 8px !important;
        border-radius: var(--radius-sm);
        font-size: 0.95rem;
        white-space: normal;
        overflow-wrap: anywhere;
        /* Başlık bir kutuda iki satıra insin, ötekinde tek satır kalsın: sayılar yine aynı hizada (altta) */
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
}

/* Telefonda Sıralama (kullanıcı, 12.10.2026: "sıralama sayfasını da düzeltelim"). Satış sıralaması ve tam tahsilatta
   hakediş kişi kişi kart: solda sıra, yanında isim (ekibiyle) ve oran, altında tutarlar aynı üç sütunda; toplam da
   öyle. Açılan satış satış ayrıntı da kart. Süzgeç çubuğu iki sütunlu, kutular tam genişlik. */
@media (max-width: 768px) {
    .siralama-filtre {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.6rem !important;
        align-items: end !important;
    }

    .siralama-filtre > div {
        flex-direction: column;
        align-items: stretch !important;
        gap: 0.25rem !important;
        min-width: 0;
    }

    .siralama-filtre .form-control {
        width: 100% !important;
        min-width: 0;
    }

    .siralama-filtre > button,
    .siralama-filtre > span,
    .siralama-filtre > label {
        grid-column: 1 / -1;
        margin-left: 0 !important;
    }

    #siralamaSayfa-satis .card-header {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    table.kart-siralama > tfoot,
    table.kart-tam > tfoot {
        display: block;
    }

    table.kart-siralama > tbody > tr,
    table.kart-siralama > tfoot > tr,
    table.kart-tam > tbody > tr,
    table.kart-tam > tfoot > tr {
        display: grid;
        grid-template-columns: 2rem repeat(3, minmax(0, 1fr));
        gap: 8px 10px;
        align-items: start;
        padding: 12px 14px;
        border-bottom: 1px solid var(--border-light);
    }

    table.kart-siralama > tbody > tr,
    table.kart-siralama > tfoot > tr {
        grid-template-areas:
            "no isim isim oran"
            ". deal volume money";
    }

    table.kart-tam > tbody > tr,
    table.kart-tam > tfoot > tr {
        grid-template-areas:
            "no isim isim oran"
            ". toplam alinan kalan";
    }

    table.kart-siralama > tfoot > tr > td,
    table.kart-tam > tfoot > tr > td {
        padding: 0 !important;
        border: none;
        min-width: 0;
        text-align: left !important;
    }

    /* Başlık iki satıra inse de tutarlar aynı hizada (kutunun altında) */
    table.kart-siralama > tbody > tr > td[data-label],
    table.kart-siralama > tfoot > tr > td[data-label],
    table.kart-tam > tbody > tr > td[data-label],
    table.kart-tam > tfoot > tr > td[data-label] {
        align-self: stretch;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    table.kart-tablo .k-no { grid-area: no; padding-top: 2px !important; }
    table.kart-tablo .k-deal { grid-area: deal; }
    table.kart-tablo .k-money { grid-area: money; }
    table.kart-tablo .k-oran { grid-area: oran; }
    table.kart-tablo .k-alinan { grid-area: alinan; }
    table.kart-siralama .k-isim,
    table.kart-tam .k-isim { padding-left: 0 !important; }

    /* Tam tahsilatta açılan satış satış ayrıntı */
    table.kart-tam > tbody > tr.tam-detay {
        display: block;
        padding: 0;
    }

    table.kart-tam > tbody > tr.tam-detay > td {
        display: block;
        padding: 8px 14px 12px !important;
    }

    .tam-detay-liste {
        max-height: none !important;
        overflow: visible !important;
    }

    table.kart-tam-detay > tbody > tr {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-areas:
            "musteri musteri sozlesme"
            "musteri musteri tarih"
            "toplam alinan kalan";
        gap: 4px 10px;
        padding: 10px 0;
    }

    table.kart-tam-detay > tbody > tr > td {
        padding: 0 !important;
    }

    table.kart-tam-detay .k-musteri { font-size: 0.85rem !important; font-weight: 600; }
}

/* Telefonda sayfa üstündeki özet kutuları (kullanıcı, 12.10.2026: "şirket özeti sayfasını da yapalım"). İki sütunda
   7-8 haneli tutar (ör. 39.762.430,5₺, 5.766.000₺) kutuya sığmayıp kesiliyordu: Şirket Özeti, Satışlar, Tahsilatlar,
   Hakedişler ve Tam Tahsilat'ta kutular tek sütun, solda başlık, sağda tutar. Öteki kutularda (kasa vb.) tutar kesilmek
   yerine alt satıra iner. ozet-kutulari */
@media (max-width: 768px) {
    .tab-panel > .stats-grid,
    #siralamaSayfa-tam > .stats-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 0.5rem;
    }

    .tab-panel > .stats-grid > .stat-card,
    #siralamaSayfa-tam > .stats-grid > .stat-card {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 12px 16px;
    }

    .tab-panel > .stats-grid > .stat-card .stat-label,
    #siralamaSayfa-tam > .stats-grid > .stat-card .stat-label {
        margin: 0;
        min-width: 0;
    }

    .tab-panel > .stats-grid > .stat-card .stat-value,
    #siralamaSayfa-tam > .stats-grid > .stat-card .stat-value {
        font-size: 1.3rem !important;
        white-space: nowrap;
        text-align: right;
    }

    .stat-value {
        overflow-wrap: anywhere;
    }

    /* Ekip kartlarında satır başlığı ile tutar arasında boşluk; uzun tutar sağda kalır */
    #dashboard-team-cards .stat-card > div {
        gap: 12px;
    }

    /* Masaüstünde iki sütun (İNHOUSE 1 · İNHOUSE 2 / FOLLOW UP · CUBES); telefonda alt alta */
    #dashboard-team-cards {
        grid-template-columns: 1fr !important;
    }
}

/* Telefonda Uyarılar (kullanıcı, 12.10.2026: "uyarılar sayfasını da düzeltelim"). Sayfa başlığı ile Yenile alt alta;
   uyarı kartının başlığı (uzun etiket, ekip, tarih) alt alta; müşteri tam genişlik, tutarlar iki sütun; hakediş
   düzeltme satırlarında isim üstte, "Geçmiş ödenen ➔ olması gereken" ve fark altta. İç boşluklar daraltıldı. */
@media (max-width: 768px) {
    .uyari-ust {
        flex-direction: column;
        align-items: stretch !important;
        gap: 0.75rem;
        padding: 1rem !important;
    }

    .uyari-ust h1 {
        font-size: 1.15rem !important;
        line-height: 1.3;
    }

    .uyari-ust .btn {
        align-self: flex-start;
    }

    .uyari-kart-baslik {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.5rem;
        padding: 0.75rem 1rem !important;
    }

    .uyari-kart-baslik > div {
        flex-wrap: wrap;
    }

    .uyari-kart-baslik .badge {
        white-space: normal;
        line-height: 1.35;
        text-align: left;
    }

    .uyari-kart-govde {
        padding: 1rem !important;
    }

    .uyari-bilgi {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.9rem !important;
        padding: 0.9rem !important;
    }

    .uyari-bilgi > div:first-child,
    .uyari-bilgi > div:last-child {
        grid-column: 1 / -1;
    }

    .uyari-fark-satir {
        flex-direction: column;
        align-items: stretch !important;
        gap: 0.25rem;
    }

    .uyari-fark-sag {
        justify-content: space-between;
        gap: 0.75rem !important;
    }

    .uyari-fark-sag strong {
        min-width: 0 !important;
        white-space: nowrap;
    }

    .uyari-baslik4 {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.35rem;
    }

    .uyari-kart details {
        padding: 0.5rem 0.75rem !important;
    }
}

/* ═══════════ CUBES senet takibi (Hakedişler) ═══════════ */
.senet-ozet {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.senet-ozet-satir {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.5rem;
    font-size: 0.88rem;
    color: var(--text-secondary);
}

.senet-ozet-ad {
    min-width: 170px;
    font-weight: 600;
    color: var(--text-primary);
}

@media (max-width: 768px) {
    .senet-ozet-satir {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4px 12px;
        padding-bottom: 8px;
        border-bottom: 1px solid var(--border-light);
    }

    .senet-ozet-ad {
        grid-column: 1 / -1;
        min-width: 0;
    }

    /* Kartlar sayfayla birlikte aşağı uzasın; iç kaydırma telefonda zahmetli */
    #cubesSenetKart .table-wrapper {
        max-height: none !important;
        overflow: visible !important;
    }

    table.kart-senet .k-giren { grid-area: giren; }
    table.kart-senet .k-teslim { grid-area: teslim; }
    table.kart-senet .k-hak { grid-area: hak; }

    table.kart-senet tbody tr {
        grid-template-areas:
            "musteri musteri sozlesme"
            "tarih odeme volume"
            "giren teslim hak";
    }
}

/* CUBES: satış listesinde girişteki plan (gerçekleşen kategoriden farklıysa) ve icmaldeki alacak hesabı */
.cubes-plan {
    margin-top: 2px;
    font-size: 0.65rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.cubes-icmal-ozet {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    padding: 1rem 1.5rem 1.25rem;
    border-top: 1px solid var(--border-color);
}

.cubes-icmal-ozet .stat-card {
    background: rgba(var(--ink), 0.04);
    border: 1px solid var(--border-color);
}

.cubes-icmal-ozet .cubes-not {
    grid-column: 1 / -1;
    font-size: 0.78rem;
    color: var(--text-muted);
}

@media (max-width: 768px) {
    .cubes-icmal-ozet {
        grid-template-columns: 1fr;
        padding: 12px 14px;
    }
}

/* CUBES dağılım özeti (Oranlar) */
.kart-cubes-dagilim td.oran-bos {
    color: var(--text-muted);
}

.kart-cubes-dagilim .dagilim-aciklama {
    display: block;
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--text-muted);
}

.cubes-dagilim-not {
    margin: 0;
    padding: 1rem 1.5rem 1.25rem 2.5rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

@media (max-width: 768px) {
    table.kart-cubes-dagilim tbody tr {
        grid-template-areas:
            "alt alt alt"
            "rep to conf"
            "lm kasa havuz"
            "taskin esas .";
    }

    table.kart-cubes-dagilim tbody tr.grup-satir {
        display: block;
        padding: 0;
    }

    table.kart-cubes-dagilim tbody tr.grup-satir td {
        display: block;
        padding: 8px 14px !important;
        text-align: center !important;
    }

    table.kart-cubes-dagilim .k-alt { grid-area: alt; font-weight: 600; color: var(--text-primary); }
    table.kart-cubes-dagilim .k-rep { grid-area: rep; }
    table.kart-cubes-dagilim .k-to { grid-area: to; }
    table.kart-cubes-dagilim .k-conf { grid-area: conf; }
    table.kart-cubes-dagilim .k-lm { grid-area: lm; }
    table.kart-cubes-dagilim .k-kasa { grid-area: kasa; }
    table.kart-cubes-dagilim .k-havuz { grid-area: havuz; }
    table.kart-cubes-dagilim .k-taskin { grid-area: taskin; }
    table.kart-cubes-dagilim .k-esas { grid-area: esas; }

    /* CUBES oran tablosu telefonda: kutular hücreyi doldursun (masaüstündeki #panel-rates 48 px kuralının yerine) */
    #panel-rates table.kart-cubes-dagilim tbody td,
    #panel-rates table.kart-cubes-dagilim tbody td:first-child {
        padding: 0 !important;
        border: none;
    }

    #panel-rates table.kart-cubes-dagilim tbody td input.form-control {
        width: 100% !important;
        height: 36px !important;
        font-size: 0.9rem !important;
    }

    #panel-rates table.kart-cubes-dagilim td.oran-toplam {
        padding: 6px 8px !important;
        border-radius: var(--radius-sm);
    }

    /* Etiket üstte, değer dipte: aynı sıradaki kutular, etiketi iki satıra inse de aynı hizada */
    #panel-rates table.kart-cubes-dagilim tbody tr:not(.grup-satir) td:not(.k-alt) {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-self: stretch;
    }

    .cubes-dagilim-not {
        padding: 12px 14px 12px 30px;
    }
}

/* Uyarılar: geçmiş işlemler (23.10.2026) */
.uyari-gecmis-baslik {
    margin: 1.5rem 0 0.35rem;
    font-size: 1.05rem;
    color: var(--text-primary);
}

.uyari-gecmis-baslik span { color: var(--text-muted); font-weight: 400; }

.uyari-gecmis-not {
    margin: 0 0 0.75rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.uyari-gecmis-bos { color: var(--text-muted); font-size: 0.85rem; }

.uyari-gecmis-kart {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0.85rem 1rem;
    margin-bottom: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.uyari-gecmis-ust {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.uyari-gecmis-kimlik { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; color: var(--text-primary); }
.uyari-gecmis-ekip, .uyari-gecmis-zaman { font-size: 0.8rem; color: var(--text-muted); white-space: nowrap; }
.uyari-gecmis-degisim, .uyari-gecmis-kayit { font-size: 0.85rem; color: var(--text-secondary); }
.uyari-gecmis-dugmeler { display: flex; justify-content: flex-end; }
.uyari-gecmis-kalemler {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 1.1rem;
    margin-top: 0.3rem;
    font-size: 0.82rem;
    color: var(--text-primary);
}

.uyari-gecmis-kalemler small { color: var(--text-muted); }

.uyari-gunluk-satir {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.9rem;
    align-items: baseline;
    padding: 0.4rem 0;
    border-bottom: 1px solid rgba(var(--ink), 0.05);
    font-size: 0.83rem;
    color: var(--text-secondary);
}

.uyari-gunluk-satir:last-child { border-bottom: none; }
.uyari-gunluk-satir b { color: var(--text-primary); }
.uyari-gunluk-satir small { color: var(--text-muted); }

@media (max-width: 768px) {
    .uyari-gecmis-dugmeler { justify-content: stretch; }
    .uyari-gecmis-dugmeler .btn { width: 100%; }
}