/* Ana Sayfa (home.js): başlık, eylemler, iş kartları (RunCard / GenerationRow), son üretimler şeridi, boş durum. */
.home-head { margin-bottom: var(--sp-5); }
.home-head .nav-row .eyebrow { align-self: center; }
.home-credit { display: inline-flex; }
.home-credit .credit-pill { min-height: var(--ctl-lg); }
.home-credit .credit-pill:hover { background: var(--c-s2); }

.home-actions { display: flex; gap: var(--sp-2-5); }
.home-actions > .btn-primary, .home-actions > .grow { flex: 1 1 auto; }
@media (max-width: 359px) {
  .home-actions { flex-direction: column; }
}

/* ---------- RunCard ---------- */
.run-list { display: flex; flex-direction: column; gap: var(--sp-2-5); }
.run-list + .group { margin-top: var(--sp-2-5); }
.run-card {
  display: flex; flex-direction: column; gap: var(--sp-2-5); padding: var(--sp-4); text-decoration: none;
  background: var(--c-s1); border: var(--bw) solid var(--c-line); border-radius: var(--r-lg);
  transition: background var(--dur-fast), transform var(--dur-fast) var(--ease);
}
.run-card:hover { background: var(--c-s2); }
.run-card:active { transform: scale(0.99); }
.run-status { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--c-text-2); }
.run-status strong { font-weight: var(--fw-semibold); color: var(--c-text); }
.run-status .text-3 { font-weight: var(--fw-medium); }
.run-status .icon { width: var(--icon-sm); height: var(--icon-sm); }
.live-ring { display: inline-grid; place-items: center; width: 14px; height: 14px; flex: none; border-radius: 50%; border: var(--bw-2) solid var(--c-line-4); }
.live-ring i { width: 6px; height: 6px; border-radius: 50%; background: var(--c-light); animation: dot 1200ms infinite var(--ease); }
.run-title { font-size: var(--fs-h4); font-weight: var(--fw-semibold); letter-spacing: var(--tr-snug); line-height: var(--lh-snug); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.run-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.run-facts { font-size: var(--fs-sm); color: var(--c-text-2); }
.run-progress { display: flex; align-items: center; gap: var(--sp-3); }
.run-progress .progress { flex: 1; }
.run-percent { min-width: 4ch; text-align: end; color: var(--c-text-2); }

/* ---------- GenerationRow ---------- */
.gen-row { align-items: center; }
.gen-thumb { position: relative; display: grid; place-items: center; width: 44px; height: 60px; flex: none; overflow: hidden; border-radius: var(--r-xs); background: var(--c-s3); color: var(--c-text-3); }
.gen-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gen-thumb .icon { width: var(--icon-sm); height: var(--icon-sm); }
.gen-thumb.is-flat { background: var(--c-s2); }
.gen-thumb.is-flat .icon { color: var(--c-text-3); }
.gen-thumb.is-wave .wave { height: 24px; gap: 1.5px; }
.gen-thumb.is-wave .wave i { width: 2px; }
.gen-row-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gen-row-status { display: inline-flex; align-items: center; gap: var(--sp-1-5); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-text-2); }
.gen-row-status > i { width: 7px; height: 7px; border-radius: 50%; background: var(--c-text-3); }
.gen-row-status.is-done > i { background: var(--c-success); }
.gen-row-status.is-failed { color: var(--c-error); }
.gen-row-status .icon { width: var(--icon-xs); height: var(--icon-xs); }

/* ---------- Son üretimler şeridi ---------- */
.see-all { display: inline-flex; align-items: center; gap: var(--sp-0-5); min-height: var(--tap); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-text-2); text-decoration: none; }
.see-all:hover { color: var(--c-text); }
.see-all .icon { width: var(--icon-sm); height: var(--icon-sm); }
.rail {
  display: flex; gap: var(--sp-3); overflow-x: auto; scroll-snap-type: x proximity; overscroll-behavior-x: contain;
  margin-inline: calc(-1 * var(--gutter-l)); padding: 0 var(--gutter-l) var(--sp-2); scroll-padding-inline: var(--gutter-l);
  scrollbar-width: thin; scrollbar-color: var(--c-scroll-thumb) transparent;
}
.rail-item { flex: none; width: 128px; scroll-snap-align: start; }
.rail-card { display: flex; flex-direction: column; gap: var(--sp-1); text-decoration: none; }
.rail-card:active .rail-thumb { transform: scale(0.97); }
.rail-thumb { position: relative; display: block; aspect-ratio: 9 / 16; overflow: hidden; border-radius: var(--r-md); background: var(--c-s3); transition: transform var(--dur-fast) var(--ease); }
.rail-thumb img { width: 100%; height: 100%; object-fit: cover; }
.rail-card:hover .rail-thumb { outline: var(--bw) solid var(--c-line-3); outline-offset: -1px; }
.rail-wave { position: absolute; inset: 0; display: grid; place-items: center; background: var(--c-s2); }
.rail-badge { position: absolute; bottom: var(--sp-1-5); inset-inline-end: var(--sp-1-5); }
.rail-badge .icon { width: var(--icon-xs); height: var(--icon-xs); }
.rail-fav { position: absolute; top: var(--sp-1-5); inset-inline-end: var(--sp-1-5); color: var(--c-on-media); }
.rail-fav .icon { width: var(--icon-sm); height: var(--icon-sm); }
.rail-title { margin-top: var(--sp-1); font-size: var(--fs-ui); font-weight: var(--fw-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; }
.rail-date { font-size: var(--fs-xs); color: var(--c-text-3); white-space: nowrap; }
@media (min-width: 900px) {
  .rail { margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; }
  .rail-item { width: 148px; }
}

/* ---------- Boş durum ---------- */
.home-empty { margin-top: var(--sp-5); }
.home-fan { position: relative; width: 200px; height: 150px; margin-bottom: var(--sp-2); }
.fan-card { position: absolute; top: 14px; width: 84px; height: 120px; overflow: hidden; border-radius: var(--r-sm); background: var(--c-s4); }
.fan-card img { width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.fan-card.is-start { inset-inline-start: 10px; transform: rotate(-9deg); }
.fan-card.is-end { inset-inline-end: 10px; transform: rotate(9deg); }
[dir="rtl"] .fan-card.is-start { transform: rotate(9deg); }
[dir="rtl"] .fan-card.is-end { transform: rotate(-9deg); }
.fan-card.is-center { top: 4px; inset-inline-start: 58px; display: grid; place-items: center; background: var(--c-s3); border: var(--bw-1-5) dashed var(--c-line-4); }
.fan-plus { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--c-s5); border: var(--bw) solid var(--c-line-4); }
.home-nocredits { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-1-5); font-size: var(--fs-sm); color: var(--c-text-3); }
.home-store-link { display: inline-flex; align-items: center; gap: var(--sp-0-5); min-height: var(--tap); font-weight: var(--fw-semibold); color: var(--c-text); text-decoration: none; }
.home-store-link .icon { width: var(--icon-sm); height: var(--icon-sm); color: var(--c-text-2); }

/* ---------- Nasıl çalışır ---------- */
.how-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.how-step { position: relative; display: flex; gap: var(--sp-3); padding-bottom: var(--sp-6); }
.how-step:not(:last-child)::before { content: ""; position: absolute; inset-inline-start: 18px; top: 40px; bottom: var(--sp-2); width: var(--bw); background: var(--c-line-2); }
.how-num { flex: none; width: 38px; font-size: 1.625rem; font-weight: var(--fw-semibold); letter-spacing: var(--tr-title); line-height: 1.15; color: var(--c-title-muted); font-variant-numeric: tabular-nums; }
.how-step h3 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); letter-spacing: var(--tr-snug); margin-top: var(--sp-1); }
.how-step p { margin-top: var(--sp-1); font-size: var(--fs-ui); color: var(--c-text-2); max-width: var(--measure); }

/* ---------- İskelet / hata ---------- */
.home-skel { display: flex; flex-direction: column; gap: var(--sp-2-5); }
.home-skel .sk-btn { height: 52px; border-radius: var(--r-pill); }
.home-skel .sk-btn-sm { width: 128px; flex: none; }
.home-skel .sk-pill { width: 160px; height: var(--ctl-xs); border-radius: var(--r-pill); margin-top: var(--sp-8); }
.home-skel .sk-run { height: 148px; border-radius: var(--r-lg); }
.home-skel .sk-rows { height: 176px; border-radius: var(--r-lg); }
.home-skel-rail { display: flex; gap: var(--sp-3); overflow: hidden; margin-top: var(--sp-8); }
.home-skel-rail .sk-card { width: 128px; flex: none; aspect-ratio: 9 / 16; border-radius: var(--r-md); }
.home-error { padding-top: var(--sp-2); }

/* Kullanıcının verdiği ad kendi yönünde yazılır, hizası arayüzün başında (Arapça ekranda Latin ad sağa yaslı). */
[dir="rtl"] .run-title, [dir="rtl"] .gen-row-title, [dir="rtl"] .rail-title { text-align: right; }