/* ═══════════════════════════════════════════════════════════════════════════
   SİTE VİTRİNİ — liste, site sayfası, paylaşma formu, Sitelerim
   Yalnız tokens.css değişkenleri; tek vurgu rengi (--color-accent).
   ═══════════════════════════════════════════════════════════════════════════ */

.sv-narrow{max-width:880px}
.sv-muted{color:var(--color-text-muted); font-size:var(--text-sm)}
.sv-linkbtn{background:none; border:0; padding:0; color:var(--color-text-link); font:inherit; font-size:var(--text-sm); cursor:pointer; text-decoration:underline; text-underline-offset:2px}

/* ── Başlık ─────────────────────────────────────────────────────────────── */
.sv-head{display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-6); flex-wrap:wrap;
  padding-block:var(--space-6) var(--space-7); border-bottom:1px solid var(--color-border); margin-bottom:var(--space-6)}
.sv-head--compact{padding-block:var(--space-4) var(--space-5)}
.sv-head__text{max-width:640px}
.sv-head__title{font-family:var(--font-display); font-weight:var(--fw-heavy); font-size:clamp(1.75rem, 1.2rem + 2.2vw, 2.6rem);
  line-height:1.1; letter-spacing:-0.015em; word-spacing:.06em; margin:var(--space-2) 0 var(--space-3); text-wrap:balance}
.sv-head__desc{color:var(--color-text-secondary); font-size:var(--text-md); line-height:var(--lh-md); margin:0; max-width:60ch}
.sv-head__cta{display:flex; flex-direction:column; align-items:flex-end; gap:var(--space-2)}
.sv-head__note{display:inline-flex; align-items:center; gap:6px; margin:0; font-size:var(--text-xs); color:var(--color-text-muted)}
.sv-formhead{margin:var(--space-4) 0 var(--space-6)}

/* ── Filtreler ──────────────────────────────────────────────────────────── */
.sv-filters{display:grid; grid-template-columns:1fr auto; gap:var(--space-4) var(--space-5); align-items:center; margin-bottom:var(--space-6)}
.sv-tabs{display:flex; gap:var(--space-1); flex-wrap:wrap}
.sv-tab{display:inline-flex; align-items:center; min-height:40px; padding:0 var(--space-4); border-radius:var(--radius-pill);
  color:var(--color-text-secondary); font-size:var(--text-sm); font-weight:var(--fw-medium); text-decoration:none;
  transition:background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard)}
.sv-tab:hover{background:var(--color-surface-hover); color:var(--color-text-primary)}
.sv-tab[aria-current="page"]{background:var(--color-accent-soft); color:var(--color-accent-hover); font-weight:var(--fw-semibold)}
.sv-search{display:flex; gap:var(--space-2); align-items:center}
.sv-search .ts-input-group{width:min(280px, 100%)}
.sv-search .ts-select{width:auto}
.sv-cats{grid-column:1 / -1; display:flex; gap:var(--space-2); overflow-x:auto; padding-bottom:4px; scrollbar-width:thin}
.sv-chip{flex:none; display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:0 var(--space-3);
  border:1px solid var(--color-border); border-radius:var(--radius-pill); background:var(--color-surface);
  color:var(--color-text-secondary); font-size:var(--text-sm); text-decoration:none; white-space:nowrap}
.sv-chip:hover{border-color:var(--color-border-strong); color:var(--color-text-primary)}
.sv-chip[aria-current="page"]{border-color:var(--color-border-accent); color:var(--color-accent-hover); background:var(--color-accent-soft)}
.sv-chip__n{font-size:11px; color:var(--color-text-muted); font-variant-numeric:tabular-nums}
.sv-count{font-size:var(--text-xs); color:var(--color-text-muted); margin:0 0 var(--space-3); font-variant-numeric:tabular-nums}

/* ── Kart ───────────────────────────────────────────────────────────────── */
.sv-grid{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--space-5)}
.sv-card{position:relative; display:flex; flex-direction:column; background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-lg); overflow:hidden; transition:border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out)}
.sv-card:hover{border-color:var(--color-border-strong); box-shadow:var(--elev-2); transform:translateY(-2px)}
.sv-card--featured{border-color:var(--color-border-accent)}
.sv-card__media{position:relative; display:block; aspect-ratio:16 / 10; background:var(--color-surface-sunken); overflow:hidden; border-bottom:1px solid var(--color-border)}
.sv-card__media img{width:100%; height:100%; object-fit:cover; object-position:top; display:block}
.sv-card__flag{position:absolute; top:var(--space-3); left:var(--space-3); padding:3px 9px; border-radius:var(--radius-pill);
  background:var(--color-surface); color:var(--color-accent-hover); font-size:11px; font-weight:var(--fw-semibold); box-shadow:var(--elev-1)}
.sv-card__body{padding:var(--space-4) var(--space-4) var(--space-3); flex:1}
.sv-card__meta{display:flex; gap:6px; flex-wrap:wrap; margin:0 0 var(--space-2); font-size:var(--text-xs); font-weight:var(--fw-medium); color:var(--color-text-muted)}
.sv-card__title{font-family:var(--font-display); font-size:var(--text-lg); font-weight:var(--fw-bold); line-height:1.25; margin:0 0 var(--space-2); letter-spacing:var(--tracking-snug)}
.sv-card__title a{color:var(--color-text-primary); text-decoration:none}
/* Tüm kart tıklanabilir; iç bağlantılar (Benzerini yap) üstte kalır. */
.sv-card__title a::after{content:""; position:absolute; inset:0; z-index:1}
.sv-card__title a:focus-visible{outline:none}
.sv-card:has(.sv-card__title a:focus-visible){box-shadow:var(--focus-ring)}
.sv-card__tagline{margin:0; color:var(--color-text-secondary); font-size:var(--text-sm); line-height:var(--lh-sm);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.sv-card__foot{display:flex; justify-content:space-between; align-items:center; gap:var(--space-3); padding:var(--space-3) var(--space-4);
  border-top:1px solid var(--color-hairline); font-size:var(--text-xs); color:var(--color-text-muted)}
.sv-card__host{font-family:var(--font-mono); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0}
.sv-card__stats{display:flex; gap:var(--space-3); flex:none}
.sv-card__stats i{margin-right:3px}
.sv-card__remix{position:relative; z-index:2; display:flex; align-items:center; justify-content:center; gap:7px; min-height:44px;
  border-top:1px solid var(--color-hairline); color:var(--color-accent-hover); font-size:var(--text-sm); font-weight:var(--fw-semibold); text-decoration:none}
.sv-card__remix:hover{background:var(--color-accent-soft)}

.sv-made{display:inline-flex; align-items:center; gap:6px; margin:var(--space-3) 0 0; font-size:var(--text-xs); font-weight:var(--fw-medium); color:var(--color-text-secondary)}
.sv-made--inline{margin:0 0 0 4px}

/* Görselsiz kart: alan adının baş harfi + adı; marka rengi yalnız ince çizgide. */
.sv-ph{position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:var(--space-2);
  background:linear-gradient(160deg, var(--color-surface-sunken), var(--color-surface-raised))}
.sv-ph::after{content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--color-accent); opacity:.55}
.sv-ph__harf{font-family:var(--font-display); font-weight:var(--fw-black); font-size:56px; line-height:1; color:var(--color-text-primary); opacity:.85}
.sv-ph__host{font-family:var(--font-mono); font-size:var(--text-xs); color:var(--color-text-muted)}
.sv-ph--lg .sv-ph__harf{font-size:96px}

/* ── Sayfalama / boş durum / uyarı ─────────────────────────────────────── */
.sv-pager{display:flex; justify-content:center; align-items:center; gap:var(--space-4); margin-top:var(--space-8)}
.sv-pager__info{font-size:var(--text-sm); color:var(--color-text-muted)}
.sv-empty{text-align:center; padding:var(--space-10) var(--space-5); border:1px dashed var(--color-border-strong); border-radius:var(--radius-lg)}
.sv-empty h2{font-family:var(--font-display); font-size:var(--text-xl); margin:0 0 var(--space-2)}
.sv-empty p{color:var(--color-text-secondary); margin:0 auto var(--space-5); max-width:46ch}
.sv-notice{padding:var(--space-3) var(--space-4); border-radius:var(--radius-md); border:1px solid; font-size:var(--text-sm); margin-bottom:var(--space-5); line-height:var(--lh-sm)}
.sv-notice--warning{background:var(--color-warning-soft); border-color:var(--color-warning); color:var(--color-text-primary)}
.sv-notice--danger{background:var(--color-danger-soft); border-color:var(--color-danger); color:var(--color-text-primary)}

/* ── Site sayfası ───────────────────────────────────────────────────────── */
.sv-crumb{display:flex; flex-wrap:wrap; gap:var(--space-2); font-size:var(--text-sm); color:var(--color-text-muted); margin:var(--space-2) 0 var(--space-5)}
.sv-crumb a{color:var(--color-text-secondary); text-decoration:none}
.sv-crumb a:hover{color:var(--color-text-primary); text-decoration:underline}
.sv-detail{display:grid; grid-template-columns:minmax(0, 1fr) 340px; gap:var(--space-7); align-items:start}
.sv-shot{position:relative; margin:0; aspect-ratio:16 / 10; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--color-border); background:var(--color-surface-sunken)}
.sv-shot img{width:100%; height:100%; object-fit:cover; object-position:top; display:block}
.sv-block{margin-top:var(--space-7)}
.sv-block__title{font-family:var(--font-display); font-size:var(--text-lg); font-weight:var(--fw-bold); margin:0 0 var(--space-3); display:flex; align-items:center; gap:var(--space-2)}
.sv-block__n{font-size:var(--text-xs); color:var(--color-text-muted); font-weight:var(--fw-medium); font-variant-numeric:tabular-nums}
.sv-prose{color:var(--color-text-secondary); line-height:var(--lh-md); font-size:var(--text-md)}
.sv-prose p{margin:0 0 var(--space-3)}
.sv-prose a{color:var(--color-text-link); word-break:break-word}
.sv-tech{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:var(--space-2)}
.sv-tech li{padding:4px 10px; border-radius:var(--radius-sm); background:var(--color-surface-sunken); border:1px solid var(--color-border); font-family:var(--font-mono); font-size:var(--text-xs); color:var(--color-text-secondary)}

.sv-detail__side{position:sticky; top:calc(var(--header-h) + var(--space-4)); display:grid; gap:var(--space-4)}
.sv-panel{background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-5)}
.sv-panel__title{font-family:var(--font-display); font-weight:var(--fw-heavy); font-size:var(--text-2xl); line-height:1.15; letter-spacing:var(--tracking-tight); margin:0 0 var(--space-2); overflow-wrap:anywhere}
.sv-panel__tagline{margin:0 0 var(--space-2); color:var(--color-text-secondary); line-height:var(--lh-sm)}
.sv-panel__host{margin:0; font-family:var(--font-mono); font-size:var(--text-sm); color:var(--color-text-muted); overflow-wrap:anywhere}
.sv-panel__actions{display:grid; gap:var(--space-2); margin-top:var(--space-5)}
.sv-panel__actions .ts-hint{margin:0}
.sv-vote{display:flex; align-items:center; gap:var(--space-4); margin-top:var(--space-5); padding-top:var(--space-4); border-top:1px solid var(--color-hairline)}
.sv-vote__btn{display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 var(--space-4); border-radius:var(--radius-pill);
  border:1px solid var(--color-border-strong); background:var(--color-surface); color:var(--color-text-primary); font:inherit; font-weight:var(--fw-semibold); cursor:pointer; text-decoration:none}
.sv-vote__btn:hover{border-color:var(--color-accent)}
.sv-vote__btn[aria-pressed="true"]{background:var(--color-accent-soft); border-color:var(--color-border-accent); color:var(--color-accent-hover)}
.sv-vote__btn[aria-disabled="true"], span.sv-vote__btn{cursor:default; opacity:.7}
.sv-stats{display:flex; gap:var(--space-4); margin:0}
.sv-stats div{display:grid}
.sv-stats dt{font-size:11px; color:var(--color-text-muted)}
.sv-stats dd{margin:0; font-weight:var(--fw-semibold); font-size:var(--text-sm); font-variant-numeric:tabular-nums}
.sv-owner{display:flex; align-items:center; gap:var(--space-3); margin-top:var(--space-4); padding-top:var(--space-4); border-top:1px solid var(--color-hairline)}
.sv-owner__by{margin:0; font-size:11px; color:var(--color-text-muted)}
.sv-owner__name{font-weight:var(--fw-semibold); color:var(--color-text-primary); text-decoration:none}
.sv-owner__date{margin-left:auto; font-size:var(--text-xs); color:var(--color-text-muted)}
.sv-manage{display:flex; gap:var(--space-2); align-items:flex-start; margin-top:var(--space-4); flex-wrap:wrap}
.sv-confirm summary{list-style:none; cursor:pointer}
.sv-confirm summary::-webkit-details-marker{display:none}
.sv-confirm[open] form{margin-top:var(--space-2); padding:var(--space-3); border:1px solid var(--color-danger); border-radius:var(--radius-md); background:var(--color-danger-soft)}
.sv-confirm form p{margin:0 0 var(--space-2); font-size:var(--text-xs)}
.sv-mini{list-style:none; margin:0; padding:0; display:grid; gap:var(--space-2)}
.sv-mini a{display:grid; padding:var(--space-2) var(--space-3); border-radius:var(--radius-md); text-decoration:none; color:var(--color-text-primary)}
.sv-mini a:hover{background:var(--color-surface-hover)}
.sv-mini span{font-size:var(--text-xs); color:var(--color-text-muted)}

/* Yorumlar */
.sv-comments{list-style:none; margin:0 0 var(--space-5); padding:0; display:grid; gap:var(--space-4)}
.sv-comment{display:flex; gap:var(--space-3)}
.sv-comment__av{flex:none; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:var(--color-accent-soft);
  color:var(--color-accent-hover); font-weight:var(--fw-bold); font-size:var(--text-sm); text-decoration:none}
.sv-comment__body{flex:1; min-width:0}
.sv-comment__head{display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; margin:0 0 4px; font-size:var(--text-sm)}
.sv-comment__head a{font-weight:var(--fw-semibold); color:var(--color-text-primary); text-decoration:none}
.sv-comment__head time{font-size:var(--text-xs); color:var(--color-text-muted)}
.sv-comment__text{margin:0; color:var(--color-text-secondary); line-height:var(--lh-sm); overflow-wrap:anywhere}
.sv-comment__del{margin-top:4px}
.sv-comment-form{display:grid; gap:var(--space-2)}
.sv-comment-form__foot{display:flex; justify-content:space-between; align-items:center; gap:var(--space-3); flex-wrap:wrap}

/* ── Form + Actful seçici ──────────────────────────────────────────────── */
.sv-actful{border:1px solid var(--color-border-accent); background:linear-gradient(180deg, var(--color-accent-soft), transparent 70%);
  border-radius:var(--radius-xl); padding:var(--space-5); margin-bottom:var(--space-6)}
.sv-actful__head{display:flex; gap:var(--space-3); align-items:flex-start; margin-bottom:var(--space-4)}
.sv-actful__mark{flex:none; display:grid; place-items:center; width:40px; height:40px; border-radius:var(--radius-md); background:var(--color-surface); border:1px solid var(--color-border)}
.sv-actful__title{font-family:var(--font-display); font-size:var(--text-lg); font-weight:var(--fw-bold); margin:0 0 4px}
.sv-actful__sub{margin:0; font-size:var(--text-sm); color:var(--color-text-secondary); line-height:var(--lh-sm)}
.sv-actful__refresh{margin-left:auto; flex:none}
.sv-projects{list-style:none; margin:0 0 var(--space-3); padding:0; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--space-2)}
.sv-project{display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); padding:var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md); min-height:60px}
.sv-project.is-private{background:transparent; border-style:dashed}
.sv-project__text{display:grid; min-width:0}
.sv-project__name{font-size:var(--text-sm); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sv-project__host{font-family:var(--font-mono); font-size:11px; color:var(--color-text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sv-project__state{flex:none; display:inline-flex; align-items:center; gap:6px; font-size:var(--text-xs); font-weight:var(--fw-semibold); color:var(--color-success); text-decoration:none}
.sv-project__state--muted{color:var(--color-text-muted); font-weight:var(--fw-medium)}
.sv-divider{display:flex; align-items:center; gap:var(--space-3); color:var(--color-text-muted); font-size:var(--text-xs); margin:0 0 var(--space-6)}
.sv-divider::before,.sv-divider::after{content:""; flex:1; height:1px; background:var(--color-border)}
.sv-picked{display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3) var(--space-4); border:1px solid var(--color-border-accent);
  background:var(--color-accent-soft); border-radius:var(--radius-md); font-size:var(--text-sm)}
.sv-picked p{margin:0; flex:1; line-height:var(--lh-sm)}

.sv-form{display:grid; gap:var(--space-5)}
.sv-form__grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-5)}
.sv-form .ts-hint{margin:0}
.sv-kind{border:0; padding:0; margin:0; display:flex; gap:var(--space-3); flex-wrap:wrap}
.sv-kind legend{margin-bottom:var(--space-2)}
.sv-kind__opt{position:relative}
.sv-kind__opt input{position:absolute; opacity:0; inset:0; cursor:pointer}
.sv-kind__opt span{display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 var(--space-4); border-radius:var(--radius-md);
  border:1px solid var(--color-border-strong); background:var(--color-surface); font-size:var(--text-sm); font-weight:var(--fw-medium)}
.sv-kind__opt input:checked + span{border-color:var(--color-accent); background:var(--color-accent-soft); color:var(--color-accent-hover)}
.sv-kind__opt input:focus-visible + span{box-shadow:var(--focus-ring)}
.sv-current{display:flex; align-items:center; gap:var(--space-4); flex-wrap:wrap}
.sv-current img{border-radius:var(--radius-sm); border:1px solid var(--color-border); object-fit:cover; width:160px; height:100px}
.sv-check{display:inline-flex; align-items:center; gap:8px; font-size:var(--text-sm); min-height:44px}
.sv-file{padding:6px; height:auto; min-height:48px; cursor:pointer}
.sv-file::file-selector-button{margin-right:var(--space-3); min-height:34px; padding:0 var(--space-4); border:1px solid var(--color-border-strong);
  border-radius:var(--radius-sm); background:var(--color-surface); color:var(--color-text-primary); font:inherit; font-size:var(--text-sm); font-weight:var(--fw-semibold); cursor:pointer}
.sv-file::file-selector-button:hover{border-color:var(--color-accent)}
.sv-form__foot{display:flex; justify-content:flex-end; gap:var(--space-3); padding-top:var(--space-4); border-top:1px solid var(--color-border)}

/* ── Sitelerim ──────────────────────────────────────────────────────────── */
.sv-rows{list-style:none; margin:0; padding:0; display:grid; gap:var(--space-3)}
.sv-row{display:flex; gap:var(--space-4); align-items:center; padding:var(--space-3); border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-surface)}
.sv-row__thumb{position:relative; flex:none; width:128px; aspect-ratio:16 / 10; border-radius:var(--radius-sm); overflow:hidden; background:var(--color-surface-sunken)}
.sv-row__thumb img{width:100%; height:100%; object-fit:cover; object-position:top}
.sv-row__thumb .sv-ph__harf{font-size:32px}
.sv-row__main{flex:1; min-width:0}
.sv-row__title{margin:0 0 4px; display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap}
.sv-row__title a{font-weight:var(--fw-semibold); color:var(--color-text-primary); text-decoration:none}
.sv-row__host,.sv-row__stats{margin:0; font-size:var(--text-xs); color:var(--color-text-muted)}
.sv-row__host{font-family:var(--font-mono)}
.sv-row__reason{margin:4px 0; font-size:var(--text-xs); color:var(--color-danger)}
.sv-row__actions{display:flex; gap:var(--space-2); align-items:flex-start; flex:none}

/* ── Duyarlı ────────────────────────────────────────────────────────────── */
@media (max-width:1024px){
  .sv-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .sv-detail{grid-template-columns:minmax(0, 1fr) 300px; gap:var(--space-5)}
}
@media (max-width:820px){
  .sv-filters{grid-template-columns:1fr}
  .sv-search .ts-input-group{flex:1; width:auto}
  .sv-detail{grid-template-columns:1fr}
  .sv-detail__side{position:static; order:-1}
  .sv-head__cta{align-items:flex-start}
}
@media (max-width:600px){
  .sv-grid{grid-template-columns:1fr}
  .sv-projects{grid-template-columns:1fr}
  .sv-form__grid{grid-template-columns:1fr}
  .sv-search{flex-wrap:wrap}
  .sv-search__btn{display:none}
  .sv-row{flex-wrap:wrap}
  .sv-row__thumb{width:96px}
  .sv-row__actions{width:100%; justify-content:flex-end}
  .sv-actful__head{flex-wrap:wrap}
  .sv-actful__refresh{margin-left:0}
  .sv-form__foot{flex-direction:column-reverse}
  .sv-form__foot .ts-btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .sv-card,.sv-tab{transition:none}
  .sv-card:hover{transform:none}
}

/* Kabuk içi (sol ray + içerik): kap ek dolgu almaz */
.sv-inner{width:100%}
.sv .sv-head__title{font-size:var(--text-3xl)}
.sv .ac-lede{margin-top:var(--space-2)}

/* Mobil: ilk ekranda içerik görünsün — kısa başlık alanı, tek satır sekmeler */
@media (max-width:767px){
  .sv-head{padding-block:var(--space-2) var(--space-4); margin-bottom:var(--space-4); gap:var(--space-3)}
  .sv .sv-head__title{font-size:var(--text-2xl); margin-bottom:var(--space-2)}
  .sv-head .ac-lede{font-size:var(--text-base); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
  .sv-head__cta{align-items:flex-start; width:100%}
  .sv-head__cta .ts-btn--lg{height:40px; font-size:var(--text-sm)}
  .sv-head__note{display:none}
  .sv-filters{grid-template-columns:1fr; gap:var(--space-3); margin-bottom:var(--space-4)}
  .sv-tabs{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent)}
  .sv-tabs::-webkit-scrollbar{display:none}
  .sv-tab{flex:none; min-height:38px}
  .sv-search .ts-input-group{width:auto; flex:1}
}