/* ============================================
   RESPONSIVE.CSS - Mobil ve Tablet Tasarımları
   ============================================ */

/* TABLET - 768px ve altı */
@media (max-width: 768px) {
  /* NAVBAR */
  .nav-container {
    height: 60px;
  }

  .logo-sub {
    display: none;
  }

  .logo-main {
    font-size: 1rem;
  }

  .nav-menu {
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    background: var(--secondary);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    z-index: 999;
  }

  .nav-menu.active {
    max-height: 500px;
  }

  .nav-menu ul {
    flex-direction: column;
    gap: 0;
    padding: 20px;
  }

  .nav-menu a {
    display: block;
    padding: 12px;
  }

  .dropdown-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: var(--primary);
    display: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    margin-top: 0;
    box-shadow: none;
  }

  .dropdown:hover .dropdown-menu,
  .dropdown.active .dropdown-menu {
    display: block;
    max-height: 300px;
  }

  .dropdown-menu a {
    padding-left: 30px;
  }

  .menu-toggle {
    display: flex;
  }

  .menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(8px, 8px);
  }

  .menu-toggle.active span:nth-child(2) {
    opacity: 0;
  }

  .menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px);
  }

  .btn-header {
    display: none;
  }

  /* HERO */
  .hero {
    margin-top: 60px;
    min-height: 80vh;
  }

  .hero-content {
    padding: 30px 20px;
  }

  .hero-text h1 {
    font-size: 2rem;
  }

  .hero-text p {
    font-size: 1rem;
  }

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

  .btn {
    width: 100%;
    justify-content: center;
  }

  .hero-features {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 30px;
  }

  .feature-box {
    padding: 15px;
  }

  /* ABOUT */
  .about-preview {
    padding: 60px 0;
  }

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

  .about-text h2 {
    font-size: 1.8rem;
  }

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

  /* SECTIONS */
  section {
    padding: 60px 0;
  }

  .section-header h2 {
    font-size: 2rem;
  }

  .section-header p {
    font-size: 1rem;
  }

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

  /* PRODUCTS */
  .products-grid {
    grid-template-columns: 1fr;
  }

  .product-image {
    height: 200px;
  }

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

  /* CTA */
  .cta-section {
    padding: 60px 0;
  }

  .cta-section h2 {
    font-size: 1.8rem;
  }

  /* FOOTER */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  /* WHATSAPP */
  .whatsapp-btn {
    bottom: 20px;
    right: 20px;
    width: 55px;
    height: 55px;
    font-size: 1.8rem;
  }
}

/* TELEFON - 480px ve altı */
@media (max-width: 480px) {
  body {
    font-size: 14px;
  }

  /* NAVBAR */
  .nav-container {
    height: 50px;
    padding: 0 15px;
  }

  .logo-icon {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }

  .logo-main {
    font-size: 0.9rem;
    letter-spacing: 0.5px;
  }

  .nav-menu ul {
    padding: 15px;
  }

  /* HERO */
  .hero {
    margin-top: 50px;
    min-height: 70vh;
  }

  .hero-content {
    padding: 20px 15px;
  }

  .hero-text h1 {
    font-size: 1.5rem;
    margin-bottom: 15px;
  }

  .hero-text p {
    font-size: 0.95rem;
    margin-bottom: 20px;
  }

  .hero-blur {
    width: 400px;
    height: 400px;
    top: -100px;
    right: -100px;
  }

  .btn-primary,
  .btn-secondary {
    padding: 10px 20px;
    font-size: 0.9rem;
  }

  /* HERO FEATURES */
  .hero-features {
    grid-template-columns: 1fr;
    margin-top: 20px;
  }

  .feature-box {
    padding: 12px;
  }

  .feature-box i {
    font-size: 1.5rem;
  }

  .feature-box p {
    font-size: 0.9rem;
  }

  /* ABOUT */
  .about-preview {
    padding: 40px 0;
  }

  .about-text h2 {
    font-size: 1.5rem;
  }

  .about-text > p {
    font-size: 0.95rem;
  }

  .list-item {
    gap: 12px;
  }

  .list-item i {
    font-size: 1.1rem;
  }

  .list-item h4 {
    font-size: 0.95rem;
  }

  .list-item p {
    font-size: 0.85rem;
  }

  .stat-card {
    padding: 20px;
  }

  .stat-number {
    font-size: 2rem;
  }

  .stat-text {
    font-size: 0.9rem;
  }

  /* SECTIONS */
  section {
    padding: 40px 0;
  }

  .container {
    padding: 0 15px;
  }

  .section-header h2 {
    font-size: 1.5rem;
    margin-bottom: 30px;
  }

  .section-header p {
    font-size: 0.95rem;
  }

  /* SERVICES */
  .services-grid {
    gap: 20px;
  }

  .service-card {
    padding: 25px;
  }

  .service-icon {
    width: 50px;
    height: 50px;
    font-size: 1.5rem;
  }

  .service-card h3 {
    font-size: 1.1rem;
  }

  .service-card p {
    font-size: 0.9rem;
  }

  /* PRODUCTS */
  .products-grid {
    gap: 20px;
  }

  .product-image {
    height: 180px;
  }

  .product-icon {
    font-size: 3rem;
  }

  .product-info {
    padding: 20px;
  }

  .product-info h3 {
    font-size: 1.1rem;
  }

  .product-specs {
    gap: 10px;
  }

  .product-specs span {
    font-size: 0.8rem;
  }

  /* PROJECTS */
  .project-image {
    height: 200px;
  }

  .project-placeholder {
    font-size: 1.5rem;
  }

  .project-card h3 {
    font-size: 1.1rem;
    margin: 15px 15px 8px;
  }

  .project-card p {
    padding: 0 15px 15px;
    font-size: 0.9rem;
  }

  /* CTA */
  .cta-section {
    padding: 40px 0;
  }

  .cta-section h2 {
    font-size: 1.5rem;
    margin-bottom: 10px;
  }

  .cta-section p {
    font-size: 1rem;
    margin-bottom: 20px;
  }

  /* FOOTER */
  footer {
    padding: 40px 0 15px;
  }

  .footer-grid {
    gap: 20px;
    margin-bottom: 20px;
    padding-bottom: 20px;
  }

  .footer-col h4 {
    font-size: 1rem;
    margin-bottom: 10px;
  }

  .footer-col p {
    font-size: 0.9rem;
  }

  .footer-col a {
    font-size: 0.9rem;
  }

  .footer-bottom {
    font-size: 0.85rem;
  }

  /* WHATSAPP */
  .whatsapp-btn {
    bottom: 15px;
    right: 15px;
    width: 50px;
    height: 50px;
    font-size: 1.5rem;
  }
}

/* LARGE DESKTOP - 1400px üzeri */
@media (min-width: 1400px) {
  .container {
    max-width: 1300px;
  }

  .section-header h2 {
    font-size: 3.2rem;
  }

  .hero-text h1 {
    font-size: 4rem;
  }
}