:root{--main:#2563eb;--bg:#eef2ff;--card:#ffffff;--text:#0f172a;}
body{margin:0;font-family:Arial,Helvetica,sans-serif;display:flex;justify-content:center;padding:20px;background:var(--bg);}
.card{width:360px;background:var(--card);border-radius:18px;overflow:hidden;box-shadow:0 25px 50px rgba(0,0,0,.2);position:relative;}
.banner{height:150px;position:relative;}
.banner img{width:100%;height:100%;object-fit:cover;}
.rating{display:flex;gap:6px;font-size:24px;position:absolute;top:10px;left:12px;}
.rating span{position: relative;display:inline-block;color:#e0e0e0;}
.rating span.full{color:#facc15;}
.rating span.half{color:#e0e0e0;}
.rating span.half::before{content:"★";position:absolute;left:0;top:0;width:50%;overflow:hidden;color:#facc15;}
.views{position:absolute;top:45px;left:12px;background:rgba(0,0,0,.45);color:#fff;padding:2px 6px;border-radius:6px;font-size:12px;display:flex;align-items:center;gap:4px;}
.views i{font-size:12px;}
.avatar{width:90px;height:90px;border-radius:50%;overflow:hidden;border:4px solid var(--card);position:absolute;top:110px; left:50%;transform:translateX(-50%);background:white;cursor:pointer;}
.avatar {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid var(--main); /* saytin əsas rəngi */
  position: absolute;
  top: 110px;
  left: 50%;
  transform: translateX(-50%);
  background: none; /* buranı white -> none et */
  cursor: pointer;
  transition: border 0.3s; /* rəng dəyişəndə animasiya */
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block; /* bəzən inline default problemi olur */
}

.info{padding:60px 20px 22px;text-align:center;}
.info h2{margin:0;color:var(--text);display:inline-flex;margin-top: 5px; /* əlavə boşluq əlavə edə bilərsən */align-items:center;}
.role{display:block;margin-top:6px;font-size:14px;color:#64748b;min-height:20px;font-family:monospace;}
.verified{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;background:#1877f2;color:white;border-radius:50%;font-size:12px;margin-left:6px;}
.contact{margin-top:15px;text-align:center;}
.contact-buttons{display:flex;justify-content:space-between;margin-bottom:8px;gap:10px;}
.contact-btn{flex:1;background:var(--main);border:none;padding:10px 8px;color:white;border-radius:12px;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;transition:.3s;}
.contact-btn:hover{transform:scale(1.05);}
.contact-icons{display:flex;justify-content:center;gap:15px;margin-top:10px;}
.contact-icon{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--main);color:white;border-radius:50%;text-decoration:none;transition:.3s;font-size:18px;cursor:pointer;border:none;}
.contact-icon i{font-size:18px;}
.contact-icon:hover{transform:scale(1.2);}
.about{margin-top:15px;text-align:left;padding:10px 20px;border-top:1px solid #e2e8f0;display:flex;flex-direction:column;gap:8px;}
.about-btn{width:100%;background:var(--main);color:white;border:none;border-radius:12px;padding:10px;font-size:14px;display:flex;align-items:center;gap:8px;cursor:pointer;transition:.3s;text-align:left;}
.about-btn:hover{transform:scale(1.02);opacity:0.85;}
.about-btn a{color:white;text-decoration:none;flex:1;}
.about-btn i{color:white;font-size:16px;}
.popup{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);justify-content:center;align-items:center;z-index:2000;}
.popup img{max-width:90%;max-height:90%;border-radius:12px;}
.popup .close{position:absolute;top:20px;right:30px;font-size:30px;color:white;cursor:pointer;font-weight:bold;}
.menu-container{position:absolute;top:12px;right:12px;z-index:1001;}
.hamburger{width:25px;height:20px;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;z-index:1002;}
.bar{height:3px;background:white;border-radius:2px;transition:all .3s;}
.bar.hide{opacity:0;}
.menu{display:none;opacity:0;transform:translateY(-20px);transition:all .3s ease;background:white;padding:12px;border-radius:12px;width:220px;box-shadow:0 10px 20px rgba(0,0,0,.3);}
.menu.active{display:block;opacity:1;transform:translateY(0);}
.menu-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-weight:bold;}
.close-menu{cursor:pointer;font-size:18px;color:#dc2626;transition:.2s;}
.close-menu:hover{transform:scale(1.2);}
.color-list{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:8px;}
.color-list button{width:36px;height:36px;border-radius:50%;border:2px solid #ccc;cursor:pointer;transition:.2s;}
.color-list button:hover{transform:scale(1.2);border:2px solid var(--main);}
.theme-toggle{display:flex;gap:10px;justify-content:center;margin-top:5px;}
.theme-toggle button{width:40px;height:40px;border-radius:50%;border:none;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;background:var(--main);color:white;transition:.3s;}
.theme-toggle button:hover{transform:scale(1.2);}
/* =========================
   SOSİAL MEDİA BÖLMƏSİ
========================= */

.social-section {
  margin-top: 15px;
  padding: 10px 20px 20px;
  border-top: 1px solid #e2e8f0;
}

.social-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.social-item {
  background: #f8fafc;
  border-radius: 14px;
  padding: 12px 6px;
  text-align: center;
  text-decoration: none;
  transition: 0.25s ease;
}

.social-item i {
  font-size: 22px;
  margin-bottom: 6px;
  display: block;
}

.social-item span {
  font-size: 12px;
  color: #0f172a;
}

/* Hover effekti */
.social-item:hover {
  transform: translateY(-4px);
  background: #eef2ff;
}

/* 🔒 ORİJİNAL RƏNGLƏR (DƏYİŞMƏZ) */
.social-item.fb i { color: #1877f2; }
.social-item.ig i { color: #e1306c; }
.social-item.in i { color: #0a66c2; }
.social-item.tt i { color: #000000; }
.social-item.tg i { color: #229ED9; }
.social-item.web i { color: #16a34a; }




/* Haqqımda Pop-up dizaynı */
#about-popup {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.8);
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

#about-content {
  background: var(--card);
  color: var(--text);
  padding: 20px;
  border-radius: 14px;
  max-width: 90%;
  max-height: 70%;
  overflow-y: auto;
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}

/* Bağlama düyməsi */
#about-popup .close {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 28px;
  color: var(--text);
  font-weight: bold;
  cursor: pointer;
  transition: 0.2s;
}
#about-popup .close:hover {
  transform: scale(1.2);
  color: var(--main);
}





/* Linklərin alt xətini silmək */
.no-underline {
  text-decoration: none;
  color: white; /* Mövcud contact-btn rəngini saxlamaq üçün */
  display: flex;
  align-items: center;
  justify-content: center;
}




.contact-btn {
  flex: 1;
  background: var(--main);
  border: none;
  padding: 8px; /* biraz daha sıxışdırdım */
  color: white;
  border-radius: 12px;
  font-weight: 500;
  font-size: 14px; /* şrift ölçüsünü kiçildirik */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: .3s;
  text-decoration: none; /* alt xətt silinir */
}








.site-footer {
  text-align: center;
  padding: 12px 0;
  background: #f3f4f6;
  color: #0f172a;
  font-size: 13px;
  border-top: 1px solid #e2e8f0;
}

.site-footer a {
  color: #2563eb;
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
}