/*
 * Webreta Panel — içerik stilleri.
 *
 * Editörün ürettiği HTML'i site tarafında doğru göstermek için. Temanın
 * kendi tipografisiyle çakışmasın diye her şey `.wr-content` altında:
 *
 *   <article class="wr-content" dangerouslySetInnerHTML={{ __html: post.content }} />
 *
 * ve sayfaya bir kez:
 *   <link rel="stylesheet" href="/panel/assets/content.css" />
 *
 * Renk ve yazı tipi belirlemiyoruz — onlar temanın işi. Burada yalnızca
 * editörde seçilen yapısal biçimlerin karşılığı var (görsel hizalama,
 * alıntı, kod bloğu, liste, ayırıcı).
 */

.wr-content > * + * { margin-top: 1em; }

.wr-content h2 { font-size: 1.6em; line-height: 1.25; margin-top: 1.6em; }
.wr-content h3 { font-size: 1.3em; line-height: 1.3; margin-top: 1.5em; }
.wr-content h4 { font-size: 1.1em; margin-top: 1.4em; }

.wr-content ul, .wr-content ol { padding-left: 1.4em; }
.wr-content li + li { margin-top: .35em; }

.wr-content blockquote {
  border-left: 3px solid currentColor;
  padding-left: 1em;
  opacity: .85;
  font-style: italic;
}

.wr-content pre {
  overflow-x: auto;
  padding: 1em 1.1em;
  border-radius: 8px;
  background: #1E2A44;
  color: #E8EDF7;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .9em;
  line-height: 1.6;
}

.wr-content hr {
  border: 0;
  border-top: 1px solid currentColor;
  opacity: .18;
  margin: 2.2em 0;
}

.wr-content a { text-decoration: underline; }

/* ------------------------------------------------------ görseller ------ */

.wr-content img { max-width: 100%; height: auto; display: block; }
.wr-content figure { margin: 1.6em 0; }
.wr-content figcaption { margin-top: .5em; font-size: .88em; opacity: .7; }

.wr-content figure.align-center { text-align: center; }
.wr-content figure.align-center img { margin-inline: auto; }

/* Metin görselin yanından aksın. Dar ekranda sarma okunmuyor, kapatılıyor. */
.wr-content figure.align-left,
.wr-content figure.align-right { max-width: 48%; }

@media (min-width: 700px) {
  .wr-content figure.align-left {
    float: left;
    margin: .4em 1.6em 1em 0;
  }
  .wr-content figure.align-right {
    float: right;
    margin: .4em 0 1em 1.6em;
  }
}

@media (max-width: 699px) {
  .wr-content figure.align-left,
  .wr-content figure.align-right { max-width: 100%; float: none; }
}

/* Tam genişlik: kapsayıcıyı taşırıp kenardan kenara gider. */
.wr-content figure.align-wide img { width: 100%; }

/* Panel 0.5.0+ editörü: hiza ve genişlik satır içi stil + data-align olarak
   gelir (temada kural olmasa da doğru görünür). Alt yazılı / bağlantılı
   görsel <figure class="wr-figure">. Dar ekranda yaslama kapatılır. */
.wr-content img[data-align=center] { margin-inline: auto; }
.wr-content figure.wr-figure img { margin: 0; }
.wr-content figure.wr-figure figcaption { text-align: center; }
.wr-content figure.wr-figure a { border: 0; text-decoration: none; }
.wr-content span[style*="background-color"] { padding: 0 .12em; border-radius: 3px; }
@media (max-width: 640px) {
  .wr-content img[data-align=left], .wr-content img[data-align=right],
  .wr-content figure[data-align=left], .wr-content figure[data-align=right] {
    float: none !important; width: 100% !important; margin: 1em 0 !important;
  }
}

/* Float'lar bir sonraki bölüme taşmasın. */
.wr-content::after { content: ""; display: block; clear: both; }

/* ------------------------------------------------------- tablolar ------ */

/* Dar ekranda tablo sayfayı taşırmasın: yatay kaydırılır. */
.wr-content .tableWrapper { overflow-x: auto; }
.wr-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: .94em;
}
.wr-content th,
.wr-content td {
  padding: .7em .9em;
  border: 1px solid rgba(0, 0, 0, .1);
  text-align: left;
  vertical-align: top;
}
.wr-content th { font-weight: 600; }
.wr-content td > p,
.wr-content th > p { margin: 0; }