/* ============================================
   KELAM KITAP - MOBİL UYUM CSS
   Tüm sayfaları kapsar (public + admin)
   ============================================ */

/* === Yatay scroll engelle === */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* === Tüm görseller responsive === */
img, video, iframe, embed, object {
  max-width: 100%;
  height: auto;
}

/* === Form inputları mobilde zoom etmesin (iOS) === */
input, textarea, select, button {
  font-size: 16px !important;
}
@media(min-width:769px){
  input, textarea, select, button {
    font-size: 14px !important;
  }
  input.text-lg, textarea.text-lg { font-size: 16px !important; }
}

/* === Dokunma alanı minimum 44x44 (a11y) === */
@media(max-width:768px){
  a, button, .btn, input[type=submit], input[type=button] {
    min-height: 44px;
  }
  a.inline, a.text-xs, a.text-sm {
    min-height: 0;
  }
  .btn-sm, button.btn-sm {
    min-height: 36px;
  }
}

/* === Tablo wrapper - mobilde yatay scroll === */
@media(max-width:768px){
  table:not(.no-mobile-scroll) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
}

/* === Container padding mobilde küçük === */
@media(max-width:640px){
  .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* === Tipografi otomatik küçülme === */
@media(max-width:640px){
  h1, .text-4xl, .text-5xl { font-size: 1.75rem !important; line-height: 1.2 !important; }
  h2, .text-3xl { font-size: 1.5rem !important; line-height: 1.25 !important; }
  h3, .text-2xl { font-size: 1.25rem !important; line-height: 1.3 !important; }
  .text-xl { font-size: 1.125rem !important; }
}

/* === Grid'ler mobilde tek sütun === */
@media(max-width:640px){
  .grid.md\:grid-cols-2 { grid-template-columns: 1fr !important; }
  .grid.md\:grid-cols-3 { grid-template-columns: 1fr !important; }
  .grid.md\:grid-cols-4 { grid-template-columns: 1fr !important; }
}

/* === Flex'ler mobilde dikey === */
@media(max-width:640px){
  .md\:flex-row { flex-direction: column !important; }
  .auto-stack-mobile { flex-direction: column !important; align-items: stretch !important; gap: 8px !important; }
  .auto-stack-mobile > * { width: 100% !important; }
}

/* === Sticky header mobilde kompakt === */
@media(max-width:640px){
  header.sticky {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
}

/* === Modal/dropdown viewport sığma === */
.modal, [role=dialog] {
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 64px);
  overflow-y: auto;
}

/* === Sepet/checkout 2-kolon layout mobilde alt alta === */
@media(max-width:1024px){
  .cart-layout, .checkout-layout {
    grid-template-columns: 1fr !important;
  }
  .cart-summary, .checkout-summary {
    position: static !important;
    margin-top: 16px !important;
  }
}

/* === Admin sidebar mobilde drawer === */
@media(max-width:1024px){
  .admin-sidebar {
    transform: translateX(-100%);
    transition: transform 0.3s;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 100;
    box-shadow: 4px 0 12px rgba(0,0,0,0.1);
  }
  .admin-sidebar.open {
    transform: translateX(0);
  }
  .admin-content {
    margin-left: 0 !important;
    width: 100% !important;
  }
  .admin-mobile-toggle {
    display: block !important;
  }
}

/* === Kitap kartı responsive === */
@media(max-width:640px){
  .book-card {
    padding: 8px !important;
  }
  .book-card img {
    height: 180px !important;
  }
  .book-card h3 {
    font-size: 14px !important;
  }
  .book-card .price {
    font-size: 16px !important;
  }
}

/* === Üst bar mobilde kompakt === */
@media(max-width:640px){
  .top-bar {
    font-size: 11px !important;
    padding: 4px 8px !important;
  }
  .top-bar .hidden-on-mobile {
    display: none !important;
  }
}

/* === Footer mobilde === */
@media(max-width:640px){
  footer .grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    text-align: center;
  }
  footer .social-icons {
    justify-content: center !important;
  }
}

/* === Form layouts mobilde === */
@media(max-width:640px){
  .form-row-2col, .row2, .cr {
    grid-template-columns: 1fr !important;
  }
}

/* === Buton grupları === */
@media(max-width:640px){
  .button-group {
    flex-direction: column;
    width: 100%;
  }
  .button-group > * {
    width: 100% !important;
  }
}

/* === Hesabım menüsü === */
@media(max-width:768px){
  .account-layout {
    grid-template-columns: 1fr !important;
  }
  .account-sidebar {
    position: static !important;
    margin-bottom: 20px;
  }
  .account-sidebar nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .account-sidebar nav a {
    flex: 1 1 auto;
    text-align: center;
    min-width: 120px;
  }
}

/* === Sipariş detay kartı === */
@media(max-width:640px){
  .order-card .order-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    font-size: 13px;
  }
}

/* === Blog === */
@media(max-width:640px){
  .blog-grid {
    grid-template-columns: 1fr !important;
  }
  .blog-sidebar {
    margin-top: 24px;
  }
  .blog-post-content h2 { font-size: 1.5rem !important; }
  .blog-post-content h3 { font-size: 1.25rem !important; }
  .blog-post-content p { font-size: 1rem !important; line-height: 1.7 !important; }
}

/* === Admin form'ları === */
@media(max-width:640px){
  .admin-form-row {
    grid-template-columns: 1fr !important;
  }
  .admin-actions {
    flex-direction: column;
    gap: 8px;
  }
  .admin-actions > * {
    width: 100%;
    text-align: center;
  }
}

/* === Tab'lar mobilde scroll === */
.tabs-mobile-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
  scrollbar-width: thin;
}

/* === Resim galeri mobilde === */
@media(max-width:640px){
  .image-gallery {
    grid-template-columns: 1fr !important;
  }
}

/* === Genel iyileştirmeler === */
* {
  -webkit-tap-highlight-color: rgba(92, 138, 111, 0.1);
}

@media(max-width:640px){
  /* Sayfa kenar boşlukları */
  section, article, main {
    padding-left: 0;
    padding-right: 0;
  }
}

/* === Print tarzı: çok geniş kartları kucaklat === */
.responsive-card {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

/* === Search bar mobile fix === */
@media(max-width:640px){
  form[role=search] input {
    min-width: 0;
    flex: 1;
  }
}

/* === Pagination mobilde === */
@media(max-width:640px){
  .pagination {
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px !important;
  }
  .pagination a, .pagination span {
    padding: 8px 12px !important;
    font-size: 14px !important;
  }
}

/* === iOS safe area === */
@supports(padding:max(0px)){
  body {
    padding-bottom: max(0px, env(safe-area-inset-bottom));
  }
  header.sticky {
    padding-top: max(8px, env(safe-area-inset-top));
  }
}

/* === Hover'lar mobilde devre dışı (touch-friendly) === */
@media(hover:none){
  .card:hover {
    transform: none !important;
    box-shadow: none !important;
  }
}

/* === Sepet sayısı badge mobilde === */
@media(max-width:640px){
  .cart-badge {
    font-size: 10px !important;
    min-width: 18px !important;
    height: 18px !important;
  }
}