:root{
  --bg:#fff;
  --card: rgba(255,255,255,.38);
  --stroke: rgba(0,0,0,.08);
  --stroke2: rgba(0,0,0,.10);
  --text:#0f172a;
  --muted:#64748b;
  --shadow: 0 10px 28px rgba(0,0,0,.05);
  --blue:#0b5ed7;
}

*{ box-sizing:border-box; }
body{ background:var(--bg); color:var(--text); }
.container{ max-width:1200px; margin:0 auto; padding:18px 16px; }

.svc-hero{ margin-bottom:12px; }
.page-title{ margin:0 0 6px; font-size:30px; line-height:1.15; font-weight:900; }
.svc-hero-sub{ color:rgba(15,23,42,.70); font-size:13px; }

.platform-tabs{
  display:flex; gap:10px; overflow:auto;
  padding:12px; background:var(--card);
  border:1px solid var(--stroke);
  border-radius:18px; box-shadow:var(--shadow);
  -webkit-overflow-scrolling:touch;
}
.platform-tabs::-webkit-scrollbar{ height:0; }

.tab{
  border:1px solid rgba(0,0,0,.12);
  background:rgba(255,255,255,.35);
  padding:10px 14px;
  border-radius:999px;
  font-size:13px;
  color:rgba(15,23,42,.80);
  cursor:pointer;
  white-space:nowrap;
  flex:0 0 auto;
  font-weight:900;
}
.tab:hover{ background:rgba(255,255,255,.55); }
.tab.active{
  border-color:rgba(11,94,215,.30);
  background:rgba(11,94,215,.12);
  color:var(--blue);
}

/* ==========================
   FILTERS (Desktop açık, Mobil katlanır)
========================== */
.svc-filters{
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:18px;
  padding:14px;
  box-shadow:var(--shadow);
  margin:12px 0 14px;
}

.svc-filter-head{
  display:none;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-weight:900;
  margin-bottom:10px;
}
.svc-filter-title{ display:flex; align-items:center; gap:10px; }
.svc-filter-title .bi{ font-size:16px; opacity:.85; }

.btn-filter-toggle{
  border:0;
  background:transparent;
  font-weight:900;
  color:rgba(15,23,42,.75);
  padding:8px 10px;
  border-radius:12px;
  cursor:pointer;
  border:1px solid rgba(0,0,0,.10);
  background:rgba(255,255,255,.45);
}
.btn-filter-toggle:hover{ background:rgba(255,255,255,.60); }

.svc-filter-body{ display:block; }

.svc-search{
  display:flex;
  align-items:center;
  gap:10px;
  background:rgba(255,255,255,.50);
  border:1px solid var(--stroke2);
  border-radius:14px;
  padding:12px 14px;
}
.svc-search-ico{ opacity:.65; }
.svc-search input{
  flex:1;
  border:0;
  outline:0;
  background:transparent;
  font-weight:800;
  font-size:14px;
  color:var(--text);
}
.svc-search input::placeholder{ color:rgba(15,23,42,.55); }
.svc-search-btn{
  border:0;
  background:transparent;
  cursor:pointer;
  font-size:16px;
  opacity:.85;
}

.svc-filter-row{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap:12px;
  margin-top:12px;
  align-items:end;
}
.svc-field label{
  display:block;
  font-size:12px;
  font-weight:900;
  opacity:.75;
  margin-bottom:6px;
}
.svc-field select,
.svc-field input{
  width:100%;
  border-radius:14px;
  padding:12px 12px;
  border:1px solid var(--stroke2);
  background:rgba(255,255,255,.50);
  outline:0;
  font-weight:800;
  color:var(--text);
}

.svc-filter-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:12px;
}
.btn-reset{
  border:1px solid rgba(0,0,0,.12);
  background:rgba(255,255,255,.55);
  border-radius:14px;
  padding:12px 14px;
  cursor:pointer;
  font-weight:900;
  color:var(--text);
}
.btn-reset:hover{ background:rgba(255,255,255,.75); }

.btn-filter{
  border:0;
  background:var(--blue);
  color:#fff;
  border-radius:14px;
  padding:12px 16px;
  cursor:pointer;
  font-weight:900;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-width:160px;
}
.btn-filter:hover{ filter:brightness(.98); }

.svc-meta{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:10px;
  color:rgba(15,23,42,.65);
  font-size:12px;
}
.svc-count strong{ color:var(--text); font-weight:900; }

/* ==========================
   TABLE (Desktop)
========================== */
.svc-table{
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:18px;
  box-shadow:var(--shadow);
  overflow:hidden;
}

/* Desktop: gerçek tablo görünümü */
.svc-table-scroll{
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.svc-table-scroll::-webkit-scrollbar{ height:0; display:none; }

.svc-th,
.svc-tr{
  display:grid;
  grid-template-columns: 420px 160px 160px 160px 120px 88px; /* name followers post story platform action */
  align-items:center;
  gap:10px;
  padding:14px 16px;
}

.svc-th{
  font-weight:900;
  font-size:13px;
  border-bottom:1px solid rgba(0,0,0,.08);
  background:rgba(255,255,255,.42);
  color:rgba(15,23,42,.78);
}

.svc-tr{
  border-bottom:1px solid rgba(0,0,0,.06);
  background:rgba(255,255,255,.18);
}
.svc-tr:hover{ background:rgba(255,255,255,.30); }

.t-center{ text-align:center; }

/* Name cell */
.svc-name{ display:flex; align-items:center; gap:12px; min-width:0; }
.svc-name-text{ min-width:0; }
.svc-acc{
  font-weight:900;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 320px;
}

/* Avatar */
.svc-ring{ width:44px; height:44px; padding:2px; border-radius:999px; display:inline-flex; background:rgba(0,0,0,.06); }
.svc-avatar{
  width:100%; height:100%;
  border-radius:999px;
  overflow:hidden;
  background:rgba(0,0,0,.08);
  border:2px solid rgba(255,255,255,.85);
  display:flex; align-items:center; justify-content:center;
}
.svc-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.svc-initials{ color:rgba(15,23,42,.85); font-weight:900; letter-spacing:.4px; font-size:12px; }

/* Platform icon */
.plat-box{
  width:40px; height:40px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.10);
  background:rgba(255,255,255,.55);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:0 auto;
}
.plat-dot{ width:10px; height:10px; border-radius:999px; display:inline-block; background:#94a3b8; }
.plat-box[data-platform="instagram"] .plat-dot{background:#e11d48}
.plat-box[data-platform="tiktok"] .plat-dot{background:#111827}
.plat-box[data-platform="youtube"] .plat-dot{background:#ef4444}
.plat-box[data-platform="twitter"] .plat-dot{background:#0ea5e9}
.plat-box[data-platform="facebook"] .plat-dot{background:#1877f2}
.plat-box[data-platform="linkedin"] .plat-dot{background:#0a66c2}
.plat-box[data-platform="pinterest"] .plat-dot{background:#e60023}
.plat-box[data-platform="other"] .plat-dot{background:#64748b}

/* Eye button (Bootstrap icon) */
.svc-eye{
  width:44px;
  height:44px;
  border-radius:10px;
  background:var(--blue);
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  border:0;
}
.svc-eye:hover{ filter:brightness(.98); }
.svc-eye i.bi{ font-size:18px; line-height:1; }

/* Alert */
.alert{
  margin-top:14px;
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:18px;
  padding:14px;
  color:rgba(15,23,42,.70);
  box-shadow:var(--shadow);
}

/* ==========================
   Tablet
========================== */
@media (max-width: 980px){
  .svc-filter-row{ grid-template-columns:1fr 1fr; }
  .svc-filter-actions{ justify-content:stretch; }
  .btn-filter, .btn-reset{ flex:1; min-width:0; }
  .svc-th, .svc-tr{
    grid-template-columns: 360px 140px 140px 140px 100px 88px;
  }
}

/* ==========================
   MOBİL: filtre katlanır + 2 kolon liste
========================== */
@media (max-width: 520px){

  /* filtre katlanır */
  .svc-filter-head{ display:flex; }
  .svc-filters{ padding:12px; }
  .svc-filters .svc-filter-body{ display:none; }
  .svc-filters.is-open .svc-filter-body{ display:block; }
  .svc-filter-row{ grid-template-columns:1fr; }

  .svc-filter-actions{
    flex-direction:column;
    gap:10px;
  }
  .btn-filter, .btn-reset{ width:100%; }

  /* mobil tablo: sadece Sosyal Medya Adı + Platform + göz */
  .svc-table-scroll{ overflow-x:hidden; }

  .svc-th, .svc-tr{
    grid-template-columns: 1fr 90px 74px; /* name, platform, eye */
  }

  /* followers/post/story kolonlarını gizle */
  .svc-col-followers,
  .svc-col-post,
  .svc-col-story{ display:none !important; }

  .svc-acc{ max-width: 100%; }
}

/* ==========================
   PLATFORM ADI GÖSTERİM FIX
========================== */

/* ==========================
   PLATFORM: ikon + isim
========================== */
.plat-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  background:rgba(255,255,255,.55);
  font-weight:900;
  font-size:12px;
  color:rgba(15,23,42,.85);
  white-space:nowrap;
  max-width:100%;
}

.plat-pill i.bi{
  font-size:18px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.plat-text{
  font-size:12px;
  font-weight:900;
}

/* Platform renkleri (ikon rengi) */
.plat-pill[data-platform="instagram"] i{ color:#E1306C; }
.plat-pill[data-platform="facebook"]  i{ color:#1877F2; }
.plat-pill[data-platform="twitter"]   i{ color:#111827; }
.plat-pill[data-platform="youtube"]   i{ color:#FF0000; }
.plat-pill[data-platform="tiktok"]    i{ color:#111827; }
.plat-pill[data-platform="linkedin"]  i{ color:#0A66C2; }
.plat-pill[data-platform="pinterest"] i{ color:#E60023; }
.plat-pill[data-platform="other"]     i{ color:#64748b; }

/* Mobilde de yazı görünsün */
@media (max-width: 520px){
  .plat-pill{ padding:8px 10px; gap:8px; }
  .plat-pill i.bi{ font-size:18px; }
  .plat-text{ display:inline; }
}


/* ==========================
   MOBİL DAVRANIŞ
========================== */
@media (max-width: 520px){

  /* mobilde platform kolonu kart içi satır gibi */
  .svc-tbody .svc-grid > div:nth-child(6){
    justify-content:space-between;
  }

  /* mobilde yazı GÖRÜNÜR */
  .plat-text{
    display:inline;
    font-size:12px;
  }
}