/* bilesen.css -- kart, rozet, dugme, sayfalama, arama formu, yorumlar.
 *
 * Bolumler (haber, oyun, program, blog) ayni kartla basliyor; farki
 * yalniz vurgu rengi (data-renk). Bolum kendi kartini isterse
 * template-parts/kart-<ad>.php yazar, bicimi yine buradan alir.
 */

/* ----------------------------------------------------------------- kart */
.ss-kart {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--ss-cizgi);
  border-radius: var(--ss-r-b);
  background: var(--ss-yuzey);
  box-shadow: var(--ss-golge);
  transition: box-shadow var(--ss-sure) var(--ss-egri), transform var(--ss-sure) var(--ss-egri);
}
.ss-kart:hover { box-shadow: var(--ss-golge-kalk); transform: translateY(-2px); }

/* Gorsel alani yer ayiriyor: gorsel yuklenirken kart ziplamasin (CLS). */
.ss-kart__gorsel {
  aspect-ratio: 16 / 9;
  background: var(--ss-yuzey-2);
  overflow: hidden;
}
.ss-kart__gorsel img { width: 100%; height: 100%; object-fit: cover; }

.ss-kart__govde {
  display: flex;
  flex-direction: column;
  gap: var(--ss-b2);
  flex: 1;
  padding: var(--ss-b4) var(--ss-b5) var(--ss-b5);
}
.ss-kart__ust { display: flex; align-items: center; gap: var(--ss-b2); flex-wrap: wrap; }

/* Kartin baslik etiketi cagiranin karari (span/h2/h3); bicim ayni. */
.ss-kart__baslik {
  margin: 0;
  font-size: var(--ss-o5);
  line-height: 1.35;
  font-weight: 700;
}
.ss-kart__baslik a { color: var(--ss-metin); text-decoration: none; }
/* Tum kart tiklanabilir: baglantinin kapsama alani karta yayiliyor. */
.ss-kart { position: relative; }
.ss-kart__baslik a::after { content: ""; position: absolute; inset: 0; }

.ss-kart__ozet {
  margin: 0;
  color: var(--ss-sessiz);
  font-size: var(--ss-o3);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ss-kart__dip {
  margin-top: auto;
  padding-top: var(--ss-b2);
  color: var(--ss-sessiz);
  font-size: var(--ss-o2);
}

/* ---------------------------------------------------------------- rozet */
.ss-rozet {
  display: inline-flex;
  align-items: center;
  gap: var(--ss-b1);
  padding: .15rem .6rem;
  border-radius: 999px;
  background: var(--ss-marka-yum);
  color: var(--ss-marka-cip);
  font-size: var(--ss-o1);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  position: relative;
  z-index: 1;          /* kartin yayilmis baglantisinin ustunde */
}
[data-renk="guven"] .ss-rozet { background: var(--ss-guven-yum); color: var(--ss-guven); }
[data-renk="sicak"] .ss-rozet { background: var(--ss-sicak-yum); color: var(--ss-sicak); }
[data-renk="mor"]   .ss-rozet { background: var(--ss-mor-yum);   color: var(--ss-mor); }

/* ---------------------------------------------------------------- dugme */
.ss-dug {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ss-b2);
  min-height: 44px;
  padding: 0 var(--ss-b5);
  border: 1px solid transparent;
  border-radius: var(--ss-r-s);
  background: var(--ss-marka);
  color: var(--ss-marka-us);
  font-weight: 600;
  font-size: var(--ss-o3);
  text-decoration: none;
  transition: filter var(--ss-sure) var(--ss-egri);
}
.ss-dug:hover { filter: brightness(1.08); }
.ss-dug--ikincil {
  background: var(--ss-yuzey);
  border-color: var(--ss-cizgi-guclu);
  color: var(--ss-metin);
}

/* ------------------------------------------------------------- sayfalama */
.ss-sayfalama { margin-top: var(--ss-b7); }
.ss-sayfalama ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ss-b1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ss-sayfalama .page-numbers {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding: 0 var(--ss-b3);
  border: 1px solid var(--ss-cizgi);
  border-radius: var(--ss-r-s);
  background: var(--ss-yuzey);
  color: var(--ss-metin);
  font-weight: 600;
  text-decoration: none;
}
.ss-sayfalama .page-numbers.current {
  background: var(--ss-marka);
  border-color: var(--ss-marka);
  color: var(--ss-marka-us);
}
.ss-sayfalama .page-numbers.dots { border-color: transparent; background: transparent; }

/* ---------------------------------------------------------- arama formu */
.ss-arama { display: flex; gap: var(--ss-b2); max-width: 520px; }
.ss-arama__giris {
  flex: 1;
  min-height: 44px;
  padding: 0 var(--ss-b4);
  border: 1px solid var(--ss-cizgi-guclu);
  border-radius: var(--ss-r-s);
  background: var(--ss-yuzey);
}
.ss-arama__giris:focus { border-color: var(--ss-marka); outline: none; }

/* -------------------------------------------------------- sayfa basligi
   Alt bosluk burada: izgara basliga yapismasin. (Once sablonda satir ici
   style="margin-top" vardi; temada satir ici bicim yok.) */
.ss-sayfa-ust { padding-block: var(--ss-b6); }
.ss-sayfa-ust__baslik { margin: 0 0 var(--ss-b2); }
.ss-sayfa-ust__aciklama { max-width: 68ch; color: var(--ss-sessiz); }

/* ---------------------------------------------------------------- yorum */
.ss-yorumlar { margin-top: var(--ss-b8); max-width: 68ch; }
.ss-yorumlar .comment-list { margin: 0; padding: 0; list-style: none; }
.ss-yorumlar .comment-list .children { margin: 0; padding-left: var(--ss-b5); list-style: none; }
.ss-yorumlar .comment-body {
  margin-bottom: var(--ss-b4);
  padding: var(--ss-b4);
  border: 1px solid var(--ss-cizgi);
  border-radius: var(--ss-r);
  background: var(--ss-yuzey);
}
.ss-yorumlar .comment-meta { font-size: var(--ss-o2); color: var(--ss-sessiz); }
.ss-yorumlar :where(input[type="text"], input[type="email"], input[type="url"], textarea) {
  width: 100%;
  padding: var(--ss-b3);
  border: 1px solid var(--ss-cizgi-guclu);
  border-radius: var(--ss-r-s);
  background: var(--ss-yuzey);
}
.ss-yorumlar .submit {
  min-height: 44px;
  padding: 0 var(--ss-b5);
  border: 0;
  border-radius: var(--ss-r-s);
  background: var(--ss-marka);
  color: var(--ss-marka-us);
  font-weight: 600;
}

/* ------------------------------------------------------------ bos durum */
.ss-bos {
  padding: var(--ss-b7) var(--ss-b5);
  border: 1px dashed var(--ss-cizgi-guclu);
  border-radius: var(--ss-r-b);
  text-align: center;
  color: var(--ss-sessiz);
}

/* --------------------------------------------------------------- tekil */
.ss-tekil__gorsel { margin: 0 0 var(--ss-b6); }
.ss-tekil__gorsel img {
  width: 100%;
  border-radius: var(--ss-r-b);
  aspect-ratio: 2 / 1;
  object-fit: cover;
}
.ss-tekil__etiketler {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ss-b2);
  max-width: 68ch;
  margin-top: var(--ss-b6);
}
.ss-tekil__etiketler a {
  padding: .2rem .7rem;
  border: 1px solid var(--ss-cizgi-guclu);
  border-radius: 999px;
  color: var(--ss-sessiz);
  font-size: var(--ss-o2);
  text-decoration: none;
}
.ss-tekil__etiketler a:hover { border-color: var(--ss-marka); color: var(--ss-marka); }