/* Bileşen: Ortak içerik biçimleri
   SSS · tablo · paragraf · başlık · liste · alıntı · görsel
   Tek kaynak: her sayfa ve yazı aynı görünür. */

.ar-icerik {
  --ar-olcu: 46em;
}

/* OKUMA OLCUSU YALNIZCA DUZYAZIYA UYGULANIR.
   Onceki kural ".ar-icerik > *" ile HER cocugu 46em'e sikistiriyor, sonra
   uzun bir muafiyet listesi tutuyordu. Bu ters bir yaklasimdi: listede
   olmayan her tam genislikli tasarim bolumu sessizce yariya kirpiliyordu —
   .ar-hak2-sayilar'in gri zemini sayfanin sadece sol yarisini kapliyor,
   .ar-fiyat icindeki banner ise 272px sola kayiyordu.

   Dogrusu tersi: olcu SADECE metin ogelerine uygulanir. Bir <section> ya da
   tasarim <div>'i hic dokunulmadan gecer, dolayisiyla yeni bir bolum
   eklendiginde muafiyet listesine eklemeyi unutmak diye bir hata kalmaz. */
.ar-icerik > :is(p, h1, h2, h3, h4, h5, h6, ul, ol, dl, blockquote, pre) {
  max-width: var(--ar-olcu);
}

/* Tam genislik isteyen metin bloklari yine de kisitlanmaz. */
.ar-icerik > .alignwide,
.ar-icerik > .alignfull {
  max-width: none;
}

/* --- Tipografi --- */

.ar-icerik p {
  font-size: 1.0625rem;
  line-height: 1.78;
  color: var(--ar-ink);
}

.ar-icerik h2 {
  margin-top: clamp(38px, 5vw, 60px);
  font-family: var(--ar-font-heading);
  font-size: clamp(1.5rem, 3vw, 2.125rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--ar-navy);
  scroll-margin-top: 110px;
}

.ar-icerik h3 {
  margin-top: clamp(28px, 3.4vw, 40px);
  font-family: var(--ar-font-heading);
  font-size: clamp(1.2rem, 2vw, 1.4rem);
  font-weight: 600;
  color: var(--ar-navy);
  scroll-margin-top: 110px;
}

.ar-icerik a:not(.wp-block-button__link) {
  color: var(--ar-green-deep);
  text-decoration-color: color-mix(in srgb, var(--ar-green) 45%, transparent);
  text-underline-offset: 3px;
}

.ar-icerik a:not(.wp-block-button__link):hover {
  text-decoration-color: currentcolor;
}

/* --- Liste --- */

.ar-icerik ul,
.ar-icerik ol {
  padding-left: 1.35em;
  line-height: 1.78;
  color: var(--ar-ink);
}

.ar-icerik li + li {
  margin-top: 8px;
}

.ar-icerik ul li::marker {
  color: var(--ar-green);
}

/* --- Alıntı --- */

.ar-icerik blockquote {
  padding: 4px 0 4px 22px;
  margin-inline: 0;
  font-size: 1.0625rem;
  font-style: italic;
  line-height: 1.7;
  color: var(--ar-navy);
  border-left: 3px solid var(--ar-green);
}

/* --- Görsel --- */

.ar-icerik img {
  max-width: 100%;
  height: auto;
  border-radius: var(--ar-radius-md);
}

.ar-icerik figcaption {
  margin-top: 8px;
  font-size: 0.8125rem;
  color: var(--ar-muted);
}

/* --- Tablo -------------------------------------------------------------
   Kap yatay kaydırılır: geniş tablo mobilde sayfayı yana taşırıyordu. */

.ar-tablo-kap {
  margin-block: clamp(22px, 3vw, 32px);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.ar-icerik table,
.ar-tablo-kap table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 0.9375rem;
  background: #fff;
  border: 1px solid var(--ar-border);
  border-radius: var(--ar-radius-md);
  overflow: hidden;
}

.ar-icerik th,
.ar-tablo-kap th {
  padding: 13px 16px;
  font-weight: 600;
  color: #fff;
  text-align: left;
  background: var(--ar-navy);
}

.ar-icerik td,
.ar-tablo-kap td {
  padding: 12px 16px;
  color: var(--ar-ink);
  border-top: 1px solid var(--ar-border);
}

.ar-icerik tbody tr:nth-child(even),
.ar-tablo-kap tbody tr:nth-child(even) {
  background: var(--ar-silver-soft);
}

/* --- SSS ---------------------------------------------------------------
   Çekirdeğin details bloğu; kendi bloğumuzu yazmıyoruz. */

.ar-sss-baslik {
  margin-top: clamp(38px, 5vw, 60px);
}

.ar-icerik details,
.ar-sss {
  max-width: var(--ar-olcu);
  margin-block: 10px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--ar-border);
  border-radius: var(--ar-radius-md);
  transition: border-color var(--ar-transition), box-shadow var(--ar-transition);
}

.ar-icerik details[open],
.ar-sss[open] {
  border-color: color-mix(in srgb, var(--ar-green) 45%, transparent);
  box-shadow: var(--ar-shadow-sm);
}

.ar-icerik summary,
.ar-sss summary {
  position: relative;
  padding: 16px 52px 16px 20px;
  font-family: var(--ar-font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ar-navy);
  cursor: pointer;
  list-style: none;
}

/* Varsayılan üçgen işaretçiyi kaldır — kendi artı/eksi işaretimiz var. */
.ar-icerik summary::-webkit-details-marker,
.ar-sss summary::-webkit-details-marker {
  display: none;
}

.ar-icerik summary::marker,
.ar-sss summary::marker {
  content: "";
}

/* Artı işareti: iki çizgi, açılınca dikey olan kayboluyor. */
/*
 * ARTI IKONU KALDIRILDI.
 *
 * Bu kurallar summary'nin sagina iki cizgiyle bir arti ciziyordu.
 * Akordeon isareti artik ayri bir oge (.ar-sss__isaret) ve SAGA BAKAN
 * OK — sitede her yerde kullanilan isaretin ayni. Ikisi birden
 * kalinca kutunun saginda hem ok hem arti gorunuyordu.
 *
 * Yalnizca .ar-icerik icinde ELLE kurulmus <details> bloklari icin
 * bir isaret gerekiyorsa .ar-sss__isaret ile birlikte kullanilmali.
 */

.ar-icerik summary:focus-visible,
.ar-sss summary:focus-visible {
  outline: 2px solid var(--ar-navy);
  outline-offset: -2px;
}

.ar-icerik details > *:not(summary),
.ar-sss > *:not(summary) {
  padding-inline: 20px;
}

.ar-icerik details > *:not(summary):last-child,
.ar-sss > *:not(summary):last-child {
  padding-bottom: 18px;
}

.ar-icerik details p,
.ar-sss p {
  margin-block: 0 12px;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--ar-muted);
}

@media (prefers-reduced-motion: reduce) {
  .ar-icerik summary::before,
  .ar-sss summary::before,
  .ar-icerik details,
  .ar-sss {
    transition: none;
  }
}

/* İç bağlantılar (inc/internal-links.php) — içerik metnine sonradan
   eklenen bağlantılar. Normal bağlantılardan ayırt edilebilir olmalı
   ama metin akışını bölmemeli: alt çizgi var, renk değişimi hoverda. */
.ar-ic-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--ar-green-light);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color var(--ar-transition);
}

.ar-ic-link:hover,
.ar-ic-link:focus-visible {
  color: var(--ar-green-deep);
  text-decoration-color: var(--ar-green);
}

/* Koyu bölümde yeşil koyu tonu okunmuyor — açık yeşile geçer. */
.ar-sahne.ar-sahne .ar-ic-link:hover,
.ar-sahne.ar-sahne .ar-ic-link:focus-visible {
  color: var(--ar-green-light);
}