/* LAGOR — "Sinyal" tasarım sistemi. Gece laciverti + sinyal sarısı. Açık ve koyu tema. */

/* ---------- Belirteçler ---------- */
:root, [data-theme="dark"] {
  --bg: #0A1020;
  --bg-2: #0D152A;
  --surface: #111B32;
  --surface-2: #16223D;
  --surface-3: #1D2B4A;
  --line: #1E2A47;
  --line-2: #2A3A5E;
  --text: #EEF2FF;
  --text-2: #C7D0E8;
  --muted: #8B98B8;
  --faint: #5E6B8C;
  --signal: #FFD84D;
  --signal-2: #FFE47F;
  --signal-ink: #FFD84D;
  --signal-soft: rgba(255, 216, 77, .13);
  --signal-line: rgba(255, 216, 77, .38);
  --on-signal: #0A1020;
  --live: #FF5C5C;
  --live-soft: rgba(255, 92, 92, .14);
  --mint: #3EE0A1;
  --sky: #5BC8FF;
  --glass: rgba(10, 16, 32, .8);
  --shadow: 0 24px 60px -24px rgba(0, 0, 0, .75);
  --shadow-s: 0 6px 18px -8px rgba(0, 0, 0, .6);
  color-scheme: dark;
}
[data-theme="light"] {
  --bg: #F1F4FA;
  --bg-2: #E8EDF6;
  --surface: #FFFFFF;
  --surface-2: #F3F5FA;
  --surface-3: #E7ECF5;
  --line: #E0E6F1;
  --line-2: #CCD5E5;
  --text: #0A1020;
  --text-2: #26314D;
  --muted: #5A6684;
  --faint: #8C96AE;
  --signal: #FFD84D;
  --signal-2: #FFCB1F;
  --signal-ink: #8A6200;
  --signal-soft: rgba(255, 196, 0, .18);
  --signal-line: rgba(176, 128, 0, .4);
  --on-signal: #0A1020;
  --live: #E5484D;
  --live-soft: rgba(229, 72, 77, .1);
  --mint: #109A66;
  --sky: #1B87CF;
  --glass: rgba(241, 244, 250, .85);
  --shadow: 0 24px 50px -26px rgba(10, 16, 32, .35);
  --shadow-s: 0 6px 16px -10px rgba(10, 16, 32, .3);
  color-scheme: light;
}
:root {
  --bone: var(--text); --bone-2: var(--text-2); --gold: var(--signal-ink); --gold-2: var(--signal-2);
  --gold-soft: var(--signal-soft); --gold-line: var(--signal-line); --ink: var(--on-signal); --danger: var(--live); --ok: var(--mint);
  --f-display: 'Bricolage Grotesque', 'Figtree', system-ui, sans-serif;
  --f-body: 'Figtree', 'Segoe UI', system-ui, sans-serif;
  --r: 16px; --r-s: 12px; --r-l: 24px;
  --hdr-h: 64px; --tick-h: 0px; --top-h: calc(var(--hdr-h) + var(--tick-h) + var(--safe-t));
  --side-w: 236px; --center-w: 640px; --rail-w: 360px;
  --tab-h: 66px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  /* Çentikli telefonlarda (ana ekrandan açılınca) üst çubuk saat satırına yapışmasın: güvenli alanın biraz altına */
  --safe-t: calc(env(safe-area-inset-top, 0px) * 1.25);
  --ease: cubic-bezier(.2, .8, .2, 1);
}
body.has-ticker { --tick-h: 38px; }

/* ---------- Taban ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: transparent transparent; scrollbar-width: thin; }
html.sb-on { scrollbar-color: color-mix(in srgb, var(--text) 24%, transparent) transparent; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body { font: 400 15.5px/1.5 var(--f-body); min-height: 100dvh; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, [role="button"] { cursor: pointer; font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; }
button:disabled { cursor: not-allowed; opacity: .45; }
input, textarea, select { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }
svg { flex: none; }
::selection { background: var(--signal); color: var(--on-signal); }
:focus-visible { outline: 2.5px solid var(--sky); outline-offset: 2px; border-radius: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); } .faint { color: var(--faint); } .gold { color: var(--signal-ink); } .danger { color: var(--live); } .ok { color: var(--mint); }
.display { font-family: var(--f-display); font-weight: 700; letter-spacing: -.02em; }
.eyebrow { font-size: 13px; font-weight: 600; color: var(--signal-ink); }
.small { font-size: 13.5px; } .tiny { font-size: 12px; }
.row { display: flex; align-items: center; gap: 10px; }
.col { display: flex; flex-direction: column; gap: 10px; }
.grow { flex: 1; min-width: 0; }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hide { display: none !important; }
.spacer { height: 16px; }
.boot { display: grid; place-items: center; height: 60vh; }
.boot-mark { width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--line-2); border-top-color: var(--signal); animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes fade { from { opacity: 0; } }

/* ---------- Marka ---------- */
.logo { display: inline-flex; align-items: center; gap: 9px; color: var(--text); }
.logo .mark { width: 34px; height: 34px; }
.logo .word { font: 800 23px/1 var(--f-display); font-variation-settings: 'wdth' 88; letter-spacing: -.01em; }
.logo.xl .mark { width: 64px; height: 64px; } .logo.xl .word { font-size: 46px; }
.mark .m-bg { fill: var(--signal); }
.mark .m-line { stroke: var(--on-signal); }

/* ---------- Üst bölge: başlık + haber şeridi ---------- */
.topwrap { position: sticky; top: 0; z-index: 50; background: var(--glass); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); border-bottom: 1px solid var(--line); padding-top: var(--safe-t); }
.hdr { height: var(--hdr-h); display: flex; align-items: center; gap: 14px; padding: 0 22px; max-width: calc(var(--side-w) + var(--center-w) + var(--rail-w) + 96px); margin: 0 auto; }
.hdr .logo { width: calc(var(--side-w) + 4px); flex: none; }
.hdr-search { flex: 1; max-width: 520px; position: relative; }
.hdr-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--muted); pointer-events: none; }
.hdr-search input { width: 100%; height: 42px; border-radius: 13px; border: 1px solid var(--line); background: var(--surface-2); padding: 0 14px 0 42px; outline: none; transition: border-color .15s, background .15s; }
.hdr-search input:focus { border-color: var(--sky); background: var(--surface); }
.hdr-search input::placeholder { color: var(--faint); }
.hdr-tools { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.hdr-tools .btn.gold { margin-left: 6px; }
.ticker { height: var(--tick-h); display: flex; align-items: center; border-top: 1px solid var(--line); overflow: hidden; font-size: 13.5px; }
.ticker[hidden] { display: none; }
.tick-label { flex: none; display: flex; align-items: center; gap: 8px; height: 100%; padding: 0 16px 0 22px; font-weight: 700; color: var(--text); }
.tick-label::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 4px var(--live-soft); animation: blink 1.6s infinite; }
.tick-track { flex: 1; overflow: hidden; height: 100%; mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); }
.tick-run { display: inline-flex; align-items: center; height: 100%; white-space: nowrap; animation: tick var(--tick-dur, 120s) linear infinite; will-change: transform; }
.ticker:hover .tick-run, .ticker:focus-within .tick-run { animation-play-state: paused; }
.tick-item { display: inline-flex; align-items: center; gap: 8px; padding: 0 26px 0 0; color: var(--text-2); height: 100%; }
.tick-item:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.tick-item b { font-size: 10.5px; font-weight: 800; padding: 2px 6px; border-radius: 5px; background: var(--surface-3); color: var(--text-2); }
.tick-item time { color: var(--faint); font-size: 12px; font-variant-numeric: tabular-nums; }
@keyframes tick { to { transform: translateX(-50%); } }

/* ---------- İskelet ---------- */
.shell { display: grid; grid-template-columns: var(--side-w) minmax(0, var(--center-w)) var(--rail-w); justify-content: center; gap: 0 26px; padding: 0 22px; }
.side { position: sticky; top: var(--top-h); height: calc(100dvh - var(--top-h)); padding: 18px 0; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; scrollbar-width: none; }
.main { min-width: 0; padding: 0 0 calc(140px + var(--safe-b)); outline: none; min-height: 70vh; }
.rail { position: sticky; top: var(--top-h); height: calc(100dvh - var(--top-h)); overflow-y: auto; padding: 18px 0 40px; scrollbar-width: none; }
.rail::-webkit-scrollbar, .side::-webkit-scrollbar { display: none; }
.tabbar { display: none; }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a { display: flex; align-items: center; gap: 14px; height: 46px; padding: 0 14px; border-radius: 14px; color: var(--text-2); font-weight: 500; font-size: 15.5px; transition: background .15s, color .15s; position: relative; }
.nav a svg { width: 22px; height: 22px; color: var(--muted); }
.nav a:hover { background: var(--surface); color: var(--text); }
.nav a.on { background: var(--surface); color: var(--text); font-weight: 700; }
.nav a.on::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: var(--signal); }
.nav a.on svg { color: var(--signal-ink); }
.nav .count { margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--live); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.side .cta { margin: 14px 0 0; }
.side .me-chip { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); }
.side .me-chip:hover { border-color: var(--line-2); }
.side-foot { padding: 14px 6px 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; color: var(--faint); }
.side-foot a:hover { color: var(--text); }

/* Araçlar mührü ve dil */
.lang { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; font-size: 12px; font-weight: 700; background: var(--surface-2); }
.lang button { padding: 6px 8px; color: var(--muted); }
.lang button.on { background: var(--text); color: var(--bg); }

/* ---------- Düğmeler ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 13px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text); font-weight: 600; font-size: 14.5px; white-space: nowrap; transition: background .15s, border-color .15s, transform .1s, box-shadow .15s; user-select: none; }
.btn:hover { background: var(--surface-2); border-color: var(--faint); }
.btn:active { transform: scale(.97); }
.btn svg { width: 18px; height: 18px; }
.btn.gold { background: var(--signal); border-color: var(--signal); color: var(--on-signal); font-weight: 700; box-shadow: 0 8px 22px -12px rgba(255, 196, 0, .8); }
.btn.gold:hover { background: var(--signal-2); border-color: var(--signal-2); }
.btn.bone { background: var(--text); border-color: var(--text); color: var(--bg); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn.ghost:hover { background: var(--surface-2); }
.btn.line { background: transparent; }
.btn.danger { color: var(--live); border-color: transparent; background: var(--live-soft); }
.btn.sm { height: 34px; padding: 0 13px; font-size: 13.5px; border-radius: 11px; }
.btn.lg { height: 52px; padding: 0 24px; font-size: 16px; border-radius: 16px; }
.btn.block { width: 100%; }
.btn.on { border-color: var(--signal-line); color: var(--signal-ink); background: var(--signal-soft); }
.ibtn { width: 40px; height: 40px; display: inline-grid; place-items: center; border-radius: 12px; color: var(--text-2); transition: background .15s, color .15s; position: relative; }
.ibtn:hover { background: var(--surface-2); color: var(--text); }
.ibtn svg { width: 21px; height: 21px; }
.ibtn.sm { width: 34px; height: 34px; border-radius: 10px; } .ibtn.sm svg { width: 18px; height: 18px; }
.ibtn.on { color: var(--signal-ink); }
.ibtn .dot { position: absolute; top: 4px; right: 3px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--live); color: #fff; font-size: 10.5px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--bg); }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 13px; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.chip:hover { border-color: var(--signal-line); color: var(--text); }
.chip.gold { border-color: var(--signal-line); color: var(--signal-ink); background: var(--signal-soft); }
.chip.solid { background: var(--surface-2); border-color: transparent; }
.chip svg { width: 14px; height: 14px; }
.tagchip { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 8px; background: var(--surface-2); color: var(--text-2); font-size: 13px; font-weight: 600; }
.tagchip:hover { background: var(--signal-soft); color: var(--signal-ink); }
.seg { display: flex; gap: 4px; padding: 4px; background: var(--surface-2); border-radius: 14px; overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg button, .seg a { flex: none; height: 34px; padding: 0 15px; border-radius: 10px; color: var(--muted); font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; transition: background .15s, color .15s; }
.seg button:hover, .seg a:hover { color: var(--text); }
.seg .on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-s); }
[data-theme="dark"] .seg .on { background: var(--surface-3); }
.tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--line); padding: 0 4px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button, .tabs a { flex: none; padding: 14px 0 12px; color: var(--muted); font-weight: 600; border-bottom: 2.5px solid transparent; margin-bottom: -1px; }
.tabs .on { color: var(--text); border-color: var(--signal); }

/* ---------- Sayfa başlığı ---------- */
.phead { position: sticky; top: var(--top-h); z-index: 20; background: var(--bg); }
.phead-in { display: flex; align-items: center; gap: 12px; padding: 18px 4px 12px; min-height: 64px; }
.phead h1 { margin: 0; font: 800 27px/1.1 var(--f-display); font-variation-settings: 'wdth' 90; letter-spacing: -.02em; }
.phead .sub { font-size: 13.5px; color: var(--muted); margin-top: 3px; }
.phead-tools { padding: 0 0 14px; }
.section { padding: 20px 4px; }
.section + .section { border-top: 1px solid var(--line); }
.section h2, .h2 { margin: 0 0 14px; font: 700 19px/1.2 var(--f-display); letter-spacing: -.01em; }
.empty { padding: 60px 24px; text-align: center; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.empty .art { width: 28px; height: 28px; color: var(--signal-ink); padding: 16px; border-radius: 20px; background: var(--signal-soft); box-sizing: content-box; }
.empty b { color: var(--text); font: 700 20px/1.25 var(--f-display); text-wrap: balance; }
.empty > span { max-width: 340px; line-height: 1.55; text-wrap: balance; }
.empty .ln { display: block; text-wrap: balance; }
.empty .ln + .ln { margin-top: 4px; }

/* ---------- Avatar, rozet ---------- */
.av { --s: 42px; width: var(--s); height: var(--s); border-radius: 50%; background: var(--surface-3); display: grid; place-items: center; overflow: hidden; flex: none; font: 700 calc(var(--s) * .42) var(--f-display); color: var(--text-2); position: relative; }
.av img, .av svg { width: 100%; height: 100%; object-fit: cover; }
.av.xs { --s: 24px; } .av.sm { --s: 32px; } .av.md { --s: 48px; } .av.lg { --s: 88px; } .av.xl { --s: 108px; }
.av.anon { color: var(--faint); } .av.anon svg { width: 55%; height: 55%; }
.av.ring { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4.5px var(--signal); }
.vmark { width: 16px; height: 16px; display: inline-block; vertical-align: -2px; }
.vmark.owner { color: var(--mint); } .vmark.team { color: var(--signal-ink); }
.name { font-weight: 700; color: var(--text); }
.handle { color: var(--muted); font-size: 13.5px; }
.badge { display: inline-flex; align-items: center; gap: 4px; height: 21px; padding: 0 8px; border-radius: 7px; background: var(--signal-soft); color: var(--signal-ink); font-size: 11.5px; font-weight: 700; }
.badge svg { width: 12px; height: 12px; }
.mutual { color: var(--mint); font-size: 13px; font-weight: 700; }
.stamp { display: inline-flex; align-items: center; gap: 4px; height: 21px; padding: 0 8px; border-radius: 7px; font-size: 11.5px; font-weight: 700; }
.stamp svg { width: 12px; height: 12px; }
.stamp.new { background: var(--sky); color: #04121f; }
.stamp.mega { background: var(--signal); color: var(--on-signal); }
.stamp.soft, .stamp.lock { background: var(--surface-3); color: var(--text-2); font-weight: 600; }
.stamp.warn { background: var(--live-soft); color: var(--live); }

/* ---------- Ses izi (imza öğe) ---------- */
.print { --p: 96px; position: relative; display: block; width: var(--p); height: var(--p); border-radius: 26%; background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--hue) 28%, var(--surface-2)), color-mix(in srgb, var(--hue) 8%, var(--surface-2)) 72%); overflow: hidden; flex: none; }
[data-theme="light"] .print { background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--hue) 34%, #fff), color-mix(in srgb, var(--hue) 14%, #fff) 74%); }
.print.round { border-radius: 50%; }
.print > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.print .pb { stroke: var(--hue); stroke-linecap: round; opacity: .4; }
[data-theme="light"] .print .pb { stroke: color-mix(in srgb, var(--hue) 62%, #0A1020); opacity: .32; }
.print .pb.on { opacity: 1; }
.print .core { fill: var(--surface); }
[data-theme="dark"] .print .core { fill: #0A1020; }
.print .play { position: absolute; left: 50%; top: 50%; width: 36%; height: 36%; transform: translate(-50%, -50%); border-radius: 50%; display: grid; place-items: center; color: var(--text); z-index: 2; transition: transform .15s; }
.print .play svg { width: 44%; height: 44%; }
.print:hover .play { transform: translate(-50%, -50%) scale(1.08); }
.print .ava { position: absolute; left: 50%; top: 50%; width: 36%; height: 36%; transform: translate(-50%, -50%); border-radius: 50%; overflow: hidden; z-index: 2; }
.print .ava .av { --s: 100%; width: 100%; height: 100%; font-size: calc(var(--p) * .14); }
.print .ava .mark { width: 100%; height: 100%; }
.playing .print { animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--hue) 20%, transparent); } }

/* Ömür: beş dilim */
.life { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12.5px; font-weight: 600; border-radius: 8px; padding: 2px 5px; margin: -2px -5px; white-space: nowrap; }
button.life:hover { background: var(--surface-2); color: var(--text); }
.life-seg { display: inline-flex; gap: 3px; }
.life-seg i { width: 11px; height: 5px; border-radius: 3px; background: var(--line-2); position: relative; overflow: hidden; }
.life-seg i b { position: absolute; left: 0; top: 0; bottom: 0; width: var(--f, 0%); background: var(--mint); border-radius: inherit; }
.life-seg i.cr { background: var(--live-soft); outline: 1px dashed var(--live); outline-offset: -1px; }
.life.low .life-seg i b { background: var(--live); }

/* ---------- Ses kartı ---------- */
.feed { display: flex; flex-direction: column; gap: 14px; }
.clip { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 16px; transition: border-color .2s, box-shadow .2s; }
.clip:hover { border-color: var(--line-2); }
.clip.playing { border-color: color-mix(in srgb, var(--hue, var(--signal)) 60%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--hue, var(--signal)) 30%, transparent), var(--shadow); }
.clip.hidden-clip { opacity: .55; }
.clip-by { display: flex; align-items: center; gap: 6px; margin: -2px 0 10px; font-size: 13px; font-weight: 600; color: var(--muted); }
.clip-by svg { width: 15px; height: 15px; color: var(--mint); }
.vc { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; }
.vc-main { min-width: 0; display: flex; flex-direction: column; }
.vc-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.vc-who { display: flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; font-size: 14px; }
.vc-who .av { --s: 24px; }
.vc-who .handle { font-size: 13px; }
.vc-top .more { margin-left: auto; margin-right: -8px; margin-top: -6px; }
.vc-title { margin: 6px 0 0; font: 800 24px/1.1 var(--f-display); font-variation-settings: 'wdth' 92; letter-spacing: -.02em; word-break: break-word; }
.vc-title a:hover { color: var(--signal-ink); }
.vc-sub { display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; margin-top: 7px; font-size: 12.5px; color: var(--muted); }
.vc-sub a:hover { color: var(--text); }
.clip-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.vc-bar { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.vc-bar .prog { flex: 1; height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; cursor: pointer; }
.vc-bar .prog i { display: block; height: 100%; width: 0; background: var(--hue, var(--signal)); border-radius: inherit; }
[data-theme="light"] .vc-bar .prog i { background: color-mix(in srgb, var(--hue) 75%, #0A1020); }
.ptime { font-variant-numeric: tabular-nums; font-size: 12.5px; font-weight: 700; color: var(--muted); min-width: 34px; text-align: right; }
.here { display: inline-flex; align-items: center; gap: 6px; color: var(--live); font-size: 12.5px; font-weight: 700; }
.here::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--live); animation: blink 1.4s infinite; }
.photo { margin-top: 12px; border-radius: var(--r); overflow: hidden; background: var(--surface-2); max-height: 480px; }
.photo img { width: 100%; max-height: 480px; object-fit: cover; cursor: zoom-in; }
.quote-box { margin-top: 12px; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); display: flex; align-items: center; gap: 12px; border-left: 3px solid var(--sky); }
.quote-box .q-who { font-size: 12.5px; color: var(--muted); }
.quote-box .q-title { font: 700 15px var(--f-display); }
.quote-box .q-mark { width: 18px; height: 18px; color: var(--faint); }
.quote-box.gone { color: var(--faint); font-size: 13px; border-left-color: var(--line-2); }
.acts { display: flex; align-items: center; gap: 2px; margin: 10px -8px -6px; }
.act { height: 36px; padding: 0 10px; border-radius: 11px; display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; transition: color .15s, background .15s; }
.act:hover { color: var(--text); background: var(--surface-2); }
.act svg { width: 19px; height: 19px; }
.act.on { color: var(--signal-ink); }
.act[data-a="react"].on { color: var(--live); }
.acts .end { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.ear { display: inline-flex; align-items: center; gap: 5px; font-variant-numeric: tabular-nums; }
.ear svg { width: 15px; height: 15px; }
.ear .dl { color: var(--signal-ink); margin-left: 4px; }
.clip.is-reply { border-radius: 18px; padding: 12px 14px; }
.clip-rtitle { margin: 4px 0 0; font-size: 14px; color: var(--text-2); }

/* Dalga ve oynat düğmesi (posta, stüdyo) */
.player { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.pbtn { width: 46px; height: 46px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--text); color: var(--bg); transition: transform .12s, box-shadow .2s, background .15s; }
.pbtn:active { transform: scale(.94); }
.pbtn svg { width: 19px; height: 19px; }
.pbtn.on { background: var(--signal); color: var(--on-signal); box-shadow: 0 0 0 6px var(--signal-soft); }
.pbtn.sm { width: 38px; height: 38px; } .pbtn.sm svg { width: 15px; height: 15px; }
.pbtn.xs { width: 32px; height: 32px; } .pbtn.xs svg { width: 13px; height: 13px; }
.pbtn.lg { width: 66px; height: 66px; } .pbtn.lg svg { width: 25px; height: 25px; }
.wave { flex: 1; min-width: 0; height: 44px; display: flex; align-items: center; gap: 2px; cursor: pointer; overflow: hidden; touch-action: none; }
.wave i { flex: 1; min-width: 0; max-width: 5px; border-radius: 3px; background: var(--line-2); height: calc(var(--h, 30) * 1%); min-height: 3px; }
.wave i.on { background: var(--signal); }
[data-theme="light"] .wave i.on { background: var(--signal-2); }
.wave.sm { height: 30px; }

/* Açılır: tepki, menü */
.popover { position: fixed; z-index: 90; background: var(--surface); border: 1px solid var(--line-2); border-radius: 18px; box-shadow: var(--shadow); padding: 6px; animation: pop .16s var(--ease); }
.reacts { display: flex; gap: 2px; }
.reacts button { width: 60px; padding: 9px 0 7px; border-radius: 13px; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--muted); transition: background .12s, color .12s, transform .15s; }
.reacts button:hover { background: var(--surface-2); color: var(--text); transform: translateY(-3px); }
.reacts button.on { color: var(--live); background: var(--live-soft); }
.reacts svg { width: 26px; height: 26px; }
.menu { display: flex; flex-direction: column; min-width: 230px; }
.menu button, .menu a { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 11px; font-size: 14.5px; font-weight: 500; color: var(--text-2); text-align: left; }
.menu button:hover, .menu a:hover { background: var(--surface-2); color: var(--text); }
.menu svg { width: 18px; height: 18px; color: var(--muted); }
.menu .danger, .menu .danger svg { color: var(--live); }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 6px; }

/* ---------- Alt: oynatıcı çubuğu + sessiz bildirim ---------- */
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 12px calc(14px + var(--safe-b)); }
.dock > * { pointer-events: auto; }
.notice { max-width: 560px; width: 100%; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--text); color: var(--bg); box-shadow: var(--shadow); font-size: 14px; font-weight: 600; animation: rise .25s var(--ease); }
.notice svg { width: 18px; height: 18px; }
.notice.err { background: var(--live); color: #fff; }
.notice .x { margin-left: auto; opacity: .6; }
.pbar { width: 100%; max-width: 640px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow); overflow: hidden; animation: rise .3s var(--ease); }
.pbar-in { display: flex; align-items: center; gap: 12px; padding: 9px 10px 9px 9px; }
.pbar .t { font: 700 15px var(--f-display); }
.pbar .s { font-size: 12.5px; color: var(--muted); }
.pbar .prog { height: 3px; background: var(--line); position: relative; cursor: pointer; }
.pbar .prog i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--signal); width: 0; }
.pbar .ctrls { display: flex; align-items: center; gap: 2px; }

/* ---------- Pencereler ---------- */
.scrim { position: fixed; inset: 0; z-index: 70; background: rgba(5, 9, 20, .55); backdrop-filter: blur(4px); animation: fade .2s; display: flex; align-items: center; justify-content: center; padding: 20px; }
.sheet { width: 100%; max-width: 520px; max-height: min(88dvh, 860px); overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 26px; box-shadow: var(--shadow); animation: pop .22s var(--ease); }
.sheet.wide { max-width: 660px; }
.sheet-h { display: flex; align-items: center; gap: 10px; padding: 20px 20px 6px 24px; position: sticky; top: 0; background: var(--surface); z-index: 2; }
.sheet-h h3 { margin: 0; font: 800 22px/1.2 var(--f-display); letter-spacing: -.01em; flex: 1; }
.sheet-b { padding: 10px 24px 22px; }
.sheet-f { display: flex; gap: 10px; justify-content: flex-end; padding: 14px 24px 20px; position: sticky; bottom: 0; background: var(--surface); border-top: 1px solid var(--line); }
.lightbox { position: fixed; inset: 0; z-index: 95; background: rgba(0, 0, 0, .9); display: grid; place-items: center; padding: 20px; cursor: zoom-out; }
.lightbox img { max-height: 92dvh; border-radius: 14px; }

/* ---------- Form ---------- */
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.field > label, .label { font-size: 13.5px; color: var(--text-2); font-weight: 600; }
.input, .textarea, .select { width: 100%; height: 46px; padding: 0 14px; border-radius: 13px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text); outline: none; transition: border-color .15s, box-shadow .15s, background .15s; }
.textarea { height: auto; min-height: 86px; padding: 12px 14px; resize: vertical; line-height: 1.5; }
.input:focus, .textarea:focus, .select:focus { border-color: var(--sky); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sky) 22%, transparent); background: var(--surface); }
.input::placeholder, .textarea::placeholder { color: var(--faint); }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B98B8' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; padding-right: 38px; }
.hint { font-size: 12.5px; color: var(--muted); }
.counter { font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; font-weight: 700; }
.counter.full { color: var(--signal-ink); }
.switch { display: flex; align-items: center; gap: 12px; padding: 10px 0; cursor: pointer; user-select: none; }
.switch .tx { flex: 1; min-width: 0; }
.switch .tx b { display: block; font-weight: 600; }
.switch .tx span { font-size: 12.5px; color: var(--muted); }
.switch input { appearance: none; width: 46px; height: 28px; border-radius: 14px; background: var(--surface-3); border: 1px solid var(--line-2); position: relative; transition: background .2s; flex: none; cursor: pointer; }
.switch input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--faint); transition: transform .2s var(--ease), background .2s; }
.switch input:checked { background: var(--signal); border-color: var(--signal); }
.switch input:checked::after { transform: translateX(18px); background: var(--on-signal); }
.range { width: 100%; accent-color: var(--signal-2); }
.opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.opt { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--surface); text-align: left; transition: border-color .15s, background .15s; }
.opt b { font-weight: 600; font-size: 14px; }
.opt span { font-size: 12px; color: var(--muted); }
.opt:hover { border-color: var(--line-2); }
.opt.on { border-color: var(--signal); background: var(--signal-soft); }
.err-text { color: var(--live); font-size: 13px; }
.soon { margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--signal-soft); color: var(--text-2); font-size: 14px; }
.suggest { position: relative; }
.suggest-list { position: absolute; z-index: 10; left: 0; right: 0; top: calc(100% + 4px); background: var(--surface); border: 1px solid var(--line-2); border-radius: 14px; box-shadow: var(--shadow); padding: 4px; }
.suggest-list .hint { padding: 6px 10px 2px; }
.suggest-list button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 10px; text-align: left; }
.suggest-list button:hover, .suggest-list button.on { background: var(--surface-2); }

/* ---------- Satırlar ve paneller ---------- */
.ulist { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; }
.urow { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); transition: background .15s; }
.ulist .urow:last-child { border-bottom: 0; }
.urow:hover { background: var(--surface-2); }
.urow .name { display: flex; align-items: center; gap: 6px; }
.section .ulist { margin: 0 !important; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 18px; margin-bottom: 14px; }
.panel h3 { margin: 0 0 12px; font: 700 16px/1.2 var(--f-display); display: flex; align-items: center; gap: 8px; }
.panel h3 svg { width: 18px; height: 18px; color: var(--signal-ink); }
.h3-note { font: 500 12.5px var(--f-body); color: var(--faint); margin-left: 2px; }
.throne { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.throne + .throne { border-top: 1px solid var(--line); }
.throne .rank { font-size: 12.5px; font-weight: 700; color: var(--signal-ink); }
.throne.vezir .rank { color: var(--muted); }
.trend { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; gap: 10px; border-top: 1px solid var(--line); }
.panel h3 + .trend { border-top: 0; }
.trend b { font-weight: 600; }
.trend:hover b { color: var(--signal-ink); }
.trend span { font-size: 12px; color: var(--faint); }
.stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat { padding: 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.stat b { display: block; font: 800 24px/1.1 var(--f-display); font-variant-numeric: tabular-nums; }
.stat span { font-size: 12.5px; color: var(--muted); }
.pulse-line { display: flex; justify-content: space-between; gap: 10px; padding: 2px 6px 16px; font-size: 13px; color: var(--muted); }
.pulse-line b { color: var(--text); font: 800 17px var(--f-display); margin-right: 3px; }
.page-foot { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 26px 4px 10px; font-size: 13px; color: var(--faint); }
.page-foot a:hover { color: var(--text); }
.news-list a { display: block; padding: 10px 0; border-top: 1px solid var(--line); font-size: 13.5px; line-height: 1.4; font-weight: 500; color: var(--text-2); }
.panel h3 + .news-list a:first-child { border-top: 0; }
.news-list a:hover { color: var(--text); }
.news-list small { display: block; margin-top: 3px; font-size: 11.5px; color: var(--faint); font-weight: 700; }

/* Mega halka */
.mega-rail { display: flex; gap: 14px; padding: 16px 4px 4px; overflow-x: auto; scrollbar-width: none; }
.mega-rail::-webkit-scrollbar { display: none; }
.mega-item { flex: none; width: 74px; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-2); }
.mega-item .ring { padding: 3px; border-radius: 50%; background: conic-gradient(var(--signal), var(--sky), var(--mint), var(--signal)); }
.mega-item .ring .av { box-shadow: 0 0 0 3px var(--bg); }
.mega-item span { max-width: 74px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Karşılama (web) ---------- */
.hero { position: relative; margin: 18px 0 4px; padding: 34px 36px; border-radius: 30px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 30px; align-items: center; }
.hero h1 { margin: 0 0 12px; font: 800 clamp(34px, 3.8vw, 46px)/1 var(--f-display); font-variation-settings: 'wdth' 82; letter-spacing: -.035em; text-wrap: balance; }
.hero p { margin: 0 0 22px; color: var(--muted); max-width: 360px; font-size: 16px; text-wrap: pretty; }
.hero-art { position: relative; padding: 10px 24px 10px 34px; }
.hero-art .print { --p: 210px; }
.hero-chip { position: absolute; display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-s); font-size: 12.5px; font-weight: 700; white-space: nowrap; z-index: 3; }
.hero-chip svg { width: 15px; height: 15px; }
.hero-chip.c1 { left: 0; top: 18px; color: var(--live); }
.hero-chip.c2 { right: 0; bottom: 20px; color: var(--mint); }

/* ---------- Web: “Şimdi çalıyor” sahnesi ---------- */
.np-wrap { margin-bottom: 14px; }
.np { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 18px 20px 20px; border-radius: 28px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.np::before { content: ''; position: absolute; inset: 0; background: radial-gradient(70% 46% at 50% 30%, color-mix(in srgb, var(--hue, var(--signal)) 22%, transparent), transparent 72%); pointer-events: none; }
.np > * { position: relative; }
.np-head { align-self: stretch; display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; font-size: 12.5px; font-weight: 700; }
.np-label { color: var(--muted); display: inline-flex; align-items: center; gap: 7px; }
.np-label.live { color: var(--live); }
.np-label.live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--live); animation: blink 1.4s infinite; }
.np-open { color: var(--muted); } .np-open:hover { color: var(--text); }
.np .np-print .print { --p: 216px; }
.np-title { margin: 16px 0 4px; font: 800 28px/1.05 var(--f-display); font-variation-settings: 'wdth' 86; letter-spacing: -.025em; word-break: break-word; }
.np-who { color: var(--muted); font-size: 14px; font-weight: 600; }
.np-who a:hover { color: var(--text); }
.np-sub { color: var(--muted); font-size: 14px; margin: 4px 0 16px; }
.np-bar { align-self: stretch; margin-top: 18px; height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; cursor: pointer; }
.np-bar i { display: block; height: 100%; width: 0; background: var(--hue, var(--signal)); border-radius: inherit; }
.np-times { align-self: stretch; display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; color: var(--faint); font-variant-numeric: tabular-nums; margin-top: 6px; }
.np-ctrls { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 8px; }
.np-next { align-self: stretch; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); text-align: left; }
.np-next .np-label { display: block; margin-bottom: 6px; }
.np-row { display: flex; align-items: center; gap: 10px; width: calc(100% + 16px); padding: 7px 8px; margin: 0 -8px; border-radius: 12px; text-align: left; }
.np-row:hover { background: var(--surface-2); }
.np-row .print { --p: 40px; border-radius: 12px; }
.np-row .grow { display: flex; flex-direction: column; min-width: 0; }
.np-row b { font-weight: 700; font-size: 14px; }
.np-row .grow span { font-size: 12.5px; color: var(--muted); }
.np-dur { font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; font-weight: 600; }

/* ---------- Profil ---------- */
.cover { height: 150px; margin-top: 16px; border-radius: 26px 26px 0 0; background: radial-gradient(120% 140% at 85% 0%, color-mix(in srgb, var(--hue, var(--signal)) 55%, transparent), transparent 60%), radial-gradient(90% 120% at 0% 100%, color-mix(in srgb, var(--sky) 35%, transparent), transparent 60%), var(--surface-2); }
.prof { padding: 0 22px 20px; background: var(--surface); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 26px 26px; margin-bottom: 14px; }
.prof-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: -50px; }
.prof-top .av { box-shadow: 0 0 0 5px var(--surface); }
.prof h1 { margin: 12px 0 2px; font: 800 28px/1.1 var(--f-display); letter-spacing: -.02em; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.prof .bio { margin: 10px 0 0; color: var(--text-2); white-space: pre-wrap; }
.prof .stats { display: flex; gap: 18px; margin-top: 14px; flex-wrap: wrap; font-size: 14px; color: var(--muted); }
.prof .stats b { color: var(--text); font-weight: 800; margin-right: 4px; }
.links { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.links a { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: var(--surface-2); color: var(--text-2); }
.links a:hover { color: var(--signal-ink); }
.links svg { width: 17px; height: 17px; }

/* ---------- Posta ---------- */
.thread { display: flex; flex-direction: column; gap: 12px; padding: 20px 4px; }
.bubble { max-width: 86%; padding: 10px 12px; border-radius: 20px 20px 20px 6px; background: var(--surface); border: 1px solid var(--line); align-self: flex-start; }
.bubble.me { align-self: flex-end; border-radius: 20px 20px 6px 20px; background: var(--signal-soft); border-color: var(--signal-line); }
.bubble .meta { display: flex; gap: 8px; align-items: center; font-size: 11.5px; color: var(--muted); margin-top: 6px; }
.bubble .player { margin-top: 0; gap: 10px; }
.bubble.reply { margin-left: 22px; } .bubble.me.reply { margin-left: 0; margin-right: 22px; }
.countdown { font: 800 56px/1 var(--f-display); color: var(--signal-ink); text-align: center; padding: 10px; }
.compose-bar { position: sticky; bottom: 0; padding: 14px 4px calc(14px + var(--safe-b)); background: var(--glass); backdrop-filter: blur(12px); border-top: 1px solid var(--line); display: flex; align-items: center; gap: 10px; }

/* ---------- Düello ---------- */
.duel { display: block; padding: 16px 18px; margin-bottom: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); }
.duel:hover { border-color: var(--line-2); }
.duel-vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; }
.duel-side { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 14px 8px; border-radius: 18px; background: var(--surface-2); min-width: 0; }
.duel-side.win { background: var(--signal-soft); box-shadow: inset 0 0 0 1.5px var(--signal); }
.duel-vs .vs { font: 800 22px var(--f-display); color: var(--signal-ink); }
.duel-topic { font: 800 24px/1.15 var(--f-display); letter-spacing: -.02em; margin: 0 0 14px; }
.votebar { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; display: flex; margin-top: 14px; }
.votebar i { background: var(--sky); } .votebar i + i { background: var(--signal); }

/* ---------- Kule ---------- */
.kgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.ktable { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ktable th, .ktable td { padding: 10px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.ktable th { color: var(--muted); font-weight: 600; font-size: 12px; }
.meter { height: 10px; border-radius: 5px; background: var(--line); overflow: hidden; }
.meter i { display: block; height: 100%; background: linear-gradient(90deg, var(--mint), var(--signal), var(--live)); }
.kcard { padding: 14px; border: 1px solid var(--line); border-radius: 18px; margin-bottom: 10px; background: var(--surface); }

/* ---------- Metin sayfaları, giriş ---------- */
.prose { padding: 8px 4px 30px; color: var(--text-2); max-width: 660px; }
.prose h2 { font: 700 21px/1.25 var(--f-display); color: var(--text); margin: 30px 0 10px; letter-spacing: -.01em; }
.prose h3 { font-size: 15px; color: var(--text); margin: 20px 0 6px; }
.prose p, .prose li { line-height: 1.7; }
.prose ul, .prose ol { padding-left: 20px; }
.prose table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 14px; background: var(--surface); border-radius: 16px; overflow: hidden; }
.prose td, .prose th { border-bottom: 1px solid var(--line); padding: 10px 12px; text-align: left; }
.prose a { color: var(--signal-ink); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.lede { font: 600 20px/1.45 var(--f-display); color: var(--text); letter-spacing: -.01em; }
.auth { max-width: 440px; margin: 0 auto; padding: 52px 16px; display: flex; flex-direction: column; gap: 14px; }
.auth h1 { font: 800 42px/1 var(--f-display); font-variation-settings: 'wdth' 82; letter-spacing: -.035em; margin: 18px 0 0; }

/* ---------- Stüdyo ---------- */
.rec-stage { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 18px 0 10px; }
.rec-btn { width: 116px; height: 116px; border-radius: 34%; display: grid; place-items: center; background: var(--signal); color: var(--on-signal); position: relative; transition: transform .15s, background .2s, border-radius .25s; box-shadow: 0 0 0 10px var(--signal-soft), 0 16px 40px -14px rgba(255, 196, 0, .8); }
.rec-btn:hover { transform: scale(1.03); }
.rec-btn svg.ic { width: 40px; height: 40px; }
.rec-btn.live { background: var(--live); color: #fff; border-radius: 50%; box-shadow: 0 0 0 10px var(--live-soft); }
.rec-btn .ring { position: absolute; inset: -12px; transform: rotate(-90deg); pointer-events: none; }
.rec-btn .ring circle { fill: none; stroke: var(--text); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 389.6; stroke-dashoffset: 389.6; }
.rec-time { font: 800 32px/1 var(--f-display); font-variant-numeric: tabular-nums; }
.meterbars { display: flex; gap: 3px; align-items: center; height: 44px; width: 100%; max-width: 360px; }
.meterbars i { flex: 1; background: var(--signal); border-radius: 3px; height: 6%; transition: height .06s linear; }
[data-theme="light"] .meterbars i { background: var(--signal-2); }
.fx { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; padding: 14px 16px; border-radius: 18px; background: var(--surface-2); }
.fx .switch { padding: 4px 0; }
.fx .sl label { display: flex; justify-content: space-between; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.quote-range { position: relative; margin: 8px 0; }
.quote-range .wave { height: 52px; }
.quote-range .sel { position: absolute; top: 0; bottom: 0; background: var(--signal-soft); border-left: 2px solid var(--signal-2); border-right: 2px solid var(--signal-2); pointer-events: none; }
.quote-range input { position: absolute; left: 0; right: 0; width: 100%; top: 0; height: 52px; appearance: none; background: none; pointer-events: none; margin: 0; }
.quote-range input::-webkit-slider-thumb { appearance: none; pointer-events: auto; width: 18px; height: 52px; background: transparent; cursor: ew-resize; }
.quote-range input::-moz-range-thumb { pointer-events: auto; width: 18px; height: 52px; background: transparent; border: 0; cursor: ew-resize; }
.photo-pick { display: flex; align-items: center; gap: 12px; }
.photo-pick img { width: 72px; height: 72px; object-fit: cover; border-radius: 14px; }
.progress { height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; }
.progress i { display: block; height: 100%; width: 0; background: var(--signal); transition: width .2s; }
.avgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 10px; }
.avgrid button { border-radius: 50%; padding: 2px; border: 2.5px solid transparent; aspect-ratio: 1; overflow: hidden; }
.avgrid button.on { border-color: var(--signal); }
.avgrid img, .avgrid svg { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.install { margin: 14px 0 0; padding: 14px 16px; border-radius: 20px; background: var(--signal); color: var(--on-signal); display: flex; align-items: center; gap: 12px; }
.install .muted { color: rgba(10, 16, 32, .72); }
.install .btn.gold { background: var(--on-signal); color: var(--signal); border-color: var(--on-signal); box-shadow: none; }
.install .ibtn { color: var(--on-signal); }
.sk { background: linear-gradient(90deg, var(--surface-2) 0, var(--surface-3) 50%, var(--surface-2) 100%); background-size: 200% 100%; animation: sk 1.3s infinite; border-radius: 10px; }
@keyframes sk { to { background-position: -200% 0; } }
.sk-clip { padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); display: flex; gap: 14px; margin-bottom: 14px; }
.more { display: flex; justify-content: center; padding: 22px; }
.loadmore-sentinel { height: 1px; }

/* ---------- Araçlar sahnesi ---------- */
.g-shell { position: relative; }
.g-host { position: relative; height: min(780px, calc(100dvh - var(--top-h) - 160px)); min-height: 470px; padding: 0 4px; }
.g-host > .g-root { height: 100%; }
.g-shell.is-fs, .g-shell:fullscreen { background: var(--bg); display: flex; flex-direction: column; padding: max(12px, var(--safe-t)) 12px max(12px, var(--safe-b)); height: 100dvh; overflow: hidden; }
.g-shell:fullscreen .g-host, .g-shell.is-fs .g-host { flex: 1; min-height: 0; height: auto; }
.g-toolbar { padding: 0 4px 8px !important; }
.g-toolbar [data-status] { flex-basis: 100%; order: 2; font-size: 12.5px; color: var(--muted); }
.g-flash { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); pointer-events: none; font: 800 clamp(36px, 9vw, 64px)/1 var(--f-display); color: var(--signal); text-shadow: 0 4px 30px rgba(0, 0, 0, .6); opacity: 0; white-space: nowrap; z-index: 5; }
.g-flash.on { animation: gflash 1.1s var(--ease); }
@keyframes gflash { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.9); } 20% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -70%); } }

.fbar { display: none; }

/* ---------- Duyarlı ---------- */
@media (max-width: 1240px) { :root { --rail-w: 330px; --side-w: 212px; } .shell { gap: 0 20px; } }
@media (max-width: 1100px) {
  .shell { grid-template-columns: 76px minmax(0, var(--center-w)); }
  .rail { display: none; }
  .hdr .logo { width: 58px; }
  .hdr .logo .word { display: none; }
  .side { align-items: center; }
  .nav a { width: 52px; padding: 0; justify-content: center; }
  .nav a span, .side .cta span, .side-foot, .side .me-chip .grow, .side .me-chip > svg { display: none; }
  .nav a.on::before { display: none; }
  .nav .count { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; font-size: 10.5px; }
  .side .cta { width: 52px; height: 52px; padding: 0; }
  .side .me-chip { padding: 6px; border: 0; background: none; }
  .hide-md { display: none !important; }
}
@media (min-width: 1101px) { .pbar { display: none !important; } }
@media (max-width: 680px) {
  :root { --hdr-h: 56px; --tab-h: 64px; }
  body.has-ticker { --tick-h: 34px; }
  .shell { display: block; padding: 0 12px; }
  .side { display: none; }
  .hdr { padding: 0 6px 0 14px; gap: 6px; }
  .hdr .logo { width: auto; }
  .hdr .logo .word { display: inline; font-size: 21px; }
  .hdr .logo .mark { width: 28px; height: 28px; }
  .hdr-search, .hdr-tools .btn.gold, .hdr-tools .hdr-wide { display: none; }
  .hdr-tools { gap: 2px; }
  .tick-label { padding: 0 10px 0 14px; font-size: 12.5px; }
  .ticker { font-size: 13px; }
  .dock { padding-bottom: calc(var(--tab-h) + 8px + var(--safe-b)); }
  .main { padding-bottom: calc(var(--tab-h) + 130px + var(--safe-b)); }
  .phead-in { padding: 14px 2px 10px; min-height: 56px; }
  .phead h1 { font-size: 24px; }
  .section, .prose { padding-left: 2px; padding-right: 2px; }
  .clip { padding: 14px; border-radius: 22px; }
  .vc { gap: 12px; }
  .vc .print { --p: 78px; }
  .vc-title { font-size: 20px; }
  .act .lbl { display: none; }
  .scrim { padding: 0; align-items: flex-end; }
  .sheet { max-height: 92dvh; border-radius: 26px 26px 0 0; border-bottom: 0; animation: up .28s var(--ease); padding-bottom: var(--safe-b); }
  @keyframes up { from { transform: translateY(40px); opacity: .4; } }
  .fx { grid-template-columns: 1fr; }
  .hero { grid-template-columns: 1fr; padding: 26px 20px; border-radius: 26px; margin-top: 12px; }
  .hero-art { display: none; }
  .duel-side { padding: 10px 4px; }
  .cover { height: 120px; margin-top: 12px; }
  .prof { padding: 0 16px 18px; }
  .hide-xs { display: none !important; }
  .g-shell .lbl, .g-modes .lbl { display: none; }
  .g-host { height: calc(100dvh - var(--top-h) - var(--tab-h) - 118px - var(--safe-b)); min-height: 430px; }

  /* Frekans: ekranda tek ses */
  body.pager-mode .shell { padding: 0; }
  body.pager-mode .main { padding-bottom: 0; }
  body.pager-mode .pbar { display: none; }
  .fbar { display: flex; align-items: center; gap: 4px; height: 50px; padding: 0 6px 0 10px; }
  .fbar .seg { flex: 1; background: transparent; padding: 0; }
  .fbar .seg button { height: 34px; padding: 0 13px; font-size: 13.5px; border-radius: 11px; }
  .pager { height: calc(100dvh - var(--top-h) - 50px - var(--tab-h) - var(--safe-b)); overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior-y: contain; scrollbar-width: none; }
  .pager::-webkit-scrollbar { display: none; }
  .slide.clip { height: 100%; scroll-snap-align: start; scroll-snap-stop: always; display: flex; flex-direction: column; padding: 8px 20px 6px; border: 0; border-radius: 0; background: radial-gradient(85% 50% at 50% 34%, color-mix(in srgb, var(--hue) 22%, transparent), transparent 72%); box-shadow: none; overflow: hidden; }
  .slide > * { position: relative; z-index: 1; }
  .slide .slide-bg { position: absolute; inset: -60px; z-index: 0; background-size: cover; background-position: center; filter: blur(30px) saturate(1.2); opacity: .42; transform: scale(1.1); }
  .slide .clip-by { justify-content: center; margin: 0 0 2px; }
  .slide-center { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; }
  .slide .print { --p: min(62vw, 30dvh) !important; border-radius: 30%; margin-bottom: 10px; }
  .slide-who { display: flex; align-items: center; gap: 7px; justify-content: center; flex-wrap: wrap; font-size: 15.5px; }
  .slide-who .av { --s: 26px; }
  .slide-sub { display: flex; align-items: center; justify-content: center; gap: 6px 12px; flex-wrap: wrap; color: var(--muted); font-size: 13px; }
  .slide-title { margin: 6px 0 0; font: 800 clamp(32px, 10.5vw, 46px)/1 var(--f-display); font-variation-settings: 'wdth' 82; letter-spacing: -.035em; word-break: break-word; }
  .slide-title.muted { font-size: 24px; color: var(--muted); }
  .slide .clip-tags { justify-content: center; margin-top: 8px; }
  .slide .quote-box { width: 100%; text-align: left; }
  .slide-thumb { width: 58px; height: 58px; object-fit: cover; border-radius: 16px; border: 2px solid var(--text); margin-top: 4px; cursor: zoom-in; }
  .slide-play { display: flex; align-items: center; gap: 12px; padding: 6px 0 2px; }
  .slide-play .vc-bar { flex: 1; margin: 0; }
  .slide-play .pbtn { width: 56px; height: 56px; }
  .slide-meta { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: var(--muted); min-height: 18px; }
  .slide-acts { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin-top: 6px; padding-top: 4px; border-top: 1px solid var(--line); }
  .sact { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 60px; border-radius: 16px; color: var(--text-2); font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
  .sact svg { width: 25px; height: 25px; }
  .sact:active { background: var(--surface-2); }
  .sact.on { color: var(--signal-ink); }
  .sact[data-a="react"].on { color: var(--live); }
  .slide-empty, .welcome { height: 100%; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px 26px; position: relative; }
  .welcome .print { --p: min(60vw, 28dvh); }
  .welcome h1 { font: 800 clamp(34px, 10vw, 44px)/1 var(--f-display); font-variation-settings: 'wdth' 82; letter-spacing: -.035em; margin: 22px 0 12px; }
  .welcome p { color: var(--muted); margin: 0 0 22px; max-width: 320px; }
  .swipe-hint { position: absolute; bottom: 14px; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--faint); font-size: 12.5px; font-weight: 600; }
  .swipe-hint svg { transform: rotate(180deg); width: 18px; height: 18px; animation: nudge 2s ease-in-out infinite; }
  @keyframes nudge { 50% { transform: rotate(180deg) translateY(5px); } }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .tick-run { animation: none !important; }
  .tick-track { overflow-x: auto; }
}
/* Karşılamadaki tek hareket: ses izinin üstünde dönen tarama */
.hero-art .print::after, .welcome-art .print::after { content: ''; position: absolute; inset: 0; background: conic-gradient(from 0deg, transparent 0 290deg, color-mix(in srgb, var(--hue) 45%, transparent) 360deg); mix-blend-mode: screen; animation: sweep 6s linear infinite; border-radius: inherit; }
[data-theme="light"] .hero-art .print::after, [data-theme="light"] .welcome-art .print::after { mix-blend-mode: multiply; background: conic-gradient(from 0deg, transparent 0 290deg, color-mix(in srgb, var(--hue) 40%, transparent) 360deg); }
@keyframes sweep { to { transform: rotate(360deg); } }
.hero-art .print .pb, .welcome-art .print .pb { opacity: .75; }
.print .ava .mark { border-radius: 30%; }
body { --top-h: calc(var(--hdr-h) + var(--tick-h) + var(--safe-t)); }
.hero .row { flex-wrap: nowrap !important; }
/* Oyunlar her temada gece ekranı gibi durur */
[data-theme="light"] .g-root { --bone: #EEF2FF; --text: #EEF2FF; --gold: #FFD84D; --gold-soft: rgba(255, 216, 77, .14); --muted: #8B98B8; --line: #24345A; --line-2: #2A3A5E; --surface: #111B32; --surface-2: #16223D; --bg: #0A1020; background: #0A1020; color: #EEF2FF; border-radius: 24px; padding: 12px; }

/* ===================== Hareket ===================== */
/* Üst ilerleme çizgisi */
.navprog { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--signal), var(--sky)); box-shadow: 0 0 12px color-mix(in srgb, var(--signal) 70%, transparent); opacity: 0; pointer-events: none; z-index: 3; }
.navprog.run { opacity: 1; animation: prog 2.6s cubic-bezier(.1, .7, .2, 1) forwards; }
.navprog.done { opacity: 0; transform: scaleX(1); transition: transform .22s ease, opacity .3s .16s; }
@keyframes prog { from { transform: scaleX(0); } to { transform: scaleX(.88); } }
.topwrap { transition: box-shadow .3s, background .3s; }
.topwrap.scrolled { box-shadow: 0 12px 32px -20px rgba(0, 0, 0, .65); }
[data-theme="light"] .topwrap.scrolled { box-shadow: 0 12px 30px -22px rgba(10, 16, 32, .35); }

/* Sayfa geçişi: tek, kısa, net giriş. Eski sayfa soldurulmaz. */
@keyframes pgIn { from { opacity: 0; transform: translate3d(var(--px, 0px), var(--py, 8px), 0); } }
#main.pg-in > * { animation: pgIn .26s cubic-bezier(.2, .7, .2, 1) both; }
#main[data-pg="u"] { --py: -8px; }
#main[data-pg="r"] { --px: 20px; --py: 0px; }
#main[data-pg="l"] { --px: -20px; --py: 0px; }
#main[data-pg="r2"] { --px: 16px; --py: 0px; }
#main[data-pg="back"] { --px: -12px; --py: 0px; }
/* Sekme içeriği değişimi */
@keyframes swR { from { opacity: 0; transform: translate3d(22px, 0, 0); } }
@keyframes swL { from { opacity: 0; transform: translate3d(-22px, 0, 0); } }
@keyframes swF { from { opacity: 0; } }
.sw-r { animation: swR .24s cubic-bezier(.2, .7, .2, 1) both; }
.sw-l { animation: swL .24s cubic-bezier(.2, .7, .2, 1) both; }
.sw-f, .fade-in { animation: swF .2s ease both; }
/* İskelet yalnız gecikirse görünür */
.sk-wait { animation: swF .25s .28s both; }
.sk-row { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.sk-chips { display: flex; flex-wrap: wrap; gap: 10px 12px; padding: 18px 20px; }
.sk-clip { align-items: flex-start; }
[data-body] { min-height: 46dvh; }

/* Kayan göstergeler: sekmeler, sol menü, alt menü */
.seg, .tabs, .nav { position: relative; }
.ind { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; transition: transform .42s var(--ease), width .42s var(--ease), height .42s var(--ease), opacity .2s; }
.ind.still { transition: none; }
.seg > :not(.ind), .nav > :not(.ind) { position: relative; z-index: 1; }
.ind-seg { border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-s); }
[data-theme="dark"] .ind-seg { background: var(--surface-3); box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 6px 16px -10px rgba(0, 0, 0, .7); }
.seg:has(> .ind) > .on { background: transparent; box-shadow: none; }
.ind-line::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2.5px; border-radius: 3px; background: var(--signal); }
.tabs:has(> .ind) > .on { border-color: transparent; }
.ind-nav { border-radius: 14px; background: var(--surface); }
[data-theme="light"] .ind-nav { box-shadow: 0 6px 18px -14px rgba(10, 16, 32, .45); }
.ind-nav::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: var(--signal); }
.nav:has(> .ind) > a.on { background: transparent; }
.nav:has(> .ind) > a.on::before { display: none; }
.nav a.pop svg { animation: navpop .45s var(--ease); }
@keyframes navpop { 40% { transform: scale(1.18) rotate(-6deg); } }
@media (max-width: 1100px) { .ind-nav::before { display: none; } }

/* Dokunma ve üstüne gelme hissi */
.ibtn, .act, .chip, .seg > button, .seg > a, .tabs > button, .opt { transition-property: background, color, border-color, box-shadow, transform; transition-duration: .18s; transition-timing-function: var(--ease); }
.btn:active:not(:disabled), .ibtn:active, .act:active, .pbtn:active, .chip:active, .seg > button:active, .seg > a:active, .opt:active { transform: scale(.95); }
.print .play:active { transform: translate(-50%, -50%) scale(.9); }
@media (hover: hover) {
  .clip:not(.slide) { transition: border-color .2s, box-shadow .3s, transform .3s var(--ease); }
  .clip:not(.slide):hover { transform: translateY(-2px); border-color: var(--line-2); box-shadow: 0 18px 40px -26px rgba(0, 0, 0, .6); }
  [data-theme="light"] .clip:not(.slide):hover { box-shadow: 0 18px 40px -28px rgba(10, 16, 32, .4); }
  .urow > svg:last-child { transition: transform .22s var(--ease), color .2s; }
  .urow:hover > svg:last-child { transform: translateX(4px); color: var(--text); }
  .tagchip { transition: transform .22s var(--ease), color .2s; }
  .tagchip:hover { transform: translateY(-3px); color: var(--signal-ink); }
  .duel { transition: transform .28s var(--ease), border-color .2s, box-shadow .3s; }
  .duel:hover { transform: translateY(-2px); }
  .nav a:hover svg { transform: translateX(2px); }
  .nav a svg { transition: transform .2s var(--ease); }
  .btn.gold:hover { box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--signal) 85%, transparent); }
}

/* Tema geçişi: düğmeden yayılan daire */
html.vt-theme::view-transition-old(root), html.vt-theme::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
html.vt-theme::view-transition-new(root) { z-index: 2; }

/* Mobil kart: içerik kalabalıksa ses izi küçülür, hiçbir şey üst üste binmez */
@media (max-width: 680px) {
  .slide-center { justify-content: safe center; }
  .slide:has(.quote-box) .print, .slide:has(.slide-thumb) .print { --p: min(46vw, 22dvh) !important; margin-bottom: 4px; }
  .slide:has(.quote-box):has(.slide-thumb) .print, .slide:has(.quote-box):has(.clip-tags) .print { --p: min(38vw, 17dvh) !important; }
  .slide:has(.quote-box) .slide-title { font-size: clamp(26px, 8vw, 34px); }
  .slide .quote-box { margin-top: 8px; }
}
@media (max-width: 680px) and (max-height: 700px) {
  .slide .print { --p: min(56vw, 26dvh) !important; }
  .slide-acts .sact { height: 52px; }
}
@media (max-width: 680px) and (max-height: 600px) {
  .slide-center { gap: 3px; overflow: hidden; }
  .slide .print { --p: min(46vw, 22dvh) !important; margin-bottom: 2px; }
  .slide:has(.quote-box) .print, .slide:has(.slide-thumb) .print { --p: min(30vw, 15dvh) !important; }
  .slide:has(.quote-box) .slide-title { font-size: 24px; margin-top: 2px; }
  .slide .quote-box { margin-top: 4px; }
  .slide-acts .sact { height: 46px; gap: 2px; }
  .slide-acts .sact svg { width: 22px; height: 22px; }
  .slide-play .pbtn { width: 48px; height: 48px; }
}

.sk-wait.now { animation: none; }


/* ===================== Araçlar düğmesi: düz, ince ışıklı kenar ===================== */
.seal-link { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px 0 10px; border-radius: 12px; border: 1px solid transparent; background: linear-gradient(var(--surface-2), var(--surface-2)) padding-box, linear-gradient(135deg, color-mix(in srgb, var(--signal) 70%, transparent), var(--line) 55%) border-box; font: 700 13px/1 var(--f-display); color: var(--text); white-space: nowrap; transition: background .2s, transform .15s; }
.seal-link svg { width: 16px; height: 16px; color: var(--signal-ink); }
.seal-link:hover { background: linear-gradient(var(--surface-3), var(--surface-3)) padding-box, linear-gradient(135deg, var(--signal), var(--line-2) 60%) border-box; }
.seal-link:active { transform: scale(.96); }
.seal-link .blink { width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px rgba(255, 255, 255, .8); animation: blink 2.4s ease-in-out infinite; }
[data-theme="light"] .seal-link .blink { background: var(--text); box-shadow: none; }
@media (max-width: 380px) { .seal-link .sl-t { display: none; } .seal-link { padding: 0 10px; } }

/* ===================== Mobil alt menü: Dalga Sırtı ===================== */
@media (max-width: 680px) {
  :root { --tab-h: 96px; --tb-h: 62px; --hump: 30px; --rec: 60px; }
  .tabbar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; height: calc(var(--tb-h) + var(--hump) + var(--safe-b)); pointer-events: none; transition: transform .35s var(--ease); --tb-cut: var(--surface); --tb-surf: var(--surface); }
  [data-theme="light"] .tabbar { --tb-cut: #fff; --tb-surf: #fff; }
  .tabbar > * { pointer-events: auto; }
  .tb-bg { position: absolute; inset: 0; display: flex; pointer-events: none; filter: drop-shadow(0 -6px 18px rgba(0, 0, 0, .32)); }
  [data-theme="light"] .tb-bg { filter: drop-shadow(0 -4px 16px rgba(10, 16, 32, .1)); }
  .tb-bg > i { flex: 1; margin-top: var(--hump); background: var(--tb-surf); border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent); }
  .tb-hump { flex: 0 0 150px; display: flex; flex-direction: column; }
  .tb-hump svg { display: block; width: 150px; height: 34px; flex: none; }
  .tb-hump .fill { fill: var(--tb-surf); }
  .tb-hump .edge { fill: none; stroke: color-mix(in srgb, var(--text) 8%, transparent); stroke-width: 1; }
  .tb-hump b { flex: 1; margin-top: -1px; background: var(--tb-surf); }
  .tb-row { position: absolute; left: 0; right: 0; top: var(--hump); height: var(--tb-h); display: flex; padding: 5px 8px; }
  .tb-gap { flex: 0 0 104px; }
  .tb { position: relative; z-index: 1; flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border-radius: 18px; color: var(--muted); -webkit-tap-highlight-color: transparent; transition: color .25s; }
  .tb-ic { position: relative; z-index: 1; width: 30px; height: 30px; display: grid; place-items: center; transition: transform .3s var(--ease); }
  .tb-ic svg { width: 29px; height: 29px; overflow: visible; }
  .tb-ic .o { fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; transition: opacity .2s; }
  .tb-ic .f { fill: currentColor; stroke: currentColor; stroke-width: 1.2; stroke-linejoin: round; opacity: 0; transform: scale(.8); transform-origin: 12px 12px; transition: opacity .2s, transform .3s var(--ease); }
  .tb-ic .f .cut { fill: none; stroke: var(--tb-cut); stroke-width: 1.9; stroke-linecap: round; }
  .tb-ic .f path.cut[d^="m15"] { fill: var(--tb-cut); stroke-width: 0; }
  .tb.on { color: var(--text); }
  .tb.on .tb-ic { color: var(--signal); }
  .tb.on .tb-l { font-weight: 800; }
  body.tb-min .tb-l { opacity: 0; max-height: 0; }
  [data-theme="light"] .tb.on .tb-ic { color: var(--text); }
  .tb.on .o { opacity: 0; }
  .tb.on .f { opacity: 1; transform: none; }
  .tb-l { position: relative; z-index: 1; font-size: 11.5px; font-weight: 650; letter-spacing: .01em; line-height: 1; max-height: 12px; transition: opacity .2s, max-height .3s var(--ease); white-space: nowrap; }
  .tb:active .tb-ic { transform: scale(.86); }
  .tb.pop .tb-ic { animation: tbpop .5s var(--ease); }
  @keyframes tbpop { 0% { transform: scale(.82); } 50% { transform: scale(1.12); } 100% { transform: none; } }
  .tb-av .av { --s: 29px; width: 29px; height: 29px; transition: box-shadow .25s; }
  .tb-ic .tb-av svg, .tb-ic .tb-av img { width: 100%; height: 100%; overflow: hidden; }
  .tb.on .tb-av .av { box-shadow: 0 0 0 2px var(--tb-cut), 0 0 0 3.6px var(--signal); }
  [data-theme="light"] .tb.on .tb-av .av { box-shadow: 0 0 0 2px #fff, 0 0 0 3.6px var(--text); }
  .tb-count { position: absolute; top: 4px; left: calc(50% + 7px); z-index: 2; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--live); color: #fff; font-size: 10.5px; font-weight: 800; display: grid; place-items: center; box-shadow: 0 0 0 2.5px var(--tb-cut); }
  /* Kayan seçili zemin */
  /* Sırt ışığı: seçili sekmenin üstünde kenar yanar, ikonun ardında yumuşak ışık; sekmeler arasında kayar */
  .ind-tab { top: 0; bottom: 0; height: auto !important; background: none; transition: transform .55s cubic-bezier(.3, 1.2, .45, 1), width .55s cubic-bezier(.3, 1.2, .45, 1), opacity .2s; }
  .ind-tab::before { content: ''; position: absolute; top: 0; left: 50%; width: 34px; height: 3px; margin-left: -17px; border-radius: 0 0 3px 3px; background: var(--signal); box-shadow: 0 0 14px 2px color-mix(in srgb, var(--signal) 70%, transparent), 0 0 4px color-mix(in srgb, var(--signal) 90%, transparent); }
  .ind-tab::after { content: ''; position: absolute; left: 50%; top: 42%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--signal) 26%, transparent), transparent); }
  [data-theme="light"] .ind-tab::before { background: #F2BC12; box-shadow: 0 0 12px 1px rgba(242, 188, 18, .55); }
  [data-theme="light"] .ind-tab::after { background: radial-gradient(closest-side, rgba(255, 200, 0, .28), transparent); }
  .tb-row { --row-pad: 5px; }
  /* Dalganın tepesindeki kayıt tuşu: logodan doğan mikrofon */
  .tb-rec { position: absolute; left: 50%; top: -10px; width: var(--rec); height: var(--rec); margin-left: calc(var(--rec) / -2); border-radius: 50%; display: grid; place-items: center; color: var(--on-signal); -webkit-tap-highlight-color: transparent;
    background: radial-gradient(110% 110% at 30% 18%, #FFE896 0%, var(--signal) 46%, #F2BC12 100%);
    box-shadow: 0 0 0 5px var(--tb-surf), 0 1px 0 rgba(255, 255, 255, .65) inset, 0 -3px 6px rgba(150, 100, 0, .16) inset, 0 14px 26px -10px color-mix(in srgb, var(--signal) 85%, transparent);
    transition: transform .3s var(--ease); }
  .tb-rec-in { display: grid; place-items: center; }
  .lmic { width: 46px; height: 46px; overflow: visible; margin: 2px 0 0 1px; }
  .lmic rect { fill: currentColor; }
  .lmic .hold { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
  .lmic .wv { fill: none; stroke: currentColor; stroke-width: 3.3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 0; }
  .tb-rec:active { transform: scale(.9); }
  @keyframes lwave { 0% { stroke-dashoffset: 60; } 100% { stroke-dashoffset: 0; } }
  /* Aşağı kaydırınca menü biraz iner, yazılar gizlenir */
  body.tb-min .tabbar { transform: translateY(12px); }
  .dock { padding-bottom: calc(var(--tb-h) + var(--hump) + var(--safe-b) + 6px); }
  .main { padding-bottom: calc(var(--tb-h) + var(--hump) + var(--safe-b) + 110px); }
  .pager { height: calc(100dvh - var(--top-h) - 50px - var(--tb-h) - var(--hump) - var(--safe-b)); }
  .g-host { height: calc(100dvh - var(--top-h) - var(--tb-h) - var(--hump) - var(--safe-b) - 110px); }
  .tb-row { padding-bottom: 5px; }
}
@media (max-width: 360px) { .tb-l { font-size: 9.5px; } .tb-gap { flex-basis: 92px; } :root { --rec: 56px; } }

/* ===================== Keşfet ===================== */
.search-pill { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 16px; border-radius: 15px; background: var(--surface-2); border: 1px solid var(--line); color: var(--faint); font-size: 15px; transition: border-color .2s, background .2s; }
.search-pill svg { width: 19px; height: 19px; color: var(--muted); }
.search-pill:hover { border-color: var(--line-2); background: var(--surface-3); }
.search-pill:active { transform: scale(.99); }
.tagcloud { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 18px 2px 8px; }
.tc { display: inline-flex; align-items: center; gap: 1px; height: auto; padding: .34em .7em; border-radius: 14px; font-family: var(--f-display); font-weight: 750; letter-spacing: -.01em; line-height: 1.1; color: var(--text);
  background: color-mix(in srgb, var(--signal) calc(var(--w, 0) * 13%), var(--surface)); border: 1px solid color-mix(in srgb, var(--signal) calc(var(--w, 0) * 30%), var(--line)); }
.tc { font-size: calc(15px + var(--w, 0) * 13px); }
@media (max-width: 680px) { .tc { font-size: calc(14px + var(--w, 0) * 9px); } }
.tc .h { color: var(--faint); font-weight: 600; }
.tc b { margin-left: 7px; font: 700 11px/1 var(--f-body); color: var(--muted); padding: 3px 6px; border-radius: 7px; background: color-mix(in srgb, var(--text) 7%, transparent); }
.tc.hot .h { color: var(--signal-ink); }
[data-theme="dark"] .tc.hot .h { color: var(--signal); }
.rank .rk { width: 30px; flex: none; font: 800 20px/1 var(--f-display); color: var(--faint); font-variant-numeric: tabular-nums; }
.rank .rk.top { color: var(--signal-ink); }
[data-theme="dark"] .rank .rk.top { color: var(--signal); }
.tbar { display: block; height: 4px; width: min(180px, 80%); border-radius: 3px; background: var(--surface-3); margin-top: 7px; overflow: hidden; }
.tbar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--signal), var(--sky)); }
.rank .handle { font-size: 13px; color: var(--muted); white-space: nowrap; }
.li-ic { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--surface-2); color: var(--text-2); }
.page-note { display: flex; align-items: center; gap: 8px; margin: 22px 0 0; padding: 0 20px; color: var(--faint); font-size: 12.5px; }
.page-note svg { width: 16px; height: 16px; flex: none; }
@media (max-width: 680px) { .page-note { padding: 0 4px; } .tagcloud { padding-top: 16px; } }

/* ===================== Mobil alt menü: yüzen cam kapsül (güncel Instagram / Liquid Glass dili) ===================== */
@media (max-width: 680px) {
  :root { --tb-h: 66px; --hump: 0px; --tb-b: max(12px, calc(var(--safe-b) - 6px)); --rec: 54px; }
  .tabbar { left: 14px; right: 14px; bottom: var(--tb-b); height: var(--tb-h); }
  .tabbar::before { content: ''; position: fixed; left: 0; right: 0; bottom: 0; height: calc(var(--tb-h) + var(--tb-b) + 36px); background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--bg) 82%, transparent) 70%); pointer-events: none; z-index: -1; }
  body.pager-mode .tabbar::before { display: none; }
  .tb-bg { display: none; }
  .tb-row { position: absolute; inset: 0; top: 0; height: var(--tb-h); padding: 5px 6px; border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 70%, transparent);
    backdrop-filter: blur(28px) saturate(1.8); -webkit-backdrop-filter: blur(28px) saturate(1.8);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 10%, transparent) inset, 0 1px 0 color-mix(in srgb, #fff 9%, transparent) inset, 0 -1px 0 rgba(0, 0, 0, .25) inset, 0 22px 44px -18px rgba(0, 0, 0, .75), 0 4px 12px -4px rgba(0, 0, 0, .4);
    overflow: hidden; transition: height .35s var(--ease); }
  [data-theme="light"] .tb-row { background: rgba(255, 255, 255, .74); box-shadow: 0 0 0 1px rgba(10, 16, 32, .07) inset, 0 1px 0 #fff inset, 0 20px 40px -20px rgba(10, 16, 32, .38), 0 4px 12px -6px rgba(10, 16, 32, .16); }
  .tb-gap { flex: 0 0 calc(var(--rec) + 14px); }
  .tb { border-radius: 999px; }
  /* Seçili sekme: cam zemin + üst kenarda sarı ışık; sekmeler arasında kayar */
  .ind-tab::after { left: 4px; right: 4px; top: 5px; bottom: 5px; width: auto; height: auto; margin: 0; border-radius: 999px; background: color-mix(in srgb, var(--text) 9%, transparent); box-shadow: 0 1px 0 color-mix(in srgb, #fff 7%, transparent) inset; }
  [data-theme="light"] .ind-tab::after { background: rgba(10, 16, 32, .06); box-shadow: none; }
  .ind-tab { top: 0; bottom: 0; }
  .ind-tab::before { top: 0; z-index: 1; width: 30px; margin-left: -15px; }
  .tb-row { padding: 0 6px; }
  .tb-gap { flex-basis: calc(var(--rec) + 18px); }
  /* Ortadaki L-Mikrofon kapsülün içinde, tam ortada */
  .tb-rec { top: calc((var(--tb-h) - var(--rec)) / 2); box-shadow: 0 1px 0 rgba(255, 255, 255, .65) inset, 0 -3px 6px rgba(150, 100, 0, .16) inset, 0 8px 20px -8px color-mix(in srgb, var(--signal) 90%, transparent); }
  .lmic { width: 42px; height: 42px; }
  .tb-l { font-size: 11px; }
  /* Aşağı kaydırınca kapsül incelir, isimler gizlenir */
  body.tb-min .tabbar { transform: none; }
  body.tb-min .tb-row { height: 54px; top: 12px; }
  body.tb-min .tb-rec { transform: translateY(6px) scale(.82); }
  .dock { padding-bottom: calc(var(--tb-h) + var(--tb-b) + 12px); }
  .main { padding-bottom: calc(var(--tb-h) + var(--tb-b) + 110px); }
  .pager { height: calc(100dvh - var(--top-h) - 50px - var(--tb-h) - var(--tb-b) - 12px); }
}
@media (max-width: 680px) and (max-height: 760px) {
  .slide:has(.quote-box) .print, .slide:has(.slide-thumb) .print { --p: min(34vw, 16dvh) !important; margin-bottom: 0; }
  .slide:has(.quote-box) .slide-title { font-size: 26px; margin-top: 0; }
  .slide:has(.quote-box) .slide-center { gap: 4px; }
}
@media (max-width: 680px) { .slide-center { overflow: hidden; } }
@media (max-width: 680px) and (max-height: 600px) {
  .slide:has(.quote-box) .print, .slide:has(.slide-thumb) .print { --p: min(28vw, 12dvh) !important; }
  .slide:has(.quote-box) .slide-title { font-size: 22px; }
  .slide:has(.quote-box) .slide-sub { font-size: 12px; }
}


/* ===================== Masaüstü ve tablet: altta yüzen kapsül oynatıcı ===================== */
.wcap { display: none; }
@media (min-width: 681px) {
  .pbar { display: none !important; }
  .wcap { --hue: #FFD84D; position: fixed; z-index: 44; bottom: 18px; left: 50%; width: min(1080px, calc(100vw - 40px)); height: 84px; display: flex; align-items: center; gap: 18px; padding: 0 12px 0 14px; border-radius: 30px; container-type: inline-size;
    background: color-mix(in srgb, var(--surface) 76%, transparent);
    backdrop-filter: blur(30px) saturate(1.8); -webkit-backdrop-filter: blur(30px) saturate(1.8);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 10%, transparent) inset, 0 1px 0 color-mix(in srgb, #fff 8%, transparent) inset, 0 28px 60px -24px rgba(0, 0, 0, .8), 0 6px 18px -8px rgba(0, 0, 0, .45);
    animation: capIn .5s var(--ease) both; }
  [data-theme="light"] .wcap { background: rgba(255, 255, 255, .8); box-shadow: 0 0 0 1px rgba(10, 16, 32, .07) inset, 0 1px 0 #fff inset, 0 26px 56px -26px rgba(10, 16, 32, .42), 0 6px 16px -8px rgba(10, 16, 32, .16); }
  @keyframes capIn { from { opacity: 0; transform: translateY(24px); } }
  .wcap::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(60% 140% at 8% 50%, color-mix(in srgb, var(--hue) 16%, transparent), transparent 70%); opacity: .9; transition: opacity .4s; }
  .wcap.idle::before { opacity: .5; }
  .wcap > * { position: relative; }
  .main, .rail { padding-bottom: 150px !important; }
  /* Şimdi çalan */
  .wc-now { flex: 0 1 250px; min-width: 0; display: flex; align-items: center; gap: 12px; }
  .wc-art { flex: none; border-radius: 30%; }
  .wc-art .print { --p: 56px !important; border-radius: 30%; }
  .wcap.playing .wc-art .print { animation: breathe 2.4s ease-in-out infinite; }
  .wc-meta { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  .wc-t { font: 800 16px/1.15 var(--f-display); letter-spacing: -.01em; color: var(--text); }
  a.wc-t:hover { color: var(--signal-ink); }
  [data-theme="dark"] a.wc-t:hover { color: var(--signal); }
  .wc-s { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); }
  .eqb { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; flex: none; }
  .eqb i { width: 3px; border-radius: 2px; background: var(--hue); animation: eqb 1s ease-in-out infinite; }
  .eqb i:nth-child(2) { animation-delay: -.35s; } .eqb i:nth-child(3) { animation-delay: -.7s; }
  @keyframes eqb { 0%, 100% { height: 30%; } 50% { height: 100%; } }
  /* Kontroller ve dalga ilerleme */
  .wc-mid { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
  .wc-ctrls { display: flex; align-items: center; gap: 6px; }
  .wc-ib { position: relative; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px; color: var(--muted); transition: color .2s, background .2s, transform .15s; }
  .wc-ib svg { width: 19px; height: 19px; }
  .wc-ib:hover:not(:disabled) { color: var(--text); background: color-mix(in srgb, var(--text) 7%, transparent); }
  .wc-ib:active:not(:disabled) { transform: scale(.9); }
  .wc-ib:disabled { opacity: .35; cursor: default; }
  .wc-ib.on { color: var(--signal); }
  [data-theme="light"] .wc-ib.on { color: #C99300; }
  .wc-ib.on::after { content: ''; position: absolute; bottom: 2px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor; }
  .wc-ib.rep b { position: absolute; top: 3px; right: 2px; min-width: 14px; height: 14px; border-radius: 7px; background: var(--signal); color: var(--on-signal); display: grid; place-items: center; font: 800 9.5px/1 var(--f-body); box-shadow: 0 0 0 2px var(--surface); }
  .wc-pp { width: 46px; height: 46px; margin: 0 6px; border-radius: 50%; display: grid; place-items: center; background: var(--text); color: var(--bg); box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .6); transition: transform .15s, background .2s; }
  .wc-pp svg { width: 21px; height: 21px; }
  .wc-pp:hover:not(:disabled) { transform: scale(1.06); }
  .wc-pp:active:not(:disabled) { transform: scale(.92); }
  .wc-pp:disabled { opacity: .4; }
  .wc-prog { width: 100%; display: flex; align-items: center; gap: 12px; font: 600 11.5px var(--f-body); color: var(--faint); font-variant-numeric: tabular-nums; }
  .wc-prog span { flex: none; min-width: 32px; } .wc-prog span:last-child { text-align: right; }
  .wf { position: relative; flex: 1; min-width: 0; height: 22px; cursor: pointer; overflow: hidden; }
  .wf-off, .wf-on { position: absolute; inset: 0; display: flex; align-items: center; gap: 2px; }
  .wf i { flex: 1 1 0; min-width: 0; border-radius: 2px; background: color-mix(in srgb, var(--text) 18%, transparent); transition: transform .2s; }
  .wf-on i { background: var(--hue); }
  .wf-on { clip-path: inset(0 100% 0 0); transition: clip-path .25s linear; }
  .wf:hover i { transform: scaleY(1.15); }
  .wcap.idle .wf { cursor: default; opacity: .6; }
  /* Hız ve ses */
  .wc-side { flex: none; display: flex; align-items: center; gap: 4px; }
  .wc-chip { height: 30px; min-width: 46px; padding: 0 9px; border-radius: 10px; font: 800 12.5px var(--f-body); color: var(--text-2); background: color-mix(in srgb, var(--text) 7%, transparent); transition: background .2s, color .2s; }
  .wc-chip:hover { color: var(--text); background: color-mix(in srgb, var(--text) 12%, transparent); }
  .wc-vol { display: flex; align-items: center; }
  .wc-vol input { width: 0; opacity: 0; transition: width .3s var(--ease), opacity .2s; appearance: none; -webkit-appearance: none; height: 4px; border-radius: 3px; background: linear-gradient(90deg, var(--text-2) calc(var(--vol, 1) * 100%), color-mix(in srgb, var(--text) 16%, transparent) 0); cursor: pointer; }
  .wc-vol:hover input, .wc-vol:focus-within input { width: 84px; opacity: 1; margin-right: 6px; }
  .wc-vol input::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--text); border: 0; }
  .wc-vol input::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--text); border: 0; }
  /* Öne çıkan eylemler: sesli posta ve ses bırak */
  .wc-acts { flex: none; display: flex; align-items: center; gap: 8px; padding-left: 14px; border-left: 1px solid color-mix(in srgb, var(--text) 9%, transparent); }
  .wc-mail { height: 52px; padding: 0 16px 0 13px; border-radius: 18px; display: flex; align-items: center; gap: 8px; font: 700 14px var(--f-body); color: var(--text); background: color-mix(in srgb, var(--text) 7%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 8%, transparent) inset; transition: background .2s, transform .15s; }
  .wc-mail svg { width: 21px; height: 21px; color: var(--sky); }
  .wc-mail:hover { background: color-mix(in srgb, var(--text) 12%, transparent); }
  .wc-mail:active { transform: scale(.96); }
  .wc-rec { height: 56px; padding: 0 20px 0 10px; border-radius: 20px; display: flex; align-items: center; gap: 6px; font: 800 15.5px var(--f-display); letter-spacing: -.005em; color: var(--on-signal);
    background: radial-gradient(120% 140% at 20% 10%, #FFE896 0%, var(--signal) 48%, #F2BC12 100%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .65) inset, 0 -3px 6px rgba(150, 100, 0, .16) inset, 0 14px 30px -12px color-mix(in srgb, var(--signal) 95%, transparent); transition: transform .18s var(--ease), box-shadow .25s; }
  .wc-rec .lmic { width: 40px; height: 40px; }
  .wc-rec:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255, 255, 255, .65) inset, 0 -3px 6px rgba(150, 100, 0, .16) inset, 0 20px 36px -12px color-mix(in srgb, var(--signal) 100%, transparent); }
  .wc-rec:active { transform: scale(.95); }
  .lmic rect { fill: currentColor; }
  .lmic .wv { fill: none; stroke: currentColor; stroke-width: 3.3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; }
  @keyframes lwave { 0% { stroke-dashoffset: 60; } 100% { stroke-dashoffset: 0; } }
  /* Dar kapsül: önce ses/hız, sonra yazılar sadeleşir */
  @container (max-width: 980px) { .wc-side { display: none; } .wc-now { flex-basis: 210px; } }
  @container (max-width: 820px) { .wc-mail span { display: none; } .wc-mail { padding: 0 14px; } .wc-now { flex-basis: 170px; } }
  @container (max-width: 700px) { .wc-meta { display: none; } .wc-now { flex: none; } .wc-prog span { display: none; } }
}
@media (max-width: 680px) {
  html:has(body.pager-mode), body.pager-mode { overflow: hidden; overscroll-behavior: none; }
}

/* Oyun tam ekranı: gerçek tam ekranı desteklemeyen telefonlarda sayfayı kaplar */
.g-shell.pseudo-fs { position: fixed; inset: 0; z-index: 120; width: 100vw; height: 100dvh; margin: 0; border-radius: 0; }
body.game-fs { overflow: hidden; }
html:has(body.game-fs) { overflow: hidden; }
body.game-fs .tabbar, body.game-fs .topwrap, body.game-fs #wcap, body.game-fs .dock { display: none !important; }
[data-fs].on { background: var(--signal); color: var(--on-signal); border-color: transparent; }
@media (max-width: 680px) {
  .swipe-hint { pointer-events: none; }
  .welcome { overflow: hidden; }
}
@media (max-width: 680px) and (max-height: 720px) {
  .welcome .print { --p: min(46vw, 21dvh) !important; }
  .welcome h1 { font-size: 30px; margin: 14px 0 8px; }
  .welcome p { margin-bottom: 14px; font-size: 14.5px; }
}
@media (max-width: 680px) and (max-height: 600px) { .swipe-hint { display: none; } .welcome .print { --p: min(38vw, 17dvh) !important; } }

/* ===================== Ne çalsın? kaynak seçimi ===================== */
.wc-src { flex: none; height: 34px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px 0 9px; border-radius: 11px; font: 700 12.5px var(--f-body); color: var(--text-2); background: color-mix(in srgb, var(--text) 7%, transparent); white-space: nowrap; transition: background .2s, color .2s; }
.wc-src svg { width: 15px; height: 15px; }
.wc-src svg:first-child { color: var(--signal); }
[data-theme="light"] .wc-src svg:first-child { color: #C99300; }
.wc-src:hover { color: var(--text); background: color-mix(in srgb, var(--text) 12%, transparent); }
@container (max-width: 820px) { .wc-src span { display: none; } }
@media (max-width: 680px) { .wc-src { display: none; } }
.src-menu { width: 290px; padding: 6px; }
.src-h { padding: 8px 10px 6px; font: 700 11px var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.src-it { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 10px; border-radius: 12px; text-align: left; color: var(--text); transition: background .15s; }
.src-it:hover { background: var(--surface-2); }
.src-it > svg:first-child { width: 20px; height: 20px; color: var(--muted); flex: none; }
.src-it b { display: block; font-size: 14.5px; font-weight: 700; }
.src-it small { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; }
.src-it.on > svg:first-child, .src-it.on > svg:last-child { color: var(--signal-ink); }
[data-theme="dark"] .src-it.on > svg:first-child, [data-theme="dark"] .src-it.on > svg:last-child { color: var(--signal); }
.src-it > svg:last-child { width: 18px; height: 18px; }

/* ===================== Mobil mini oynatıcı kapsül ===================== */
.mcap { display: none; }
@media (max-width: 680px) {
  .pbar { display: none !important; }
  .mcap { --hue: #FFD84D; position: fixed; z-index: 44; left: 14px; right: 14px; bottom: calc(var(--tb-b) + var(--tb-h) + 10px); height: 60px; display: flex; align-items: center; gap: 4px; padding: 0 8px 0 9px; border-radius: 999px; overflow: hidden;
    background: color-mix(in srgb, var(--surface) 78%, transparent);
    backdrop-filter: blur(26px) saturate(1.8); -webkit-backdrop-filter: blur(26px) saturate(1.8);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 10%, transparent) inset, 0 1px 0 color-mix(in srgb, #fff 8%, transparent) inset, 0 18px 40px -18px rgba(0, 0, 0, .75);
    opacity: 0; transform: translateY(18px) scale(.97); pointer-events: none; transition: opacity .3s, transform .4s var(--ease), bottom .35s var(--ease); }
  [data-theme="light"] .mcap { background: rgba(255, 255, 255, .84); box-shadow: 0 0 0 1px rgba(10, 16, 32, .07) inset, 0 16px 34px -18px rgba(10, 16, 32, .38); }
  .mcap.show { display: flex; opacity: 1; transform: none; pointer-events: auto; }
  .mcap::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 160% at 6% 50%, color-mix(in srgb, var(--hue) 20%, transparent), transparent 70%); }
  .mcap > * { position: relative; }
  .mc-art { flex: none; } .mc-art .print { --p: 42px !important; border-radius: 30%; }
  .mcap.playing .mc-art .print { animation: breathe 2.4s ease-in-out infinite; }
  .mc-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 0 4px; text-align: left; }
  .mc-meta b { max-width: 100%; font: 800 14.5px/1.15 var(--f-display); color: var(--text); }
  .mc-meta span { max-width: 100%; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
  .mc-ib { position: relative; width: 34px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; color: var(--muted); }
  .mc-ib svg { width: 19px; height: 19px; }
  .mc-ib.on { color: var(--signal); } [data-theme="light"] .mc-ib.on { color: #C99300; }
  .mc-ib.on::after { content: ''; position: absolute; bottom: 4px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor; }
  .mc-ib:disabled { opacity: .35; }
  .mc-ib.rep b { position: absolute; top: 5px; right: 2px; min-width: 13px; height: 13px; border-radius: 7px; background: var(--signal); color: var(--on-signal); display: grid; place-items: center; font: 800 9px/1 var(--f-body); }
  .mc-pp { width: 42px; height: 42px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--text); color: var(--bg); margin: 0 2px; }
  .mc-pp svg { width: 19px; height: 19px; }
  .mc-pp:active, .mc-ib:active { transform: scale(.9); }
  .mc-prog { position: absolute; left: 22px; right: 22px; bottom: 0; height: 2.5px; border-radius: 2px; background: color-mix(in srgb, var(--text) 10%, transparent); overflow: hidden; }
  .mc-prog i { display: block; height: 100%; background: var(--hue); transition: width .25s linear; }
  body.mcap-on .dock { padding-bottom: calc(var(--tb-h) + var(--tb-b) + 80px); }
  body.mcap-on .main { padding-bottom: calc(var(--tb-h) + var(--tb-b) + 180px); }
}
/* Tam oynatıcı sayfası */
.np-sheet { --hue: #FFD84D; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 4px 4px 8px; }
.nps-art .print { --p: min(46vw, 200px) !important; border-radius: 30%; }
.nps-t { margin: 16px 0 4px; font: 800 26px/1.1 var(--f-display); letter-spacing: -.02em; }
.nps-who { color: var(--muted); font-size: 14px; margin-bottom: 14px; }
.nps-who a { color: var(--text-2); font-weight: 600; }
.np-sheet .wc-prog { width: 100%; display: flex; align-items: center; gap: 10px; font: 600 11.5px var(--f-body); color: var(--faint); font-variant-numeric: tabular-nums; }
.np-sheet .wf { position: relative; flex: 1; min-width: 0; height: 30px; overflow: hidden; }
.np-sheet .wf-off, .np-sheet .wf-on { position: absolute; inset: 0; display: flex; align-items: center; gap: 2px; }
.np-sheet .wf i { flex: 1 1 0; min-width: 0; border-radius: 2px; background: color-mix(in srgb, var(--text) 18%, transparent); }
.np-sheet .wf-on i { background: var(--hue); }
.np-sheet .wf-on { transition: clip-path .25s linear; }
.nps-ctrls { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 16px 0 6px; }
.np-sheet .wc-ib { position: relative; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; color: var(--muted); }
.np-sheet .wc-ib svg { width: 22px; height: 22px; }
.np-sheet .wc-ib.on { color: var(--signal-ink); } [data-theme="dark"] .np-sheet .wc-ib.on { color: var(--signal); }
.np-sheet .wc-ib.on::after { content: ''; position: absolute; bottom: 4px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor; }
.np-sheet .wc-ib.rep b { position: absolute; top: 6px; right: 5px; min-width: 14px; height: 14px; border-radius: 7px; background: var(--signal); color: var(--on-signal); display: grid; place-items: center; font: 800 9.5px/1 var(--f-body); }
.np-sheet .wc-ib:disabled { opacity: .35; }
.np-sheet .wc-pp { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; background: var(--text); color: var(--bg); }
.np-sheet .wc-pp svg { width: 26px; height: 26px; }
.nps-row { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 12px 2px 0; border-top: 1px solid var(--line); margin-top: 10px; }
.np-sheet .wc-chip { height: 32px; min-width: 52px; padding: 0 10px; border-radius: 10px; font: 800 13px var(--f-body); color: var(--text-2); background: var(--surface-2); }
.np-sheet > .label, .np-sheet .label { align-self: flex-start; }
.src-list { width: 100%; display: flex; flex-direction: column; gap: 2px; text-align: left; }

/* ===================== İmza: </> code by dagasan (sade, üzerinden ara sıra ışık geçer) ===================== */
.sig { --sigc: var(--faint); display: inline-flex; align-items: center; gap: 5px; font: 500 11.5px/1 var(--f-body); letter-spacing: .03em; color: var(--faint); white-space: nowrap; user-select: none; cursor: default; }
.sig i { font: 600 11px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-style: normal; color: var(--faint); }
.sig b { font-weight: 700; letter-spacing: .05em; color: var(--sigc);
  background: linear-gradient(100deg, var(--sigc) 0 38%, var(--signal) 50%, var(--sigc) 62% 100%); background-size: 260% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: sigshine 6s ease-in-out infinite 1.5s; }
.sig:hover b { animation-duration: 1.6s; }
@keyframes sigshine { 0%, 60% { background-position: 100% 0; } 100% { background-position: 0 0; } }
[data-theme="light"] .sig b { background-image: linear-gradient(100deg, var(--sigc) 0 38%, #E0A800 50%, var(--sigc) 62% 100%); }
.side-foot .sig { margin-top: 6px; flex-basis: 100%; }
/* "dagasan" bağlantısı: imzanın görünümü aynı kalır; üzerine gelince ışık hızlanır, altında ince bir çizgi belirir */
.sig a.sig-l { position: relative; display: inline-flex; padding: 3px 0; margin: -3px 0; color: inherit; text-decoration: none; cursor: pointer; border-radius: 4px; }
.sig a.sig-l::after { content: ''; position: absolute; left: 0; right: 0; bottom: 1px; height: 1px; border-radius: 1px; background: currentColor; opacity: 0; transform: scaleX(.4); transition: opacity .25s, transform .3s var(--ease); }
.sig a.sig-l:hover { --sigc: var(--text-2); color: var(--signal); }
[data-theme="light"] .sig a.sig-l:hover { color: #C99300; }
.sig a.sig-l:hover::after { opacity: .7; transform: scaleX(1); }
.sig a.sig-l:hover b { animation-duration: 1.6s; }
.sig a.sig-l:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; }
/* Mobil: her sayfanın sonunda, ince çizgiler arasında */
.m-sign { display: none; }
@media (max-width: 680px) {
  .m-sign { display: flex; align-items: center; gap: 14px; padding: 30px 6px 6px; }
  .m-sign::before, .m-sign::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--line-2)); }
  .m-sign::after { background: linear-gradient(90deg, var(--line-2), transparent); }
}
@media print { .sig, .m-sign { display: none !important; } }

/* ===================== Giriş / üyelik ===================== */
.auth-card { max-width: 420px; }
.auth-card h1 { margin-bottom: 6px; }
.auth-sub { margin: 0 0 18px; }
.auth-seg { width: 100%; margin-bottom: 16px; }
.auth-seg > button { flex: 1; justify-content: center; }
.auth-form { gap: 12px; text-align: left; width: 100%; }
.auth-form .field { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.auth-form .field > span:first-child { font-size: 13px; font-weight: 600; color: var(--text-2); }
.pw { position: relative; display: block; }
.pw .input { padding-right: 46px; }
.pw-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; color: var(--muted); }
.pw-eye svg { width: 19px; height: 19px; }
.pw-eye.on { color: var(--signal-ink); }
.auth-link { align-self: flex-end; margin-top: -4px; font-size: 13px; font-weight: 600; color: var(--muted); }
.auth-link:hover { color: var(--text); }
.auth-or { display: flex; align-items: center; gap: 12px; width: 100%; margin: 18px 0 12px; color: var(--faint); font-size: 12.5px; }
.auth-or::before, .auth-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.kule-in { margin-top: 26px; width: 100%; }
.kule-in summary { cursor: pointer; }
.btn.busy { opacity: .7; pointer-events: none; }
.chip.ok { color: var(--mint); } .chip.warn { color: var(--signal-ink); }
.chip svg { width: 15px; height: 15px; }

/* Mikrofon: dalga yavaşça yeniden çizilir, başlık hafifçe nefes alır */
@keyframes lwaveSlow { 0% { stroke-dashoffset: 60; } 15% { stroke-dashoffset: 60; } 100% { stroke-dashoffset: 0; } }
@keyframes lhead { 0%, 100% { transform: none; } 30% { transform: translateY(-1.2px) scale(1.06); } 60% { transform: translateY(.4px) scale(.98); } }
.lmic rect { transform-box: fill-box; transform-origin: 50% 100%; }
@media (hover: hover) {
  .wc-rec:hover .lmic .wv, .tb-rec:hover .lmic .wv { animation: lwaveSlow 1.6s cubic-bezier(.45, .05, .25, 1) both; }
  .wc-rec:hover .lmic rect, .tb-rec:hover .lmic rect { animation: lhead 1.6s ease-in-out both; }
}
.draw .lmic .wv { animation: lwaveSlow 1.5s cubic-bezier(.45, .05, .25, 1) both; }
.draw .lmic rect { animation: lhead 1.5s ease-in-out both; }

/* ===================== Özet ses kartı (akış, keşfet, kanal, listeler) ===================== */
.feed:has(> .clip.sum) { display: flex; flex-direction: column; gap: 8px; }
.clip.sum { position: relative; padding: 10px 10px 10px 10px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; transition: border-color .2s, background .2s, box-shadow .25s, transform .25s var(--ease); }
.clip.sum .clip-by { margin: 0 0 6px 4px; font-size: 12px; }
.sm-row { display: flex; align-items: center; gap: 13px; min-width: 0; }
.sm-row > .print { --p: 58px !important; flex: none; border-radius: 30%; }
.sm-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; color: inherit; text-decoration: none; padding: 2px 0; }
.sm-who { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; }
.sm-who b { font-weight: 700; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; }
.sm-who .vmark { flex: none; }
.sm-who .stamp { margin-left: 4px; transform: scale(.9); transform-origin: left center; }
.sm-dot { color: var(--faint); }
.sm-aud svg { width: 13px; height: 13px; color: var(--faint); }
.sm-title { display: block; font: 800 16.5px/1.22 var(--f-display); letter-spacing: -.01em; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-title .sm-q { width: 15px; height: 15px; margin-right: 5px; vertical-align: -2px; color: var(--sky); }
.sm-meta { display: flex; align-items: center; gap: 12px; min-width: 0; font-size: 12px; font-weight: 600; color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; }
.sm-meta > span { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.sm-meta svg { width: 14px; height: 14px; }
.sm-meta .life { margin: 0; padding: 0; font-size: 12px; color: var(--muted); gap: 6px; }
.sm-meta .life-seg i { width: 8px; height: 4px; }
.sm-ph { width: 46px; height: 46px; flex: none; object-fit: cover; border-radius: 12px; }
.clip.sum .more { flex: none; align-self: flex-start; margin: -2px -4px 0 0; color: var(--faint); }
.sm-prog { position: absolute; left: 16px; right: 16px; bottom: 0; height: 2.5px; border-radius: 2px; background: color-mix(in srgb, var(--text) 8%, transparent); opacity: 0; transition: opacity .3s; overflow: hidden; }
.sm-prog i { display: block; height: 100%; width: 0; background: var(--hue); transition: width .25s linear; }
.clip.sum.playing { border-color: color-mix(in srgb, var(--hue) 40%, var(--line)); background: color-mix(in srgb, var(--hue) 6%, var(--surface)); }
.clip.sum.playing .sm-prog { opacity: 1; }
.clip.sum.playing .sm-title { color: var(--text); }
@media (hover: hover) {
  .clip.sum:hover { border-color: var(--line-2); transform: translateY(-1px); box-shadow: 0 14px 30px -24px rgba(0, 0, 0, .6); }
  .clip.sum:hover .sm-tt { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--text) 25%, transparent); text-underline-offset: 3px; }
}
.clip.sum:active { transform: scale(.995); }
@media (min-width: 681px) {
  .clip.sum { padding: 12px 14px 12px 12px; }
  .sm-row > .print { --p: 64px !important; }
  .sm-title { font-size: 17.5px; }
  .sm-meta { gap: 14px; }
}
@media (max-width: 680px) {
  .feed:has(> .clip.sum) { gap: 7px; }
  .clip.sum { padding: 9px 8px 9px 9px; border-radius: 18px; }
  .sm-row { gap: 11px; }
  .sm-row > .print { --p: 54px !important; }
  .sm-title { font-size: 15.5px; }
  .sm-meta { gap: 10px; }
  .sm-meta .sm-life .life > span:last-child { display: none; }
}

/* ===================== Mobil oynatıcı: hep hazır, göz yormayan sakin kapsül ===================== */
@media (max-width: 680px) {
  .mcap { height: 62px; gap: 2px; padding: 0 6px 0 8px; background: color-mix(in srgb, var(--surface) 86%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 8%, transparent) inset, 0 14px 34px -18px rgba(0, 0, 0, .7); }
  .mcap::before { display: none; }
  [data-theme="light"] .mcap { background: rgba(255, 255, 255, .9); }
  body.tb-min .mcap { bottom: calc(var(--tb-b) + var(--tb-h) - 4px); }
  .mc-art .print { --p: 42px !important; }
  .mcap.idle .mc-art .print { opacity: .9; }
  .mc-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 0 6px 0 4px; }
  .mc-t { max-width: 100%; padding: 0; text-align: left; font: 750 14.5px/1.15 var(--f-display); color: var(--text); }
  .mc-s { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px; color: var(--muted); }
  .mc-s > .ellipsis { min-width: 0; flex: 0 1 auto; }
  .mc-src { flex: none; display: inline-flex; align-items: center; gap: 2px; height: 20px; padding: 0 6px 0 8px; border-radius: 7px; font: 700 11px/1 var(--f-body); color: var(--text-2); background: color-mix(in srgb, var(--text) 8%, transparent); }
  .mc-src svg { width: 12px; height: 12px; }
  .mc-ib { width: 36px; height: 44px; }
  .mc-ib svg { width: 19px; height: 19px; }
  .mc-ib.on { color: var(--signal-ink); }
  [data-theme="dark"] .mc-ib.on { color: var(--signal); }
  .mc-pp { width: 44px; height: 44px; margin: 0 1px; background: var(--text); color: var(--bg); box-shadow: none; }
  .mcap.idle .mc-pp { background: var(--signal); color: var(--on-signal); }
  .mcap.idle .mc-next { display: none; }
  .mc-prog { left: 26px; right: 26px; height: 2px; }
  .mcap.idle .mc-prog { display: none; }
}
@media (max-width: 370px) { .mcap .rep { display: none; } }
/* Oynatıcı sayfası: kaynaklar ve ayarlar */
.nps-lead { margin: -4px 0 12px; font-size: 13.5px; align-self: stretch; text-align: left; }
.nps-h { margin: 16px 0 6px; align-self: flex-start; }
.nps-tg { width: 100%; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.nps-chip { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 13px; border-radius: 12px; font: 650 13px var(--f-body); color: var(--text-2); background: var(--surface-2); border: 1px solid var(--line); }
.nps-chip svg { width: 17px; height: 17px; }
.nps-chip.on { color: var(--on-signal); background: var(--signal); border-color: transparent; }
.np-sheet .src-it { padding: 12px 10px; border-radius: 14px; }
.np-sheet .src-it + .src-it { border-top: 1px solid var(--line); border-radius: 0; }
/* Ana ekrana ekle şeridi: sakin yüzey, sarı yalnız ikon ve düğmede */
.install { background: var(--surface) !important; color: var(--text) !important; border: 1px solid var(--line); }
.install > svg:first-child { color: var(--signal-ink); }
[data-theme="dark"] .install > svg:first-child { color: var(--signal); }
.install .small { color: var(--muted) !important; }

/* ===================== Davet pencereleri: üye ol, ana ekrana ekle ===================== */
.pop-scrim .sheet { max-width: 420px; }
.pop-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 26px 22px 18px; }
.pop-art { margin-bottom: 14px; }
.pop-mark { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 22px; box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--signal) 90%, transparent); }
.pop-mark .mark { width: 68px; height: 68px; }
.pop-mark.app { position: relative; }
.pop-mark.app::after { content: ''; position: absolute; right: -6px; bottom: -6px; width: 24px; height: 24px; border-radius: 50%; background: var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1020' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 14px no-repeat; box-shadow: 0 0 0 3px var(--surface); }
.pop-t { margin: 2px 0 6px; font: 800 22px/1.15 var(--f-display); letter-spacing: -.02em; }
.pop-x { margin: 0 0 16px; color: var(--muted); font-size: 14.5px; line-height: 1.5; max-width: 320px; }
.pop-list { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 8px; align-self: stretch; }
.pop-list li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); text-align: left; font-size: 14px; font-weight: 600; color: var(--text-2); }
.pop-list svg { width: 19px; height: 19px; color: var(--signal-ink); flex: none; }
[data-theme="dark"] .pop-list svg { color: var(--signal); }
.pop-steps { align-self: stretch; text-align: left; margin: 0 0 18px; padding: 14px 14px 10px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line); }
.pop-where { font: 700 12px var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin-bottom: 8px; }
.pop-steps ol { margin: 0; padding: 0; list-style: none; counter-reset: st; display: flex; flex-direction: column; gap: 10px; }
.pop-steps li { counter-increment: st; position: relative; padding-left: 34px; font-size: 14px; line-height: 1.45; color: var(--text-2); }
.pop-steps li::before { content: counter(st); position: absolute; left: 0; top: -1px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 800 12px var(--f-body); color: var(--on-signal); background: var(--signal); }
.pop-steps b { color: var(--text); }
.pop-key { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 5px; margin-left: 2px; border-radius: 6px; vertical-align: -5px; background: var(--surface-3); border: 1px solid var(--line-2); font-size: 12px; font-weight: 700; color: var(--text); }
.pop-key svg { width: 14px; height: 14px; }
.pop-note { margin: 10px 0 2px; font-size: 12.5px; color: var(--muted); }
.pop-acts { align-self: stretch; display: flex; flex-direction: column; gap: 8px; }
.pop-foot { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; color: var(--faint); font-size: 13px; }
.pop-link { padding: 6px 4px; font-weight: 600; color: var(--muted); }
.pop-link:hover { color: var(--text); }
@media (max-width: 680px) { .pop-card { padding: 22px 18px calc(14px + var(--safe-b)); } }
/* Mobilde akış doğrudan seslerle başlar; karşılama yerine davet penceresi */
@media (max-width: 680px) { .hero { display: none; } }
/* Logo başlıkta tam ortada: bağlantı metin satırı gibi davranıp altında boşluk bırakmasın */
.logo-link { display: flex; align-items: center; align-self: stretch; line-height: 1; }
.logo { line-height: 1; }
.logo .mark { display: block; }
/* iPhone Safari (iOS 26): üst kenardaki buzlu cam efekti WebKit hatası yüzünden Safari'nin üst çubuğu boyamasını
   bozuyor ve Safari logo satırını kendisi bulanıklaştırıyor. Mobilde üst çubuk düz ve opak; Safari aynı renge boyar. */
@media (max-width: 680px) {
  .topwrap { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
html { background: var(--bg); }

/* ---------- Giriş: kullanıcı adı alanı ---------- */
.at-in { position: relative; display: block; }
.at-in > b { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-weight: 700; color: var(--muted); pointer-events: none; font-size: 15px; }
.at-in .input { padding-left: 32px; }
.at-in:focus-within > b { color: var(--signal-ink); }
.auth-form .h-state { font-size: 12.5px; line-height: 1.4; color: var(--muted); min-height: 1.4em; transition: color .2s ease; }
.auth-form .h-state.ok { color: var(--mint); }
.auth-form .h-state.no { color: var(--live); }

/* Eski LAGOR üyesi: giriş ekranında sakin bir kısa yol */
.old-member { display: flex; flex-direction: column; gap: 3px; width: 100%; margin-top: 14px; padding: 13px 16px; text-align: left; border-radius: 16px; border: 1px dashed var(--signal-line); background: var(--signal-soft); color: var(--text); transition: background .2s ease, border-color .2s ease; }
.old-member b { font-size: 14px; color: var(--signal-ink); }
.old-member span { font-size: 13px; line-height: 1.45; color: var(--text-2); }
.old-member:hover { border-style: solid; }

/* ===================== Görev rozetleri ve yayın rütbesi ===================== */
:root, [data-theme="dark"] { --t1: #D9925E; --t2: #C3CEE2; --t3: #FFD84D; --t1-ink: #E9A472; --t2-ink: #D3DCEC; --t3-ink: #FFD84D; }
[data-theme="light"] { --t1: #C7783F; --t2: #93A1B9; --t3: #E5B400; --t1-ink: #9C5A2B; --t2-ink: #5E6B84; --t3-ink: #8A6200; }

/* Rütbe çipi: Konuk sade, Efsane parlak */
.rchip { --rc: var(--muted); display: inline-flex; align-items: center; gap: 4px; height: 21px; padding: 0 8px 0 6px; border-radius: 999px; font-size: 11.5px; font-weight: 750; letter-spacing: .01em; white-space: nowrap; color: var(--rc); background: color-mix(in srgb, var(--rc) 13%, transparent); border: 1px solid color-mix(in srgb, var(--rc) 30%, transparent); vertical-align: middle; }
.rchip svg { width: 12px; height: 12px; }
.rchip.r1 { --rc: var(--mint); } .rchip.r2 { --rc: var(--sky); } .rchip.r3 { --rc: #FF9F6B; } .rchip.r4 { --rc: var(--signal-ink); }
.rchip.r5 { --rc: var(--on-signal); color: var(--on-signal); background: linear-gradient(110deg, var(--signal) 0%, #FFF1B0 45%, var(--signal) 60%) 0 0 / 220% 100%; border-color: transparent; animation: rankshine 3.2s linear infinite; }
@keyframes rankshine { to { background-position: -220% 0; } }
.prof h1 .rchip { height: 24px; font-size: 12.5px; padding: 0 10px 0 8px; }

/* Madalya */
.medal { --mc: var(--faint); position: relative; display: inline-grid; place-items: center; width: 46px; height: 46px; flex: none; }
.medal-in { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; color: var(--mc); background: var(--surface-2); border: 1.5px dashed color-mix(in srgb, var(--faint) 55%, transparent); }
.medal-in svg { width: 46%; height: 46%; }
.medal.t1 { --mc: var(--t1); } .medal.t2 { --mc: var(--t2); } .medal.t3 { --mc: var(--t3); }
.medal:is(.t1, .t2, .t3) .medal-in { border: 0; color: var(--on-signal); background: radial-gradient(circle at 32% 26%, color-mix(in srgb, #fff 55%, var(--mc)) 0, var(--mc) 46%, color-mix(in srgb, #000 22%, var(--mc)) 100%); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mc) 24%, transparent), 0 8px 18px -10px var(--mc); }
.medal-pips { position: absolute; bottom: -3px; left: 50%; transform: translateX(-50%); display: flex; gap: 2px; padding: 2px 4px; border-radius: 6px; background: var(--surface); box-shadow: 0 0 0 1.5px var(--line); }
.medal-pips i { width: 4px; height: 4px; border-radius: 50%; background: var(--line-2); }
.medal-pips i.on { background: var(--mc); }
.medal.sm { width: 26px; height: 26px; } .medal.sm .medal-pips { display: none; }
.medal.lg { width: 58px; height: 58px; }
.medal.xl { width: 96px; height: 96px; } .medal.xl .medal-pips { bottom: -6px; padding: 3px 6px; gap: 3px; } .medal.xl .medal-pips i { width: 6px; height: 6px; }

/* Kanal: rozet vitrini */
.vitrin { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.vitrin-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; font-size: 13.5px; }
.vitrin-h b { font-size: 15px; }
.vitrin-all { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; color: var(--signal-ink); font-weight: 650; font-size: 13px; text-decoration: none; }
.vitrin-all svg { width: 15px; height: 15px; }
.medals { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -6px; padding: 2px 6px 4px; scroll-snap-type: x proximity; }
.medals::-webkit-scrollbar { display: none; }
.medal-btn { display: flex; flex-direction: column; align-items: center; gap: 7px; width: 70px; flex: none; padding: 6px 2px; border-radius: 14px; scroll-snap-align: start; transition: background .18s; }
.medal-btn:hover { background: var(--surface-2); }
.medal-btn > span:last-child { font-size: 11.5px; font-weight: 600; color: var(--text-2); line-height: 1.2; text-align: center; }
.medal-sheet { display: flex; flex-direction: column; align-items: center; text-align: center; }
.tier-rows { align-self: stretch; display: flex; flex-direction: column; gap: 6px; }
.tier-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); font-size: 14px; color: var(--text-2); }
.tier-row > span:nth-child(2) { flex: 1; text-align: left; }
.tier-row.done { color: var(--text); }
.tier-row svg { width: 17px; height: 17px; color: var(--mint); }
.tier-n { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .02em; }
.tier-n.t1 { color: var(--t1-ink); background: color-mix(in srgb, var(--t1) 16%, transparent); }
.tier-n.t2 { color: var(--t2-ink); background: color-mix(in srgb, var(--t2) 18%, transparent); }
.tier-n.t3 { color: var(--t3-ink); background: color-mix(in srgb, var(--t3) 16%, transparent); }
.tier-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: 1px; }
.tier-dot.t1 { background: var(--t1); } .tier-dot.t2 { background: var(--t2); } .tier-dot.t3 { background: var(--t3); }

/* Rozetler sayfası */
.rz { padding: 4px 20px 30px; }
.rz-hero { padding: 20px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); margin-bottom: 18px; }
.rz-hero.guest p { margin: 0 0 14px; color: var(--text-2); line-height: 1.55; }
.rz-rank { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13.5px; }
.rz-rank .rchip { height: 28px; font-size: 14px; padding: 0 12px 0 9px; }
.rz-rank .rchip svg { width: 15px; height: 15px; }
.rz-pts { display: flex; align-items: baseline; gap: 8px; margin: 14px 0 10px; }
.rz-pts b { font: 800 40px/1 var(--f-display); letter-spacing: -.03em; }
.rz-pts span { color: var(--muted); font-size: 14px; }
.rz-bar { height: 6px; border-radius: 6px; background: var(--surface-3); overflow: hidden; }
.rz-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--signal), var(--signal-2)); transition: width .6s var(--ease); }
.rz-bar.big { height: 9px; }
.rz-next { margin-top: 10px; font-size: 13.5px; color: var(--muted); }
.rz-next b { color: var(--text); }
.rz-h { margin: 22px 0 10px; font: 800 19px/1.2 var(--f-display); letter-spacing: -.01em; }
.rz-ladder { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.rz-step { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); opacity: .55; }
.rz-step.on { opacity: 1; }
.rz-step.cur { border-color: var(--signal-line); box-shadow: 0 0 0 3px var(--signal-soft); }
.rz-step small { font-size: 11.5px; color: var(--muted); }
.rz-note { margin: 12px 0 0; font-size: 13.5px; line-height: 1.7; color: var(--muted); }
.rz-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.rz-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.rz-card.got { border-color: color-mix(in srgb, var(--signal) 22%, var(--line)); }
.rz-top { display: flex; align-items: center; gap: 12px; }
.rz-top .grow { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rz-name { font-size: 15.5px; }
.rz-task { font-size: 13px; color: var(--muted); line-height: 1.4; }
.rz-prog { display: flex; flex-direction: column; gap: 6px; }
.rz-prog span { font-size: 12.5px; color: var(--text-2); }
.rz-tiers { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--faint); }
.rz-tiers .on { color: var(--text-2); }
.rz-tiers b { font-weight: 700; }
.rz-rules { margin-top: 10px; }
@media (max-width: 680px) {
  .rz { padding: 4px 14px 30px; }
  .rz-grid { grid-template-columns: 1fr; }
  .rz-ladder { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Yeni rozet kutlaması */
.cele-scrim .sheet { max-width: 400px; overflow: hidden; }
.cele { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 30px 22px 18px; }
.cele .medal { animation: celepop .7s var(--ease) both; }
@keyframes celepop { 0% { transform: scale(.4) rotate(-12deg); opacity: 0; } 60% { transform: scale(1.08) rotate(3deg); opacity: 1; } 100% { transform: none; } }
.cele-burst { position: absolute; top: 78px; left: 50%; width: 0; height: 0; }
.cele-burst i { position: absolute; width: 4px; height: 12px; border-radius: 3px; background: var(--signal); opacity: 0; transform: rotate(var(--a)) translateY(-40px); animation: celeray 1s var(--d) var(--ease) forwards; }
.cele-burst i:nth-child(3n) { background: var(--mint); } .cele-burst i:nth-child(4n) { background: var(--sky); }
@keyframes celeray { 0% { opacity: 0; transform: rotate(var(--a)) translateY(-36px) scaleY(.4); } 30% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-86px) scaleY(1); } }
.cele-k { margin-top: 18px; font: 700 12px var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--signal-ink); }
.cele-t { margin: 6px 0 6px; font: 800 24px/1.15 var(--f-display); letter-spacing: -.02em; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.cele-x { margin: 0 0 14px; color: var(--muted); font-size: 14.5px; line-height: 1.5; max-width: 300px; }
.cele-more { display: flex; flex-direction: column; gap: 6px; align-self: stretch; margin-bottom: 12px; }
.cele-more span { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--surface-2); font-size: 13.5px; font-weight: 600; color: var(--text-2); }
.cele-rank { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 16px; font-size: 13.5px; color: var(--muted); }
.cele-rank svg { width: 15px; height: 15px; color: var(--signal-ink); }
.cele-rank b { color: var(--text); }
.cele-acts { align-self: stretch; display: flex; flex-direction: column; gap: 8px; }
@media (prefers-reduced-motion: reduce) { .cele .medal, .cele-burst i, .rchip.r5 { animation: none; } .cele-burst { display: none; } }

/* Bilgi balonu (onay işareti: Yönetici / Ekip) */
.vm { display: inline-flex; align-items: center; cursor: help; }
.tip { --tc: var(--signal); position: fixed; z-index: 500; left: 0; top: 0; padding: 6px 10px; border-radius: 9px; background: var(--text); color: var(--bg); font: 700 12px/1.2 var(--f-body); letter-spacing: .01em; white-space: nowrap; pointer-events: none; opacity: 0; transform: translateY(4px) scale(.96); transition: opacity .14s ease, transform .16s var(--ease); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .55); }
.tip::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; vertical-align: 1px; background: var(--tc); }
.tip.owner { --tc: var(--mint); }
.tip::after { content: ''; position: absolute; left: calc(var(--ax, 50%) - 5px); bottom: -4px; width: 10px; height: 10px; background: inherit; transform: rotate(45deg); border-radius: 2px; }
.tip.below::after { bottom: auto; top: -4px; }
.tip.below { transform: translateY(-4px) scale(.96); }
.tip.on { opacity: 1; transform: none; }

/* Akış sekmeleri: mobilde kaydırmadan tek satıra sığar */
.tab-note[hidden] { display: none; }
.tab-note { display: flex; align-items: center; gap: 7px; margin: 10px 2px 0; font-size: 12.5px; color: var(--muted); }
.tab-note svg { width: 15px; height: 15px; color: var(--signal-ink); flex: none; }
@media (max-width: 680px) {
  .seg.feed-seg { overflow: hidden; gap: 2px; }
  .seg.feed-seg > button { flex: 1 1 auto; min-width: 0; justify-content: center; padding: 0 6px; font-size: 13.5px; letter-spacing: -.005em; white-space: nowrap; }
  .fbar .seg.feed-seg > button { padding: 0 5px; font-size: 13px; }
}
@media (max-width: 360px) {
  .seg.feed-seg > button, .fbar .seg.feed-seg > button { padding: 0 3px; font-size: 12.5px; letter-spacing: -.01em; }
}

/* Bilgi kutusu (kaydedildi, hata vb.) her zaman oynatıcının üstünde ve görünür kalır */
.dock { z-index: 65; }
@media (min-width: 681px) {
  .dock { padding-bottom: calc(18px + 84px + 14px + var(--safe-b)); }
  body.game-fs .dock { padding-bottom: calc(14px + var(--safe-b)); }
}
@media (max-width: 680px) {
  body:not(.mcap-on) .dock { padding-bottom: calc(var(--tb-h) + var(--tb-b) + 12px); }
}

/* ===================== Logo: ara ara sinyal ===================== */
/* Işık hattı L'nin tepesinden girer, dalgayı boydan boya geçer; sonunda işaret hafifçe atar ve bir halka yayılır */
.mark .m-pulse { stroke: #FFF6D2; stroke-dasharray: 16 100; stroke-dashoffset: 16; opacity: 0; }
.logo { position: relative; --ms: 34px; }
.logo.pulse .m-pulse { animation: mpulse 1.05s cubic-bezier(.5, .05, .3, 1) both; }
.logo.pulse .mark { animation: mtap 1.7s var(--ease) both; transform-origin: 50% 50%; }
.logo.pulse::after { content: ''; position: absolute; left: 0; top: 50%; width: var(--ms); height: var(--ms); margin-top: calc(var(--ms) / -2); border-radius: 30%; box-shadow: 0 0 0 2px var(--signal); pointer-events: none; animation: mring 1.7s ease-out both; }
@keyframes mpulse { 0% { opacity: 1; stroke-dashoffset: 16; } 90% { opacity: 1; } 100% { opacity: 0; stroke-dashoffset: -100; } }
@keyframes mtap { 0%, 56% { transform: scale(1); } 64% { transform: scale(.9); } 76% { transform: scale(1.07); } 88% { transform: scale(.98); } 100% { transform: scale(1); } }
@keyframes mring { 0%, 60% { opacity: 0; transform: scale(1); } 66% { opacity: .75; } 100% { opacity: 0; transform: scale(1.75); } }
@media (max-width: 680px) { .hdr .logo { --ms: 28px; } }
@media (prefers-reduced-motion: reduce) { .logo.pulse .m-pulse, .logo.pulse .mark, .logo.pulse::after { animation: none; } }

/* Özet kart: gönderenin profil resmi adın yanında */
.sm-who .av { --s: 22px; margin-right: 2px; box-shadow: 0 0 0 1.5px var(--surface); }
@media (max-width: 680px) { .sm-who .av { --s: 21px; } }

/* Ara sayfasında üstteki arama çubuğu gizlenir (sayfanın kendi araması var); başlık düzeni kaymaz */
.hdr-search.off { visibility: hidden; pointer-events: none; }
.tip b { font-weight: 800; }
.tip span { display: block; margin-top: 3px; font-weight: 600; font-size: 11.5px; opacity: .72; }
.tip:has(span)::before { vertical-align: 0; }

/* Oyun tam ekranı: içerik saat/çentik çubuğundan biraz aşağıda başlar (iOS üst çubuğu altındakini buğulamasın) */
.g-shell.is-fs, .g-shell:fullscreen { padding-top: max(28px, calc(env(safe-area-inset-top, 0px) + 24px)); }

/* Frekans: sekme değişirken eski içerik solar, yenisi gelince yerine oturur */
.pager.loading > * { opacity: .3; transition: opacity .15s ease; pointer-events: none; }

/* Yan sütunlar kendi içinde değil, sayfayla birlikte kayar (fare nerede olursa olsun) */
@media (min-width: 681px) {
  .side, .rail { height: auto; overflow: visible; align-self: start; }
  .side { min-height: calc(100dvh - var(--top-h)); padding-bottom: calc(118px + var(--safe-b)); }
  .rail { padding-bottom: calc(118px + var(--safe-b)); }
  body.game-fs .side, body.game-fs .rail { padding-bottom: 18px; }
}

/* Keşfet · Kanal sıralaması */
.rank-by { margin: 2px 0 6px; }
.rank-note { margin: 4px 2px 10px; }
.ulist.rank .urow > .rk { flex: none; }
/* Kanal sayfası: Kule sahibinin kısa yolları */
.kule-strip { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; padding: 10px 12px; border-radius: 14px; border: 1px dashed var(--signal-line); background: var(--signal-soft); }
.kule-strip > span { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 750; color: var(--signal-ink); margin-right: 4px; }
.kule-strip > span svg { width: 16px; height: 16px; }
/* Ses sayfası: dinlenme sayısı kulaklıkla, sade */
.acts .act.listens svg { width: 17px; height: 17px; }

/* Ses sayfası eylemleri: masaüstünde adlar tek satır; mobilde üst sırada adlı beş ana eylem, altta dinlenme · sonra dinle · paylaş */
.acts > .act > .lbl { white-space: nowrap; }
/* Masaüstü: ana eylemler üst sırada eşit aralıklı, dinlenme · sonra dinle · paylaş alt sırada */
.acts { flex-wrap: wrap; }
.acts > .act { flex: 1 1 auto; justify-content: center; padding: 0 8px; }
.acts .end { flex: 1 0 100%; margin: 6px 0 0; padding: 6px 0 0; border-top: 1px solid var(--line); }
.acts .end .act.listens { margin-right: auto; }
@media (max-width: 680px) {
  .acts { flex-wrap: wrap; align-items: flex-start; gap: 0; margin: 10px -4px -4px; }
  .acts > .act { flex: 1 1 0; min-width: 0; height: auto; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; align-content: flex-start; column-gap: 4px; row-gap: 5px; padding: 7px 2px 6px; }
  .acts > .act > svg { order: 0; width: 21px; height: 21px; }
  .acts > .act > .n { order: 1; font-size: 12.5px; }
  .acts > .act > .lbl { order: 2; flex: 0 0 100%; display: block; font-size: 10.5px; line-height: 1.25; text-align: center; white-space: normal; text-wrap: balance; }
  .acts > .act > .lbl .sep { display: block; height: 0; overflow: hidden; }
  .acts .end { padding: 6px 2px 0; }
  .acts .end .act { height: 34px; padding: 0 8px; }
}
.acts .act.crk.on { color: var(--danger); }
.acts .act.lif.on { color: var(--mint); }
.acts .act.off { opacity: .45; }
/* Stüdyo: Boşlukları sil · Yeniden kaydet */
.rec-tools { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.rec-tools .btn.on { color: var(--signal-ink); border-color: var(--signal-line); background: var(--signal-soft); }
/* Yeni paylaşılan ses akışta kısa bir parıltıyla belirir */
.feed > .clip.fresh { animation: freshIn 1.6s var(--ease); }
@keyframes freshIn { 0% { box-shadow: 0 0 0 2px var(--signal-line); transform: translateY(-6px); opacity: .4; } 25% { transform: none; opacity: 1; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* ===================== Web oynatıcı: derli toplu ama ferah kapsül (en fazla 1040 px, sayfanın ortasında) ===================== */
@media (min-width: 681px) {
  .wcap { height: 84px; gap: 16px; padding: 0 12px 0 14px; border-radius: 28px; }
  .wc-now { flex: 0 1 230px; gap: 11px; }
  .wc-art .print { --p: 50px !important; }
  .wc-meta { gap: 3px; }
  .wc-t { font-size: 15px; }
  .wc-s { font-size: 12.5px; }
  /* Kontroller üstte, süre ve dalga altta: aralarında belirgin boşluk, iç içe geçmez */
  .wc-mid { flex: 1 1 340px; gap: 8px; }
  .wc-ctrls { gap: 4px; }
  .wc-ib { width: 34px; height: 34px; border-radius: 11px; }
  .wc-ib svg { width: 18px; height: 18px; }
  .wc-pp { width: 40px; height: 40px; margin: 0 6px; }
  .wc-pp svg { width: 19px; height: 19px; }
  .wc-prog { gap: 12px; font-size: 11.5px; line-height: 1; }
  .wc-prog span { min-width: 30px; }
  .wf { height: 18px; }
  .wc-side { gap: 4px; }
  .wc-src { height: 32px; padding: 0 10px 0 9px; border-radius: 11px; font-size: 12.5px; }
  .wc-chip { height: 32px; min-width: 42px; padding: 0 9px; font-size: 12.5px; }
  .wc-acts { gap: 8px; padding-left: 14px; }
  .wc-mail { height: 48px; padding: 0 14px 0 12px; border-radius: 16px; font-size: 13.5px; gap: 7px; }
  .wc-mail svg { width: 19px; height: 19px; }
  .wc-rec { height: 50px; padding: 0 18px 0 9px; border-radius: 18px; font-size: 15px; gap: 5px; }
  .wc-rec .lmic { width: 34px; height: 34px; }
  .side, .rail { padding-bottom: calc(112px + var(--safe-b)) !important; }
  .main { padding-bottom: 130px !important; }
  /* Daraldıkça önce hız/ses, sonra yazılar sadeleşir */
  @container (max-width: 980px) { .wc-side { display: flex; } .wc-now { flex-basis: 220px; } }
  @container (max-width: 820px) { .wc-mail span { display: inline; } .wc-mail { padding: 0 14px 0 12px; } }
  @container (max-width: 900px) { .wc-side { display: none; } }
  @container (max-width: 780px) { .wc-mail span { display: none; } .wc-mail { padding: 0 13px; } .wc-now { flex-basis: 170px; } }
  @container (max-width: 640px) { .wc-meta { display: none; } .wc-now { flex: none; } .wc-prog span { display: none; } }
}

/* Sıralama listeleri (Kanal, Gündem): ekrana girerken sırayla beliren satırlar, ilk üçe madalya renkleri */
.ulist.rank .urow { transition: background .2s, transform .25s var(--ease); }
.ulist.rank .urow:hover { transform: translateX(3px); }
.ulist.rank .urow.rv { opacity: 0; transform: translateY(22px) scale(.97); }
.ulist.rank .urow.rv.in { opacity: 1; transform: none; transition: opacity .55s var(--ease) var(--d, 0ms), transform .7s cubic-bezier(.16, 1, .3, 1) var(--d, 0ms); }
.ulist.rank .urow.rv.in .rk { animation: rkPop .6s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: calc(var(--d, 0ms) + 140ms); }
@keyframes rkPop { from { opacity: 0; transform: scale(.3) rotate(-12deg); } }
.ulist.rank > .urow:nth-child(-n+3) { background: linear-gradient(90deg, color-mix(in srgb, var(--mc) 9%, transparent), transparent 55%); }
.ulist.rank > .urow:nth-child(1) { --mc: #F5C542; }
.ulist.rank > .urow:nth-child(2) { --mc: #B9C4D3; }
.ulist.rank > .urow:nth-child(3) { --mc: #D98E57; }
.ulist.rank > .urow:nth-child(-n+3) .rk { color: transparent; background: linear-gradient(160deg, color-mix(in srgb, var(--mc) 55%, #fff) 0%, var(--mc) 45%, color-mix(in srgb, var(--mc) 70%, #000) 100%); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--mc) 35%, transparent)); }
.ulist.rank > .urow:nth-child(-n+3):hover { background: linear-gradient(90deg, color-mix(in srgb, var(--mc) 14%, transparent), color-mix(in srgb, var(--text) 3%, transparent) 70%); }
@media (prefers-reduced-motion: reduce) { .ulist.rank .urow.rv { opacity: 1; transform: none; } .ulist.rank .urow:hover { transform: none; } }

/* Akışta yanıt alanı: ses kartının altında, metinle aynı hizada ince bir "sesli yanıt" satırı */
.sm-rep { display: flex; align-items: center; gap: 10px; margin: 10px 0 0 calc(64px + 13px); padding-top: 10px; border-top: 1px solid var(--line); }
.sm-rep-in { flex: 1; min-width: 0; height: 38px; display: flex; align-items: center; gap: 9px; padding: 0 4px 0 5px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font: 500 13.5px var(--f-body); text-align: left; box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 5%, transparent) inset; transition: background .2s, color .2s, box-shadow .2s; }
.sm-rep-in .av { flex: none; }
.sm-rep-in .ph { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-rep-ic { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%; color: var(--faint); }
.sm-rep-ic svg { width: 16px; height: 16px; }
.sm-rep-mic { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--signal); color: var(--on-signal); box-shadow: 0 6px 14px -8px color-mix(in srgb, var(--signal) 90%, transparent); transition: transform .2s var(--ease); }
.sm-rep-mic svg { width: 16px; height: 16px; }
.sm-rep-in:hover { background: var(--surface-3, var(--surface-2)); color: var(--text-2); box-shadow: 0 0 0 1px color-mix(in srgb, var(--signal) 35%, transparent) inset; }
.sm-rep-in:hover .sm-rep-mic { transform: scale(1.08); }
.sm-rep-in:active { transform: scale(.985); }
.sm-rep-off { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 7px; height: 38px; font-size: 13px; color: var(--faint); }
.sm-rep-off svg { width: 15px; height: 15px; }
/* Sese git: kartın sağ altında sade bir bağlantı */
.sm-go { flex: none; height: 38px; display: inline-flex; align-items: center; gap: 6px; padding: 0 8px 0 12px; border-radius: 999px; font-size: 13px; font-weight: 650; color: var(--text-2); white-space: nowrap; transition: background .2s, color .2s; }
.sm-go > svg { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.sm-go:hover { color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); }
.sm-go:hover > svg { transform: translateX(2px); }
.sm-go-n { display: inline-flex; align-items: center; gap: 3px; padding: 0 6px; height: 20px; border-radius: 6px; font-size: 11.5px; color: var(--muted); background: color-mix(in srgb, var(--text) 6%, transparent); }
.sm-go-n svg { width: 12px; height: 12px; }
@media (max-width: 680px) {
  .sm-rep { margin: 8px 0 0 calc(54px + 11px); padding-top: 8px; gap: 8px; }
  .sm-rep-in { height: 36px; font-size: 13px; }
  .sm-rep-mic { width: 28px; height: 28px; }
  .sm-go { height: 36px; padding: 0 4px 0 8px; font-size: 12.5px; gap: 4px; }
}
@media (max-width: 380px) { .sm-rep { margin-left: 0; } }

/* ===================== LAGOR statik ses (yazıdan üretilen ses) ===================== */
.in-seg { margin: 4px 0 12px; }
.in-seg button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.in-seg button svg { width: 17px; height: 17px; }
/* Damga: kesik kenarlı, hafif çizgili zemin, LAGOR işareti; pul gibi */
.tts-seal { --sc: var(--signal); display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px 0 4px; border-radius: 8px; flex: none; white-space: nowrap;
  font: 750 10.5px/1 var(--f-body); letter-spacing: .07em; text-transform: uppercase; color: var(--text-2);
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--sc) 12%, transparent) 0 5px, color-mix(in srgb, var(--sc) 5%, transparent) 5px 10px);
  border: 1px dashed color-mix(in srgb, var(--sc) 60%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--sc) 7%, transparent); }
.tts-seal .mark { width: 16px; height: 16px; flex: none; border-radius: 5px; }
.tts-seal b { font-weight: 850; color: var(--signal-ink); letter-spacing: .09em; }
[data-theme="dark"] .tts-seal b { color: var(--signal); }
.tts-seal.mini { height: 19px; gap: 4px; padding: 0 6px 0 3px; border-radius: 6px; font-size: 9.5px; box-shadow: none; }
.tts-seal.mini .mark { width: 13px; height: 13px; border-radius: 4px; }
.sm-who .tts-seal.mini { margin-left: 2px; }
.vc-sub .tts-seal { margin-right: 2px; }
/* Stüdyo: yazı sahnesi */
.tts-stage { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.tts-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tts-text { min-height: 112px; resize: vertical; font-size: 15.5px; line-height: 1.5; padding-top: 12px; }
.tts-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tts-foot .btn svg { width: 18px; height: 18px; }
.tts-note { display: flex; align-items: flex-start; gap: 7px; line-height: 1.45; }
.tts-note svg { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.tts-prog { margin: 0; }
.tts-prog i { transition: width .25s linear; }
.tts-made { width: 100%; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* Özet kartı: öğeler arasında nefes payı; statik ses damgası başlığın altında kendi satırında */
.sm-title { display: block; min-width: 0; }
.sm-tt { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-body { gap: 7px; padding: 3px 0; }
.sm-seal { display: flex; margin: 1px 0; }
.sm-seal .tts-seal.mini { margin: 0; }
.sm-rep { margin-top: 12px; padding-top: 12px; }
@media (max-width: 680px) {
  .sm-body { gap: 6px; }
  .sm-rep { margin-top: 10px; padding-top: 10px; }
}
/* Web: yanıt alanı gereğinden uzun olmasın; "Sese git" sağda kalır */
@media (min-width: 681px) {
  .sm-rep { justify-content: space-between; }
  .sm-rep-in { flex: 0 1 370px; }
  .sm-rep-off { flex: 0 1 auto; }
}

/* ===================== Mobil: yakınlaştırma ve yana kayma olmasın ===================== */
/* Çift dokunuşta yakınlaşma yok; sayfa yana kaymaz */
html { touch-action: manipulation; overscroll-behavior-x: none; }
html, body { max-width: 100%; }
body { overflow-x: clip; }
@supports not (overflow: clip) { body { overflow-x: hidden; } }
/* iPhone, 16 px'ten küçük yazı alanına dokununca sayfayı kendiliğinden büyütür: mobilde alanlar 16 px */
@media (max-width: 680px) {
  input, textarea, select, .input, .textarea, .select, .tts-text, .hdr-search input { font-size: 16px !important; }
}
/* Profil başı: dar telefonda resim küçülür, düğmeler sığmazsa alt satıra iner */
.prof-top > .row { flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
@media (max-width: 380px) {
  .prof-top .av.xl { --s: 84px; }
  .prof-top { gap: 8px; }
  .prof-top > .row { gap: 4px !important; }
  .prof-top .ibtn { width: 36px; height: 36px; }
  .prof-top .btn { padding: 0 13px; }
}
/* Statik ses: erkek / kadın seçimi */
.tts-voice { display: flex; align-items: center; gap: 12px; }
.tts-voice-l { font-size: 13px; font-weight: 650; color: var(--muted); }
.tts-voice .seg { flex: 0 1 240px; }
.tts-voice .seg button { flex: 1; display: inline-flex; align-items: center; justify-content: center; }

/* Akış: "yeni sesler var" şeridi (X'teki gibi): başlığın altında yapışık durur, yer kaplamaz */
.newbar { position: sticky; top: calc(var(--top-h) + 10px); z-index: 30; height: 0; display: flex; justify-content: center; pointer-events: none; }
.newbar[hidden] { display: none; }
.newbar-btn { pointer-events: auto; height: 36px; margin-top: 2px; padding: 0 14px 0 10px; display: inline-flex; align-items: center; gap: 8px; border-radius: 999px;
  background: var(--sky); color: #04121f; font: 750 13.5px var(--f-body); white-space: nowrap;
  box-shadow: 0 10px 26px -10px rgba(0, 0, 0, .6), 0 0 0 1px color-mix(in srgb, #fff 22%, transparent) inset;
  animation: nbIn .38s var(--ease) both; transition: transform .15s; }
.newbar-btn:hover { transform: translateY(-1px); }
.newbar-btn:active { transform: scale(.97); }
.newbar-btn .nb-up { width: 16px; height: 16px; transform: rotate(180deg); }
.nb-av { display: inline-flex; padding-left: 6px; }
.nb-av .av { margin-left: -6px; box-shadow: 0 0 0 2px var(--sky); }
@keyframes nbIn { from { opacity: 0; transform: translateY(-10px) scale(.96); } }
@media (prefers-reduced-motion: reduce) { .newbar-btn { animation: none; } }

/* ===================== Sol menü: sayfa kaydıkça yerinde sabit durur ===================== */
@media (min-width: 681px) {
  .side { position: sticky; top: calc(var(--top-h) + 1px) !important; height: calc(100dvh - var(--top-h)); min-height: 0; overflow-y: auto; overscroll-behavior: contain; align-self: start; padding-bottom: calc(112px + var(--safe-b)); }
  body.game-fs .side { padding-bottom: 18px; }
}
/* Sol menü ekran yüksekliğine göre nefes alır: satır yüksekliği ekrana göre ayarlanır (en az 36, en çok 46 px),
   üstte başlıktan, altta oynatıcıdan rahat bir boşluk kalır; imza her zaman görünür */
@media (min-width: 681px) {
  .side { padding-top: 16px; gap: 4px; }
  .nav { gap: 2px; }
  .nav a { height: clamp(36px, calc((100dvh - 372px) / 10), 46px); }
}
@media (min-width: 681px) and (max-height: 900px) {
  .nav a { font-size: 15px; }
  .nav a svg { width: 20px; height: 20px; }
  .nav a.on::before { top: 25%; bottom: 25%; }
  .side .me-chip { padding: 8px 10px; }
  .side .me-chip .av { --s: 36px; }
  .side-foot { padding-top: 10px; font-size: 12px; gap: 2px 10px; line-height: 1.45; }
  .side-foot .sig { margin-top: 3px; }
}
@media (min-width: 681px) and (max-height: 720px) {
  .side { padding-top: 10px; }
  .nav { gap: 1px; }
}

/* ===================== Ses menüsü (⋯): hızlı eylem kutucukları + kısa liste ===================== */
.cm-pop { width: 296px; padding: 8px; scrollbar-width: thin; }
.cmenu { display: flex; flex-direction: column; gap: 6px; }
.cm-quick { display: grid; grid-template-columns: repeat(min(var(--n), 5), minmax(0, 1fr)); gap: 4px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.cm-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 62px; padding: 8px 2px; border-radius: 12px; color: var(--text-2); font-size: 11.5px; font-weight: 650; line-height: 1.15; text-align: center; transition: background .15s, color .15s, transform .1s; }
.cm-tile svg { width: 21px; height: 21px; color: var(--muted); transition: color .15s; }
.cm-tile:hover { background: var(--surface-2); color: var(--text); }
.cm-tile:hover svg { color: var(--text); }
.cm-tile:active { transform: scale(.95); }
.cm-tile.on, .cm-tile.on svg { color: var(--signal-ink); }
[data-theme="dark"] .cm-tile.on, [data-theme="dark"] .cm-tile.on svg { color: var(--signal); }
.cm-tile.crk:hover svg { color: var(--danger); }
.cm-tile.lif:hover svg { color: var(--mint); }
.cm-list { display: flex; flex-direction: column; }
.cm-row { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 10px; border-radius: 10px; font-size: 14px; font-weight: 500; color: var(--text-2); text-align: left; transition: background .15s, color .15s; }
.cm-row svg { width: 18px; height: 18px; color: var(--muted); flex: none; }
.cm-row:hover { background: var(--surface-2); color: var(--text); }
.cm-row.danger, .cm-row.danger svg { color: var(--live); }
.cm-sec { display: flex; align-items: center; gap: 6px; margin-top: 2px; padding: 8px 10px 4px; border-top: 1px solid var(--line); font-size: 11px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.cm-sec svg { width: 13px; height: 13px; }
.cm-end { border-top: 1px solid var(--line); padding-top: 6px; }
/* Telefonda alttan açılan sayfa: büyük dokunma alanları */
.cm-sheet .sheet-b { padding-top: 4px; }
.cm-sheet .cm-quick { gap: 6px; padding-bottom: 12px; }
.cm-sheet .cm-tile { min-height: 74px; font-size: 12px; background: var(--surface-2); border-radius: 14px; }
.cm-sheet .cm-tile svg { width: 23px; height: 23px; }
.cm-sheet .cm-row { height: 50px; font-size: 15.5px; gap: 14px; }
.cm-sheet .cm-row svg { width: 20px; height: 20px; }
@media (max-height: 660px) { .cm-sheet .cm-row { height: 44px; } .cm-sheet .cm-tile { min-height: 64px; } }

/* iPhone: iOS saat çubuğunun altına kendi buğulu kenar efektini çiziyor. Logo satırı bu buğunun bir tık altında,
   düz ve opak zeminde başlar; çubuk Safari'de de aynı renge boyanır, buğu satıra değmez. */
@media (max-width: 680px) {
  html.ios { --safe-t: calc(env(safe-area-inset-top, 0px) * 1.25 + 10px); }
  html.ios .topwrap { background: var(--bg); box-shadow: none; }
  html.ios .topwrap.scrolled { box-shadow: 0 10px 24px -20px rgba(0, 0, 0, .55); }
  [data-theme="light"].ios .topwrap.scrolled { box-shadow: 0 10px 22px -20px rgba(10, 16, 32, .28); }
}

/* ===================== Menü kablosu: ⋯ menüsü hangi sese ait, tek bakışta ===================== */
:root { --cable: #FFD84D; --cable-dim: rgba(5, 9, 20, .58); }
[data-theme="light"] { --cable: #DFA200; --cable-dim: rgba(10, 16, 32, .42); }
.clip.cm-src { box-shadow: 0 0 0 2px var(--cable), 0 18px 40px -26px color-mix(in srgb, var(--cable) 75%, transparent); transition: box-shadow .2s var(--ease); }
.clip.cm-src .more[data-a="menu"] { background: color-mix(in srgb, var(--cable) 22%, transparent); color: var(--text); }
.cable { position: fixed; inset: 0; width: 100vw; height: 100dvh; z-index: 91; pointer-events: none; overflow: visible; }
.cable.off { display: none; }
.cable path { fill: none; stroke-linecap: round; }
.cable .cb-glow { stroke: var(--cable); stroke-width: 8; opacity: 0; animation: cbGlow .45s ease .22s forwards; }
.cable .cb-line { stroke: var(--cable); stroke-width: 2.25; stroke-dasharray: 1; stroke-dashoffset: 1; animation: cbDraw .3s var(--ease) .05s forwards; }
.cable .cb-pulse { stroke: color-mix(in srgb, #fff 82%, var(--cable)); stroke-width: 2.25; stroke-dasharray: .16 2; stroke-dashoffset: .16; opacity: 0; animation: cbPulse 1s ease-in-out .38s 1; }
.cable .cb-plug { fill: var(--cable); stroke: var(--surface); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: cbPlug .22s var(--ease) both; }
.cable .cb-plug.b { animation-delay: .3s; }
@keyframes cbDraw { to { stroke-dashoffset: 0; } }
@keyframes cbGlow { to { opacity: .16; } }
@keyframes cbPulse { 0% { stroke-dashoffset: .16; opacity: 1; } 100% { stroke-dashoffset: -1; opacity: 1; } }
@keyframes cbPlug { from { transform: scale(0); } }
@media (prefers-reduced-motion: reduce) {
  .cable .cb-line, .cable .cb-glow, .cable .cb-plug { animation: none; stroke-dashoffset: 0; }
  .cable .cb-glow { opacity: .16; }
  .cable .cb-pulse { display: none; }
}
/* Menünün başı: hangi sesin menüsü olduğu (ses izi + başlık + kanal) */
.cm-head { display: flex; align-items: center; gap: 11px; padding: 4px 4px 10px; border-bottom: 1px solid var(--line); margin-bottom: 2px; }
.cm-head .print { flex: none; }
.cm-hd { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.cm-hd b { font: 750 14.5px/1.25 var(--f-display); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-hd span { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-pop .cm-head { padding: 6px 6px 10px; }
/* Telefonda: sesin kartı karartmanın üstüne kalkar, sayfa onun altında */
.scrim.cm-sheet { background: var(--cable-dim); }
.cm-ghost { position: fixed !important; z-index: 1; margin: 0 !important; pointer-events: none; box-shadow: 0 0 0 2px var(--cable), 0 26px 50px -24px rgba(0, 0, 0, .6); transition: transform .3s var(--ease); animation: none !important; }
.cm-ghost.cut { overflow: hidden; }
.cm-sheet .sheet { position: relative; z-index: 1; }
.cm-sheet .cable { z-index: 2; position: fixed; }
.cm-sheet .sheet-b { padding-top: 14px; }
.cm-sheet .cm-head { padding: 0 0 12px; margin-bottom: 4px; }
.cm-sheet .cm-head .ibtn { margin-right: -6px; }
.cm-sheet .cm-hd b { font-size: 16px; }

/* ===================== YouTube eki: akışta kompakt şerit, dokununca kartın içinde oynatıcı ===================== */
.yt { margin: 12px 0 0 calc(64px + 13px); border-radius: 16px; }
.yt.on, .yt.big { overflow: hidden; }
.yt-face { display: flex; align-items: center; gap: 12px; width: 100%; padding: 6px 14px 6px 6px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-2); color: inherit; text-align: left; cursor: pointer; transition: background .15s, border-color .15s; }
.yt-face:hover { background: var(--surface-3); border-color: var(--line-2); }
.yt-face:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
.yt-th { position: relative; flex: none; display: block; width: 132px; aspect-ratio: 16 / 9; border-radius: 11px; overflow: hidden; background: #05070d; }
.yt-th img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--ease); }
.yt-face:hover .yt-th img { transform: scale(1.04); }
.yt-pl { position: absolute; inset: 0; margin: auto; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(8, 12, 24, .62); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .32), 0 6px 16px -6px rgba(0, 0, 0, .6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .18s, color .18s, transform .18s var(--ease); }
.yt-pl svg { width: 15px; height: 15px; margin-left: 2px; }
.yt-face:hover .yt-pl { background: var(--signal); color: var(--on-signal); box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .6); transform: scale(1.06); }
.yt-tx { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.yt-tx b { font: 700 14px/1.32 var(--f-body); color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.yt-by { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 12.5px; font-weight: 550; color: var(--muted); }
.yt-by > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yt-ico { width: 17px; height: 17px; flex: none; color: #FF3B3B; }
/* Ses sayfası: büyük önizleme */
.yt.big { margin: 16px 0 0; border-radius: 20px; }
.yt.big .yt-face { position: relative; display: block; padding: 0; border-radius: 20px; overflow: hidden; }
.yt.big .yt-th { width: 100%; border-radius: 0; }
.yt.big .yt-pl { width: 66px; height: 66px; }
.yt.big .yt-pl svg { width: 26px; height: 26px; margin-left: 4px; }
.yt.big .yt-tx { position: absolute; left: 0; right: 0; bottom: 0; padding: 64px 18px 16px; background: linear-gradient(to bottom, transparent, rgba(4, 7, 15, .6) 42%, rgba(4, 7, 15, .92)); text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.yt.big .yt-tx b { color: #fff; font-size: 16.5px; }
.yt.big .yt-by { color: rgba(255, 255, 255, .82); }
/* Açık oynatıcı: LAGOR şeridi üstte, YouTube oynatıcısı altında; oynatıcının üstüne hiçbir şey binmez */
.yt.on { border: 1px solid var(--line); background: var(--surface-2); border-radius: 18px; padding: 0 6px 6px; }
.yt-bar { display: flex; align-items: center; gap: 6px; height: 46px; padding: 0 6px 0 14px; }
.yt-bar .yt-by { flex: 1; }
.yt-ext { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 11px; border-radius: 10px; font-size: 12.5px; font-weight: 650; color: var(--text-2); white-space: nowrap; transition: background .15s, color .15s; }
.yt-ext:hover { background: var(--surface-3); color: var(--text); }
.yt-ext svg { width: 15px; height: 15px; }
.yt-fs { border: 0; background: none; cursor: pointer; font-family: inherit; }
.yt-fs svg { width: 16px; height: 16px; }
/* Oynatıcı kartın içinde ince bir çerçeveyle durur. Genişlik her zaman kutunun kendisi: en az yükseklik (200 px)
   en-boy oranı üzerinden genişliği büyütmesin, yoksa YouTube düğmeleri (tam ekran gibi) sağ kenarda kesilir. */
.yt-frame { position: relative; width: 100%; min-width: 0; max-width: 100%; aspect-ratio: 16 / 9; min-height: 200px; background: #000; border-radius: 12px; overflow: hidden; }
/* Tam ekran: LAGOR şeridi üstte (Küçült düğmesiyle), video kalan alanın tamamında; her temada koyu */
.yt.on:fullscreen { display: flex; flex-direction: column; width: 100%; height: 100%; padding: 0 12px 12px; border: 0; border-radius: 0; background: #05070d; color-scheme: dark; --text: #EEF2FF; --text-2: #D2D9EC; --muted: #9AA6C4; --surface-3: rgba(255, 255, 255, .09); }
.yt.on:fullscreen .yt-bar { flex: none; height: 56px; padding: 0 2px 0 6px; }
.yt.on:fullscreen .yt-x { display: none; }
.yt.on:fullscreen .yt-frame { flex: 1; width: 100%; min-height: 0; aspect-ratio: auto; margin: 0; }
.yt.on:-webkit-full-screen { display: flex; flex-direction: column; width: 100%; height: 100%; padding: 0 12px 12px; border: 0; border-radius: 0; background: #05070d; --text: #EEF2FF; --text-2: #D2D9EC; --muted: #9AA6C4; --surface-3: rgba(255, 255, 255, .09); }
.yt.on:-webkit-full-screen .yt-bar { flex: none; height: 56px; padding: 0 2px 0 6px; }
.yt.on:-webkit-full-screen .yt-x { display: none; }
.yt.on:-webkit-full-screen .yt-frame { flex: 1; width: 100%; min-height: 0; aspect-ratio: auto; margin: 0; }
.yt-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.yt.short.on { background: #000; }
.yt.short .yt-bar { background: var(--surface-2); }
.yt.short .yt-frame { aspect-ratio: 9 / 16; width: min(100%, calc(min(76vh, 640px) * 9 / 16)); margin: 0 auto; }
/* Stüdyo: eklenen video */
.yt-in { gap: 8px; }
.yt-pick { display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 6px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); }
.yt-pick img { flex: none; width: 104px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 9px; background: #05070d; }
.yt-pick .yt-tx b { font-size: 13.5px; }
@media (max-width: 680px) {
  .yt { margin: 10px 0 0 calc(54px + 11px); }
  .yt.on, .yt.big { margin-left: 0; }
  .yt-face { gap: 10px; padding: 5px 10px 5px 5px; border-radius: 14px; }
  .yt-th { width: 108px; border-radius: 9px; }
  .yt-pl { width: 32px; height: 32px; }
  .yt-tx { gap: 5px; }
  .yt-tx b { font-size: 13.5px; }
  .yt-by { font-size: 12px; }
  .yt-ext span { display: none; }
  .yt-ext { width: 36px; padding: 0; justify-content: center; }
  .yt-pick img { width: 88px; }
  .yt-pick [data-unyt] { width: 40px; padding: 0; justify-content: center; flex: none; }
  .yt-pick [data-unyt] span { display: none; }
}
@media (max-width: 380px) { .yt { margin-left: 0; } }
/* Tam ekranda "Küçült" her ekranda yazısıyla görünür */
.yt.on:fullscreen .yt-fs { width: auto; padding: 0 14px; background: rgba(255, 255, 255, .08); }
.yt.on:fullscreen .yt-fs span { display: inline; }
.yt.on:-webkit-full-screen .yt-fs { width: auto; padding: 0 14px; background: rgba(255, 255, 255, .08); }
.yt.on:-webkit-full-screen .yt-fs span { display: inline; }

/* ===================== Oynat düğmesi: ses izinin ortasında belirgin, dolu bir disk ===================== */
/* Koyu temada sesin renginden hafif bir tonla açık disk, açık temada koyu disk: her temada ses izinin
   renkli çubuklarından net ayrılır. Etrafındaki ince halka sesin rengini taşır. */
.print .play { width: 40%; height: 40%; background: color-mix(in srgb, var(--hue) 14%, #F3F6FD); color: #0A1020; box-shadow: 0 0 0 2px color-mix(in srgb, var(--hue) 50%, transparent), 0 6px 14px -6px color-mix(in srgb, var(--hue) 55%, #000); transition: transform .24s var(--ease), box-shadow .24s var(--ease), background .24s; }
[data-theme="light"] .print .play { background: color-mix(in srgb, var(--hue) 10%, #111A2E); color: #fff; box-shadow: 0 0 0 2px color-mix(in srgb, var(--hue) 75%, transparent), 0 6px 14px -6px rgba(10, 16, 32, .45); }
.print .play svg { width: 56%; height: 56%; position: relative; z-index: 1; }
.print:has(> .play) .core { opacity: 0; }
/* Akış kartı: ses izi biraz büyür, disk izin yarısına yakın */
.sm-row > .print { --p: 60px !important; }
.sm-row > .print .play { width: 46%; height: 46%; }
.vc .print .play, .clip:not(.sum):not(.slide) .print .play { width: 42%; height: 42%; }
@media (min-width: 681px) { .sm-row > .print { --p: 68px !important; } }
@media (max-width: 680px) { .sm-row > .print { --p: 58px !important; } }
/* Dinlenmiş sesler sakin: halka nötr, gölge yok. Yeni sesler sesin renginde halkayla öne çıkar. */
.clip.sum.heard:not(.playing) .print .play { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--text) 16%, transparent), 0 4px 10px -6px rgba(0, 0, 0, .5); }
[data-theme="light"] .clip.sum.heard:not(.playing) .print .play { box-shadow: 0 0 0 1.5px rgba(10, 16, 32, .14), 0 4px 10px -6px rgba(10, 16, 32, .35); }
/* Çalarken: diskin çevresinde ilerleme halkası (sesin renginde) */
.print .play::before { content: ''; position: absolute; inset: -4px; border-radius: 50%; opacity: 0; pointer-events: none; background: conic-gradient(var(--hue) calc(var(--pp, 0) * 360deg), color-mix(in srgb, var(--hue) 22%, transparent) 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.25px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.25px)); transition: opacity .3s; }
.playing .print .play::before { opacity: 1; }
.playing .print .play { box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--hue) 70%, #000); }
/* Dokunma ve üzerine gelme: kısa, yumuşak tepki */
.print:active .play { transform: translate(-50%, -50%) scale(.9); transition-duration: .1s; }
@media (hover: hover) {
  .print:hover .play { transform: translate(-50%, -50%) scale(1.09); }
  .print .pb { transition: opacity .3s; }
  .clip.sum:hover .print .pb:not(.on) { opacity: .62; }
  [data-theme="light"] .clip.sum:hover .print .pb:not(.on) { opacity: .5; }
}
/* İlk görünüş: tek bir sıçrama ve tek bir halka (sesin renginde), sonra sessiz */
.print .play::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--hue); opacity: 0; pointer-events: none; }
.print.wake .play { animation: playPop .8s var(--ease) var(--wd, 0ms) both; }
.print.wake .play::after { animation: playRing 1.4s cubic-bezier(.2, .7, .2, 1) calc(var(--wd, 0ms) + 120ms) both; }
.print.wake .pb { animation: pbGlow 1.2s ease var(--wd, 0ms) both; }
@keyframes playPop { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 38% { transform: translate(-50%, -50%) scale(1.14); } 70% { transform: translate(-50%, -50%) scale(.97); } }
@keyframes playRing { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(2.05); } }
@keyframes pbGlow { 0%, 100% { opacity: .4; } 45% { opacity: .78; } }
[data-theme="light"] .print.wake .pb { animation-name: pbGlowL; }
@keyframes pbGlowL { 0%, 100% { opacity: .32; } 45% { opacity: .6; } }
@media (prefers-reduced-motion: reduce) {
  .print.wake .play, .print.wake .play::after, .print.wake .pb { animation: none; }
}
/* Hafif tempo (yalnız dinlenmemiş, çalmayan, ekranda görünen seslerde): diskin çevresinden yavaşça büyüyüp
   sönen tek bir halka; aralarda uzun bir sessizlik. Disk yerinde durur, yalnız halka hareket eder. */
.clip.sum:not(.heard):not(.playing) .print.vis:not(.wake) .play::after { animation: playBeat 3.6s cubic-bezier(.22, .61, .36, 1) var(--beat, 0ms) infinite; }
@keyframes playBeat { 0% { opacity: 0; transform: scale(1); } 7% { opacity: .5; } 52% { opacity: 0; transform: scale(1.8); } 100% { opacity: 0; transform: scale(1.8); } }
[data-theme="light"] .print .play::after { border-color: color-mix(in srgb, var(--hue) 80%, #0A1020); }
@media (prefers-reduced-motion: reduce) { .clip.sum .print.vis .play::after { animation: none !important; } }

/* ===================== Mobil oynatıcı: gizleme sekmesi ve aşağı kaydırarak gizleme ===================== */
.mc-hide { display: none; }
@media (max-width: 680px) {
  .mcap { overflow: visible; touch-action: none; }
  .mcap.drag { transition: none; }
  /* Kapsülün üst kenarından çıkan küçük sekme: dokun ya da kapsülü aşağı kaydır */
  .mc-hide { position: absolute; top: -13px; left: 50%; z-index: 2; display: grid; place-items: center; width: 46px; height: 20px; margin-left: -23px; padding: 0; border-radius: 10px; color: var(--muted); background: var(--surface); box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 10%, transparent) inset, 0 6px 14px -8px rgba(0, 0, 0, .6); transition: color .18s, transform .18s var(--ease); }
  [data-theme="light"] .mc-hide { background: #fff; box-shadow: 0 0 0 1px rgba(10, 16, 32, .08) inset, 0 6px 14px -8px rgba(10, 16, 32, .35); }
  .mc-hide svg { width: 16px; height: 16px; stroke-width: 2.2; }
  .mc-hide::before { content: ''; position: absolute; inset: -10px -8px -4px; }
  .mc-hide:active { transform: translateY(2px) scale(.94); color: var(--text); }
  .mcap.show .mc-hide { animation: mcTab .5s var(--ease) .25s both; }
  @keyframes mcTab { from { opacity: 0; transform: translateY(6px); } }
}
@media (max-width: 680px) and (prefers-reduced-motion: reduce) { .mcap.show .mc-hide { animation: none; } }

/* ===================== Yanıt şeridi: daha rahat mikrofon ve belirgin "Sese git" ===================== */
.sm-rep-in { height: 42px; padding: 0 5px 0 6px; }
.sm-rep-mic { position: relative; width: 34px; height: 34px; }
.sm-rep-mic > svg { width: 18px; height: 18px; transform-origin: 50% 50%; }
/* "Sese git": yanıt alanıyla aynı dilde bir hap düğme; ok küçük bir dairede */
.sm-go { height: 42px; gap: 7px; padding: 0 6px 0 15px; font: 700 13.5px/1 var(--f-body); color: var(--text); background: var(--surface-2); box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 6%, transparent) inset; transition: background .2s, box-shadow .2s, color .2s; }
.sm-go-ar { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%; color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); transition: transform .2s var(--ease), background .2s, color .2s; }
.sm-go-ar svg { width: 16px; height: 16px; }
.sm-go:hover { color: var(--text); background: var(--surface-3, var(--surface-2)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--signal) 40%, transparent) inset; }
.sm-go:hover .sm-go-ar { transform: translateX(2px); background: var(--signal); color: var(--on-signal); }
.sm-go:active { transform: scale(.97); }
.sm-go-n { height: 22px; }
/* Yanıt daveti (tek kart, anlamlı anda): yanıt alanının içinden yumuşak bir ışık süzülür, kenarı sarıyla
   belirir, mikrofon hafifçe büyüyüp parlar ve "Sesli yanıt bırak" yazısı netleşir. Sonra her şey sakinleşir. */
.sm-rep-in { position: relative; isolation: isolate; }
.sm-rep-in::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, transparent 0 36%, color-mix(in srgb, var(--signal) 10%, transparent) 43%, color-mix(in srgb, var(--signal) 30%, transparent) 50%, color-mix(in srgb, var(--signal) 10%, transparent) 57%, transparent 64% 100%) no-repeat;
  background-size: 260% 100%; background-position: 100% 0; }
.sm-rep-in::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--signal) 70%, transparent) inset, 0 10px 24px -14px color-mix(in srgb, var(--signal) 80%, transparent); }
[data-theme="light"] .sm-rep-in::before { background-image: linear-gradient(100deg, transparent 0 38%, color-mix(in srgb, var(--signal) 26%, transparent) 45%, color-mix(in srgb, var(--signal) 42%, #fff) 50%, color-mix(in srgb, var(--signal) 26%, transparent) 55%, transparent 62% 100%); }
.sm-rep-in.invite::before { animation: repSheen 1.5s cubic-bezier(.45, .05, .25, 1) .1s both; }
.sm-rep-in.invite::after { animation: repEdge 2s ease both; }
.sm-rep-in.invite .ph { animation: repText 2s ease both; }
.sm-rep-in.invite .sm-rep-mic { animation: repMic 1.9s cubic-bezier(.3, .7, .3, 1) .15s both; }
@keyframes repSheen { 0% { opacity: 1; background-position: 100% 0; } 90% { opacity: 1; } 100% { opacity: 0; background-position: 0% 0; } }
@keyframes repEdge { 0%, 100% { opacity: 0; } 25%, 60% { opacity: 1; } }
@keyframes repText { 0%, 100% { color: inherit; } 25%, 60% { color: var(--text); } }
@keyframes repMic { 0%, 100% { transform: scale(1); box-shadow: 0 6px 14px -8px color-mix(in srgb, var(--signal) 90%, transparent); } 30% { transform: scale(1.12); box-shadow: 0 0 0 5px color-mix(in srgb, var(--signal) 24%, transparent), 0 8px 18px -8px var(--signal); } 55% { transform: scale(1.04); box-shadow: 0 0 0 8px color-mix(in srgb, var(--signal) 0%, transparent), 0 8px 18px -10px var(--signal); } }
@media (prefers-reduced-motion: reduce) { .sm-rep-in.invite::before, .sm-rep-in.invite::after, .sm-rep-in.invite .ph, .sm-rep-in.invite .sm-rep-mic { animation: none; } }
@media (max-width: 680px) {
  /* Telefonda yanıt şeridi kartın tam genişliğinde: alan rahat, yazı kesilmez */
  .sm-rep { margin-left: 0; padding-top: 10px; gap: 8px; }
  .sm-rep-in { height: 42px; font-size: 13.5px; }
  .sm-rep-mic { width: 34px; height: 34px; }
  .sm-go { height: 42px; padding: 0 6px 0 13px; gap: 6px; font-size: 13.5px; }
}
@media (max-width: 360px) {
  .sm-rep-in > .av, .sm-rep-in > .sm-rep-ic { display: none; }
  .sm-rep-in { padding-left: 14px; font-size: 13px; }
  .sm-go { padding-left: 12px; font-size: 13px; }
}

/* ===================== Okunaklı akış: kart yazıları ve sekmeler bir kademe büyür ===================== */
/* Kart: kim · ne zaman bir tık büyük ve net; başlık belirgin; alt satır okunur. Kalan ömür (LAGOR'un 24 saat
   kuralı) sade, nötr renkli küçük bir hap içinde öne çıkar. */
.sm-who { font-size: 14px; gap: 6px; color: var(--muted); }
.sm-who b { font-size: 14.5px; font-weight: 750; color: var(--text); letter-spacing: -.005em; }
.sm-who .av { --s: 24px; }
.sm-who .sm-dot { opacity: .7; }
.sm-title { font-size: 18.5px; line-height: 1.24; letter-spacing: -.012em; }
.sm-title .sm-q { width: 16px; height: 16px; }
.sm-meta { gap: 14px; font-size: 13.5px; font-weight: 650; color: color-mix(in srgb, var(--muted) 78%, var(--faint)); }
.sm-meta > span { gap: 5px; }
.sm-meta svg { width: 16px; height: 16px; }
.sm-meta .sm-life .life { gap: 7px; padding: 4px 10px 4px 9px; border-radius: 999px; font-size: 13px; font-weight: 750; color: var(--text-2); background: color-mix(in srgb, var(--text) 7%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 8%, transparent) inset; }
[data-theme="light"] .sm-meta .sm-life .life { background: rgba(10, 16, 32, .05); box-shadow: 0 0 0 1px rgba(10, 16, 32, .08) inset; color: var(--text); }
.sm-meta .sm-life .life.low { color: var(--danger, #ff6b6b); }
.sm-meta .life-seg i { width: 8px; height: 4px; }
.sm-body { gap: 7px; }
@media (max-width: 680px) {
  .sm-who { font-size: 13.5px; gap: 5px; }
  .sm-who b { font-size: 14.5px; }
  .sm-who .av { --s: 23px; }
  .sm-title { font-size: 17px; }
  .sm-meta { gap: 11px; font-size: 13px; }
  .sm-meta svg { width: 15px; height: 15px; }
  .sm-meta .sm-life .life { padding: 3px 9px; font-size: 12.5px; }
  /* Yanıt sayısı "Sese git" düğmesinde zaten yazıyor: telefonda alt satır sade kalsın, kesilmesin */
  .sm-meta .sm-rp { display: none; }
  .sm-body { gap: 6px; }
}
@media (max-width: 360px) {
  /* Küçük ekran: ad kesilmesin diye "Yeni" etiketi gizlenir (yeni sesler zaten oynat düğmesiyle belli olur) */
  .sm-who .stamp.new { display: none; }
  .sm-who b { font-size: 14px; }
  .sm-title { font-size: 16px; }
  .sm-meta { gap: 8px; font-size: 12.5px; }
  .sm-meta svg { width: 14px; height: 14px; }
  .sm-meta > span { gap: 4px; }
  .sm-meta .sm-life .life { padding: 2px 8px; font-size: 12px; }
  .sm-row { gap: 9px; }
  .sm-row > .ibtn.more { width: 32px; min-width: 32px; margin-right: -4px; }
  /* Sığmayan bilgi kesilmesin: alt satır gerekirse ikinci satıra iner */
  .sm-meta { flex-wrap: wrap; row-gap: 6px; overflow: visible; white-space: normal; }
}

/* Sekmeler: daha büyük, rahat dokunulan haplar. Seçili sekmenin altında LAGOR sarısıyla küçük bir çizgi kayar. */
.seg.feed-seg, .phead-tools .seg { padding: 5px; gap: 4px; border-radius: 16px; }
.seg.feed-seg > button, .phead-tools .seg > button { height: 42px; padding: 0 17px; border-radius: 12px; font-size: 15px; font-weight: 650; letter-spacing: -.005em; }
.seg.feed-seg > .on, .phead-tools .seg > .on { font-weight: 750; color: var(--text); }
.seg.feed-seg > .ind-seg, .phead-tools .seg > .ind-seg { border-radius: 12px; }
.seg.feed-seg > .ind-seg::after, .phead-tools .seg > .ind-seg::after { content: ''; position: absolute; left: 50%; bottom: 5px; width: 18px; height: 3px; margin-left: -9px; border-radius: 3px; background: var(--signal); box-shadow: 0 0 10px -1px color-mix(in srgb, var(--signal) 70%, transparent); }
[data-theme="light"] .seg.feed-seg > .ind-seg::after, [data-theme="light"] .phead-tools .seg > .ind-seg::after { background: #E3A800; box-shadow: none; }
@media (max-width: 680px) {
  .seg.feed-seg { gap: 2px; padding: 4px; border-radius: 15px; }
  .seg.feed-seg > button { height: 42px; padding: 0 6px; font-size: 15px; border-radius: 11px; }
  .seg.feed-seg > .ind-seg { border-radius: 11px; }
  .fbar .seg.feed-seg > button { height: 40px; padding: 0 5px; font-size: 14.5px; }
  .phead-tools .seg > button { height: 40px; padding: 0 14px; font-size: 14.5px; }
}
@media (max-width: 380px) {
  .seg.feed-seg > button, .fbar .seg.feed-seg > button { padding: 0 4px; font-size: 14px; letter-spacing: -.01em; }
}
@media (max-width: 345px) {
  .seg.feed-seg > button, .fbar .seg.feed-seg > button { padding: 0 2px; font-size: 13px; }
}


/* ===================== Fotoğraflarda LAGOR damgası: her görünümde ===================== */
/* Akış önizlemesi: fotoğrafın köşesinde küçük LAGOR logosu (asıl mühür dosyaya basılıdır) */
.sm-ph { position: relative; display: block; flex: none; width: 52px; height: 52px; border-radius: 13px; overflow: hidden; background: var(--surface-2); box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 8%, transparent); }
.sm-ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ph-mark { position: absolute; right: 3px; bottom: 3px; width: 16px; height: 16px; display: block; border-radius: 5px; box-shadow: 0 2px 6px rgba(0, 0, 0, .45); pointer-events: none; }
.ph-mark .mark { display: block; width: 100%; height: 100%; }
.ph-mark .mark .m-bg { fill: #FFD84D; }
.ph-mark .mark .m-line { stroke: #0A1020; }
.slide-thumb-w { position: relative; display: inline-block; line-height: 0; }
.slide-thumb-w .ph-mark { right: 5px; bottom: 5px; }
/* Ses sayfası: fotoğraf hiç kırpılmaz (köşedeki mühür hep görünür); boş kalan yan alanı fotoğrafın bulanık hâli doldurur */
.photo { position: relative; isolation: isolate; display: grid; place-items: center; max-height: none; background: #05070d; }
.photo::before { content: ''; position: absolute; inset: -40px; z-index: -1; background: var(--ph) center / cover no-repeat; filter: blur(28px) saturate(1.15) brightness(.62); }
.photo img { display: block; width: auto; height: auto; max-width: 100%; max-height: min(560px, 72vh); object-fit: contain; }
@media (max-width: 680px) {
  .sm-ph { width: 50px; height: 50px; border-radius: 12px; }
  /* Fotoğraflı kartta isme yer kalsın: "Yeni" etiketi gizlenir, isim kesilmeden önce önceliklidir */
  .sm-row:has(> .sm-ph) .sm-who .stamp.new { display: none; }
}

/* ===================== Ses sayfası eylemleri (telefon): rahat dokunulan simge kutuları ===================== */
/* Her eylem sakin, nötr bir kutu içinde (46 px): parmağa uygun, yan yana altı eylem tek sırada sığar.
   Ad kutunun altında okunur boyutta; sayı kutunun köşesinde küçük bir rozet. Seçili eylemde yalnız simge ve
   kutunun ince çerçevesi eylemin rengini alır; zemin her zaman nötr kalır (tepki kırmızı; yeniden, boost sarı;
   çatlat kırmızı; hayat yeşil). */
@media (max-width: 680px) {
  .clip[data-v="full"] .acts { margin: 16px -2px 0; gap: 0; row-gap: 0; align-items: flex-start; }
  .clip[data-v="full"] .acts > .act { position: relative; flex: 1 1 0; min-width: 0; height: auto; padding: 2px 0 4px; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 7px; background: none; border-radius: 16px; color: var(--text-2); -webkit-tap-highlight-color: transparent; }
  .clip[data-v="full"] .acts > .act:hover { background: none; }
  .clip[data-v="full"] .acts > .act:active { transform: none; }
  .clip[data-v="full"] .acts > .act > svg { order: 0; box-sizing: border-box; width: 46px; height: 46px; padding: 12px; border-radius: 15px; background: var(--surface-2); box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 6%, transparent) inset; transition: transform .16s var(--ease), background .2s, box-shadow .2s; }
  [data-theme="light"] .clip[data-v="full"] .acts > .act > svg { background: #F2F4F9; box-shadow: 0 0 0 1px rgba(10, 16, 32, .06) inset; }
  .clip[data-v="full"] .acts > .act:active > svg { transform: scale(.9); background: var(--surface-3, var(--surface-2)); }
  .clip[data-v="full"] .acts > .act > .lbl { order: 1; flex: none; display: block; max-width: 100%; font-size: 12px; font-weight: 650; line-height: 1.2; letter-spacing: -.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
  .clip[data-v="full"] .acts > .act > .n { position: absolute; top: -5px; left: calc(50% + 12px); order: 2; min-width: 19px; height: 19px; padding: 0 5px; display: grid; place-items: center; border-radius: 10px; font-size: 11px; font-weight: 800; line-height: 1; color: var(--text); background: var(--surface); box-shadow: 0 0 0 1.5px var(--line-2, var(--line)), 0 3px 8px -4px rgba(0, 0, 0, .5); pointer-events: none; }
  /* Seçili hâller */
  .clip[data-v="full"] .acts > .act.on { color: var(--signal-ink); }
  .clip[data-v="full"] .acts > .act.on > svg { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--signal) 65%, transparent) inset; }
  .clip[data-v="full"] .acts > .act[data-a="react"].on { color: var(--live); }
  .clip[data-v="full"] .acts > .act[data-a="react"].on > svg { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--live) 50%, transparent) inset; }
  .clip[data-v="full"] .acts > .act.crk.on { color: var(--danger); }
  .clip[data-v="full"] .acts > .act.crk.on > svg { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--danger) 50%, transparent) inset; }
  .clip[data-v="full"] .acts > .act.lif.on { color: var(--mint); }
  .clip[data-v="full"] .acts > .act.lif.on > svg { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--mint) 55%, transparent) inset; }
  .clip[data-v="full"] .acts > .act.off { opacity: .4; }
  /* Alt sıra: dinlenme solda; sonra dinle, indir, paylaş sağda yuvarlak düğmeler */
  .clip[data-v="full"] .acts .end { margin: 14px 2px 0; padding: 12px 0 0; gap: 8px; }
  .clip[data-v="full"] .acts .end .act { height: 40px; padding: 0 12px; border-radius: 20px; font-size: 13.5px; font-weight: 700; color: var(--text-2); }
  .clip[data-v="full"] .acts .end .act:not(.listens) { width: 40px; padding: 0; justify-content: center; background: var(--surface-2); }
  [data-theme="light"] .clip[data-v="full"] .acts .end .act:not(.listens) { background: #F2F4F9; }
  .clip[data-v="full"] .acts .end .act svg { width: 20px; height: 20px; }
  .clip[data-v="full"] .acts .end .act.listens { padding-left: 4px; gap: 7px; }
  .clip[data-v="full"] .acts .end .act.on { color: var(--signal-ink); }
  /* Yanıt kartlarında sade kalır, yalnız biraz büyür */
  .clip.is-reply .acts > .act > svg { width: 22px; height: 22px; }
  .clip.is-reply .acts > .act > .lbl { font-size: 11.5px; }
}
@media (max-width: 360px) {
  .clip[data-v="full"] .acts > .act > svg { width: 42px; height: 42px; padding: 11px; border-radius: 14px; }
  .clip[data-v="full"] .acts > .act > .lbl { font-size: 11px; }
  .clip[data-v="full"] .acts > .act > .n { left: calc(50% + 10px); }
}
/* Web: aynı satır biraz daha rahat */
@media (min-width: 681px) {
  .clip[data-v="full"] .acts > .act { height: 40px; font-size: 14px; gap: 7px; border-radius: 12px; }
  .clip[data-v="full"] .acts > .act > svg { width: 20px; height: 20px; }
}

/* ===================== Akış kartı eylem şeridi: sese gitmeden tepki, yeniden, alıntıla, boost, çatlat, hayat ===================== */
/* İçerik ile etkileşim bölümü ince bir çizgiyle ayrılır: çizginin altında eylem şeridi, hemen altında yanıt alanı. */
.facts { display: flex; align-items: stretch; gap: 4px; margin: 12px 0 0 calc(64px + 13px); padding-top: 8px; border-top: 1px solid var(--line); }
.facts + .sm-rep { margin-top: 6px; padding-top: 0; border-top: 0; }
.fa { position: relative; flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 40px; padding: 0 8px; border: 0; border-radius: 12px; background: transparent; color: var(--text-2); font: 650 13.5px/1 var(--f-body); cursor: pointer; transition: background .15s, color .15s, transform .12s var(--ease); -webkit-tap-highlight-color: transparent; }
.fa-i { display: inline-flex; flex: none; }
.fa-i svg { width: 20px; height: 20px; }
.fa-l { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fa-n { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--muted); }
button.fa:hover { background: var(--surface-2); color: var(--text); }
button.fa:active { transform: scale(.94); }
button.fa:focus-visible { outline: 2px solid var(--sky); outline-offset: 1px; }
.fa.on, .fa.on .fa-n { color: var(--signal-ink); }
.fa.fa-rx.on, .fa.fa-rx.on .fa-n { color: var(--live); }
.fa.crk.on, .fa.crk.on .fa-n { color: var(--danger); }
.fa.lif.on, .fa.lif.on .fa-n { color: var(--mint); }
.fa.off { opacity: .4; cursor: default; }
@media (max-width: 680px) {
  /* Telefonda: altı eşit sütun; simge üstte, ad altta, sayı simgenin köşesinde küçük rozet. Her sütun parmağa uygun. */
  .facts { margin: 10px -4px 0; padding-top: 6px; gap: 0; }
  .facts + .sm-rep { margin-top: 4px; }
  .fa { flex: 1 1 0; flex-direction: column; gap: 6px; height: 58px; padding: 7px 2px 6px; border-radius: 14px; font-size: 12px; }
  .fa-i svg { width: 23px; height: 23px; }
  .fa-n { position: absolute; top: 3px; left: calc(50% + 8px); min-width: 18px; height: 18px; padding: 0 5px; display: grid; place-items: center; border-radius: 9px; font-size: 10.5px; line-height: 1; color: var(--text); background: var(--surface); box-shadow: 0 0 0 1.5px var(--line-2, var(--line)); }
  button.fa:hover { background: none; }
  button.fa:active { background: var(--surface-2); transform: scale(.94); }
}
@media (max-width: 380px) {
  .fa { font-size: 11.5px; }
  .fa-n { left: calc(50% + 6px); }
}
@media (max-width: 360px) {
  .fa { font-size: 10.5px; height: 54px; letter-spacing: -.01em; }
  .fa-i svg { width: 21px; height: 21px; }
}
/* Web: etkileşim bölümü (eylem şeridi + yanıt alanı) kartın tam genişliğinde; altı eylem rahatça sığar */
@media (min-width: 681px) {
  .facts { margin-left: 0; gap: 2px; }
  .facts + .sm-rep { margin-left: 0; }
  .fa { padding: 0 10px; gap: 7px; }
}

/* ===================== Ses sayfası: akıştaki eylem şeridinin aynısı ===================== */
.v-acts { margin-top: 16px; }
.v-acts > .facts { margin-top: 0; }
.v-acts .sm-rep-in { flex: 1 1 auto; max-width: none; }
.v-acts .v-end { margin: 0; }
.v-acts .v-end .end { width: 100%; margin: 10px 0 0; padding: 10px 0 0; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 6px; }
.v-acts .v-end .end .listens { margin-right: auto; }
.v-rn { display: inline-flex; align-items: center; gap: 6px; margin-left: 14px; }
.v-rn svg { width: 18px; height: 18px; }
.clip[data-v="full"] .v-acts .v-end { margin: 0; }
.clip[data-v="full"] .v-acts .v-end .end { margin: 12px 0 0; padding: 10px 0 0; }
@media (max-width: 680px) { .clip[data-v="full"] .v-acts .v-end .end { margin: 10px 2px 0; padding: 8px 0 0; } }

/* ===================== Eylem şeridi: inceltilmiş tasarım ===================== */
/* Sekmelerdeki dil: seçili eylemin altında kendi renginde küçük bir çizgi. Kapalı hâlde simgeler sakin,
   üzerine gelince/dokununca simge eylemin rengini alır. Yeni açılan eylem bir kez "pıt" eder. */
.fa { --fa: var(--text); }
.fa[data-a="react"], .fa.fa-rx { --fa: var(--live); }
.fa[data-a="reshare"], .fa[data-a="boost"], .fa[data-a="quote"] { --fa: var(--signal-ink); }
.fa.crk { --fa: var(--danger); }
.fa.lif { --fa: var(--mint); }
.fa-i { position: relative; }
.fa-i svg { stroke-width: 1.9; transition: transform .2s var(--ease), color .2s; }
@media (hover: hover) {
  button.fa:hover .fa-i { color: var(--fa); }
  button.fa:hover .fa-i svg { transform: translateY(-1px); }
}
button.fa:active .fa-i { color: var(--fa); }
.fa.on { color: var(--fa); }
.fa.on .fa-n { color: var(--fa); }
.fa.on::after { content: ''; position: absolute; left: 50%; bottom: 3px; width: 16px; height: 3px; margin-left: -8px; border-radius: 3px; background: var(--fa); opacity: .9; }
.fa.pop::after { animation: faBar .4s var(--ease) both; }
.fa.pop .fa-i svg { animation: faPop .5s cubic-bezier(.3, 1.6, .5, 1); }
.fa-i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 2px solid var(--fa); opacity: 0; pointer-events: none; }
.fa.pop .fa-i::after { animation: faRing .6s ease-out; }
@keyframes faPop { 0% { transform: scale(1); } 35% { transform: scale(1.32); } 100% { transform: scale(1); } }
@keyframes faRing { 0% { opacity: .7; transform: scale(.45); } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes faBar { from { transform: scaleX(0); opacity: 0; } }
@media (max-width: 680px) {
  .fa.on::after { bottom: 1px; width: 18px; margin-left: -9px; }
  .fa.on .fa-n { color: var(--fa); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--fa) 55%, transparent); }
}
@media (min-width: 681px) {
  .fa.on .fa-n { color: var(--fa); }
}
@media (prefers-reduced-motion: reduce) { .fa.pop::after, .fa.pop .fa-i svg, .fa.pop .fa-i::after { animation: none; } }
/* Alt bilgi satırı hiçbir öğeyi yarım kesmez: sığmayan öğe (örn. fotoğraflı kartta dinlenme) alt satıra iner */
.sm-meta { flex-wrap: wrap; row-gap: 6px; overflow: visible; white-space: normal; }
.sm-meta > span { white-space: nowrap; }
/* Çok dar ekranda fotoğraflı kart: isim kesilmesin diye fotoğraf biraz küçülür, zaman bilgisi geri çekilir
   (sesin kalan ömrü alt satırda zaten yazıyor) */
@media (max-width: 360px) {
  .sm-row:has(> .sm-ph) .sm-ph { width: 44px; height: 44px; border-radius: 11px; }
  .sm-row:has(> .sm-ph) .sm-who .sm-dot, .sm-row:has(> .sm-ph) .sm-who .sm-ago { display: none; }
}

/* ===================== Ses künyesi: kalan ömür | süre | dinlenme tek kapsülde ===================== */
.sm-meta { flex-wrap: nowrap; overflow: visible; }
.sm-cap { display: inline-flex; align-items: center; gap: 9px; flex: none; max-width: 100%; height: 30px; padding: 0 12px 0 11px; border-radius: 999px; white-space: nowrap; font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--muted); background: color-mix(in srgb, var(--text) 6%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 8%, transparent) inset; }
[data-theme="light"] .sm-cap { background: rgba(10, 16, 32, .045); box-shadow: 0 0 0 1px rgba(10, 16, 32, .08) inset; }
/* Kapsülün içinde ömür artık ayrı hap değil: kalın, ana renkte ilk bilgi */
.sm-meta .sm-cap .sm-life .life { padding: 0; gap: 7px; background: none; box-shadow: none; border-radius: 0; font-size: 13px; font-weight: 750; color: var(--text); }
[data-theme="light"] .sm-meta .sm-cap .sm-life .life { background: none; box-shadow: none; }
.sm-sep { flex: none; width: 1px; height: 14px; border-radius: 1px; background: color-mix(in srgb, var(--text) 16%, transparent); }
.sm-cap .sm-dur, .sm-cap .sm-ears { display: inline-flex; align-items: center; gap: 5px; }
.sm-cap svg { width: 15px; height: 15px; flex: none; }
.sm-ears svg { width: 16px; height: 16px; color: var(--text-2); }
.sm-ears [data-ears] { color: var(--text-2); font-weight: 750; }
/* Çalarken kulaklıktaki dalga yavaşça kıpırdar */
.sm-ears .lw { stroke-dasharray: 2.2 1.4; }
.clip.playing .sm-ears .lw { animation: lwFlow 1.1s linear infinite; }
.clip.playing .sm-ears svg { color: var(--hue); }
@keyframes lwFlow { to { stroke-dashoffset: -3.6; } }
@media (prefers-reduced-motion: reduce) { .clip.playing .sm-ears .lw { animation: none; } }
/* Fotoğraflı kart: fotoğraf ⋯ düğmesinin altına yerleşir; künye her kartta aynı genişlikte kalır */
.sm-row:has(> .sm-ph) { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto 1fr; column-gap: 13px; row-gap: 2px; align-items: start; }
.sm-row:has(> .sm-ph) > .print { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
.sm-row:has(> .sm-ph) > .sm-body { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.sm-row:has(> .sm-ph) > .more { grid-column: 3; grid-row: 1; justify-self: end; }
.sm-row:has(> .sm-ph) > .sm-ph { grid-column: 3; grid-row: 2; justify-self: end; align-self: start; }
@media (max-width: 680px) {
  .sm-row:has(> .sm-ph) { column-gap: 11px; }
  .sm-cap { gap: 8px; height: 29px; padding: 0 11px 0 10px; font-size: 12.5px; }
  .sm-meta .sm-cap .sm-life .life { font-size: 12.5px; }
}
@media (max-width: 380px) {
  .sm-cap { gap: 7px; padding: 0 10px 0 9px; }
  .sm-cap .sm-dur svg { display: none; }
}
@media (max-width: 360px) {
  .sm-cap { gap: 6px; height: 27px; padding: 0 9px 0 8px; font-size: 11.5px; }
  .sm-meta .sm-cap .sm-life .life { font-size: 11.5px; }
  .sm-cap svg, .sm-ears svg { width: 14px; height: 14px; }
  .sm-sep { height: 12px; }
  .sm-meta { flex-wrap: nowrap; }
}

/* Akıştaki tüm kartlar aynı renkte. Sıradaki/duraklatılmış ses ayrı renge boyanmaz (yalnız alttaki ince
   ilerleme çizgisi kaldığı yeri gösterir). Ses gerçekten çalarken kartın çevresinde sesin renginde ince bir halka belirir. */
.clip.sum.playing { background: var(--surface); border-color: var(--line); }
.clip.sum.playing.live { border-color: color-mix(in srgb, var(--hue) 55%, var(--line)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--hue) 28%, transparent), 0 16px 34px -26px color-mix(in srgb, var(--hue) 75%, transparent); }

/* ===================== Cinsiyet seçimi (renk tonu) ===================== */
.g-field { border: 0; margin: 0; padding: 0; }
.g-lbl { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 650; color: var(--text-2); }
.g-seg { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--surface-2); box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 6%, transparent) inset; }
.g-opt { position: relative; flex: 1 1 0; min-width: 0; cursor: pointer; }
.g-opt input { position: absolute; opacity: 0; pointer-events: none; }
.g-opt span { display: grid; place-items: center; height: 40px; padding: 0 8px; border-radius: 10px; font-size: 14px; font-weight: 650; color: var(--muted); white-space: nowrap; transition: background .18s, color .18s, box-shadow .18s; }
.g-opt input:checked + span { background: var(--surface); color: var(--text); font-weight: 750; box-shadow: 0 6px 14px -10px rgba(0, 0, 0, .55), 0 0 0 1px color-mix(in srgb, var(--text) 8%, transparent); }
[data-theme="light"] .g-opt input:checked + span { background: #fff; }
.g-opt input:focus-visible + span { outline: 2px solid var(--sky); outline-offset: 1px; }
@media (max-width: 380px) { .g-opt span { font-size: 13px; padding: 0 4px; } }

/* Sesin renginin yazı/simge olarak kullanıldığı yerler: açık temada açık tonlar (sarı, nane, camgöbeği) zeminde
   kaybolmasın diye rengin koyulaştırılmış hâli kullanılır; koyu temada rengin kendisi. */
:root { --hue-ink: var(--hue); }
.clip, .print, .np, .mcap, .wcap { --hue-ink: var(--hue); }
[data-theme="light"] .clip, [data-theme="light"] .print, [data-theme="light"] .np, [data-theme="light"] .mcap, [data-theme="light"] .wcap { --hue-ink: color-mix(in srgb, var(--h0, var(--hue)) 52%, #0F1729); }
.clip.playing .sm-ears svg { color: var(--hue-ink); }
[data-theme="light"] .clip.sum.playing.live { border-color: color-mix(in srgb, var(--hue-ink) 55%, var(--line)); }
[data-theme="light"] .sm-prog i { background: var(--hue-ink); }
[data-theme="light"] .print .play::before { background: conic-gradient(var(--hue-ink) calc(var(--pp, 0) * 360deg), color-mix(in srgb, var(--hue) 30%, transparent) 0); }


/* ===================== Ses renkleri açık temada koyulaşır ===================== */
/* Sesin ham rengi --h0 (karttan gelir). Koyu temada olduğu gibi kullanılır; açık temada açık zeminde
   kaybolmasın diye derinleştirilir: çubuklar, halkalar, ilerleme ve vurgu çizgileri koyu ve net görünür.
   Ses izinin zemini ise ham renkten açık bir pastel olarak kalır; böylece kart kirli değil, temiz durur. */
[style*="--h0"] { --hue: var(--h0); }
[data-theme="light"] [style*="--h0"] { --hue: color-mix(in srgb, var(--h0) 66%, #101A30); }
[data-theme="light"] .print { background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--h0, var(--hue)) 36%, #fff), color-mix(in srgb, var(--h0, var(--hue)) 15%, #fff) 74%); }
[data-theme="light"] .print .pb { stroke: var(--hue); opacity: .5; }
[data-theme="light"] .print .pb.on { opacity: 1; }
[data-theme="light"] .vc-bar .prog i { background: var(--hue); }
[data-theme="light"] .print .play::before { background: conic-gradient(var(--hue) calc(var(--pp, 0) * 360deg), color-mix(in srgb, var(--hue) 25%, transparent) 0); }
[data-theme="light"] .print .play::after { border-color: var(--hue); }
/* Henüz ses çalmamışken oynatıcı kapsülleri varsayılan sarıyla açılır: açık temada o da derinleşir */
[data-theme="light"] .wcap:not([style*="--h0"]), [data-theme="light"] .mcap:not([style*="--h0"]), [data-theme="light"] .np-sheet:not([style*="--h0"]) { --hue: color-mix(in srgb, #FFD84D 66%, #101A30); }

/* ===================== Keşfet sekmeleri: kaymayan, eşit bölmeli sekme rafı ===================== */
/* Altı bölüm her ekranda tek bakışta görünür; yatay kaydırma, yarım kesilen sekme ve kayma yok.
   Geniş alanda simge + ad yan yana; telefonda simge üstte, ad altta (dokunma alanı büyük, yazı kesilmez). */
.phead-tools:has(> .dx-seg) { container-type: inline-size; }
.phead-tools .seg.dx-seg { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; overflow: visible; }
.phead-tools .seg.dx-seg > button { min-width: 0; justify-content: center; gap: 7px; padding: 0 6px; }
.dx-seg > button svg { flex: none; width: 17px; height: 17px; opacity: .78; transition: color .2s, opacity .2s, transform .3s var(--ease); }
.dx-seg > button span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-seg > .on svg { opacity: 1; color: var(--signal-ink); }
.dx-seg > .on.pop svg { animation: dxIc .42s var(--ease); }
@keyframes dxIc { 0% { transform: scale(.82); } 55% { transform: scale(1.12); } 100% { transform: scale(1); } }
@container (max-width: 640px) {
  .phead-tools .seg.dx-seg { padding: 4px; gap: 2px; border-radius: 18px; }
  .phead-tools .seg.dx-seg > button { flex-direction: column; height: 60px; gap: 5px; padding: 0 2px 4px; border-radius: 14px; font-size: 12.5px; font-weight: 650; letter-spacing: -.01em; }
  .phead-tools .seg.dx-seg > .on { font-weight: 760; }
  .dx-seg > button svg { width: 21px; height: 21px; }
  .phead-tools .seg.dx-seg > .ind-seg { border-radius: 14px; }
  .phead-tools .seg.dx-seg > .ind-seg::after { bottom: 4px; width: 14px; height: 2.5px; margin-left: -7px; }
}
@container (max-width: 330px) {
  .phead-tools .seg.dx-seg > button { font-size: 11.5px; letter-spacing: -.02em; }
  .dx-seg > button svg { width: 19px; height: 19px; }
}
@media (prefers-reduced-motion: reduce) { .dx-seg > .on.pop svg { animation: none; } }

/* ===================== Profil sekmeleri: eşit üç bölme, sayı rozetli ===================== */
.tabs.pf-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 0; overflow: visible; }
.pf-tabs > button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; padding: 14px 4px 12px; white-space: nowrap; }
.pf-tabs > button > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pf-tabs .t-n { flex: none; display: inline-grid; place-items: center; min-width: 21px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--surface-2); color: var(--muted); font-size: 11.5px; font-weight: 750; font-variant-numeric: tabular-nums; transition: background .2s, color .2s; }
.pf-tabs > .on .t-n { background: color-mix(in srgb, var(--signal) 24%, transparent); color: var(--text); }
.pf-tabs .t-short { display: none; }
@media (max-width: 460px) { .pf-tabs .t-long { display: none; } .pf-tabs .t-short { display: inline; } .pf-tabs > button { gap: 6px; font-size: 14.5px; } }

/* ===================== Oyun modu ===================== */
/* Telefonda tarayıcının tam ekranı yerine LAGOR'un kendi oyun ekranı: sistem uyarısı çıkmaz, oyun her zaman
   koyu sahnede, üstte ince bir oyun çubuğu (çık · oyun adı/ipucu · yeni · kart). Masaüstündeki gerçek tam ekran
   da aynı düzeni kullanır. */
.g-fs-title { display: none; }
.g-shell.is-fs, .g-shell:fullscreen {
  --bg: #0A1020; --surface: #111B32; --surface-2: #16223D; --line: #24345A; --line-2: #2A3A5E;
  --text: #EEF2FF; --text-2: #C9D2EA; --muted: #8B98B8; --signal-ink: #FFD84D;
  background: #0A1020; color: #EEF2FF; color-scheme: dark;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) calc(env(safe-area-inset-right, 0px) + 10px) calc(env(safe-area-inset-bottom, 0px) + 10px) calc(env(safe-area-inset-left, 0px) + 10px);
}
.ios .g-shell.is-fs, .ios .g-shell:fullscreen { padding-top: max(28px, calc(env(safe-area-inset-top, 0px) + 24px)); }
.g-shell.is-fs .g-toolbar, .g-shell:fullscreen .g-toolbar {
  display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "x t n c" "x s n c";
  align-items: center; column-gap: 10px; row-gap: 1px; padding: 0 2px 10px !important;
}
.g-shell.is-fs .g-toolbar > [data-fs], .g-shell:fullscreen .g-toolbar > [data-fs] { grid-area: x; }
.g-shell.is-fs .g-toolbar > [data-new], .g-shell:fullscreen .g-toolbar > [data-new] { grid-area: n; }
.g-shell.is-fs .g-toolbar > [data-card], .g-shell:fullscreen .g-toolbar > [data-card] { grid-area: c; }
.g-shell.is-fs .g-fs-title, .g-shell:fullscreen .g-fs-title { display: block; grid-area: t; align-self: end; min-width: 0; font: 700 17px/1.2 var(--f-display); letter-spacing: -.01em; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-shell.is-fs .g-toolbar > [data-status], .g-shell:fullscreen .g-toolbar > [data-status] { grid-area: s; align-self: start; order: 0; flex-basis: auto; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12px; line-height: 1.3; color: var(--muted); }
.g-shell.is-fs .g-toolbar:has(> [data-status]:empty) .g-fs-title, .g-shell:fullscreen .g-toolbar:has(> [data-status]:empty) .g-fs-title { grid-row: 1 / 3; align-self: center; }
.g-shell.is-fs .g-toolbar .btn, .g-shell:fullscreen .g-toolbar .btn,
.g-shell.is-fs .g-toolbar .ibtn, .g-shell:fullscreen .g-toolbar .ibtn { min-width: 42px; height: 42px; border-radius: 13px; background: #111B32; border: 1px solid #24345A; color: #EEF2FF; box-shadow: none; }
.g-shell.is-fs .g-toolbar .ibtn, .g-shell:fullscreen .g-toolbar .ibtn { width: 42px; }
.g-shell.is-fs .g-toolbar .btn:active, .g-shell.is-fs .g-toolbar .ibtn:active { background: #16223D; border-color: #FFD84D; }
.g-shell.is-fs [data-fs].on, .g-shell:fullscreen [data-fs].on { background: #111B32; color: #EEF2FF; border-color: #2A3A5E; }
.g-shell.is-fs .g-host, .g-shell:fullscreen .g-host { padding: 0; }
.g-shell.is-fs .g-root, .g-shell:fullscreen .g-root { border-radius: 20px; }
@media (max-width: 680px) {
  .g-shell.is-fs .g-toolbar .btn { width: 42px; padding: 0; }
}
/* Oyun modunda sayfa kıpırdamaz: aşağı çekip yenileme ve sayfa kaydırması kapalı, oyun alanı dokunuşu tamamen alır */
html:has(body.game-fs), body.game-fs { overscroll-behavior: none; }
.g-shell.pseudo-fs { touch-action: none; -webkit-user-select: none; user-select: none; }
/* Oyun içi pencereler (pes et, kart indir) ve kısa bilgiler oyunun üstünde açılır; bildirimler oyunu kapatmaz */
body.game-fs .scrim { z-index: 130; }
body.game-fs .popover { z-index: 140; }
/* Bildirim oyun modunda tahtanın üstüne düşmez: birkaç saniyeliğine oyun çubuğundaki ad/ipucu alanına oturur */
.g-note { display: none; }
.g-shell.is-fs .g-note, .g-shell:fullscreen .g-note {
  grid-area: 1 / 2 / 3 / 3; align-self: stretch; z-index: 1; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0 12px;
  border-radius: 13px; background: #16223D; border: 1px solid #2A3A5E; color: #EEF2FF; font-size: 12.5px; line-height: 1.25; font-weight: 600;
  opacity: 0; visibility: hidden; transform: translateY(-3px); transition: opacity .2s, transform .2s var(--ease), visibility 0s .2s; pointer-events: none;
}
.g-shell.is-fs .g-note.on, .g-shell:fullscreen .g-note.on { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .2s var(--ease); }
.g-note > svg { flex: none; width: 16px; height: 16px; color: #FFD84D; }
.g-note > span { min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.g-note.err { background: #3A1420; border-color: #7A2438; }
.g-note.err > svg { color: #FF8A9A; }
.g-shell.is-fs .g-bar-name, .g-shell:fullscreen .g-bar-name { visibility: hidden; }
[data-theme="light"] .phead-tools .seg.dx-seg { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 75%, transparent); }
@container (min-width: 500px) and (max-width: 640px) { .phead-tools .seg.dx-seg > button { font-size: 13.5px; } }
.g-shell .g-fs-title, .g-shell .g-toolbar > [data-status] { transition: opacity .18s; }
.g-toolbar:has(> .g-note.on) > .g-fs-title, .g-toolbar:has(> .g-note.on) > [data-status] { opacity: 0; }
/* ===================== Telefonda oyun modu: üstte belirgin düğme + tahtada koruyucu kapı ===================== */
/* Oyun sekmelerinin hemen altında "Oyun modunda oyna" düğmesi durur (ilk ekranda görünür, sayfa kaydırılmaz).
   Tahta sayfa içinde oynanmaz: üstünde hafif bir kapı vardır; sayfa bu alanın üstünden rahatça kaydırılır,
   yanlışlıkla parça düşmez / taş oynanmaz, dokununca oyun modu açılır. */
.g-cta { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 62px; margin: 0 0 14px; padding: 9px 14px 9px 10px; border-radius: 18px; text-align: left;
  background: linear-gradient(180deg, #FFE27A, #FFD84D 55%, #F5C92E); color: #0A1020;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .4) inset, 0 12px 28px -14px rgba(214, 168, 0, .75); -webkit-tap-highlight-color: transparent; transition: transform .18s var(--ease); }
.g-cta[hidden] { display: none; }
.g-cta:active { transform: scale(.985); }
.g-cta-ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: #0A1020; color: #FFD84D; }
.g-cta-ic svg { width: 21px; height: 21px; stroke-width: 2.2; }
.g-cta-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.g-cta-t b { font: 800 16.5px/1.15 var(--f-display); letter-spacing: -.01em; }
.g-cta-t small { font-size: 12.5px; font-weight: 650; color: rgba(10, 16, 32, .68); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-cta > svg:last-child { flex: none; width: 20px; height: 20px; stroke-width: 2.3; opacity: .75; }
.g-cta::after { content: ''; position: absolute; inset: -4px; border-radius: 22px; border: 2px solid rgba(255, 216, 77, .6); opacity: 0; animation: gateRing 3s var(--ease) .8s infinite; pointer-events: none; }
@keyframes gateRing { 0% { opacity: .85; transform: scale(.985); } 60%, 100% { opacity: 0; transform: scale(1.04); } }
.g-gate { display: none; }
.g-shell.gated .g-gate {
  position: absolute; inset: 0 4px; z-index: 8; display: grid; place-items: center; padding: 16px; border-radius: 24px; color: #EEF2FF;
  background: rgba(10, 16, 32, .42); touch-action: pan-y; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.g-shell.gated .g-toolbar > [data-fs] { display: none; }
.g-gate-pill { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 13px; border-radius: 20px; background: rgba(17, 27, 50, .92); border: 1px solid #2A3A5E; font-size: 13.5px; font-weight: 700; box-shadow: 0 10px 26px -12px rgba(0, 0, 0, .7); }
.g-gate-pill svg { width: 17px; height: 17px; color: #FFD84D; }
.g-gate:active .g-gate-pill { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) { .g-cta::after { animation: none; } }

/* ===================== Video olarak paylaşım ===================== */
.sh-pick { display: flex; flex-direction: column; gap: 10px; }
.sh-opt { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 10px 14px 10px 10px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); color: var(--text); text-align: left; transition: transform .15s var(--ease), border-color .2s; }
.sh-opt:active { transform: scale(.985); }
.sh-opt > svg:last-child { flex: none; width: 18px; height: 18px; color: var(--muted); }
.sh-ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: var(--surface-2); color: var(--text); }
.sh-ic svg { width: 22px; height: 22px; }
.sh-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sh-tx b { font: 700 15.5px/1.2 var(--f-display); letter-spacing: -.01em; }
.sh-tx small { font-size: 12.5px; color: var(--muted); }
.sh-vid { border-color: color-mix(in srgb, var(--signal) 55%, var(--line)); background: color-mix(in srgb, var(--signal) 10%, var(--surface)); }
.sh-vid .sh-ic { background: var(--signal); color: #0A1020; }
.col > .sh-vid { margin-bottom: 4px; }
.vs { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.vs-wait { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 8px 8px; text-align: center; }
.vs-wait strong { font: 700 17px/1.2 var(--f-display); }
.vs-ring { --p: 0; position: relative; display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; margin-bottom: 6px;
  background: conic-gradient(var(--signal) calc(var(--p) * 360deg), color-mix(in srgb, var(--signal) 16%, transparent) 0); }
.vs-ring::before { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: var(--surface); }
.vs-ring b { position: relative; font: 800 20px/1 var(--f-display); font-variant-numeric: tabular-nums; }
.vs-video { display: block; width: auto; max-width: 100%; max-height: min(50vh, 480px); aspect-ratio: 9 / 16; border-radius: 18px; background: #0A1020; box-shadow: 0 14px 34px -18px rgba(0, 0, 0, .6); }
.vs-acts { display: flex; gap: 10px; width: 100%; max-width: 420px; }
.vs-acts .btn { flex: 1 1 0; min-width: 0; justify-content: center; }
.vs-note { text-align: center; max-width: 420px; margin: 0; }