/* Temel düzen — tam genişlik bölümler ve duyarlı kap.
   Tüm sayfalar aynı kuralı paylaşır: bölüm arka planı ekranı kaplar,
   içerik ortalanmış bir kap içinde durur. */

:root {
  /* Kenar boşluğu ekran genişliğine göre yumuşak büyür; sabit 24px dar
     ekranda çok, geniş ekranda az kalıyordu. */
  --ar-gutter: clamp(16px, 4vw, 32px);
}

/* Blok temada gövde kabı içeriği daraltıyor; tam genişlik bölümler
   bunun dışına taşabilmeli. */
.alignfull,
.ar-tam {
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* Yatay taşma koruması: bir bölüm 100vw'den geniş olursa tüm sayfa yana
   kayıyor ve mobilde düzen bozuluyor. Kaynağı bulmak zor olduğu için
   kökten engelleniyor. */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}

/* Ortak içerik kabı */
.ar-kap {
  max-width: var(--ar-container);
  margin-inline: auto;
  padding-inline: var(--ar-gutter);
}

/* Görseller hiçbir zaman kabı taşırmaz. */
img,
video,
iframe,
svg {
  max-width: 100%;
  height: auto;
}

/* Uzun kelime/adres taşmasın (mobilde en sık bozulma sebebi). */
h1, h2, h3, h4,
p, li, dd, dt,
blockquote, figcaption {
  overflow-wrap: break-word;
}

/* Dokunma hedefleri en az 44px — mobilde bağlantılara isabet edilebilsin. */
@media (hover: none) {
  .wp-block-button__link,
  .ar-dugme,
  button,
  .ar-nav__baglanti {
    min-height: 44px;
  }
}