/* Shared list/toggle styles for lib/list-common.php */
.liste-sonuc-alani {
  width: 100%;
  max-width: none;
}

.liste-sonuc-baslik-karti {
  margin-bottom: 12px;
}

.liste-sonuc-baslik-satiri {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0;
}

.liste-sonuc-sayac-satiri,
.yaklasan-count-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 8px 0;
}

.liste-sonuc-sayac {
  font-size: 14px;
  color: #6b7280;
  margin: 8px 0;
}

.yak-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  border:1px solid #e5e7eb;
  background:#e7e7e7ff;
  cursor:pointer;
  padding:6px;
  border-radius:8px;
  transition: background-color .2s;
}
.yak-toggle:hover{ background:#f4f4f5; }
.yak-toggle svg{ display:block; }
.yak-toggle .icon-list{ display:none; }
.yaklasan-title{ margin:0; }
.liste-bos-baslik{ margin:0 0 6px 0; }
.liste-bos-metin{ margin:0; }

.yaklasan-list{ display:block; }
.yaklasan-list .item{ margin-bottom:12px; padding:8px; border:1px solid #e5e7eb; border-radius:12px; background:#fff; }
.yaklasan-list .item-inner,
.yaklasan-list .liste-karti-icerik{ display:grid; grid-template-columns:160px 1fr; gap:8px; align-items:center; }
.yaklasan-list .thumb,
.yaklasan-list .liste-karti-gorsel{ display:block; border-radius:12px; overflow:hidden; }
.yaklasan-list .thumb img,
.yaklasan-list .liste-karti-gorsel img{ display:block; width:100%; height:100%; aspect-ratio:4/3; object-fit:cover; }
.yaklasan-list .title,
.yaklasan-list .liste-karti-baslik{ font-weight:700; margin:0 0 6px 0; }
.yaklasan-list .title .title-link{ color:inherit; text-decoration:none; }
.yaklasan-list .title .title-link:hover{ text-decoration:none; }
.yaklasan-list .desc,
.yaklasan-list .liste-karti-aciklama{ font-size:14px; color:#4b5563; }
.yaklasan-list .meta,
.yaklasan-list .liste-karti-meta{ margin-top:8px; display:flex; gap:8px; flex-wrap:wrap; color:#374151; font-size:13px; }
.yaklasan-list .etiket-views{ display:inline-flex; align-items:center; gap:6px; }
.yaklasan-list .etiket-views::before{
  content:"";
  width:16px;
  height:16px;
  display:inline-block;
  background:currentColor;
  opacity:.75;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 5c-7 0-10 7-10 7s3 7 10 7 10-7 10-7-3-7-10-7Zm0 12a5 5 0 1 1 0-10 5 5 0 0 1 0 10Zm0-8a3 3 0 1 0 0 6 3 3 0 0 0 0-6Z'/%3E%3C/svg%3E") no-repeat center / contain;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 5c-7 0-10 7-10 7s3 7 10 7 10-7 10-7-3-7-10-7Zm0 12a5 5 0 1 1 0-10 5 5 0 0 1 0 10Zm0-8a3 3 0 1 0 0 6 3 3 0 0 0 0-6Z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.yaklasan-list.grid{ display:grid; gap:12px; grid-template-columns:repeat(3, minmax(0,1fr)); }
.yaklasan-list.grid > .item{ border-top:0 !important; border:1px solid #eee; border-radius:10px; padding:10px !important; background:#fff; }
.yaklasan-list.grid .item-inner,
.yaklasan-list.grid .liste-karti-icerik{ display:block; }
.yaklasan-list.grid .thumb,
.yaklasan-list.grid .liste-karti-gorsel{ border-radius:12px; overflow:hidden; }
.yaklasan-list.grid .thumb img,
.yaklasan-list.grid .liste-karti-gorsel img{ width:100%; height:auto; aspect-ratio:16 / 10 !important; object-fit:cover; display:block; }
.yaklasan-list.grid .title,
.yaklasan-list.grid .liste-karti-baslik{ margin:8px 10px 0 10px; }
.yaklasan-list.grid .desc,
.yaklasan-list.grid .liste-karti-aciklama{ margin:4px 10px 0 10px; }
.yaklasan-list.grid .meta,
.yaklasan-list.grid .liste-karti-meta{ margin:6px 10px 10px 10px; }
.yaklasan-list.grid > .item:hover{ box-shadow:0 1px 8px rgba(0,0,0,.06); }

@media (max-width: 992px){ .yaklasan-list.grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px){
  .yaklasan-list.grid{ grid-template-columns:1fr; }

  .yaklasan-list:not(.grid) .item-inner,
  .yaklasan-list:not(.grid) .liste-karti-icerik,
  #yaklasanList:not(.grid) .item-inner,
  #yaklasanList:not(.grid) .liste-karti-icerik{
    grid-template-columns:1fr;
    align-items:stretch;
  }

  .yaklasan-list:not(.grid) .thumb,
  .yaklasan-list:not(.grid) .liste-karti-gorsel,
  #yaklasanList:not(.grid) .thumb,
  #yaklasanList:not(.grid) .liste-karti-gorsel{
    width:100%;
  }

  .yaklasan-list:not(.grid) .thumb img,
  .yaklasan-list:not(.grid) .liste-karti-gorsel img,
  #yaklasanList:not(.grid) .thumb img,
  #yaklasanList:not(.grid) .liste-karti-gorsel img{
    width:100%;
    height:auto;
    aspect-ratio:16 / 10;
  }
}