/* ====================================
   RESPONSIVE DESIGN
==================================== */

/* Tablet - 1024px va undan kichik */
@media (max-width: 1024px) {
  .header .container {
    padding: 14px 20px;
  }

  .navbar {
    gap: 24px;
  }

  .navbar .nav-link {
    font-size: 13px;
  }

  .lang-btn {
    padding: 6px 9px;
    font-size: 10px;
    min-width: 34px;
  }

  .hero-content {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .hero-title {
    font-size: 42px;
  }

  .hero-right {
    min-height: 420px;
  }

  .avatar-container {
    width: 400px;
    height: 400px;
  }

  .ring-1 { width: 300px; height: 300px; }
  .ring-2 { width: 350px; height: 350px; }
  .ring-3 { width: 400px; height: 400px; }

  .avatar {
    width: 300px;
    height: 300px;
  }

  @keyframes badge-orbit {
    from { transform: translate(-50%, -50%) rotate(0deg) translateX(215px) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg) translateX(215px) rotate(-360deg); }
  }

  .section-title {
    font-size: 40px;
  }

  .about-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .achievement-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .projects-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .social-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .tech-marquee-wrap {
    gap: 14px;
  }

  .tech-pill {
    padding: 10px 16px;
  }
}

/* Mobile Large - 768px va undan kichik */
@media (max-width: 768px) {

  .container {
    width: min(100%, 90%);
  }

  .mobile-menu-btn {
    display: flex !important;
    position: relative;
    z-index: 10000;
  }

  .navbar {
    display: none;
    position: fixed;
    top: 80px;
    right: 20px;
    width: calc(100% - 40px);

    flex-direction: column;
    align-items: flex-start;

    background: rgba(11, 18, 32, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;

    padding: 20px;
    gap: 12px;

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    z-index: 9999;

    box-shadow:
      0 20px 40px rgba(0, 0, 0, 0.35),
      0 0 30px rgba(124, 58, 237, 0.15);
  }

  .navbar.mobile-active {
    display: flex;
  }

  .navbar .nav-link {
    width: 100%;
    padding: 12px 0;
    font-size: 15px;
  }

  .lang-switcher-desktop {
    display: none;
  }

  .lang-switcher-mobile {
    display: flex;
    width: 100%;
  }

  .navbar .lang-btn {
    flex: 1;
    text-align: center;
    padding: 10px 8px;
    font-size: 12px;
  }

  .hero-title {
    font-size: 32px;
  }

  .hero-cta {
    flex-direction: column;
  }

  .hero-right {
    min-height: 340px;
  }

  .avatar-container {
    width: 320px;
    height: 320px;
  }

  .ring-1 { width: 240px; height: 240px; }
  .ring-2 { width: 280px; height: 280px; }
  .ring-3 { width: 320px; height: 320px; }

  .avatar {
    width: 240px;
    height: 240px;
  }

  @keyframes badge-orbit {
    from { transform: translate(-50%, -50%) rotate(0deg) translateX(175px) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg) translateX(175px) rotate(-360deg); }
  }

  .floating-badge {
    font-size: 10px;
    padding: 8px 10px;
  }

  .projects-grid {
    grid-template-columns: 1fr;
  }

  .services-grid {
    grid-template-columns: 1fr;
  }

  .social-cards-grid {
    grid-template-columns: 1fr;
  }

  .contact-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .tech-pill span {
    font-size: 13px;
  }

  .marquee-left .tech-marquee-track {
    animation-duration: 28s;
  }

  .marquee-right .tech-marquee-track {
    animation-duration: 30s;
  }
}

/* Mobile Small - 480px va undan kichik */
@media (max-width: 480px) {
  .hero-title {
    font-size: 26px;
  }

  .section-title {
    font-size: 26px;
  }

  .hero-right {
    min-height: 280px;
  }

  .avatar-container {
    width: 260px;
    height: 260px;
  }

  .ring-1 { width: 195px; height: 195px; }
  .ring-2 { width: 228px; height: 228px; }
  .ring-3 { width: 260px; height: 260px; }

  .avatar {
    width: 190px;
    height: 190px;
  }

  @keyframes badge-orbit {
    from { transform: translate(-50%, -50%) rotate(0deg) translateX(145px) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg) translateX(145px) rotate(-360deg); }
  }

  .floating-badge {
    font-size: 9px;
    padding: 6px 8px;
  }

  .contact-grid {
    grid-template-columns: 1fr;
  }

  .tech-pill {
    padding: 9px 14px;
    gap: 8px;
  }

  .tech-pill img,
  .tech-pill i {
    width: 18px;
    height: 18px;
    font-size: 14px;
  }

  .tech-pill span {
    font-size: 12px;
  }

  .floating-dock {
    right: 12px;
    gap: 8px;
  }

  .dock-item {
    width: 46px;
    height: 46px;
    font-size: 17px;
  }
}

/* Extra Small - 360px va undan kichik */
@media (max-width: 360px) {
  .hero-title {
    font-size: 22px;
  }

  .section-title {
    font-size: 22px;
  }
}