/* Global Responsive Enhancements - NEXUS İSG */
/* Odak: Küçük ekran (<=640px) kullanılabilirlik artırma, yatay kayma önleme, form ve grid optimizasyonu */

html, body { max-width: 100%; overflow-x: hidden; }

/* Tailwind'in .hidden utility sınıfı varsayılanda gizler, fakat breakpoint sınıfları ile override edilebilir */
.hidden { display: none; }
/* Modal gibi fixed katmanlarda görünürlük zorunlu olarak gizli kalsın */
.fixed.hidden { display: none !important; }

/* ===================== HEADER & NAV RESPONSIVE ===================== */
/* Mobile header fix */
@media (max-width: 768px) {
  nav.bg-white.fixed { padding: 0.5rem 0; }
  nav.bg-white.fixed .max-w-7xl { padding: 0 0.5rem; }
  nav.bg-white.fixed .flex.justify-between.items-center { padding: 0.5rem 0; }
  
  /* Logo boyutunu mobile'da küçült */
  nav img[data-logo] { 
    width: 45px !important; 
    height: 45px !important; 
  }
  
  /* Company name mobile'da daha küçük */
  nav .text-lg.md\:text-2xl { 
    font-size: 1rem !important; 
    line-height: 1.25rem;
  }
  
  /* Hamburger buton konumu */
  #mobileMenuBtn { 
    padding: 0.5rem; 
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Mobile menu açılmış halinde full screen */
  #mobileMenu.block { 
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    z-index: 40;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Mobile menu items padding */
  #mobileMenu .px-4 { 
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  #mobileMenu a, #mobileMenu button {
    font-size: 0.95rem;
    padding: 0.75rem 0;
  }
}

@media (max-width: 640px) {
  nav img[data-logo] { 
    width: 40px !important; 
    height: 40px !important; 
  }
  
  nav .text-lg.md\:text-2xl { 
    font-size: 0.9rem !important;
  }
}

/* Utility classes */
.mobile-hide { display: none !important; }
@media (min-width:641px){ .mobile-hide { display: initial !important; } }
.mobile-only { display: none !important; }
@media (max-width:640px){ .mobile-only { display: initial !important; } }

/* Shared form adjustments */
@media (max-width:640px){
  input, select, textarea, button { font-size: 14px !important; }
  .btn, .button { padding: 10px 14px !important; }
  
  /* Services, Products, Blog grids */
  section#hizmetler .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3 { 
    grid-template-columns: 1fr !important;
  }
  
  section#urunler .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3 { 
    grid-template-columns: 1fr !important;
  }
  
  section#blog .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3 { 
    grid-template-columns: 1fr !important;
  }
  
  section#ekip .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 { 
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  }
  
  /* Section padding */
  section { padding-left: 1rem !important; padding-right: 1rem !important; }
  section h2 { font-size: 1.75rem !important; }
}

/* Login Page */
@media (max-width:480px){
  body.login-page { padding: 20px 0; }
  .login-container { padding: 24px 22px !important; border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
  .login-header h1 { font-size: 22px !important; }
  .login-header p { font-size: 13px !important; }
  .role-choice button { padding: 14px 16px !important; font-size: 14px !important; }
}

/* Admin Panel Specific */
@media (max-width:768px){
  #adminSidebar { width: 260px !important; }
  header.fixed .h-16, header.fixed { height: auto; }
  .stat-card { padding: 18px !important; }
  .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4.gap-6.mb-8 { grid-template-columns: repeat(auto-fit,minmax(140px,1fr)); }
  .content-section .grid.md\:grid-cols-2.lg\:grid-cols-5 { grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); }
  table { display:block; overflow-x:auto; -webkit-overflow-scrolling: touch; }
  .modal-compact .grid-cols-2 { grid-template-columns: 1fr !important; }
  .contact-tab { flex:1; text-align:center; }
}

/* Sales Panel */
@media (max-width:768px){
  .portal-tab { flex:1 1 calc(50% - 8px); justify-content:center; font-size: 0.8rem; padding: .55rem .75rem; }
  nav .flex.flex-wrap.items-center.gap-2.py-3 { gap:6px; }
  #sgkLookupForm { flex-direction: column !important; }
  #sgkLookupForm button { width:100%; margin-top:6px; }
  #sgkPartsContainer { grid-template-columns: repeat(auto-fit,minmax(70px,1fr)) !important; }
  h1.text-3xl { font-size: 1.75rem !important; }
  h2.text-2xl { font-size: 1.4rem !important; }
}

/* Improved tap targets on very small screens */
@media (max-width:400px){
  .portal-tab { padding: .5rem .6rem; font-size: .72rem; }
  .folder-card { padding: .9rem; }
}

/* Ensure modals scroll correctly on small devices */
@media (max-height:640px){
  .fixed [class*='max-w-']{ max-height:90vh; overflow-y:auto; }
}

/* Modal improvements for mobile */
@media (max-width: 768px) {
  /* Modal positioning */
  .fixed.inset-0 { 
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .fixed.inset-0 > div { 
    width: calc(100% - 1rem) !important;
    max-width: 500px !important;
    margin: 0 auto;
  }
  
  /* Modal close button */
  .modal-close, [onclick*="closeModal"] {
    min-width: 44px;
    min-height: 44px;
  }
}

@media (max-width: 640px) {
  .fixed.inset-0 { padding: 0.25rem; }
  
  .fixed.inset-0 > div {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Footer spacing tweaks for narrow screens */
@media (max-width:768px){
  footer { padding: 2rem 1rem !important; }
  footer .grid.md\:grid-cols-3 { grid-template-columns: 1fr; gap:24px; }
  footer img[data-logo-footer]{ width:50px !important; height:50px !important; }
  footer h3 { font-size: 1rem !important; }
  footer p, footer a { font-size: 0.9rem; }
}

@media (max-width:640px){
  footer { padding: 1.5rem 0.5rem !important; }
  footer .grid.md\:grid-cols-3 { grid-template-columns: 1fr; gap:16px; }
  footer img[data-logo-footer]{ width:40px !important; height:40px !important; }
  footer h3 { font-size: 0.95rem !important; }
}

/* Hero CTA buttons stacking improvements */
@media (max-width:768px){
  /* Hero section padding */
  section#anasayfa { padding-top: 120px !important; }
  section#anasayfa .max-w-6xl { padding-left: 0.5rem; padding-right: 0.5rem; }
  
  section#anasayfa h1 { 
    font-size: 1.75rem !important;
    line-height: 2.25rem;
    margin-bottom: 1rem;
  }
  
  section#anasayfa > div:nth-child(2) { 
    font-size: 0.95rem !important;
    line-height: 1.5;
    margin-bottom: 1.5rem;
  }
}

@media (max-width:640px){
  section#anasayfa { padding-top: 110px !important; }
  
  section#anasayfa h1 { 
    font-size: 1.5rem !important;
    line-height: 2rem;
  }
  
  section#anasayfa > div:nth-child(2) { 
    font-size: 0.9rem !important;
  }
}

@media (max-width:520px){
  #anasayfa .flex.flex-col.sm\:flex-row { flex-direction: column !important; }
  #anasayfa button { width:100%; margin-top: 0.5rem; }
}

/* Stats section responsive */
@media (max-width: 768px) {
  /* Stats grid -> 2 columns */
  section#hakkimizda .grid.grid-cols-4.gap-8 { 
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
  }
  
  section#hakkimizda .text-3xl.font-bold {
    font-size: 1.75rem !important;
  }
}

@media (max-width: 640px) {
  section#hakkimizda { padding: 2rem 0.5rem !important; }
  
  /* Stats -> 1 column on very small */
  section#hakkimizda .grid.grid-cols-4.gap-8 { 
    grid-template-columns: 1fr !important;
  }
  
  section#hakkimizda .text-3xl.font-bold {
    font-size: 1.5rem !important;
  }
}

/* Contact form responsive */
@media (max-width: 768px) {
  section#iletisim { padding: 2rem 0.5rem !important; }
  
  section#iletisim .grid.grid-cols-1.md\:grid-cols-2 {
    grid-template-columns: 1fr !important;
  }
  
  section#iletisim input, 
  section#iletisim textarea, 
  section#iletisim select {
    font-size: 16px !important; /* Prevents zoom on iOS */
    padding: 0.75rem !important;
  }
  
  section#iletisim button {
    font-size: 16px !important;
    padding: 0.75rem 1.5rem !important;
    min-height: 44px;
  }
}

@media (max-width: 640px) {
  section#iletisim { padding: 1.5rem 0.5rem !important; }
  
  section#iletisim h2 {
    font-size: 1.5rem !important;
    margin-bottom: 1rem;
  }
}

/* Blog filter & search compaction */
@media (max-width:640px){
  .blog-filter-btn { flex:1 1 calc(50% - 6px); text-align:center; }
  #blog-search { font-size:13px !important; }
}

/* Simple animation reduction for prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition:none !important; }
}

/* =============================
   Admin Panel Ek Mobil İyileştirmeler
   ============================= */
@media (max-width:1024px){
  /* Kart gridleri otomatik sığdırma */
  #dashboard-section .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4.gap-6.mb-8 { grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); }
  #dashboard-section .grid.grid-cols-1.lg\:grid-cols-3.gap-6.mb-8 { grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); }
}
@media (max-width:768px){
  /* Sidebar kapalıyken main tam genişlik */
  body.sidebar-open #adminSidebar { transform: translateX(0) !important; }
  #adminMain { padding-bottom:80px; }
  /* Hızlı eylemler derli toplu */
  #dashboard-section .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-5.gap-4 { grid-template-columns: repeat(auto-fit,minmax(170px,1fr)); }
  /* Tablo taşıp yatay scroll oluştursa container ayarla */
  .content-section table { font-size:12px; }
  .content-section table th, .content-section table td { white-space:nowrap; }
  /* Modal kenar boşluklarını azalt */
  .fixed .max-w-3xl, .fixed .max-w-2xl, .fixed .max-w-xl, .fixed .max-w-md { margin:12px auto; }
  /* Çok sütunlu form bloklarını tek sütun yap */
  .content-section .grid.md\:grid-cols-2.gap-4 { grid-template-columns:1fr !important; }
  .content-section .grid.md\:grid-cols-3.gap-4 { grid-template-columns:1fr !important; }
  .content-section .grid.sm\:grid-cols-2.gap-4 { grid-template-columns:1fr !important; }
}
@media (max-width:560px){
  header .flex.items-center.gap-3 img { height:48px; width:48px; }
  header h1 { font-size:18px; }
  header p.text-sm { font-size:11px; }
  #adminSidebar { width:240px !important; }
  #dashboard-section h2.text-2xl { font-size:1.4rem; }
  .stat-card p.text-2xl { font-size:1.5rem; }
}

/* Okunabilirliği artır: activity/message kartları daha az padding */
@media (max-width:640px){
  #recentMessages .message-card, #inboxMessages .message-card { padding:10px !important; }
  #messages-section .filter-btn { flex:1 1 calc(50% - 8px); text-align:center; }
  #messages-section #messageSearch { font-size:13px; }
  #messages-section .grid.grid-cols-1.md\:grid-cols-3.gap-4 { grid-template-columns:1fr !important; }
}

/* =============================
   Sales Panel Ek Mobil İyileştirmeler
   ============================= */
@media (max-width:900px){
  #dashboard-container h1.text-3xl { font-size:2rem; }
  #dashboard-container p.text-sm { line-height:1.35; }
}
@media (max-width:768px){
  /* Özet kutuları esnek dizilim */
  #potentialsSummary, #customersSummary, #performanceMetrics, #pipelineBreakdown { grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); }
  #potentialsList, #customersList { grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); }
  #documentFolders { grid-template-columns: repeat(auto-fit,minmax(140px,1fr)); }
  .portal-section .rounded-2xl.p-6 { padding:18px !important; }
  #sgkPartsContainer { gap:6px; }
}
@media (max-width:560px){
  #dashboard-container header h1.text-3xl { font-size:1.55rem; }
  #dashboard-container header p.mt-2.text-sm { font-size:12px; }
  .folder-card { padding:1rem; }
  #sgkLookupForm input { font-size:14px; }
  #sgkSummaryCard p.text-2xl { font-size:1.4rem; }
}
@media (max-width:420px){
  .portal-tab { flex:1 1 100%; }
  #documentCustomerSelect { max-width:100%; }
  #sgkPartsContainer { grid-template-columns: repeat(auto-fit,minmax(60px,1fr)); }
}

/* Genel küçük ekran yardımcıları */
@media (max-width:520px){
  .truncate-mobile { white-space:normal !important; overflow:visible !important; text-overflow:unset !important; }
}

/* Erişilebilir dokunma alanları */
@media (max-width:640px){
  button, .portal-tab, .sidebar-item { min-height:44px; }
}

  /* ===================== Tema Değişkenleri & Dark Mode ===================== */
  :root {
    --bg: #ffffff;
    --bg-alt: #f8fafc;
    --text: #0f172a;
    --text-alt: #334155;
    --border: #e2e8f0;
    --accent: #2563eb;
    --accent-grad-start: #3b82f6;
    --accent-grad-end: #1d4ed8;
    --card-bg: #ffffff;
    --card-shadow: rgba(0,0,0,0.08);
  }
  body.dark {
    --bg: #0f172a;
    --bg-alt: #1e293b;
    --text: #f1f5f9;
    --text-alt: #cbd5e1;
    --border: #334155;
    --accent: #3b82f6;
    --card-bg: #1e293b;
    --card-shadow: rgba(0,0,0,0.5);
    background-color: var(--bg);
    color: var(--text);
  }
  body.dark .bg-white { background-color: var(--card-bg) !important; color: var(--text); }
  body.dark .text-gray-700, body.dark .text-gray-800 { color: var(--text) !important; }
  body.dark .text-gray-600, body.dark .text-gray-500 { color: var(--text-alt) !important; }
  body.dark .shadow-lg, body.dark .shadow-xl { box-shadow: 0 10px 30px -8px var(--card-shadow) !important; }
  body.dark nav.bg-white { background: var(--bg-alt) !important; }
  body.dark footer { background: #020617 !important; }
  body.dark .hero-bg { background: linear-gradient(135deg, var(--accent-grad-start), var(--accent-grad-end)) !important; }
  body.dark .border-gray-300 { border-color: var(--border) !important; }
  body.dark .bg-gray-50 { background: var(--bg-alt) !important; }
  body.dark .modal-content, body.dark #softwareModal .bg-white, body.dark #contactModal .bg-white { background: var(--bg-alt) !important; }
  body.dark #darkModeToggle { border-color: var(--border); background: var(--bg-alt); color: var(--text); }
  body.dark, body { transition: background-color .35s ease, color .35s ease; }
  @media (prefers-color-scheme: dark) {
    body:not(.light):not(.dark-init) { background-color: var(--bg); color: var(--text); }
  }

  /* ===================== Erişilebilirlik İyileştirmeleri ===================== */
  .focus-outline:focus { outline: 3px solid var(--accent); outline-offset: 2px; }
  .visually-hidden { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0 0 0 0) !important; white-space:nowrap !important; border:0 !important; }
  body.dark [role="dialog"] { outline: none; }
  /* Minimal dark-mode icons */
  .icon-sun, .icon-moon { display:block; }
  .icon-sun circle, .icon-moon path { transition: stroke .3s ease, fill .3s ease; }