body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    /* NAVBAR */
    .navbar-brand span {
      font-weight: 700;
      letter-spacing: 1px;
    }

    /* HERO */
    .hero-section {
      background: linear-gradient(to right, rgba(0, 55, 112, 0.9), rgba(0, 145, 210, 0.8)),
        url("images/hero-pvc.jpg") center center / cover no-repeat;
      color: #fff;
      padding: 120px 0 110px;
    }

    .hero-section h1 {
      font-size: 2.7rem;
      font-weight: 700;
    }

    .hero-section p {
      max-width: 550px;
      margin-top: 15px;
      margin-bottom: 25px;
    }

    .btn-main {
      background: #ffb400;
      border-color: #ffb400;
      color: #000;
      font-weight: 600;
    }

    .btn-main:hover {
      background: #e6a200;
      border-color: #e6a200;
      color: #000;
    }

    .hero-badge {
      background: rgba(255, 255, 255, 0.15);
      border-radius: 50px;
      padding: 6px 14px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 0.9rem;
    }

    .hero-icon-box {
      background: rgba(255, 255, 255, 0.1);
      border-radius: 16px;
      padding: 18px;
      margin-top: 30px;
      max-width: 320px;
    }

    /* SECTION HEADERS */
    .section-title {
      text-align: center;
      margin-bottom: 40px;
    }

    .section-title h2 {
      font-weight: 700;
      font-size: 2rem;
    }

    .section-title p {
      color: #777;
      max-width: 650px;
      margin: 0 auto;
      font-size: 0.95rem;
    }

    /* HAKKIMIZDA */
    .about-img {
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
    }

    /* HİZMETLER / ÜRÜNLER */
    .service-card {
      border-radius: 16px;
      border: 1px solid #eee;
      padding: 22px 20px;
      transition: all 0.25s ease;
      height: 100%;
      background: #fff;
    }

    .service-card i {
      font-size: 2rem;
      margin-bottom: 12px;
      color: #0071ba;
    }

    .service-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 14px 30px rgba(0, 0, 0, 0.08);
      border-color: #0071ba20;
    }

    /* AVANTAJLAR */
    .advantage-list i {
      color: #0c9f4f;
      margin-right: 8px;
    }

    /* GALERİ */
    .gallery-item {
      overflow: hidden;
      border-radius: 12px;
      position: relative;
      cursor: pointer;
    }

    .gallery-item img {
      width: 100%;
      height: 220px;
      object-fit: cover;
      transition: transform 0.35s ease;
    }

    .gallery-item:hover img {
      transform: scale(1.05);
    }

    .gallery-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent);
      color: #fff;
      display: flex;
      align-items: end;
      padding: 10px 14px;
      font-size: 0.9rem;
    }

    /* SÜREÇ (NASIL ÇALIŞIYORUZ) */
    .step-item {
      text-align: center;
      padding: 20px 16px;
    }

    .step-circle {
      width: 46px;
      height: 46px;
      border-radius: 50%;
      background: #0071ba;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-weight: 700;
      margin: 0 auto 10px;
    }

    /* SSS */
    .accordion-button:focus {
      box-shadow: none;
    }

    /* İLETİŞİM */
    .contact-card {
      border-radius: 16px;
      border: 1px solid #eee;
      padding: 22px;
      height: 100%;
    }

    /* FOOTER */
    footer {
      background: #02101f;
      color: #fff;
      padding-top: 35px;
      padding-bottom: 15px;
      margin-top: 40px;
    }

    footer a {
      color: #dbe7ff;
      text-decoration: none;
      font-size: 0.95rem;
    }

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

    .footer-bottom {
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      margin-top: 18px;
      padding-top: 10px;
      font-size: 0.85rem;
      color: #b9c7e1;
    }

    @media (max-width: 767.98px) {
      .hero-section {
        padding-top: 90px;
        padding-bottom: 70px;
      }

      .hero-section h1 {
        font-size: 2.1rem;
      }
    }