body {
      background-color: #171929;
      overflow-x: hidden; /* ekstra güvenlik */
      position: relative;
      min-height: 100vh;
    }

    .container {
      position: relative;
      max-width: 500px;
      margin: 0 auto;
      padding-top: 50px;
      text-align: center;
    }

    img, dotlottie-wc {
      max-width: 100%;
      height: auto;
      margin: 0 auto 1rem auto;
      display: block;
    }
    
    .baloo-title {
      font-family: 'Poppins', sans-serif;
      font-weight: 700; /* baya tok durur */
      color: #ffffff;
     }

    /* Hero ve form üst üste */
    .btn {
      padding: 0.7rem 2rem;
      border-radius: 0.85rem;
    }
    
    #hero, #loginForm, #registerForm, #loginMailForm {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
      transition: opacity 0.5s ease, transform 0.5s ease;
    }

    #hero.show { opacity: 1; z-index: 2; }
    #hero.hide { opacity: 0; z-index: 0; pointer-events: none; }

    #loginForm.show, #registerForm.show, #loginMailForm.show { 
      opacity: 1; 
      z-index: 2; 
      pointer-events: auto;
      transform: translateX(-50%) translateY(0);
    }

    #loginForm.hide, #registerForm.hide, #loginMailForm.hide { 
      opacity: 0; 
      z-index: 0; 
      pointer-events: none;
      transform: translateX(-50%) translateY(20px);
    }

    #loginForm, #registerForm, #loginMailForm {
      max-width: 400px;
      margin: 0 auto;
    }
    
    /* E-poçt buton parametri */
    .btn-outline-gray {
      color: #ffffff;
      border: 2px solid #6c757d;
      background-color: transparent;
    }

    .btn-outline-gray:hover {
      background-color: #6c757d;
      color: #ffffff;
    }

    .btn-outline-gray:active,
    .btn-outline-gray:focus {
      background-color: #5a6268;
      border-color: #5a6268;
      color: #ffffff;
      box-shadow: none;
    }

    .back-btn {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.2);
      background: transparent;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 16px;
      color: #ffffff;
    }

    .back-btn:hover {
      background-color: rgba(255,255,255,0.1);
    }

    .back-btn .material-icons {
      font-size: 22px;
    }

    /* FORM ELEMANLARI */
    .form-control,
    .form-select,
    textarea {
      padding: 0.7rem 1rem;
      border-radius: 0.85rem;
    }

    /* FOCUS DURUMU */
    .form-control:focus,
    .form-select:focus,
    textarea:focus {
      border-color: #0d6efd;
      box-shadow: 0 0 0 0.15rem rgba(13, 110, 253, 0.25);
    }