/* =====================================================================
   EDITORDEN GELEN ICERIK
   ---------------------------------------------------------------------
   Urun aciklamalari, sayfa metinleri ve haberler panelden TinyMCE ile
   giriliyor. Uretilen HTML duzen kurallarina uymuyor; bu dosya onu
   sayfanin duzenine zorlar.

   EN ONEMLI SORUN: tablo genisligi
   TinyMCE'de tablo suruklenerek boyutlandirilinca satir ici stile
   yuzde deger yaziyor ve bu deger %100'u asabiliyor:

       <table style="width: 101.039%; ...">

   Veritabaninda boyle 1070 kayit var. Tablo kapsayicisindan tasiyor,
   sag taraf kayik gorunuyor ve mobilde sayfayi yatay kaydiriyor.

   Cozum: tabloyu kapsayiciya sabitle, dar ekranda ise tablonun KENDI
   kutusu icinde yatay kaydirilmasina izin ver - sayfa govdesi asla
   yana kaymasin.
   ===================================================================== */

/* Editor icerigi tasiyan kapsayicilar.
   Kaydirma YALNIZCA tablo iceren alanlara verilir. Once tum alanlara
   veriliyordu; ana sayfadaki "Cozum Icerikleri" blogu Bootstrap .row
   kullaniyor, .row'un negatif kenar boslugu kutuyu ~15px tasirdigi
   icin orada anlamsiz bir yatay kaydirma cubugu cikiyordu.
   :has() desteklemeyen eski tarayicilarda kaydirma olmaz; tablolar
   yine de asagidaki kuralla %100'e sabitlenir. */
.icerik-alani:has(table) {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.icerik-alani > table,
.icerik-alani table {
    /* Satir ici "width: 101%" gibi degerleri gecersiz kil */
    width: 100% !important;
    max-width: 100% !important;
    /* Dar ekranda hucreler okunmaz hale gelmesin diye alt sinir:
       kapsayici kaydirilir, sayfa degil */
    min-width: 640px;
    border-collapse: collapse;
    margin-bottom: 1rem;
}

.icerik-alani table td,
.icerik-alani table th {
    padding: 6px 10px;
    vertical-align: middle;
    word-break: break-word;
}

/* Icerikteki gorseller kapsayiciyi asmasin */
.icerik-alani img {
    max-width: 100%;
    height: auto;
}

/* Uzun baglantilar ve kod bloklari da tasmasin */
.icerik-alani a {
    word-break: break-word;
}

.icerik-alani pre {
    overflow-x: auto;
    max-width: 100%;
}

/* colgroup icindeki sabit piksel genislikleri dar ekranda kilitlenmesin */
.icerik-alani table col {
    width: auto !important;
}

@media (max-width: 575.98px) {
    .icerik-alani table {
        font-size: 12px;
    }
    .icerik-alani table td,
    .icerik-alani table th {
        padding: 4px 6px;
    }
}