/* Yapım aşaması görünümü – login */
.page-placeholder .badge.bg-warning-subtle {
  background: #fff7e6 !important;
  border: 1px solid #ffe0a3;
}

.page-placeholder .card {
  border-radius: 1rem;
}

.skeleton-line {
  height: 10px;
  width: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, #eceff3 25%, #f5f7fa 37%, #eceff3 63%);
  background-size: 400% 100%;
  animation: shimmer 1.2s infinite linear;
}
.skeleton-line.w-75 { width: 75%; }
.skeleton-line.w-50 { width: 50%; }

@keyframes shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

@media (min-width: 1025px) {
html,body { height:100%; margin:0; background:#1a202c;}
        body { min-height:100vh;}
        .login-bg-blur {
            position: fixed; z-index: 1; left: 0; top: 0; width: 100vw; height: 100vh;
            background: url('../../img/admin/eticaret-bg.gif') center center / cover no-repeat;
            filter: blur(3px) brightness(.8);
            animation: bgmove 16s infinite linear alternate;
        }
        @keyframes bgmove {
            0% { background-position: 55% 0%; }
            100% { background-position: 45% 100%; }
        }
        .login-main-container {
            position:relative; z-index:2;
            min-height:100vh;
            display:flex; align-items:center; justify-content:center;
        }
        .login-card {
            display: flex;
            width: 84%;
            max-width: 98vw;
            background: rgba(255, 255, 255, 0.99);
            border-radius: 2.1rem;
            box-shadow: 0 8px 32px 0 rgba(32, 38, 46, 0.22);
            overflow: hidden;
            margin: 40px 0;
        }
        .form-floating > label > i { color: #188abe; font-size:1.12em; vertical-align:middle; }
        .form-control:focus ~ label { color: #188abe !important; }
        #toggleMemberPass { cursor: pointer; }

        .login-left {
            flex: 1.1;
            background: linear-gradient(160deg,#f7fafc 75%,#ffede7 100%);
            padding: 46px 32px 44px 48px;
            display: flex; flex-direction: column; justify-content: center;
            border-right:1px solid #f3f3f3;
            min-width: 340px;
        }
        .login-left .logo { max-width: 170px; margin-bottom: 32px; }
        .login-left h2 { font-size: 2.18rem; font-weight: 800; margin-bottom: 9px; color:#009688;}
        .login-slogan {
            font-size: 15px;
            color: #37343f;
            margin-bottom: 18px;
            font-weight: 500;
        }
        .login-features {
            margin: 8px 0 17px 0;
            padding: 0; display: flex; flex-wrap:wrap; gap: 11px;
        }
        .login-feature {
            background:#fff; color:#009688; border-radius:10px; padding:7px 13px; font-size:.99rem;
            box-shadow:0 2px 10px 0 rgba(228,58,62,0.06);
            display: flex; align-items: center; font-weight: 500; gap:7px;
        }
        .login-feature i {font-size:1.2em;}
        .login-testimonials {
            margin-top: 6px;
            padding-bottom: 5px;
            display: flex;
            gap: 19px;
            overflow-x: hidden;
            scroll-behavior: smooth;
            scrollbar-width: thin;
            scrollbar-color: #eee #fff;
        }
        .login-testimonial-card {
            background: #fff;
            border-radius: 1.3rem;
            box-shadow: 0 3px 13px 0 rgba(48, 48, 60, 0.09);
            padding: 14px 17px 13px 14px;
            min-width: 300px;
            max-width: 305px;
            flex: 0 0 auto;
            display: flex;
            flex-direction: column;
            gap: 3px;
            border: 1.5px solid #f5f5f8;
        }
        .login-testimonial-card img {
            width:34px; height:34px; border-radius:50%; margin-right:10px;
            background: #f4f4f4;
        }
        .login-testimonial-card .name { font-weight: 600; font-size: 1.05rem;}
        .login-testimonial-card .role { font-size: 0.97rem; color: #8d8c8c; margin-bottom:2px;}
        .login-testimonial-card .stars { color: #ffc107; font-size: 1.18em;}
        .login-testimonial-card .desc { font-size: 0.99rem; margin-top:4px; color:#32324d;}
        .login-right {
            flex: 1;
            background: #fff;
            display: flex; align-items: center; justify-content: center;
            padding: 58px 40px 58px 38px;
        }
        .login-subtitle {
            font-size: 1.05rem;
            color: #888a92;
            margin-bottom: 13px;
            margin-top: -6px;
            letter-spacing: .01em;
            font-weight: 400;
        }
        
        .login-form-box {
            width: 100%;
            max-width: 86%;
        }
        .login-form-box h3 {
            font-size: 1.72rem; font-weight: 700; margin-bottom: 21px; color: #2b253d; letter-spacing: -1px;
        }
        .input-group { position:relative; margin-bottom:25px;}
        .float-label {
            position: absolute;
            left: 17px;
            top: 18px;
            color: #888;
            font-size: 1.03rem;
            background: transparent;
            padding: 0 3px;
            transition: all .22s cubic-bezier(.36,2,.42,.94);
            pointer-events: none;
        }
        .login-form-box input {
            width: 100%;
            padding: 16px 15px 14px 15px;
            border-radius: 0.9rem;
            border: 1.4px solid #dedede;
            font-size: 1.11rem;
            background: #f7fafc;
            transition: border-color 0.2s;
        }
        .login-form-box input:focus { border-color:#c21a20;}
        .login-form-box input:not(:placeholder-shown) + .float-label,
        .login-form-box input:focus + .float-label { top:-14px; left:10px; font-size:.99rem; background:#fff; color:#009688;}
        .login-form-box .input-error { color:#c21a20; font-size:0.99rem; margin-bottom:4px; margin-top:-6px;}
        .login-form-box .input-success { color:#36b37e; font-size:0.98rem; margin-bottom:8px; margin-top:-5px;}
        .login-form-box .welcome-info { font-size:1.04rem; color:#36b37e; font-weight:500; margin-bottom:16px;
            display:flex; align-items:center; gap:8px;}
        .login-form-box .profile-thumb { width:38px; height:38px; border-radius:50%; object-fit:cover; margin-right:9px;}
        .login-form-box .user-role-label { display:inline-block; background:#ffe5e5; color:#009688; font-size:0.91rem; padding:1px 8px; border-radius:7px; margin-left:5px;}
        .login-form-box .form-action-btn {
            width: 100%;
            padding: 13px 0;
            font-size: 1.15rem;
            border-radius: 0.7rem;
            border: none;
            background: #009688;
            color: #fff;
            font-weight: 600;
            margin-top: 6px;
            margin-bottom: 13px;
            transition: background 0.19s;
        }
        .login-form-box .form-action-btn:active, .login-form-box .form-action-btn:hover { background: #009688;}
        .login-form-box .divider { display: flex; align-items: center; text-align: center; margin: 18px 0;}
        .login-form-box .divider::before, .login-form-box .divider::after {
            content: ''; flex: 1; border-bottom: 1.1px solid #ececec;
        }
        .login-form-box .divider:not(:empty)::before { margin-right: .8em; }
        .login-form-box .divider:not(:empty)::after { margin-left: .8em; }
        .login-form-box .social-login-btn {
            width: 100%; padding: 12px 0; font-size: 1.09rem; border-radius: 0.7rem;
            border: 1.3px solid #e6e7ea; background: #f8f9fa; color: #333;
            margin-bottom: 11px; font-weight: 600;
            display: flex; align-items: center; justify-content: center; gap: 12px;
            transition: background 0.18s, color 0.18s;
        }
        .login-form-box .social-login-btn:hover { background: #ececec; color: #222;}
        .login-form-box .social-login-btn i { font-size:1.2em;}
        .login-form-box .login-extra-links {
            margin-top:7px; font-size:1.02rem; color:#8b8b8b;
            display:flex; justify-content:space-between; align-items: center;
        }
        .login-form-box .login-extra-links a { color:#009688;  font-weight: 500;}
        .login-form-box .login-extra-links label { cursor:pointer;}
        .input-group { position:relative; margin-bottom:27px; }
        .show-password {
            position: absolute; right:17px; top:19px; font-size:1.19rem; color:#a8a8a8; cursor:pointer; z-index:8;
            transition: color .18s;
        }
        .show-password:active, .show-password:focus { color:#c21a20; outline:none; }
        .input-group input[type=password] { padding-right:44px; }
        .input-info {
            font-size: 15px;
            color: #c21a20;
            min-height: 22px;
            font-weight: 600;
        }
        .input-success { color:#36b37e; }
        input#keepLogged {
            width: auto !important;
        }
        @media (max-width: 780px) {
            .login-card { flex-direction: column; width: 98vw; min-width:unset; }
            .login-left, .login-right { padding: 24px 14px; }
            .login-left { align-items: center; text-align: center; min-width:unset;}
        }

        .modal-2fa {
            position: fixed; z-index: 3000; inset: 0;
            display: flex; align-items: center; justify-content: center;
            background: rgba(30,40,50,0.21); backdrop-filter: blur(3px);
        }
        
        .modal2fa-content {
            position: relative;
            background: #fff;
            border-radius: 20px;
            min-width: 78%;
            max-width: 90%;
            padding: 36px 32px 28px 32px;
            box-shadow: 0 16px 44px rgba(0, 0, 0, .12);
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .fa-choice-cards {
            display: flex; flex-wrap: wrap; gap: 22px; margin-top: 14px; margin-bottom: 8px;
            justify-content: center;
        }
        
        .fa-card {
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            width: 120px; height: 120px;
            background: #f5fafd;
            border: 2px solid #e3e8ef;
            border-radius: 15px;
            box-shadow: 0 4px 16px rgba(0,20,60,0.09);
            cursor: pointer;
            transition: all .18s cubic-bezier(.4,1,.5,1.1);
            font-weight: 500; font-size: 1.08rem; color: #154578;
            position: relative;
        }
        .fa-card:hover:not(.fa-disabled) {
            background: #e6f7ff;
            border-color: #17a2b8;
            box-shadow: 0 8px 28px rgba(30,180,255,.14);
            transform: translateY(-4px) scale(1.04);
        }
        
        .fa-card .fa-label {
            margin-top: 12px;
        }
        
        .fa-card.fa-disabled {
            opacity: .5;
            cursor: not-allowed;
            pointer-events: none;
            background: #f7f7fa;
            border-color: #efefef;
        }
        .fa-card .fa-tooltip {
            position: absolute;
            bottom: 7px;
            left: 50%; transform: translateX(-50%);
            background: #263048; color: #fff;
            font-size: 0.97rem;
            padding: 3px 9px;
            border-radius: 8px;
            opacity: 0; pointer-events: none;
            transition: opacity .15s;
            white-space: nowrap;
            z-index: 10;
        }
        .fa-card.fa-disabled:hover .fa-tooltip {
            opacity: 1;
        }
        
        .modal2fa-close {
            position: absolute; top: 13px; right: 16px;
            background: none; border: none;
            font-size: 2rem; color: #888; cursor: pointer;
            opacity: .44; transition: opacity .18s;
        }
        .modal2fa-close:hover { opacity: .96; }
        .fa2-error { color: #dc3545; font-size: 1rem; margin-top: 12px; text-align:center; }
        .fa-card {
            width: 230px;
            background: #fff;
            border-radius: 16px;
            box-shadow: 0 4px 24px #0001;
            margin: 20px 16px 10px 0;
            display: inline-block;
            vertical-align: top;
            padding: 20px 18px 14px 18px;
            transition: all .17s;
            position: relative;
            min-height: 260px;
        }
        .fa-card.fa-disabled {
            opacity: 0.5;
            pointer-events: none;
            filter: grayscale(0.2);
        }
        .fa-label {
            margin-top: 7px;
            font-size: 1.09em;
            text-align: center;
        }
        .fa-desc {
            font-size: .98em;
            color: #666;
            text-align: center;
            margin-top: 4px;
        }
        .fa-tooltip {
            margin-top: 10px;
            font-size: .96em;
            text-align: center;
        }
        #faChoiceCards {
            display: flex;
            flex-wrap: wrap;
            gap: 18px;
            justify-content: center;
        }
        
        .fa-card {
            width: 230px;
            background: #fff;
            border-radius: 16px;
            box-shadow: 0 4px 24px #0001;
            margin: 18px 14px 0 0;
            display: inline-block;
            vertical-align: top;
            padding: 20px 18px 14px 18px;
            transition: all .17s;
            position: relative;
            min-height: 260px;
            text-align: center;
        }
        .fa-card.fa-disabled {
            opacity: 0.54;
            pointer-events: none;
            filter: grayscale(0.2);
        }
        .fa-label {
            margin-top: 7px;
            font-size: 1.09em;
            text-align: center;
        }
        .fa-desc {
            font-size: .98em;
            color: #666;
            text-align: center;
            margin-top: 4px;
        }
        .fa-tooltip {
            margin-top: 10px;
            font-size: .96em;
            text-align: center;
        }
        

        .modal-2fa {
          display:none; position:fixed; z-index:2000; left:0; top:0; width:100vw; height:100vh;
          background:rgba(20,28,40,0.66); align-items:center; justify-content:center;
        }
        .modal-2fa-content {
            background: linear-gradient(135deg, #fff 77%, #f6f8fc 100%);
            border-radius: 24px;
            max-width: 96vw;
            width: 28%;
            box-shadow: 0 8px 64px #0004, 0 2px 12px #0001;
            padding: 34px 30px 24px 30px;
            position: relative;
            animation: fadeInUp .44s cubic-bezier(.4,1.5,.7,1) both;
            border: 1px solid #d2e3f5;
        }
        @keyframes fadeInUp { from{ opacity:.0; transform:translateY(44px) scale(.98);} to{opacity:1;transform:none;} }
        .modal-2fa-close {
          background:none; border:none; color:#b1b1b1; font-size:1.7em; position:absolute; top:13px; right:18px;
          transition:color .18s; cursor:pointer; opacity:.82;
        }
        .modal-2fa-close:hover { color:#c51d1d; opacity:1; }
        .modal-2fa-content h3 {
          font-weight:700; color:#1c3e61; font-size:1.19em; margin-bottom:10px; text-align:center;
          letter-spacing:.2px;
        }
        .modal-2fa-content > div, .modal-2fa-content label { color:#28303e; font-size:1em; text-align:center; }
        .code-inputs-6 {
          display:flex; gap:10px; justify-content:center; margin:18px 0 0 0; user-select:none;
        }
        .code-inputs-6 input {
            width: 58px;
            height: 58px;
            background: #f6f8fc;
            border: 2px solid #e2e9f6;
            border-radius: 14px;
            text-align: center;
            font-size: 2em;
            font-weight: 700;
            color: #215;
            outline: none;
            transition: .13s;
            box-shadow: 0 1px 3px #0001;
            caret-color: #2a90ea;
        }
        .code-inputs-6 input:focus { background:#e8f0fe; border-color:#42a6ff; color:#125; }
        .code-inputs-6 input[disabled] { background:#f5f5f5; color:#aaa; opacity:.62; }
        #sms_error, #pin_error, #otp_error, #email_error {
          min-height:22px; margin:7px 0 0 0; color:#c23; font-size:1em; font-weight:500; text-align:center;
        }
        .modal-2fa-content button[type="button"], .modal-2fa-content button:not(.modal-2fa-close) {
          margin-top:15px; width:100%; background:linear-gradient(91deg,#1c79f2 60%,#0fcfb5 100%);
          color:#fff; font-size:1.09em; font-weight:600; border:none; border-radius:10px;
          box-shadow:0 1px 10px #31a0b51b; padding:12px 0; transition:.18s; cursor:pointer;
          letter-spacing:.2px;
        }
        .modal-2fa-content button[type="button"]:hover, .modal-2fa-content button:not(.modal-2fa-close):hover {
          filter:brightness(1.12) saturate(1.1);
          box-shadow:0 3px 20px #31a0b544;
        }
        .code-resend-wrap {
          margin-top:12px; text-align:center; font-size:.99em; color:#1d4f68; user-select:none;
        }
        .resend-btn {
          display:inline-block; background:none; color:#1894e6; border:none; font-weight:600; cursor:pointer; font-size:1em; 
          padding:0; text-decoration:underline; border-radius:5px; transition:.13s;
        }
        .resend-btn:disabled {
          color:#b8bac1 !important; background:none; cursor:not-allowed; opacity:.7;
          text-decoration:none;
        }
        @media (max-width:430px) {
          .modal-2fa-content {padding:22px 5vw 15px 5vw;}
          .code-inputs-6 input {width:35px; height:42px; font-size:1.33em;}
        }

        span#emailResendCountdown {
            position: relative;
            top: 10px;
        }
.show-password {
    user-select: none;
    transition: color .15s;
}
.show-password:active,
.show-password:focus {
    color: #2196f3;
    outline: none;
}
.input-group input:focus + .float-label, .input-group input:not(:placeholder-shown) + .float-label {
    top: -14px;
    left: 22px;
    font-size: .97em;
    color: #000000;
}

/* ==== Şifre Sıfırlama MODAL (Blur/Orta) ==== */
.forgot-password-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(30,40,55,0.57);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    justify-content: center;
    align-items: center;
    padding: 38px 14px;
    box-sizing: border-box;
    overflow-y: auto;
    animation: fpFadeIn 0.25s;
  }
  @keyframes fpFadeIn {
    0% { opacity: 0; transform: scale(0.96);}
    100% { opacity: 1; transform: scale(1);}
  }
  .forgot-password-modal-content {
    background: #fff;
    max-width: 60%;
    width: 100%;
    border-radius: 22px;
    box-shadow: 0 12px 70px rgba(40, 50, 70, 0.20);
    padding: 46px 36px 36px 36px;
    position: relative;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #34495e;
    max-height: 90vh;
    overflow-y: auto;
    transition: box-shadow .2s;
}
  
  /* Kapatma Butonu */
  .forgot-password-close-btn {
    position: absolute;
    top: 17px;
    right: 17px;
    border: none;
    background: none;
    font-size: 2.1rem;
    color: #aaa;
    cursor: pointer;
    transition: color 0.2s;
    z-index: 5;
  }
  .forgot-password-close-btn:hover { color: #e74c3c; }
  
  /* Başlık ve Metin */
  .forgot-password-title {
    font-weight: 700;
    font-size: 2.1rem;
    margin-bottom: 26px;
    text-align: center;
    color: #1c3e61;
    letter-spacing: 0.01em;
  }
  .forgot-password-info {
    font-size: 1.11rem;
    line-height: 1.7;
    margin-bottom: 40px;
    text-align: center;
    color: #546376;
  }
  
  /* Bilgi Kartları */
  .forgot-password-info-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 17px 22px;
    justify-content: center;
    margin-bottom: 45px;
  }
  .info-card {
    flex: 1 1 160px;
    background: #f7fafd;
    border-radius: 13px;
    padding: 18px 13px 17px 15px;
    box-shadow: 0 2px 14px rgba(41,128,185,0.06);
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 160px;
    max-width: 210px;
    border: 1.5px solid #e9eaf0;
  }
  .info-card i {
    font-size: 1.65rem;
    flex-shrink: 0;
  }
  .info-card-blue   { background:#f0f7ff;  border-color:#d3e7fc;}
  .info-card-blue i { color:#2980b9; }
  .info-card-yellow   { background:#fff7e6; border-color:#fbe8bc;}
  .info-card-yellow i { color:#f39c12; }
  .info-card-green   { background:#e8f6f3; border-color:#c3edea;}
  .info-card-green i { color:#16a085;}
  .info-card-purple   { background:#f9e8f7; border-color:#f1c2eb;}
  .info-card-purple i { color:#b86fa7;}
  
  .info-card h3 {
    margin: 0 0 3px 0;
    font-size: 1.07rem;
    color: #2b4267;
    font-weight: 700;
    letter-spacing: 0.01em;
  }
  .info-card p {
    margin: 0;
    font-size: 0.92rem;
    color: #698095;
    line-height: 1.35;
  }
  
  /* Input ve Label */
  .forgot-password-label {
    display: block;
    font-weight: 700;
    margin-bottom: 9px;
    font-size: 1.16rem;
    color: #283a53;
    letter-spacing: 0.01em;
  }
  .forgot-password-input {
    width: 100%;
    padding: 15px 16px;
    font-size: 1.14rem;
    border: 2px solid #b9c8d6;
    border-radius: 12px;
    outline: none;
    transition: border-color 0.25s;
    margin-bottom: 7px;
    box-sizing: border-box;
    color: #34495e;
    background: #fafdff;
  }
  .forgot-password-input:focus {
    border-color: #2980b9;
    background: #f4faff;
  }
  
  /* Hata mesajı */
  .forgot-password-error-msg {
    min-height: 27px;
    color: #e74c3c;
    font-weight: 700;
    text-align: center;
    font-size: 1rem;
  }
  
  /* Kullanıcı Bilgileri */
  .fp-user-info {
    display: flex;
    align-items: center;
    gap: 22px;
    margin: 28px 0 14px 0;
    padding: 20px 15px 17px 10px;
    border-radius: 11px;
    background: #f5fafd;
    box-shadow: 0 1px 8px rgba(44,62,80,0.06);
    border: 1.3px solid #e4eef6;
    animation: fpFadeIn .45s;
  }
  .fp-user-info-avatar img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #d2e3fa;
    box-shadow: 0 2px 8px #b8d3fc40;
  }
  .fp-user-info-data {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .fp-user-name, .fp-user-mask {
    font-size: 14px;
    color: #324967;
    display: flex;
    align-items: center;
    gap: 7px;
    font-weight: 500;
}
div#fp_reset_methods {
    background: #f5f5f5;
    margin-bottom: 50px !important;
    padding: 35px;
}
  .fp-user-mask i { color:#7a93b8; }
  .fp-user-name i { color:#3571cc; }
  
  .fp-user-meta {
    position: absolute;
    right: 5%;
}
  /* Şifre Kutusu & Toggle */
  .fp-float-input {
    position: relative;
  }
  .fp-float-input input {
    width: 100%;
    padding-right: 46px;
  }
  .fp-pass-toggle {
    position: absolute;
    top: 7px;
    right: 12px;
    background: none;
    border: none;
    font-size: 1.21em;
    color: #b7bfcf;
    cursor: pointer;
    transition: color 0.2s;
    padding: 2px 5px;
  }
  .fp-pass-toggle:hover { color: #4479be; }
  
  /* Eski Şifre Durum Mesajı */
  .fp-pass-check-msg {
    margin: 7px 0 2px 0;
    font-size: 1rem;
    font-weight: 600;
    color: #176a00;
    min-height: 18px;
  }
  .fp-pass-check-msg.fp-warn { color: #e67e22;}
  .fp-pass-check-msg.fp-err { color: #c0392b;}
  div#fp_step_oldpass {
    padding: 41px 0px;
}
  /* Yöntem Kartları */
  .fp-method-cards {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 10px 0px 10px;
}
  .fp-method-card {
    flex: 1 1 130px;
    background: #f6f8fa;
    border-radius: 10px;
    padding: 21px 0 17px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    border: 2.5px solid #eaeef4;
    box-shadow: 0 2px 10px rgba(44,62,80,0.04);
    font-size: 1.09rem;
    font-weight: 600;
    color: #29549e;
    transition: border-color 0.2s, box-shadow 0.15s, color 0.17s, background 0.13s;
    min-width: 125px;
    max-width: 170px;
    position: relative;
    user-select: none;
  }
  .fp-method-card i { font-size: 2.0em; margin-bottom: 3px;}
  .fp-method-card.selected, .fp-method-card:hover {
    border-color: #2980b9;
    color: #2980b9;
    background: #f0f7ff;
    box-shadow: 0 4px 14px #1a70b015;
  }
  
  /* Kod Giriş Alanı */
  .fp-code-area {
    background: #f8fafd;
    border: 1.3px solid #e6ecf2;
    border-radius: 13px;
    padding: 28px 14px 22px 14px;
    text-align: center;
    box-shadow: 0 2px 12px #b2cef71a;
  }
  .fp-code-title {
    font-size: 1.13rem;
    font-weight: 600;
    color: #346091;
    margin-bottom: 17px;
    text-align: center;
}
  .fp-code-inputs {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 87px;
    border: 1px dashed #e5e5e5;
    width: 63%;
    justify-self: center;
    margin-bottom: 50px;
    margin-top: 40px;
}
.fp-code-digit {
    width: 59px;
    height: 59px;
    text-align: center;
    font-size: 2rem;
    font-family: 'Segoe UI Mono', monospace;
    border-radius: 9px;
    border: 2.2px solid #b7c9da;
    background: #fff;
    color: #2c476a;
    outline: none;
    transition: border-color .18s;
    box-shadow: 0 1px 4px #c3d8fd19;
}
  .fp-code-digit:focus {
    border-color: #16a085;
    background: #f8fafd;
  }
  .fp-code-verify-btn,
  .fp-code-resend-btn {
    display: inline-block;
    margin: 0 5px 0 0;
    padding: 10px 22px;
    background: #2980b9;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1.09rem;
    cursor: pointer;
    transition: background 0.2s;
  }
  .fp-code-verify-btn:hover { background: #2575a6;}
  .fp-code-resend-btn {
    background: #e5e8ea;
    color: #35517b;
    font-weight: 500;
  }
  .fp-code-resend-btn:hover { background: #dde2e8; }
  .fp-code-result {
    margin-top: 20px;
    font-size: 1.02rem;
    min-height: 18px;
    color: #FF5722;
}
div#fp_step_header {
    position: absolute;
    top: 18px;
    left: 19px;
}
  /* Yeni Şifre Girişi */
  .fp-newpass-submit-btn {
    display: block;
    width: 100%;
    margin: 0px 0 0 0;
    padding: 13px 0;
    background: #1c3e61;
    color: #fff;
    border: none;
    border-radius: 9px;
    font-size: 1.15rem;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.03em;
    transition: background 0.19s;
  }
  .fp-newpass-submit-btn:hover {
    background: #20518e;
  }
  #fp_newpass_result {
    margin-top: 12px;
    font-size: 1.02rem;
    min-height: 18px;
    color: #FF5722;
}
  .fp-newpass-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }
  
  /* Başarı Mesajı */
  #fp_step_success {
    text-align: center;
    animation: fpFadeIn .4s;
  }
  .fp-success-icon {
    font-size: 4rem;
    color: #21ad49;
    margin-bottom: 16px;
    animation: fpSuccessPop .48s;
  }
  @keyframes fpSuccessPop {
    0% { transform: scale(0.7); opacity:0;}
    65% { transform: scale(1.18);}
    100% { transform: scale(1); opacity:1;}
  }
  .fp-success-msg {
    font-size: 1.24rem;
    color: #224b1b;
    font-weight: 700;
    line-height: 1.48;
  }
  
  /* RESPONSIVE */
  @media (max-width: 880px) {
    .forgot-password-modal-content {
      max-width: 98vw;
      padding: 24px 10px 26px 10px;
    }
    .forgot-password-info-cards,
    .fp-method-cards {
      flex-direction: column;
      gap: 12px;
      align-items: stretch;
    }
    .info-card, .fp-method-card { max-width: none; min-width: 0;}
    .fp-user-info { flex-direction: column; gap: 13px; padding: 16px 5px;}
  }
  
  @media (max-width: 530px) {
    .forgot-password-modal-content {
      padding: 12px 2vw 20px 2vw;
      max-width: 100vw;
    }
    .fp-code-digit {
      width: 30px;
      height: 40px;
      font-size: 1.35rem;
    }
  }
  .fp-float-group {
    position: relative;
    margin-bottom: 0px;
    width: 100%;
    max-width: 420px;
    margin-top: 25px;
}
  
.fp-float-input {
    width: 100%;
    font-size: 1.11rem;
    padding: 28px 42px 17px 20px;
    border: 1.5px solid #ccd6f6;
    border-radius: 9px;
    background: #f8fbff;
    transition: border .23s, box-shadow .23s;
    outline: none;
    font-family: inherit;
    color: #1a274c;
    box-sizing: border-box;
    margin-bottom: 30px;
}
  
  .fp-float-input:focus {
    border-color: #306aff;
    background: #fff;
    box-shadow: 0 2px 8px #1a6eff15;
  }
  
  .fp-float-label {
    position: absolute;
    left: 13px;
    top: 17px;
    font-size: 1.03em;
    color: #6372b0;
    pointer-events: none;
    transition: 0.15s cubic-bezier(.4,0,.2,1);
    background: transparent;
    font-weight: 500;
    display: flex;
    align-items: center;
  }
  
  .fp-float-input:focus + .fp-float-label,
  .fp-float-input:not(:placeholder-shown) + .fp-float-label {
    top: -13px;
    left: 4px;
    font-size: .97em;
    color: #2152c4;
    background: #f8fbff;
    padding: 0 6px;
    border-radius: 4px;
  }
  
  .fp-pass-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    outline: none;
    background: none;
    font-size: 1.21em;
    color: #8697c4;
    padding: 0;
    margin: 0;
    cursor: pointer;
    transition: color .18s;
  }
  
  .fp-pass-toggle:hover {
    color: #2748a4;
  }
  
  .fp-pass-check-msg {
    font-size: .98em;
    color: #c92a2a;
    margin-top: 7px;
    font-weight: 500;
    min-height: 20px;
    padding-left: 2px;
    letter-spacing: .01em;
  }
  div#loginExtraLinks {
    margin-bottom: 5px;
}

.fp-stepper {
    display: flex;
    gap: 6px;
    margin-bottom: 50px;
    justify-content: center;
    position: relative;
    margin-top: 26px;
    top: 20px;
}
  .fp-stepper-step {
    background: #eaf2fa; color: #347dff; padding: 6px 15px 6px 8px;
    border-radius: 22px; font-weight: 500; font-size: .97em;
    display: flex; align-items: center; opacity:.7; transition:.2s;
  }
  .fp-stepper-step.active, .fp-stepper-step[data-step].active {
    background: #347dff; color: #fff; opacity:1;
  }
  .fp-stepper-step span {
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff; color: #347dff; border-radius: 50%; width: 24px; height: 24px; margin-right:8px; font-weight: 700; font-size:1em;
  }
  .fp-step-header { margin-bottom: 22px; }
  .fp-step-header-title { font-size:1.14em; font-weight:600; margin-bottom:5px; display:flex; align-items:center; gap:10px; color:#274472;}
  .fp-step-header-desc { font-size:.99em; color:#577199;}
  .fp-input-tip { margin: 10px 0 6px 0; color: #888; font-size:.97em; display: flex; align-items: center; gap:5px;}
  .fp-step-actions {
    margin-top: 18px;
    text-align: right;
    display: flex;
    gap: 12px;
    float: right;
}
  .fp-step-next-btn, .fp-step-prev-btn, .fp-newpass-submit-btn, .fp-code-verify-btn, .fp-code-resend-btn {
    border:0; background:#347dff; color:#fff; border-radius:6px; padding:7px 19px; font-weight:500; cursor:pointer; font-size:.99em;
    transition:.15s; outline:0;
  }
  .fp-step-prev-btn { background:#dee7f6; color:#3d5787; }
  .fp-step-next-btn:disabled, .fp-newpass-submit-btn:disabled, .fp-code-verify-btn:disabled { opacity:0.7; cursor:not-allowed; }
  .fp-pass-toggle { border:none; background:transparent; margin-left:-34px; cursor:pointer; color:#8ab6ff; font-size:1.13em;}
  /* ... Diğer görseller için kendi css dosyana ekleyebilirsin */


  .fp-step-title {
    font-size: 1.18em;
    font-weight: 600;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #24487a;
  }
  .fp-step-icon {
    color: #2564ef;
    font-size: 1.2em;
  }
  .fp-step-desc {
    font-size: 1.04em;
    color: #4b5b6b;
    margin-bottom: 18px;
    margin-top: -2px;
  }
  
  .fp-float-label-modern {
    position: relative;
    margin-bottom: 10px;
    width: 100%;
  }
  .fp-float-label-input {
    width: 100%;
    padding: 18px 44px 12px 16px;
    border: 1.5px solid #c7d3ea;
    border-radius: 9px;
    outline: none;
    font-size: 1.07em;
    background: #f9fbff;
    transition: border-color 0.2s;
    box-shadow: 0 2px 8px #1744840a;
  }
  .fp-float-label-modern input:focus {
    border-color: #3777fc;
    background: #f3f7ff;
  }
  .fp-float-label {
    position: absolute;
    left: 16px;
    top: 17px;
    color: #7a93b6;
    font-size: 1.03em;
    pointer-events: none;
    background: transparent;
    transition: 0.18s cubic-bezier(.7,.2,.2,1) all;
    padding: 0 6px;
    z-index: 3;
  }
  .fp-float-label-input:focus + .fp-float-label,
  .fp-float-label-input:not(:placeholder-shown) + .fp-float-label {
    top: -12px;
    left: 12px;
    background: #fff;
    color: #285fcf;
    font-size: .98em;
    padding: 0 6px;
    border-radius: 8px;
    font-weight: 600;
    box-shadow: 0 1px 6px #3777fc0d;
  }
  .fp-float-label i {
    margin-right: 5px;
    color: #4185fa;
    transition: color 0.18s;
  }
  .fp-float-label-input:focus + .fp-float-label i {
    color: #2046a5;
  }

  .fp-pass-toggle:hover {
    color: #3777fc;
  }
  .fp-float-underline {
    content: "";
    position: absolute;
    left: 18px; right: 18px; bottom: 6px;
    height: 2px;
    background: linear-gradient(90deg,#3777fc 40%,#bbd6ff 100%);
    border-radius: 4px;
    opacity: 0.11;
  }
  .fp-input-tip {
    margin: 10px 0 6px 1px;
    color: #8f9ec0;
    font-size: .98em;
    display: flex;
    align-items: center;
    gap: 7px;
  }
  .fp-pass-check-msg {
    margin: 7px 0 5px 2px;
    font-size: .99em;
  }
  .fp-step-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 14px;
  }
  .fp-step-prev-btn, .fp-step-next-btn {
    background: #ebf3ff;
    color: #285fcf;
    border: none;
    border-radius: 8px;
    font-size: 1.07em;
    padding: 8px 20px 8px 14px;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 1px 8px #3777fc14;
    transition: background 0.18s, color 0.13s;
    display: flex;
    align-items: center;
    gap: 7px;
  }
  .fp-step-next-btn {
    background: linear-gradient(90deg,#3777fc 40%,#69d1e7 100%);
    color: #fff;
  }
  .fp-step-prev-btn:hover, .fp-step-next-btn:hover {
    background: #3467d6;
    color: #fff;
  }
  /* Toggle anahtar görünümü */
.fp-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    font-size: 1em;
    color: #234;
  }
  
  .fp-toggle-switch {
    position: relative;
    width: 38px;
    height: 22px;
    display: inline-block;
  }
  
  .fp-toggle-switch input[type="checkbox"] {
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  .fp-toggle-slider {
    position: absolute;
    cursor: pointer;
    background: #ced6e0;
    border-radius: 18px;
    top: 0; left: 0; right: 0; bottom: 0;
    transition: background .18s;
  }
  
  .fp-toggle-slider:before {
    content: "";
    position: absolute;
    left: 3px;
    top: 3px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    transition: .18s;
    box-shadow: 0 2px 7px #0002;
  }
  
  .fp-toggle-switch input:checked + .fp-toggle-slider {
    background: #2ecc71;
  }
  
  .fp-toggle-switch input:checked + .fp-toggle-slider:before {
    transform: translateX(16px);
  }

/* --- Fenex Teknoloji - Fenex.tr --- */
/* Yapım aşaması görünümü – login */
.page-placeholder .badge.bg-warning-subtle {
  background: #fff7e6 !important;
  border: 1px solid #ffe0a3;
}

.page-placeholder .card {
  border-radius: 1rem;
}

.skeleton-line {
  height: 10px;
  width: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, #eceff3 25%, #f5f7fa 37%, #eceff3 63%);
  background-size: 400% 100%;
  animation: shimmer 1.2s infinite linear;
}
.skeleton-line.w-75 { width: 75%; }
.skeleton-line.w-50 { width: 50%; }

@keyframes shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

.fx-toast-stack{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:10px;z-index:9999}
.fx-toast{min-width:260px;max-width:420px;padding:12px 14px;border-radius:10px;color:#fff;font:500 14px/1.35 system-ui,-apple-system,Segoe UI,Roboto,Arial;box-shadow:0 8px 30px rgba(0,0,0,.15);opacity:.98;transition:opacity .2s,transform .2s}
.fx-toast-info{background:#3b82f6}
.fx-toast-success{background:#16a34a}
.fx-toast-warning{background:#f59e0b}
.fx-toast-error{background:#ef4444}
}