/* Bilesen: Arsiv duzeni
   Blog ve portfolyo liste sayfalari — ust bolum, filtre cubugu, kenar
   cubugu ve kart izgarasi. inc/archive.php icindeki blok tarafindan basilir. */

.ar-archive__ic {
  max-width: var(--ar-container);
  margin-inline: auto;
  padding-inline: var(--ar-space-md);
}

/* --- Ust bolum ---------------------------------------------------------- */

.ar-archive__hero {
  padding-block: var(--ar-space-xl);
  color: #fff;
  background: linear-gradient(135deg, var(--ar-navy) 0%, var(--ar-midnight) 100%);
}

.ar-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ar-space-xs);
  align-items: center;
  margin-bottom: var(--ar-space-sm);
  font-size: 0.875rem;
  color: var(--ar-on-dark-muted);
}

.ar-crumbs a {
  color: var(--ar-on-dark);
  text-decoration: none;
}

.ar-crumbs a:hover {
  color: #fff;
  text-decoration: underline;
}

.ar-archive__baslik {
  margin: 0;
  font-family: var(--ar-font-heading);
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
}

.ar-archive__aciklama {
  max-width: 46em;
  margin: var(--ar-space-sm) 0 0;
  font-size: 1.0625rem;
  color: var(--ar-on-dark-muted);
}

/* --- Filtre cubugu ------------------------------------------------------ */

.ar-archive__filtre {
  position: sticky;
  top: 0;
  z-index: 20;
  padding-block: var(--ar-space-sm);
  background: #fff;
  border-bottom: 1px solid var(--ar-border);
}

.ar-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ar-space-xs);
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

.ar-pill {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 9px 18px;
  font-family: var(--ar-font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ar-ink);
  text-decoration: none;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
  background: #fff;
  border: 1px solid var(--ar-border);
  border-radius: var(--ar-radius-full);
  transition: all var(--ar-transition);
}

.ar-pill:hover {
  color: var(--ar-navy);
  border-color: var(--ar-navy);
}

.ar-pill.is-aktif {
  color: #fff;
  background: var(--ar-navy);
  border-color: var(--ar-navy);
}

.ar-pill__sayi {
  font-weight: 500;
  opacity: 0.6;
}

/* "Daha fazla" paneli */

.ar-pills__daha {
  position: relative;
}

.ar-pills__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 2px;
  width: max-content;
  max-width: min(560px, 90vw);
  max-height: 60vh;
  padding: var(--ar-space-xs);
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--ar-border);
  border-radius: var(--ar-radius-md);
  box-shadow: var(--ar-shadow-lg);
}

.ar-pills__panel[hidden] {
  display: none;
}

.ar-pills__panel-oge {
  display: flex;
  gap: var(--ar-space-xs);
  justify-content: space-between;
  padding: 8px 12px;
  font-size: 0.875rem;
  color: var(--ar-ink);
  text-decoration: none;
  border-radius: var(--ar-radius-sm);
}

.ar-pills__panel-oge:hover,
.ar-pills__panel-oge.is-aktif {
  color: var(--ar-navy);
  background: var(--ar-bg);
}

/* --- Govde: kenar cubugu + icerik --------------------------------------- */

.ar-archive__govde {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: var(--ar-space-lg);
  max-width: var(--ar-container);
  margin-inline: auto;
  padding: var(--ar-space-xl) var(--ar-space-md);
}

.ar-archive__kenar {
  /* Kart izgarasi uzun; kategori listesi kaydirirken gorunur kalmali. */
  position: sticky;
  top: 84px;
  align-self: start;
  max-height: calc(100vh - 110px);
}

.ar-kenar {
  display: flex;
  flex-direction: column;
  max-height: inherit;
  padding: var(--ar-space-sm);
  background: #fff;
  border: 1px solid var(--ar-border);
  border-radius: var(--ar-radius-lg);
  box-shadow: var(--ar-shadow-sm);
}

.ar-kenar__ara {
  position: relative;
  display: flex;
  gap: var(--ar-space-xs);
  align-items: center;
  padding: 9px 12px;
  margin-bottom: var(--ar-space-xs);
  color: var(--ar-muted);
  background: var(--ar-bg);
  border-radius: var(--ar-radius-md);
}

.ar-kenar__ara input {
  width: 100%;
  font-family: var(--ar-font-body);
  font-size: 0.875rem;
  color: var(--ar-ink);
  background: none;
  border: 0;
}

.ar-kenar__ara input:focus {
  outline: none;
}

.ar-kenar__ara:focus-within {
  outline: 2px solid var(--ar-navy);
  outline-offset: 1px;
}

.ar-kenar__liste {
  padding: 0;
  margin: 0;
  overflow-y: auto;
  list-style: none;
}

.ar-kenar__oge {
  display: flex;
  gap: var(--ar-space-xs);
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  font-size: 0.9375rem;
  color: var(--ar-ink);
  text-decoration: none;
  border-radius: var(--ar-radius-md);
  transition: background-color var(--ar-transition);
}

.ar-kenar__oge:hover {
  background: var(--ar-bg);
}

.ar-kenar__oge.is-aktif {
  font-weight: 600;
  color: #fff;
  background: var(--ar-navy);
}

.ar-kenar__ad {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ar-kenar__sayi {
  flex-shrink: 0;
  font-size: 0.8125rem;
  opacity: 0.55;
}

.ar-kenar__bos {
  padding: var(--ar-space-sm) 12px 0;
  margin: 0;
  font-size: 0.875rem;
  color: var(--ar-muted);
}

/* --- Kartlar ------------------------------------------------------------ */

.ar-kartlar {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--ar-space-md);
}

.ar-kart {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--ar-border);
  border-radius: var(--ar-radius-lg);
  box-shadow: var(--ar-shadow-sm);
  transition: transform var(--ar-transition), box-shadow var(--ar-transition);
}

.ar-kart:hover {
  transform: translateY(-4px);
  box-shadow: var(--ar-shadow-lg);
}

.ar-kart__baglanti {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.ar-kart__gorsel {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--ar-bg);
}

.ar-kart__gorsel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* One cikan gorsel yoksa: tema renginde kutu + kaydin BASLIGI.
   Renkler PHP'den somut deger olarak gelir (bkz. inc/archive.php); CSS'te
   goreli renk hesabi YAPILMAZ — desteklenmeyen sozdizimi bildirimi dusurur
   ve baslik beyaz zemin uzerinde okunmaz hale gelir. Yedek deger her zaman
   gecerli bir lacivert. */
.ar-kart__tutucu {
  /* MUTLAK konum, height:100% DEGIL.
     Yuzde yukseklik, aspect-ratio ile belirlenen kapsayicida guvenilir
     cozulmuyordu: kutu gorsel alanindan tasip kartin beyaz govdesinin
     ALTINDA kaliyor ve baslik gorunmez oluyordu. inset:0 alani birebir
     doldurur ve tasma ihtimalini ortadan kaldirir. */
  position: absolute;
  inset: 0;

  display: flex;
  align-items: flex-end;
  padding: var(--ar-space-md);
  background: linear-gradient(150deg,
    var(--ar-c1, #0f1b46) 0%,
    var(--ar-c2, #193670) 100%);
}

.ar-kart__tutucu-baslik {
  /* Flex ogesinin varsayilan min-width degeri "auto"dur: oge, iceriginden
     daha dar olamaz ve metin SARMAZ — tek satirda tasar. Bu ikisi olmadan
     satir kirpma (line-clamp) da devreye girmez. */
  min-width: 0;
  width: 100%;

  font-family: var(--ar-font-heading);
  font-size: var(--ar-tutucu-boy, 1.25rem);
  font-weight: 600;
  line-height: 1.25;
  color: #fff;

  /* Dort satirdan sonra kes — kart yuksekligi sabit kalsin. */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;

  /* Uzun tek kelime (adres, kod) kutuyu tasirmasin. */
  overflow-wrap: anywhere;
}

.ar-kart__rozet,
.ar-kart__tarih {
  position: absolute;
  z-index: 2; /* Yer tutucu artik mutlak konumlu; rozet onun ustunde kalmali. */
  top: 12px;
  padding: 5px 11px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
  border-radius: var(--ar-radius-full);
  backdrop-filter: blur(4px);
}

.ar-kart__rozet {
  left: 12px;
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: rgb(15 27 70 / 82%);
}

.ar-kart__tarih {
  right: 12px;
  font-weight: 500;
  background: rgb(17 24 39 / 62%);
}

.ar-kart__govde {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--ar-space-md);
}

.ar-kart__baslik {
  margin: 0;
  font-family: var(--ar-font-heading);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ar-navy);

  /* Iki satirda kes: kart yukseklikleri esitlenir, izgara duzgun kalir. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.ar-kart:hover .ar-kart__baslik {
  color: var(--ar-midnight);
}

.ar-kart__ozet {
  margin: var(--ar-space-xs) 0 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ar-muted);
  /* Kart yuksekliklerini esitlemek icin ozeti uc satirla sinirla. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.ar-archive__bos {
  padding: var(--ar-space-xl) 0;
  color: var(--ar-muted);
  text-align: center;
}

/* --- Sayfalama ---------------------------------------------------------- */

.ar-sayfalama {
  margin-top: var(--ar-space-xl);
}

.ar-sayfalama ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ar-space-xs);
  justify-content: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

.ar-sayfalama a,
.ar-sayfalama span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding-inline: 12px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ar-ink);
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--ar-border);
  border-radius: var(--ar-radius-md);
}

.ar-sayfalama a:hover {
  color: var(--ar-navy);
  border-color: var(--ar-navy);
}

.ar-sayfalama .current {
  color: #fff;
  background: var(--ar-navy);
  border-color: var(--ar-navy);
}

/* --- Duyarli ------------------------------------------------------------ */

@media (width <= 1080px) {
  .ar-archive__govde {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Kenar cubugu dar ekranda GIZLENIR.
     Tek sutuna dustugunde kartlarin ustune biner ve ziyaretcinin icerige
     ulasmak icin 34 kategoriyi gecmesi gerekir. Ustelik filtre cubugu
     ("Daha fazla" paneliyle birlikte) ayni kategorilerin TAMAMINI zaten
     sunuyor — yani kaybedilen bir islev yok, yalnizca tekrar kalkiyor. */
  .ar-archive__kenar {
    display: none;
  }

  .ar-archive__filtre {
    position: static;
  }
}

@media (width <= 640px) {
  .ar-archive__hero {
    padding-block: var(--ar-space-lg);
  }

  .ar-archive__govde {
    padding-block: var(--ar-space-lg);
  }

  /* Cubugu tek satirda yatay kaydirmali yap — sarilinca uc satir oluyor. */
  .ar-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .ar-pills::-webkit-scrollbar {
    display: none;
  }

  .ar-pill {
    white-space: nowrap;
  }

  .ar-pills__panel {
    grid-template-columns: minmax(0, 1fr);
    right: auto;
    left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ar-kart,
  .ar-pill,
  .ar-kenar__oge {
    transition: none;
  }

  .ar-kart:hover {
    transform: none;
  }
}

/* Başlık karoda yazılıyorsa gövdedekini görsel olarak gizle.
   DOM'dan KALDIRMIYORUZ: kartın erişilebilir adı ve arama motorunun gördüğü
   başlık odur. Yalnızca ekrandan çıkarılıyor. */
.ar-kart--tutuculu .ar-kart__baslik {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Başlık gizlenince özet kartın üstüne yapışıyor; boşluğu geri ver. */
.ar-kart--tutuculu .ar-kart__ozet {
  margin-top: 0;
}