/* Hesap, profil, arkadaşlar, dublaj sayfası, filtreler ve Seçmeli mod */

/* --- Ortak form parçaları --- */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.textarea { height: auto; padding: 10px 14px; resize: vertical; line-height: 1.5; }
.input-prefix, .input-suffix, .input-icon { position: relative; display: block; }
.input-prefix > span { position: absolute; left: 14px; top: 50%; translate: 0 -50%; color: var(--faint); pointer-events: none; }
.input-prefix .input { padding-left: 30px; }
.input-suffix .input { padding-right: 70px; }
.input-suffix .btn-text { position: absolute; right: 12px; top: 50%; translate: 0 -50%; font-size: 13px; }
.input-icon .icon { position: absolute; left: 12px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; color: var(--faint); pointer-events: none; }
.input-icon .input { padding-left: 38px; }
.form-error { padding: 10px 14px; border-radius: 12px; background: var(--tally-soft); color: var(--tally); font-size: 14px; font-weight: 500; }
.link-strong { color: var(--text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.small-print { font-size: 13px; }
.empty { display: grid; gap: 6px; justify-items: start; }
.empty strong { color: var(--text); }
.empty p { color: var(--muted); }
.empty .btn { margin-top: 8px; }
/* Panel içindeki boş durum ayrı kart gibi görünmesin */
.panel .empty { padding: 4px 0; background: none; }

/* Açma/kapama anahtarı */
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; color: var(--muted); font-size: 14px; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-track { position: relative; width: 38px; height: 22px; border-radius: 11px; background: var(--control); transition: background .15s; flex: none; }
.switch-track::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--muted); transition: transform .18s var(--ease), background .15s; }
.switch input:checked + .switch-track { background: var(--text); }
.switch input:checked + .switch-track::after { transform: translateX(16px); background: var(--inverse); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--text); outline-offset: 2px; }

/* Oturumla oynayan kullanıcı */
.as-user { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--raised); }
.as-user span { display: grid; }
.as-user small { font-size: 12px; }
img.avatar { object-fit: cover; background: var(--raised); }

/* --- Giriş / kayıt --- */
.auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 460px); gap: clamp(28px, 6vw, 96px); align-items: center; min-height: calc(100vh - 220px); }
.auth-intro .lead { margin-top: 18px; }
.auth-perks { display: grid; gap: 10px; margin-top: 28px; }
.auth-perks li { position: relative; padding-left: 26px; color: var(--muted); }
.auth-perks li::before { content: ""; position: absolute; left: 0; top: 7px; width: 10px; height: 10px; border-radius: 50%; background: var(--tally); }
.auth-card { display: grid; gap: 16px; padding: 28px; }
.tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px; background: var(--raised); }
.tabs a { height: 36px; display: grid; place-items: center; border-radius: 999px; font-weight: 500; color: var(--muted); transition: background .15s, color .15s; }
.tabs a.is-on { background: var(--text); color: var(--inverse); }
.btn-google { background: #fff; color: #1f1f1f; box-shadow: inset 0 0 0 1px #dadce0; }
.btn-google:hover { background: #f6f6f6; }
.g-logo { width: 18px; height: 18px; }
.divider { display: flex; align-items: center; gap: 12px; color: var(--faint); font-size: 13px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--raised); }
.auth-switch { text-align: center; font-size: 14px; }

/* --- Profil --- */
.profile-head { display: grid; grid-template-columns: auto 1fr auto; gap: 32px; align-items: center; }
.profile-info { display: grid; gap: 8px; }
.profile-info .lead { color: var(--text); }
.stats { display: flex; gap: 32px; margin: 10px 0 0; }
.stats div { display: grid; }
.stats dt { order: 2; color: var(--faint); font-size: 13px; }
.stats dd { order: 1; margin: 0; font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
.profile-actions { align-self: start; }
.voices { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: var(--muted); }
.voice { display: inline-flex; align-items: center; gap: 6px; }
.scene-meta .icon { width: 14px; height: 14px; vertical-align: -2px; }
.scene-adult .icon { width: 12px; height: 12px; vertical-align: -1px; }

/* --- Ayarlar --- */
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.avatar-edit { display: flex; align-items: center; gap: 20px; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch { width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--c); transition: transform .12s; }
.swatch:hover { transform: scale(1.08); }
.swatch[aria-checked="true"] { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--text); }
.kv { display: grid; gap: 10px; margin: 0; }
.kv div { display: flex; justify-content: space-between; gap: 12px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.danger-zone { margin-top: 10px; padding: 18px; border-radius: 16px; background: var(--tally-soft); }
.danger-zone .muted { color: var(--text); opacity: .8; }

/* --- Kişi listeleri --- */
.friends-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.people { display: grid; gap: 2px; }
.person { display: flex; align-items: center; gap: 12px; padding: 8px 10px; margin: 0 -10px; border-radius: 14px; transition: background .15s; }
.person:hover { background: var(--raised); }
.person-link { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.person .grow { display: grid; min-width: 0; }
.person strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person small { color: var(--faint); }
.people.compact .person { padding: 6px 8px; margin: 0 -8px; }
.presence { display: inline-flex; align-items: center; gap: 6px; }
.presence::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.presence.is-online { color: var(--positive); }
.presence.is-online::before { background: var(--positive); }

/* --- Dublaj sayfası --- */
.save-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 14px; border-radius: 14px; background: var(--raised); font-size: 14px; }
.save-note > .icon { width: 18px; height: 18px; color: var(--positive); }
.btn[aria-pressed="true"] .icon { color: var(--tally); }

/* --- Sahne kartı ek bilgiler --- */
.cast-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.cast-cards li { display: grid; padding: 12px 14px; border-radius: 14px; background: var(--surface); }
.cast-cards small { color: var(--faint); }

/* --- Filtreler --- */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 18px; }
.filters-search { flex: 1 1 240px; max-width: 360px; }
.seg { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: var(--surface); }
.seg-label { padding: 0 10px 0 8px; font-size: 13px; color: var(--faint); }
.seg button { min-width: 34px; height: 30px; padding: 0 10px; border: 0; border-radius: 999px; background: none; color: var(--muted); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
.seg button:hover { color: var(--text); }
.seg button[aria-checked="true"] { background: var(--text); color: var(--inverse); }
.select-wrap .input { height: 36px; width: auto; min-width: 150px; border-radius: 999px; }
.result-count { margin-bottom: 18px; font-size: 14px; }

/* --- Seçmeli mod: karakter kartları --- */
.claim-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.claim { display: grid; gap: 12px; padding: 16px; border-radius: 16px; background: var(--raised); transition: background .15s, box-shadow .15s; }
.claim-head { display: grid; gap: 2px; }
.claim-head strong { font-size: 17px; }
.claim-owner { display: flex; align-items: center; gap: 8px; min-height: 24px; font-size: 14px; }
.claim.is-taken { box-shadow: inset 0 0 0 2px var(--c); }
.claim.is-mine { background: var(--text); color: var(--inverse); box-shadow: inset 0 0 0 2px var(--c); }
.claim.is-mine .muted { color: inherit; opacity: .7; }
.claim .btn { justify-self: start; }

@media (max-width: 960px) {
  .auth, .settings-grid, .friends-layout { grid-template-columns: 1fr; }
  .auth { min-height: 0; }
  .profile-head { grid-template-columns: auto 1fr; }
  .profile-actions { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .profile-head { grid-template-columns: 1fr; gap: 18px; }
  .profile-head > .avatar { --s: 96px !important; }
  .stats { gap: 22px; }
  .seg { flex-wrap: wrap; }
  .filters-search { max-width: none; }
  /* Telefonda gezinme ikinci satıra iner, gerekirse yatay kayar */
  .topbar { height: auto; flex-wrap: wrap; row-gap: 0; padding-top: 10px; }
  .topbar .nav { order: 3; width: 100%; height: 44px; gap: 18px; overflow-x: auto; scrollbar-width: none; }
  .topbar .nav a:first-child { display: inline-flex; }
  .menu-code { display: none; }
}

/* --- Ücretsiz bilgisi ve üyelik çağrısı --- */
.free-note { margin-top: 14px; color: var(--positive); font-weight: 500; }
.join-cta { display: grid; gap: 12px; }
.join-cta h2 { font-size: var(--fs-title); }
.free-list { display: grid; gap: 6px; margin-top: 6px; }
.free-list li { position: relative; padding-left: 24px; color: var(--muted); font-size: 14px; }
.free-list li::before {
  content: ""; position: absolute; left: 2px; top: 4px; width: 12px; height: 7px;
  border-left: 2px solid var(--positive); border-bottom: 2px solid var(--positive); transform: rotate(-45deg);
}
.gate { justify-items: stretch; text-align: left; }

/* Hazır avatar seçimi */
.preset-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.preset { padding: 0; border: 0; border-radius: 50%; background: none; aspect-ratio: 1; transition: transform .12s; }
.preset img { width: 100%; height: 100%; border-radius: 50%; display: block; }
.preset:hover { transform: scale(1.06); }
.preset[aria-checked="true"] { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--text); }
@media (max-width: 600px) { .preset-grid { grid-template-columns: repeat(4, 1fr); } }

/* Önizleme avatarı yanındaki metin uzun olsa da daralmasın */
.avatar-edit > :first-child { flex: none; }