/**
 * 📱 MOBILE.CSS - Tam Mobil Uyumlu Responsive Tasarım
 * Tüm sayfalar için optimize edilmiş mobil görünüm
 */

@media (max-width: 768px) {
  /* ===== GENEL AYARLAR ===== */
  body {
    font-size: 14px;
    padding: 0;
    background: var(--bg-dark);
    overflow-x: hidden;
  }

  /* ===== CONTAINER ===== */
  .container {
    padding: 0.75rem;
    max-width: 100vw;
    margin: 0;
  }

  .container-sm {
    padding: 1rem;
    max-width: 100vw;
  }

  /* ===== CARD ===== */
  .card {
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-card);
  }

  /* Stats ve Action cards */
  .stat-card,
  .action-card {
    padding: 1rem;
    margin-bottom: 1rem;
  }

  .stats-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  .stat-icon {
    font-size: 2rem !important;
  }

  .card-header {
    margin-bottom: 1rem;
  }

  .card-title {
    font-size: 1.25rem !important;
    font-weight: 700;
    margin-bottom: 0.5rem !important;
  }

  .card-description {
    font-size: 0.875rem;
    color: var(--text-gray);
  }

  /* ===== FORM ELEMENTS ===== */
  .form-group {
    margin-bottom: 1rem;
  }

  .form-label {
    font-size: 0.9rem;
    margin-bottom: 0.4rem;
    display: block;
  }

  .form-input {
    font-size: 16px; /* iOS zoom engellemek için minimum 16px */
    padding: 0.75rem;
    width: 100%;
    border-radius: 8px;
  }

  /* ===== BUTTONS ===== */
  .btn {
    font-size: 0.95rem;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    text-align: center;
    min-height: 44px; /* Touch friendly minimum */
  }

  /* Sadece form butonları tam genişlik */
  form .btn,
  .btn-block {
    width: 100%;
    display: block;
  }

  /* Header butonları yan yana */
  .flex-between .flex .btn,
  .flex-between > .flex .btn {
    width: auto;
    flex: 1;
  }

  /* ===== FLEX LAYOUTS ===== */
  .flex-between {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
  }

  /* Search ve history kartlarındaki flex-between */
  .card .flex-between {
    flex-direction: column !important;
  }

  .flex-between > div {
    width: 100% !important;
  }

  /* Header içindeki butonlar yan yana kalabilir */
  .container > .flex-between:first-child {
    flex-direction: column !important;
  }

  .container > .flex-between:first-child .flex {
    flex-direction: row !important;
    flex-wrap: wrap;
  }

  .flex {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }

  .flex.gap-1,
  .flex.gap-2 {
    gap: 0.5rem !important;
  }

  /* ===== CREDIT BADGE ===== */
  .credit-badge {
    width: 100%;
    justify-content: center;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    border-radius: 8px;
    margin-bottom: 0.5rem;
  }

  /* ===== ALERTS ===== */
  .alert {
    padding: 1rem;
    font-size: 0.9rem;
    border-radius: 8px;
    margin-bottom: 1rem;
  }

  /* ===== HEADINGS ===== */
  h1 {
    font-size: 1.75rem !important;
  }

  h2 {
    font-size: 1.5rem !important;
  }

  h3 {
    font-size: 1.25rem !important;
  }

  h4 {
    font-size: 1.1rem !important;
  }

  /* ===== SPACING ===== */
  .mt-1, .mb-1 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
  .mt-2, .mb-2 { margin-top: 0.75rem !important; margin-bottom: 0.75rem !important; }
  .mt-3, .mb-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }

  /* ===== DASHBOARD STATS GRID ===== */
  .container > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    margin-bottom: 1rem !important;
  }

  /* ===== TABLE / DATA GRID ===== */
  
  /* Desktop tabloyu gizle */
  .data-grid-wrapper {
    border: none;
    background: transparent;
    padding: 0;
    max-height: none;
  }

  .data-grid {
    display: none !important;
  }

  .table-container,
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Mobil için kart listesi */
  .mobile-table-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .mobile-table-row {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    box-shadow: var(--shadow-card);
  }

  .mobile-table-row:active {
    background: var(--border-color);
  }

  .mobile-table-row > div {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0.25rem 0;
  }

  .mobile-table-row strong {
    font-weight: 600;
    color: var(--primary-light);
    flex-shrink: 0;
    min-width: 100px;
  }

  .mobile-table-row span {
    color: var(--text-white);
    text-align: right;
    word-break: break-word;
    flex: 1;
  }

  /* Mobil tablo export buttonları */
  .card .flex-between .flex.gap-1 {
    flex-direction: row !important;
    flex-wrap: wrap;
  }

  .card .flex-between .flex.gap-1 .btn {
    flex: 1;
    min-width: calc(33.333% - 0.5rem);
    margin-bottom: 0.5rem;
  }

  /* ===== MODAL ===== */
  .modal {
    padding: 1rem;
  }

  .modal .card {
    max-width: 100%;
    margin: 0;
  }

  /* ===== LOADING ===== */
  .spinner {
    width: 36px;
    height: 36px;
    margin: 1.5rem auto;
  }

  .loading-text {
    font-size: 0.9rem;
    padding: 0 1rem;
  }

  /* ===== EMPTY STATE ===== */
  .empty-state {
    padding: 2rem 1rem;
  }

  .empty-state-icon {
    font-size: 2.5rem;
  }

  .empty-state-text {
    font-size: 1rem;
  }

  /* ===== BADGE ===== */
  .badge {
    font-size: 0.8rem;
    padding: 0.25rem 0.6rem;
  }

  /* ===== SEARCH HISTORY ===== */
  #recentSearches .card,
  #historyContainer .card {
    margin-bottom: 0.75rem;
  }

  /* History ve Dashboard kartlarındaki flex-between düzeni */
  #recentSearches .card .flex-between,
  #historyContainer .card .flex-between {
    flex-direction: column !important;
    gap: 1rem !important;
  }

  #recentSearches .card .flex-between > div,
  #historyContainer .card .flex-between > div {
    width: 100% !important;
  }

  /* Görüntüle ve export butonları yan yana */
  #recentSearches .card .flex.gap-1,
  #historyContainer .card .flex.gap-1 {
    flex-direction: row !important;
    gap: 0.5rem !important;
  }

  #recentSearches .card .flex.gap-1 .btn,
  #historyContainer .card .flex.gap-1 .btn {
    flex: 1;
    padding: 0.65rem 0.75rem;
    font-size: 0.9rem;
    margin-bottom: 0;
  }

  /* ===== LOGIN PAGE ===== */
  .container-sm[style*="margin-top"] {
    margin-top: 2rem !important;
  }

  .container-sm h1[style*="font-size"] {
    font-size: 2rem !important;
  }

  /* ===== TEXT SIZES ===== */
  .text-muted {
    font-size: 0.875rem;
  }

  /* ===== UTILITY ===== */
  .hidden {
    display: none !important;
  }

  /* Touch-friendly minimum sizes */
  a, button, .btn, input[type="submit"] {
    min-height: 44px;
    min-width: 44px;
  }

  /* Prevent zoom on input focus iOS */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="url"],
  textarea,
  select {
    font-size: 16px !important;
  }
}