/* ============================================================
   MOBİL UYARLAMALAR  (css/mobile.css)
   ------------------------------------------------------------
   Tüm kurallar @media içinde tutulur; en son yüklendiği için
   masaüstü stillerini yalnızca küçük ekranlarda ezer.
   Hedef: iPhone/Safari + Android/Chrome. Ana kırılım: 768px.
   ============================================================ */

:root {
    /* Alt navigasyon çubuğunun yaklaşık yüksekliği (safe-area hariç) */
    --mobile-nav-h: 58px;
}

/* Alt navigasyon masaüstünde gizli; yalnızca telefonda görünür */
.mobile-bottom-nav {
    display: none;
}

/* ============================================================
   ≤768px — TELEFON / KÜÇÜK TABLET
   ============================================================ */
@media (max-width: 768px) {

    /* --- Genel --- */
    html, body {
        overflow-x: hidden;            /* yatay taşma güvenliği */
    }
    .app-container {
        height: 100dvh;                /* mobil tarayıcı toolbar'ı için 100vh yerine */
    }

    /* iOS Safari, <16px yazı tipli alanlara odaklanınca ekranı zoom'lar → 16px'e sabitle */
    input, select, textarea,
    .form-input, .form-select, .form-textarea,
    .chat-input, .job-search-box input, .job-sort-select,
    .dropdown-search-input {
        font-size: 16px;
    }

    /* --- Header --- */
    .header {
        padding: 0 14px;
        padding-top: env(safe-area-inset-top);
        gap: 10px;
    }
    .top-nav { display: none; }        /* sekmeler alt nava taşındı */
    .header-actions { gap: 12px; }

    /* --- Alt navigasyon çubuğu --- */
    .mobile-bottom-nav {
        display: flex;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 95;
        background: var(--bg-panel);
        border-top: 1px solid var(--border-light);
        box-shadow: 0 -2px 12px rgba(0,0,0,0.08);
        padding-bottom: env(safe-area-inset-bottom);
    }
    .mobile-nav-btn {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-height: 56px;
        padding: 8px 2px;
        border: none;
        background: transparent;
        color: var(--text-muted);
        font-family: var(--font-main);
        font-size: 0.62rem;
        font-weight: 600;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: color var(--transition-fast);
    }
    .mobile-nav-btn i { font-size: 1.15rem; }
    .mobile-nav-btn span { white-space: nowrap; }
    .mobile-nav-btn.active { color: var(--color-primary); }

    /* --- Ana içerik: alt nav kadar dip boşluk bırak --- */
    .content-view {
        padding: 16px 14px calc(var(--mobile-nav-h) + env(safe-area-inset-bottom) + 16px);
    }

    /* --- Sol ilan çekmecesi: son öğe alt navın altında kalmasın --- */
    .sidebar-left {
        padding-bottom: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom) + 12px);
    }

    /* --- Dokunma hedefleri ≥44px --- */
    .filter-tag { padding: 8px 14px; }
    .modal-close { width: 40px; height: 40px; }

    /* --- Dashboard: sabit 2fr/1fr grid tek sütuna insin --- */
    .inline-fix-25 { grid-template-columns: 1fr; }

    /* --- Modallar: alttan açılan sayfa (bottom-sheet) --- */
    .modal-overlay { align-items: flex-end; }
    .modal,
    .modal.modal-wide {
        width: 100%;
        max-width: 100%;
        max-height: 92dvh;
        border-radius: 20px 20px 0 0;
        padding: 20px;
        padding-bottom: calc(20px + env(safe-area-inset-bottom));
    }

    /* --- İlan detay slide paneli --- */
    .slide-panel { width: 100%; }
    .panel-cover { height: 140px; }
    .panel-content { padding: 20px; }
    .action-float {
        flex-wrap: wrap;
        padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
    }
    .action-float .btn-secondary,
    .action-float .btn-main {
        flex: 1 1 45%;
    }

    /* --- Kanban: sütunlar yatay kaydırılır, dokunmatik sürükle js/views/kanban.js'te --- */
    .kanban-board { height: calc(100dvh - 210px); }
    .kanban-item { touch-action: pan-y; }      /* dikey kaydırmaya izin, sürükleme uzun-basmayla başlar */

    /* --- Mülakat --- */
    .interview-mode-tabs { flex-direction: row; gap: 8px; }
    .interview-mode-tab { flex-direction: row; align-items: center; gap: 8px; padding: 10px 12px; }
    .interview-mode-tab-desc { display: none; }   /* mobilde kompakt: açıklamayı gizle */
    .interview-room { height: calc(100dvh - 200px); }
    .interview-body { flex-direction: column; }   /* video paneli sohbetin altına insin */
    .video-frame { max-height: 46vh; }

    /* Cevap alanı: input tam satır, altında sayaç + mikrofon + gönder */
    .input-area { flex-wrap: wrap; }
    .input-area .chat-input { order: 0; flex: 1 1 100%; }
    .input-area .answer-timer { order: 1; }
    .input-area .mic-btn { order: 2; }
    .input-area .chat-send-btn { order: 3; flex: 1 1 auto; width: auto; }

    /* --- CV Editörü: editör + önizleme dikey --- */
    /* A4 sayfaların genişliği sabit kalır, dar ekrana fitCvPreviewScale() ölçekleyerek
       sığdırır (bkz. css/views/cv-editor.css) — burada yalnız boşlukları daraltıyoruz.
       align-items:stretch + height:auto: masaüstündeki flex-start/height:100% dikey düzende
       panelleri daraltıp/çökertirdi; burada geri alıyoruz (paneller tam genişlik, doğal boy). */
    .cv-builder-container { flex-direction: column; height: auto; align-items: stretch; }
    .cv-editor { max-height: none; }
    .cv-preview-pane { height: auto; padding: 12px; overflow: visible; }
    .cv-pages { gap: 20px; }
    .cv-page::after { bottom: -17px; }

    /* --- Yol Haritası: dokunmatik pan/pinch (js/views/roadmap.js) --- */
    .roadmap-wrapper { touch-action: pan-x pan-y; }
    /* Minimap alt navın üstüne yükseltilir */
    .roadmap-minimap {
        bottom: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom) + 16px);
    }
    .roadmap-zoom-controls button { width: 38px; height: 38px; }

    /* --- Yüzen asistan: alt navla çakışmasın --- */
    .assistant-toggle-btn {
        bottom: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom) + 18px);
    }
    .assistant-panel {
        bottom: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom) + 84px);
    }
}

/* ============================================================
   ≤480px — DAR TELEFON: header'ı daha da sadeleştir
   ============================================================ */
@media (max-width: 480px) {
    .logo-area { font-size: 1.25rem; }
    /* Profil çipinde yalnızca avatar kalsın (isim + ok gizlenir) */
    #headerUserName,
    .user-profile-mini .fa-chevron-down { display: none; }
    .user-profile-mini { padding: 4px; border-radius: 50%; }
}