* {
      box-sizing: border-box;
    }

    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0;
    }

    body {
      font-family: 'Source Sans Pro', sans-serif;

      background-image:
        linear-gradient(rgba(0, 0, 0, 0.68),
          rgba(0, 0, 0, 0.68)),
         url('../img/log.png') center / cover no-repeat;

      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;

      min-height: 100vh;

      display: flex;
      align-items: center;
      justify-content: center;

      padding: 30px;
    }

    /* =========================================================
       LOGIN CONTAINER
    ========================================================= */

    .fitness-login-wrapper {
      width: 100%;
      max-width: 1180px;

      display: flex;

      border-radius: 18px;

      overflow: hidden;

      box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.45);
    }

		@media (min-width: 768px) and (max-width: 991.98px)
       and (orientation: landscape) {

				body {
						overflow-y: auto;
				}

				.fitness-login-wrapper {
						min-height: 0;
						height: auto;
						margin-block: 12px;
						overflow: hidden;
				}

				/* Kurangi padding konten login */
				.fitness-login-wrapper .login-content {
						padding: 20px 30px;
				}

				/* Judul */
				.fitness-login-wrapper h1 {
						font-size: 26px;
						margin-bottom: 6px;
				}

				/* Deskripsi */
				.fitness-login-wrapper .login-description {
						margin-bottom: 16px;
				}

				/* Input email dan password */
				.fitness-login-wrapper .form-control {
						height: 42px;
				}

				.fitness-login-wrapper .form-group {
						margin-bottom: 12px;
				}

				/* Tombol login */
				.fitness-login-wrapper .btn {
						min-height: 44px;
				}
		}


    /* =========================================================
       LEFT PANEL
    ========================================================= */

    .fitness-brand-panel {
      width: 52%;

      position: relative;

      padding: 55px 55px;

      color: #fff;

      display: flex;
      flex-direction: column;
      justify-content: space-between;

      background:
        linear-gradient(135deg,
          rgba(0, 0, 0, 0.75),
          rgba(0, 0, 0, 0.45)),
        url('../img/log.png') center / cover no-repeat;

      background-size: cover;
      background-position: center;
    }


    .fitness-brand-panel::after {
      content: "";

      position: absolute;

      top: 0;
      left: 0;
      right: 0;
      bottom: 0;

      background:
        linear-gradient(135deg,
          rgba(255, 119, 0, 0.12),
          transparent 45%);

      pointer-events: none;
    }


    .brand-content {
      position: relative;
      z-index: 2;
    }


    /* =========================================================
       LOGO
    ========================================================= */

    .brand-logo {
      width: 82px;
      height: 82px;

      background: #fff;

      border-radius: 18px;

      display: flex;
      align-items: center;
      justify-content: center;

      margin-bottom: 28px;

      box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.25);
    }


    .brand-logo img {
      max-width: 68px;
      max-height: 68px;

      object-fit: contain;
    }


    /* =========================================================
       BRAND TITLE
    ========================================================= */

    .brand-title {
      font-size: 42px;

      font-weight: 700;

      line-height: 1.1;

      margin-bottom: 12px;

      letter-spacing: -0.5px;
    }


    .brand-tagline {
      font-size: 16px;

      font-weight: 600;

      letter-spacing: 4px;

      color: #ff8a00;

      margin-bottom: 25px;
    }


    .brand-description {
      max-width: 470px;

      font-size: 17px;

      line-height: 1.6;

      color: rgba(255, 255, 255, 0.82);
    }


    /* =========================================================
       FEATURES
    ========================================================= */

    .brand-features {
      position: relative;
      z-index: 2;

      display: grid;

      grid-template-columns:
        repeat(3, 1fr);

      gap: 15px;

      margin-top: 40px;
    }


    .brand-feature {
      min-height: 115px;

      padding: 18px 12px;

      border-radius: 14px;

      background: rgba(255, 255, 255, 0.08);

      border: 1px solid rgba(255, 255, 255, 0.12);

      backdrop-filter: blur(8px);

      display: flex;

      flex-direction: column;

      align-items: center;

      justify-content: center;

      text-align: center;

      transition: all 0.2s ease;
    }


    .brand-feature:hover {
      background: rgba(255, 255, 255, 0.14);

      transform: translateY(-3px);
    }


    .brand-feature i {
      font-size: 27px;

      color: #ff8a00;

      margin-bottom: 10px;
    }


    .brand-feature span {
      font-size: 14px;

      font-weight: 600;

      line-height: 1.25;
    }


    /* =========================================================
       LEFT FOOTER
    ========================================================= */

    .brand-footer {
      position: relative;
      z-index: 2;

      color: rgba(255, 255, 255, 0.55);

      font-size: 13px;
    }


    /* =========================================================
       RIGHT LOGIN PANEL
    ========================================================= */

    .fitness-login-panel {
      width: 48%;

      padding: 60px 70px;

      display: flex;

      flex-direction: column;

      justify-content: center;
    }


    .login-header {
      margin-bottom: 38px;
    }


    .login-header h1 {
      font-size: 34px;

      font-weight: 700;

      color: #172033;

      margin: 0 0 8px;
    }


    .login-header p {
      margin: 0;

      color: #7b8495;

      font-size: 16px;
    }


    /* =========================================================
       SESSION MESSAGE
    ========================================================= */

    .login-message {
      margin-bottom: 10px;
    }


    /* =========================================================
       FORM
    ========================================================= */

    .form-group-custom {
      margin-bottom: 22px;
    }


    .form-group-custom label {
      display: block;

      font-size: 14px;

      font-weight: 600;

      color: #283044;

      margin-bottom: 8px;
    }


    .custom-input-group {
      position: relative;
    }


    .custom-input {
      width: 100%;

      height: 45px;

      border: 1px solid #d9dee8;

      border-radius: 10px;

      padding: 0 48px 0 48px;

      font-size: 13px;

      color: #2c3445;

      outline: none;

      transition: all 0.2s ease;

      background: #fff;
    }


    .custom-input:focus {
      border-color: #2188ff;

      box-shadow:
        0 0 0 3px rgba(33, 136, 255, 0.10);
    }


    .custom-input::placeholder {
      color: #a4adba;
    }


    .input-icon {
      position: absolute;

      left: 17px;

      top: 50%;

      transform: translateY(-50%);

      color: #8a94a3;

      font-size: 16px;

      pointer-events: none;
    }


    /* =========================================================
       REMEMBER / FORGOT
    ========================================================= */

    .login-options {
      display: flex;

      align-items: center;

      justify-content: space-between;

      margin-bottom: 20px;
    }


    .remember-wrapper {
      display: flex;

      align-items: center;

      gap: 8px;

      color: #596273;

      font-size: 14px;
    }


    .remember-wrapper input {
      width: 17px;
      height: 17px;

      accent-color: #2188ff;

      cursor: pointer;
    }


    .forgot-password {
      color: #2188ff;

      font-size: 14px;

      font-weight: 600;

      text-decoration: none;
    }


    .forgot-password:hover {
      text-decoration: underline;
    }


    /* =========================================================
       LOGIN BUTTON
    ========================================================= */

    .btn-login {
      width: 100%;

      height: 45px;

      border: none;

      border-radius: 10px;

      background:
        linear-gradient(135deg,
          #1683ff,
          #126ce5);

      color: #fff;

      font-size: 14px;

      font-weight: 600;

      cursor: pointer;

      box-shadow:
        0 8px 20px rgba(22, 131, 255, 0.22);

      transition: all 0.2s ease;
    }


    .btn-login i {
      margin-right: 8px;
    }


    .btn-login:hover {
      transform: translateY(-1px);

      box-shadow:
        0 12px 25px rgba(22, 131, 255, 0.28);
    }


    .btn-login:active {
      transform: translateY(0);
    }


    /* =========================================================
       LOGIN FOOTER
    ========================================================= */

    .login-footer {
      margin-top: 35px;

      padding-top: 22px;

      border-top: 1px solid #edf0f4;

      text-align: center;

      color: #98a1af;

      font-size: 13px;
    }


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

    @media (max-width: 992px) {

      body {
        padding: 20px;
      }


      .fitness-login-wrapper {
        max-width: 760px;
      }


      .fitness-brand-panel {
        display: none;
      }


      .fitness-login-panel {
        width: 100%;

        padding: 55px 70px;
      }
    }

		.member-brand-mobile,
		.member-mobile-footer {
				display: none;
		}

    @media (max-width: 800px) {

      body {
        padding: 0;

        background-position: center;
      }


      .fitness-login-wrapper {
        min-height: 100vh;

        border-radius: 0;

        box-shadow: none;
      }

	.fitness-login-panel {
			width: calc(100% - 30px);
			max-width: 420px;

			height: auto;
			min-height: 0;

			margin: 20px auto;
			padding: 32px 24px 25px;

			background: #ffffff !important;
			border-radius: 25px;

			border: 1px solid rgba(255,255,255,0.8);

			box-shadow: 0 15px 45px rgba(0,0,0,0.16);

			display: flex;
			flex-direction: column;
			justify-content: center;
			box-sizing: border-box;
	}

    /* BRANDING */
    .member-brand-mobile {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;

        margin-bottom: 27px;
    }

    .member-brand-icon {
				width: 150px;
				height: 150px;

				display: flex;
				align-items: center;
				justify-content: center;
		}

		.member-brand-icon img {
				width: 100%;
				height: 100%;
				object-fit: contain;
				padding: 8px;
		}

    .member-brand-name {
			margin-top: -20px;
			color: #172b4d;
			font-size: 19px;
			font-weight: 800;
			letter-spacing: 0.5px;
    }

    .member-brand-name strong {
        color: #1677ed;
    }

    /* HEADER */
    .login-header {
        margin-top: -20px !important;
        text-align: center;
        margin-bottom: 22px;
    }

    .login-header h1 {
        color: #172b4d;
        font-size: 27px;
        font-weight: 800;
        letter-spacing: -0.7px;
        margin-bottom: 5px;
    }

    .login-header p {
        color: #8795aa;
        font-size: 13px;
        line-height: 1.5;
        margin-top: 0 !important;
        margin-bottom: 0;
    }

    /* SESSION MESSAGE */
    .login-message {
        margin-bottom: 10px;
    }

    /* FORM GROUP */
    .form-group-custom {
        margin-top: 15px !important;
        margin-bottom: 0;
    }

      .custom-input-group {
        position: relative;
        display: flex;
        align-items: center;

        height: 58px;
        width: 100%;

        padding: 0;
        overflow: hidden;

        background: #f8faff;
        border: 1px solid #dce5f2;
        border-radius: 14px;

        box-shadow: none;
    }

    /* ICON USER & LOCK */
    .custom-input-group .input-icon {
        position: absolute;
        left: 17px;
        top: 50%;
        transform: translateY(-50%);

        margin: 0;
        padding: 0;

        font-size: 16px;
        color: #8091a8;

        pointer-events: none;
        z-index: 2;
    }

    /* INPUT TEXT */
    .custom-input-group .custom-input {
        position: relative;

        flex: 1;
        width: 100%;
        height: 100%;

        margin: 0;
        padding: 0 48px 0 48px;

        border: none !important;
        outline: none !important;
        box-shadow: none !important;

        background: transparent !important;

        font-size: 13px;
        color: #334155;

        z-index: 1;
    }

    .custom-input-group .custom-input:focus {
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
    }

    /* PASSWORD EYE */
    .password-toggle {
        position: absolute;
        right: 0;
        top: 0;

        height: 100%;
        width: 48px;

        display: flex;
        align-items: center;
        justify-content: center;

        padding: 0;
        margin: 0;

        border: none;
        background: transparent;

        color: #8294aa;
        z-index: 3;
    }

    /* FOCUS INPUT GROUP */
    .custom-input-group:focus-within {
        background: #ffffff;
        border: 1px solid #2684ff;

        box-shadow: 0 0 0 3px rgba(38,132,255,0.10);
    }

    /* PASSWORD TOGGLE */
    .password-toggle {
        border: none;
        background: transparent;

        color: #8294aa;
        font-size: 17px;

        padding: 0 15px;
        cursor: pointer;
        outline: none;
    }

    .password-toggle:focus {
        outline: none;
    }

    /* OPTIONS */
    .login-options {
        margin-top: 17px !important;
        margin-bottom: 22px;

        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    .remember-wrapper {
        font-size: 12px;
        font-weight: 600;
        color: #52627a;
        white-space: nowrap;
    }

    .remember-wrapper input {
        width: 17px;
        height: 17px;
        vertical-align: middle;
        margin-right: 5px;
        accent-color: #1677ed;
    }

    .forgot-password {
        font-size: 12px;
        font-weight: 700;
        white-space: nowrap;
        color: #0878ef;
    }

    /* BUTTON */
    .btn-login {
        width: 100%;
        height: 55px;

        margin-top: -10px !important;

        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;

        border: none;
        border-radius: 14px;

        background: linear-gradient(
            110deg,
            #0797ff,
            #064de5
        );

        color: #ffffff;
        font-size: 15px;
        font-weight: 700;

        box-shadow:
            0 10px 22px rgba(22,119,237,0.25);

        transition: all 0.25s ease;
    }

    .btn-login:active {
        transform: scale(0.98);
    }

    .btn-login:disabled {
        opacity: 0.7;
        cursor: wait;
    }

    /* FOOTER */
    .member-mobile-footer {
        display: block;
        margin-top: 25px;
        text-align: center;
    }

    .member-mobile-footer span {
        display: block;
        width: 100%;
        height: 1px;
        background: #edf1f6;
        margin-bottom: 22px;
    }

    .member-mobile-footer p {
        color: #8798ae;
        font-size: 12px;
        margin: 0;
        font-weight: 500;
        letter-spacing: 0.2px;
    }


      .login-header {
        text-align: center;

        margin-bottom: 32px;
      }


      .login-header h1 {
        font-size: 29px;
      }


      .login-header p {
        font-size: 14px;
      }


      .login-options {
        align-items: flex-start;
      }


      .forgot-password {
        font-size: 13px;
      }
    }

    .fitness-payment-help {
      display: block;
      margin-top: 5px;
      font-family: 'Lucida Sans', sans-serif;
      font-size: 10px;
      color: #8a969d;
    }

    .fitness-cashier-status {
      height: 38px;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 0 12px;
      border: 1px solid #d6dee2;
      border-radius: 7px;
      background: #f3f6f5;
      color: #6c777e;
      font-family: 'Lucida Sans', sans-serif;
      font-size: 12px;
      font-weight: 700;
    }

    .fitness-cashier-status i {
      color: #20a947;
    }

		/* Container alert */
.pesan-wrapper {
    display: grid;
    grid-template-rows: 1fr;
    opacity: 1;
    transition:
        grid-template-rows 0.6s ease,
        opacity 0.5s ease,
        margin 0.6s ease;
}

/* Pembungkus isi alert */
.pesan-inner {
    overflow: hidden;
    min-height: 0;
}

/* Animasi alert menghilang */
.pesan-wrapper.fade-out {
    grid-template-rows: 0fr;
    opacity: 0;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* =====================================
   TABLET & MOBILE BACKGROUND
===================================== */

@media screen and (max-width: 1000px) {

    html,
    body.fitness-login-page {
        min-height: 100%;
    }

    body.fitness-login-page {
        margin: 0;
        min-height: 100vh;

        background:
            linear-gradient(
                135deg,
                rgba(0, 65, 90, 0.45),
                rgba(0, 155, 165, 0.40)
            ),
            url("../img/login-gym-bg.png");

        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: scroll;
    }

    .fitness-login-wrapper {
        min-height: 100vh;
        background: transparent;
    }
}