/* ============================================================
   index.css — SADECE index.html (anasayfa) İÇİN.
   base.css + components.css'ten SONRA yüklenir.
   ============================================================ */

/* ============ LAYOUT ============ */
.layout{
  max-width:1180px; margin:0 auto; display:grid;
  grid-template-columns: 240px 1fr 280px; gap:20px; padding:20px; align-items:start;
}

.sidebar-left{ position:sticky; top:74px; }
.profile-mini{
  display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:12px; margin-bottom:8px;
}
.profile-mini:hover{ background:var(--surface-alt); }
.profile-mini img{ width:42px; height:42px; border-radius:50%; object-fit:cover; }
.profile-mini b{ font-size:0.9rem; }
.profile-mini span{ display:block; font-size:0.74rem; color:var(--text-dim); }

.nav-list a{
  display:flex; align-items:center; gap:14px; padding:11px 12px; border-radius:10px;
  font-weight:600; font-size:0.9rem; color:var(--text-muted); margin-bottom:2px;
}
.nav-list a .icon{ color:var(--text-dim); }
.nav-list a:hover{ background:var(--surface-alt); color:var(--text); }
.nav-list a.active{ background:var(--surface-alt); color:var(--accent-text); }
.nav-list a.active .icon{ color:var(--accent-text); }
.side-divider{ height:1px; background:var(--border); margin:14px 4px; }
.mini-footer{ padding:0 12px; }
.mini-footer a{ font-size:0.74rem; color:var(--text-dim); margin-right:10px; }
.mini-footer p{ font-size:0.72rem; color:var(--text-dim); margin-top:10px; }

/* ---- feed ---- */
.feed-main{ min-width:0; }

.welcome-strip{
  display:flex; align-items:center; gap:8px; margin-bottom:14px; padding:0 2px;
  font-size:0.82rem; color:var(--text-muted);
}
.welcome-strip .dot{ width:7px; height:7px; border-radius:50%; background:#31A24C; }

.stories-row{ display:flex; gap:12px; overflow-x:auto; padding:2px 2px 16px; margin-bottom:16px; }
.stories-row::-webkit-scrollbar{ display:none; }
.story{ flex:0 0 auto; width:66px; text-align:center; }
.story-ring{ width:58px; height:58px; border-radius:50%; padding:2.5px; background:var(--grad); margin:0 auto 6px; }
.story-ring.muted{ background:var(--border-strong); }
.story-photo{ width:100%; height:100%; border-radius:50%; overflow:hidden; border:2.5px solid var(--surface); background:var(--surface-alt); }
.story-photo img{ width:100%; height:100%; object-fit:cover; }
.story-photo.add-new{ display:flex; align-items:center; justify-content:center; color:var(--text-dim); }
.story span{ font-size:0.66rem; color:var(--text-muted); font-weight:500; }

.composer{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:14px; margin-bottom:16px; box-shadow:var(--shadow-card);
}
.composer-row{ display:flex; align-items:center; gap:12px; }
.composer-row img{ width:40px; height:40px; border-radius:50%; object-fit:cover; }
.composer-fake-input{ flex:1; background:var(--surface-alt); border-radius:999px; padding:11px 16px; color:var(--text-dim); font-size:0.87rem; }
.composer-actions{ display:flex; gap:6px; margin-top:12px; padding-top:12px; border-top:1px solid var(--border); }
.composer-actions button{ flex:1; display:flex; align-items:center; justify-content:center; gap:7px; font-size:0.79rem; font-weight:600; color:var(--text-muted); padding:8px; border-radius:8px; }
.composer-actions button .icon{ width:17px; height:17px; }
.composer-actions .btn-primary{ color:#fff; flex:0.6; }
@media (max-width:460px){
  .composer-actions{ gap:2px; }
  .composer-actions button{ padding:8px 6px; }
  .composer-actions button .icon{ width:22px; height:22px; }
  .composer-buton-metni{ display:none; }
}

.feed-end-note{ text-align:center; padding:24px 20px; color:var(--text-dim); font-size:0.84rem; }
.feed-end-note a{ color:var(--accent-text); font-weight:700; }

/* ---- right sidebar ---- */
.sidebar-right{ position:sticky; top:74px; display:flex; flex-direction:column; gap:16px; }
.widget{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:14px; box-shadow:var(--shadow-card); }
.widget h3{ font-size:0.92rem; font-weight:700; margin-bottom:10px; display:flex; align-items:center; justify-content:space-between; }
.widget h3 a{ font-size:0.72rem; color:var(--accent); font-weight:700; }

.friend-row{ display:flex; align-items:center; gap:10px; padding:7px 0; }
.friend-row img{ width:34px; height:34px; border-radius:50%; object-fit:cover; position:relative; }
.friend-row .name-col{ flex:1; min-width:0; }
.friend-row b{ font-size:0.83rem; font-weight:600; display:block; }
.friend-row span{ font-size:0.7rem; color:var(--text-dim); }
.online-dot{ width:9px; height:9px; border-radius:50%; background:#31A24C; border:2px solid var(--surface); position:relative; top:-9px; left:24px; }

.room-row{ display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--border); }
.room-row:last-child{ border-bottom:none; padding-bottom:0; }
.room-row-icon{ width:34px; height:34px; border-radius:9px; background:var(--surface-alt); color:var(--accent); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.room-row-icon .icon{ width:16px; height:16px; }
.room-row-info{ flex:1; min-width:0; }
.room-row-info b{ display:block; font-size:0.81rem; font-weight:700; }
.room-row-info span{ font-size:0.7rem; color:var(--text-dim); display:flex; align-items:center; gap:5px; }

.join-widget{ background:linear-gradient(rgba(0,0,0,0.35),rgba(0,0,0,0.35)), var(--grad); color:#fff; }
.join-widget h3{ color:#fff; }
.join-widget p{ font-size:0.8rem; margin-bottom:12px; line-height:1.5; }
.join-widget .btn{ background:#fff; color:var(--accent-deep); box-shadow:none; }

.mobil-akis-widget{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:var(--shadow-card); margin-bottom:16px; position:relative; overflow:hidden; }
.mobil-akis-widget::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--grad); }
.mobil-akis-widget-carousel{ padding:14px 0 14px 14px; }
.maw-baslik{ font-size:0.86rem; font-weight:700; margin-bottom:10px; padding-right:14px; }
.maw-carousel{ display:flex; gap:14px; overflow-x:auto; padding-bottom:2px; scrollbar-width:none; }
.maw-carousel::-webkit-scrollbar{ display:none; }
.maw-carousel-item{ display:flex; flex-direction:column; align-items:center; gap:5px; text-decoration:none; color:inherit; flex-shrink:0; width:72px; background:none; border:none; font-family:inherit; cursor:pointer; padding:0; }
.maw-carousel-item > a{ display:flex; flex-direction:column; align-items:center; gap:5px; text-decoration:none; color:inherit; width:100%; }
.maw-carousel-item img{ width:56px; height:56px; border-radius:50%; object-fit:cover; border:2px solid var(--accent); padding:2px; }
.maw-carousel-item span{ font-size:0.68rem; font-weight:600; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:72px; }
.maw-carousel-item em{ font-style:normal; font-size:0.64rem; color:#F3425F; font-weight:700; }
.maw-mini-btn{ font-size:0.62rem; font-weight:700; color:#fff; background:var(--accent); border:none; padding:3px 10px; border-radius:999px; }
.maw-mini-btn:disabled{ opacity:0.6; }
.maw-daha-fazla-daire{ width:56px; height:56px; border-radius:50%; background:var(--surface-alt); border:2px dashed var(--border-strong); display:flex; align-items:center; justify-content:center; font-size:0.78rem; font-weight:700; color:var(--accent); }
.mobil-akis-widget-banner{ padding:14px; display:flex; align-items:center; gap:12px; }
.maw-banner-ikon{ font-size:1.5rem; flex-shrink:0; width:44px; height:44px; border-radius:12px; background:var(--surface-alt); display:flex; align-items:center; justify-content:center; }
.maw-banner-metin{ flex:1; min-width:0; }
.maw-banner-metin b{ display:block; font-size:0.84rem; font-weight:700; margin-bottom:2px; }
.maw-banner-metin span{ font-size:0.74rem; color:var(--text-dim); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.maw-banner-btn{ flex-shrink:0; background:var(--accent); color:#fff; border:none; padding:8px 14px; border-radius:999px; font-size:0.76rem; font-weight:700; text-decoration:none; cursor:pointer; white-space:nowrap; }
.mobil-akis-widget-list{ padding:14px; }
.mobil-akis-widget-list .maw-baslik{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.maw-tumu-link{ font-size:0.72rem; font-weight:700; color:var(--accent-text); text-decoration:none; flex-shrink:0; }
.maw-list-item{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 0; text-decoration:none; color:inherit; border-top:1px solid var(--border); }
.maw-list-item:first-of-type{ border-top:none; }
.maw-list-baslik{ font-size:0.82rem; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; flex:1; }
.maw-list-sayi{ font-size:0.7rem; color:var(--accent-text); font-weight:700; flex-shrink:0; }

/* ============ RESPONSIVE ============ */
@media (max-width:1060px){
  .layout{ grid-template-columns:220px 1fr; }
  .sidebar-right{ display:none; }
}
@media (max-width:800px){
  .layout{ grid-template-columns:1fr; padding:14px; }
  .sidebar-left{ display:none; }
  .post-media img{ max-height:280px; }
}


/* ---- Anasayfa reels seridi (Instagram tarzi) ---- */
.reels-seridi-kutusu{
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  padding:14px 0 16px; margin-bottom:14px;
}
.reels-seridi-baslik{
  display:flex; align-items:center; justify-content:space-between;
  padding:0 16px 12px; font-size:0.95rem; font-weight:800;
}
.reels-seridi-baslik a{ font-size:0.78rem; font-weight:700; color:#4F7CFF; text-decoration:none; }
.reels-seridi-kaydirici{
  display:flex; gap:8px; overflow-x:auto; padding:0 16px 2px;
  scrollbar-width:none; -ms-overflow-style:none; cursor:grab;
}
.reels-seridi-kaydirici::-webkit-scrollbar{ display:none; }
.reels-seridi-kaydirici.tutuluyor{ cursor:grabbing; user-select:none; }
.reels-seridi-karti{
  position:relative; flex:0 0 auto; width:104px; aspect-ratio:9/16;
  border-radius:12px; overflow:hidden; background:#111; text-decoration:none; display:block;
}
.reels-seridi-karti > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.reels-seridi-karti-gradyan{
  position:absolute; inset:0; background:linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.75) 100%);
}
.reels-seridi-karti-kullanici{
  position:absolute; left:8px; bottom:8px; right:8px; display:flex; align-items:center; gap:5px;
  color:#fff; font-size:0.68rem; font-weight:700;
}
.reels-seridi-avatar{ width:20px; height:20px; border-radius:50%; object-fit:cover; border:1.3px solid rgba(255,255,255,0.7); flex-shrink:0; }
.reels-seridi-karti-kullanici span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.reels-seridi-oynat-ikon{ position:absolute; top:8px; right:8px; width:16px; height:16px; color:#fff; filter:drop-shadow(0 1px 2px rgba(0,0,0,0.6)); }

@media (min-width:901px){
  .reels-seridi-karti{ width:158px; }
  .reels-seridi-avatar{ width:24px; height:24px; }
  .reels-seridi-karti-kullanici{ font-size:0.78rem; gap:6px; left:10px; bottom:10px; right:10px; }
}