html, body {
      height: 100%;
    }
    
        *,
        *::before,
        *::after {
          box-sizing: border-box;
        }

        :root {
          --bf-bg: #f3f4f6;
          --bf-bg-alt: #e5e7eb;
          --bf-card: #ffffff;
          --bf-card-soft: #f9fafb;
          --bf-primary: #0b7285;
          --bf-primary-soft: #e0f2fe;
          --bf-accent: #f97316;
          --bf-border: #e5e7eb;
          --bf-text: #111827;
          --bf-muted: #6b7280;
        }

        body {
          margin: 0;
          font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
          background: radial-gradient(circle at top left, #eef2ff, #f9fafb);
          color: var(--bf-text);
          min-height: 100%;
          display: flex;
          flex-direction: column;
        }

        a {
          color: inherit;
          text-decoration: none;
        }

        .bf-container {
          width: 100%;
          max-width: 1120px;
          margin: 0 auto;
          padding: 0 1rem;
        }

        /* HEADER / NAVBAR */

        .bf-header {
          position: sticky;
          top: 0;
          z-index: 50;
          backdrop-filter: blur(10px);
          background: rgba(255, 255, 255, 0.9);
          border-bottom: 1px solid rgba(209, 213, 219, 0.8);
        }

        .bf-header-inner {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0.7rem 0;
        }

        .bf-logo a {
          font-weight: 750;
          font-size: 1.25rem;
          letter-spacing: 0.05em;
          text-transform: uppercase;
          color: var(--bf-primary);
		  padding-left:10px;
        }

        .bf-logo a span {
          opacity: 0.9;
          font-weight: 500;
        }

        .bf-nav {
          display: flex;
          align-items: center;
        }

        .bf-nav a {
          margin-left: 0.75rem;
          font-size: 0.92rem;
          color: #4b5563;
          padding: 0.45rem 0.8rem !important;
          border-radius: 999px;
          transition: background 0.15s ease, color 0.15s ease, transform 0.08s ease,
                      box-shadow 0.12s ease;
        }

        .bf-nav a:hover {
          background: #e5f3ff;
          color: var(--bf-primary);
          box-shadow: 0 6px 12px rgba(15, 23, 42, 0.06);
          transform: translateY(-1px);
        }

        .bf-nav a.active {
          background: linear-gradient(90deg, #0ea5e9, #0b7285);
          color: #ffffff;
          font-weight: 600;
          box-shadow: 0 8px 18px rgba(15, 23, 42, 0.16);
        }

      .bf-nav-toggle {
    display: none;
    margin-left: auto;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    flex-direction: column;   
}


     .bf-nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: #111827;
    margin: 4px 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
}


        .bf-nav-toggle.is-open span:nth-child(1) {
          transform: translateY(6px) rotate(45deg);
        }
        .bf-nav-toggle.is-open span:nth-child(2) {
          opacity: 0;
        }
        .bf-nav-toggle.is-open span:nth-child(3) {
          transform: translateY(-6px) rotate(-45deg);
        }

        
		@media (max-width: 768px) {
  .bf-header-inner {
    align-items: center;
  }

  /* Hamburger mobilde görünsün */
  .bf-nav-toggle {
    display: flex;
  }

  /* Mobil menü paneli */
  .bf-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 60px; /* header yüksekliği, istersen 55–65 arası oynatabilirsin */
    padding: 0.9rem 1.6rem 1.4rem;  /* KENAR BOŞLUKLARI → burayı büyüttük */
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 10px 25px rgba(15,23,42,0.12);
    flex-direction: column;
    align-items: flex-start;
    row-gap: 0.9rem;                /* Menü maddeleri arası mesafe */
    z-index: 40;
  }

  /* Açıkken menü gösterilsin */
  .bf-header.bf-nav-open .bf-nav {
    display: flex;
  }

  /* Linkler alt alta */
  .bf-nav a {
    margin: 0;
    padding: 0.1rem 0;             /* normal linkler için, sade */
  }

  /* Aktif olan “pill” butonun mobil hali */
  .bf-nav a.active {
    padding: 0.45rem 1.1rem;       /* soldan/sağdan nefes aldırdık */
    border-radius: 999px;
    box-shadow: 0 8px 18px rgba(15,23,42,0.18);
  }
}


		
		
       .bf-main {
          padding-bottom: 3rem;
          flex: 1 0 auto; /* Hauptinhalt nimmt den verfügbaren Platz ein */
        }

        /* HERO */

        .bf-hero {
          padding: 2.5rem 0 2rem;
        }

        .bf-hero-inner {
          position: relative;
          border-radius: 1.8rem;
          padding: 2.4rem 1.8rem 2.1rem;
          background:
              radial-gradient(circle at top left, #e0f7ff, #ffffff);
          box-shadow: 
            0 18px 35px rgba(15, 23, 42, 0.12),
            0 0 0 1px rgba(209, 213, 219, 0.6);
        }

        .bf-hero-inner::after {
          content: "";
          position: absolute;
          inset: 0;
          border-radius: inherit;
          border: 1px solid rgba(191, 219, 254, 0.7);
          pointer-events: none;
        }

        .bf-hero h1 {
          margin-top: 0;
          font-size: 2.1rem;
          margin-bottom: 0.75rem;
          letter-spacing: -0.03em;
        }

        .bf-hero-text {
          max-width: 640px;
          font-size: 1rem;
          margin-bottom: 1.3rem;
          color: #374151;
        }

        .bf-hero-badge {
          display: inline-flex;
          align-items: center;
          gap: 0.35rem;
          padding: 0.25rem 0.8rem;
          border-radius: 999px;
          background: rgba(224, 242, 254, 0.95);
          color: #0369a1;
          font-size: 0.82rem;
          margin-bottom: 0.6rem;
        }

        .bf-hero-badge span {
          font-size: 1rem;
        }

        .bf-hero-buttons {
          display: flex;
          flex-wrap: wrap;
          gap: 0.85rem;
          margin-bottom: 0.7rem;
        }

        .bf-hero-small {
          font-size: 0.85rem;
          color: #6b7280;
        }

        /* SECTIONS */

        .bf-section {
          padding: 2rem 0;
        }

         .bf-section-highlight {
          background: linear-gradient(to right, #eef2ff, #eff6ff);
          border-top: 1px solid #e5e7eb;
          border-bottom: 1px solid #e5e7eb;
        }

        .bf-section h2 {
          font-size: 1.35rem;
          margin-top: 0;
          margin-bottom: 0.75rem;
        }

        /* BOXES */

        .bf-boxes-inner {
          display: grid;
          grid-template-columns: 1fr;
          gap: 1rem;
        }

        @media (min-width: 900px) {
          .bf-boxes-inner {
            grid-template-columns: repeat(3, 1fr);
          }
        }

        .bf-box {
          background: #ffffff;
          border-radius: 0.95rem;
          padding: 1.25rem 1.2rem;
          box-shadow:
            0 2px 10px rgba(15, 23, 42, 0.04),
            0 0 0 1px rgba(229, 231, 235, 0.8);
        }

        .bf-box h3 {
          margin-top: 0;
          font-size: 1.08rem;
        }

        .bf-link-more {
          display: inline-flex;
          align-items: center;
          gap: 0.25rem;
          margin-top: 0.5rem;
          font-size: 0.9rem;
          color: #0b7285;
        }

        /* BUTTONS */

        .bf-btn-primary,
        .bf-btn-secondary {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          padding: 0.7rem 1.5rem;
          border-radius: 999px;
          font-weight: 600;
          font-size: 0.95rem;
          border: none;
          cursor: pointer;
          text-align: center;
        }

        .bf-btn-primary {
          background: linear-gradient(135deg, #0ea5e9, #0b7285);
          color: #ffffff;
          box-shadow:
            0 10px 20px rgba(15, 23, 42, 0.25),
            0 0 0 1px rgba(59, 130, 246, 0.3);
        }

        .bf-btn-secondary {
          background: #f9fafb;
          color: #0b7285;
          border: 1px solid rgba(148, 163, 184, 0.9);
        }

        .bf-btn-primary:hover,
        .bf-btn-secondary:hover {
          opacity: 0.96;
          transform: translateY(-1px);
        }

        /* FORM / INPUTS */

        .bf-form {
          max-width: 640px;
          margin-top: 1rem;
          background: #ffffff;
          padding: 1.25rem 1.3rem;
          border-radius: 1.05rem;
          box-shadow:
            0 2px 10px rgba(15, 23, 42, 0.06),
            0 0 0 1px rgba(229, 231, 235, 0.9);
        }

        .bf-field {
          margin-bottom: 0.85rem;
        }

        .bf-field label {
          display: block;
          font-weight: 600;
          margin-bottom: 0.25rem;
          font-size: 0.9rem;
          color: #111827;
        }

        .bf-field input,
        .bf-field select,
        .bf-field textarea {
          width: 100%;
          padding: 0.55rem 0.7rem;
          border-radius: 0.75rem;
          border: 1px solid #d1d5db;
          font-size: 0.95rem;
          font-family: inherit;
          background: #f9fafb;
        }

        .bf-field textarea {
          resize: vertical;
        }

        .bf-row {
          display: block;
        }

        @media (min-width: 720px) {
          .bf-row {
            display: flex;
            gap: 0.8rem;
          }
          .bf-row .bf-field {
            flex: 1;
          }
        }

        /* RESULT / ERROR */

        .bf-result {
          margin-top: 0.9rem;
          padding: 0.8rem 1rem;
          border-radius: 0.9rem;
          background: #ecfdf3;
          border: 1px solid #bbf7d0;
          font-size: 0.9rem;
        }

        .bf-result-number {
          font-weight: 700;
        }

        .bf-hinweis {
          margin-top: 0.4rem;
          font-size: 0.8rem;
          color: #6b7280;
        }

        .bf-error {
          margin-top: 0.7rem;
          padding: 0.7rem 1rem;
          border-radius: 0.9rem;
          background: #fef2f2;
          border: 1px solid #fecaca;
          color: #b91c1c;
          font-size: 0.9rem;
        }

        /* FOOTER */

        .bf-footer {
          background: #0b7285;
          color: #f8fafc;
          padding-top: 1.5rem;
          margin-top: auto;
        }

        .bf-footer-inner {
          display: flex;
          flex-direction: column;
          gap: 0.75rem;
          padding-bottom: 1rem;
        }

        @media (min-width: 720px) {
          .bf-footer-inner {
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
          }
        }

        .bf-footer-links a {
          font-size: 0.85rem;
          margin: 0 0.25rem;
        }

        .bf-footer-bottom {
          background: #075064;
          padding: 0.4rem 0;
        }

        .bf-footer-bottom small {
          font-size: 0.75rem;
          color: #e5e7eb;
        }

        @media (max-width: 640px) {
          .bf-hero-inner {
            padding: 1.9rem 1.3rem 1.7rem;
          }

          .bf-hero h1 {
            font-size: 1.7rem;
          }
        }