/* ============================================================
 * thehydra.lol — Mobile Responsive (24 Nis 2026)
 * ============================================================ */

/* =========== TABLET (<=960px) =========== */
@media (max-width: 960px) {
    body { padding: 10px !important; }
    .container, .wrapper { padding: 10px !important; max-width: 100% !important; }
    .grid, .card-grid, .row { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
}

/* =========== MOBILE (<=640px) =========== */
@media (max-width: 640px) {
    html, body { overflow-x: hidden; font-size: 14px; }

    body { padding: 8px !important; margin: 0 !important; }
    .container, .wrapper, .content {
        max-width: 100% !important;
        padding: 8px !important;
        margin: 0 !important;
    }

    /* --- Topbar / Header --- */
    header, .header, .topbar, .navbar {
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 8px 6px !important;
        font-size: 14px !important;
    }
    .logo, .brand { font-size: 16px !important; }

    /* --- Grid → tek sütun --- */
    .grid, .card-grid, .row, .vps-list, .stats-grid,
    [class*="grid-"] {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    /* --- Cards --- */
    .card, .vps-card, .job-card, .claude-log-card {
        padding: 12px !important;
        font-size: 13px !important;
        border-radius: 8px;
    }
    .card-header { font-size: 14px !important; padding: 8px 10px !important; flex-wrap: wrap; gap: 6px; }
    .card-body { padding: 10px !important; }

    /* --- Butonlar: touch --- */
    .btn, button {
        min-height: 38px;
        padding: 8px 12px !important;
        font-size: 13px !important;
    }
    .btn-sm { min-height: 32px !important; padding: 6px 10px !important; font-size: 12px !important; }
    .btn-xs { min-height: 28px !important; padding: 4px 8px !important; font-size: 11px !important; }
    .btn-group, .btn-row { flex-wrap: wrap !important; gap: 6px !important; }

    /* --- Input/Form --- */
    input, textarea, select {
        font-size: 16px !important;
        min-height: 38px;
        padding: 8px 10px !important;
        width: 100% !important;
        box-sizing: border-box;
    }
    label { font-size: 12px !important; }

    /* --- Tablolar: yatay scroll --- */
    table { min-width: 500px; font-size: 11px; }
    .table-wrap, .scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* --- Dropzone --- */
    .dropzone {
        padding: 20px 10px !important;
        min-height: 100px !important;
    }
    .dropzone-icon { font-size: 28px !important; }

    /* --- Tabs (eğer varsa) --- */
    .tabs, .tab-nav {
        overflow-x: auto;
        white-space: nowrap;
        display: flex;
        gap: 4px;
        padding: 4px !important;
        -webkit-overflow-scrolling: touch;
    }
    .tab { flex: 0 0 auto !important; padding: 8px 12px !important; font-size: 13px !important; }

    /* --- Badges --- */
    .badge { font-size: 10px !important; padding: 2px 6px !important; }

    /* --- Pagination --- */
    .pagination { flex-wrap: wrap; justify-content: center; gap: 4px; font-size: 13px; }
    .pagination a, .pagination span { min-width: 34px; min-height: 34px; }

    /* --- CLAUDE CHAT alanı --- */
    .claude-container, .claude-chat-area {
        position: fixed !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        border-radius: 0 !important;
        z-index: 9999;
    }
    .claude-topbar { padding: 10px !important; font-size: 14px !important; }
    .claude-messages { padding: 10px !important; }
    .claude-msg { font-size: 13px !important; padding: 8px 10px !important; max-width: 92%; }
    .claude-input-bar { padding: 8px !important; }
    .claude-input { font-size: 16px !important; padding: 8px 10px !important; }
    .claude-send-btn { min-width: 60px; min-height: 38px; }
    .claude-logs-area { display: none; }  /* mobilde log gizle, tıkla görünür */
    body.claude-logs-open .claude-logs-area { display: block !important; }

    /* --- Modaller / Overlay --- */
    .modal, .overlay-content, .dialog {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        padding: 14px !important;
    }

    /* --- Copy button / dots --- */
    .copy-btn { min-width: 32px; min-height: 32px; font-size: 12px !important; }
    .dot-lg { width: 10px !important; height: 10px !important; }

    /* --- Assistant badge --- */
    .assistant { padding: 6px 10px !important; font-size: 12px !important; }
}

/* =========== SMALL MOBILE (<=380px) =========== */
@media (max-width: 380px) {
    html, body { font-size: 13px; }
    .btn { padding: 7px 10px !important; font-size: 12px !important; }
    .card { padding: 10px !important; }
    h1 { font-size: 18px !important; }
    h2 { font-size: 16px !important; }
    h3 { font-size: 14px !important; }
}

/* =========== COARSE POINTER (touch) =========== */
@media (pointer: coarse) {
    .card:hover, .btn:hover, .vps-card:hover { transform: none !important; }
}