/* temel.css -- sifirlama, tipografi, kapsayici, izgara, erisilebilirlik.
 *
 * Bilesen yok, yalniz zemin. Ozgulluk dusuk tutuldu (:where) ki bilesen
 * kurallari ve eklentiler bunlari ezmek icin yarisa girmesin.
 */

/* ------------------------------------------------------------- sifirlama */
*, *::before, *::after { box-sizing: border-box; }

:where(html) {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

:where(body) {
  margin: 0;
  background: var(--ss-zemin);
  color: var(--ss-metin);
  font-family: var(--ss-yazi);
  font-size: var(--ss-o4);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

:where(img, svg, video, canvas, iframe) {
  display: block;
  max-width: 100%;
}
:where(img, video) { height: auto; }

:where(input, button, textarea, select) { font: inherit; color: inherit; }

:where(button) { cursor: pointer; }

/* ------------------------------------------------------------ tipografi */
:where(h1, h2, h3, h4, h5, h6) {
  margin: 0 0 var(--ss-b3);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -.015em;
  text-wrap: balance;
}
:where(h1) { font-size: clamp(var(--ss-o7), 3.6vw, var(--ss-o8)); letter-spacing: -.025em; }
:where(h2) { font-size: clamp(var(--ss-o6), 2.4vw, var(--ss-o7)); }
:where(h3) { font-size: var(--ss-o5); }
:where(h4) { font-size: var(--ss-o4); }

:where(p) { margin: 0 0 var(--ss-b4); }

:where(a) {
  color: var(--ss-marka);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}
:where(a:hover) { text-decoration-thickness: 2px; }

:where(code, kbd, pre) { font-family: var(--ss-kod); font-size: .92em; }

/* ------------------------------------------------------------ kapsayici */
.ss-kap {
  width: 100%;
  max-width: var(--ss-kap);
  margin-inline: auto;
  padding-inline: var(--ss-yan);
}

/* Govde + yan sutun. Mobilde tek sutun; 1024 ustunde yan sutun 300px. */
.ss-duzen {
  display: grid;
  gap: var(--ss-b6);
  grid-template-columns: minmax(0, 1fr);
  padding-block: var(--ss-b6) var(--ss-b8);
}
@media (min-width: 1024px) {
  .ss-duzen--yanli { grid-template-columns: minmax(0, 1fr) 300px; }
}

/* -------------------------------------------------------------- izgara
   Sutun sayisi bolum kaydindan geliyor (ss_bolum_kaydet: sutun). */
.ss-izgara {
  display: grid;
  gap: var(--ss-b5);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 600px) {
  .ss-izgara--2, .ss-izgara--3, .ss-izgara--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .ss-izgara--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ss-izgara--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ----------------------------------------------------- erisilebilirlik */
.ss-gizli {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Icerige atla: klavye kullanicisi menuyu her sayfada tek tek gecmesin. */
.ss-atla {
  position: absolute;
  top: var(--ss-b2);
  left: var(--ss-b2);
  z-index: var(--ss-z-perde);
  padding: var(--ss-b2) var(--ss-b4);
  border-radius: var(--ss-r-s);
  background: var(--ss-marka);
  color: var(--ss-marka-us);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--ss-sure) var(--ss-egri);
}
.ss-atla:focus { transform: none; }

/* Odak halkasi: yalniz klavyede. Silinmiyor, gizlenmiyor. */
:where(:focus-visible) {
  outline: 2px solid var(--ss-marka);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ---------------------------------------------------------------- icerik
   Yazinin govdesi. Genislik 68ch: satir basini goz kaybetmesin. */
.ss-icerik { max-width: 68ch; }
.ss-icerik > * + * { margin-top: var(--ss-b4); }
.ss-icerik :where(h2) { margin-top: var(--ss-b7); }
.ss-icerik :where(h3) { margin-top: var(--ss-b6); }
.ss-icerik :where(ul, ol) { padding-left: 1.25em; }
.ss-icerik :where(li + li) { margin-top: var(--ss-b1); }
.ss-icerik :where(img) { border-radius: var(--ss-r); }
.ss-icerik :where(blockquote) {
  margin: var(--ss-b5) 0;
  padding: var(--ss-b2) var(--ss-b5);
  border-left: 3px solid var(--ss-marka);
  color: var(--ss-sessiz);
}
.ss-icerik :where(pre) {
  overflow-x: auto;
  padding: var(--ss-b4);
  border-radius: var(--ss-r);
  background: var(--ss-yuzey-2);
}
.ss-icerik :where(table) {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ss-o3);
}
.ss-icerik :where(th, td) {
  padding: var(--ss-b2) var(--ss-b3);
  border-bottom: 1px solid var(--ss-cizgi);
  text-align: left;
}

/* WordPress hizalama siniflari */
.alignleft  { float: left;  margin: 0 var(--ss-b5) var(--ss-b4) 0; }
.alignright { float: right; margin: 0 0 var(--ss-b4) var(--ss-b5); }
.aligncenter { margin-inline: auto; }
.alignwide { max-width: 100%; }
.wp-caption-text, figcaption {
  margin-top: var(--ss-b2);
  font-size: var(--ss-o2);
  color: var(--ss-sessiz);
}