/* =========================================================
   TikTok Social Stats
   Compact Master Card
   ========================================================= */

/* ---------------------------------------------------------
   CARD - LIGHT MODE
   --------------------------------------------------------- */

.social-card--tiktok {
  position: relative;
  display: flex;
  flex-direction: column;
  align-self: start;

  padding: 14px 16px 12px;
  overflow: hidden;

  border: 1px solid rgba(139, 92, 246, 0.14);
  border-radius: 16px;

  background:
    radial-gradient(
      circle at 15% 110%,
      rgba(139, 92, 246, 0.18),
      transparent 48%
    ),
    linear-gradient(135deg, #ffffff 0%, #faf8ff 55%, #f1eaff 100%);

  color: #18181b;
  text-decoration: none;
  isolation: isolate;
}

/* ---------------------------------------------------------
   BACKGROUND OVERLAY
   --------------------------------------------------------- */

.social-card--tiktok::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;

  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(250, 248, 255, 0.88) 42%,
    rgba(243, 237, 255, 0.28) 100%
  );

  pointer-events: none;
}

/* ---------------------------------------------------------
   BACKGROUND AVATAR
   --------------------------------------------------------- */

.social-card--tiktok .tiktok-background-avatar {
  position: absolute;
  z-index: -2;

  top: 0;
  right: 0;

  width: 58%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  opacity: 0.42;

  /*
     * Gradasi sisi kiri foto.
     * Membuat foto menyatu dengan background card.
     */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(0, 0, 0, 0.15) 12%,
    rgba(0, 0, 0, 0.55) 28%,
    black 48%,
    black 100%
  );

  mask-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(0, 0, 0, 0.15) 12%,
    rgba(0, 0, 0, 0.55) 28%,
    black 48%,
    black 100%
  );

  pointer-events: none;
}

/* ---------------------------------------------------------
   HEADER
   --------------------------------------------------------- */

.social-card--tiktok .tiktok-header {
  position: relative;
  z-index: 1;

  display: flex;
  align-items: center;

  min-width: 0;
}

.social-card--tiktok .tiktok-avatar {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;

  border: 1px solid #fe2c55;
  border-radius: 50%;

  object-fit: cover;

  box-shadow: 0 0 0 1px #25f4ee;
}

.social-card--tiktok .tiktok-profile {
  min-width: 0;
  margin-left: 9px;
}

.social-card--tiktok .tiktok-platform {
  margin: 0;

  color: #18181b;

  font-size: 14px;
  font-weight: 700;
  line-height: 1.1;
}

.social-card--tiktok .tiktok-username {
  margin: 3px 0 0;

  overflow: hidden;

  color: #71717a;

  font-size: 10px;
  line-height: 1.1;

  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------------------------------------------------------
   TIKTOK ICON - KANAN ATAS
   --------------------------------------------------------- */

.social-card--tiktok .tiktok-brand-icon {
  margin-left: auto;
  align-self: flex-start;

  color: #25f4ee;

  font-size: 19px;
  font-weight: 900;
  line-height: 1;

  text-shadow: 2px 1px 0 #fe2c55;
}

/* ---------------------------------------------------------
   PRIMARY FOLLOWERS
   --------------------------------------------------------- */

.social-card--tiktok .tiktok-primary {
  position: relative;
  z-index: 1;

  margin-top: 8px;
  margin-bottom: 9px;

  text-align: center;
}

.social-card--tiktok .tiktok-primary-value {
  margin: 0;

  color: #8b5cf6;

  font-size: 32px;
  font-weight: 900;
  line-height: 0.95;

  letter-spacing: -0.05em;
}

.social-card--tiktok .tiktok-primary-label {
  margin: 4px 0 0;

  color: #52525b;

  font-size: 9px;
  font-weight: 500;
  line-height: 1;
}

/* ---------------------------------------------------------
   BOTTOM STATS
   --------------------------------------------------------- */

.social-card--tiktok .tiktok-stats {
  position: relative;
  z-index: 1;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  margin-top: 10px;
  padding-top: 8px;

  border-top: 1px solid rgba(24, 24, 27, 0.08);
}

.social-card--tiktok .tiktok-stat {
  min-width: 0;

  text-align: center;
}

.social-card--tiktok .tiktok-stat-icon {
  height: 16px;
  margin-bottom: 3px;

  font-size: 14px;
  line-height: 16px;

}

.social-card--tiktok .tiktok-stat-icon--likes {
  color: #fe2c55;
}

.social-card--tiktok .tiktok-stat-icon--following {
  color: #00b8b0;
}

.social-card--tiktok .tiktok-stat-value {
  margin: 0;

  overflow: hidden;

  color: #18181b;

  font-size: 15px;
  font-weight: 850;
  line-height: 1.1;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.social-card--tiktok .tiktok-stat-label {
  margin: 4px 0 0;

  color: #71717a;

  font-size: 8px;
  line-height: 1.1;
}

/* =========================================================
   DARK MODE
   ========================================================= */

html.dark .social-card--tiktok {
  border-color: rgba(139, 92, 246, 0.16);

  background:
    radial-gradient(
      circle at 15% 110%,
      rgba(139, 92, 246, 0.2),
      transparent 48%
    ),
    linear-gradient(135deg, #18171c 0%, #19171f 55%, #261b35 100%);

  color: #ffffff;
}

html.dark .social-card--tiktok::after {
  background: linear-gradient(
    90deg,
    rgba(20, 19, 24, 0.98) 0%,
    rgba(22, 19, 28, 0.88) 42%,
    rgba(46, 31, 65, 0.28) 100%
  );
}

html.dark .social-card--tiktok .tiktok-background-avatar {
  opacity: 0.5;
}

html.dark .social-card--tiktok .tiktok-platform {
  color: #ffffff;
}

html.dark .social-card--tiktok .tiktok-username {
  color: #a1a1aa;
}

html.dark .social-card--tiktok .tiktok-primary-label {
  color: #d4d4d8;
}

html.dark .social-card--tiktok .tiktok-stats {
  border-top-color: rgba(255, 255, 255, 0.07);
}

html.dark .social-card--tiktok .tiktok-stat-value {
  color: #ffffff;
}

html.dark .social-card--tiktok .tiktok-stat-label {
  color: #71717a;
}

/* =========================================================
   HOVER
   ========================================================= */

.social-card--tiktok:hover {
  transform: translateY(-2px);

  box-shadow: 0 14px 32px rgba(139, 92, 246, 0.12);
}

html.dark .social-card--tiktok:hover {
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28);
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 639px) {
  .social-card--tiktok {
    padding: 14px 16px 12px;
  }
}

/* Secondary stats: compact icon + value layout */
.social-card--tiktok .tiktok-stat { display:grid; grid-template-columns:15px minmax(0,auto); grid-template-rows:auto auto; column-gap:7px; align-items:center; justify-content:center; min-width:0; text-align:left; }
.social-card--tiktok .tiktok-stat-icon { display:flex; grid-row:1 / span 2; align-items:center; justify-content:center; width:15px; height:15px; margin:0; }
.social-card--tiktok .tiktok-stat-icon svg { display:block; width:15px; height:15px; fill:currentColor; }
.social-card--tiktok .tiktok-stat-value { grid-column:2; margin:0; }
.social-card--tiktok .tiktok-stat-label { grid-column:2; margin:2px 0 0; }

/* Secondary stats: centered icon + value grouping */
.social-card--tiktok .tiktok-stat { display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:0; text-align:center; }
.social-card--tiktok .tiktok-stat-main { display:flex; align-items:center; justify-content:center; gap:7px; min-width:0; }
.social-card--tiktok .tiktok-stat-icon { display:flex; align-items:center; justify-content:center; flex:0 0 15px; grid-row:auto; width:15px; height:15px; margin:0; }
.social-card--tiktok .tiktok-stat-value { grid-column:auto; margin:0; line-height:1; }
.social-card--tiktok .tiktok-stat-label { grid-column:auto; margin:4px 0 0; }