/* =====================================================================
   HideOut · modern, sade sosyal medya arayüzü (Instagram + Threads/X)
   ===================================================================== */

/* ===== Vurgu rengi (her biri [data-pal] ile herhangi bir elemente uygulanır) ===== */
:root,[data-pal=gates]{--acc1:#1d9bf0;--ink:#fff;--heart:#ff3040}
[data-pal=fog]{--acc1:#e7e9ea;--ink:#0a0a0a}
[data-pal=amber]{--acc1:#f5a524;--ink:#1a1200}
[data-pal=violet]{--acc1:#7c6cff;--ink:#fff}

/* ===== Tema: gece (varsayılan) / gündüz ===== */
:root{
  --bgBase:#0a0a0a;--bg:#0a0a0a;
  --surface:#141414;--soft:#1c1c1c;--card:#141414;
  --text:#f5f5f5;--muted:#a3a3a3;--line:#262626;--edge:#333;
  --glass:rgba(10,10,10,.97);--glass-strong:#0a0a0a;
  --link:#58a6ff;--tab-h:52px;
  --sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);
  --sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px);
  --f-ui:'Onest',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  color-scheme:dark;
}
:root[data-theme=light]{
  --bgBase:#fff;--bg:#fff;
  --surface:#fafafa;--soft:#f0f0f0;--card:#fafafa;
  --text:#0a0a0a;--muted:#737373;--line:#e6e6e6;--edge:#d4d4d4;
  --glass:rgba(255,255,255,.97);--glass-strong:#fff;--link:#0a66c2;
  color-scheme:light;
}
:root[data-theme=light][data-pal=fog]{--acc1:#0a0a0a;--ink:#fff}

/* ===== iOS / Android sıfırlamaları ===== */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--bgBase)}
body{
  margin:0;background:var(--bg);color:var(--text);
  font:400 15px/1.4 var(--f-ui);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  min-height:100vh;min-height:-webkit-fill-available;min-height:100dvh;
  overscroll-behavior-y:contain;touch-action:pan-x pan-y;overflow-x:hidden;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
}
body.lock{position:fixed;left:0;right:0;width:100%;overflow:hidden}
.bg{display:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;
  -webkit-appearance:none;appearance:none;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea,select{
  -webkit-user-select:text;user-select:text;font:inherit;font-size:16px;color:var(--text);       /* 16px altı iOS'ta otomatik zoom yapar */
  background:var(--soft);border:1px solid transparent;border-radius:10px;
  padding:13px 14px;width:100%;margin:0;outline:none;
  -webkit-appearance:none;appearance:none;transition:border-color .15s;
}
input::placeholder,textarea::placeholder{color:var(--muted)}
input:focus,textarea:focus{border-color:var(--edge)}
input:disabled{opacity:.55}
input[type=date]{min-height:48px;text-align:left}
input[type=file]{display:none}
textarea{resize:none;overflow:hidden;line-height:1.45}
a{color:var(--acc1);text-decoration:none;-webkit-touch-callout:none}
img{display:block;max-width:100%;-webkit-user-drag:none}
b,strong{font-weight:600}
.muted{color:var(--muted)}.center{text-align:center}
.lab,.pix{font-size:13px;color:var(--muted)}
.ic{width:24px;height:24px;flex:none}

/* ===== İskelet ===== */
#app{max-width:600px;margin:0 auto;min-height:100vh;min-height:100dvh;
  padding:0 var(--sar) calc(var(--tab-h) + var(--sab)) var(--sal)}
#app.public{padding-bottom:calc(var(--sab) + 24px)}
.top{position:-webkit-sticky;position:sticky;top:0;z-index:30;padding-top:var(--sat);
  background:var(--glass);border-bottom:1px solid var(--line);
  }
.top-in{height:52px;display:flex;align-items:center;gap:8px;padding:0 6px 0 16px}
.top-in .grow{flex:1;display:flex;justify-content:center;min-width:0;font-weight:600;font-size:16px}
.brand{margin:0;cursor:pointer;font:700 23px/1 var(--f-ui);letter-spacing:-.04em;color:var(--text)}
.brand.sm{font-size:20px;cursor:default}
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:99px;background:var(--soft);font-size:12.5px;font-weight:500;color:var(--muted);white-space:nowrap}
.icon-btn{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;transition:background .15s}
.icon-btn:active{background:var(--soft)}

/* alt çubuk: düz, tam genişlik */
.tabbar{position:fixed;bottom:0;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);
  width:100%;max-width:600px;z-index:40;display:flex;justify-content:space-around;align-items:center;
  height:calc(var(--tab-h) + var(--sab));padding:0 8px var(--sab);
  background:var(--glass);border-top:1px solid var(--line);
  }
.kb .tabbar{display:none}
.tab{position:relative;flex:1;height:var(--tab-h);display:grid;place-items:center;color:var(--muted);transition:color .15s}
.tab.on{color:var(--text)}
.tab.on .ic{stroke-width:2.3}
.tab .badge{position:absolute;top:8px;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:var(--heart);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;border:2px solid var(--bg)}
.tab-plus{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;border:1.6px solid currentColor;color:var(--text)}
.tab-plus .ic{width:20px;height:20px;stroke-width:2.2}

/* düğmeler */
.btn-primary,.linkbox button,.seg-sw button.on,.pill-n,.newpill{background:var(--acc1);color:var(--ink)}
.btn-primary{height:46px;width:100%;border-radius:10px;font-weight:600;font-size:15px;transition:opacity .15s}
.btn-primary:active{opacity:.85}
.btn-primary:disabled{opacity:.45}
.btn-ghost{height:40px;width:100%;border:1px solid var(--edge);border-radius:10px;font-weight:600;font-size:14px;background:transparent;transition:background .15s}
.btn-ghost:active{background:var(--soft)}
.btn-danger{color:#ff4d5e}

.av{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none;background:var(--soft)}
.av.ph{display:grid;place-items:center;font-weight:600;font-size:16px;color:var(--text);background:var(--soft);border:1px solid var(--line)}
.av.sm{width:30px;height:30px;font-size:13px}
.av.lg{width:84px;height:84px;font-size:32px}
.tab .av{width:26px;height:26px;font-size:11px}
.tab.on .av{box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px var(--text)}

.pull{height:0;overflow:hidden;display:flex;justify-content:center;align-items:flex-end;transition:height .2s}
.pull span{width:22px;height:22px;margin-bottom:8px;border:2px solid var(--line);border-top-color:var(--text);border-radius:50%;opacity:0}
.pull.go span{opacity:1;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ===== Hikâyeler ===== */
.stories{display:flex;gap:14px;padding:14px 14px 12px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;border-bottom:1px solid var(--line)}
.stories::-webkit-scrollbar{display:none}
.story{display:flex;flex-direction:column;align-items:center;gap:6px;width:68px;flex:none;font-size:12px;color:var(--muted)}
.story span:last-child{max-width:68px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ring{position:relative;flex:none;width:66px;height:66px;aspect-ratio:1/1;border-radius:50%;padding:3px;border:2px solid var(--line);display:grid;grid-template-columns:100%;grid-template-rows:100%;place-items:center;overflow:visible}
.ring.has{border-color:var(--acc1)}
.ring.has.seen{border-color:var(--edge)}
.ring .av{width:100%;height:100%;min-width:0;min-height:0;aspect-ratio:1/1;object-fit:cover;border-radius:50%;font-size:24px}
.ring .plus{position:absolute;right:-2px;bottom:-2px;width:22px;height:22px;border-radius:50%;color:var(--ink);background:var(--acc1);border:2px solid var(--bg);display:grid;place-items:center}
.ring .plus .ic{width:12px;height:12px;stroke-width:3}
.viewer{position:fixed;inset:0;z-index:100;background:#000;display:flex;flex-direction:column;color:#fff;
  height:100vh;height:100dvh;-webkit-user-select:none;user-select:none}
.viewer img.full{flex:1;min-height:0;width:100%;object-fit:contain}
.bars{display:flex;gap:4px;padding:calc(var(--sat) + 10px) 12px 8px;position:absolute;top:0;left:0;right:0;z-index:2}
.bars i{flex:1;height:2px;border-radius:2px;background:rgba(255,255,255,.3);overflow:hidden}
.bars i b{display:block;height:100%;width:0;background:#fff}
.bars i.done b{width:100%}
.v-head{position:absolute;top:calc(var(--sat) + 22px);left:0;right:0;z-index:2;display:flex;align-items:center;gap:10px;padding:10px 12px;background:linear-gradient(#0009,transparent)}
.v-head .grow{flex:1;font-weight:600}
.v-cap{position:absolute;bottom:0;left:0;right:0;padding:40px 20px calc(var(--sab) + 24px);text-align:center;background:linear-gradient(transparent,#000c);font-size:16px}
.v-tap{position:absolute;inset:0;display:flex;z-index:1}
.v-tap div{flex:1}.v-tap div:first-child{flex:.35}

/* ===== Gönderiler ===== */
.post{position:relative;border-bottom:1px solid var(--line)}
.btn-i{display:flex;align-items:center;gap:6px;height:42px;padding:0 9px;font-size:14px;color:var(--text);transition:background .15s;border-radius:21px}
.btn-i:active{background:var(--soft)}
.btn-i .ic{width:23px;height:23px}
.btn-i span{color:var(--muted);font-size:13.5px}
.btn-i.like.on,.btn-i.like.on span{color:var(--heart)}
.btn-i.like.on .ic{fill:var(--heart)}
.btn-i.like.bump .ic{animation:bump .35s}
@keyframes bump{40%{transform:scale(1.3)}70%{transform:scale(.94)}}
.tag{color:var(--link)}
.tags{display:flex;flex-wrap:wrap;gap:2px 10px;padding:6px 0 0}
.tg{font-size:14px;color:var(--link)}
.lock-ic{width:13px;height:13px;vertical-align:-2px}
.pop{position:absolute;left:50%;top:50%;width:90px;height:90px;margin:-45px 0 0 -45px;pointer-events:none;
  fill:#fff;stroke:none;filter:drop-shadow(0 2px 14px rgba(0,0,0,.4));opacity:0;z-index:3}
.pop.go{animation:pop .8s ease-out}
@keyframes pop{0%{opacity:0;transform:scale(.4)}20%{opacity:1;transform:scale(1.1)}40%{transform:scale(.95)}70%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.05)}}

/* Instagram düzeni: fotoğraflı gönderiler */
.post.ig{padding:10px 0 4px}
.ig-h{display:flex;align-items:center;gap:10px;padding:0 4px 10px 14px}
.ig-h .nm{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.ig-h .nm b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ig-h .nm span{font-size:12px;color:var(--muted)}
.media-wrap{position:relative;overflow:hidden;background:var(--soft)}
.carousel{display:flex;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;width:100%}
.carousel::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;scroll-snap-align:center;scroll-snap-stop:always;position:relative;min-width:0;display:flex}
.slide img{width:100%;height:100%;object-fit:cover;-webkit-touch-callout:none}
.count{position:absolute;top:12px;right:12px;z-index:2;background:rgba(0,0,0,.6);color:#fff;font-size:12px;font-weight:600;padding:3px 9px;border-radius:99px;pointer-events:none}
.ig .acts{display:flex;align-items:center;padding:4px 6px 0 6px}
.ig .acts .sp{flex:1}
.dots{display:flex;justify-content:center;gap:4px;padding:8px 0 0}
.dots i{width:6px;height:6px;border-radius:50%;background:var(--edge);transition:.2s}
.dots i.on{background:var(--acc1)}
.ig .likes{padding:2px 14px 0;font-weight:600;font-size:14px}
.ig .cap{padding:3px 14px 0;white-space:pre-wrap;overflow-wrap:anywhere}
.ig .cap b{margin-right:6px}
.ig .tags{padding:3px 14px 0}
.more-cm{display:block;padding:4px 14px 0;color:var(--muted);font-size:14px}
.ig .ago{padding:5px 14px 8px;font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}

/* Threads düzeni: yazı gönderileri */
.post.th{display:flex;gap:12px;padding:14px 16px 6px}
.th-main{flex:1;min-width:0}
.th-h{display:flex;align-items:center;gap:7px;min-height:24px}
.th-h b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.th-h .t{color:var(--muted);font-size:14px;white-space:nowrap}
.th-h .icon-btn{margin:-10px -8px -10px auto;width:40px;height:40px}
.post-text{font-size:15.5px;line-height:1.45;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;margin-top:2px;position:relative}
.th .acts{display:flex;align-items:center;margin:4px 0 0 -9px}
.th .more-cm{padding:0 0 8px;font-size:14px}

/* ===== Yorumlar ===== */
.comments{padding:14px 16px 16px;display:flex;flex-direction:column;gap:16px}
.cmt{display:flex;gap:11px;align-items:flex-start;font-size:15px;overflow-wrap:anywhere}
.cmt .grow{flex:1;min-width:0;white-space:pre-wrap}
.cmt .grow b{margin-right:6px}
.cmt small{color:var(--muted);margin-left:2px;font-size:12.5px}
.cmt .del{color:var(--muted);padding:6px}.cmt .del .ic{width:16px;height:16px}
.cbar{position:-webkit-sticky;position:sticky;bottom:calc(var(--tab-h) + var(--sab));z-index:20;margin-top:8px;
  display:flex;flex-direction:column;gap:6px;padding:8px 12px;background:var(--glass-strong);border-top:1px solid var(--line)}
.kb .cbar{bottom:0}
.cbar input{border-radius:99px;padding:11px 16px}
.cbar-row{display:flex;gap:8px}
.cbar .send{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--acc1);color:var(--ink)}
.cbar .send:disabled{opacity:.4}
.rp-chip{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 6px 6px 12px;border-radius:10px;background:var(--soft);font-size:13px;color:var(--muted)}
.rp-chip[hidden]{display:none}
.rp-chip button{width:28px;height:28px;display:grid;place-items:center;border-radius:50%}
.rp-chip .ic{width:16px;height:16px}

/* ===== Profil ===== */
.prof{padding:18px 16px 4px}
.prof-top{display:flex;align-items:center;justify-content:space-between;gap:14px}
.prof-top h2{margin:0;font:700 24px/1.15 var(--f-ui);letter-spacing:-.02em;overflow-wrap:anywhere}
.prof-top .un{color:var(--muted);font-size:15px;margin-top:2px}
.prof .bio{margin:14px 0 0;white-space:pre-wrap;font-size:15px}
.prof .meta{margin:12px 0 0;color:var(--muted);font-size:14px}
.prof .meta b{color:var(--text)}
.prof .btn-ghost{margin-top:16px}
.seg{display:flex;margin:14px 0 0;border-bottom:1px solid var(--line)}
.seg button{flex:1;height:46px;font-weight:600;font-size:14.5px;color:var(--muted);transition:color .15s;position:relative}
.seg button.on{color:var(--text)}
.seg button.on::after{content:"";position:absolute;left:12%;right:12%;bottom:-1px;height:2px;background:var(--text)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;padding:0}
.cell{position:relative;aspect-ratio:1;background:var(--soft);overflow:hidden;display:block}
.cell img{width:100%;height:100%;object-fit:cover}
.cell .txt{padding:9px;font-size:12px;line-height:1.35;color:var(--text);overflow:hidden;height:100%;display:block;overflow-wrap:anywhere}
.cell .multi{position:absolute;top:7px;right:7px;width:17px;height:17px;color:#fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}

/* ===== Bildirimler / ayarlar ===== */
.list{margin:12px 16px;background:var(--surface);border-radius:14px;overflow:hidden}
.notifs{margin:0;border-radius:0;background:transparent}
.row{display:flex;align-items:center;gap:12px;padding:12px 16px;text-align:left;width:100%}
.list .row+.row{border-top:1px solid var(--line)}
.row .grow{flex:1;min-width:0;font-size:15px}
.row small{display:block;margin-top:2px;color:var(--muted);font-size:13px}
.row.unread{background:color-mix(in srgb,var(--acc1) 9%,transparent)}
.row img.th{width:44px;height:44px;border-radius:8px;object-fit:cover}
.section-t{margin:26px 20px 8px;font-size:13px;font-weight:600;color:var(--muted)}
.form{display:flex;flex-direction:column;gap:14px;padding:16px}
.form label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:500;color:var(--muted)}
.empty{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:64px 32px}
.empty-ic{width:78px;height:78px;border-radius:50%;border:2px solid var(--text);display:grid;place-items:center;margin-bottom:10px}
.empty-ic .ic{width:34px;height:34px;stroke-width:1.5}
.empty h3{margin:0;font:700 22px/1.25 var(--f-ui);letter-spacing:-.01em;color:var(--text)}
.more .empty{padding:44px 32px}
.empty p{margin:0;max-width:290px;color:var(--muted);font-size:15px;line-height:1.45}
.empty .btn-primary{width:auto;padding:0 24px;margin-top:14px}
.menu-note{margin:0;padding:18px 20px;text-align:center;color:var(--muted);font-size:14px}
.no-cm{margin:0;padding:28px 0;text-align:center;color:var(--muted);font-size:14.5px}
.seg-sw{display:flex;gap:4px;background:var(--soft);padding:3px;border-radius:10px}
.seg-sw button{flex:1;height:36px;border-radius:8px;font-weight:600;font-size:13.5px;color:var(--muted)}
.seg-sw button.on{background:var(--bg);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.25)}
.pal{display:flex;gap:12px}
.pal button{position:relative;width:34px;height:34px;border-radius:50%;background:var(--acc1);border:2px solid var(--bg)}
.pal button.on{box-shadow:0 0 0 2px var(--text)}
.hint{margin:0;color:var(--muted);font-size:13px;line-height:1.45}
.newpill{position:fixed;top:calc(var(--sat) + 62px);left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);z-index:35;
  display:flex;align-items:center;gap:6px;font-weight:600;font-size:13.5px;padding:9px 16px;border-radius:99px;box-shadow:0 4px 18px rgba(0,0,0,.35)}
.more{text-align:center;padding:26px;color:var(--muted);font-size:13px}
.foot{padding:18px;font-size:13px}

/* ===== Alttan açılan paneller ===== */
#layer{position:relative;z-index:60}
.sheet-bg{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:60;animation:fade .2s;overscroll-behavior:contain;
  display:flex;align-items:flex-end;justify-content:center}
.sheet{width:100%;max-width:600px;background:var(--surface);border-radius:16px 16px 0 0;
  max-height:92vh;max-height:92dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding:6px 0 calc(var(--sab) + 12px);animation:up .28s cubic-bezier(.2,.9,.25,1);will-change:transform}
.sheet.full{height:92vh;height:92dvh;display:flex;flex-direction:column;background:var(--bg)}
.sheet .grab{width:38px;height:4px;border-radius:2px;background:var(--edge);margin:6px auto 10px;flex:none}
.sheet h3{margin:0;padding:4px 18px 10px;font-size:16px;font-weight:600;text-align:center}
.sheet .act{display:flex;align-items:center;gap:14px;width:100%;padding:15px 20px;font-size:15.5px;text-align:left}
.sheet .act:active{background:var(--soft)}
.sheet .act .ic{width:22px;height:22px}
@keyframes fade{from{opacity:0}}
@keyframes up{from{transform:translateY(100%)}}
.compose{display:flex;flex-direction:column;flex:1;min-height:0}
.compose-top{display:flex;align-items:center;justify-content:space-between;padding:2px 8px 10px;border-bottom:1px solid var(--line)}
.compose-top b{font-size:16px;font-weight:600}
.compose-top .btn-primary{width:auto;height:36px;padding:0 18px;font-size:14px;border-radius:99px}
.compose textarea{flex:none;border:0;background:transparent;border-radius:0;padding:16px 18px 6px;font-size:17px;min-height:120px;max-height:38vh;overflow-y:auto}
.compose textarea:focus{background:transparent}
.thumbs{display:flex;gap:8px;overflow-x:auto;padding:6px 18px 12px;-webkit-overflow-scrolling:touch}
.thumbs .t{position:relative;width:96px;height:96px;flex:none;border-radius:10px;overflow:hidden}
.thumbs .t img{width:100%;height:100%;object-fit:cover}
.thumbs .t button{position:absolute;top:5px;right:5px;width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,.65);color:#fff;display:grid;place-items:center}
.thumbs .t button .ic{width:14px;height:14px}
.compose-bar{margin-top:auto;border-top:1px solid var(--line);padding:8px 12px;display:flex;align-items:center;gap:10px}
.sw{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500;flex:1;color:var(--muted)}
.switch{position:relative;width:46px;height:28px;border-radius:14px;background:var(--edge);flex:none;transition:background .2s}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.35)}
.switch.on{background:var(--acc1)}
.switch.on::after{transform:translateX(18px)}
.linkbox{display:flex;gap:8px;padding:0 18px 12px}
.linkbox input{font-size:14px}
.linkbox button{flex:none;padding:0 18px;border-radius:10px;font-weight:600;font-size:14px}
.toast{position:fixed;left:50%;bottom:calc(var(--tab-h) + var(--sab) + 16px);-webkit-transform:translate(-50%,16px);transform:translate(-50%,16px);
  background:var(--text);color:var(--bg);padding:10px 18px;border-radius:99px;font-size:14px;font-weight:500;z-index:200;opacity:0;pointer-events:none;
  transition:.25s;max-width:90vw;text-align:center}
.toast.show{opacity:1;-webkit-transform:translate(-50%,0);transform:translate(-50%,0)}
.skel{height:260px;margin:14px 16px;border-radius:12px;background:linear-gradient(90deg,var(--soft) 25%,var(--line) 50%,var(--soft) 75%);background-size:200% 100%;animation:sh 1.5s infinite}
@keyframes sh{to{background-position:-200% 0}}

/* ===== Giriş / kurulum / hesap sayfaları ===== */
.auth-body{display:grid;place-items:center;padding:calc(var(--sat) + 20px) 16px calc(var(--sab) + 20px)}
.auth-card{width:100%;max-width:380px;padding:34px 26px 26px;text-align:center;
  background:var(--surface);border:1px solid var(--line);border-radius:16px}
.auth-card.wide{max-width:470px}
.auth-card>p.muted{margin:10px 0 0;font-size:14px}
.auth-card form{display:flex;flex-direction:column;gap:12px;margin-top:22px;text-align:left}
.auth-card label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:500;color:var(--muted)}
.auth-card label small{font-size:12.5px;font-weight:400}
.auth-card h3{margin:14px 0 0;font-size:15px;font-weight:600;color:var(--text)}
.auth-card .brand{font-size:38px;cursor:default}
.logo-heart{display:none}
.alert{background:rgba(255,64,80,.1);color:#ff6b78;padding:11px 14px;border-radius:10px;font-size:14px;margin-top:16px;text-align:left}
.auth-link{margin:16px 0 0;font-size:14px;font-weight:500}
.sm-ic{width:15px;height:15px;vertical-align:-2px}
.big-ic{display:block;width:46px;height:46px;stroke-width:1.4;color:var(--text);margin:6px auto 8px}
.notice{margin-top:18px}
.notice h2{margin:6px 0 8px;font:700 21px/1.2 var(--f-ui);letter-spacing:-.01em}
.notice p{margin:0;line-height:1.55;font-size:15px}
.hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
.field{position:relative;display:block}
.field input{padding-right:46px}
.status{position:absolute;right:13px;top:50%;transform:translateY(-50%);width:22px;height:22px;display:grid;place-items:center}
.status .ic{width:21px;height:21px}
.status.good{color:#2fc77a}.status.bad{color:#ff4d5e}.status.wait{color:var(--muted)}
.status.wait .ic{animation:spin .8s linear infinite}
#umsg.good{color:#2fc77a}#umsg.bad{color:#ff6b78}
.captcha{display:flex;align-items:center;gap:8px}
.cap-img{flex:1;display:grid;place-items:center;overflow:hidden;border-radius:10px;background:var(--soft);min-height:76px}
.cap-img img{width:100%;height:auto;max-width:210px;-webkit-user-select:none;user-select:none;pointer-events:none}
.public-body{background:var(--bg)}
.pill-n{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:10px;font-size:12px;font-weight:700}

/* ===== Hareket (sade) ===== */
#view>*{animation:rise .35s ease both}
.post{animation:rise .4s ease both;animation-delay:calc(var(--i,0) * 40ms)}
@keyframes rise{from{opacity:0;transform:translateY(8px)}}

/* ===== Ayarlardan: animasyonlar kapalı / hafif mod (Android sorunları için) ===== */
:root[data-anim=off] *,:root[data-anim=off] *::before,:root[data-anim=off] *::after{
  animation:none!important;transition:none!important;scroll-behavior:auto!important}
:root[data-fx=lite] *,:root[data-fx=lite] *::before,:root[data-fx=lite] *::after{
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important}
:root[data-fx=lite] .top,:root[data-fx=lite] .tabbar{background:var(--glass-strong)}

@media (min-width:700px){
  #app{border-left:1px solid var(--line);border-right:1px solid var(--line)}
}

/* post ayrıntıları */
.likes:empty{display:none}
.ig .btn-i span{display:none}
.th .pop{fill:var(--heart)}
.th-av{flex:none}


/* hikâye: görüntüleme sayısı */
.v-views{position:absolute;left:14px;bottom:calc(var(--sab) + 16px);z-index:3;display:flex;align-items:center;gap:7px;padding:9px 14px;border-radius:99px;background:rgba(0,0,0,.55);color:#fff;font-size:13.5px;font-weight:600}
.v-cap.own{padding-bottom:calc(var(--sab) + 70px)}

/* ===== yorum önizlemesi: isim üstte, yorum altta ===== */
.pcs{padding-top:4px}
.pc{display:flex;align-items:flex-start;gap:9px;margin-top:8px;font-size:14.5px;line-height:1.35;overflow-wrap:anywhere}
.pc>a{flex:none;line-height:0}
.pc .pcb{flex:1;min-width:0}
.av.xs{width:26px;height:26px;font-size:11px}
.pc b{display:block;font-weight:600;font-size:14px}
.pc span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--text)}
.ig .pcs{padding:4px 14px 0}
.th .pcs{padding:6px 0 8px}
.cmt .cm-h{display:flex;align-items:baseline;gap:8px}
.cmt .cm-h b{font-size:14px}
.cmt .cm-t{margin-top:1px}
.post{cursor:pointer}
.mention{color:var(--link);font-weight:600;padding:3px 1px;margin:-3px -1px;display:inline-block;line-height:1.2}

/* ===== @etiket önerileri ===== */
.mpop{position:fixed;z-index:130;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 34px rgba(0,0,0,.5);overflow:hidden;max-height:260px;overflow-y:auto}
.mpop button{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;text-align:left}
.mpop button+button{border-top:1px solid var(--line)}
.mpop button:active{background:var(--soft)}
.mpop b{display:block;font-size:14.5px}
.mpop small{display:block;color:var(--muted);font-size:12.5px}

/* ===== mesajlar ===== */
.conv .grow b{display:block}
.conv.unread .grow b,.conv.unread .pv{color:var(--text);font-weight:600}
.pv{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dot{width:10px;height:10px;border-radius:50%;background:var(--acc1);flex:none}
.inbox .row{padding:12px 16px}
.chat .tabbar{display:none}
.chat #app{padding-bottom:0}
#view.chatview{display:flex;flex-direction:column;min-height:calc(100vh - 53px - var(--sat));min-height:calc(100dvh - 53px - var(--sat))}
.thread{flex:1;display:flex;flex-direction:column;gap:3px;padding:12px 12px 10px}
.tsep{align-self:center;margin:12px 0 6px;font-size:12px;color:var(--muted)}
.msg{display:flex;flex-direction:column;gap:4px;max-width:80%}
.msg.me{align-self:flex-end;align-items:flex-end}
.msg.th{align-self:flex-start;align-items:flex-start}
.bub{padding:9px 14px;border-radius:20px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:15.5px;line-height:1.35}
.me .bub{background:var(--acc1);color:var(--ink);border-bottom-right-radius:6px}
.me .bub a{color:inherit;text-decoration:underline}
.th .bub{background:var(--soft);border-bottom-left-radius:6px}
.seen{align-self:flex-end;font-size:12px;color:var(--muted);margin:2px 4px 0}
.mpost{display:block;width:230px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface);color:var(--text)}
.mpost img{width:100%;aspect-ratio:1;object-fit:cover}
.mp-t{padding:9px 12px;font-size:13.5px;line-height:1.35}
.mp-t b{display:block}
.mp-t span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--muted)}
.dmbar{position:sticky;bottom:0;display:flex;align-items:flex-end;gap:8px;padding:8px 12px calc(8px + var(--sab));background:var(--glass-strong);border-top:1px solid var(--line)}
.dmbar textarea{flex:1;border-radius:22px;padding:11px 16px;max-height:120px;min-height:44px;line-height:1.3}
.dmbar button{width:44px;height:44px;border-radius:50%;background:var(--acc1);color:var(--ink);display:grid;place-items:center;flex:none}
.dmbar button:disabled{opacity:.4}
.chat-h{display:flex;align-items:center;gap:10px;color:var(--text);font-weight:600;font-size:16px}

/* ===== yorum yanıtları ===== */
.rp-btn{margin-top:4px;font-size:12.5px;font-weight:600;color:var(--muted);padding:4px 0}
.replies{display:flex;flex-direction:column;gap:12px;margin:-4px 0 0 41px;padding-left:12px;border-left:2px solid var(--line)}
.cmt.rp .grow{font-size:14.5px}
.medit,.edited{font-size:11.5px;color:var(--muted)}

/* ===== hikâye görüntüleyici: yanıt, ifade, beğeni, basılı tutunca durma ===== */
.story-v{touch-action:none}
.story-v .bars,.story-v .v-head,.story-v .v-cap,.story-v .v-own,.story-v .v-reply,.story-v .v-pick{transition:opacity .15s}
.story-v.hold .bars,.story-v.hold .v-head,.story-v.hold .v-cap,.story-v.hold .v-own,.story-v.hold .v-reply,.story-v.hold .v-pick{opacity:0;pointer-events:none}
.v-head .who{display:flex;align-items:center;gap:10px;color:#fff;font-weight:600;min-width:0}
.v-head .who span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v-head .who small{opacity:.7;font-weight:400}
.v-head{z-index:3}
.v-cap.oth{padding-bottom:calc(var(--sab) + 84px)}
.v-reply{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:center;gap:8px;padding:10px 12px calc(var(--sab) + 12px);background:linear-gradient(transparent,#000a)}
.v-reply input{flex:1;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.45);color:#fff;border-radius:99px;padding:12px 16px}
.v-reply input::placeholder{color:rgba(255,255,255,.75)}
.v-reply input:focus{border-color:#fff}
.vr-b{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff;flex:none}
.vr-b[hidden]{display:none}
.vr-b.on .ic{fill:var(--heart);color:var(--heart)}
.vr-b.send{background:var(--acc1);color:var(--ink)}
.v-pick{position:absolute;left:12px;right:12px;bottom:calc(var(--sab) + 72px);z-index:4;display:flex;flex-direction:column;background:rgba(18,18,18,.94);border:1px solid #ffffff22;border-radius:16px;overflow:hidden}
.v-pick[hidden]{display:none}
.v-pick button{display:flex;align-items:center;gap:14px;padding:13px 16px;text-align:left;color:#fff;font-size:15.5px;font-weight:500}
.v-pick button+button{border-top:1px solid #ffffff18}
.v-pick button:active,.v-pick button.on{background:#ffffff18}
.em{font-size:24px;line-height:1;font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif}
.v-own{position:absolute;left:14px;bottom:calc(var(--sab) + 16px);z-index:3;display:flex;align-items:center;gap:12px}
.v-own .v-views{position:static}
.v-lk{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600}
.v-lk .ic{fill:var(--heart);color:var(--heart)}
.v-float{position:absolute;left:50%;bottom:120px;z-index:6;font-size:64px;pointer-events:none;animation:vfloat 1.1s ease-out forwards;margin-left:-32px}
.v-float .ic{width:64px;height:64px;fill:var(--heart);color:var(--heart);stroke:none}
@keyframes vfloat{from{opacity:1;transform:translateY(0) scale(.6)}30%{transform:translateY(-40px) scale(1.15)}to{opacity:0;transform:translateY(-220px) scale(1)}}
.rx{display:flex;align-items:center;gap:6px}
.rx .em{font-size:20px}.rx small{margin:0}
.hrt{color:var(--heart)}.hrt .ic{width:20px;height:20px;fill:var(--heart)}

/* ===== mesajlar: fotoğraf, hikâye yanıtı, beğeni, düzenlendi ===== */
.msg{position:relative}
.bw{position:relative;max-width:100%}
.mimg{max-width:240px;max-height:320px;width:auto;height:auto;border-radius:16px;object-fit:cover;-webkit-touch-callout:none}
.mlike{position:absolute;right:-6px;bottom:-9px;width:22px;height:22px;border-radius:50%;background:var(--bg);display:grid;place-items:center;border:1px solid var(--line)}
.mlike .ic{width:13px;height:13px;fill:var(--heart);color:var(--heart);stroke:none}
.msg:has(.mlike){margin-bottom:8px}
.bw.pulse{animation:bump .4s}
.medit{margin:1px 4px 0}
.mstory-l{font-size:12px;color:var(--muted);margin:0 2px}
.mstory{width:92px;height:140px;border-radius:12px;overflow:hidden;background:var(--soft);display:grid;place-items:center;color:var(--muted);font-size:12px;text-align:center;padding:6px}
.mstory img{width:100%;height:100%;object-fit:cover}
.mstory.gone{width:auto;height:auto;padding:10px 14px;display:flex;gap:6px;align-items:center}
.breact{display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:20px;background:var(--soft)}
.me .breact{background:var(--acc1);color:var(--ink)}
.breact .em{font-size:28px}
.dmbar .dm-att{background:transparent;color:var(--muted);width:44px;height:44px}
.dmbar .dm-att .ic{width:24px;height:24px}
.dmbar .dm-send{background:var(--acc1);color:var(--ink)}

/* ===== iki parmakla fotoğraf yakınlaştırma ===== */
.zoom-ov{position:fixed;inset:0;z-index:300;pointer-events:none;background:rgba(0,0,0,0)}

/* ===== herkese açık gönderi sayfası ===== */
.public-body{background:var(--bg);overflow-x:hidden}
.pub-glow{position:fixed;inset:0 0 auto 0;height:420px;background:radial-gradient(ellipse at 50% -10%,color-mix(in srgb,var(--acc1) 34%,transparent),transparent 65%);pointer-events:none;z-index:0}
.pub-top{position:sticky;top:0;z-index:30;padding-top:var(--sat);background:var(--glass);border-bottom:1px solid var(--line);}
.pub-in{max-width:560px;margin:0 auto;height:56px;padding:0 14px 0 18px;display:flex;align-items:center;justify-content:space-between}
.pub-actions{display:flex;gap:8px}
.pbtn{display:inline-flex;align-items:center;justify-content:center;height:38px;padding:0 18px;border-radius:99px;font-weight:600;font-size:14px;border:1px solid var(--edge);color:var(--text);white-space:nowrap}
.pbtn.pri{background:var(--acc1);border-color:var(--acc1);color:var(--ink)}
.pbtn.big{height:54px;padding:0 40px;font-size:17px;margin-top:26px;box-shadow:0 8px 30px color-mix(in srgb,var(--acc1) 45%,transparent)}
.pub-wrap{position:relative;z-index:1;max-width:560px;margin:0 auto;padding:18px 14px 0}
.pcard{background:var(--surface);border:1px solid var(--line);border-radius:22px;overflow:hidden;margin-bottom:14px}
.pc-h{display:flex;align-items:center;gap:12px;padding:14px 16px}
.pc-n{display:flex;flex-direction:column;line-height:1.25}.pc-n b{font-size:15px}.pc-n span{font-size:12.5px;color:var(--muted)}
.pcard .media-wrap{border-radius:0}
.pc-t{padding:14px 18px 4px;font-size:15.5px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.pc-t.big{font-size:20px;line-height:1.45;padding:6px 18px 10px;font-weight:500}
.pc-s{display:flex;gap:18px;padding:12px 18px 16px;color:var(--muted);font-size:14.5px;font-weight:600}
.pc-s span{display:flex;align-items:center;gap:7px}.pc-s .ic{width:21px;height:21px}
.pc-cm{padding:6px 0}
.pc-c{display:flex;gap:12px;padding:10px 16px;align-items:flex-start}
.pc-c div{display:flex;flex-direction:column;min-width:0;font-size:14.5px;line-height:1.4;overflow-wrap:anywhere}
.pc-c b{font-size:14px}
.pc-more{display:flex;align-items:center;justify-content:center;gap:8px;margin:6px 16px 10px;height:42px;border-radius:12px;background:var(--soft);color:var(--text);font-weight:600;font-size:14px}
.join{margin-top:22px;padding:34px 22px 30px;border-radius:26px;text-align:center;border:1px solid var(--line);background:linear-gradient(180deg,color-mix(in srgb,var(--acc1) 16%,var(--surface)),var(--surface) 70%);display:flex;flex-direction:column;align-items:center}
.join-tag{display:inline-block;padding:5px 13px;border-radius:99px;background:color-mix(in srgb,var(--acc1) 22%,transparent);color:var(--text);font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.join h2{margin:16px 0 0;font:800 29px/1.15 var(--f-ui);letter-spacing:-.03em}
.join p{margin:12px 0 0;max-width:360px;color:var(--muted);font-size:16px;line-height:1.5}
.join-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:24px;width:100%;max-width:400px}
.join-grid div{padding:16px 12px 14px;border-radius:16px;background:var(--bg);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:3px}
.join-grid span{width:42px;height:42px;border-radius:13px;background:color-mix(in srgb,var(--acc1) 20%,transparent);display:grid;place-items:center;margin-bottom:6px}
.join-grid .ic{width:22px;height:22px}
.join-grid b{font-size:15px}.join-grid small{color:var(--muted);font-size:12.5px;line-height:1.3}
.join-sec{margin-top:16px;font-size:14px;color:var(--muted);font-weight:500}
.pub-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;justify-content:center;padding:10px 14px calc(var(--sab) + 10px);background:var(--glass);border-top:1px solid var(--line);}
.pub-bar>div{width:100%;max-width:560px;display:flex;align-items:center;gap:12px}
.pub-bar span{flex:1;font-size:13.5px;line-height:1.3;color:var(--muted)}
.pub-bar b{color:var(--text);display:block;font-size:14.5px}
/* ===== takip / keşfet ===== */
.fseg{display:flex;border-bottom:1px solid var(--line)}
.fseg button{flex:1;height:46px;font-weight:600;font-size:15px;color:var(--muted);position:relative}
.fseg button.on{color:var(--text)}
.fseg button.on::after{content:"";position:absolute;left:30%;right:30%;bottom:-1px;height:2px;background:var(--text)}
.fbtn{height:34px;padding:0 18px;border-radius:99px;background:var(--acc1);color:var(--ink);font-weight:600;font-size:14px;white-space:nowrap}
.fbtn.on{background:var(--soft);color:var(--text)}
.fbtn.big{height:40px;padding:0 26px;font-size:15px;flex:1}
.prof-act{display:flex;gap:10px;margin-top:16px}
.prof-act .msgbtn{flex:1;height:40px;display:grid;place-items:center;color:var(--text)}
.lnk{color:var(--muted);font-size:14px}.lnk b{color:var(--text)}
.sug{padding:14px 0 6px;border-bottom:1px solid var(--line)}
.sug-t{padding:0 16px 10px;font-weight:600;font-size:14.5px}
.sug-r{display:flex;gap:10px;overflow-x:auto;padding:0 16px 10px}
.sug-c{flex:none;width:138px;padding:14px 10px 12px;border:1px solid var(--line);border-radius:14px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.sug-c a{display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--text);min-width:0;width:100%}
.sug-c .av{width:56px;height:56px;margin-bottom:6px}
.sug-c b{font-size:14px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sug-c small{color:var(--muted);font-size:12px;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.sug-c .fbtn{width:100%;height:32px}
.rowa{display:flex;align-items:center;gap:12px;flex:1;min-width:0;color:var(--text)}

/* ===== DM: sesli mesaj, tek gösterimlik fotoğraf, kilitli yazma alanı ===== */
.dmbar .dm-mic{background:transparent;color:var(--text);width:44px;height:44px;display:grid;place-items:center;flex:none}
.dmbar .dm-mic .ic{width:24px;height:24px}
.dmbar button[hidden],.dmbar .dm-mic[hidden]{display:none}
.dmbar.recording>:not(.rec){display:none}
.rec{flex:1;display:flex;align-items:center;gap:12px;min-height:44px}
.rec-x,.rec-ok{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none}
.rec-x{color:var(--muted)}
.rec-ok{background:var(--acc1);color:var(--ink)}
.rec-dot{width:11px;height:11px;border-radius:50%;background:#ff3040;animation:recb 1s ease-in-out infinite}
@keyframes recb{50%{opacity:.25}}
.rec-t{font-variant-numeric:tabular-nums;font-weight:600;min-width:38px}
.rec-w{flex:1;display:flex;align-items:center;gap:4px;height:28px}
.rec-w i{flex:1;max-width:6px;height:6px;border-radius:3px;background:var(--muted);animation:recw .9s ease-in-out infinite}
.rec-w i:nth-child(2n){animation-delay:.15s}.rec-w i:nth-child(3n){animation-delay:.3s}.rec-w i:nth-child(5n){animation-delay:.45s}
@keyframes recw{50%{height:26px}}
.bub.vb{padding:8px 14px 8px 8px}
.vmsg{display:flex;align-items:center;gap:10px;min-width:190px}
.vplay{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.2);display:grid;place-items:center;flex:none;color:inherit}
.th .vplay{background:var(--edge)}
.vplay .ic{width:18px;height:18px;fill:currentColor;stroke:none}
.vbar{flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.3);overflow:hidden}
.th .vbar{background:var(--edge)}
.vbar i{display:block;height:100%;width:0;background:currentColor}
.vt{font-size:12.5px;font-variant-numeric:tabular-nums;opacity:.85}
.once{display:flex;align-items:center;gap:8px;padding:11px 16px;border-radius:20px;font-size:14.5px;font-weight:600;border:1.5px solid var(--edge);color:var(--text);background:transparent;text-align:left}
.once.mine{color:var(--muted);font-weight:500}
.once.done{color:var(--muted);border-style:dashed;font-weight:500}
.once-hint{position:absolute;left:0;right:0;bottom:calc(var(--sab) + 22px);display:flex;justify-content:center;align-items:center;gap:7px;font-size:13.5px;color:#fffc;z-index:3}
.dmlock{position:sticky;bottom:0;padding:16px 18px calc(16px + var(--sab));background:var(--glass-strong);border-top:1px solid var(--line);text-align:center}
.dmlock p{margin:0 0 12px;color:var(--muted);font-size:14.5px}
.once-b{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);margin:0 4px 2px}
.once-b{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);margin:0 4px 2px}

/* ===== klavye: yazma çubukları klavyenin üstünde (visualViewport ile --kb) ===== */
.dmbar{position:fixed;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);width:100%;max-width:600px;bottom:var(--kb,0px);z-index:35}
.kbopen .dmbar{padding-bottom:8px}
#view.chatview{padding-bottom:calc(66px + var(--sab) + var(--kb,0px))}
.kbopen #view.chatview{padding-bottom:calc(66px + var(--kb,0px))}
.cbar{position:fixed!important;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);width:100%;max-width:600px;bottom:calc(var(--tab-h) + var(--sab))!important;z-index:35}
.kb .cbar{bottom:var(--kb,0px)!important}
#view>.comments{padding-bottom:calc(96px + var(--sab))}
.v-reply{bottom:var(--kb,0px)}
.v-pick{bottom:calc(var(--sab) + 72px + var(--kb,0px))}
.story-v .v-cap.oth{transition:padding .15s}
.sheet-bg{padding-bottom:var(--kb,0px)}
.sheet{max-height:calc(92vh - var(--kb,0px));max-height:calc(92dvh - var(--kb,0px))}
.sheet.full{height:calc(92vh - var(--kb,0px));height:calc(92dvh - var(--kb,0px))}
.kbopen .sheet{padding-bottom:12px}

.rl-slot{position:absolute;inset:0;overflow:hidden}
.rl-yf{position:absolute;left:50%;top:50%;width:100%;height:100%;border:0;pointer-events:none;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
.rl.yt .rl-poster{filter:none}
.rl.yt .rl-bar{display:none}

/* ===== (geri yüklendi) ayarlar ===== */
.dm-top{position:relative}
.dm-top .badge{position:absolute;top:5px;right:3px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--heart);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;border:2px solid var(--bg)}
.s-prof{display:flex;align-items:center;gap:16px;padding:22px 18px 8px}
.s-prof h2{margin:0;font:700 22px/1.15 var(--f-ui);letter-spacing:-.02em;overflow-wrap:anywhere}
.s-prof .un{color:var(--muted);font-size:14.5px;margin-top:2px}
.s-prof p{margin:8px 0 0;color:var(--text);font-size:14.5px;line-height:1.4;overflow-wrap:anywhere}
.s-prof-b{padding:10px 18px 0}
.sgroup{margin:0 16px;background:var(--surface);border-radius:16px;overflow:hidden;border:1px solid var(--line)}
.srow{display:flex;align-items:center;gap:14px;width:100%;padding:14px 16px;text-align:left}
.srow[hidden]{display:none}
.srow+.srow{border-top:1px solid var(--line)}
button.srow:active{background:var(--soft)}
.srow.col{flex-direction:column;align-items:stretch;gap:12px}
.srow-h{display:flex;align-items:center;gap:14px}
.srow .grow{flex:1;min-width:0}
.srow b{display:block;font-size:15px;font-weight:600}
.srow small{display:block;margin-top:2px;color:var(--muted);font-size:13px;line-height:1.35}
.sic{width:34px;height:34px;border-radius:10px;background:var(--soft);display:grid;place-items:center;flex:none;color:var(--text)}
.sic .ic{width:19px;height:19px}
.srow .chev{width:18px;height:18px;color:var(--muted);flex:none}
.s-note{margin:8px 24px 0}
.srow.col .pal{padding-left:48px}
.srow.col .seg-sw{margin-left:48px}
.srow.col #installBox{padding-left:48px}

/* ===== (geri yüklendi) ifade efektleri ===== */
.fx{position:absolute;inset:0;z-index:8;pointer-events:none;overflow:hidden}
.fx.fixed{position:fixed;z-index:250}
.fx-p{position:absolute;line-height:1;will-change:transform,opacity;font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif}
.fx-big{position:absolute;left:50%;top:44%;font-size:72px;line-height:1;transform:translate(-50%,-50%);font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;filter:drop-shadow(0 6px 24px rgba(0,0,0,.45))}
.fx-t{position:absolute;left:50%;bottom:24%;transform:translateX(-50%);white-space:nowrap;font:800 30px/1 var(--f-ui);letter-spacing:-.02em;color:#fff;text-shadow:0 3px 0 #0007,0 0 28px #000a;padding:0 10px}
.fx-patla{color:#7fd6ff;text-shadow:0 3px 0 #0a3a5a,0 0 30px #28b4ff}
.fx-amk{color:#ffe14d;text-shadow:0 3px 0 #6a3b00,0 0 30px #ff7a00}
.fx-agla{color:#9ec9ff;text-shadow:0 3px 0 #10305a,0 0 26px #3b82f6}
.fx-sevgi{color:#ff8fc2;text-shadow:0 3px 0 #6a0a3a,0 0 32px #ff2d8a}
.fx-alev{color:#ffb347;text-shadow:0 3px 0 #6a1500,0 0 34px #ff4500}
.fx-ring{position:absolute;left:50%;top:44%;width:120px;height:120px;border-radius:50%;border:5px solid #ff5fa2;transform:translate(-50%,-50%)}
.fx-glow{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 110%,rgba(255,110,0,.75),rgba(255,60,0,.25) 45%,transparent 70%)}
.v-pick{display:grid!important;grid-template-columns:repeat(3,1fr);gap:8px;padding:12px;background:rgba(14,14,14,.94)}
.v-pick[hidden]{display:none!important}
.v-pick button{flex-direction:column;gap:6px;padding:12px 4px 10px;border-radius:14px;background:#ffffff0f;text-align:center;font-size:12.5px;line-height:1.2;border:0!important}
.v-pick button .em{font-size:38px;transition:transform .15s}
.v-pick button:active .em{transform:scale(1.35) rotate(-8deg)}
.v-pick button:nth-child(1) .em{animation:wob 1.6s ease-in-out infinite}
.v-pick button:nth-child(2) .em{animation:shk .5s ease-in-out infinite}
.v-pick button:nth-child(3) .em{animation:cry 1.2s ease-in-out infinite}
.v-pick button:nth-child(4) .em{animation:beat 1s ease-in-out infinite}
.v-pick button:nth-child(5) .em{animation:flick .7s ease-in-out infinite alternate}
@keyframes wob{50%{transform:translateY(-5px) rotate(8deg)}}
@keyframes shk{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
@keyframes cry{50%{transform:translateY(3px) scale(1.08)}}
@keyframes beat{15%{transform:scale(1.22)}30%{transform:scale(1)}45%{transform:scale(1.18)}}
@keyframes flick{to{transform:scale(1.12) rotate(4deg)}}
:root[data-anim=off] .v-pick button .em{animation:none!important}
.breact{display:flex;align-items:center;gap:12px;padding:12px 18px 12px 14px;cursor:pointer}
.breact .em.big{font-size:44px;animation:beat 1.4s ease-in-out infinite}
.breact b{display:block;font-size:15px}
.breact small{display:block;font-size:12px;opacity:.75;margin-top:2px}

/* kaydırma çubuğu görünmesin */
html,body,*{scrollbar-width:none;-ms-overflow-style:none}
*::-webkit-scrollbar{display:none;width:0;height:0}

/* ===== (geri yüklendi) Reels ===== */
body.reels .top{display:none}
#view.reelsview{position:relative;height:calc(100vh - var(--tab-h) - var(--sab));height:calc(100dvh - var(--tab-h) - var(--sab));background:var(--bg);overflow:hidden;animation:none}
.reelsview>*{animation:none}
.rl-scroll{height:100%;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior:contain;background:#000;-webkit-overflow-scrolling:touch}
.rl{position:relative;height:100%;scroll-snap-align:start;scroll-snap-stop:always;background:#000;overflow:hidden;color:#fff}
.rl-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.rl-chips{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;gap:8px;overflow-x:auto;padding:calc(var(--sat) + 12px) 14px 26px;background:linear-gradient(#000a,transparent);pointer-events:none}
.rl-chips button{pointer-events:auto;flex:none;height:32px;padding:0 14px;border-radius:99px;background:rgba(255,255,255,.16);color:#fff;font-size:13.5px;font-weight:600;}
.rl-chips button.on{background:#fff;color:#000}
.rl-rail{position:absolute;right:8px;bottom:70px;z-index:4;display:flex;flex-direction:column;align-items:center;gap:14px}
.rl-b{display:flex;flex-direction:column;align-items:center;gap:3px;width:48px;color:#fff;font-size:12.5px;font-weight:600;text-shadow:0 1px 6px #0009}
.rl-b .ic{width:30px;height:30px;filter:drop-shadow(0 1px 5px rgba(0,0,0,.55))}
.rl-b.on .ic{fill:var(--heart);color:var(--heart)}
.rl-cap{position:absolute;left:0;right:70px;bottom:0;z-index:3;padding:46px 16px 18px;background:linear-gradient(transparent,#000b);display:flex;flex-direction:column;gap:2px}
.rl-cap b{font-size:15px}.rl-cap small{opacity:.7;font-size:12.5px}
.rl-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.2);z-index:4}
.rl-bar i{display:block;height:100%;width:0;background:#fff}
.rl-play{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;background:rgba(0,0,0,.45);display:grid;place-items:center;opacity:0;pointer-events:none;z-index:3;transition:opacity .15s}
.rl-play .ic{width:36px;height:36px;fill:#fff;stroke:none}
.rl.paused .rl-play{opacity:1}
.rl-heart{position:absolute;left:50%;top:50%;width:110px;height:110px;margin:-55px 0 0 -55px;fill:#fff;stroke:none;opacity:0;pointer-events:none;z-index:4}
.rl-heart.go{animation:pop .8s ease-out}
.rl-bad{position:absolute;inset:0;display:none;place-items:center;background:#000d;z-index:3;font-size:15px}
.rl.bad .rl-bad{display:grid}

.prof-act{align-items:stretch}
.prof-act .btn-ghost,.prof .prof-act .msgbtn{margin:0;height:40px}
.prof-act .fbtn.big{height:40px}

/* ===== silinen mesaj, sohbet seçimi ===== */
.gone{padding:9px 14px;border-radius:20px;border:1px dashed var(--edge);color:var(--muted);font-size:14px;font-style:italic}
.chk{width:24px;height:24px;border-radius:50%;border:2px solid var(--edge);display:grid;place-items:center;flex:none;color:var(--ink)}
.chk.on{background:var(--acc1);border-color:var(--acc1)}
.chk .ic{width:15px;height:15px;stroke-width:3}
.selmode .row.conv{cursor:pointer}
.icon-btn[disabled]{opacity:.35}

.ptabs button{height:44px;display:grid;place-items:center}
.ptabs .ic{width:24px;height:24px}
.grid .cell{border-radius:0}

/* ===== Reels: tam ekran kaplayan YouTube oynatıcı, yükleniyor göstergesi ===== */
.rl-slot{z-index:1;background:transparent}
.rl-yf{position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);border:0;pointer-events:none;max-width:none}
.rl.yt.playing .rl-poster{opacity:0;transition:opacity .25s}
.rl-spin{position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border:3px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite;z-index:2;pointer-events:none;opacity:1;transition:opacity .2s}
.rl.playing:not(.buffer) .rl-spin,.rl:not(.active) .rl-spin,.rl.paused .rl-spin,.rl.bad .rl-spin{opacity:0}
.rl-rail,.rl-cap,.rl-bar,.rl-play,.rl-heart{z-index:5}

/* ===== logo ===== */
.brand{display:flex;align-items:center;gap:9px}
.brand .logo{flex:none;border-radius:7px}
.logo-big{display:flex;justify-content:center;margin-bottom:6px}
.logo-big .logo{border-radius:20px;box-shadow:0 10px 34px rgba(29,115,255,.35)}
.auth-card .brand{justify-content:center}

/* ===== gönderide minimal takip düğmesi ===== */
.fol{flex:none;height:28px;padding:0 12px;border:1px solid var(--edge);border-radius:99px;font-size:12.5px;font-weight:600;color:var(--text);white-space:nowrap;margin-left:auto}
.fol.on{border-color:transparent;background:var(--soft);color:var(--muted)}
.fol+.icon-btn{margin-left:0!important}
.ig-h .fol{margin-right:2px}

/* ===== video gönderileri ===== */
.slide.vid{position:relative}
.vplayb{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;background:rgba(0,0,0,.5);display:grid;place-items:center;color:#fff;pointer-events:none;}
.vplayb .ic{width:26px;height:26px;fill:#fff;stroke:none;margin-left:3px}
.vdur{position:absolute;right:10px;bottom:10px;padding:3px 9px;border-radius:99px;background:rgba(0,0,0,.6);color:#fff;font-size:12px;font-weight:600;pointer-events:none}
.thumbs .t.vt .vplayb{width:34px;height:34px;margin:-17px 0 0 -17px}
.thumbs .t.vt .vplayb .ic{width:16px;height:16px}
.thumbs .t.vt .vdur{right:6px;bottom:6px;font-size:11px;padding:2px 7px}
.reel-row{display:flex;align-items:center;gap:12px;margin:2px 18px 10px;padding:12px 14px;border-radius:12px;background:var(--soft)}
.reel-row[hidden]{display:none}
.reel-row b{display:block;font-size:14.5px}.reel-row small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
.vv{background:#000}
.vv .vv-v{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.vv-top{position:absolute;top:calc(var(--sat) + 10px);left:0;right:0;z-index:6;display:flex;align-items:center;gap:10px;padding:8px 12px;background:linear-gradient(#0009,transparent)}
.vv-top .who{display:flex;align-items:center;gap:10px;color:#fff;font-weight:600;min-width:0}
.vv .rl-rail,.vv .rl-cap,.vv .rl-bar,.vv .rl-play,.vv .rl-heart{z-index:5}
.vv .rl-rail{bottom:calc(var(--sab) + 70px)}
.vv .rl-cap{padding-bottom:calc(var(--sab) + 18px)}
.vv.paused .rl-play{opacity:1}
.rl-cap .cp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;opacity:.9;font-size:13.5px}
.rl-b.av-b .av{width:42px;height:42px;border:2px solid #fff}

.vv .rl-rail{bottom:calc(var(--sab) + 120px);z-index:7}
.vv .rl-cap{z-index:6}

/* ===== giriş / kayıt: ekrana sığan, yumuşak ve sade tasarım (iOS + Android) ===== */
.auth-body{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;
  padding:calc(var(--sat) + 14px) 22px calc(var(--sab) + 14px);
  background:radial-gradient(130% 55% at 50% -8%,rgba(44,132,255,.30),transparent 62%),radial-gradient(90% 40% at 100% 100%,rgba(124,108,255,.12),transparent 60%),var(--bg)}
.auth-card{width:100%;max-width:370px;padding:0;background:none;border:0;border-radius:0;text-align:center}
.auth-card.wide{max-width:390px}
.auth-card .logo-big{margin-bottom:10px}
.auth-card .logo-big .logo{width:68px;height:68px;border-radius:20px}
.auth-card.wide .logo-big .logo{width:54px;height:54px;border-radius:16px}
.auth-card .brand{font-size:30px;justify-content:center;letter-spacing:-.04em}
.auth-card.wide .brand{font-size:25px}
.auth-card>p.muted{margin:6px auto 0;max-width:290px;font-size:14px;line-height:1.4}
.auth-card form{gap:9px;margin-top:18px}
.auth-card.wide form{gap:7px;margin-top:12px}
.auth-card input{height:50px;padding:0 16px;border-radius:15px;background:var(--surface);border:1px solid var(--line);font-size:16px}
.auth-card input:focus{border-color:var(--acc1);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc1) 22%,transparent)}
.auth-card.wide input{height:46px}
.auth-card label{font-size:12px;gap:4px;text-align:left}
.auth-card label small{margin-top:0}
.auth-card .btn-primary{height:52px;border-radius:15px;font-size:16px;margin-top:4px;box-shadow:0 8px 24px color-mix(in srgb,var(--acc1) 35%,transparent)}
.auth-card.wide .btn-primary{height:48px}
.auth-card .alert{margin-top:12px;padding:10px 14px;font-size:13.5px;border-radius:12px;text-align:left}
.auth-link{margin:14px 0 0;font-size:14px}
.auth-card .hint{font-size:12px;margin:2px 0 0}
.auth-card .captcha{gap:6px}
.auth-card .cap-img{min-height:52px;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.auth-card .cap-img img{max-width:150px}
.auth-card .captcha .icon-btn{width:42px;height:42px}
@media (max-height:720px){
  .auth-card .logo-big .logo{width:50px;height:50px;border-radius:15px}
  .auth-card .brand{font-size:24px}
  .auth-card form{gap:7px;margin-top:12px}
  .auth-card input{height:44px}
  .auth-card .btn-primary{height:46px}
  .auth-link{margin-top:10px}
  .auth-card>p.muted{font-size:13px}
}
@media (max-height:620px){.auth-body{align-items:flex-start}}

/* ===== Çevreler · Kapsül · Birlikte · Anonim soru · Günlük An ===== */
.copts{display:flex;gap:8px;flex-wrap:wrap;padding:2px 18px 10px}
.copts .chip{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 13px;border-radius:99px;background:var(--soft);color:var(--text);font-size:13px;font-weight:600;border:1px solid transparent}
.copts .chip .ic{width:16px;height:16px}
.copts .chip.on{background:color-mix(in srgb,var(--acc1) 18%,var(--soft));border-color:var(--acc1)}
.avs{position:relative;display:flex;flex:none}
.avs .av.co{width:26px;height:26px;margin-left:-14px;margin-top:16px;border:2px solid var(--bg)}
.invite{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:8px 14px 0;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--acc1) 14%,var(--soft));font-size:13.5px}
.invite>div{display:flex;gap:6px;flex:none}
.invite button,.mini{height:30px;padding:0 12px;border-radius:99px;background:var(--acc1);color:var(--ink);font-size:12.5px;font-weight:700;white-space:nowrap}
.invite button.no,.mini.no{background:var(--soft);color:var(--text)}
.post.th .invite{margin:0 0 8px}
.cbtns{display:flex;gap:6px;flex:none}
.capsule{margin:6px 14px 4px;padding:34px 20px 30px;border-radius:18px;border:1px dashed var(--edge);background:repeating-linear-gradient(135deg,transparent 0 10px,rgba(255,255,255,.025) 10px 20px),var(--surface);text-align:center}
.capsule .cap-ic{display:inline-grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--soft);margin-bottom:12px}
.capsule .cap-ic .ic{width:28px;height:28px}
.capsule b{display:block;font-size:17px}.capsule p{margin:6px 0 2px;color:var(--text);font-size:14.5px}.capsule small{color:var(--muted)}
.post.sealed .ago{padding:6px 16px 12px}
.qrow{flex-wrap:wrap}.qrow .grow{flex-basis:100%;margin-bottom:8px}.qrow .grow b{font-weight:600;font-size:15.5px;line-height:1.35}
.qprev{display:flex;justify-content:center}.qcv{width:auto;max-width:100%;max-height:42vh;border-radius:16px;box-shadow:0 8px 30px rgba(0,0,0,.4)}
.qthemes{display:flex;gap:12px;justify-content:center}
.qthemes button:not(.pill){width:34px;height:34px;border-radius:50%;border:2px solid var(--bg)}
.qthemes button.on{box-shadow:0 0 0 2px var(--text)}
.qthemes .pill{height:34px;padding:0 16px;border-radius:99px;background:var(--soft);font-size:13px;font-weight:600}
.askbtn{margin-top:10px}
.mom{display:flex;align-items:center;gap:12px;margin:12px 14px 4px;padding:14px;border-radius:18px;background:linear-gradient(135deg,color-mix(in srgb,var(--acc1) 34%,var(--surface)),var(--surface));border:1px solid color-mix(in srgb,var(--acc1) 40%,var(--line))}
.mom-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--acc1);color:var(--ink);flex:none}
.mom-t{flex:1;min-width:0}.mom-t b{display:block;font-size:16px}.mom-t small{display:block;color:var(--muted);font-size:13px;line-height:1.3}
.mom-n{display:inline-block;margin-top:4px;font-size:12px;font-weight:600;color:var(--text)}
.mom-b{width:auto!important;height:38px!important;padding:0 18px;border-radius:99px!important;font-size:14px!important;flex:none}
.mom-strip{display:flex;gap:10px;overflow-x:auto;padding:12px 14px 4px;border-bottom:1px solid var(--line)}
.mom-c{flex:none;width:72px;display:flex;flex-direction:column;align-items:center;gap:5px;font-size:12px;color:var(--muted)}
.mom-img{position:relative;width:72px;height:96px;border-radius:14px;overflow:hidden;background:var(--soft);border:2px solid var(--acc1);display:block}
.mom-img img{width:100%;height:100%;object-fit:cover}
.mom-img i{position:absolute;left:4px;bottom:4px;padding:1px 6px;border-radius:99px;background:rgba(0,0,0,.65);color:#fff;font-size:10px;font-style:normal}
.mom-c small{max-width:72px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ===== DM yanıtı ===== */
.dmbar{flex-wrap:wrap}
.rbar{flex:0 0 100%;display:flex;align-items:center;gap:10px;padding:8px 12px;margin:0 0 2px;border-radius:12px;background:var(--soft);border-left:3px solid var(--acc1)}
.rbar[hidden]{display:none}
.rb-t{flex:1;min-width:0;font-size:13px}.rb-t b{display:block;font-size:12.5px;color:var(--acc1)}.rb-t span{display:block;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rbar button{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;color:var(--muted)}
.rbar button .ic{width:18px;height:18px}
.mreply{max-width:240px;margin-bottom:-6px;padding:7px 12px 14px;border-radius:14px;background:rgba(127,127,127,.18);border-left:3px solid var(--acc1);font-size:12.5px;line-height:1.3;cursor:pointer}
.me .mreply{align-self:flex-end}.th .mreply{align-self:flex-start}
.mreply b{display:block;font-size:12px}.mreply span{display:block;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msg.rp-ready::before{content:"";position:absolute;left:-44px;top:50%;width:30px;height:30px;margin-top:-15px;border-radius:50%;background:var(--soft) center/16px no-repeat;box-shadow:0 0 0 2px var(--acc1)}
.msg.flash .bub,.msg.flash .breact{animation:flashb 1.1s}
@keyframes flashb{30%{filter:brightness(1.5)}}
/* ===== zaman kapsülü: normal gönderiden belirgin farklı ===== */
.post.capsule-post{background:linear-gradient(180deg,rgba(245,165,36,.07),transparent 160px);border-left:3px solid #f5a524;box-shadow:inset 0 0 0 1px rgba(245,165,36,.12)}
.post.capsule-post.th{flex-wrap:wrap}
.cap-strip{flex:0 0 100%;display:flex;align-items:center;gap:10px;margin:0 0 8px;padding:9px 14px;background:linear-gradient(90deg,rgba(245,165,36,.22),rgba(255,122,89,.10));color:var(--text);border-bottom:1px solid rgba(245,165,36,.25)}
.post.capsule-post.th .cap-strip{margin:-14px -16px 10px;flex-basis:calc(100% + 32px)}
.cap-strip .cs-ic{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#f5a524;color:#1a1200;flex:none}
.cap-strip .cs-ic .ic{width:17px;height:17px}
.cap-strip b{display:block;font-size:13.5px;letter-spacing:.01em}.cap-strip small{display:block;color:var(--muted);font-size:12px}
.cap-strip.opened .cs-ic{background:linear-gradient(135deg,#8b5cf6,#2c84ff);color:#fff}
.post.capsule-post.cp-open{border-left-color:#8b5cf6;background:linear-gradient(180deg,rgba(139,92,246,.08),transparent 160px);box-shadow:inset 0 0 0 1px rgba(139,92,246,.14)}
.post.capsule-post.cp-open .cap-strip{background:linear-gradient(90deg,rgba(139,92,246,.24),rgba(44,132,255,.10));border-bottom-color:rgba(139,92,246,.3)}
.post.sealed{border-left:3px solid #f5a524}
.post.sealed .capsule{border-color:rgba(245,165,36,.45);background:repeating-linear-gradient(135deg,transparent 0 10px,rgba(245,165,36,.05) 10px 20px),var(--surface)}
.seal-bar{height:4px;border-radius:2px;background:var(--soft);margin:14px auto 0;max-width:220px;overflow:hidden}.seal-bar i{display:block;height:100%;background:linear-gradient(90deg,#f5a524,#ff7a59)}
.th-badges{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:1px 0 0;font-size:12.5px;color:var(--muted)}
/* ===== hikâye ekle (+) düğmesi daha büyük ve kolay dokunulur ===== */
.ring .plus{width:28px;height:28px;right:-5px;bottom:-5px}
.ring .plus .ic{width:15px;height:15px}
.ring .plus::before{content:"";position:absolute;inset:-14px}

/* hikâye halkası eski görünümüne döndü (artı rozeti eski boyutta; dokunma alanı görünmez şekilde geniş) */
.ring .plus{width:22px;height:22px;right:-2px;bottom:-2px}
.ring .plus .ic{width:12px;height:12px}
.ring .plus::before{content:"";position:absolute;inset:-16px}
/* Günlük An: hikâye halkalarına benzemesin, ayrı bir kart */
.mom-card{margin:10px 14px 4px;padding:12px 0 6px;border-radius:16px;background:var(--surface);border:1px solid var(--line)}
.mom-h{display:flex;align-items:baseline;gap:8px;padding:0 14px 2px}.mom-h b{font-size:14.5px}.mom-h small{color:var(--muted);font-size:12px}
.mom-card .mom-strip{border-bottom:0;padding:8px 14px 8px}
.mom-img{width:60px;height:80px;border-radius:10px;border:1px solid var(--line)}
.mom-c{width:60px}

/* ===== kayıt sihirbazı + sözleşme ekranları ===== */
.steps{display:flex;gap:6px;justify-content:center;margin:2px 0 16px}
.steps i{width:28px;height:4px;border-radius:2px;background:var(--edge);transition:background .2s}.steps i.on{background:var(--acc1)}
.step{display:none;text-align:left}.step.on{display:block;animation:rise .3s ease both}
.step h2{margin:0;font:700 22px/1.2 var(--f-ui);text-align:center;letter-spacing:-.02em}
.step>p.muted{text-align:center;margin:6px 0 14px}
.step>label+label,.step>label+.field{margin-top:0}
.step form,.step{display:none}.step.on{display:flex;flex-direction:column;gap:8px}
.dob{display:grid;grid-template-columns:.8fr 1.3fr 1fr;gap:8px;margin:4px 0 6px}
.dob select{height:50px;border-radius:15px;background:var(--surface);border:1px solid var(--line);padding:0 12px;font-size:16px;color:var(--text);-webkit-appearance:none;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 17px) 22px,calc(100% - 12px) 22px;background-size:5px 5px;background-repeat:no-repeat;width:100%;margin:0}
.two{display:grid;grid-template-columns:1fr 2fr;gap:8px;margin-top:4px}
.auth-card .two .btn-ghost,.auth-card .two .btn-primary{height:48px;border-radius:15px}
.agree{display:flex;flex-direction:column;gap:8px;margin:2px 0 6px}
.agree-card{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;background:var(--surface);border:1px solid var(--line);text-align:left;width:100%}
.agree-card .grow{flex:1;min-width:0}.agree-card .grow b{display:block;font-size:14.5px}.agree-card small{color:var(--muted);font-size:12px}
.agree-card .chev{width:18px;height:18px;color:var(--muted)}
.auth-card .tgl{display:flex;flex-direction:row;align-items:flex-start;gap:12px;font-size:12.5px;line-height:1.4;color:var(--text);margin:4px 0;cursor:pointer;font-weight:400}
.auth-card .tgl[hidden]{display:none}
.tgl input{position:absolute;opacity:0;pointer-events:none;width:0!important;height:0!important}
.sw2{flex:none;width:44px;height:26px;border-radius:13px;background:var(--edge);position:relative;transition:background .2s;margin-top:1px}
.sw2::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .2s}
.tgl input:checked+.sw2{background:var(--acc1)}.tgl input:checked+.sw2::after{transform:translateX(18px)}
.reader{position:fixed;inset:0;z-index:100;background:var(--bg);display:flex;flex-direction:column;animation:up .25s;text-align:left}
.reader[hidden]{display:none}
.reader header{display:flex;align-items:center;gap:8px;padding:calc(var(--sat) + 8px) 8px 8px;border-bottom:1px solid var(--line)}
.reader header b{font-size:16px}
.rbody{flex:1;overflow-y:auto;padding:16px 20px calc(var(--sab) + 28px)}
.rbody h3{margin:18px 0 4px;font-size:15px}.rbody h3:first-child{margin-top:0}
.rbody p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.6}
.cgate{position:fixed;inset:0;z-index:9990;background:radial-gradient(130% 55% at 50% -8%,rgba(44,132,255,.30),transparent 62%),var(--bg);display:flex;align-items:center;justify-content:center;padding:calc(var(--sat) + 14px) 22px calc(var(--sab) + 14px);overflow-y:auto}
.cg-in{width:100%;max-width:380px;text-align:center}
.cg-in h2{margin:8px 0 0;font:700 24px/1.2 var(--f-ui);letter-spacing:-.02em}
.cg-in>p.muted{margin:6px auto 16px;max-width:300px;font-size:14px}
.cg-in .btn-primary{height:50px;border-radius:15px;margin-top:6px}
.cgate .alert{margin:8px 0;text-align:left}
.cgate .tgl{text-align:left;display:flex;gap:12px;align-items:flex-start;font-size:12.5px;line-height:1.4;margin:6px 0;cursor:pointer}
@media (max-height:720px){.step h2{font-size:20px}.step>p.muted{margin:4px 0 10px;font-size:13px}.agree-card{padding:8px 10px}.agree-card small{display:none}}

.agree-card .sh{display:none}
@media (max-height:720px){
  .agree{flex-direction:row;gap:6px}
  .agree-card{flex:1;flex-direction:column;gap:4px;padding:9px 4px;text-align:center;justify-content:center}
  .agree-card .lg,.agree-card .chev,.agree-card small{display:none}.agree-card .sh{display:inline}
  .agree-card .grow b{font-size:12.5px}
  .agree-card .sic{width:30px;height:30px}.agree-card .sic .ic{width:16px;height:16px}
}

/* ===== Günlük An v2: uygulama içi kamera, şimdi kartı, tam ekran görüntüleyici ===== */
.mnow,.mdone{display:flex;align-items:center;gap:14px;width:calc(100% - 28px);margin:10px 14px 4px;padding:12px 14px;border-radius:20px;text-align:left;position:relative;overflow:hidden}
.mnow{background:linear-gradient(120deg,#ff7a45,#e63e8c 55%,#7b4dff);color:#fff;box-shadow:0 8px 24px -10px rgba(230,62,140,.6)}
.mnow-ring{flex:none;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.22);animation:momp 1.8s ease-in-out infinite}
.mnow-cam{width:42px;height:42px;border-radius:50%;background:#fff;color:#e63e8c;display:grid;place-items:center}
.mnow-cam .ic{width:22px;height:22px}
@keyframes momp{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.5)}50%{box-shadow:0 0 0 9px rgba(255,255,255,0)}}
.mnow-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.mnow-t b{font-size:17px;letter-spacing:-.01em}.mnow-t small{font-size:13px;opacity:.9;line-height:1.3}
.mnow-n{display:inline-flex;align-items:center;gap:4px;margin-top:3px;font-size:12px;font-weight:600;opacity:.95}
.mnow-go{flex:none;width:20px;height:20px;opacity:.8}
.mdone{background:var(--surface);border:1px solid var(--line);color:var(--text)}
.mdone .mnow-t small{color:var(--muted);opacity:1}
.mstack{flex:none;display:flex;padding-left:10px}
.mstack img{width:40px;height:52px;border-radius:10px;object-fit:cover;border:2px solid var(--surface);margin-left:-12px;background:var(--soft);box-shadow:0 2px 6px rgba(0,0,0,.35)}
.mstack img:nth-child(1){transform:rotate(-5deg)}.mstack img:nth-child(3){transform:rotate(5deg)}

.mcam{position:fixed;inset:0;z-index:200;background:#000;color:#fff;overflow:hidden;animation:up .25s}
.mcam video,.mcam .mcam-pv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mcam video.mir{transform:scaleX(-1)}
.mcam [hidden]{display:none!important}
.mcam-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}.mcam-flash.on{animation:mflash .35s}
@keyframes mflash{0%{opacity:.85}100%{opacity:0}}
.mcam-top{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;justify-content:space-between;padding:calc(var(--sat) + 12px) 14px 30px;background:linear-gradient(rgba(0,0,0,.5),transparent)}
.mcam-b{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.35);color:#fff}
.mcam-chip{padding:6px 14px;border-radius:99px;background:rgba(0,0,0,.4);font:600 14px var(--f-ui);font-variant-numeric:tabular-nums}
.mcam-chip.late{background:rgba(230,62,62,.7)}
.mcam-bot{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;gap:14px;padding:40px 18px calc(var(--sab) + 24px);background:linear-gradient(transparent,rgba(0,0,0,.6))}
.mcam-hint{font-size:13px;opacity:.85}
.mcam-shut{width:78px;height:78px;border-radius:50%;border:4px solid #fff;display:grid;place-items:center;background:transparent}
.mcam-shut i{width:62px;height:62px;border-radius:50%;background:#fff;transition:transform .12s}.mcam-shut:active i{transform:scale(.86)}
.mcam-send input{width:100%;height:48px;border-radius:24px;padding:0 18px;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.25);color:#fff;font-size:16px;text-align:center}
.mcam-send input::placeholder{color:rgba(255,255,255,.65)}
.mcam-row{display:flex;gap:10px;width:100%}
.mcam-re,.mcam-go{height:50px;border-radius:25px;display:flex;align-items:center;justify-content:center;gap:8px;font:600 16px var(--f-ui)}
.mcam-re{flex:0 0 auto;padding:0 20px;background:rgba(255,255,255,.18);color:#fff}
.mcam-go{flex:1;background:#fff;color:#111}.mcam-go:disabled{opacity:.6}
.mcam .ic{width:20px;height:20px}
.mview{position:fixed;inset:0;z-index:150;background:#000;color:#fff;animation:up .2s}
.mv-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.mv-shade{position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.55),transparent 22%,transparent 70%,rgba(0,0,0,.6));pointer-events:none}
.mv-bars{position:absolute;left:10px;right:10px;top:calc(var(--sat) + 8px);display:flex;gap:4px}
.mv-bars i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.35);overflow:hidden;position:relative}
.mv-bars i.done{background:#fff}.mv-bars i.cur::after{content:"";position:absolute;inset:0;background:#fff;transform-origin:left;animation:mvp 5s linear forwards}
@keyframes mvp{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.mv-head{position:absolute;left:12px;right:8px;top:calc(var(--sat) + 20px);display:flex;align-items:center;gap:8px}
.mv-head .who{display:flex;align-items:center;gap:10px;color:#fff;font-weight:600}.mv-head small{font-weight:400;opacity:.8;margin-left:4px}
.mv-cap{position:absolute;left:18px;right:18px;bottom:calc(var(--sab) + 34px);text-align:center;font-size:17px;line-height:1.35;text-shadow:0 1px 8px rgba(0,0,0,.7)}
.mv-l,.mv-r{position:absolute;top:70px;bottom:0;width:38%}.mv-l{left:0}.mv-r{right:0;width:62%}
.mv-head{z-index:2}

/* ===== DM: yanıtlanan mesaj görünümü ===== */
.msg .bw{position:relative;z-index:1}
.mreply{position:relative;display:block;max-width:250px;min-width:90px;margin:0 0 -16px;padding:7px 12px 22px 15px;border-radius:16px;background:var(--soft);border:0;font-size:12.5px;line-height:1.3;overflow:hidden;opacity:.92}
.mreply::before{content:"";position:absolute;left:6px;top:7px;bottom:20px;width:3px;border-radius:2px;background:var(--acc1)}
.me .mreply{background:color-mix(in srgb,var(--acc1) 22%,var(--soft))}
.mreply b{display:block;font-size:12px;color:var(--acc1);margin-bottom:1px}
.mreply span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal;color:var(--muted);overflow:hidden;text-overflow:ellipsis}
.msg:has(.mreply) .bub{box-shadow:0 0 0 3px var(--bg)}
.rbar{padding:9px 6px 9px 14px;border-radius:16px;border-left:0;position:relative;overflow:hidden;background:var(--soft)}
.rbar::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--acc1)}
.rbar .rb-t span{-webkit-line-clamp:1}

/* Günlük An yeri: akışın içinde değil, alt çubuğun üstünde yüzen hap */
#momentWrap{position:fixed;left:0;right:0;bottom:calc(var(--tab-h) + var(--sab) + 12px);z-index:30;display:flex;justify-content:center;pointer-events:none}
#momentWrap:empty{display:none}
#momentWrap>button{pointer-events:auto;width:auto;max-width:calc(100% - 28px);margin:0;padding:7px 16px 7px 8px;gap:10px;border-radius:99px;box-shadow:0 10px 28px -8px rgba(0,0,0,.6);animation:rise .35s ease both}
#momentWrap .mnow-ring{width:42px;height:42px}#momentWrap .mnow-cam{width:34px;height:34px}#momentWrap .mnow-cam .ic{width:18px;height:18px}
#momentWrap .mnow-t b{font-size:15px}#momentWrap .mnow-t small{font-size:12px;white-space:nowrap}
#momentWrap .mnow-n,#momentWrap .mnow-go{display:none}
#momentWrap .mstack img{width:30px;height:40px;border-radius:8px}

/* Onay modali: blur yok */
.dlg-bg{position:fixed;inset:0;z-index:400;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;padding:24px;animation:dlgf .16s ease both}
.dlg{width:100%;max-width:340px;background:var(--surface);border:1px solid var(--edge);border-radius:18px;padding:22px 20px 16px;animation:dlgp .2s cubic-bezier(.2,.9,.3,1.2) both}
.dlg h3{margin:0 0 6px;font-size:17px}
.dlg p{margin:0 0 18px;font-size:15px;line-height:1.45;color:var(--text)}
.dlg-b{display:flex;gap:10px}
.dlg-b .btn-ghost,.dlg-b .btn-primary{flex:1;width:auto;height:44px}
.dlg-b .btn-primary.dng{background:#e5384b;color:#fff}
@keyframes dlgf{from{opacity:0}}
@keyframes dlgp{from{opacity:0;transform:scale(.92)}}

/* ===== HideOut v3: görsel kimlik (lila vurgu, serif logo, masaüstü düzeni) ===== */
:root,[data-pal=gates]{--acc1:#b9a8ff;--ink:#15102e}
:root{
  --bgBase:#0b0b10;--bg:#0b0b10;--surface:#12121a;--soft:#1a1a24;--card:#12121a;
  --line:#1f1f2b;--edge:#2d2d3c;--glass:rgba(11,11,16,.97);--glass-strong:#0b0b10;--link:#b9a8ff;
  --f-serif:var(--f-ui);--f-mono:var(--f-ui);
}
:root[data-theme=light]{--acc1:#6d56e8;--ink:#fff;--link:#5b44d4}
:root[data-theme=light][data-pal=gates]{--acc1:#6d56e8;--ink:#fff}
.brand span,.sn-brand span{font-weight:600;letter-spacing:-.01em;text-transform:lowercase;font-size:25px}
.tab.on{color:var(--acc1)}
.tab.on .ic{stroke-width:2.2}
.tab.on:not(:has(.av))::after{content:"";position:absolute;bottom:5px;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--acc1)}
.tab-plus{width:40px;height:32px;border-radius:12px;border:0;background:var(--acc1);color:var(--ink)}
.tab-plus .ic{width:19px;height:19px;stroke-width:2.6}
.ring.has{border-color:var(--acc1)}
.dlg-b .btn-primary:not(.dng){background:var(--acc1);color:var(--ink)}

#sideL,#sideR{display:none}
@media (min-width:1100px){
  :root{--tab-h:0px}
  .tabbar{display:none}
  #app{border-left:1px solid var(--line);border-right:1px solid var(--line);padding-bottom:40px}
  .top{background:var(--glass)}
  #sideL,#sideR{display:block;position:fixed;top:0;bottom:0;overflow-y:auto;scrollbar-width:none;z-index:20}
  #sideL{right:calc(50% + 300px);width:236px;padding:22px 14px 22px 0;display:flex;flex-direction:column;gap:2px}
  #sideR{left:calc(50% + 300px);width:290px;padding:24px 0 22px 22px}
  .toast{bottom:24px}
  .sn-brand{display:flex;align-items:center;gap:9px;padding:4px 14px 20px}
  .sn{position:relative;display:flex;align-items:center;gap:14px;height:46px;padding:0 14px;border-radius:12px;color:var(--muted);font-size:15.5px;font-weight:500;transition:background .15s,color .15s}
  .sn:hover{background:var(--soft);color:var(--text)}
  .sn.on{background:var(--soft);color:var(--text)}
  .sn.on .ic{color:var(--acc1)}
  .sn .badge{position:static;margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--heart);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center}
  .sn-new{display:flex;align-items:center;justify-content:center;gap:8px;height:46px;margin:14px 0 0;border-radius:12px;background:var(--acc1);color:var(--ink);font-weight:600;font-size:15px}
  .sn-new .ic{width:19px;height:19px;stroke-width:2.6}
  .sn-me{display:flex;align-items:center;gap:10px;margin-top:auto;padding:10px 12px;border-radius:12px;border:1px solid var(--line);min-width:0}
  .sn-me span{display:flex;flex-direction:column;min-width:0}
  .sn-me b,.fr b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .sn-me small,.fr small{font:400 11.5px var(--f-mono);color:var(--muted);overflow:hidden;text-overflow:ellipsis}
  #sideR h4{margin:0 0 10px;font-size:15px;font-weight:600}
  #sideR .muted{font-size:13px;line-height:1.5}
  .fr{display:flex;align-items:center;gap:11px;padding:8px 10px;margin:0 -10px;border-radius:12px;min-width:0}
  .fr:hover{background:var(--soft)}
  .fr span{display:flex;flex-direction:column;min-width:0}
}
@media (min-width:1100px){
  .top-in .brand{visibility:hidden}
  .fr,.sn-me{color:var(--text)}
}

/* ===== Kompakt ölçek: her şey bir tık küçük ===== */
:root{--tab-h:48px}
body{font-size:14px}
.ic{width:20px;height:20px}
.icon-btn{width:40px;height:40px}
.top-in{height:48px}
.brand{font-size:21px}
.brand span{font-size:23px}
.tab-plus{width:36px;height:28px;border-radius:10px}
.tab-plus .ic{width:17px;height:17px}
.tab .badge{top:6px;min-width:16px;height:16px;font-size:10px}
.btn-i{height:38px}
.btn-i .ic{width:20px;height:20px}
.btn-i span{font-size:12.5px}
.av{width:36px;height:36px;font-size:14px}
.av.sm{width:28px;height:28px;font-size:12px}
.av.lg{width:76px;height:76px;font-size:28px}
.tab .av{width:24px;height:24px;font-size:10px}
.story{width:62px;font-size:11.5px}
.story span:last-child{max-width:62px}
.ring{width:60px;height:60px}
.ring .plus{width:20px;height:20px}
.post-text{font-size:14.5px}
.btn-primary{height:42px;font-size:14px}
.btn-ghost{height:38px;font-size:13.5px}
.chip{font-size:12px}
.empty-ic{transform:scale(.85)}
.empty h3{font-size:16px}
@media (min-width:1100px){
  .sn{height:42px;font-size:14.5px;gap:12px}
  .sn-new{height:42px;font-size:14px}
}

button,input,textarea,select{font-family:var(--f-ui)}

/* ===== Profil v2: kapak, tema, istatistik, dürtme ===== */
.th-dusk{background:linear-gradient(135deg,#2a1f4d,#12121f 60%,#3b2a5f)}
.th-ember{background:linear-gradient(135deg,#4a1f1a,#16100f 60%,#6b3a1e)}
.th-forest{background:linear-gradient(135deg,#12332a,#0d1512 60%,#1f4a3a)}
.th-ocean{background:linear-gradient(135deg,#102a4a,#0c121b 60%,#1b4a6b)}
.th-rose{background:linear-gradient(135deg,#4a1a35,#150e13 60%,#6b2a4a)}
.th-mono{background:linear-gradient(135deg,#2a2a2a,#0f0f0f 60%,#3a3a3a)}
.pcover{height:128px;background-size:cover;background-position:center;border-radius:0 0 18px 18px}
#cvp{border-radius:14px;height:110px}
.pf2{padding:0}
.pf2 .pbody{padding:0 16px 4px}
.pf2 .prow{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:-40px}
.pf2 .prow .av.lg{width:84px;height:84px;border:3px solid var(--bg);font-size:30px}
.pf2 .pact{display:flex;gap:8px;align-items:center;padding-bottom:4px}
.pf2 .pact .btn-ghost,.pf2 .pact .fbtn{margin:0;height:36px;width:auto;padding:0 16px;display:grid;place-items:center;color:var(--text)}
.pf2 .pact .fbtn.big{height:36px}
.pf2 .pokeb{padding:0;width:36px}
.pf2 .pokeb.poked .ic,.fr-p.poked .ic{animation:pokeshake .5s ease}
.pf2 h2{margin:12px 0 0;font-size:21px;display:flex;align-items:center;gap:6px}
.pf2 h2 .pl{width:15px;height:15px;color:var(--muted)}
.pf2 .un{color:var(--muted);font-size:13.5px;margin-top:1px}
.pf2 .bio{margin:10px 0 0;font-size:14px}
.pstats{display:flex;gap:6px;margin:14px 0 0}
.pstats>*{flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;padding:10px 4px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.pstats b{font-size:17px}
.pstats span{font-size:11.5px;color:var(--muted)}
.pf2 .askbtn{margin-top:10px}
.thm{display:flex;gap:10px}
.thm button{width:34px;height:34px;border-radius:50%;border:2px solid var(--bg)}
.thm button.on{box-shadow:0 0 0 2px var(--text)}
@keyframes pokeshake{0%,100%{transform:rotate(0)}20%{transform:rotate(-24deg)}40%{transform:rotate(20deg)}60%{transform:rotate(-14deg)}80%{transform:rotate(10deg)}}
.pokepop{position:fixed;z-index:450;left:50%;top:calc(var(--sat) + 12px);width:calc(100% - 24px);max-width:420px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:10px 10px 10px 12px;background:var(--surface);border:1px solid var(--edge);border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.5);animation:pokein .35s cubic-bezier(.2,.9,.3,1.3) both}
.pokepop.out{animation:pokeout .22s ease both}
.pokepop .pk-av{animation:pokeshake .6s .2s ease 2}
.pokepop .grow{font-size:14px}
.pokepop .pk-b{display:flex;align-items:center;gap:6px;height:34px;padding:0 14px;border-radius:99px;background:var(--acc1);color:var(--ink);font-weight:600;font-size:13px}
.pokepop .pk-b .ic{width:16px;height:16px}
.pokepop .pk-x{width:32px;height:32px;display:grid;place-items:center;color:var(--muted)}
@keyframes pokein{from{opacity:0;transform:translate(-50%,-30px)}}
@keyframes pokeout{to{opacity:0;transform:translate(-50%,-20px)}}
@media (min-width:1100px){
  .fr{padding:4px 6px 4px 10px}
  .fr a{display:flex;align-items:center;gap:11px;min-width:0;flex:1;color:var(--text);padding:4px 0}
  .fr-p{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;color:var(--muted);flex:none}
  .fr-p:hover{background:var(--soft);color:var(--acc1)}
  .fr-p .ic{width:17px;height:17px}
}

/* ===== Üst bar (DM sol, zil sağ), Keşfet, Cave's ===== */
.icon-btn{position:relative}
.icon-btn .badge{position:absolute;top:3px;right:1px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--heart);color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center;border:2px solid var(--bg);box-sizing:content-box}
.top-in{padding-left:6px}
.top-in .dm-top{margin-right:2px}
.top-in .brand{margin-left:0}
.top-r{display:flex;align-items:center}
@media (min-width:1100px){.top-in .dm-top,.top-in .bell-top,.top-in .brand{visibility:hidden}}
.xsearch{position:relative;margin:12px 14px 0}
.xsearch .ic{position:absolute;left:13px;top:50%;margin-top:-9px;width:18px;height:18px;color:var(--muted);pointer-events:none}
.xsearch input{padding-left:42px;height:44px;border-radius:14px;background:var(--soft)}
.xcats{display:flex;gap:8px;padding:12px 14px;overflow-x:auto;scrollbar-width:none}
.xcats::-webkit-scrollbar{display:none}
.xcats.wrap{flex-wrap:wrap;padding:0}
.xcats .chip{flex:none;cursor:pointer;border:1px solid transparent;font-size:12.5px}
.xcats .chip .ic{width:14px;height:14px}
.xcats .chip.on,.copts .chip.on{background:var(--acc1);color:var(--ink)}
.xpl{margin:0 14px 6px;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.xpr{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line)}
.xpr:last-child{border-bottom:0}
.xpr a{display:flex;align-items:center;gap:10px;flex:1;min-width:0;color:var(--text)}
.xpr span{display:flex;flex-direction:column;min-width:0}
.xpr small,.cvc small{color:var(--muted);font-size:12px}
.xgrid{columns:2;column-gap:8px;padding:4px 10px 10px}
.xt{display:block;break-inside:avoid;margin-bottom:8px;border-radius:14px;overflow:hidden;background:var(--surface);border:1px solid var(--line);color:var(--text)}
.xt img{width:100%;object-fit:cover;display:block}
.xtx{padding:14px 12px;min-height:90px;font-size:13.5px;line-height:1.4;background:linear-gradient(135deg,var(--soft),var(--surface))}
.xtx p{margin:0;overflow-wrap:anywhere}
.xf{display:flex;align-items:center;gap:6px;padding:8px 10px;font-size:12px;color:var(--muted)}
.xf span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xf .xc{display:grid;place-items:center;color:var(--acc1)}
.xf .xc .ic{width:14px;height:14px}
.pmeta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:8px 0 2px}
.pcat{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:99px;background:var(--soft);font-size:12px;color:var(--acc1)}
.pcat .ic{width:13px;height:13px}
.lcard{display:flex;align-items:center;gap:8px;max-width:100%;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface);color:var(--text);font-size:12.5px}
.lcard img{width:84px;height:48px;object-fit:cover}
.lcard span{display:flex;align-items:center;gap:6px;padding:6px 12px;color:var(--muted)}
.lcard span .ic{width:13px;height:13px}
.post.ig .pmeta{padding:0 14px}
.cv-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 16px 8px}
.cv-h h2{margin:0;font-size:22px}
.cv-h p{margin:4px 0 0;color:var(--muted);font-size:13px;line-height:1.4}
.cv-h .btn-primary{width:auto;padding:0 16px;display:flex;align-items:center;gap:6px;flex:none;height:38px}
.cv-h .btn-primary .ic{width:16px;height:16px}
.cvl{padding:6px 12px}
.cvc{display:flex;align-items:center;gap:12px;padding:14px;margin-bottom:8px;border:1px solid var(--line);border-radius:18px;background:var(--surface);color:var(--text)}
.cvc b{font-size:15px}
.cvc p{margin:4px 0 0;font-size:12.5px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cvk{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--soft);color:var(--acc1);flex:none}
.cvk.music{background:linear-gradient(135deg,#3b2a5f,#1a1a2e);color:#e6deff}
.cvm{display:flex;flex:none}
.cvm .av{margin-left:-8px;border:2px solid var(--surface)}
.cvm .av:first-child{margin-left:0}
.cvj{flex:none;padding:6px 12px;border-radius:99px;background:var(--acc1);color:var(--ink);font-size:12.5px;font-weight:600}
.cv-join{display:flex;flex-direction:column;align-items:center;gap:8px;padding:48px 24px;text-align:center}
.cv-join h2{margin:6px 0 0}
.cv-join p{margin:0;color:var(--muted)}
.cv-join .btn-primary{margin-top:14px;max-width:240px}
.cave{padding-bottom:70px}
body.cave .tabbar{display:none}
body.cave #app{padding-bottom:0}
.cv-msgs{display:flex;flex-direction:column;gap:6px;padding:12px 12px 8px}
.cm{display:flex;align-items:flex-end;gap:8px;max-width:86%}
.cm.me{align-self:flex-end;flex-direction:row-reverse}
.cm .cb{display:flex;flex-direction:column;gap:2px;padding:8px 12px;border-radius:16px;background:var(--soft);font-size:14px;line-height:1.4;min-width:0;overflow-wrap:anywhere}
.cm.me .cb{background:var(--acc1);color:var(--ink)}
.cm.me .cb a{color:inherit;text-decoration:underline}
.cm .cb b{font-size:11.5px;color:var(--acc1)}
.cm .cb small{font-size:10.5px;opacity:.6;align-self:flex-end}
.cv-sys{align-self:center;font-size:12px;color:var(--muted);padding:2px 8px}
.cv-empty{text-align:center;color:var(--muted);font-size:13px;padding:30px 0}
.cv-bar{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:100%;max-width:600px;display:flex;gap:8px;align-items:center;padding:8px 10px calc(8px + var(--sab));background:var(--bg);border-top:1px solid var(--line);z-index:35}
.cv-bar input{flex:1;height:42px;border-radius:21px;padding:0 16px}
.cv-bar .send{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--acc1);color:var(--ink);flex:none}
.cv-bar .send:disabled{opacity:.4}
.mu{margin:10px 12px 0;padding:14px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(160deg,#241c3d,var(--surface) 70%)}
.mu-np{display:flex;align-items:center;gap:12px}
.mu-np img{width:84px;height:48px;border-radius:10px;object-fit:cover;flex:none}
.mu-np b{display:block;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mu-np small{color:var(--muted);font-size:12px}
.mu-c{display:flex;align-items:center;gap:8px;margin-top:12px}
.mu-c .btn-primary{width:auto;flex:1;display:flex;align-items:center;justify-content:center;gap:8px;height:40px}
.mu-c .icon-btn{background:var(--soft)}
.mu-add{display:flex;gap:8px;margin-top:12px}
.mu-add input{flex:1;height:40px;border-radius:12px}
.mu-add .btn-ghost{width:auto;padding:0 16px;height:40px}
.mu-q h4{margin:14px 0 6px;font-size:12px;color:var(--muted);font-weight:600}
.mq{display:flex;align-items:center;gap:10px;padding:5px 0;font-size:13px}
.mq img{width:48px;height:27px;border-radius:6px;object-fit:cover;flex:none}
.mq span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mq small{color:var(--muted);font-size:11px}
.ytp{margin-top:10px;display:flex;justify-content:center}
.ytp:empty{display:none}
.ytp iframe{border-radius:12px;max-width:100%}
.cv-t{margin:14px 4px 8px;font-size:12px;font-weight:600;color:var(--muted);letter-spacing:.02em}
.cvj.ask{background:var(--soft);color:var(--muted)}
.cv-join .btn-primary:disabled{opacity:.5}
.cvc .grow{min-width:0}

.xtop{display:flex;align-items:center;gap:8px;margin:12px 14px 0}
.xtop .xsearch{margin:0;flex:1}
.xnew{width:44px;height:44px;border-radius:14px;background:var(--acc1);color:var(--ink);display:grid;place-items:center;flex:none}
.xnew .ic{width:20px;height:20px;stroke-width:2.2}
.sp{margin-top:10px}
.sp[hidden]{display:none}
.sp iframe{border-radius:12px}
.mq-sp{width:48px;height:27px;display:grid;place-items:center;border-radius:6px;background:var(--soft);color:var(--acc1);flex:none}
.mq-sp .ic{width:14px;height:14px}



@media (min-width:1100px){.top-in .dm-top{visibility:hidden}}
.seg-sw button{transition:background .15s,color .15s}
.seg-sw button.on{background:var(--acc1);color:var(--ink);box-shadow:none}
.dm-top{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin-right:2px}
.dm-top .ic{width:25px;height:25px;stroke-width:1.6}
.dm-top #topdmb{position:absolute;inset:0;pointer-events:none}
.dm-top .badge{top:5px;right:3px}

/* ===== Cave's v2: Reddit tarzı topluluklar ===== */
.cvc{align-items:flex-start;gap:14px;padding:16px}
.cvk{background:linear-gradient(135deg,hsl(var(--h,260) 55% 38%),hsl(calc(var(--h,260) + 40) 60% 22%));color:#fff}
.cvk.big{width:64px;height:64px;border-radius:20px;border:4px solid var(--bg);flex:none}
.cvk.big .ic{width:28px;height:28px}
.cvb{flex:1;min-width:0}
.cvb b{display:block;font-size:16px;line-height:1.25;overflow-wrap:anywhere}
.cvs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:3px;font-size:12.5px;color:var(--muted)}
.cvs i{width:3px;height:3px;border-radius:50%;background:var(--muted);opacity:.6}
.cvc p{margin:8px 0 0;font-size:13.5px;line-height:1.4;color:var(--text);opacity:.85}
.cvnp{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:12px;color:var(--acc1)}
.cvnp .ic{width:13px;height:13px;flex:none}
.cvr{flex:none;align-self:center}
.cvj{display:inline-block;white-space:nowrap}
.cv-in{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:99px;background:var(--soft);color:var(--muted);font-size:12.5px;font-weight:600;white-space:nowrap}
.cv-in .ic{width:14px;height:14px;color:var(--acc1)}
.cv-ban{height:96px;background:linear-gradient(135deg,hsl(var(--h) 55% 30%),hsl(calc(var(--h) + 50) 60% 16%))}
.cv-id{display:flex;align-items:flex-end;gap:12px;padding:0 16px;margin-top:-30px}
.cv-id .cvb{padding-bottom:4px}
.cv-id h2{margin:0;font-size:20px;line-height:1.2;overflow-wrap:anywhere}
.cv-jb{width:auto;height:36px;padding:0 18px;flex:none;margin-bottom:4px}
.cv-ab{margin:10px 16px 0;font-size:14px;line-height:1.5;color:var(--text);opacity:.9}
.cv-new{display:flex;align-items:center;gap:12px;width:calc(100% - 24px);margin:14px 12px 4px;padding:10px 14px;border:1px solid var(--line);border-radius:16px;background:var(--surface);color:var(--muted);font-size:14px;text-align:left}
.cv-new span{flex:1}
.cv-new .ic{width:20px;height:20px}
.cave{padding-bottom:20px}
body.cave .tabbar{display:flex}
body.cave #app{padding-bottom:calc(var(--tab-h) + var(--sab))}

/* ===== Mini oyunlar ===== */
.xgm{display:flex;align-items:center;gap:12px;margin:0 14px 10px;padding:12px 14px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(135deg,#2a1f4d,var(--surface));color:var(--text)}
.xgm>.ic:first-child{width:26px;height:26px;color:var(--acc1);flex:none}
.xgm div{flex:1;min-width:0}
.xgm b{display:block;font-size:14.5px}
.xgm small{color:var(--muted);font-size:12px}
.xgm>.ic:last-child{width:18px;height:18px;color:var(--muted)}
.gm-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:10px 14px}
.gm-card{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:16px;min-height:132px;border-radius:20px;border:1px solid var(--line);text-align:left;color:#fff;position:relative;overflow:hidden}
.gm-card>span{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:rgba(255,255,255,.14);margin-bottom:auto}
.gm-card b{font-size:17px}
.gm-card small{font-size:12px;opacity:.75;line-height:1.3}
.gm-card.a{background:linear-gradient(135deg,#5b3fd1,#2a1f4d)}
.gm-card.b{background:linear-gradient(135deg,#c2410c,#4a1f1a)}
.gm-card.c{background:linear-gradient(135deg,#0f766e,#12332a)}
.gm-card.d{background:linear-gradient(135deg,#be185d,#4a1a35)}
.gm-card:active{transform:scale(.98)}
.gm{position:fixed;inset:0;z-index:120;background:var(--bg);display:flex;flex-direction:column;padding-top:var(--sat);animation:dlgf .18s ease both}
.gm-top{display:flex;align-items:center;justify-content:space-between;padding:6px 8px;border-bottom:1px solid var(--line)}
.gm-top b{font-size:16px}
.gm-body{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;padding:16px 14px calc(16px + var(--sab));overflow:auto}
.gm-stats{display:flex;justify-content:space-between;gap:10px;width:100%;max-width:420px;margin-bottom:16px;font-size:13px;color:var(--muted)}
.gm-stats b{color:var(--text);font-size:15px;margin-left:3px}
.gm-hint{margin:16px 0 0;font-size:12.5px;color:var(--muted)}
.gm-res{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.72);padding:24px;z-index:5;animation:dlgf .2s ease both}
.gm-rc{width:100%;max-width:320px;padding:24px 20px 18px;border-radius:22px;background:var(--surface);border:1px solid var(--edge);text-align:center}
.gm-rc h3{margin:0 0 6px;font-size:22px}
.gm-rc p{margin:0 0 18px;color:var(--muted);font-size:14px;line-height:1.5}
.mem{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;width:100%;max-width:400px}
.mc{position:relative;aspect-ratio:1;perspective:600px}
.mc>span{position:absolute;inset:0;display:grid;place-items:center;border-radius:16px;backface-visibility:hidden;transition:transform .35s}
.mc-b{background:linear-gradient(135deg,#3b2a5f,#1a1a2e);border:1px solid var(--edge)}
.mc-f{background:var(--surface);border:1px solid var(--acc1);color:var(--acc1);transform:rotateY(180deg)}
.mc-f .ic{width:34%;height:34%}
.mc.flip .mc-b{transform:rotateY(180deg)}
.mc.flip .mc-f{transform:rotateY(0)}
.mc.ok .mc-f{background:var(--acc1);color:var(--ink)}
.g48{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:100%;max-width:380px;aspect-ratio:1;padding:8px;border-radius:18px;background:var(--surface);border:1px solid var(--line);touch-action:none}
.g48 .t{display:grid;place-items:center;border-radius:12px;background:var(--soft);font-weight:700;font-size:clamp(18px,6vw,28px);color:#fff}
.g48 .t.v{background:hsl(calc(270 - var(--v) * 17) 58% calc(32% + var(--v) * 1.6%))}
.g48 .t.new{animation:gpop .22s ease}
@keyframes gpop{from{transform:scale(.4);opacity:.3}}
.xo{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%;max-width:340px;aspect-ratio:1}
.xc{display:grid;place-items:center;border-radius:18px;background:var(--surface);border:1px solid var(--line);color:var(--acc1);transition:background .15s}
.xc:not(.f):not(:disabled):active{background:var(--soft)}
.xc .ic{width:52%;height:52%;stroke-width:2}
.xc.o{color:#ff7aa8}
.xc.w{background:var(--soft);border-color:currentColor}
.c4{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;width:100%;max-width:400px;padding:10px;border-radius:20px;background:linear-gradient(160deg,#2a1f4d,#161226);border:1px solid var(--edge)}
.c4k{display:grid;place-items:center;aspect-ratio:1}
.c4k i,.dot{display:block;border-radius:50%;background:rgba(0,0,0,.45);box-shadow:inset 0 2px 4px rgba(0,0,0,.5)}
.c4k i{width:86%;height:86%}
.c4k i.d1,.dot.d1{background:#b9a8ff;box-shadow:inset 0 -3px 5px rgba(0,0,0,.25)}
.c4k i.d2,.dot.d2{background:#ff7aa8;box-shadow:inset 0 -3px 5px rgba(0,0,0,.25)}
.c4k i.w{animation:gpulse .8s ease infinite alternate}
@keyframes gpulse{to{transform:scale(.8)}}
.dot{display:inline-block;width:11px;height:11px;vertical-align:-1px;margin-right:2px}

[hidden]{display:none!important}
.mu-th{display:grid;place-items:center;width:84px;height:48px;border-radius:12px;background:var(--soft) center/cover no-repeat;color:var(--acc1);flex:none}
.mu-th.img .ic{display:none}
.mu-th .ic{width:22px;height:22px}
#fabMe{position:fixed;right:max(14px,calc(50% - 300px + 14px));bottom:calc(var(--tab-h) + var(--sab) + 14px);width:54px;height:54px;border-radius:50%;z-index:41;display:block;box-shadow:0 6px 22px rgba(0,0,0,.6);border:3px solid var(--bg);outline:2px solid var(--edge);background:var(--bg)}
#fabMe .av{width:100%;height:100%;font-size:20px}
#fabMe.on{outline-color:var(--acc1)}
#fabMe:active{transform:scale(.94)}
.kb #fabMe,body.chat #fabMe{display:none}
.rq{position:relative;margin-bottom:20px}
.rq .ic{position:absolute;left:13px;top:50%;margin-top:-8px;width:16px;height:16px;color:var(--muted);pointer-events:none}
.rq input{padding-left:38px;height:42px;border-radius:14px}
.rsec{margin-bottom:22px}
.rcv{display:flex;align-items:center;gap:10px;padding:6px 0;color:var(--text)}
.rcv .cvk{width:36px;height:36px;border-radius:12px}
.rcv .cvk .ic{width:17px;height:17px}
.rcb{display:flex;flex-direction:column;min-width:0}
.rcb b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rcb small{color:var(--muted);font-size:12px}
@media (min-width:1100px){
  #fabMe{display:none}
  #view .post{background:var(--surface);border:1px solid var(--line);border-radius:18px;margin:12px 12px 0;overflow:hidden}
  #view .post.ig{padding-top:12px}
  #view .post.capsule-post{border-left-width:3px}
  #posts{padding-bottom:20px}
}

.top-r .bell-top{width:44px;height:44px;display:flex;align-items:center;justify-content:center}
.top-r .bell-top .ic{width:25px;height:25px;stroke-width:1.6}
.bell-top #topbell{position:absolute;inset:0;pointer-events:none}
.bell-top .badge{top:5px;right:3px}
@media (min-width:1100px){.top-in .bell-top{visibility:hidden}}

.xo{aspect-ratio:auto}
.xc{aspect-ratio:1;min-height:0}
.c4k{position:relative}
.c4k i.drop{position:relative;z-index:2;animation:cdrop .4s cubic-bezier(.35,.1,.5,1) both}
@keyframes cdrop{from{transform:translateY(calc(var(--r) * -112% - 130%))}}
.c4k:not(:disabled):active i.d0{background:rgba(185,168,255,.35)}
.gm-wait{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;margin:auto;max-width:300px;width:100%}
.gm-wait h3{margin:0;font-size:19px;line-height:1.3}
.gm-wait p{margin:0;color:var(--muted);font-size:14px}
.gm-wait .btn-primary,.gm-wait .btn-ghost{width:100%}
.gm-wait .pk-av .av{width:64px;height:64px;font-size:24px}
.gm-spin{width:42px;height:42px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--acc1);animation:spin .8s linear infinite}

/* ===== web: fotoğraf okları, sürüklenen alanlar ===== */
.cnav{position:absolute;top:50%;margin-top:-18px;width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;display:none;place-items:center;z-index:4}
.cnav.prev{left:10px}.cnav.next{right:10px}
.cnav .ic{width:20px;height:20px}
@media (hover:hover){.media-wrap:hover .cnav{display:grid}}
@media (hover:hover) and (pointer:fine){.xcats,.stories,.carousel,.sug-r{cursor:grab}.dragging{cursor:grabbing!important;user-select:none}.dragging *{pointer-events:none}}

/* ===== Landing: mobil (tek sütun) ve web (X gibi üç sütun) ===== */
.lp-body{margin:0;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden}
.lp-body::before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(60% 40% at 50% 0,rgba(185,168,255,.14),transparent 70%)}
.lp-brand{display:flex;align-items:center;gap:9px;font-weight:600;font-size:21px;letter-spacing:-.02em;text-transform:lowercase}
.lp-brand.big{font-size:26px}
.lp-top{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:10px;max-width:640px;margin:0 auto;padding:calc(var(--sat) + 12px) 16px 12px;background:var(--bg)}
.lp-top-b,.lp-cta,.lp-dock-b{display:flex;gap:8px;align-items:center}
.lp-btn{display:inline-grid;place-items:center;height:38px;padding:0 18px;border-radius:99px;background:var(--acc1);color:var(--ink);font-weight:600;font-size:14px;cursor:pointer;border:1px solid var(--acc1);white-space:nowrap}
.lp-btn.ghost{background:transparent;color:var(--text);border-color:var(--edge)}
.lp-btn.big{height:46px;padding:0 26px;font-size:15px}
.lp-wrap{position:relative;max-width:600px;margin:0 auto;padding:0 14px 150px}
.lp-left,.lp-sign,.lp-feats-d{display:none}
.lp-hero{padding:18px 4px 18px;text-align:center}
.lp-hero h1{margin:0;font-size:clamp(28px,7vw,38px);line-height:1.12;letter-spacing:-.03em}
.lp-hero p{margin:14px auto 20px;max-width:440px;color:var(--muted);font-size:15px;line-height:1.55}
.lp-cta{justify-content:center;flex-wrap:wrap}
.lp-feats{display:grid;gap:10px}
.lp-feats-m{grid-template-columns:1fr 1fr;margin:4px 0 18px}
.lp-ft{display:flex;gap:11px;padding:12px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.lp-ft>span{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:var(--soft);color:var(--acc1);flex:none}
.lp-ft .ic{width:19px;height:19px}
.lp-ft b{display:block;font-size:13.5px}
.lp-ft small{display:block;margin-top:2px;color:var(--muted);font-size:12px;line-height:1.4}
.lp-feed{position:relative;border:1px solid var(--line);border-radius:20px;background:var(--surface);overflow:hidden}
.lp-post{padding:14px 16px 12px;border-bottom:1px solid var(--line)}
.lp-ph{display:flex;align-items:center;gap:10px}
.lp-ph b{display:block;font-size:14.5px}
.lp-ph small{color:var(--muted);font-size:12.5px}
.bl{filter:blur(5px);user-select:none;pointer-events:none}
.lp-av{display:block;width:40px;height:40px;border-radius:50%;flex:none}
.lp-av.g0{background:linear-gradient(135deg,#7c6cff,#c4b5fd)}
.lp-av.g1{background:linear-gradient(135deg,#ff7aa8,#7c6cff)}
.lp-av.g2{background:linear-gradient(135deg,#34d3a1,#2c84ff)}
.lp-av.g3{background:linear-gradient(135deg,#f5a524,#ff5d7a)}
.lp-av.g4{background:linear-gradient(135deg,#9aa0b4,#4b4f66)}
.lp-tx{margin:10px 0 0;font-size:15px;line-height:1.5}
.lp-cave{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:4px 11px;border-radius:99px;background:var(--soft);color:var(--acc1);font-size:12.5px}
.lp-cave .ic{width:14px;height:14px}
.lp-img{position:relative;height:240px;margin-top:12px;border-radius:16px;overflow:hidden;background:#222}
.lp-img::before{content:"";position:absolute;inset:-30px;filter:blur(24px)}
.lp-img.v1::before{background:radial-gradient(circle at 25% 30%,#ff8fb1,transparent 45%),radial-gradient(circle at 75% 70%,#7c6cff,transparent 50%),#2a2140}
.lp-img.v2::before{background:radial-gradient(circle at 70% 25%,#34d3a1,transparent 45%),radial-gradient(circle at 25% 75%,#2c84ff,transparent 50%),#10243a}
.lp-lock{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#fff;font-size:13px;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.lp-lock .ic{width:26px;height:26px}
.lp-acts{display:flex;gap:22px;margin-top:12px;color:var(--muted);font-size:13px}
.lp-acts span{display:inline-flex;align-items:center;gap:6px}
.lp-acts .ic{width:19px;height:19px}
.lp-more{display:flex;flex-direction:column;gap:4px;padding:22px 18px;text-align:center;background:linear-gradient(transparent,var(--bg))}
.lp-more span{color:var(--muted);font-size:13px}
.lp-dock{position:fixed;left:0;right:0;bottom:0;z-index:25;padding:0 12px calc(12px + var(--sab));pointer-events:none}
.lp-dock-in{pointer-events:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:560px;margin:0 auto;padding:12px 14px;border:1px solid var(--edge);border-radius:20px;background:var(--surface);box-shadow:0 10px 40px rgba(0,0,0,.5)}
.lp-dock-in b{display:block;font-size:14px}
.lp-dock-in small{display:block;color:var(--muted);font-size:12px;margin-top:1px}
@media (max-width:520px){.lp-dock-in{flex-direction:column;align-items:stretch;text-align:center}.lp-dock-b{justify-content:center}.lp-dock-b .lp-btn{flex:1}.lp-feats-m{grid-template-columns:1fr}}
.lp-modal{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.74);display:flex;align-items:center;justify-content:center;padding:20px}
.lp-card{position:relative;width:100%;max-width:380px;background:var(--surface);border:1px solid var(--edge);border-radius:22px;padding:26px 22px 20px;text-align:center}
.lp-card h2{margin:10px 0 4px;font-size:21px}
.lp-card form{display:flex;flex-direction:column;gap:10px;margin-top:14px;text-align:left}
.lp-card .logo-big{display:flex;justify-content:center}
.lp-x{position:absolute;top:10px;right:10px;width:36px;height:36px;display:grid;place-items:center;color:var(--muted)}
@media (min-width:1000px){
  .lp-top,.lp-hero,.lp-feats-m,.lp-dock,.lp-x{display:none}
  .lp-wrap{max-width:1240px;display:grid;grid-template-columns:250px minmax(0,600px) 360px;gap:0 28px;justify-content:center;padding:0 20px}
  .lp-left{display:flex;flex-direction:column;gap:22px;position:sticky;top:0;height:100vh;padding:24px 0}
  .lp-nav{display:flex;flex-direction:column;gap:4px}
  .lp-nav span{display:flex;align-items:center;gap:14px;height:46px;padding:0 14px;border-radius:12px;color:var(--muted);font-size:15.5px;font-weight:500}
  .lp-nav .ic{width:22px;height:22px}
  .lp-slogan{margin:auto 0 0;color:var(--muted);font-size:13.5px;line-height:1.5}
  .lp-center{border-left:1px solid var(--line);border-right:1px solid var(--line);min-height:100vh}
  .lp-feed{border:0;border-radius:0;background:transparent}
  .lp-post{padding:16px 18px 14px}
  .lp-right{padding:24px 0}
  .lp-sticky{position:sticky;top:20px;display:flex;flex-direction:column;gap:16px}
  .lp-modal{position:static;inset:auto;display:block!important;background:none;padding:0;z-index:auto}
  .lp-modal[hidden]{display:block!important}
  .lp-card{max-width:none;padding:24px 22px 18px}
  .lp-sign{display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px;border:1px solid var(--line);border-radius:20px;background:var(--surface);text-align:center}
  .lp-sign span{color:var(--muted);font-size:13px;margin-bottom:8px}
  .lp-sign .lp-btn{width:100%}
  .lp-feats-d{display:flex;flex-direction:column;gap:10px;padding:16px;border:1px solid var(--line);border-radius:20px;background:var(--surface)}
  .lp-feats-d h4{margin:0 0 2px;font-size:15px}
  .lp-feats-d .lp-ft{border:0;background:none;padding:4px 0}
  .lp-more{padding:34px 18px}
}

.lp-age{margin:0 0 16px;font-size:12.5px;color:var(--muted)}
.lp-foot{padding:6px 6px 8px}
.lp-foot-d{display:none}
.lp-legal{display:flex;flex-direction:column;gap:8px;font-size:12px;line-height:1.55;color:var(--muted)}
.lp-legal button{color:var(--muted);text-decoration:underline;font-size:12px;padding:0}
.lp-dm{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.74);display:flex;align-items:center;justify-content:center;padding:20px}
.lp-doc{max-width:560px;max-height:86vh;overflow:auto;text-align:left;padding:24px 22px}
.lp-doc h2{margin:0 0 6px;font-size:19px;padding-right:34px}
.lp-doc h4{margin:16px 0 4px;font-size:14px}
.lp-doc p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.6}
.lp-dx{position:absolute;top:12px;right:12px;width:36px;height:36px;display:grid;place-items:center;color:var(--muted)}
@media (min-width:1000px){.lp-foot-m{display:none}.lp-foot-d{display:block;padding:0 4px}.lp-center{padding-bottom:20px}}

/* ===== Mini oyunlar: nasıl oynanır ===== */
.gm-r{display:flex;align-items:center}
.gm-top b{flex:1;text-align:center}
.gm-tut{position:absolute;left:0;right:0;bottom:0;top:calc(var(--sat) + 53px);z-index:30;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:20px;animation:dlgf .2s ease both;overflow:auto}
.tut-in{width:100%;max-width:360px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
.tut-dots{display:flex;gap:6px}
.tut-dots i{width:24px;height:4px;border-radius:2px;background:var(--line);transition:background .2s}
.tut-dots i.on{background:var(--acc1)}
.tut-dots i.done{background:var(--acc1);opacity:.5}
.tut-demo{width:100%;height:200px;display:grid;place-items:center;border-radius:20px;background:var(--surface);border:1px solid var(--line);overflow:hidden}
.tut-in h3{margin:6px 0 0;font-size:20px}
.tut-in p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.55;min-height:68px}
.tut-b{display:flex;gap:10px;width:100%;margin-top:6px}
.tut-b .btn-primary,.tut-b .btn-ghost{flex:1}
.td{position:relative}
.fing{position:absolute;color:var(--text)}
.fing .ic{width:28px;height:28px}
.tm{position:relative;display:block;width:46px;height:46px;border-radius:12px;background:linear-gradient(135deg,#3b2a5f,#1a1a2e);border:1px solid var(--edge)}
.td-mem{display:grid;grid-template-columns:repeat(4,46px);gap:8px}
.td-mem .tm{animation:tdwave 1.8s ease-in-out infinite;animation-delay:var(--d)}
@keyframes tdwave{50%{transform:translateY(-7px);border-color:var(--acc1)}}
.td-mem2{display:grid;grid-template-columns:repeat(4,58px);gap:10px}
.td-mem2 .tm{width:58px;height:58px}
.tm b{position:absolute;inset:-1px;display:grid;place-items:center;border-radius:12px;background:var(--surface);border:1px solid var(--acc1);color:var(--acc1);opacity:0}
.tm b .ic{width:52%;height:52%}
.td-mem2 .tm.a b,.td-mem2 .tm.b b{animation:tdface 3.4s ease infinite}
@keyframes tdface{0%,12%{opacity:0;transform:rotateY(90deg)}25%,62%{opacity:1;transform:none}75%,100%{opacity:0;transform:rotateY(90deg)}}
.td-mem2.ok .tm.a b{animation:tdok 3.4s ease infinite}
@keyframes tdok{0%,12%{opacity:0;transform:rotateY(90deg)}25%{opacity:1;transform:none;background:var(--surface);color:var(--acc1)}55%,90%{opacity:1;transform:none;background:var(--acc1);color:var(--ink)}100%{opacity:0}}
.td-st{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center}
.td-st span{display:inline-flex;align-items:center;gap:6px;padding:10px 14px;border-radius:14px;background:var(--soft);font-size:14px;animation:tdpulse 1.8s ease infinite}
.td-st span:nth-child(2){animation-delay:.3s}.td-st span:nth-child(3){animation-delay:.6s}
.td-st b{color:var(--acc1)}
.td-st .ic{width:18px;height:18px}
@keyframes tdpulse{50%{transform:scale(1.07);background:var(--edge)}}
.td-48{width:232px;height:130px}
.td-48 .c{position:absolute;top:0;width:52px;height:52px;border-radius:10px;background:var(--soft)}
.td-48 .c:nth-child(1){left:0}.td-48 .c:nth-child(2){left:60px}.td-48 .c:nth-child(3){left:120px}.td-48 .c:nth-child(4){left:180px}
.td-48 .t,.td-prog .t{position:absolute;top:0;width:52px;height:52px;border-radius:10px;display:grid;place-items:center;font-style:normal;font-weight:700;color:#fff;background:hsl(calc(270 - var(--v) * 17) 58% calc(32% + var(--v) * 1.6%))}
.td-48 .s1{left:0;animation:td48s 2.4s ease-in-out infinite}
@keyframes td48s{0%,10%{left:0}55%,100%{left:180px}}
.td-48 .fing{top:64px;left:12px;animation:td48f 2.4s ease-in-out infinite}
@keyframes td48f{0%,10%{left:12px}55%,100%{left:192px}}
.td-48 .m1{left:0;animation:td48m1 2.8s ease infinite}
.td-48 .m2{left:120px;animation:td48m2 2.8s ease infinite}
.td-48 .m3{left:60px;animation:td48m3 2.8s ease infinite}
@keyframes td48m1{0%,10%{left:0;opacity:1}40%{left:60px;opacity:1}41%,100%{left:60px;opacity:0}}
@keyframes td48m2{0%,10%{left:120px;opacity:1}40%{left:60px;opacity:1}41%,100%{left:60px;opacity:0}}
@keyframes td48m3{0%,40%{opacity:0;transform:scale(.4)}50%{opacity:1;transform:scale(1.15)}60%,92%{opacity:1;transform:scale(1)}100%{opacity:0}}
.td-48 .n1{left:60px}
.td-48 .n2{left:120px;animation:td48n 2.6s ease infinite}
@keyframes td48n{0%,20%{opacity:0;transform:scale(.3)}35%{opacity:1;transform:scale(1.12)}45%,88%{opacity:1;transform:scale(1)}100%{opacity:0}}
.td-prog{display:flex;gap:8px;align-items:center}
.td-prog .t{position:static;width:44px;height:44px;font-size:13px;opacity:.35;animation:tdprog 2.4s ease infinite;animation-delay:var(--d)}
@keyframes tdprog{0%,100%{opacity:.35;transform:none}20%,40%{opacity:1;transform:scale(1.12)}}
.td-xo{display:grid;grid-template-columns:repeat(3,56px);gap:6px}
.td-xo>span{width:56px;height:56px;border-radius:12px;background:var(--soft);display:grid;place-items:center}
.xx{display:grid;place-items:center;color:var(--acc1);font-style:normal;opacity:0;animation:tdxo 3.4s ease infinite;animation-delay:var(--d,0s)}
.xx.o{color:#ff7aa8}
.xx.always{opacity:1;animation:none}
.xx .ic{width:30px;height:30px;stroke-width:2.2}
@keyframes tdxo{0%{opacity:0;transform:scale(.3)}8%,80%{opacity:1;transform:none}100%{opacity:0}}
.td-xo .ln{position:absolute;left:6px;right:6px;top:30px;height:4px;border-radius:2px;background:var(--acc1);transform-origin:left;transform:scaleX(0);animation:tdln 3.4s ease infinite}
@keyframes tdln{0%,35%{transform:scaleX(0)}55%,85%{transform:scaleX(1)}100%{transform:scaleX(0)}}
.td-c4{display:grid;grid-template-columns:repeat(7,28px);gap:5px;padding:8px;border-radius:14px;background:linear-gradient(160deg,#2a1f4d,#161226);position:relative}
.td-c4>span{width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,.45)}
.td-c4 .col{animation:tdcol 2s ease infinite}
@keyframes tdcol{0%,100%{background:rgba(0,0,0,.45)}50%{background:rgba(185,168,255,.4)}}
.td-c4 .c4f{top:-30px;left:calc(8px + 3 * 33px);width:28px;background:none;animation:tdbob 1s ease infinite alternate}
@keyframes tdbob{to{transform:translateY(8px)}}
.td-c4 .tk{position:absolute;left:calc(8px + 3 * 33px);top:8px;width:28px;height:28px;border-radius:50%;background:#b9a8ff;animation:tddrop 2.2s cubic-bezier(.4,0,.6,1) infinite}
@keyframes tddrop{0%{transform:translateY(-40px);opacity:0}10%{opacity:1}60%,92%{transform:translateY(99px);opacity:1}100%{transform:translateY(99px);opacity:0}}
.td-c4 .win{animation:tdwin 2.8s ease infinite;animation-delay:var(--d)}
@keyframes tdwin{0%,10%{background:rgba(0,0,0,.45);transform:none}25%,80%{background:#b9a8ff;transform:scale(1.1)}100%{background:rgba(0,0,0,.45);transform:none}}

.mcam-stage{position:absolute;inset:0;overflow:hidden}

.lp-cvh{margin-bottom:14px;border:1px solid var(--line);border-radius:20px;background:var(--surface);overflow:hidden;padding-bottom:16px}
.lp-cvb{display:flex;gap:8px;padding:14px 16px 0;flex-wrap:wrap}
@media (min-width:1000px){.lp-cvh{border-radius:0;border-width:0 0 1px;margin-bottom:0}}

.shgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 8px;padding:8px 14px 18px}
.shu{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.shav{position:relative;display:block}
.shav .av{width:62px;height:62px;font-size:22px}
.shok{position:absolute;right:-2px;bottom:-2px;width:22px;height:22px;border-radius:50%;background:var(--acc1);color:var(--ink);display:none;place-items:center;border:2px solid var(--surface)}
.shok .ic{width:12px;height:12px;stroke-width:3}
.shu.sent .shok{display:grid}
.shu.sent .av{opacity:.55}
.shn{font-size:12px;color:var(--muted);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.cvnp.q{color:var(--muted)}
.cvnp span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.shu.sel .shok{display:grid}
.shu.sel .av{outline:3px solid var(--acc1);outline-offset:2px}
.shsend{display:flex;gap:8px;align-items:center;padding:10px 14px calc(12px + var(--sab));border-top:1px solid var(--line);position:sticky;bottom:0;background:var(--surface)}
.shsend input{flex:1;height:44px;border-radius:22px;padding:0 16px}
.shsend .btn-primary{width:auto;height:44px;padding:0 20px;flex:none}

.top-r .icon-btn{width:44px;height:44px;display:flex;align-items:center;justify-content:center}
.top-r .icon-btn .ic{width:25px;height:25px;stroke-width:1.6}
@media (min-width:1100px){.top-r{display:none}}

/* ===== Yeni oyunlar ===== */
.gm-card.e{background:linear-gradient(135deg,#1d4ed8,#10243a)}
.gm-card.f{background:linear-gradient(135deg,#7e22ce,#2a1f4d)}
.gm-card.g{background:linear-gradient(135deg,#15803d,#12332a)}
.gm-card.h{background:linear-gradient(135deg,#b45309,#3a2a14)}
.gm-card.i{background:linear-gradient(135deg,#475569,#161b26)}
.wc-bar{width:100%;max-width:420px;height:6px;border-radius:3px;background:var(--soft);overflow:hidden;margin:-6px 0 12px}
.wc-bar i{display:block;height:100%;width:100%;background:var(--acc1)}
.wc-need{display:flex;align-items:baseline;gap:8px;margin-bottom:8px;color:var(--muted);font-size:13px}
.wc-need b{font-size:34px;color:var(--acc1)}
.wc-list{flex:1;min-height:120px;width:100%;max-width:420px;overflow:auto;display:flex;flex-direction:column;gap:6px;padding:4px 0}
.wcb{align-self:flex-start;padding:8px 14px;border-radius:16px;background:var(--soft);font-size:15px;animation:gpop .22s ease}
.wcb b{color:var(--acc1)}
.wcb.me{align-self:flex-end;background:var(--acc1);color:var(--ink)}
.wcb.me b{color:var(--ink)}
.wc-in{display:flex;gap:8px;width:100%;max-width:420px;margin-top:8px}
.wc-in input{flex:1;height:46px;border-radius:23px;padding:0 18px}
.wc-in .btn-primary{width:auto;padding:0 20px;height:46px}
.gm-hint.shake,.ww-cur.bad{animation:shk .35s}
@keyframes shk{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.wcd{display:inline-flex;padding:2px}
.wcd button{flex:none;height:26px;padding:0 12px;font-size:12px}
.ww-grid{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:4px;width:min(100%,calc(var(--cols) * 42px));margin-bottom:8px}
.wc2{display:grid;place-items:center;aspect-ratio:1;border-radius:8px;font-style:normal;font-weight:700;font-size:clamp(13px,4vw,18px);background:var(--surface);border:1px solid var(--line);color:transparent}
.wc2.x{background:none;border:0}
.wc2.on{background:var(--acc1);color:var(--ink);border-color:var(--acc1)}
.wc2.new{animation:gpop .3s ease}
.ww-cur{min-height:44px;display:flex;align-items:center;justify-content:center;gap:4px;margin:4px 0;color:var(--muted);font-size:13px}
.ww-cur b{display:grid;place-items:center;min-width:30px;height:38px;padding:0 4px;border-radius:10px;background:var(--acc1);color:var(--ink);font-size:20px}
.ww-cur.ok{animation:gpop .25s}
.wh{position:relative;width:250px;height:250px;border-radius:50%;background:var(--surface);border:1px solid var(--line);touch-action:none;flex:none}
.wl{position:absolute;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;display:grid;place-items:center;font:700 22px var(--f-ui);background:var(--soft);color:var(--text);transition:background .1s,transform .1s}
.wl.on{background:var(--acc1);color:var(--ink);transform:scale(1.1)}
.ww-btns{display:flex;gap:8px;width:100%;max-width:420px;margin-top:12px}
.ww-btns .btn-ghost,.ww-btns .btn-primary{flex:1;height:44px;display:flex;align-items:center;justify-content:center;gap:6px}
.ww-btns .ic{width:18px;height:18px}
.snk{width:100%;max-width:340px;aspect-ratio:1;border-radius:16px;border:1px solid var(--line);touch-action:none;background:#12121a}
.cd-board{display:flex;flex-direction:column;gap:5px;width:100%;max-width:340px;margin-bottom:12px}
.cd-r{display:flex;align-items:center;gap:8px;padding:4px 8px;border-radius:12px}
.cd-r.on{background:var(--surface)}
.cd-s{width:28px;height:28px;border-radius:50%;background:var(--soft);display:block;border:1px solid var(--line)}
.cd-s.cur{border-color:var(--acc1)}
.cd-p{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-left:auto;width:34px}
.cd-p i{width:14px;height:14px;border-radius:50%;background:var(--soft);border:1px solid var(--line)}
.cd-p i.b,.dotb{background:var(--text);border-color:var(--text)}
.cd-p i.w,.dotw{background:transparent;border:2px solid var(--text)}
.cd-pal{display:flex;gap:10px;justify-content:center;margin-bottom:6px}
.cd-c{width:44px;height:44px;border-radius:50%;border:2px solid var(--bg);box-shadow:0 0 0 1px var(--edge)}
.rps-arena{display:flex;align-items:center;justify-content:center;gap:14px;margin:10px 0 26px}
.rps-h{width:88px;height:88px;border-radius:24px;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;color:var(--acc1)}
.rps-h.c{color:#ff7aa8}
.rps-h .ic{width:44px;height:44px;stroke-width:1.5}
.rps-vs{min-width:84px;text-align:center;font-weight:600;font-size:14px;color:var(--muted)}
.rps-opt{display:flex;gap:10px;width:100%;max-width:380px}
.rps-opt button{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 8px;border-radius:18px;background:var(--surface);border:1px solid var(--line)}
.rps-opt button:active{background:var(--soft)}
.rps-opt .ic{width:30px;height:30px;color:var(--acc1)}
.rps-opt b{font-size:13px}
.td-chain{display:flex;align-items:center;gap:6px}
.td-chain span{padding:10px 14px;border-radius:12px;background:var(--soft);font-weight:600;animation:tdpulse 2s ease infinite;animation-delay:var(--d)}
.td-chain i{color:var(--muted)}
.td-chain i .ic{width:16px;height:16px}
.td-bar{width:240px;height:10px;border-radius:5px;background:var(--soft);overflow:hidden}
.td-bar i{display:block;height:100%;background:var(--acc1);animation:tdbar 2.4s linear infinite}
@keyframes tdbar{from{width:100%}to{width:0}}
.td-let{display:flex;gap:8px}
.td-let span{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--soft);font-weight:700;animation:tdprog 2.4s ease infinite;animation-delay:var(--d)}
.td-let.fill span.sq{border-radius:8px;animation:tdfill 2.6s ease infinite;animation-delay:var(--d)}
@keyframes tdfill{0%,15%{background:var(--soft);color:transparent}35%,85%{background:var(--acc1);color:var(--ink)}100%{background:var(--soft);color:transparent}}
.td-snake{display:flex;gap:4px;align-items:center}
.td-snake i{width:26px;height:26px;border-radius:8px;background:var(--acc1);animation:tdwave 1.4s ease-in-out infinite;animation-delay:var(--d)}
.td-snake .food{width:16px;height:16px;border-radius:50%;background:#ff7aa8;margin-left:12px;animation:tdpulse 1.2s ease infinite}
.dotb,.dotw{display:inline-block;width:14px;height:14px;border-radius:50%;vertical-align:-2px}

/* ===== Oyun animasyonları ===== */
.gm-stats span.you{color:var(--acc1);font-weight:600;animation:youp 1.6s ease infinite}
@keyframes youp{50%{opacity:.5}}
.xo,.c4{transition:opacity .25s}
.xo.dim,.c4.dim{opacity:.55}
.xc.pl .ic{animation:xpl .38s cubic-bezier(.2,.9,.3,1.4)}
@keyframes xpl{from{transform:scale(.2) rotate(-40deg);opacity:0}}
.xc.w{animation:xwin .7s ease infinite alternate}
@keyframes xwin{to{transform:scale(1.07);background:var(--soft)}}
.c4k:not(:disabled):hover i.d0{background:rgba(185,168,255,.25)}
.mc{animation:mcin .45s ease both;animation-delay:calc(var(--i,0) * 35ms)}
@keyframes mcin{from{opacity:0;transform:translateY(14px) scale(.9)}}
.mc.ok{animation:gpop .4s ease}
.mc.bad .mc-f{animation:shk .4s;border-color:#ff5d7a;color:#ff5d7a}
.g48x{position:relative;width:100%;max-width:380px;padding:8px;border-radius:18px;background:var(--surface);border:1px solid var(--line);touch-action:none}
.g48c{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;aspect-ratio:1}
.g48c i{background:var(--soft);border-radius:12px}
.g48t{position:absolute;inset:8px;--s:calc((100% - 24px) / 4)}
.tl{position:absolute;width:var(--s);height:var(--s);border-radius:12px;display:grid;place-items:center;font-weight:700;color:#fff;font-size:clamp(18px,6vw,28px);background:hsl(calc(270 - var(--v) * 17) 58% calc(32% + var(--v) * 1.6%));transition:left .14s ease-out,top .14s ease-out}
.tl[data-n="3"]{font-size:clamp(16px,5vw,24px)}
.tl[data-n="4"]{font-size:clamp(14px,4.4vw,20px)}
.tl.new{animation:gpop .22s ease .12s backwards}
.tl.mg{animation:tlmg .24s ease}
@keyframes tlmg{50%{transform:scale(1.18)}}
.rps-arena.shake .rps-h{animation:fist .33s ease-in-out infinite}
@keyframes fist{50%{transform:translateY(-14px) rotate(-8deg)}}
.rps-arena.rev .rps-h{animation:gpop .42s cubic-bezier(.2,.9,.3,1.4)}
.rps-h.win{border-color:var(--acc1);box-shadow:0 0 0 4px rgba(185,168,255,.22)}
.rps-arena.wait .rps-h.q{animation:fist .6s ease-in-out infinite;font-size:34px;font-weight:700;color:var(--muted)}
.gm-res{overflow:hidden}
.cf{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.cf i{position:absolute;top:-14px;left:var(--x);width:8px;height:13px;border-radius:2px;background:hsl(var(--h) 85% 68%);animation:cfall 1.9s ease-in var(--d) both}
@keyframes cfall{to{transform:translateY(110vh) rotate(600deg);opacity:.2}}
.gm-rc{animation:gpop .38s cubic-bezier(.2,.9,.3,1.3)}
.cd-s.cpop{animation:gpop .26s ease}
.cd-r.rv .cd-p i.b,.cd-r.rv .cd-p i.w{animation:pegin .4s cubic-bezier(.2,.9,.3,1.5) both;animation-delay:calc(var(--k) * 140ms)}
@keyframes pegin{from{transform:scale(0)}}
.wsv{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.wsv polyline{fill:none;stroke:var(--acc1);stroke-width:9;stroke-linecap:round;stroke-linejoin:round;opacity:.45}
.wl{z-index:1;animation:wlin .4s cubic-bezier(.2,.9,.3,1.4) backwards;animation-delay:calc(var(--k) * 50ms)}
@keyframes wlin{from{opacity:0;transform:scale(.3)}}
.typing{display:flex;gap:5px;align-items:center;padding:13px 14px}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:tdot 1s ease infinite}
.typing i:nth-child(2){animation-delay:.15s}
.typing i:nth-child(3){animation-delay:.3s}
@keyframes tdot{0%,60%,100%{opacity:.5;transform:none}30%{transform:translateY(-5px);opacity:1}}
.wc-in.shake{animation:shk .35s}
.snk{box-shadow:0 0 0 1px var(--line),0 12px 30px rgba(0,0,0,.4)}

.gm.snk-full{touch-action:none}
.gm.snk-full .gm-body{overflow:hidden;justify-content:flex-start;padding-top:8px}
.gm.snk-full .snk{width:min(100%,calc(100dvh - 210px - var(--sat) - var(--sab)));max-width:none;margin:auto 0}

/* Kod Kır: daha büyük, ortalı yuvalar */
.cd-board{max-width:360px;gap:6px}
.cd-r{justify-content:center;gap:10px;padding:4px 10px}
.cd-s{width:38px;height:38px;flex:none}
.cd-p{margin-left:14px;width:40px;gap:5px}
.cd-p i{width:16px;height:16px}
/* Yılan: ekranı kaplar */
.gm.snk-full .gm-body{padding-left:0;padding-right:0}
.gm.snk-full .gm-stats{padding:0 18px;max-width:none}
.gm.snk-full .snk{width:min(100vw,calc(100dvh - 210px - var(--sat) - var(--sab)));border-radius:0;border-left:0;border-right:0}
.gm.snk-full .gm-hint{padding:0 18px;text-align:center}

/* ===== bildirim izni uyarısı ===== */
#nbar{position:sticky;top:calc(var(--sat) + 49px);z-index:29;display:flex;align-items:center;gap:12px;padding:10px 14px;background:linear-gradient(90deg,rgba(185,168,255,.2),rgba(185,168,255,.07));border-bottom:1px solid rgba(185,168,255,.3);animation:up .3s ease both}
#nbar .nb-ic{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--acc1);color:var(--ink);flex:none;animation:nbring 2.6s ease infinite}
#nbar .nb-ic .ic{width:20px;height:20px}
@keyframes nbring{0%,55%,100%{transform:rotate(0)}10%{transform:rotate(-16deg)}20%{transform:rotate(14deg)}30%{transform:rotate(-9deg)}40%{transform:rotate(6deg)}}
#nbar .nb-t{flex:1;min-width:0}
#nbar .nb-t b{display:block;font-size:14px;line-height:1.25}
#nbar .nb-t small{display:block;margin-top:1px;color:var(--muted);font-size:12px;line-height:1.35}
#nbar .nb-b{flex:none;height:34px;padding:0 18px;border-radius:99px;background:var(--acc1);color:var(--ink);font-weight:600;font-size:13px}
#nbar .nb-b:active{transform:scale(.96)}
.nbh{padding:4px 0 14px}
.nbs{display:flex;gap:12px;align-items:flex-start;padding:9px 18px;font-size:14px;line-height:1.5}
.nbs i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--soft);color:var(--acc1);font-style:normal;font-weight:700;font-size:12px;flex:none;margin-top:1px}
.nbs b{color:var(--text)}
@media (min-width:1100px){#nbar{display:none}}

/* sohbet listesi: çevrimiçi göstergesi */
.avw{position:relative;flex:none;display:inline-flex}
.avw .onl{position:absolute;right:-1px;bottom:-1px;width:13px;height:13px;border-radius:50%;background:#34d399;border:2.5px solid var(--surface);box-sizing:border-box}
.avw .onl::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid #34d399;opacity:0;animation:onlp 2.4s ease-out infinite}
@keyframes onlp{0%{transform:scale(.6);opacity:.55}100%{transform:scale(1.25);opacity:0}}