/* Kullanıcı Webtoon Listeleri - Ortak Stiller */

.ul-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}
.ul-page-head h1, .ul-page-head h2 {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0;
  color: #1f2937;
}
.ul-page-head .ul-sub {
  color: #6b7280;
  font-size: .9rem;
  margin-top: 2px;
}

.ul-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  border-radius: 10px;
  padding: 9px 16px;
  font-weight: 600;
  font-size: .9rem;
  cursor: pointer;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.ul-btn-primary { background: linear-gradient(135deg,#6366f1,#8b5cf6); color:#fff; }
.ul-btn-primary:hover { color:#fff; transform: translateY(-1px); box-shadow:0 6px 16px rgba(99,102,241,.35); }
.ul-btn-light { background:#f3f4f6; color:#374151; }
.ul-btn-light:hover { background:#e5e7eb; color:#111827; }
.ul-btn-danger { background:#fee2e2; color:#dc2626; }
.ul-btn-danger:hover { background:#fecaca; color:#b91c1c; }
.ul-btn-ghost { background:transparent; color:#6b7280; border:1px solid #e5e7eb; }
.ul-btn-ghost:hover { background:#f9fafb; color:#374151; }
.ul-btn[disabled] { opacity:.6; cursor:not-allowed; }

/* ---- Liste kartları grid (keşif / profil / listelerim) ---- */
.ul-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
@media (min-width: 1500px) { .ul-grid { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 1200px) { .ul-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .ul-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

.ul-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background:#fff;
  border:1px solid #eef0f3;
  border-radius: 14px;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.ul-card:hover { transform: translateY(-4px); box-shadow:0 12px 28px rgba(17,24,39,.12); }
.ul-card-cover {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background:#f3f4f6;
}
.ul-card-cover img {
  width:100%; height:100%; object-fit: cover; display:block;
  transition: transform .4s ease;
}
.ul-card:hover .ul-card-cover img { transform: scale(1.06); }
.ul-card-count {
  position:absolute; left:10px; bottom:10px;
  background: rgba(17,24,39,.82); color:#fff;
  font-size:.72rem; font-weight:600;
  padding:4px 9px; border-radius:20px;
  display:flex; align-items:center; gap:5px;
  backdrop-filter: blur(2px);
}
.ul-card-body { padding: 12px 14px 14px; display:flex; flex-direction:column; gap:6px; flex:1 1 auto; }
.ul-card-title {
  font-size: .98rem; font-weight:700; color:#1f2937; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  height: 2.6em; overflow-wrap:anywhere; word-break:break-word;
}
.ul-card a.ul-card-title:hover { color:#6366f1; }
.ul-card-desc {
  font-size:.82rem; color:#6b7280; line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.ul-card-meta { display:flex; align-items:center; gap:7px; color:#6b7280; font-size:.8rem; margin-top:auto; }
.ul-card-meta img { width:20px; height:20px; border-radius:50%; object-fit:cover; }
.ul-card-meta .badge { font-size:.6rem; padding:.25em .6em; vertical-align:middle; }
.ul-card-rank { display:inline-flex; }
.ul-card-actions { display:flex; gap:8px; margin-top:8px; }
.ul-card-actions .ul-btn { padding:6px 12px; font-size:.8rem; border-radius:8px; }

/* ---- Webtoon kartları grid (liste detay) ---- */
.ul-wt-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}
@media (min-width: 1500px) { .ul-wt-grid { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 1199px) { .ul-wt-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 768px)  { .ul-wt-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; } }
@media (max-width: 480px)  { .ul-wt-grid { grid-template-columns: repeat(2, 1fr); } }

.ul-wt-card {
  display:block; border-radius:14px; overflow:hidden; background:#fff;
  border:1px solid #eef0f3; text-decoration:none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ul-wt-card:hover { transform: translateY(-5px); box-shadow:0 14px 30px rgba(17,24,39,.16); border-color:#e0e0f3; }
.ul-wt-cover { position:relative; aspect-ratio: 2 / 3; overflow:hidden; background:#f3f4f6; }
.ul-wt-cover img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.ul-wt-cover::after {
  content:""; position:absolute; left:0; right:0; bottom:0; height:38%;
  background:linear-gradient(to top, rgba(17,24,39,.45), transparent);
  opacity:0; transition:opacity .25s ease; pointer-events:none;
}
.ul-wt-card:hover .ul-wt-cover img { transform: scale(1.07); }
.ul-wt-card:hover .ul-wt-cover::after { opacity:1; }
.ul-wt-rank {
  position:absolute; top:8px; left:8px; z-index:2;
  min-width:26px; height:26px; padding:0 7px; border-radius:13px;
  background: rgba(99,102,241,.95); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:.78rem; font-weight:700; box-shadow:0 2px 8px rgba(17,24,39,.25);
}
.ul-wt-title {
  padding:9px 10px; font-size:.85rem; font-weight:600; color:#1f2937; line-height:1.25;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  height: calc(2.5em + 18px); box-sizing:border-box;
  overflow-wrap:anywhere; word-break:break-word;
}

/* ---- Liste oluşturma formu ---- */
.ul-form-card { background:#fff; border:1px solid #eef0f3; border-radius:14px; padding:20px; }
.ul-field { margin-bottom:16px; }
.ul-field label { display:block; font-weight:600; color:#374151; margin-bottom:6px; font-size:.9rem; }
.ul-field input[type=text], .ul-field textarea, .ul-field select {
  width:100%; border:1px solid #e5e7eb; border-radius:10px; padding:10px 12px;
  font-size:.92rem; color:#111827; background:#fff; transition:border-color .15s ease, box-shadow .15s ease;
}
.ul-field input[type=text]:focus, .ul-field textarea:focus, .ul-field select:focus {
  outline:none; border-color:#6366f1; box-shadow:0 0 0 3px rgba(99,102,241,.15);
}
.ul-field textarea { resize:vertical; min-height:90px; }
.ul-hint { color:#9ca3af; font-size:.78rem; margin-top:4px; }

.ul-search-wrap { position:relative; }
.ul-search-results {
  position:absolute; top:100%; left:0; right:0; z-index:30;
  background:#fff; border:1px solid #e5e7eb; border-radius:10px; margin-top:4px;
  max-height:340px; overflow-y:auto; box-shadow:0 12px 28px rgba(17,24,39,.14);
  display:none;
}
.ul-search-results.show { display:block; }
.ul-search-item {
  display:flex; align-items:center; gap:10px; padding:8px 10px; cursor:pointer;
  border-bottom:1px solid #f3f4f6;
}
.ul-search-item:last-child { border-bottom:none; }
.ul-search-item:hover, .ul-search-item.active { background:#f5f3ff; }
.ul-search-item img { width:36px; height:50px; object-fit:cover; border-radius:6px; flex-shrink:0; }
.ul-search-item .t { font-size:.88rem; color:#1f2937; font-weight:600; }
.ul-search-empty { padding:12px; color:#9ca3af; font-size:.85rem; text-align:center; }

.ul-selected-list { display:flex; flex-direction:column; gap:8px; margin-top:6px; }
.ul-selected-item {
  display:flex; align-items:center; gap:12px; padding:8px 10px;
  background:#f9fafb; border:1px solid #eef0f3; border-radius:10px;
}
.ul-selected-item.dragging { opacity:.5; }
.ul-selected-item .drag {
  cursor:grab; color:#9ca3af; font-size:1rem; padding:0 4px; touch-action:none;
}
.ul-selected-item img { width:38px; height:54px; object-fit:cover; border-radius:6px; flex-shrink:0; }
.ul-selected-item .t { flex:1; font-size:.9rem; font-weight:600; color:#1f2937; min-width:0; }
.ul-selected-item .ord { color:#9ca3af; font-size:.8rem; font-weight:700; width:26px; text-align:center; }
.ul-selected-item .rm {
  border:none; background:#fee2e2; color:#dc2626; border-radius:8px;
  width:30px; height:30px; cursor:pointer; flex-shrink:0; font-size:.85rem;
}
.ul-selected-item .rm:hover { background:#fecaca; }
.ul-empty-state { text-align:center; padding:40px 20px; color:#9ca3af; }
.ul-empty-state i { font-size:2.4rem; margin-bottom:10px; color:#d1d5db; }

.ul-badge-unlisted {
  display:inline-block; background:#fef3c7; color:#92400e; font-size:.72rem;
  font-weight:600; padding:2px 8px; border-radius:6px; margin-left:6px;
}
.ul-badge-hidden {
  display:inline-block; background:#fee2e2; color:#b91c1c; font-size:.72rem;
  font-weight:600; padding:2px 8px; border-radius:6px; margin-left:6px;
}

.ul-list-desc { color:#4b5563; line-height:1.7; font-size:.95rem; max-width:78ch; margin-top:4px; }

/* ---- Liste detay hero ---- */
.ul-hero { position:relative; overflow:hidden; padding-left:24px; }
.ul-hero::before {
  content:""; position:absolute; top:0; left:0; bottom:0; width:5px;
  background:linear-gradient(180deg,#6366f1,#8b5cf6);
}
.ul-hero h1 { font-size:1.6rem; line-height:1.25; overflow-wrap:anywhere; }
.ul-hero-meta { flex-wrap:wrap; row-gap:6px; }
.ul-hero-meta i { color:#9ca3af; }
@media (min-width:992px) {
  .ul-hero { padding:22px 24px 22px 28px; }
  .ul-hero h1 { font-size:1.85rem; }
}
@media (max-width:767px) { .ul-hero { padding-left:18px; } .ul-hero h1 { font-size:1.3rem; } }

.ul-pagination { display:flex; justify-content:center; gap:6px; margin-top:24px; flex-wrap:wrap; }
.ul-pagination a, .ul-pagination span {
  min-width:38px; text-align:center; padding:8px 12px; border-radius:8px;
  border:1px solid #e5e7eb; color:#374151; text-decoration:none; font-size:.88rem;
}
.ul-pagination a:hover { background:#f3f4f6; }
.ul-pagination .active { background:#6366f1; color:#fff; border-color:#6366f1; }

/* ---- Okuma listesi seçici (SweetAlert içi) ---- */
.ul-bm-chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; justify-content:center; }
.ul-bm-chip {
  border:1px solid #e5e7eb; background:#fff; color:#374151;
  border-radius:20px; padding:5px 12px; font-size:.8rem; cursor:pointer;
}
.ul-bm-chip.active { background:#6366f1; color:#fff; border-color:#6366f1; }
.ul-bm-search {
  width:100%; border:1px solid #e5e7eb; border-radius:10px; padding:9px 12px;
  font-size:.9rem; margin-bottom:10px;
}
.ul-bm-search:focus { outline:none; border-color:#6366f1; box-shadow:0 0 0 3px rgba(99,102,241,.15); }
.ul-bm-list { max-height:340px; overflow-y:auto; text-align:left; }
.ul-bm-item {
  display:flex; align-items:center; gap:10px; padding:7px 8px; cursor:pointer;
  border-bottom:1px solid #f3f4f6; margin:0; border-radius:8px;
}
.ul-bm-item:hover { background:#f5f3ff; }
.ul-bm-item input[type=checkbox] { width:17px; height:17px; flex-shrink:0; }
.ul-bm-item img { width:34px; height:48px; object-fit:cover; border-radius:6px; flex-shrink:0; }
.ul-bm-item .t { flex:1; font-size:.86rem; font-weight:600; color:#1f2937; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ul-bm-item .b { font-size:.72rem; color:#6b7280; background:#f3f4f6; padding:2px 8px; border-radius:10px; flex-shrink:0; }

/* ---- Webtoon kart durum/okunma/puan ---- */
.ul-wt-badge {
  position:absolute; top:8px; right:8px; z-index:2;
  font-size:.66rem; font-weight:700; padding:3px 8px; border-radius:7px;
  color:#fff; backdrop-filter: blur(2px); box-shadow:0 2px 8px rgba(17,24,39,.22);
}
.ul-wt-badge.is-done { background: rgba(220,38,38,.92); }
.ul-wt-badge.is-ongoing { background: rgba(16,185,129,.92); }

/* Konu onizleme: kapak uzerine acilan overlay + 'i' butonu */
.ul-wt-info {
  position:absolute; bottom:8px; right:8px; z-index:4;
  width:26px; height:26px; border:0; border-radius:50%;
  background:rgba(17,24,39,.62); color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:.72rem; box-shadow:0 2px 8px rgba(17,24,39,.28);
  transition:background .15s ease, transform .15s ease;
}
.ul-wt-info:hover { background:rgba(17,24,39,.9); }
.ul-wt-info i { transition:transform .18s ease; line-height:1; }
.ul-wt-card.syn-open .ul-wt-info { background:rgba(99,102,241,.95); }
.ul-wt-card.syn-open .ul-wt-info i { transform:rotate(45deg); }
.ul-wt-synopsis {
  position:absolute; inset:0; z-index:3;
  padding:12px 12px 40px; overflow:auto;
  background:linear-gradient(180deg, rgba(15,16,20,.9), rgba(15,16,20,.97));
  color:#e5e7eb; font-size:.76rem; line-height:1.5;
  opacity:0; visibility:hidden; transition:opacity .16s ease;
  -webkit-overflow-scrolling:touch;
}
.ul-wt-card.syn-open .ul-wt-synopsis { opacity:1; visibility:visible; }
.ul-wt-synopsis-text { margin:0 0 6px; }
.ul-wt-synopsis-more { display:inline-block; color:#93b4ff; font-weight:600; }
.ul-wt-meta {
  display:flex; align-items:center; justify-content:space-between; gap:6px;
  padding:0 10px 11px; font-size:.74rem; color:#6b7280;
}
.ul-wt-meta .views, .ul-wt-meta .rate { display:flex; align-items:center; gap:4px; }
.ul-wt-meta .rate { color:#b45309; font-weight:600; }
.ul-wt-meta .rate i { color:#f59e0b; }

/* ---- Onay bekliyor şeridi ---- */
.ul-pending-banner {
  background:#fef3c7; border:1px solid #fde68a; color:#92400e;
  border-radius:12px; padding:12px 16px; margin-bottom:16px;
  display:flex; align-items:center; gap:10px; font-size:.9rem;
}
.ul-pending-banner i { font-size:1.1rem; }
.ul-badge-pending {
  display:inline-block; background:#fef3c7; color:#92400e; font-size:.72rem;
  font-weight:600; padding:2px 8px; border-radius:6px; margin-left:6px;
}

/* ---- Beğeni butonu (liste detay) ---- */
.ul-like-btn {
  display:inline-flex; align-items:center; gap:7px;
  background:#fff; border:1px solid #e5e7eb; color:#ef4444;
  font-size:.9rem; font-weight:600; padding:9px 16px; border-radius:10px;
  cursor:pointer; transition:all .15s ease; line-height:1;
}
.ul-like-btn:hover { background:#fef2f2; border-color:#fecaca; }
.ul-like-btn i { font-size:1rem; transition:transform .15s ease; }
.ul-like-btn.liked { background:#ef4444; border-color:#ef4444; color:#fff; }
.ul-like-btn.liked:hover { background:#dc2626; border-color:#dc2626; }
.ul-like-btn:active i { transform:scale(1.25); }

/* ---- Kart beğeni rozeti ---- */
.ul-card-likes {
  position:absolute; right:8px; bottom:8px;
  background:rgba(239,68,68,.92); color:#fff;
  font-size:.7rem; font-weight:700; padding:3px 8px; border-radius:8px;
  display:inline-flex; align-items:center; gap:4px; backdrop-filter:blur(2px);
}

/* ---- Keşif sıralama sekmeleri ---- */
.ul-sort-tabs {
  display:inline-flex; gap:4px; flex-wrap:wrap; margin-bottom:20px;
  background:#f3f4f6; padding:4px; border-radius:12px;
}
.ul-sort-tabs a {
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 18px; border-radius:9px; font-size:.86rem; font-weight:600;
  color:#6b7280; background:transparent; text-decoration:none; transition:all .15s ease;
}
.ul-sort-tabs a:hover { color:#374151; }
.ul-sort-tabs a.active { background:#fff; color:#6366f1; box-shadow:0 2px 8px rgba(17,24,39,.12); }

/* ---- Keşif kart cilası ---- */
@media (min-width:992px) { .ul-card-title { font-size:1.02rem; } }

/* ---- Keşif araç çubuğu (sıralama + arama) ---- */
.ul-toolbar {
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap; margin-bottom:18px;
}
.ul-toolbar .ul-sort-tabs { margin-bottom:0; }
.ul-search {
  display:flex; align-items:center; gap:8px;
  background:#f3f4f6; border:1px solid #e5e7eb; border-radius:12px;
  padding:6px 8px 6px 14px; min-width:260px; flex:0 1 340px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.ul-search:focus-within { border-color:#6366f1; box-shadow:0 0 0 3px rgba(99,102,241,.12); background:#fff; }
.ul-search > i.fa-search { color:#9ca3af; font-size:.9rem; }
.ul-search input[type="text"] {
  flex:1 1 auto; border:0; background:transparent; outline:none;
  font-size:.9rem; color:#1f2937; min-width:0;
}
.ul-search-clear { color:#9ca3af; padding:0 4px; text-decoration:none; }
.ul-search-clear:hover { color:#ef4444; }
.ul-search button {
  border:0; border-radius:9px; padding:7px 16px; font-size:.85rem; font-weight:600;
  color:#fff; background:#6366f1; cursor:pointer; transition:background .15s ease;
}
.ul-search button:hover { background:#4f46e5; }
.ul-search-info { color:#6b7280; font-size:.9rem; margin-bottom:14px; }
@media (max-width:768px) {
  .ul-toolbar { flex-direction:column; align-items:stretch; }
  .ul-search { flex:1 1 auto; }
}