/* Looper — oyuncuların sosyal sayfası (Facebook düzeni, LooperGame renkleri, kurumsal koyu tema): üst çubuk (logo, arama,
   ortada simge sekmeler, sağda hesap), solda kısayollar, ortada hikâyeler + paylaşım + akış, sağda hesap özeti ve kişiler.
   portal.css'in değişkenlerini kullanır; Looper sayfalarında gövdeye .lp-shell eklenir (sakin zemin, düz yüzeyler). */
:root {
  --s0: #0c0b1e; --s1: #15132f; --s2: #1c1a3c; --s3: #24224a; --b1: rgba(255, 255, 255, 0.07); --b2: rgba(255, 255, 255, 0.12);
  --t1: #eeedff; --t2: #a9abd6; --t3: #7376a8; --acc: #8b74ff; --acc2: #a493ff; --gold: #e8c46a; --gold2: #f5d88f;
  --sh1: 0 1px 2px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.02) inset; --sh2: 0 12px 32px rgba(2, 1, 12, 0.55);
  --hov: rgba(255, 255, 255, 0.055); --topH: 60px;
}

/* ---------- üst çubuk (oturum açınca): logo + arama · ortada sekmeler · sağda hesap ---------- */
body.has-nav .top {
  height: calc(var(--topH) + max(0px, env(safe-area-inset-top))); padding-top: max(0px, env(safe-area-inset-top)); padding-bottom: 0;
  background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom: 1px solid var(--b1); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35), 0 8px 24px rgba(3, 2, 14, 0.25);
}
/* hafif şeffaf buzlu cam; bulanıklık kendi katmanında (üst çubuğun kendisinde olsaydı telefondaki sabit alt sekme çubuğu ona bağlanırdı) */
body.has-nav .top::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: rgba(16, 15, 38, 0.78); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { body.has-nav .top::before { background: rgba(16, 15, 38, 0.95); } }
body.has-nav .brand { gap: 10px; }
body.has-nav .logo { width: 38px; height: 38px; filter: drop-shadow(0 3px 10px rgba(139, 116, 255, 0.35)); }
@media (max-width: 1260px) { body.has-nav .brand-name { display: none; } }
.top-start { display: flex; align-items: center; gap: 12px; min-width: 0; }
.top-search { position: relative; width: 250px; }
.top-search > svg { position: absolute; inset-inline-start: 13px; top: 11px; width: 18px; height: 18px; color: var(--t3); pointer-events: none; }
.top-search input {
  width: 100%; height: 40px; padding: 0 14px 0 40px; border-radius: 20px; border: 1px solid transparent; background: var(--s2);
  font-size: 14.5px; color: var(--t1); -webkit-appearance: none; appearance: none; transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
[dir="rtl"] .top-search input { padding: 0 40px 0 14px; }
.top-search input::placeholder { color: var(--t3); }
.top-search input:focus { outline: none; background: var(--s1); border-color: rgba(139, 116, 255, 0.55); box-shadow: 0 0 0 3px rgba(139, 116, 255, 0.16); }
.top-search input::-webkit-search-cancel-button { filter: invert(0.7); }
.ts-res {
  position: absolute; top: calc(100% + 8px); inset-inline-start: -6px; width: 340px; max-height: min(70vh, 520px); overflow: auto; z-index: 40; padding: 8px;
  border-radius: 14px; background: #191738; border: 1px solid var(--b2); box-shadow: var(--sh2); animation: pop 0.14s ease-out; scrollbar-width: thin;
}
.ts-h { margin: 6px 10px 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t3); }
.ts-row { display: flex; align-items: center; gap: 11px; width: 100%; padding: 7px 10px; border-radius: 10px; border: 0; background: none; text-align: start; color: var(--t1); text-decoration: none; }
.ts-row:hover, .ts-row.sel { background: var(--hov); }
.ts-row img { width: 36px; height: 36px; border-radius: 10px; flex: none; }
.ts-row .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ts-row .tx b { font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-row .tx span { font-size: 12.5px; color: var(--t2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-none { margin: 10px 12px; font-size: 13.5px; color: var(--t3); }
@media (max-width: 900px) { .top-search { display: none; } }

/* ortadaki sekmeler: yalnız simge (masaüstü), etkin sekmenin altında çizgi */
.mainnav { display: flex; align-items: stretch; gap: 6px; margin: 0; height: 100%; }
@media (min-width: 761px) { body.has-nav .mainnav { position: absolute; left: 50%; transform: translateX(-50%); top: max(0px, env(safe-area-inset-top)); height: var(--topH); } }
.mainnav a {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 108px; height: 100%; padding: 0; margin: 0;
  color: var(--t2); text-decoration: none; font-weight: 600; font-size: 14px; border-radius: 0; transition: color 0.15s;
}
.mainnav a::before { content: ''; position: absolute; inset: 6px 2px; border-radius: 10px; transition: background 0.15s; }
.mainnav a:hover::before { background: var(--hov); }
.mainnav a svg { position: relative; width: 26px; height: 26px; flex: none; }
.mainnav a span:not(.nb) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mainnav a[aria-current="page"] { color: var(--acc2); }
.mainnav a[aria-current="page"]::after { content: ''; position: absolute; inset-inline: 4px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: linear-gradient(90deg, var(--acc), #6fe8dc); }
.nb {
  position: absolute; top: 9px; inset-inline-start: calc(50% + 4px); min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px;
  background: #ff4d6d; color: #fff; font: 700 11px/19px var(--font); text-align: center; box-shadow: 0 0 0 2px #100f26;
}
@media (max-width: 1100px) and (min-width: 761px) { .mainnav a { width: 84px; } }
body.has-nav .top-end { gap: 8px; }
body.has-nav .chip { height: 40px; border-radius: 20px; background: var(--s2); border-color: transparent; }
body.has-nav .chip:hover { background: var(--s3); }
body.has-nav .me-chip { height: 40px; border-radius: 20px; padding: 0 10px 0 3px; background: var(--s2); border-color: transparent; }
body.has-nav .me-chip:hover { background: var(--s3); }
body.has-nav .me-chip .avatar { width: 34px; height: 34px; }
@media (max-width: 1260px) { body.has-nav .me-nick { display: none; } body.has-nav .me-chip { padding-inline-end: 8px; } }
body.has-nav .menu { background: #191738; border-color: var(--b2); border-radius: 14px; }

@media (max-width: 760px) {
  /* telefonda sekmeler altta (bulanıklık filtresi sabit çocuğu üst çubuğa bağlar: kapalı) */
  body.has-nav .top { backdrop-filter: none; -webkit-backdrop-filter: none; height: auto; padding-top: max(10px, env(safe-area-inset-top)); padding-bottom: 10px; }
  .mainnav {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 25; height: auto; justify-content: space-around; gap: 0;
    padding: 4px max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
    background: #100f26; border-top: 1px solid var(--b2);
  }
  .mainnav a { flex: 1; width: auto; flex-direction: column; gap: 2px; height: 54px; font-size: 10.5px; }
  .mainnav a::before { inset: 4px 6px; }
  .mainnav a svg { width: 24px; height: 24px; }
  .mainnav a span:not(.nb) { position: static; width: auto; height: auto; clip: auto; display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .mainnav a[aria-current="page"]::after { top: 0; bottom: auto; inset-inline: 28%; border-radius: 0 0 3px 3px; }
  .nb { top: 4px; }
  body.has-nav .foot { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  body.has-nav .toast { bottom: calc(78px + env(safe-area-inset-bottom)); }
}

/* ---------- Looper zemini: sakin, düz yüzeyler ---------- */
body.lp-shell { background: var(--s0); }
body.lp-shell #sky { opacity: 0.32; }
body.lp-shell .nebula { opacity: 0.3; }
body.lp-shell main { width: min(1440px, calc(100% - 24px)); padding-top: 16px; }
body.lp-shell .foot { width: min(1440px, calc(100% - 24px)); }
body.lp-shell .card { background: var(--s1); border: 1px solid var(--b1); border-radius: 12px; box-shadow: var(--sh1); backdrop-filter: none; -webkit-backdrop-filter: none; }
body.lp-shell .btn-sm { height: 36px; border-radius: 8px; }
body.lp-shell .btn-primary { background: linear-gradient(180deg, #957fff, #7259f2); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset, 0 6px 16px rgba(106, 82, 240, 0.3); }
body.lp-shell .btn-ghost { background: var(--s2); border: 1px solid transparent; }
body.lp-shell .btn-ghost:hover:not([disabled]) { background: var(--s3); }

/* ---------- yerleşim: sol kısayollar · orta akış · sağ hesap ve kişiler ---------- */
.lp { display: grid; gap: 28px; align-items: start; grid-template-columns: minmax(0, 680px); justify-content: center; }
@media (min-width: 1000px) { .lp { grid-template-columns: minmax(0, 660px) 310px; gap: 32px; } }
@media (min-width: 1280px) { .lp { grid-template-columns: 290px minmax(0, 660px) 310px; justify-content: space-between; } }
.lp-left, .lp-right { display: none; }
@media (min-width: 1000px) { .lp-right { display: flex; flex-direction: column; gap: 6px; position: sticky; top: calc(var(--topH) + 16px); max-height: calc(100vh - var(--topH) - 24px); overflow: auto; scrollbar-width: none; } }
@media (min-width: 1280px) { .lp-left { display: flex; flex-direction: column; gap: 2px; position: sticky; top: calc(var(--topH) + 16px); max-height: calc(100vh - var(--topH) - 24px); overflow: auto; scrollbar-width: none; } }
.lp-main { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
/* kişi ve oyun sayfaları: solda aynı menü, yanında sayfa (sağ sütun yok) */
.lp.lp-wide { grid-template-columns: minmax(0, 1200px); }
@media (min-width: 1000px) { .lp.lp-wide { grid-template-columns: minmax(0, 1200px); } }
@media (min-width: 1280px) { .lp.lp-wide { grid-template-columns: 260px minmax(0, 1fr); justify-content: stretch; gap: 24px; } }
.lp.lp-wide > .lp-prof { width: 100%; }
.lp-narrow { width: min(680px, 100%); margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
/* orta sütun: kendine özgü sahne zemini (üstte marka ışıltısı, ince nokta dokusu, iki yanda kılcal çizgi); yan sütunlar daha koyu zeminde kalır */
.lp-main, .lp-narrow { --stage: radial-gradient(80% 300px at 50% 0, rgba(139, 116, 255, 0.2), transparent 72%), radial-gradient(circle, rgba(255, 255, 255, 0.05) 1px, transparent 1.6px) 0 0 / 20px 20px, linear-gradient(180deg, #151240, #100e2e 420px, #0e0c28); }
@media (min-width: 1000px) {
  body.lp-shell { background: #09081a; }
  .lp > .lp-main, .lp-narrow { position: relative; }
  .lp > .lp-main::before, .lp-narrow::before {
    content: ''; position: absolute; z-index: -1; top: -16px; bottom: -24px; inset-inline: -24px; min-height: calc(100vh - var(--topH));
    border-inline: 1px solid rgba(255, 255, 255, 0.07); background: var(--stage); box-shadow: 0 0 80px rgba(0, 0, 0, 0.45); pointer-events: none;
  }
}
/* dar ekranda orta sütun zaten sayfanın tamamı: aynı sahne zemini sayfaya uygulanır */
@media (max-width: 999px) {
  body.lp-shell { background: radial-gradient(90% 320px at 50% 0, rgba(139, 116, 255, 0.18), transparent 72%), linear-gradient(180deg, #151240, #100e2e 420px, #0e0c28 900px); }
}

/* sol: kısayollar */
.lp-left a, .lp-left button.lp-lrow {
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 10px; border-radius: 10px; text-decoration: none; color: var(--t1);
  font-weight: 600; font-size: 15px; border: 0; background: none; width: 100%; text-align: start; position: relative; transition: background 0.12s;
}
.lp-left a:hover, .lp-left button.lp-lrow:hover { background: var(--hov); }
.lp-left a[aria-current="page"] { background: rgba(139, 116, 255, 0.12); }
.lp-left a[aria-current="page"]::before { content: ''; position: absolute; inset-inline-start: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: var(--acc); }
.lp-left .lp-li { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: none; background: var(--s2); }
.lp-left .lp-li svg { width: 21px; height: 21px; }
.lp-left .lp-li.v { color: #c4b6ff; background: linear-gradient(145deg, rgba(139, 116, 255, 0.3), rgba(139, 116, 255, 0.12)); }
.lp-left .lp-li.t { color: #8ff0e5; background: linear-gradient(145deg, rgba(42, 212, 197, 0.26), rgba(42, 212, 197, 0.1)); }
.lp-left .lp-li.h { color: var(--gold2); background: linear-gradient(145deg, rgba(232, 196, 106, 0.26), rgba(232, 196, 106, 0.1)); }
.lp-left .lp-li.r { color: #ffa3bd; background: linear-gradient(145deg, rgba(255, 111, 159, 0.26), rgba(255, 111, 159, 0.1)); }
.lp-left .lp-li.d { color: #9fc3ff; background: linear-gradient(145deg, rgba(78, 141, 255, 0.26), rgba(78, 141, 255, 0.1)); }
.lp-left .lp-li img { width: 38px; height: 38px; border-radius: 11px; }
.lp-left .nb { position: static; margin-inline-start: auto; box-shadow: none; }
.lp-left hr { border: 0; border-top: 1px solid var(--b1); margin: 10px 10px; }
.lp-left h4 { margin: 6px 10px 4px; font-size: 16px; font-weight: 650; color: var(--t2); letter-spacing: -0.005em; }
.lp-legal { margin: 14px 10px 6px; font-size: 12.5px; line-height: 1.6; color: var(--t3); }
.lp-legal b { color: var(--t2); font-weight: 600; }

/* sağ: bölümler (kartsız, ince ayraçlı) */
.lp-rsec { padding: 6px 4px 12px; border-bottom: 1px solid var(--b1); }
.lp-rsec:last-of-type { border-bottom: 0; }
.lp-rsec > h3 { margin: 6px 6px 8px; font-size: 16px; font-weight: 650; color: var(--t2); display: flex; align-items: center; justify-content: space-between; gap: 8px; letter-spacing: -0.005em; }
.lp-rsec > h3 a, .lp-rsec > h3 button { font-size: 13px; font-weight: 600; color: var(--acc2); text-decoration: none; background: none; border: 0; padding: 0; }
.lp-rsec > h3 a:hover { color: #fff; }
.lp-acct-me { display: flex; align-items: center; gap: 11px; padding: 7px 6px; border-radius: 10px; color: var(--t1); text-decoration: none; font-weight: 650; font-size: 15px; }
.lp-acct-me:hover { background: var(--hov); }
.lp-kv { display: flex; align-items: center; gap: 12px; padding: 8px 6px 8px 8px; border-radius: 10px; color: var(--t2); font-size: 14px; text-decoration: none; }
a.lp-kv:hover, button.lp-kv:hover { background: var(--hov); color: var(--t1); }
button.lp-kv { width: 100%; border: 0; background: none; text-align: start; font: inherit; color: var(--t2); }
.lp-kv svg { width: 19px; height: 19px; flex: none; color: var(--t3); }
.lp-kv .v { margin-inline-start: auto; color: var(--t1); font-weight: 650; font-variant-numeric: tabular-nums; }
.lp-kv .v.on { color: #8ff0e5; }
.lp-kv .v.hot { color: #ff8fab; }
.lp-contacts { display: flex; flex-direction: column; }

.lp-box { padding: 16px; }
.lp-box > h3 { margin: 0 0 12px; font: 650 16px/1.3 var(--font-display); display: flex; align-items: center; justify-content: space-between; gap: 8px; letter-spacing: -0.005em; }
.lp-box > h3 a, .lp-box > h3 button { font-size: 13px; font-weight: 600; color: var(--acc2); text-decoration: none; background: none; border: 0; padding: 0; }
.lp-box > h3 a:hover { color: #fff; }
.lp-box .lp-empty-s, .lp-rsec .lp-empty-s { margin: 0 6px; font-size: 13.5px; color: var(--t3); }
.lp-tip { margin: 6px 4px 0; padding: 12px 14px; font-size: 12.5px; line-height: 1.55; color: var(--t2); border-radius: 12px; border: 1px solid rgba(232, 196, 106, 0.22); background: linear-gradient(135deg, rgba(232, 196, 106, 0.08), rgba(139, 116, 255, 0.05)); }

/* ---------- avatar ---------- */
.lp-av {
  --a1: #ffd27a; --a2: #ff6f9f;
  position: relative; display: inline-grid; place-items: center; flex: none; border-radius: 50%;
  background: radial-gradient(120% 120% at 30% 20%, var(--a1), var(--a2)); color: #12102c;
  font-family: var(--font-display); font-weight: 700; text-decoration: none; user-select: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.lp-av .e { font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; font-weight: 400; line-height: 1; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18)); }
.lp-av .on { position: absolute; inset-inline-end: 3%; bottom: 3%; width: 25%; height: 25%; min-width: 9px; min-height: 9px; border-radius: 50%; background: #31d68f; box-shadow: 0 0 0 2.5px var(--s1); }
.lp-av .on.play { background: var(--teal); }
a.lp-av:hover { filter: brightness(1.06); }
.c0 { --a1: #ffd27a; --a2: #ff6f9f; } .c1 { --a1: #a897ff; --a2: #2ad4c5; } .c2 { --a1: #7af2e6; --a2: #3d8bff; }
.c3 { --a1: #ffb37a; --a2: #ff4d6d; } .c4 { --a1: #c6a8ff; --a2: #ff7ad9; } .c5 { --a1: #9ef0a1; --a2: #22b573; }
.c6 { --a1: #ffe680; --a2: #ffa04d; } .c7 { --a1: #8fd0ff; --a2: #8a6bff; } .c8 { --a1: #ffb3c6; --a2: #ffcfa8; }
.c9 { --a1: #7ff0cc; --a2: #e599f7; } .c10 { --a1: #e3f2ff; --a2: #9ccaff; } .c11 { --a1: #e1e4ea; --a2: #8c93a3; }
.lp-stack { display: inline-flex; align-items: center; }
.lp-stack .lp-av { margin-inline-start: -8px; box-shadow: 0 0 0 2px var(--s1); }
.lp-stack .lp-av:first-child { margin-inline-start: 0; }

.lp-name { color: var(--t1); text-decoration: none; font-weight: 650; }
.lp-name:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, 0.35); }
.lp-badge { display: inline-flex; align-items: center; gap: 4px; margin-inline-start: 6px; padding: 1px 8px; border-radius: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.03em; vertical-align: 2px; color: #2a1c00; background: linear-gradient(135deg, var(--gold2), var(--gold)); }
.lp-sub { color: var(--t2); font-size: 13px; }
.lp-pres { display: inline-flex; align-items: center; gap: 6px; color: var(--t2); font-size: 12.5px; font-weight: 500; min-width: 0; }
.lp-pres img { width: 16px; height: 16px; border-radius: 5px; flex: none; }
.lp-pres.play { color: #8ff0e5; }
.lp-pres.on { color: #8fe8bd; }
.lp-pres .d { width: 8px; height: 8px; border-radius: 50%; flex: none; background: currentColor; }
.lp-pres span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- düğmeler ---------- */
.btn-sm { height: 36px; padding: 0 14px; border-radius: 9px; font-size: 13.5px; }
.btn-xs { height: 30px; padding: 0 11px; border-radius: 8px; font-size: 12.5px; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-xs svg { width: 15px; height: 15px; }
.lp-icbtn { width: 36px; height: 36px; display: inline-grid; place-items: center; border-radius: 50%; border: 0; background: none; color: var(--t2); flex: none; }
.lp-icbtn:hover { background: var(--hov); color: var(--t1); }
.lp-icbtn svg { width: 20px; height: 20px; }
.lp-seg { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--s1); border: 1px solid var(--b1); gap: 2px; }
.lp-seg button { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px; border: 0; border-radius: 8px; background: none; font-weight: 600; font-size: 13.5px; color: var(--t2); }
.lp-seg button svg { width: 16px; height: 16px; }
.lp-seg button:hover { color: var(--t1); }
.lp-seg button[aria-pressed="true"] { background: var(--s3); color: var(--t1); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }
.lp-feedbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 0 2px; }
.lp-feedbar h2 { margin: 0; font: 650 17px/1.2 var(--font-display); letter-spacing: -0.01em; }
.lp-feedbar .lp-sub { font-size: 12.5px; color: var(--t3); }

/* ---------- açılır menü ---------- */
.lp-popw { position: relative; display: inline-flex; }
.lp-menu {
  position: absolute; z-index: 40; top: calc(100% + 6px); inset-inline-end: 0; min-width: 230px; padding: 6px; border-radius: 12px;
  background: #191738; border: 1px solid var(--b2); box-shadow: var(--sh2); display: flex; flex-direction: column; animation: pop 0.14s ease-out;
}
.lp-menu.up { top: auto; bottom: calc(100% + 6px); }
.lp-menu button { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 0; border-radius: 8px; background: none; text-align: start; font-size: 14px; font-weight: 550; }
.lp-menu button:hover { background: var(--hov); }
.lp-menu button svg { width: 18px; height: 18px; color: var(--t2); }
.lp-menu button.danger { color: #ff97a5; }
.lp-menu button.danger svg { color: #ff97a5; }

/* ---------- hikâyeler ---------- */
.lp-stories { padding: 0; overflow: hidden; }
.lp-st-tabs { display: flex; border-bottom: 1px solid var(--b1); padding: 0 8px; }
.lp-st-tabs button { position: relative; flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 50px; border: 0; background: none; color: var(--t2); font-weight: 600; font-size: 14.5px; }
.lp-st-tabs button svg { width: 19px; height: 19px; }
.lp-st-tabs button:hover { color: var(--t1); }
.lp-st-tabs button::before { content: ''; position: absolute; inset: 5px 2px; border-radius: 8px; z-index: -1; }
.lp-st-tabs button:hover::before { background: var(--hov); }
.lp-st-tabs button[aria-pressed="true"] { color: var(--acc2); }
.lp-st-tabs button[aria-pressed="true"]::after { content: ''; position: absolute; inset-inline: 10%; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--acc); }
/* şerit: kenardan 16 px içeride başlar (yaslanma noktası da orası); kaydırılabilen kenar yumuşakça solar, üstünde ok durur */
@property --fs { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --fe { syntax: '<length>'; inherits: true; initial-value: 0px; }
.lp-st-wrap { position: relative; }
.lp-st-row {
  --fs: 0px; --fe: 0px; --fade: linear-gradient(90deg, transparent, #000 var(--fs), #000 calc(100% - var(--fe)), transparent);
  display: flex; gap: 8px; padding: 14px 16px 16px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  scroll-snap-type: x mandatory; scroll-padding-inline: 16px; -webkit-mask-image: var(--fade); mask-image: var(--fade); transition: --fs 0.2s, --fe 0.2s;
}
[dir="rtl"] .lp-st-row { --fade: linear-gradient(270deg, transparent, #000 var(--fs), #000 calc(100% - var(--fe)), transparent); }
.lp-st-row::-webkit-scrollbar { display: none; }
.lp-st-wrap.can-prev .lp-st-row { --fs: 56px; }
.lp-st-wrap.can-next .lp-st-row { --fe: 56px; }
.lp-st-nav {
  position: absolute; top: calc(50% - 21px); z-index: 2; width: 40px; height: 40px; padding: 0; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--b2); background: var(--s3); color: var(--t1); box-shadow: 0 6px 18px rgba(2, 1, 12, 0.55);
  opacity: 0; visibility: hidden; transform: scale(0.85); transition: opacity 0.18s, transform 0.18s, background 0.15s, visibility 0s 0.18s;
}
.lp-st-nav.prev { inset-inline-start: 10px; }
.lp-st-nav.next { inset-inline-end: 10px; }
.lp-st-nav svg { width: 20px; height: 20px; }
[dir="rtl"] .lp-st-nav svg { transform: scaleX(-1); }
.lp-st-nav:hover { background: #302d60; }
.lp-st-wrap.can-prev .lp-st-nav.prev, .lp-st-wrap.can-next .lp-st-nav.next { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
@media (hover: none) { .lp-st-nav { display: none; } }
/* kart: kapak bulanık renk zemini olur (yatay kapağın yazıları dar kartta kesik görünmesin), ortada oyunun simgesi ya da arkadaşın avatarı */
.lp-story {
  --hb: 1; position: relative; flex: none; width: 118px; height: 206px; border-radius: 12px; overflow: hidden; border: 0; padding: 0; cursor: pointer;
  background: var(--s2); color: #fff; text-align: center; scroll-snap-align: start; text-decoration: none; isolation: isolate;
  box-shadow: 0 0 0 1px var(--b1), 0 2px 6px rgba(0, 0, 0, 0.3); transition: transform 0.18s, box-shadow 0.18s;
}
.lp-story:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--b2), 0 10px 22px rgba(2, 1, 12, 0.45); }
.lp-story:focus-visible { outline: 2px solid var(--acc2); outline-offset: 2px; }
.lp-story .bg {
  position: absolute; inset: -20px; z-index: -2; background-size: cover; background-position: center;
  filter: blur(16px) saturate(1.35) brightness(0.82); transform: scale(1.1); transition: transform 0.5s cubic-bezier(.2, .8, .2, 1);
}
.lp-story:hover .bg { transform: scale(1.22); }
.lp-story::after {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  background: radial-gradient(130% 60% at 50% 0%, rgba(255, 255, 255, 0.16), transparent 62%), linear-gradient(180deg, transparent 38%, rgba(8, 7, 22, 0.86) 100%);
}
.lp-story .hero { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%) scale(var(--hb)); transition: transform 0.28s cubic-bezier(.2, .8, .2, 1); }
.lp-story:hover .hero { transform: translate(-50%, -50%) scale(calc(var(--hb) * 1.07)); }
.lp-story .hero:not(.u) > img { display: block; width: 76px; height: 76px; filter: drop-shadow(0 10px 16px rgba(2, 1, 12, 0.55)); }
.lp-story .hero .gi { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 20px; font-size: 34px; font-weight: 800; box-shadow: 0 10px 22px rgba(2, 1, 12, 0.5); }
.lp-story .hero.u { padding: 3px; border-radius: 50%; background: linear-gradient(135deg, var(--acc), #2ad4c5); box-shadow: 0 10px 22px rgba(2, 1, 12, 0.5); }
.lp-story .hero.u.live { background: linear-gradient(135deg, #5ef0e1, #31d68f); }
.lp-story .hero.u > .lp-av { display: grid; box-shadow: 0 0 0 3px #15132f; }
.lp-story .hero.u .gb { position: absolute; inset-inline-end: -7px; bottom: -5px; width: 28px; height: 28px; border-radius: 8px; box-shadow: 0 0 0 2px #15132f, 0 3px 8px rgba(0, 0, 0, 0.45); }
.lp-story .nm { position: absolute; inset-inline: 8px; bottom: 11px; font-size: 13px; line-height: 1.25; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
.lp-story .nm b, .lp-story .nm small { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.lp-story .nm b { font-weight: 650; }
.lp-story .nm small { margin-top: 3px; font-size: 11.5px; font-weight: 500; color: rgba(255, 255, 255, 0.8); }
.lp-story .nm small.on::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-inline-end: 5px; border-radius: 50%; background: #31d68f; vertical-align: 1px; }
.lp-story .tag {
  position: absolute; top: 10px; inset-inline-end: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; color: #04201d; background: #5ef0e1; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.lp-story .tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #04201d; animation: lpBlink 1.6s ease-in-out infinite; }
@keyframes lpBlink { 50% { opacity: 0.25; } }
.lp-story.make { background: var(--s2); }
.lp-story.make::after { display: none; }
.lp-story.make .mk { position: absolute; inset: 0 0 56px; display: grid; place-items: center; overflow: hidden; }
.lp-story.make .mk .lp-av { width: 100% !important; height: 100% !important; border-radius: 0; font-size: 54px !important; box-shadow: none; }
.lp-story.make .plus { position: absolute; left: 50%; bottom: 38px; transform: translateX(-50%); width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--acc); color: #fff; box-shadow: 0 0 0 4px var(--s2); }
.lp-story.make .plus svg { width: 20px; height: 20px; }
.lp-story.make .nm { inset-inline: 6px; bottom: 9px; text-align: center; color: var(--t1); text-shadow: none; font-size: 12.5px; }

/* ---------- paylaşım kutusu ---------- */
.lp-compose { padding: 12px 16px 6px; }
.lp-compose .lp-crow { display: flex; align-items: center; gap: 10px; }
.lp-compose .lp-fake {
  flex: 1; min-width: 0; height: 42px; padding: 0 16px; border-radius: 21px; border: 0; background: var(--s2);
  text-align: start; color: var(--t3); font-size: 15.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: background 0.12s;
}
.lp-compose .lp-fake:hover { background: var(--s3); }
.lp-cacts { display: flex; gap: 4px; margin-top: 12px; padding-top: 6px; border-top: 1px solid var(--b1); }
.lp-cacts button { flex: 1; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 42px; border: 0; border-radius: 9px; background: none; color: var(--t2); font-weight: 600; font-size: 14.5px; white-space: nowrap; }
.lp-cacts button span { overflow: hidden; text-overflow: ellipsis; }
.lp-cacts button:hover { background: var(--hov); color: var(--t1); }
.lp-cacts button svg { width: 22px; height: 22px; }
.lp-cacts button.v svg { color: #a493ff; } .lp-cacts button.t svg { color: #3fe0cf; } .lp-cacts button.r svg { color: #ff7fa3; }
.lp-compose textarea, .lp-ta {
  width: 100%; min-height: 96px; max-height: 360px; resize: none; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--b2);
  background: var(--s0); font: 16px/1.5 var(--font); color: var(--t1); overflow-y: auto;
}
.lp-compose textarea:focus, .lp-ta:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px rgba(139, 116, 255, 0.18); }
.lp-compose textarea::placeholder, .lp-ta::placeholder { color: var(--t3); }
.lp-cfoot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; padding-bottom: 8px; }
.lp-cfoot .grow { flex: 1; }
.lp-count { font-size: 12px; color: var(--t3); font-variant-numeric: tabular-nums; }
.lp-count.over { color: var(--err); }
.lp-sel {
  height: 36px; padding: 0 30px 0 12px; border-radius: 9px; border: 1px solid transparent; background: var(--s2); color: var(--t1);
  font: 550 13px var(--font); -webkit-appearance: none; appearance: none; max-width: 100%;
  background-image: linear-gradient(45deg, transparent 50%, var(--t2) 50%), linear-gradient(135deg, var(--t2) 50%, transparent 50%);
  background-position: calc(100% - 15px) 15px, calc(100% - 10px) 15px; background-size: 5px 5px; background-repeat: no-repeat;
}
[dir="rtl"] .lp-sel { padding: 0 12px 0 30px; background-position: 15px 15px, 10px 15px; }
.lp-sel option { background: #1b1840; }

/* ---------- gönderi ---------- */
.lp-feed { display: flex; flex-direction: column; gap: 16px; }
.lp-post { padding: 12px 0 4px; overflow: visible; }
.lp-post.is-new { animation: rise 0.3s cubic-bezier(.2, .9, .3, 1.1); }
.lp-ph { display: flex; align-items: center; gap: 10px; padding: 0 16px; }
.lp-ph-tx { flex: 1; min-width: 0; }
.lp-ph-line { font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.lp-ph-in { color: var(--t2); font-weight: 500; }
.lp-ph-meta { display: flex; align-items: center; gap: 5px; margin-top: 2px; font-size: 13px; color: var(--t3); font-weight: 500; }
.lp-ph-meta a { color: inherit; text-decoration: none; }
.lp-ph-meta a:hover { text-decoration: underline; }
.lp-ph-meta svg { width: 13px; height: 13px; }
.lp-text { padding: 12px 16px 4px; font-size: 15.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--t1); }
.lp-text.big { font-size: 44px; line-height: 1.2; }
.lp-text.clamp { max-height: 10.5em; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
.lp-more-t { margin: 0 16px; padding: 0; border: 0; background: none; font-weight: 650; font-size: 14px; color: var(--acc2); }
.lp-hidnote { display: flex; align-items: center; gap: 8px; margin: 10px 16px 0; padding: 9px 12px; border-radius: 10px; font-size: 13px; font-weight: 550; color: var(--gold2); background: rgba(232, 196, 106, 0.08); border: 1px solid rgba(232, 196, 106, 0.26); }
.lp-hidnote svg { width: 16px; height: 16px; flex: none; }

/* oyun anı kartı: zarif, oyun rengiyle kenar vurgusu */
.lp-moment {
  --gc: #8b74ff;
  position: relative; overflow: hidden; margin: 12px 16px 2px; padding: 16px 18px; border-radius: 12px; isolation: isolate;
  background: linear-gradient(120deg, color-mix(in srgb, var(--gc) 22%, var(--s2)), var(--s2) 62%);
  border: 1px solid color-mix(in srgb, var(--gc) 30%, var(--b1));
}
.lp-moment::before { content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px; background: linear-gradient(180deg, var(--gc), color-mix(in srgb, var(--gc) 40%, transparent)); }
.lp-m-top { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; color: var(--t2); }
.lp-m-top img { width: 24px; height: 24px; border-radius: 7px; }
.lp-m-top .lp-m-ok { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 6px; border-radius: 999px; font-size: 11.5px; font-weight: 650; color: var(--gold2); background: rgba(232, 196, 106, 0.1); border: 1px solid rgba(232, 196, 106, 0.3); }
.lp-m-top .lp-m-ok svg { width: 15px; height: 15px; }
.lp-m-body { display: flex; align-items: center; gap: 16px; margin-top: 12px; }
.lp-m-icon {
  width: 58px; height: 58px; flex: none; display: grid; place-items: center; border-radius: 16px; font-size: 32px; line-height: 1;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  background: color-mix(in srgb, var(--gc) 18%, var(--s1)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--gc) 35%, transparent) inset;
}
.lp-m-tx { min-width: 0; flex: 1; }
.lp-m-text { margin: 0; font: 600 16.5px/1.4 var(--font-display); overflow-wrap: anywhere; color: var(--t1); }
.lp-m-text b { font-weight: 750; color: #fff; }
.lp-m-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.lp-m-chip { padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--b1); }
.lp-m-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.lp-m-big { display: flex; align-items: baseline; gap: 6px; }
.lp-m-big b { font: 750 clamp(28px, 5.5vw, 36px)/1 var(--font-display); letter-spacing: -0.02em; color: #fff; font-variant-numeric: tabular-nums; }
.lp-m-big span { font-size: 13.5px; font-weight: 600; color: var(--t2); }

/* tepkiler ve yorum sayısı, eylemler */
.lp-stats { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 22px; margin: 10px 16px 0; font-size: 14px; color: var(--t2); }
.lp-stats button { border: 0; background: none; padding: 2px 0; color: inherit; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.lp-stats button:hover { color: var(--t1); text-decoration: underline; text-underline-offset: 3px; }
.lp-remojis { display: inline-flex; }
.lp-remojis i {
  font-style: normal; width: 20px; height: 20px; display: inline-grid; place-items: center; border-radius: 50%; font-size: 12px; margin-inline-start: -4px;
  background: var(--s3); box-shadow: 0 0 0 2px var(--s1); font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
}
.lp-remojis i:first-child { margin-inline-start: 0; }
.lp-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 4px; margin: 8px 12px 0; padding-top: 4px; border-top: 1px solid var(--b1); }
.lp-act {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; border: 0; border-radius: 8px;
  background: none; color: var(--t2); font-weight: 600; font-size: 14.5px; touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.lp-act:hover { background: var(--hov); color: var(--t1); }
.lp-act svg { width: 20px; height: 20px; }
.lp-act .em { font-size: 18px; line-height: 1; font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; }
.lp-act.on { color: var(--acc2); }
.lp-act.on[data-r="love"], .lp-act.on[data-r="fire"] { color: #ff8fab; }
.lp-act.on[data-r="haha"], .lp-act.on[data-r="wow"] { color: var(--gold2); }
.lp-act.on[data-r="gg"] { color: #8ff0e5; }
.lp-act.pop .em, .lp-act.pop svg { animation: lpPop 0.42s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes lpPop { 0% { transform: scale(0.6); } 60% { transform: scale(1.35); } 100% { transform: scale(1); } }
.lp-picker {
  position: absolute; z-index: 45; bottom: calc(100% + 6px); inset-inline-start: 0; display: flex; gap: 2px; padding: 6px; border-radius: 999px;
  background: #191738; border: 1px solid var(--b2); box-shadow: var(--sh2); animation: lpPick 0.18s cubic-bezier(.2, 1.4, .4, 1);
}
@keyframes lpPick { from { opacity: 0; transform: translateY(8px) scale(0.9); } }
.lp-picker button {
  width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; font-size: 28px; line-height: 1; display: grid; place-items: center;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; transition: transform 0.14s;
}
.lp-picker button:hover, .lp-picker button:focus-visible { transform: translateY(-6px) scale(1.25); background: var(--hov); }
.lp-picker button[aria-pressed="true"] { background: rgba(139, 116, 255, 0.25); }

/* yorumlar */
.lp-comments { display: flex; flex-direction: column; gap: 10px; padding: 8px 16px 10px; }
.lp-comments:empty { display: none; }
.lp-cm { display: flex; gap: 8px; align-items: flex-start; }
.lp-cm-b { min-width: 0; max-width: calc(100% - 44px); }
.lp-cm-bubble { display: inline-block; max-width: 100%; padding: 8px 12px; border-radius: 16px; background: var(--s2); font-size: 14.5px; line-height: 1.45; overflow-wrap: anywhere; }
.lp-cm-bubble .lp-name { display: block; font-size: 13.5px; }
.lp-cm-bubble .tx { white-space: pre-wrap; }
.lp-cm.hid .lp-cm-bubble { border: 1px dashed rgba(232, 196, 106, 0.45); }
.lp-cm-meta { display: flex; gap: 12px; margin: 3px 12px 0; font-size: 12px; color: var(--t3); font-weight: 600; }
.lp-cm-meta button { border: 0; background: none; padding: 0; color: inherit; font-weight: 650; }
.lp-cm-meta button:hover { color: var(--t1); text-decoration: underline; }
.lp-cm-all { align-self: flex-start; border: 0; background: none; padding: 0; color: var(--t2); font-weight: 600; font-size: 14px; }
.lp-cm-all:hover { color: var(--t1); text-decoration: underline; }
.lp-cm-in { display: flex; gap: 8px; align-items: flex-end; }
.lp-cm-in .wrap { flex: 1; min-width: 0; display: flex; align-items: flex-end; gap: 4px; padding: 3px 4px 3px 14px; border-radius: 20px; background: var(--s2); border: 1px solid transparent; }
[dir="rtl"] .lp-cm-in .wrap { padding: 3px 14px 3px 4px; }
.lp-cm-in .wrap:focus-within { border-color: rgba(139, 116, 255, 0.55); }
.lp-cm-in textarea { flex: 1; min-width: 0; min-height: 34px; max-height: 140px; resize: none; padding: 7px 0; border: 0; background: none; font: 14.5px/1.4 var(--font); color: var(--t1); outline: none; }
.lp-cm-in textarea::placeholder { color: var(--t3); }
.lp-cm-in .lp-icbtn { width: 34px; height: 34px; color: var(--acc2); }
.lp-cm-in .lp-icbtn[disabled] { opacity: 0.4; }
.lp-cm-note { margin: 0; font-size: 13px; color: var(--t3); }

/* ---------- oyuncu sayfası ---------- */
.lp-prof { width: min(1200px, 100%); margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.lp-head { overflow: hidden; padding: 0; }
.lp-cover { position: relative; height: clamp(160px, 27vw, 340px); background-color: #1b1745; }
.lp-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(12, 11, 30, 0.5)); }
.lp-cv0 { background: radial-gradient(50% 80% at 20% 30%, rgba(139, 116, 255, 0.85), transparent 70%), radial-gradient(45% 70% at 80% 40%, rgba(42, 212, 197, 0.55), transparent 70%), radial-gradient(40% 60% at 55% 100%, rgba(255, 111, 159, 0.5), transparent 70%), #16123a; }
.lp-cv1 { background: radial-gradient(70% 90% at 50% 120%, #ffcf6b, transparent 60%), linear-gradient(180deg, #3b1d6e 0%, #c2457a 55%, #ff9a5a 100%); }
.lp-cv2 { background: radial-gradient(60% 50% at 70% 20%, rgba(255, 255, 255, 0.35), transparent 60%), repeating-radial-gradient(circle at 50% 160%, #1d7fd6 0 18px, #1966b8 18px 36px), #0e3f7a; }
.lp-cv3 { background: radial-gradient(40% 60% at 15% 100%, #2fbf71, transparent 70%), radial-gradient(45% 70% at 60% 110%, #1f9d5c, transparent 70%), radial-gradient(30% 50% at 90% 100%, #3fdc8c, transparent 70%), linear-gradient(180deg, #8fd6ff, #d8f5ff 70%); }
.lp-cv4 { background: radial-gradient(35% 55% at 20% 30%, #ffb3d9, transparent 70%), radial-gradient(35% 55% at 80% 60%, #c6a8ff, transparent 70%), radial-gradient(30% 45% at 55% 10%, #ffd6a8, transparent 70%), #f7c6e6; }
.lp-cv5 { background: linear-gradient(170deg, transparent 30%, rgba(61, 220, 151, 0.55) 45%, transparent 60%), linear-gradient(190deg, transparent 35%, rgba(139, 116, 255, 0.6) 52%, transparent 68%), linear-gradient(175deg, transparent 50%, rgba(42, 212, 197, 0.45) 62%, transparent 75%), #0b1730; }
.lp-cv6 { background: radial-gradient(30% 40% at 78% 28%, #fff1b8, #ffd56b 40%, transparent 70%), linear-gradient(180deg, #ffb36b 0%, #f58f4a 45%, #c96a3a 70%, #8a4a2a 100%); }
.lp-cv7 { background: radial-gradient(1.5px 1.5px at 10% 20%, #fff, transparent), radial-gradient(1.5px 1.5px at 30% 60%, #fff, transparent), radial-gradient(2px 2px at 70% 30%, #ffe9a8, transparent), radial-gradient(1.5px 1.5px at 85% 70%, #fff, transparent), linear-gradient(180deg, #0a0b2a, #1d2b6b 70%, #3a3f9a); }
.lp-cv8 { background: radial-gradient(6px 6px at 15% 30%, #fff 40%, transparent 60%), radial-gradient(5px 5px at 45% 70%, #ffe3ef 40%, transparent 60%), radial-gradient(7px 7px at 75% 25%, #fff 40%, transparent 60%), radial-gradient(5px 5px at 88% 80%, #ffe3ef 40%, transparent 60%), linear-gradient(160deg, #ffc2d9, #ff8fb8 60%, #e05f98); }
.lp-cv9 { background: radial-gradient(60% 80% at 30% 20%, #fff2c2, transparent 60%), radial-gradient(50% 70% at 80% 80%, #ffb84d, transparent 70%), linear-gradient(135deg, #f5b743, #e08a1f); }
.lp-head-row { position: relative; display: flex; align-items: flex-end; gap: 20px; padding: 0 28px 18px; margin-top: -64px; flex-wrap: wrap; }
.lp-head-row > .lp-av { box-shadow: 0 0 0 5px var(--s1), 0 10px 30px rgba(0, 0, 0, 0.45); }
.lp-head-tx { flex: 1; min-width: 220px; padding-bottom: 6px; }
.lp-head-tx h1 { margin: 0; font: 750 clamp(25px, 3.4vw, 33px)/1.15 var(--font-display); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.lp-head-tx .lp-meta { display: flex; align-items: center; gap: 10px; margin-top: 6px; flex-wrap: wrap; color: var(--t2); font-size: 15px; font-weight: 550; }
.lp-head-tx .lp-meta button { border: 0; background: none; padding: 0; color: inherit; font: inherit; }
.lp-head-tx .lp-meta button:hover { color: var(--t1); text-decoration: underline; }
.lp-head-tx .lp-pres { font-size: 14px; margin-top: 8px; }
.lp-head-act { display: flex; gap: 8px; flex-wrap: wrap; padding-bottom: 8px; }
.lp-tabs { display: flex; gap: 2px; padding: 0 18px; border-top: 1px solid var(--b1); overflow-x: auto; scrollbar-width: none; }
.lp-tabs a { position: relative; padding: 15px 16px 14px; color: var(--t2); text-decoration: none; font-weight: 600; font-size: 15px; white-space: nowrap; }
.lp-tabs a::before { content: ''; position: absolute; inset: 6px 2px; border-radius: 8px; z-index: 0; }
.lp-tabs a:hover::before { background: var(--hov); }
.lp-tabs a:hover { color: var(--t1); }
.lp-tabs a[aria-current="page"] { color: var(--acc2); }
.lp-tabs a[aria-current="page"]::after { content: ''; position: absolute; inset-inline: 8px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--acc); }
.lp-pgrid { display: grid; gap: 16px; align-items: start; }
@media (min-width: 920px) { .lp-pgrid { grid-template-columns: 360px minmax(0, 1fr); } .lp-pgrid > .lp-intro { position: sticky; top: calc(var(--topH) + 16px); } }
.lp-intro { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.lp-bio { margin: 0; font-size: 15px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; text-align: center; }
.lp-facts { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.lp-facts li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--t2); }
.lp-facts li svg { width: 19px; height: 19px; flex: none; color: var(--t3); }
.lp-facts li img { width: 20px; height: 20px; border-radius: 6px; }
.lp-facts b { color: var(--t1); }
.lp-fgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.lp-fcell { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; color: var(--t1); font-size: 12.5px; font-weight: 600; text-align: center; min-width: 0; }
.lp-fcell span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* oyun kartları (oyuncu sayfası) */
.lp-ggrid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.lp-gcard { --gc: #8b74ff; position: relative; overflow: hidden; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.lp-gcard::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: var(--gc); pointer-events: none; }
.lp-gtop { position: relative; display: flex; align-items: center; gap: 12px; }
.lp-gtop img { width: 52px; height: 52px; border-radius: 14px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35); }
.lp-gtop h4 { margin: 0; font: 650 16.5px/1.25 var(--font-display); }
.lp-gtop .lp-sub { font-size: 12.5px; }
.lp-gstats { position: relative; display: flex; flex-wrap: wrap; gap: 6px; }
.lp-gstat { display: inline-flex; flex-direction: column; padding: 7px 11px; border-radius: 10px; background: var(--s2); border: 1px solid var(--b1); min-width: 74px; }
.lp-gstat b { font: 700 17px/1.15 var(--font-display); font-variant-numeric: tabular-nums; }
.lp-gstat span { font-size: 11.5px; color: var(--t2); font-weight: 550; }
.lp-gcard .btn { position: relative; align-self: flex-start; }

/* ---------- kişi listeleri ---------- */
.lp-people { display: flex; flex-direction: column; }
.lp-person { display: flex; align-items: center; gap: 12px; padding: 8px 6px; border-radius: 10px; min-width: 0; }
.lp-person:hover { background: rgba(255, 255, 255, 0.03); }
.lp-person .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lp-person .tx .lp-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-person .acts { display: flex; gap: 6px; flex: none; }
.lp-rail-row { display: flex; align-items: center; gap: 11px; padding: 6px 6px; border-radius: 10px; text-decoration: none; color: var(--t1); min-width: 0; }
.lp-rail-row:hover { background: var(--hov); }
.lp-rail-row .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lp-rail-row .tx b { font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); }
.lp-pcard { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 12px 14px; text-align: center; min-width: 0; }
.lp-pcard .lp-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-pcard .lp-sub { font-size: 12px; min-height: 18px; }
.lp-pcard .btn { width: 100%; }
.lp-search { position: relative; }
.lp-search svg { position: absolute; inset-inline-start: 14px; top: 12px; width: 20px; height: 20px; color: var(--t3); pointer-events: none; }
.lp-search input { width: 100%; height: 44px; padding: 0 16px 0 44px; border-radius: 22px; border: 1px solid transparent; background: var(--s2); font-size: 15px; color: var(--t1); }
[dir="rtl"] .lp-search input { padding: 0 44px 0 16px; }
.lp-search input:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px rgba(139, 116, 255, 0.18); }
.lp-details > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; font: 650 15px/1.3 var(--font-display); }
.lp-details > summary::-webkit-details-marker { display: none; }
.lp-details > summary::after { content: '▾'; color: var(--t3); }
.lp-details[open] > summary { margin-bottom: 10px; }

/* ---------- bildirimler ---------- */
.lp-notes { padding: 8px; }
.lp-note { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--t1); cursor: pointer; }
.lp-note:hover { background: var(--hov); }
.lp-note.unread { background: rgba(139, 116, 255, 0.09); }
.lp-note.unread::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--acc); flex: none; }
.lp-note .lp-avw { position: relative; flex: none; }
.lp-note .lp-kind {
  position: absolute; inset-inline-end: -4px; bottom: -4px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font-size: 13px; line-height: 1; background: var(--s3); box-shadow: 0 0 0 2.5px var(--s1); font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
}
.lp-note .tx { flex: 1; min-width: 0; font-size: 14.5px; line-height: 1.4; overflow-wrap: anywhere; }
.lp-note .tx small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--acc2); font-weight: 600; }
.lp-note:not(.unread) .tx small { color: var(--t3); }
.lp-note .tx q { color: var(--t2); }
.lp-note .acts { display: flex; gap: 6px; margin-top: 8px; }

/* ---------- boş durum, iskelet, yeni gönderi düğmesi ---------- */
.lp-empty { padding: 34px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.lp-empty .art { font-size: 50px; line-height: 1; font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; }
.lp-empty h3 { margin: 4px 0 0; font: 650 18px/1.3 var(--font-display); }
.lp-empty p { margin: 0; color: var(--t2); max-width: 420px; }
.lp-sk { border-radius: 12px; min-height: 180px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.035)); background-size: 200% 100%; animation: shimmer 1.4s infinite; }
.lp-sk.s { min-height: 60px; }
.lp-newpill {
  position: sticky; top: calc(var(--topH) + 14px); z-index: 12; align-self: center; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 999px; border: 0;
  color: #fff; font-weight: 650; font-size: 13.5px; background: linear-gradient(180deg, #957fff, #7259f2); box-shadow: 0 10px 26px rgba(106, 82, 240, 0.45); animation: rise 0.25s ease-out;
}
.lp-newpill svg { width: 16px; height: 16px; }
.lp-endnote { text-align: center; color: var(--t3); font-size: 13px; padding: 8px 0 4px; }
.lp-sec-title { margin: 6px 4px 0; font: 650 14px/1.3 var(--font-display); color: var(--t2); display: flex; align-items: center; gap: 8px; }
.lp-sec-title svg { width: 17px; height: 17px; }

/* misafir ve kişiselleştirme kartı */
.lp-guest { padding: 22px 22px; display: flex; gap: 18px; align-items: center; flex-wrap: wrap; overflow: hidden; position: relative; border-color: rgba(232, 196, 106, 0.22) !important; }
.lp-guest::before { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(232, 196, 106, 0.1), rgba(139, 116, 255, 0.07) 60%, transparent); pointer-events: none; }
.lp-guest > * { position: relative; }
.lp-guest .art { font-size: 46px; line-height: 1; font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; }
.lp-guest .tx { flex: 1; min-width: 220px; }
.lp-guest h2 { margin: 0 0 6px; font: 700 20px/1.25 var(--font-display); letter-spacing: -0.01em; }
.lp-guest p { margin: 0; color: var(--t2); }

/* ---------- pencereler: profil düzenleme, şikâyet, tepki verenler ---------- */
body.lp-shell .sheet { background: #17152f; border-color: var(--b2); border-radius: 16px; }
.lp-sheet { width: min(620px, 100%); }
.lp-prev { position: relative; margin-bottom: 4px; }
.lp-prev .lp-cover { height: 120px; border-radius: 12px; overflow: hidden; }
.lp-prev .lp-av { position: absolute; inset-inline-start: 18px; bottom: 0; transform: translateY(32%); box-shadow: 0 0 0 4px #17152f; }
.lp-prev-pad { height: 34px; }
.lp-pickgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 8px; }
.lp-pickgrid button { height: 46px; border-radius: 12px; border: 1px solid var(--b1); background: var(--s2); font-size: 24px; line-height: 1; display: grid; place-items: center; font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; }
.lp-pickgrid button.ini { font: 700 18px/1 var(--font-display); color: var(--t2); }
.lp-pickgrid button:hover { background: var(--s3); }
.lp-pickgrid button[aria-pressed="true"] { border-color: var(--acc); background: rgba(139, 116, 255, 0.2); box-shadow: 0 0 0 2px rgba(139, 116, 255, 0.35); }
.lp-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.lp-swatches button { width: 36px; height: 36px; border-radius: 50%; border: 0; background: radial-gradient(120% 120% at 30% 20%, var(--a1), var(--a2)); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08); }
.lp-swatches button[aria-pressed="true"] { box-shadow: 0 0 0 3px #17152f, 0 0 0 5px var(--t1); }
.lp-covers { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.lp-covers button { position: relative; height: 46px; border-radius: 10px; border: 0; overflow: hidden; padding: 0; }
.lp-covers button .lp-cover { height: 100%; }
.lp-covers button[aria-pressed="true"] { box-shadow: 0 0 0 3px #17152f, 0 0 0 5px var(--t1); }
.lp-pvrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.lp-pvrow label { font-size: 14px; font-weight: 550; flex: 1; min-width: 200px; }
.lp-check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; font-weight: 550; cursor: pointer; }
.lp-check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--acc); flex: none; }
.lp-check small { display: block; color: var(--t3); font-weight: 450; margin-top: 2px; }
.lp-gchecks { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; margin-top: 4px; }
.lp-gchecks label { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--s2); border: 1px solid var(--b1); font-size: 13.5px; font-weight: 550; cursor: pointer; }
.lp-gchecks img { width: 22px; height: 22px; border-radius: 6px; }
.lp-gchecks input { accent-color: var(--acc); }
.lp-reasons { display: flex; flex-direction: column; gap: 6px; }
.lp-reasons label { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--b1); background: var(--s2); font-weight: 550; font-size: 14px; cursor: pointer; }
.lp-reasons label:has(input:checked) { border-color: var(--acc); background: rgba(139, 116, 255, 0.14); }
.lp-reasons input { accent-color: var(--acc); }
.lp-rtabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; }
.lp-rtabs button { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 9px; border: 0; background: var(--s2); font-weight: 600; font-size: 13px; color: var(--t2); }
.lp-rtabs button[aria-pressed="true"] { background: rgba(139, 116, 255, 0.22); color: var(--t1); }
.lp-rtabs .em { font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; font-size: 16px; }
.lp-rmark { margin-inline-start: auto; font-size: 20px; font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; }

@media (max-width: 560px) {
  body.lp-shell main { width: 100%; padding-top: 8px; }
  body.lp-shell .lp-main > .card, body.lp-shell .lp-feed > .card, body.lp-shell .lp-narrow > .card { border-radius: 0; border-inline: 0; }
  .lp-feedbar { padding: 0 12px; }
  .lp-head-row { padding: 0 16px 16px; margin-top: -48px; gap: 14px; }
  .lp-head-row > .lp-av { width: 108px !important; height: 108px !important; font-size: 44px !important; }
  .lp-head-tx { min-width: 100%; }
  .lp-head-act { width: 100%; }
  .lp-head-act > .btn, .lp-head-act > .lp-popw { flex: 1; }
  .lp-head-act > .lp-popw > .btn { width: 100%; }
  .lp-m-icon { width: 50px; height: 50px; font-size: 28px; border-radius: 14px; }
  .lp-m-text { font-size: 15.5px; }
  .lp-act span:not(.em) { font-size: 13px; }
  .lp-cacts button { gap: 6px; padding: 0 4px; } .lp-cacts button span { font-size: 12.5px; } .lp-cacts button svg { width: 19px; height: 19px; }
  .lp-story { --hb: 0.88; width: 104px; height: 184px; }
  .lp-person .acts .btn span { display: none; }
}
@media (prefers-reduced-motion: reduce) { .lp-story, .lp-story .bg, .lp-story .hero, .lp-st-row { transition: none; } .lp-story .tag::before { animation: none; } }

/* tepki düğmesinin sarmalayıcısı eylem satırında tam genişlik; üst çubuktaki avatarda emoji */
.lp-actions > .lp-popw { display: flex; min-width: 0; }
.lp-actions > .lp-popw > .lp-act { flex: 1; min-width: 0; }
.me-chip .avatar.lp-av { font-size: 13px; box-shadow: none; }
.me-chip .avatar.lp-av .e { font-size: 18px; }
/* sağ sütundaki kişi satırı: düğmeler adın altına iner, ad kırpılmaz */
.lp-right .lp-person { flex-wrap: wrap; row-gap: 8px; }
.lp-right .lp-person .acts { flex-basis: 100%; padding-inline-start: 60px; }

/* ---------------------------------------------------------------- oyun sayfası (#/g/<oyun>, Facebook sayfası gibi) */
.lp-gp { --gc: #8b74ff; }
.lp-gcover { height: clamp(170px, 30vw, 380px); background: radial-gradient(120% 100% at 70% 20%, color-mix(in srgb, var(--gc) 60%, #1b1745), #120f2c 75%); }
.lp-gcover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.lp-gav { position: relative; flex: none; width: 160px; height: 160px; padding: 6px; border-radius: 36px; background: var(--s1); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5); }
.lp-gav img { display: block; width: 100%; height: 100%; border-radius: 30px; }
.lp-gav .gi { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 30px; background: var(--gc); font: 800 64px/1 var(--font-display); color: #fff; }
.lp-ghead h1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lp-verified { display: inline-grid; place-items: center; color: var(--acc2); }
.lp-verified svg { width: 26px; height: 26px; }
.lp-gmeta { font-size: 14px !important; }
.lp-gmeta:empty { display: none !important; }
.lp-gmeta .sep { color: var(--t3); }
.lp-gon { display: inline-flex; align-items: center; gap: 6px; color: #7ee2b2; }
.lp-gon .d { width: 8px; height: 8px; border-radius: 50%; background: #31d68f; box-shadow: 0 0 8px #31d68f; }
.lp-gfr { display: inline-flex; align-items: center; gap: 8px; }
.lp-gintro { margin: 0 0 4px; font-size: 15px; line-height: 1.55; color: var(--t1); }
.lp-ctas { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.lp-gp .lp-sec-title { margin-top: 2px; }
/* karakter portresi: oyunun renginde ışıklı zemin, dekupe görsel alta oturur */
.lp-port {
  position: relative; display: block; width: 100%; aspect-ratio: 1; border-radius: 16px; overflow: hidden; isolation: isolate;
  background: radial-gradient(90% 75% at 50% 18%, color-mix(in srgb, var(--gc) 62%, #fff 12%), color-mix(in srgb, var(--gc) 26%, var(--s2)) 72%), var(--s2);
}
.lp-port::after { content: ''; position: absolute; inset: auto 0 0; height: 22%; background: linear-gradient(transparent, rgba(10, 9, 28, 0.28)); z-index: -1; }
.lp-port img { position: absolute; left: 7%; right: 7%; bottom: 0; width: 86%; height: 92%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.35)); transition: transform 0.35s cubic-bezier(.2, .8, .2, 1); }
.lp-port .ini { position: absolute; inset: 0; display: grid; place-items: center; font: 800 38px/1 var(--font-display); color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); }
.lp-cmgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.lp-cmgrid.wide { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.lp-cmini { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; color: var(--t1); text-decoration: none; font-size: 12.5px; font-weight: 600; text-align: center; }
.lp-cmini > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-cmini:hover .lp-port img, .lp-ccard:hover .lp-port img { transform: translateY(-3px) scale(1.03); }
.lp-gmini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; border-radius: 10px; overflow: hidden; }
.lp-gmini button { padding: 0; border: 0; aspect-ratio: 1; background: var(--s2); cursor: zoom-in; overflow: hidden; }
.lp-gmini img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s cubic-bezier(.2, .8, .2, 1); }
.lp-gmini button:hover img { transform: scale(1.06); }
.lp-hmini { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.lp-hmini li { display: flex; gap: 11px; align-items: flex-start; }
.lp-hmini b { display: block; font-size: 14.5px; font-weight: 650; }
.lp-hmini span:not(.ic) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13.5px; line-height: 1.45; color: var(--t2); }
.lp-gp .ic {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; font-size: 18px; line-height: 1;
  background: color-mix(in srgb, var(--gc) 20%, var(--s2)); font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
}
.lp-gfrow { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 12px 8px; }
.lp-gfrow small { font-size: 11.5px; color: var(--t3); font-weight: 550; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-gfrow small.now { color: #7ee2b2; font-weight: 700; letter-spacing: 0.04em; }
/* hakkında, nasıl oynanır: geniş sütun solda, bilgiler sağda */
@media (min-width: 920px) { .lp-pgrid.lp-pgrid-r { grid-template-columns: minmax(0, 1fr) 340px; } }
.lp-lead { margin: 0 0 14px; font: 650 17.5px/1.5 var(--font-display); color: var(--t1); }
.lp-para { margin: 0 0 12px; font-size: 15px; line-height: 1.7; color: #d9d8f3; }
.lp-para:last-child { margin-bottom: 0; }
.lp-feats { display: grid; gap: 10px; }
@media (min-width: 620px) { .lp-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lp-feat, .lp-mode { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 12px; background: var(--s2); border: 1px solid var(--b1); }
.lp-feat .ic, .lp-mode .ic { width: 42px; height: 42px; border-radius: 12px; font-size: 21px; }
.lp-feat b, .lp-mode b { display: block; font: 650 15px/1.35 var(--font-display); }
.lp-feat p, .lp-mode p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--t2); }
.lp-modes { display: flex; flex-direction: column; gap: 10px; }
.lp-info { display: flex; flex-direction: column; }
.lp-irow { display: flex; gap: 12px; align-items: flex-start; padding: 11px 2px; border-top: 1px solid var(--b1); }
.lp-irow:first-child { border-top: 0; padding-top: 2px; }
.lp-irow svg { width: 19px; height: 19px; flex: none; margin-top: 2px; color: var(--t3); }
.lp-irow .k { display: block; font-size: 12px; font-weight: 650; letter-spacing: 0.04em; color: var(--t3); }
.lp-irow .v { display: block; margin-top: 1px; font-size: 14.5px; font-weight: 600; color: var(--t1); line-height: 1.45; }
/* karakterler */
.lp-castgrid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 232px), 1fr)); }
.lp-ccard { display: flex; flex-direction: column; overflow: hidden; color: inherit; text-decoration: none; transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s; }
.lp-ccard:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--gc) 45%, transparent) !important; box-shadow: 0 14px 30px rgba(2, 1, 12, 0.45) !important; }
.lp-cport { position: relative; }
.lp-ccard .lp-port { aspect-ratio: auto; height: 220px; border-radius: 0; }
.lp-cbody { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px 16px; flex: 1; }
.lp-cbody h3 { margin: 0; font: 750 18px/1.25 var(--font-display); }
.lp-role { font-size: 13px; font-weight: 650; color: color-mix(in srgb, var(--gc) 55%, #fff); }
.lp-cbody p { margin: 8px 0 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 13.5px; line-height: 1.55; color: var(--t2); }
.lp-cmore { display: inline-flex; align-items: center; gap: 4px; margin-top: auto; padding-top: 10px; font-size: 13.5px; font-weight: 650; color: var(--acc2); }
.lp-cmore svg, .lp-backlink svg { width: 17px; height: 17px; }
[dir="rtl"] .lp-cmore svg, [dir="rtl"] .lp-backlink svg, [dir="rtl"] .lp-lbnav svg { transform: scaleX(-1); }
.lp-char { display: flex; flex-direction: column; gap: 16px; }
.lp-chero { display: grid; overflow: hidden; padding: 0 !important; }
@media (min-width: 760px) { .lp-chero { grid-template-columns: minmax(280px, 400px) minmax(0, 1fr); } }
.lp-cport.big .lp-port { aspect-ratio: auto; height: 100%; min-height: 380px; border-radius: 0; }
.lp-ctx { padding: 22px 26px 26px; min-width: 0; }
.lp-backlink { display: inline-flex; align-items: center; gap: 6px; color: var(--acc2); text-decoration: none; font-size: 13.5px; font-weight: 650; }
.lp-backlink:hover { color: #fff; }
.lp-ctx h2 { margin: 12px 0 2px; font: 800 clamp(26px, 3.2vw, 34px)/1.15 var(--font-display); letter-spacing: -0.015em; }
.lp-ctx .lp-role { font-size: 15px; }
.lp-quote {
  position: relative; margin: 18px 0; padding: 14px 18px; padding-inline-start: 48px; border-radius: 12px; color: var(--t1);
  background: color-mix(in srgb, var(--gc) 14%, var(--s2)); border: 1px solid color-mix(in srgb, var(--gc) 26%, transparent); font: italic 550 16.5px/1.5 var(--font-display);
}
.lp-quote::before { content: '\201C'; position: absolute; inset-inline-start: 14px; top: 6px; font: 900 48px/1 Georgia, serif; color: color-mix(in srgb, var(--gc) 70%, #fff); }
.lp-cstory p { margin: 0 0 12px; font-size: 15.5px; line-height: 1.7; color: #dcdbf4; }
.lp-likes { display: flex; gap: 12px; align-items: flex-start; margin-top: 6px; padding: 12px 14px; border-radius: 12px; background: var(--s2); border: 1px solid var(--b1); }
.lp-likes svg { width: 20px; height: 20px; flex: none; margin-top: 1px; color: #ff86ad; }
.lp-likes b { display: block; font-size: 12px; font-weight: 650; letter-spacing: 0.04em; color: var(--t3); }
.lp-likes span { font-size: 14.5px; color: var(--t1); }
/* nasıl oynanır */
.lp-steps { list-style: none; margin: 0; padding: 0; }
.lp-steps li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 2px; border-top: 1px solid var(--b1); }
.lp-steps li:first-child { border-top: 0; padding-top: 4px; }
.lp-steps .n {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font: 800 15px/1 var(--font-display); color: #fff;
  background: linear-gradient(145deg, color-mix(in srgb, var(--gc) 85%, #fff 10%), color-mix(in srgb, var(--gc) 60%, #000 20%)); box-shadow: 0 4px 12px color-mix(in srgb, var(--gc) 35%, transparent);
}
.lp-steps b { display: flex; align-items: center; gap: 8px; font: 650 16px/1.3 var(--font-display); }
.lp-steps b .ic { width: auto; height: auto; background: none; font-size: 18px; }
.lp-steps p { margin: 5px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--t2); }
.lp-tips { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.lp-tips li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 2px; font-size: 14px; line-height: 1.5; }
.lp-tips svg { width: 19px; height: 19px; flex: none; margin-top: 1px; color: var(--gold); }
.lp-playbox { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; background: linear-gradient(160deg, color-mix(in srgb, var(--gc) 22%, var(--s1)), var(--s1) 70%) !important; }
.lp-playbox img { width: 64px; height: 64px; border-radius: 16px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); }
.lp-playbox > b { font: 750 17px/1.3 var(--font-display); }
/* görseller ve büyütme */
.lp-gal { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.lp-gimg { position: relative; padding: 0; border: 0; border-radius: 12px; overflow: hidden; aspect-ratio: 3 / 2; background: var(--s2); cursor: zoom-in; box-shadow: 0 0 0 1px var(--b1); }
.lp-gimg img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s cubic-bezier(.2, .8, .2, 1); }
.lp-gimg:hover img { transform: scale(1.045); }
.lp-gimg.tall::before { content: ''; position: absolute; inset: -20px; background: var(--bg) center / cover; filter: blur(18px) brightness(0.62); }
.lp-gimg.tall img { position: relative; object-fit: contain; }
.lp-gimg.tall:hover img { transform: scale(1.02); }
.lp-gimg .cap { position: absolute; inset: auto 0 0; padding: 28px 14px 11px; text-align: start; font-size: 14px; font-weight: 650; color: #fff; background: linear-gradient(transparent, rgba(8, 7, 20, 0.85)); }
.lp-lb { position: relative; margin: 0; width: min(1120px, 100%); display: flex; flex-direction: column; gap: 10px; animation: rise 0.22s cubic-bezier(.2, .9, .3, 1.1); }
.lp-lb > .x { position: absolute; top: 10px; inset-inline-end: 10px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--b2); background: rgba(10, 9, 26, 0.66); color: #fff; font-size: 22px; line-height: 1; }
.lp-lbimg { position: relative; display: grid; place-items: center; border-radius: 14px; overflow: hidden; background: #05040f; }
.lp-lbimg img { display: block; max-width: 100%; max-height: 80vh; object-fit: contain; }
.lp-lbnav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--b2); background: rgba(10, 9, 26, 0.6); color: #fff; }
.lp-lbnav:hover { background: rgba(10, 9, 26, 0.85); }
.lp-lbnav svg { width: 22px; height: 22px; }
.lp-lbnav.prev { inset-inline-start: 12px; }
.lp-lbnav.next { inset-inline-end: 12px; }
.lp-lbbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 4px; }
.lp-lbbar figcaption { font: 650 15.5px/1.3 var(--font-display); color: var(--t1); }
.lp-lbn { font-size: 13px; color: var(--t3); font-variant-numeric: tabular-nums; }
/* gönderilerde oyun adı sayfaya bağlanır */
a.lp-m-g { display: inline-flex; align-items: center; gap: 9px; color: inherit; text-decoration: none; min-width: 0; }
a.lp-m-g:hover span, .lp-ph-in a:hover, .lp-gtop h4 a:hover { text-decoration: underline; }
.lp-ph-in a, .lp-gtop h4 a { color: inherit; text-decoration: none; }
@media (max-width: 560px) {
  .lp-ghead .lp-head-row { margin-top: -46px; }
  .lp-ghead .lp-head-act > .lp-popw { flex: none; }
  .lp-ghead .lp-head-act > .lp-popw > .btn { width: 46px; padding: 0; }
  .lp-gav { width: 112px; height: 112px; padding: 5px; border-radius: 27px; }
  .lp-gav img, .lp-gav .gi { border-radius: 22px; }
  .lp-gp .lp-intro > .card, .lp-gp .lp-char > .card { border-radius: 0; border-inline: 0; }
  .lp-castgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0 10px; }
  .lp-ccard .lp-port { height: 168px; }
  .lp-cbody { padding: 11px 12px 13px; }
  .lp-cbody h3 { font-size: 16px; }
  .lp-cbody p { -webkit-line-clamp: 2; font-size: 13px; }
  .lp-cport.big .lp-port { min-height: 0; height: 300px; }
  .lp-ctx { padding: 18px 16px 20px; }
  .lp-gal { padding: 0 10px; }
  .lp-gimg { border-radius: 10px; }
}
@media (prefers-reduced-motion: reduce) { .lp-port img, .lp-gimg img, .lp-ccard { transition: none; } }
/* oyun sayfası akış düzeninde: orta dar sahne sütunu, sağda oyunun menüsü ve kısa bilgileri */
.lp-gcol { display: flex; flex-direction: column; gap: 16px; }
.lp-gpl .lp-gcover { height: clamp(170px, 34vw, 260px); }
.lp-gpl .lp-head-row { margin-top: -58px; gap: 16px; padding: 0 22px 16px; }
.lp-gpl .lp-gav { width: 128px; height: 128px; padding: 5px; border-radius: 30px; }
.lp-gpl .lp-gav img, .lp-gpl .lp-gav .gi { border-radius: 25px; }
.lp-gpl .lp-ghead h1 { font-size: clamp(24px, 2.4vw, 30px); }
.lp-grail .lp-kv[aria-current="page"] { background: rgba(139, 116, 255, 0.14); color: var(--t1); font-weight: 650; }
.lp-grail .lp-kv[aria-current="page"] svg { color: var(--acc2); }
.lp-grail .lp-rsec > h3 > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-grail .lp-rtx { margin: 0 6px; font-size: 14px; line-height: 1.55; color: var(--t2); display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.lp-grail .lp-cmgrid, .lp-grail .lp-gmini, .lp-grail .lp-hmini { margin: 0 6px; }
.lp-grail .lp-hmini .ic { width: 30px; height: 30px; font-size: 16px; }
@media (max-width: 560px) {
  .lp-gpl .lp-head-row { margin-top: -46px; padding: 0 16px 16px; gap: 14px; }
  .lp-gpl .lp-gav { width: 104px; height: 104px; border-radius: 26px; }
  .lp-gpl .lp-gav img, .lp-gpl .lp-gav .gi { border-radius: 21px; }
}
@media (min-width: 1000px) {
  .lp-gpl .lp-nr { display: none !important; }
  .lp-gpl .lp-chero { grid-template-columns: 240px minmax(0, 1fr); }
  .lp-gpl .lp-cport.big .lp-port { min-height: 320px; }
}

/* ---------------------------------------------------------------- ana sayfa: oyunlar (oyun sayfalarıyla aynı dil) */
.hm { width: min(1360px, 100%); margin: 0 auto; display: flex; flex-direction: column; gap: 24px; }
.hm-hello h1 { margin: 0; font: 800 clamp(24px, 3vw, 32px)/1.15 var(--font-display); letter-spacing: -0.015em; }
.hm-hello p { margin: 6px 0 0; color: var(--t2); font-size: 15px; }
.hm-guest { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 18px !important; border-color: rgba(232, 196, 106, 0.3) !important; background: linear-gradient(135deg, rgba(232, 196, 106, 0.1), var(--s1) 60%) !important; font-weight: 600; }
/* öne çıkanlar: sinematik sahne (kapak yavaşça yaklaşır, oyunun renginde gölge, ince film greni, imleçle derinlik), arkada
   kapaktan ortam ışığı; genişte yanında sıradakiler listesi. Etkin satırın süre çizgisi dolunca sıradakine geçilir */
.hm-hero { --dur: 7s; --rail: 292px; --hh: clamp(380px, 40vw, 440px); position: relative; isolation: isolate; }
.hm-stage { position: relative; overflow: hidden; height: var(--hh); padding: 0 !important; isolation: isolate; touch-action: pan-y; border-radius: 18px !important; border-color: rgba(255, 255, 255, 0.06) !important; background: #0d0b24 !important; box-shadow: 0 40px 80px -34px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(0, 0, 0, 0.35) !important; }
.hm-stage::after { content: ''; position: absolute; inset: 0; z-index: 5; border-radius: inherit; pointer-events: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13), inset 0 0 0 1px rgba(255, 255, 255, 0.045); }
.hm-slides { position: absolute; inset: 0; }
.hm-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0s linear 1s, visibility 0s linear 1s; background: radial-gradient(120% 100% at 70% 20%, color-mix(in srgb, var(--gc) 60%, #1b1745), #120f2c 75%); }
.hm-slide.on { z-index: 1; opacity: 1; visibility: visible; transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1); }
.hm-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 68% 42%; scale: 1.045; translate: calc(var(--mx, 0) * -18px + var(--drag, 0) * 40px) calc(var(--my, 0) * -10px); transition: translate 1s cubic-bezier(0.2, 0.7, 0.2, 1); transform-origin: 72% 40%; }
.hm-slide:nth-child(even) .hm-bg { transform-origin: 30% 55%; }
.hm-slide.on .hm-bg { animation: hm-kb 12s cubic-bezier(0.25, 0.6, 0.3, 1) both; }
@keyframes hm-kb { from { scale: 1.15; } to { scale: 1.045; } }
.hm-shade { --sd: color-mix(in srgb, var(--gc) 16%, #07061a); position: absolute; inset: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--sd) 96%, transparent) 0%, color-mix(in srgb, var(--sd) 82%, transparent) 30%, color-mix(in srgb, var(--sd) 26%, transparent) 60%, transparent 80%),
    linear-gradient(0deg, rgba(6, 5, 20, 0.72), transparent 46%), radial-gradient(130% 100% at 55% 45%, transparent 55%, rgba(4, 3, 14, 0.5)); }
[dir="rtl"] .hm-shade { background: linear-gradient(270deg, color-mix(in srgb, var(--sd) 96%, transparent) 0%, color-mix(in srgb, var(--sd) 82%, transparent) 30%, color-mix(in srgb, var(--sd) 26%, transparent) 60%, transparent 80%),
    linear-gradient(0deg, rgba(6, 5, 20, 0.72), transparent 46%), radial-gradient(130% 100% at 45% 45%, transparent 55%, rgba(4, 3, 14, 0.5)); }
.hm-shade::after { content: ''; position: absolute; inset: 0; opacity: 0.1; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hm-in { position: absolute; z-index: 2; inset-block: 0; inset-inline-start: 0; width: min(600px, 64%); padding: 34px 44px; display: flex; flex-direction: column; justify-content: center; gap: 14px; translate: calc(var(--drag, 0) * 80px) 0; transition: translate 0.55s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.3s ease; }
.hm-slide:not(.on) .hm-in { opacity: 0; }
.hm-slide.on .hm-in > * { animation: hm-rise 0.9s cubic-bezier(0.2, 0.75, 0.2, 1) backwards; animation-delay: calc(0.2s + var(--i, 0) * 0.08s); }
@keyframes hm-rise { from { opacity: 0; translate: calc(var(--dx, 1) * 30px) 0; filter: blur(6px); } }
.drag .hm-bg, .drag .hm-in { transition: none; }
.hm-label { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px 6px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 750; letter-spacing: 0.12em; text-transform: uppercase; color: #f4d993; background: linear-gradient(180deg, rgba(232, 196, 106, 0.22), rgba(232, 196, 106, 0.08)); border: 1px solid rgba(232, 196, 106, 0.4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 6px 18px rgba(0, 0, 0, 0.25); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
[dir="rtl"] .hm-label { letter-spacing: 0; }
.hm-label svg { width: 13px; height: 13px; fill: currentColor; }
.hm-id { display: flex; align-items: center; gap: 18px; min-width: 0; }
.hm-id > img { flex: none; width: 80px; height: 80px; border-radius: 22px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16), 0 16px 34px rgba(0, 0, 0, 0.55); }
.hm-id h2 { margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font: 800 clamp(30px, 3.2vw, 46px)/1.04 var(--font-display); letter-spacing: -0.028em; color: #fff; text-shadow: 0 2px 26px rgba(0, 0, 0, 0.35); }
.hm-id h2 .lp-verified svg { width: 24px; height: 24px; }
.hm-meta { margin: 8px 0 0; color: rgba(255, 255, 255, 0.74); font-size: 14px; font-weight: 600; letter-spacing: 0.01em; }
.hm-intro { margin: 0; max-width: 500px; color: rgba(255, 255, 255, 0.86); font-size: 15.5px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hm-act { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.hm-act .btn svg, .gt-act .btn svg { width: 18px; height: 18px; }
.hm-hero .hm-act .btn { height: 48px; padding: 0 22px; border-radius: 14px; }
.hm-hero .hm-act .btn-primary { color: #15122e; background: linear-gradient(180deg, #fff, #ebe8ff); box-shadow: 0 1px 0 #fff inset, 0 0 0 1px rgba(255, 255, 255, 0.35), 0 14px 30px rgba(0, 0, 0, 0.4); transition: transform 0.12s, box-shadow 0.2s, background 0.2s; }
.hm-hero .hm-act .btn-primary svg { color: #6a52f0; }
.hm-hero .hm-act .btn-primary:hover:not([disabled]) { filter: none; background: #fff; box-shadow: 0 1px 0 #fff inset, 0 0 0 4px rgba(255, 255, 255, 0.16), 0 16px 34px rgba(0, 0, 0, 0.45); }
.hm-hero .hm-act .btn-ghost { color: #fff; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.18); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); }
.hm-hero .hm-act .btn-ghost:hover:not([disabled]) { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.28); }
.hm-hero .hm-act .hm-more { flex: none; width: 48px; padding: 0; border-radius: 50%; }
.hm-hero .hm-act .hm-more svg { width: 21px; height: 21px; }
[dir="rtl"] .hm-act .btn-ghost svg, [dir="rtl"] .gt-act a.btn svg { transform: scaleX(-1); }
/* cam düğmeler: önceki / sonraki / durdur */
.hm-nav, .hm-auto { flex: none; width: 38px; height: 38px; padding: 0; border-radius: 50%; display: grid; place-items: center; color: #fff; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(14, 12, 36, 0.42); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); transition: background 0.2s, border-color 0.2s, transform 0.15s; }
.hm-nav:hover, .hm-auto:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.3); }
.hm-nav:active, .hm-auto:active { transform: scale(0.93); }
.hm-nav svg { width: 18px; height: 18px; }
.hm-auto svg { width: 15px; height: 15px; }
[dir="rtl"] .hm-nav svg { transform: scaleX(-1); }
/* süre çizgisi: etkin satırda (genişte) ya da çizgide (dar ekranda) dolar; bitince sıradakine geçilir */
.hm-fill { pointer-events: none; transform: scaleX(0); transform-origin: left center; }
[dir="rtl"] .hm-fill { transform-origin: right center; }
.hm-hero.auto [aria-current="true"] > .hm-fill { animation-name: hm-prog; animation-duration: var(--dur); animation-timing-function: linear; animation-fill-mode: forwards; }
.hm-hero:not(.auto) [aria-current="true"] > .hm-fill { transform: scaleX(1); }
.hm-hero.hold .hm-fill, .hm-hero.away .hm-fill { animation-play-state: paused; }
@media (hover: hover) { .hm-hero:hover .hm-fill { animation-play-state: paused; } }
.hm-hero:has(:focus-visible) .hm-fill { animation-play-state: paused; }
@keyframes hm-prog { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* dar ekran: sahnenin alt kenarında hikâye gibi çizgiler */
.hm-ctl { position: absolute; z-index: 4; inset-inline: 24px; bottom: 16px; display: flex; align-items: center; gap: 8px; }
.hm-pg { flex: 0 1 380px; display: flex; gap: 6px; min-width: 0; margin-inline-end: auto; }
.hm-pgb { position: relative; flex: 1; height: 24px; padding: 0; border: 0; background: none; }
.hm-pgb::before, .hm-pgb .hm-fill { content: ''; position: absolute; inset-inline: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 3px; }
.hm-pgb::before { background: rgba(255, 255, 255, 0.26); }
.hm-pgb .hm-fill { display: block; background: #fff; box-shadow: 0 0 10px rgba(255, 255, 255, 0.45); }
.hm-pgb.done .hm-fill { transform: scaleX(1); }
.hm-hero.many .hm-in { padding-bottom: 72px; }
@media (hover: none) { .hm-ctl .hm-nav { display: none; } }
/* genişte: sahnenin yanında sıradakiler (sayaç, oklar, durdur, liste) ve arkada ortam ışığı */
.hm-rail, .hm-ambs { display: none; }
@media (min-width: 1200px) {
  .hm-hero { --hh: clamp(380px, 32vw, 460px); }
  .hm-intro { -webkit-line-clamp: 3; }
  .hm-hero.many { display: grid; grid-template-columns: minmax(0, 1fr) var(--rail); grid-template-rows: var(--hh); gap: 16px; }
  .hm-hero.many .hm-ctl { display: none; }
  .hm-hero.many .hm-in { padding-bottom: 34px; }
  .hm-rail { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; }
  .hm-ambs { display: block; position: absolute; z-index: -1; inset-block: 28px -22px; inset-inline: 3% calc(var(--rail) + 7%); pointer-events: none; }
  .hm-hero:not(.many) .hm-ambs { inset-inline-end: 4%; }
  .hm-amb { position: absolute; inset: 0; border-radius: 48px; background-position: center; background-size: cover; background-repeat: no-repeat; filter: blur(70px) saturate(1.5); opacity: 0; visibility: hidden; transition: opacity 1.4s ease, visibility 0s linear 1.4s; }
  .hm-amb.on { opacity: 0.5; visibility: visible; transition: opacity 1.4s ease; }
}
.hm-rhead { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 2px 2px 6px; }
.hm-num { display: inline-flex; align-items: baseline; gap: 7px; font: 650 13px/1 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: 0.06em; color: var(--t3); }
.hm-num b { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; color: var(--t1); }
.hm-rbtns { display: flex; gap: 6px; }
.hm-rail .hm-nav, .hm-rail .hm-auto { width: 34px; height: 34px; background: var(--s1); border-color: var(--b1); backdrop-filter: none; -webkit-backdrop-filter: none; }
.hm-rail .hm-nav:hover, .hm-rail .hm-auto:hover { background: var(--s2); border-color: var(--b2); }
.hm-rlist { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.hm-ri { position: relative; flex: 1 1 0; min-height: 0; max-height: 88px; display: flex; align-items: center; gap: 13px; padding: 0 14px; overflow: hidden; border-radius: 14px; border: 1px solid transparent; background: transparent; color: var(--t1); text-align: start; opacity: 0.56; transition: opacity 0.35s, background 0.35s, border-color 0.35s, box-shadow 0.35s; }
.hm-ri:hover { opacity: 0.92; background: rgba(255, 255, 255, 0.035); }
.hm-ri[aria-current="true"] { opacity: 1; background: linear-gradient(100deg, color-mix(in srgb, var(--gc) 17%, var(--s1)), var(--s1) 72%); border-color: color-mix(in srgb, var(--gc) 30%, var(--b1)); box-shadow: 0 16px 32px -14px rgba(0, 0, 0, 0.65); }
.hm-ri:focus-visible { outline-offset: 2px; border-radius: 14px; }
.hm-ri .hm-fill { position: absolute; inset: 0; background: linear-gradient(90deg, transparent 40%, color-mix(in srgb, var(--gc) 13%, transparent)); border-bottom: 2px solid color-mix(in srgb, var(--gc) 55%, #fff); }
[dir="rtl"] .hm-ri .hm-fill { background: linear-gradient(270deg, transparent 40%, color-mix(in srgb, var(--gc) 13%, transparent)); }
.hm-rth { position: relative; flex: none; width: 46px; height: 46px; }
.hm-rth img, .hm-rth .gi { display: block; width: 100%; height: 100%; border-radius: 13px; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4); transition: box-shadow 0.35s; }
.hm-rth .gi { display: grid; place-items: center; background: var(--gc); font: 800 18px/1 var(--font-display); color: #fff; }
.hm-ri[aria-current="true"] .hm-rth img { box-shadow: 0 0 0 2px color-mix(in srgb, var(--gc) 65%, #fff), 0 8px 18px rgba(0, 0, 0, 0.45); }
.hm-rtx { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.hm-rtx b { font: 700 14.5px/1.25 var(--font-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-rtx small { font-size: 12px; font-weight: 550; color: var(--t3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* bölümler */
.hm-sec { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.hm-sec > h2, .hm-title h2 { margin: 0; font: 750 21px/1.2 var(--font-display); letter-spacing: -0.01em; }
.hm-row { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: 2px; padding: 2px 2px 10px; scrollbar-width: thin; }
.hm-mini { flex: none; width: 236px; display: flex; flex-direction: column; overflow: hidden; padding: 0 !important; color: inherit; text-decoration: none; scroll-snap-align: start; transition: transform 0.2s, border-color 0.2s; }
.hm-mini:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--gc) 45%, transparent) !important; }
.hm-mthumb { position: relative; display: block; height: 118px; background: radial-gradient(120% 100% at 70% 20%, color-mix(in srgb, var(--gc) 55%, #1b1745), #120f2c 75%); }
.hm-mthumb .cv { width: 100%; height: 100%; object-fit: cover; display: block; }
.hm-mthumb .ic { position: absolute; inset-inline-start: 12px; bottom: -20px; width: 46px; height: 46px; border-radius: 13px; box-shadow: 0 0 0 3px var(--s1), 0 6px 14px rgba(0, 0, 0, 0.4); }
.hm-mtx { display: flex; flex-direction: column; gap: 2px; padding: 26px 12px 2px; min-width: 0; }
.hm-mtx b { font-size: 14.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-mtx small { font-size: 12px; color: var(--t3); font-weight: 550; }
.hm-mini .btn { align-self: flex-start; margin: 8px 12px 12px; }
/* araç çubuğu */
.hm-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.hm-title { display: flex; align-items: baseline; gap: 10px; }
.hm-count { color: var(--t3); font-size: 14px; font-weight: 600; }
.hm-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hm-search { position: relative; display: block; }
.hm-search svg { position: absolute; inset-inline-start: 13px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--t3); pointer-events: none; }
.hm-search input { width: min(280px, 62vw); height: 38px; padding: 0 14px; padding-inline-start: 38px; border-radius: 19px; border: 1px solid transparent; background: var(--s2); color: var(--t1); font-size: 14px; -webkit-appearance: none; appearance: none; }
.hm-search input::placeholder { color: var(--t3); }
.hm-search input:focus { outline: none; border-color: rgba(139, 116, 255, 0.55); box-shadow: 0 0 0 3px rgba(139, 116, 255, 0.16); background: var(--s1); }
.hm-sort { height: 38px; }
.hm-seg { align-self: flex-start; flex-wrap: wrap; }
/* oyun kartı (Facebook sayfa kartı gibi): kapak, üstüne binen simge, ad, tür · oyuncu, tanıtım, oynayan arkadaşlar, oyna */
.hm-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.gt { position: relative; display: flex; flex-direction: column; overflow: hidden; padding: 0 !important; transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s; }
.gt:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--gc, #8b74ff) 45%, transparent) !important; box-shadow: 0 16px 34px rgba(2, 1, 12, 0.5) !important; }
.gt-cover { position: relative; aspect-ratio: 1.9; overflow: hidden; background: radial-gradient(120% 100% at 70% 20%, color-mix(in srgb, var(--gc, #8b74ff) 55%, #1b1745), #120f2c 75%); }
.gt-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s cubic-bezier(.2, .8, .2, 1); }
.gt:hover .gt-cover img { transform: scale(1.04); }
.gt-badges { position: absolute; top: 10px; inset-inline-end: 10px; z-index: 2; display: flex; gap: 6px; pointer-events: none; }
.gt-on, .gt-maint { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 11.5px; font-weight: 750; color: #fff; background: rgba(8, 7, 22, 0.72); }
.gt-on[hidden] { display: none; }
.gt-on .d { width: 7px; height: 7px; border-radius: 50%; background: #31d68f; box-shadow: 0 0 8px #31d68f; }
.gt-maint { color: #2a1c00; background: var(--gold); }
.gt-body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 0 16px 16px; }
.gt-head { display: flex; align-items: flex-end; gap: 12px; margin-top: -30px; min-width: 0; }
.gt-icon { position: relative; z-index: 2; flex: none; width: 72px; height: 72px; padding: 4px; border-radius: 20px; background: var(--s1); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45); pointer-events: none; }
.gt-icon img { display: block; width: 100%; height: 100%; border-radius: 16px; }
.gt-icon .gi { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 16px; background: var(--gc); font: 800 28px/1 var(--font-display); color: #fff; }
.gt-tx { min-width: 0; margin-top: 36px; padding-bottom: 2px; }
.gt-tx h3 { margin: 0; display: flex; align-items: center; gap: 6px; min-width: 0; font: 750 17.5px/1.25 var(--font-display); }
.gt-tx h3 .lp-verified svg { width: 18px; height: 18px; }
.gt-link { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--t1); text-decoration: none; outline: none; }
.gt-link::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.gt-link:focus-visible::after { border-radius: inherit; box-shadow: 0 0 0 3px var(--gc, #8b74ff) inset; }
.gt:hover .gt-link { color: #fff; }
.gt-meta { margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 550; color: var(--t2); }
.gt-intro { margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13.5px; line-height: 1.5; color: var(--t2); }
.gt-fr { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--t2); }
.gt-act { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 4px; }
.gt-act .btn { flex: 1; min-width: 0; }
/* girişsiz giriş ekranı: başlığın altında oyun simgeleri, giriş kutusunun altında tam genişlikte aynı oyun kartları */
.hm-icons { display: grid; grid-template-columns: repeat(6, minmax(0, 64px)); gap: 10px; }
.hm-icons a { display: block; border-radius: 16px; transition: transform 0.2s; }
.hm-icons a:hover { transform: translateY(-3px) rotate(-2deg); }
.hm-icons img { display: block; width: 100%; aspect-ratio: 1; border-radius: 16px; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.4); }
.hm-visit { margin: 40px auto 0; width: min(1360px, 100%); }
.hm-visit .gt { background: var(--s1); border: 1px solid var(--b1); backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: 12px; }
@media (max-width: 760px) {
  .hm { gap: 20px; }
  .hm-hero { --hh: 480px; }
  .hm-bg { object-position: 62% 30%; }
  .hm-shade, [dir="rtl"] .hm-shade { background: linear-gradient(0deg, color-mix(in srgb, var(--sd) 97%, transparent) 0%, color-mix(in srgb, var(--sd) 84%, transparent) 40%, color-mix(in srgb, var(--sd) 14%, transparent) 70%, transparent); }
  .hm-in, .hm-hero.many .hm-in { inset: auto 0 0 0; width: 100%; padding: 20px 18px 30px; justify-content: flex-end; gap: 10px; }
  .hm-hero.many .hm-in { padding-bottom: 58px; }
  .hm-id { gap: 14px; }
  .hm-id > img { width: 60px; height: 60px; border-radius: 17px; }
  .hm-id h2 { font-size: 28px; }
  .hm-intro { font-size: 14.5px; -webkit-line-clamp: 2; }
  .hm-act .btn { flex: 1; }
  .hm-hero .hm-act .btn { height: 46px; padding: 0 16px; }
  .hm-hero .hm-act .hm-more { position: absolute; top: 14px; inset-inline-end: 16px; width: 42px; height: 42px; }
  .hm-hero .hm-act .hm-more svg { width: 20px; height: 20px; }
  .hm-ctl { inset-inline: 18px; bottom: 12px; }
  .hm-pg { flex: 1; }
}
@media (max-width: 560px) {
  .hm-hello, .hm-sec > h2, .hm-bar, .hm-seg { margin-inline: 12px; }
  .hm-stage { border-radius: 0 !important; border-inline: 0 !important; }
  .hm-row { padding-inline: 12px; scroll-padding-inline: 12px; }
  .hm-grid { padding: 0 10px; gap: 12px; }
  .hm-tools { width: 100%; flex-wrap: nowrap; }
  .hm-search { flex: 1; min-width: 0; }
  .hm-search input { width: 100%; }
  .hm-sort { flex: none; max-width: 46%; }
  .hm-seg { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: calc(100% - 24px); }
  .hm-seg::-webkit-scrollbar { display: none; }
  .hm-seg button { flex: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hm-slide, .hm-slide.on, .hm-in, .hm-amb, .hm-amb.on, .hm-ri, .gt, .gt-cover img, .hm-mini { transition: none; }
  .hm-slide.on .hm-bg, .hm-slide.on .hm-in > * { animation: none; }
  .hm-bg { translate: none; }
}

/* ---------- oyun karakterleri: akış, dizin, karakter sayfası ---------- */
.lp-left .lp-li.c { color: #ffd27a; background: linear-gradient(145deg, rgba(245, 183, 67, 0.28), rgba(245, 183, 67, 0.1)); }
.lc-av { position: relative; display: inline-grid; place-items: end center; flex: none; border-radius: 50%; overflow: hidden; isolation: isolate; --gc: #8b74ff;
  background: radial-gradient(90% 75% at 50% 18%, color-mix(in srgb, var(--gc) 62%, #fff 12%), color-mix(in srgb, var(--gc) 26%, var(--s2)) 72%), var(--s2); text-decoration: none; }
.lc-av img { width: 88%; height: 92%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.3)); }
.lc-av .ini { align-self: center; font-weight: 800; color: #fff; }
.lp-head-row > .lc-av { box-shadow: 0 0 0 5px var(--s1), 0 10px 30px rgba(0, 0, 0, 0.45); }
.lc-handle { color: var(--t3); font-size: 13px; font-weight: 500; margin-inline-start: 6px; }
.lc-tag { color: var(--acc2); font-weight: 650; text-decoration: none; }
.lc-tag:hover { text-decoration: underline; }
.lc-mood { color: var(--t2); }
.lc-replyto { display: flex; align-items: center; gap: 6px; padding: 0 16px; margin-top: -4px; font-size: 13px; color: var(--t3); }
.lc-replyto svg { width: 14px; height: 14px; transform: scaleY(-1) rotate(90deg); }
.lc-text { font-size: 15.5px; }
.lc-post { border-top: 3px solid color-mix(in srgb, var(--gc) 70%, transparent); }
.lc-cm .lp-cm-bubble { background: color-mix(in srgb, var(--acc) 14%, var(--s2)); }
.lc-re { display: inline-flex; align-items: center; gap: 6px; color: var(--t2); font-size: 14px; }
.lc-hero { display: flex; gap: 18px; align-items: center; padding: 20px 22px; background: radial-gradient(80% 140% at 0% 0%, rgba(245, 183, 67, 0.2), transparent 60%), radial-gradient(70% 120% at 100% 100%, rgba(139, 116, 255, 0.24), transparent 60%), var(--s1); }
.lc-hero h1 { margin: 0; font: 750 26px/1.15 var(--font-display); }
.lc-hero p { margin: 6px 0 0; color: var(--t2); font-size: 14.5px; }
.lc-hero-art { font-size: 46px; line-height: 1; flex: none; }
.lc-sel { height: 36px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--b2); background: var(--s2); color: var(--t1); font: inherit; font-size: 13.5px; max-width: 220px; }
.lc-tools { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.lc-search { flex: 1; min-width: 200px; height: 40px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--b2); background: var(--s2); color: var(--t1); font: inherit; }
.lc-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.lc-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 12px; text-align: center; border-top: 3px solid color-mix(in srgb, var(--gc) 70%, transparent); }
.lc-card-top { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--t1); text-decoration: none; min-width: 0; width: 100%; }
.lc-card-top b { font-size: 15.5px; margin-top: 4px; }
.lc-card-top .lp-sub { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.lc-game { font-size: 12px; color: var(--t3); }
.lc-card .btn { width: 100%; }
.lc-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--s3); font-size: 12.5px; font-weight: 600; color: var(--t1); }
.lc-chip.quiet { color: var(--t3); font-weight: 500; }
.lc-chip.big { margin-top: 10px; font-size: 14px; padding: 6px 12px; }
.lc-cover { background: radial-gradient(120% 100% at 70% 20%, color-mix(in srgb, var(--gc) 60%, #1b1745), #120f2c 75%); }
.lc-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; filter: saturate(0.9) brightness(0.8); }
.lc-moods { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.lc-moods li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; }
.lc-moods .e { font-size: 22px; width: 28px; text-align: center; }
.lc-moods .lp-sub { margin-inline-start: auto; font-size: 12.5px; }
.lc-relgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.lc-rel { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; color: var(--t1); text-decoration: none; font-size: 13px; font-weight: 600; min-width: 0; }
.lc-rel small { color: var(--t3); font-weight: 500; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.lc-traits { display: flex; flex-direction: column; gap: 12px; }
.lc-trait { display: grid; grid-template-columns: 120px minmax(0, 1fr) 24px; gap: 10px; align-items: center; font-size: 14px; color: var(--t2); }
.lc-trait .bar { height: 8px; border-radius: 4px; background: var(--s3); overflow: hidden; }
.lc-trait .bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--acc), var(--gold)); }
.lc-trait b { text-align: end; color: var(--t1); }
.lc-rrow { display: flex; gap: 10px; align-items: flex-start; padding: 7px 6px; border-radius: 10px; color: var(--t1); text-decoration: none; min-width: 0; }
.lc-rrow:hover { background: var(--hov); }
.lc-rrow .tx { display: flex; flex-direction: column; min-width: 0; }
.lc-rrow .tx b { font-size: 14px; }
.lc-rrow .tx span { font-size: 13px; color: var(--t2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lc-golink { align-self: flex-start; margin: 10px 0 4px; }
@media (max-width: 560px) { .lc-hero { padding: 16px; } .lc-hero-art { font-size: 36px; } .lc-trait { grid-template-columns: 96px minmax(0, 1fr) 22px; } }
.lc-promo { display: flex; align-items: center; gap: 12px; padding: 12px 16px; color: var(--t1); text-decoration: none; }
.lc-promo .e { font-size: 28px; }
.lc-promo div { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.lc-promo div span { font-size: 13px; color: var(--t2); }
.lc-promo svg { width: 18px; height: 18px; color: var(--t3); }
@media (min-width: 1280px) { .lc-promo { display: none; } }

/* kişi ve karakter sayfaları oyun sayfası düzeninde (orta sahne sütunu + sağda menü) */
.lp-gpl .lp-pcover { height: clamp(170px, 34vw, 260px); }
.lp-gpl .lp-phead .lp-head-row > .lp-av, .lp-gpl .lc-head .lp-head-row > .lc-av { width: 128px !important; height: 128px !important; }
.lp-gpl .lp-phead .lp-head-tx h1, .lp-gpl .lc-head .lp-head-tx h1 { font-size: clamp(24px, 2.4vw, 30px); }
.lp-gpl .lp-phead .lp-badge { font-size: 11px; }
.lp-grail .lp-pbio { text-align: start; margin-bottom: 4px; }
.lp-grail .lp-facts { margin-top: 10px; }
.lp-grail .lp-fgrid { gap: 8px; }
.lp-grail .lp-fcell span { font-size: 12.5px; }
.lp-grail .lp-quote { margin: 0 0 10px; font-size: 14px; }
.lp-grail .lc-relgrid { gap: 8px; }
.lp-gpl .lp-gbody .lp-ggrid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
@media (max-width: 560px) { .lp-gpl .lp-phead .lp-head-row > .lp-av, .lp-gpl .lc-head .lp-head-row > .lc-av { width: 104px !important; height: 104px !important; } }