/* Sosyal medya profil kartları: dört hesap, gerçek takipçi sayılarıyla.
   Marka renkleri yalnız burada. Düğme renkleri beyaz yazıyla AA: #0078D4 4,5:1 (Instagram'ın #0095F6'sı 3,17:1), #0866FF 4,82:1, #0F0F0F 19:1. */
.sosyal { padding-block: clamp(72px, 9vw, 128px); }
.hesap-kartlar { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 16px; }
.hesap-kartlar > li { display: flex; min-width: 0; }
@media (min-width: 600px) { .hesap-kartlar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .sosyal h2, .hesap-kartlar { grid-column: 2 / 14; } }
@media (min-width: 1100px) { .hesap-kartlar { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Ortak */
.hesap-kart {
  position: relative; display: flex; flex-direction: column; width: 100%; min-width: 0; box-sizing: border-box;
  border-radius: 14px; padding: 20px; overflow: hidden; text-decoration: none; background: #fff; color: #0F0F0F;
  transition: transform .18s ease, box-shadow .18s ease;
}
@media (min-width: 1100px) { .hesap-kart { min-height: 300px; } }
.hesap-kart > span, .hesap-kart img { min-width: 0; }
.hesap-kart > span { display: block; }
.hesap-kart:hover { transform: translateY(-3px); }
.hesap-kart:focus-visible { outline: 3px solid var(--lacivert); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .hesap-kart, .hesap-dugme { transition: none; }
  .hesap-kart:hover { transform: none; }
}
.hesap-kart svg { flex: none; display: block; }
.hesap-kart img { display: block; object-fit: cover; border-radius: 50%; }
.hesap-kart .hk-ust { display: flex; align-items: center; gap: 12px; }
.hesap-ad { font: 700 1rem/1.25 var(--sans); overflow-wrap: anywhere; }
.hesap-kullanici { font: 500 .875rem/1.3 var(--sans); color: #595959; overflow-wrap: anywhere; }
.hesap-sayac { display: block; }
.hesap-sayi { display: block; font: 800 clamp(1.75rem, 1.4rem + 1vw, 2.25rem)/1 var(--cok-dar); font-variant-numeric: tabular-nums; }
.hesap-sayi-ad { display: block; margin-top: 4px; font: 600 .9375rem/1.2 var(--sans); }
.hesap-ek { font: 500 .875rem/1.3 var(--sans); color: #595959; margin-top: 8px; }
.hesap-yazi { font: 400 .9375rem/1.45 var(--sans); margin-top: 14px; }
.hesap-dugme {
  display: flex !important; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; min-height: 44px;
  margin-top: auto; border-radius: 10px; font: 700 1rem/1.2 var(--sans); text-align: center; padding: 10px 16px;
  transition: background-color .18s ease;
}
.hesap-yazi + .hesap-dugme, .hesap-sayac + .hesap-dugme { margin-top: auto; }
.hesap-kart > .hesap-yazi, .hesap-kart > .hesap-sayac { margin-bottom: 18px; }

/* Instagram */
.hk-instagram { border: 1px solid var(--cizgi); box-shadow: 0 18px 40px -30px rgba(20, 27, 85, .45); }
.hk-instagram:hover { box-shadow: 0 24px 46px -26px rgba(20, 27, 85, .55); }
.hk-instagram .hk-ust { justify-content: space-between; }
.hk-instagram .hesap-kullanici { font: 700 1rem/1.25 var(--sans); color: inherit; }
.hk-kutu {
  flex: none; width: 28px; height: 28px; border-radius: 8px; display: grid !important; place-items: center; color: #fff;
  background: linear-gradient(45deg, #FEDA75, #FA7E1E, #D62976, #962FBF, #4F5BD5);
}
.hk-kutu svg { width: 18px; height: 18px; }
.hk-profil { display: flex !important; align-items: center; gap: 14px; margin-top: 18px; }
.hk-halka { flex: none; display: block; width: 72px; height: 72px; padding: 3px; box-sizing: border-box; border-radius: 50%;
  background: linear-gradient(45deg, #FEDA75, #FA7E1E, #D62976, #962FBF, #4F5BD5); }
.hk-halka img { width: 100%; height: 100%; border: 2px solid #fff; box-sizing: border-box; }
.hk-isim { display: block; min-width: 0; }
.hk-instagram .hesap-sayac { margin-top: 8px; }
.hk-instagram .hesap-dugme { background: #0078D4; color: #fff; }
.hk-instagram:hover .hesap-dugme { background: #005FB8; }

/* YouTube */
.hk-youtube { border: 1px solid var(--cizgi); box-shadow: 0 18px 40px -30px rgba(15, 15, 15, .5); }
.hk-youtube:hover { box-shadow: 0 24px 46px -26px rgba(15, 15, 15, .6); }
.hk-youtube .hk-avatar { flex: none; display: block; width: 64px; height: 64px; }
.hk-youtube .hk-avatar img { width: 64px; height: 64px; }
.hk-youtube .hk-isim { flex: 1; }
.hk-youtube .hesap-ad { font-size: 1.125rem; }
.hk-youtube .hk-simge { flex: none; align-self: flex-start; width: 28px; height: 28px; color: #FF0000; }
.hk-youtube .hk-orta { margin-top: 18px; }
.hk-youtube .hesap-dugme { background: #0F0F0F; color: #fff; }
.hk-youtube:hover .hesap-dugme { background: #3A3A3A; }

/* X */
.hk-x { background: #000; border: 1px solid #000; color: #fff; text-align: center; box-shadow: 0 18px 40px -30px rgba(0, 0, 0, .7); }
.hk-x:hover { box-shadow: 0 24px 46px -26px rgba(0, 0, 0, .8); }
.hk-x .hk-ust { justify-content: center; position: relative; min-height: 24px; }
.hk-x .hk-simge { position: absolute; right: 0; top: 0; width: 24px; height: 24px; color: #fff; }
.hk-x .hk-ust .hesap-ad { padding-inline: 32px; }
.hk-x .hk-avatar { display: block; margin: 14px auto 10px; width: 80px; height: 80px; }
.hk-x .hk-avatar img { width: 80px; height: 80px; }
.hk-x .hesap-kullanici { color: #fff; font: 700 1rem/1.25 var(--sans); }
.hk-istat { display: grid !important; grid-template-columns: 1fr 1fr; margin-top: 16px; }
.hk-istat .hesap-sayac { padding-inline: 6px; }
.hk-istat .hesap-sayac + .hesap-sayac { border-left: 1px solid rgba(255, 255, 255, .25); }
.hk-istat .hesap-sayi { font-size: clamp(1.5rem, 1.25rem + .8vw, 1.875rem); }
.hk-x .hesap-yazi { margin-top: 14px; }
.hk-x .hesap-dugme { background: #fff; color: #000; }
.hk-x:hover .hesap-dugme { background: #E8E8E8; }

/* Facebook */
.hk-facebook { border: 1px solid var(--cizgi); box-shadow: 0 18px 40px -30px rgba(8, 102, 255, .5); }
.hk-facebook:hover { box-shadow: 0 24px 46px -26px rgba(8, 102, 255, .6); }
.hk-bant { display: flex !important; justify-content: flex-end; align-items: flex-start; box-sizing: border-box; height: 64px;
  margin: -20px -20px 0; padding: 12px 16px; background: #0866FF; }
.hk-facebook .hk-simge { width: 28px; height: 28px; color: #fff; }
.hk-facebook .hk-avatar { display: block; position: relative; width: 80px; height: 80px; margin-top: -40px; border-radius: 50%; }
.hk-facebook .hk-avatar img { width: 80px; height: 80px; border: 4px solid #fff; box-sizing: border-box; }
.hk-facebook .hesap-ad { font-size: 1.125rem; margin-top: 12px; }
.hk-facebook .hesap-yazi { margin-top: 6px; }
.hk-facebook .hesap-sayac { margin-top: 14px; }
.hk-facebook .hesap-dugme { background: #0866FF; color: #fff; }
.hk-facebook:hover .hesap-dugme { background: #0654D4; }
.hk-isim > .hesap-ad, .hk-isim > .hesap-kullanici { display: block; }
.hk-facebook .hesap-yazi { margin-bottom: 0; }
