/* =====================================================================
   2) BASE  ·  Sıfırlama, tipografi, ızgara ve yardımcı sınıflar
   ===================================================================== */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--zemin);
  color: var(--yazi);
  font-family: var(--f-metin);
  font-size: var(--fs-normal);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, picture, video { max-width: 100%; display: block; }

/* Satır içi SVG ikonlar — emoji kullanılmaz */
.ikon { display: inline-block; vertical-align: -.18em; flex: 0 0 auto; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--marka); }

h1, h2, h3, h4, h5 {
  margin: 0;
  font-family: var(--f-baslik);
  font-weight: var(--fw-siyah);
  line-height: var(--lh-sik);
  letter-spacing: -.015em;
}
p { margin: 0 0 var(--b4); }
ul, ol { margin: 0; padding: 0; list-style: none; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }

:focus-visible {
  outline: 3px solid var(--marka);
  outline-offset: 2px;
  border-radius: var(--r2);
}

::selection { background: var(--marka); color: #fff; }

/* ---------------------------------------------------------------------
   Kapsayıcı ve ızgara
   --------------------------------------------------------------------- */
.kapsayici {
  width: 100%;
  max-width: var(--kapsayici);
  margin-inline: auto;
  padding-inline: var(--b4);
}
.kapsayici--dar { max-width: var(--kapsayici-dar); }

.izgara { display: grid; gap: var(--sutun-bosluk); }
.izgara--2 { grid-template-columns: repeat(2, 1fr); }
/* Izgara hucresi varsayilan olarak min-width:auto'dur; icindeki genis
   tablo hucreyi genisletip sayfayi tasirir. Sifirlaninca tablo kendi
   .tablo-sarmal kabinda yatay kayar. */
.izgara > * { min-width: 0; }
.izgara--3 { grid-template-columns: repeat(3, 1fr); }
.izgara--4 { grid-template-columns: repeat(4, 1fr); }
.izgara--5 { grid-template-columns: repeat(5, 1fr); }
.izgara--6 { grid-template-columns: repeat(6, 1fr); }

/* İçerik + sağ sütun */
.sayfa-govde {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--sidebar-en);
  gap: var(--b7);
  align-items: start;
  padding-block: var(--b6) var(--b8);
}
.sayfa-govde--tek { grid-template-columns: minmax(0, 1fr); }
.sayfa-govde--sol-yan { grid-template-columns: var(--sidebar-en) minmax(0, 1fr); }
/* tek sütun, ortalanmış ve dar (giriş ekranı gibi odaklı sayfalar) */
.sayfa-govde--dar {
  grid-template-columns: minmax(0, 1fr);
  max-width: 1020px; margin-inline: auto;
}

.yan-sutun { position: sticky; top: 92px; display: grid; gap: var(--b5); }
.ana-sutun { display: grid; gap: var(--b7); min-width: 0; }
.ana-sutun > *, .yan-sutun > * { min-width: 0; }

/* ---------------------------------------------------------------------
   Yardımcı sınıflar
   --------------------------------------------------------------------- */
.gizle, [hidden] { display: none !important; }

/* ---------------------------------------------------------------------
   Cihaz kapsamı — modüllerde data-cihaz, diğer öğelerde yardımcı sınıf
   --------------------------------------------------------------------- */
@media (max-width: 860px) {
  .yalniz-masaustu,
  [data-cihaz="masaustu"] { display: none !important; }
}
@media (min-width: 861px) {
  .yalniz-mobil,
  [data-cihaz="mobil"] { display: none !important; }
}
[data-durum="kapsamdisi"] { display: none !important; }
.sadece-ekran-okuyucu {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.metin-kirp-1, .metin-kirp-2, .metin-kirp-3, .metin-kirp-4 {
  display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
}
.metin-kirp-1 { -webkit-line-clamp: 1; }
.metin-kirp-2 { -webkit-line-clamp: 2; }
.metin-kirp-3 { -webkit-line-clamp: 3; }
.metin-kirp-4 { -webkit-line-clamp: 4; }

.orta { text-align: center; }
.kalin { font-weight: var(--fw-kalin); }
.sonuk { color: var(--yazi-2); }
.mikro { font-size: var(--fs-mikro); }

/* ---------------------------------------------------------------------
   Rozetler & etiketler
   --------------------------------------------------------------------- */
.rozet {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px;
  font-size: var(--fs-mikro);
  font-weight: var(--fw-kalin);
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: var(--r1);
  background: var(--marka); color: #fff;
  white-space: nowrap;
}
.rozet--hayalet { background: transparent; color: var(--kat, var(--marka)); border: 1px solid currentColor; }
/* Yazısız rozet — içinde yalnız ikon vardır, bu yüzden kare durur.
   Görünen ad yok; erişilebilir ad .sadece-ekran-okuyucu ile gelir. */
.rozet--ikon {
  gap: 0; padding: 0;
  width: 24px; height: 24px;
  justify-content: center;
  border-radius: var(--r1);
}
.rozet--sondakika {
  background: var(--sondakika);
  animation: nabiz 1.6s ease-in-out infinite;
}
.rozet--canli::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: #fff; animation: nabiz 1.2s infinite;
}

@keyframes nabiz {
  0%, 100% { opacity: 1; }
  50%      { opacity: .45; }
}

/* Kategori etiketi (renk data-kat üzerinden gelir) */
.kat-etiket {
  font-size: var(--fs-mikro);
  /* küçük ve büyük harfli; 800 gereksiz derecede ağırdı */
  font-weight: var(--fw-kalin);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--kat, var(--marka));
}

/* ---------------------------------------------------------------------
   Görsel çerçevesi (sabit oranlı, CLS yok)
   --------------------------------------------------------------------- */
.gorsel {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--kart-2);
  border-radius: var(--r2);
  aspect-ratio: var(--oran, 16 / 9);
}
.gorsel img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
/* ADDITIF (MEDYA1): <img> artık <picture> ile sarmalanabiliyor. picture
   varsayılan `display:block` + auto-yükseklik olsaydı, içteki `img{height:100%}`
   belirsiz-yükseklikli ebeveyne çözülüp oran kutusunu (aspect-ratio) BOZARDI.
   picture'ı kutuyu DOLDURACAK şekilde sabitliyoruz; <img>-yalın yolda (picture
   yoksa) bu kural hiç uygulanmaz -> çıktı değişmez. */
.gorsel picture { display: block; width: 100%; height: 100%; }
.gorsel--16x9 { --oran: 16 / 9; }
.gorsel--4x3  { --oran: 4 / 3; }
.gorsel--1x1  { --oran: 1 / 1; }
.gorsel--3x4  { --oran: 3 / 4; }
.gorsel--21x9 { --oran: 21 / 9; }

a:hover .gorsel img,
.kart:hover .gorsel img { transform: scale(1.055); }

/* Görsel üstü karartma + rozet yuvası */
.gorsel__perde {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(6,10,16,.88) 0%, rgba(6,10,16,.35) 42%, rgba(6,10,16,0) 72%);
}
.gorsel__rozetler {
  position: absolute; top: var(--b2); left: var(--b2);
  display: flex; gap: var(--b1); z-index: 2;
}
.gorsel__oynat {
  position: absolute; inset: 0; margin: auto;
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.92); color: var(--marka);
  font-size: 18px; padding-left: 4px;
  box-shadow: var(--golge-2);
  transition: transform var(--gecis), background var(--gecis);
}
a:hover .gorsel__oynat { transform: scale(1.12); background: #fff; }

/* ---------------------------------------------------------------------
   Buton
   --------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--b2);
  padding: 10px 18px;
  border-radius: var(--r2);
  font-weight: var(--fw-kalin);
  font-size: var(--fs-kucuk);
  background: var(--marka); color: #fff;
  border: 1px solid transparent;
  transition: background var(--gecis-hizli), transform var(--gecis-hizli);
}
.btn:hover { background: var(--marka-koyu); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn--hayalet { background: transparent; color: var(--yazi); border-color: var(--cizgi-koyu); }
.btn--hayalet:hover { background: var(--kart-2); color: var(--marka); border-color: var(--marka); }
.btn--tam { width: 100%; }
.btn--kucuk { padding: 6px 12px; font-size: var(--fs-mini); }
/* geri alınamaz işlem (hesap silme vb.) */
.btn--tehlike { background: var(--asagi); color: #fff; }
.btn--tehlike:hover { background: #b02525; color: #fff; }

/* ---------------------------------------------------------------------
   Meta satırı (saat · yazar · okunma)
   --------------------------------------------------------------------- */
.meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--b2);
  font-size: var(--fs-mini);
  color: var(--yazi-3);
}
.meta > * { display: inline-flex; align-items: center; gap: 4px; }
.meta__ayrac { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .6; }

/* ---------------------------------------------------------------------
   Ayraç & şerit başlıklar
   --------------------------------------------------------------------- */
.ince-cizgi { height: 1px; background: var(--cizgi); border: 0; margin: 0; }

/* Yatay kaydırma rayı (mobil şeritler) */
.ray {
  display: flex; gap: var(--sutun-bosluk);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  padding-bottom: var(--b2);
}
.ray > * { scroll-snap-align: start; flex: 0 0 auto; }
.ray::-webkit-scrollbar { height: 6px; }
.ray::-webkit-scrollbar-thumb { background: var(--cizgi-koyu); border-radius: var(--rtam); }

/* ---------------------------------------------------------------------
   İskelet yükleme
   --------------------------------------------------------------------- */
.iskelet {
  background: linear-gradient(90deg, var(--kart-2) 25%, var(--cizgi) 37%, var(--kart-2) 63%);
  background-size: 400% 100%;
  animation: parla 1.3s ease infinite;
  border-radius: var(--r2);
}
@keyframes parla { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------
   Kırılım noktaları
   --------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .sayfa-govde,
  .sayfa-govde--sol-yan { grid-template-columns: minmax(0, 1fr); }
  .yan-sutun { position: static; grid-template-columns: repeat(2, 1fr); }
  .izgara--5, .izgara--6, .izgara--7, .izgara--8 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  :root { --sutun-bosluk: 16px; --fs-h1: 30px; --fs-h2: 24px; --fs-h3: 20px; }
  .izgara--3, .izgara--4, .izgara--5,
  .izgara--6, .izgara--7, .izgara--8 { grid-template-columns: repeat(2, 1fr); }
  .izgara--dar-genis, .izgara--genis-dar { grid-template-columns: minmax(0, 1fr); }
  .yan-sutun { grid-template-columns: minmax(0, 1fr); }
  .izgara--dikey-cizgi > * + * { border-left: 0; padding-left: 0; }
}
@media (max-width: 480px) {
  .izgara--2, .izgara--3, .izgara--4,
  .izgara--5, .izgara--6, .izgara--7, .izgara--8 { grid-template-columns: minmax(0, 1fr); }
}