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

.arkadaslar-shell{ max-width:1000px; margin:0 auto; padding:0 20px 60px; }

/* ---- üst banner ---- */
.arkadaslar-banner{
  background:linear-gradient(120deg, #4F7CFF 0%, #8B5CF6 55%, #F3425F 120%);
  border-radius:0 0 var(--radius-lg) var(--radius-lg);
  padding:34px 24px 26px; margin-bottom:24px; color:#fff; position:relative; overflow:hidden;
}
.arkadaslar-banner::before{
  content:''; position:absolute; top:-40px; right:-30px; width:180px; height:180px;
  border-radius:50%; background:rgba(255,255,255,0.12);
}
.arkadaslar-banner::after{
  content:''; position:absolute; bottom:-50px; left:20%; width:120px; height:120px;
  border-radius:50%; background:rgba(255,255,255,0.08);
}
.arkadaslar-banner-ic{ position:relative; z-index:1; max-width:600px; margin:0 auto; }
.arkadaslar-banner h1{ font-size:1.5rem; font-weight:800; margin-bottom:6px; }
.arkadaslar-banner p{ font-size:0.88rem; opacity:0.92; margin-bottom:18px; }
.arkadaslar-stat-row{ display:flex; gap:22px; }
.arkadaslar-stat{ display:flex; flex-direction:column; }
.arkadaslar-stat b{ font-size:1.3rem; font-weight:800; line-height:1; }
.arkadaslar-stat span{ font-size:0.74rem; opacity:0.85; margin-top:3px; }

.arkadaslar-arama{
  display:flex; align-items:center; gap:10px;
  background:var(--surface); border:1px solid var(--border); border-radius:999px;
  padding:12px 20px; margin:0 auto 28px; max-width:600px; box-shadow:var(--shadow-card);
  transition:box-shadow .15s ease, border-color .15s ease;
}
.arkadaslar-arama:focus-within{ border-color:var(--accent); box-shadow:0 8px 24px -10px rgba(79,124,255,0.35); }
.arkadaslar-arama input{
  border:none; background:transparent; outline:none; flex:1; color:var(--text);
  font-family:inherit; font-size:0.88rem;
}
.arkadaslar-arama .icon{ width:17px; height:17px; color:var(--text-dim); flex-shrink:0; }

.arkadaslar-bolum{ margin-bottom:36px; }
.arkadaslar-bolum-baslik{
  display:flex; align-items:center; gap:10px;
  font-size:1rem; font-weight:800; margin-bottom:16px;
}
.arkadaslar-bolum-baslik .bolum-ikon{
  width:32px; height:32px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background:var(--grad); color:#fff; flex-shrink:0;
}
.arkadaslar-bolum-baslik .bolum-ikon .icon{ width:16px; height:16px; }
.arkadaslar-bolum-baslik .sayac-rozet{
  background:var(--surface-alt); color:var(--text-dim); font-size:0.72rem; font-weight:700;
  padding:3px 10px; border-radius:999px; margin-left:auto;
}

/* ---- gelen istekler: yatay kart ---- */
.istek-karti{
  display:flex; align-items:center; gap:14px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:16px; margin-bottom:12px; box-shadow:var(--shadow-card);
  transition:transform .15s ease, box-shadow .15s ease;
}
.istek-karti:hover{ transform:translateY(-2px); box-shadow:0 12px 28px -12px rgba(0,0,0,0.18); }
.istek-karti img{ width:54px; height:54px; border-radius:50%; object-fit:cover; flex-shrink:0; border:2px solid var(--surface-alt); }
.istek-karti .istek-govde{ flex:1; min-width:0; }
.istek-karti b{ font-size:0.92rem; display:block; }
.istek-karti span{ font-size:0.78rem; color:var(--text-dim); }
.istek-karti .istek-aksiyon{ display:flex; gap:8px; flex-shrink:0; }
.istek-karti .istek-aksiyon .btn{ padding:9px 16px; font-size:0.81rem; border-radius:10px; }

/* ---- arkadaş grid ---- */
.arkadas-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(165px, 1fr)); gap:16px;
}
.arkadas-karti{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:22px 16px 16px; text-align:center; box-shadow:var(--shadow-card); position:relative;
  transition:transform .15s ease, box-shadow .15s ease;
}
.arkadas-karti:hover{ transform:translateY(-3px); box-shadow:0 14px 30px -14px rgba(0,0,0,0.2); }
.arkadas-karti a{ text-decoration:none; color:inherit; display:block; }
.arkadas-karti img{
  width:68px; height:68px; border-radius:50%; object-fit:cover; margin:0 auto 12px;
  border:2.5px solid transparent;
  background:linear-gradient(var(--surface),var(--surface)) padding-box, var(--grad) border-box;
}
.arkadas-karti b{ font-size:0.87rem; display:block; margin-bottom:2px; }
.arkadas-karti span{ font-size:0.74rem; color:var(--text-dim); display:block; margin-bottom:14px; }
.arkadas-karti .arkadas-aksiyon{ display:flex; gap:6px; }
.arkadas-karti .arkadas-aksiyon a{
  flex:1; padding:8px; border-radius:9px; font-size:0.76rem; font-weight:700;
  display:flex; align-items:center; justify-content:center; gap:5px;
  background:var(--surface-alt); border:1px solid var(--border); transition:background .15s ease;
}
.arkadas-karti .arkadas-aksiyon a:hover{ background:var(--accent); color:#fff; border-color:var(--accent); }
.arkadas-karti .arkadas-more-btn{
  position:absolute; top:10px; right:10px; padding:5px; color:var(--text-dim); border-radius:8px;
}
.arkadas-karti .arkadas-more-btn:hover{ background:var(--surface-alt); }
.arkadas-karti .arkadas-more-menu{
  display:none; position:absolute; top:36px; right:10px; z-index:10; text-align:left;
  background:var(--surface); border:1px solid var(--border); border-radius:10px;
  box-shadow:0 12px 30px -10px rgba(0,0,0,0.25); min-width:170px; overflow:hidden; padding:6px;
}
.arkadas-karti .arkadas-more-menu.open{ display:block; }
.arkadas-karti .arkadas-more-menu button{
  width:100%; text-align:left; padding:9px 10px; border-radius:8px; font-size:0.8rem; font-weight:600; color:#F3425F;
}
.arkadas-karti .arkadas-more-menu button:hover{ background:var(--surface-alt); }

.arkadaslar-bos{
  text-align:center; color:var(--text-dim); padding:50px 20px; grid-column:1/-1;
  background:var(--surface); border:1.5px dashed var(--border-strong); border-radius:var(--radius-md);
  font-size:0.87rem;
}

@media (max-width:600px){
  .arkadaslar-banner{ padding:26px 18px 20px; }
  .arkadaslar-stat-row{ gap:16px; }
}