/* Dar ekran düzeltmeleri - her sayfada yüklenir.
 *
 * Panel Gentelella'nın masaüstü ölçülerine göre kurulmuş; telefon ve
 * tablette dar kalan yerler burada toplanıyor. Ayrı dosya: sayfaya özel
 * değil, düzenin tamamını ilgilendiriyor ve tek yerden okunabilsin.
 */

/* ── Altlık: telefon ve tablette YOK ──────────────────────────────────
 *
 * "Bayi Sözleşmesi / KVKK" bağlantıları ekranın altına SABİTLENMİŞ
 * (`.page-fixed-footer`) ve dar ekranda içeriğin üstüne binen bir şerit
 * oluşturuyordu: kısa ekranda ürün kartının bir kısmını örtüyor, her
 * kaydırmada yerinde duruyordu. İki bağlantı da yasal metin - günlük
 * kullanımda kimse dokunmuyor, masaüstünde erişilebilir kalıyor.
 *
 * Altlık gizlenince temanın ona ayırdığı alt boşluk da geri alınıyor,
 * yoksa sayfanın altında boş bir bant kalır.
 */
@media (max-width: 1024px) {
  .page-fixed-footer .footer { display: none; }
  .page-fixed-footer .page-wrapper { padding-bottom: 16px; }
}

/* ── İki sütun kaplayan kart ──────────────────────────────────────────
 *
 * `.row.col-2` dar ekranda TEK sütuna düşüyor; içindeki "iki sütun kapla"
 * kartı orada ikinci bir sütunun (implicit column) doğmasına yol açıyordu.
 * Izgara ekrandan taşıyor, yanındaki kartlar daralıp kayboluyordu - Firma
 * Bilgilerim'de "Firma" kartı telefonda hiç görünmüyordu.
 *
 * Kural sınıf üzerinden: eskiden `style="grid-column:span 2"` satır içiydi
 * ve satır içi stili yalnız `!important` ezebiliyordu.
 */
.card-span-2 { grid-column: span 2; }

@media (max-width: 768px) {
  .card-span-2 { grid-column: auto; }
}

/* ── Tablolar ─────────────────────────────────────────────────────────
 *
 * Dar ekranda hücreler sıkışınca ürün adları harf harf kırılıyordu
 * ("Dijital / İç / Dikiz / Aynası ..."), fiyat sütunları da okunmaz hâle
 * geliyordu. Tabloya alt genişlik verilip yatay kaydırmaya bırakılıyor:
 * satır bütün olarak okunuyor, kullanıcı yana kaydırıp kalan sütunlara
 * bakıyor. `.table-responsive` sarmalayıcısı zaten kaydırmayı sağlıyor.
 */
@media (max-width: 1024px) {
  .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Hücreler SARMAZ: tabloya sabit bir alt genişlik vermek yerine içerik
     kendi genişliğini belirler, tablo gerektiği kadar uzar ve yana kayar.
     Sabit `min-width` denendi ve profil/ticari gibi iki sütunlu küçük
     bilgi tablolarını da geriyordu - değerler ekranın dışında kalıyordu. */
  .table th,
  .table td { white-space: nowrap; }

  /* Uzun metin taşıyan hücreler (ürün adı) istisna: tek satıra zorlanırsa
     satır metrelerce uzar. Sararlar ama dar da kalmazlar. */
  .table td.cell-wrap {
    white-space: normal;
    min-width: 190px;
  }
}

/* ── Çok sütunlu tablolar telefonda KART ──────────────────────────────
 *
 * Sepet ve siparişler yedi sütuna kadar çıkıyor; yatay kaydırmayla bakmak
 * demek, tutarı görmek için her satırda sağa kaydırmak demekti. `.table-cards`
 * işaretli tablolarda her SATIR bir karta dönüşür: başlık satırı gizlenir,
 * her hücre "etiket: değer" biçiminde alt alta dizilir. Etiket `data-label`
 * özniteliğinden okunur (şablonlarda yazılı), böylece sütun başlığı
 * kaybolmaz.
 *
 * Eşik 900px: telefonun yanı sıra DİKEY TABLET de kapsanıyor - 820px'de
 * yedi sütun sığmıyordu, "Ödeme" sütunu ekranın dışında kalıyordu. Yatay
 * tablet ve üstünde (>=900px) tablo korunuyor: orada sütunlar sığıyor ve
 * satırları yan yana karşılaştırmak daha kolay.
 */
@media (max-width: 900px) {
  .table-cards,
  .table-cards tbody,
  .table-cards tr,
  .table-cards td {
    display: block;
    width: auto;
  }
  /* Kart düzeninde tablonun alt genişliğine gerek yok - yatay kaydırma da
     kalkar. */
  .table-cards { min-width: 0; }
  .table-responsive:has(.table-cards) { overflow-x: visible; }

  .table-cards thead { display: none; }

  .table-cards tr {
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 12px;
    margin-bottom: 10px;
  }
  .table-cards tr:last-child { margin-bottom: 0; }

  .table-cards td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 0;
    border: none;
    white-space: normal;
    min-width: 0;
    text-align: right;
  }
  .table-cards td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-muted);
    text-align: left;
  }

  /* Kartın başlığı (ürün adı / sipariş no): etiketsiz, tam genişlik, altında
     ince ayraç. */
  .table-cards td.cell-head {
    display: block;
    text-align: left;
    padding: 0 0 9px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--border-color-light, var(--border-color));
  }
  .table-cards td.cell-head::before { content: none; }

  /* Etiketsiz eylem hücresi (kaldır düğmesi) sağa yaslanır. */
  .table-cards td.cell-action { justify-content: flex-end; padding-top: 8px; }
  .table-cards td.cell-action::before { content: none; }

  /* Toplam satırı öne çıksın - kartta en çok aranan sayı. */
  .table-cards td[data-label="Toplam"] strong,
  .table-cards td[data-label="Tutar"] { font-size: 15px; }
}