*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#f0f2f5;--bg2:#fff;--card:#fff;--border:#dcdfe3;--border-hi:#bdc1c6;
  --ink:#050505;--ink-soft:#65676b;--ink-dim:#8a8d91;
  --accent:#1877f2;--accent2:#166fe5;--ok:#42b72a;--err:#e41e3f;
  --hover:#f2f3f5;
}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg);color:var(--ink);line-height:1.45;font-size:15px}
a{color:inherit;text-decoration:none}
button{font-family:inherit}

nav.top{position:sticky;top:0;z-index:50;background:var(--bg2);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:14px;padding:10px 16px}
.brand{display:flex;align-items:center;gap:8px;font-weight:800;font-size:22px;color:var(--accent);flex-shrink:0}
.brand-dot{width:32px;height:32px;border-radius:10px;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:18px}
.search{flex:1;max-width:520px;position:relative}
.search input{width:100%;padding:9px 14px 9px 40px;border:0;background:var(--bg);border-radius:999px;font-size:16px;color:var(--ink)}
.search input:focus{outline:2px solid var(--accent)}
.search::before{content:'🔍';position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:14px;opacity:.6}
.search-results{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--bg2);border:1px solid var(--border);border-radius:10px;box-shadow:0 12px 28px rgba(0,0,0,.12);max-height:480px;overflow-y:auto;display:none;z-index:60}
.search-results.show{display:block}
.search-results .group{padding:8px 0;border-bottom:1px solid var(--border)}
.search-results .group:last-child{border:0}
.search-results h5{font-size:12px;font-weight:700;color:var(--ink-dim);text-transform:uppercase;letter-spacing:.06em;padding:4px 14px}
.search-results .item{display:flex;gap:10px;padding:12px 14px;align-items:center;cursor:pointer}
.search-results .item:hover{background:var(--hover)}
.search-results .item .av{width:32px;height:32px;border-radius:50%;background:var(--bg);overflow:hidden;flex-shrink:0;display:grid;place-items:center;color:var(--ink-soft);font-weight:700}
.search-results .item .av img{width:100%;height:100%;object-fit:cover}
.search-results .item .info{flex:1;min-width:0}
.search-results .item .name{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search-results .item .sub{font-size:12px;color:var(--ink-dim)}

.nav-actions{display:flex;gap:6px;align-items:center;flex-shrink:0}
.nav-actions .icon-btn{width:44px;height:44px;border-radius:50%;background:var(--bg);border:0;cursor:pointer;display:grid;place-items:center;font-size:18px;position:relative;text-decoration:none;color:var(--ink)}
.nav-actions .icon-btn:hover{background:var(--hover)}
.nav-actions .icon-btn .dot{position:absolute;top:6px;right:6px;background:var(--err);color:#fff;font-size:10px;font-weight:700;min-width:16px;height:16px;border-radius:8px;padding:0 4px;display:none;align-items:center;justify-content:center;line-height:1}
.nav-actions .icon-btn .dot.show{display:flex}
.btn-login{padding:8px 18px;background:var(--accent);color:#fff;border:0;border-radius:8px;font-weight:700;cursor:pointer;font-size:14px;text-decoration:none}
.btn-login:hover{background:var(--accent2)}

.layout{display:grid;grid-template-columns:280px minmax(0, 1fr) 320px;max-width:1240px;margin:0 auto;gap:16px;padding:clamp(8px, 2vw, 16px);align-items:flex-start}
.layout.no-right{grid-template-columns:280px minmax(0, 1fr)}
@media(max-width:1100px){.layout{grid-template-columns:80px minmax(0, 1fr) 320px}.layout.no-right{grid-template-columns:80px minmax(0, 1fr)}.sidebar .label{display:none}}
@media(max-width:880px){.layout{grid-template-columns:minmax(0, 1fr)}.layout.no-right{grid-template-columns:minmax(0, 1fr)}.sidebar,.right{display:none}}

.sidebar{background:var(--bg2);border-radius:12px;padding:8px;position:sticky;top:78px}
.sidebar a,.sidebar button{display:flex;align-items:center;gap:14px;padding:10px 12px;border-radius:8px;color:var(--ink);font-weight:600;font-size:15px;border:0;background:transparent;width:100%;cursor:pointer;text-align:left;text-decoration:none}
.sidebar a:hover,.sidebar button:hover{background:var(--hover)}
.sidebar a.active{background:var(--bg);color:var(--accent)}
.sidebar .ic{width:24px;text-align:center;font-size:18px}

.post{background:var(--bg2);border-radius:12px;padding:14px 16px;margin-bottom:12px}
.post-head{display:flex;gap:10px;align-items:center;margin-bottom:10px}
.post-head .av{width:40px;height:40px;border-radius:50%;background:var(--bg);overflow:hidden;flex-shrink:0;display:grid;place-items:center;color:var(--ink-soft);font-weight:700;text-decoration:none}
.post-head .av img{width:100%;height:100%;object-fit:cover}
.post-head .who{flex:1;min-width:0}
.post-head .name{font-weight:700;font-size:15px;color:var(--ink);display:flex;align-items:center;gap:4px;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.post-head .verified{color:var(--accent);font-size:13px}
.post-head .meta{font-size:12.5px;color:var(--ink-dim)}
.post-body{font-size:15px;line-height:1.55;white-space:pre-wrap;word-wrap:break-word;margin-bottom:10px}
.post-body a.tag,.post-body a.mention{color:var(--accent);font-weight:600;text-decoration:none}
.post-media img{width:100%;display:block;border-radius:10px;margin-bottom:10px;max-height:600px;object-fit:cover;background:#000}
.post-media video{width:100%;display:block;border-radius:10px;margin-bottom:10px;background:#000}
.post-stats{font-size:12.5px;color:var(--ink-dim);padding:8px 0;border-top:1px solid var(--border);display:flex;gap:14px}
.post-actions{display:flex;justify-content:space-around;border-top:1px solid var(--border);padding-top:6px}
.post-actions button,.post-actions a{flex:1;padding:12px 4px;min-height:44px;border:0;background:transparent;cursor:pointer;font-weight:600;color:var(--ink-soft);border-radius:6px;font-size:14px;display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none}
.post-actions button:hover,.post-actions a:hover{background:var(--hover)}
.post-actions button.liked{color:var(--err)}

.empty{text-align:center;padding:40px;background:var(--bg2);border-radius:12px;color:var(--ink-soft)}
.loading{text-align:center;padding:20px;color:var(--ink-dim);font-size:13px}

.right{position:sticky;top:78px}
.right .panel{background:var(--bg2);border-radius:12px;padding:14px 16px;margin-bottom:12px}
.right h4{font-size:13px;font-weight:800;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.05em;margin-bottom:10px}

.bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;background:var(--bg2);border-top:1px solid var(--border);justify-content:space-around;padding:6px 0 calc(env(safe-area-inset-bottom, 0px) + 6px);z-index:60;max-width:600px;margin:0 auto;border-radius:14px 14px 0 0}
.bottom-nav a,.bottom-nav button{flex:1;padding:10px 4px;min-height:48px;text-align:center;border:0;background:transparent;cursor:pointer;font-size:12px;color:var(--ink-soft);font-weight:600;display:flex;flex-direction:column;align-items:center;gap:3px;text-decoration:none;position:relative}
.bottom-nav a.active{color:var(--accent)}
.bottom-nav .ic{font-size:22px;line-height:1}
.bottom-nav .compose{background:var(--accent);color:#fff;width:46px;height:46px;border-radius:14px;font-size:22px;margin-top:-12px;display:grid;place-items:center;box-shadow:0 4px 12px rgba(24,119,242,.4);text-decoration:none}
.bottom-nav .dot{position:absolute;top:4px;right:calc(50% - 18px);background:var(--err);color:#fff;font-size:9px;font-weight:700;min-width:14px;height:14px;border-radius:7px;padding:0 4px;display:none;align-items:center;justify-content:center;line-height:1}
.bottom-nav .dot.show{display:flex}
@media(max-width:880px){.bottom-nav{display:flex}body{padding-bottom:calc(70px + env(safe-area-inset-bottom, 0px))}}

/* ── Tablet sweet-spot (641-1023px) — modal + search akışkan ── */
@media(max-width:1023px){
  .search{max-width:none}
}

/* ── Mobil iyileştirmeler (≤640px) ── */
@media(max-width:640px){
  nav.top{padding:10px max(12px, env(safe-area-inset-left)) 10px max(12px, env(safe-area-inset-right));gap:10px}
  .search{display:none}
  .post{padding:12px 14px}
  .post-actions button,.post-actions a{padding:10px 2px;font-size:13px}
  /* iOS zoom-on-focus engellemek için tüm input'lara 16px */
  input[type=text],input[type=email],input[type=password],input[type=search],input[type=number],input[type=tel],input[type=url],textarea,select{font-size:16px !important}
  /* Legacy modal class fallback (refactor öncesi sayfalar için) */
  .modal-card,.em-card{max-width:calc(100% - 12px) !important;padding:16px !important;max-height:calc(100vh - 80px) !important;-webkit-overflow-scrolling:touch}
  /* User dropdown menü taşması */
  .user-menu{max-width:calc(100vw - 16px) !important}
}

/* ── Ortak modal base (.cr-modal / .cr-modal__card) — tüm sayfalar bu class'ları kullansın ── */
.cr-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:200;align-items:center;justify-content:center;padding:max(12px, env(safe-area-inset-left));backdrop-filter:blur(2px)}
.cr-modal.show{display:flex}
.cr-modal__card{background:var(--bg2);border-radius:14px;padding:clamp(16px, 4vw, 24px);width:100%;max-width:min(540px, calc(100vw - 24px));max-height:min(90vh, calc(100vh - 80px));overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.3);-webkit-overflow-scrolling:touch}
.cr-modal__card--lg{max-width:min(640px, calc(100vw - 24px))}
.cr-modal__card--sm{max-width:min(420px, calc(100vw - 24px))}
.cr-modal__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;gap:12px}
.cr-modal__head h3{font-size:clamp(15px, 2.5vw, 18px);font-weight:800;margin:0}
.cr-modal__close{cursor:pointer;color:var(--ink-soft);font-size:22px;background:none;border:0;padding:0 4px;flex-shrink:0;line-height:1}

.toast{position:fixed;bottom:90px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 18px;border-radius:8px;font-size:13.5px;z-index:300;animation:s .3s}
.toast.err{background:var(--err)}
.toast.ok{background:var(--ok)}
@keyframes s{from{opacity:0;transform:translate(-50%,20px)}to{opacity:1;transform:translate(-50%,0)}}

.btn{padding:9px 18px;background:var(--accent);color:#fff;border:0;border-radius:8px;font-weight:700;cursor:pointer;font-size:14px;text-decoration:none;display:inline-block}
.btn:hover{background:var(--accent2)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--border)}
.btn.ghost:hover{background:var(--hover)}
.btn.danger{background:var(--err)}

.save-music-btn{padding:5px 11px;border:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.18);color:#fff;border-radius:7px;font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit;backdrop-filter:blur(4px);transition:.15s;white-space:nowrap}
.save-music-btn:hover{background:rgba(255,255,255,.3)}
.save-music-btn.saved{background:#fff;color:#5a4ba2;border-color:#fff}
.save-music-btn.saved:hover{background:#f5f3ff}
/* Solo variant (yellow/light bg on /p/<uuid> single post page) */
.save-music-btn--solo{border-color:#92400e;background:rgba(255,255,255,.6);color:#92400e}
.save-music-btn--solo:hover{background:#fff}
.save-music-btn--solo.saved{background:#0d7f73;color:#fff;border-color:#0d7f73}
.save-music-btn--solo.saved:hover{background:#0a6f64}

/* Share sheet */
.share-sheet-bg{position:fixed;inset:0;background:rgba(15,20,30,.5);z-index:400;display:flex;align-items:flex-end;justify-content:center;animation:fade .2s}
.share-sheet{background:#fff;width:100%;max-width:480px;border-radius:18px 18px 0 0;padding:18px 18px 28px;box-shadow:0 -10px 40px rgba(0,0,0,.2);animation:slup .25s}
@media (min-width:640px){.share-sheet-bg{align-items:center}.share-sheet{border-radius:18px;padding:22px}}
.share-sheet h3{font-size:15px;font-weight:700;margin-bottom:14px;color:var(--ink);text-align:center}
.share-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.share-item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 4px;border:0;background:transparent;cursor:pointer;border-radius:10px;font-family:inherit;color:var(--ink);text-decoration:none;font-size:11.5px;font-weight:600;transition:.15s}
.share-item:hover{background:var(--hover)}
.share-item .ic{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:22px;color:#fff}
.share-item.wa .ic{background:#25d366}
.share-item.tg .ic{background:#229ed9}
.share-item.x  .ic{background:#000}
.share-item.rd .ic{background:#ff4500}
.share-item.ig .ic{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888)}
.share-item.fb .ic{background:#1877f2}
.share-item.cp .ic{background:var(--ink)}
.share-item.cancel .ic{background:#e7e5e4;color:var(--ink)}
@keyframes slup{from{transform:translateY(40px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes fade{from{opacity:0}to{opacity:1}}