body {
    background: white !important;
}

.profile-avatar-wrapper {
    position: relative;
    width: 124px;
    margin: 0 auto;
}
.profile-avatar-wrapper img {
    border: 4px solid #fff;
    border-radius: 100%;
    width: 124px;
    height: 124px;
    object-fit: cover;
    box-shadow: 0 2px 16px rgba(44,62,80,.08);
}

.profile-avatar-edit {
    position: absolute;
    right: 0;
    bottom: 0;
    background: #f5f5f5;
    border-radius: 50%;
    border: 1.5px solid #ddd;
    padding: 6px 8px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(44,62,80,.10);
    transition: background .2s;
}
.profile-avatar-edit:hover {
    background: #e9ecef;
}
.badge-role {
    font-size: .93em;
    padding: .3em .7em;
    font-weight: 500;
    letter-spacing: .5px;
    text-transform: uppercase;
}
.form-label-desc {
    font-size: .95em;
    color: #888;
    margin-top: 9px;
    margin-bottom: 8px;
    display: block;
}
.tab-pane {
    min-height: 200px;
}
.card-profile {
    border-radius: 18px;
    box-shadow: 0 1px 12px rgba(0,0,0,.06);
}
#customToastContainer {
position: fixed;
top: 24px;
right: 24px;
z-index: 9999;
display: flex;
flex-direction: column;
gap: 12px;
}
.custom-toast {
min-width: 320px;
max-width: 420px;
background: #fff;
border-radius: 14px;
padding: 14px 24px 14px 18px;
box-shadow: 0 2px 18px rgba(40,42,48,.10),0 1.5px 4px rgba(80,90,140,.08);
display: flex;
align-items: center;
font-size: 1.06em;
border-left: 6px solid #0acf97;
color: #252525;
animation: toastIn .34s cubic-bezier(.36,1.51,.44,.96);
position: relative;
cursor: pointer;
}
.custom-toast-success { border-color: #0acf97; }
.custom-toast-error   { border-color: #fa5c7c; }
.custom-toast-info    { border-color: #4096ff; }
.custom-toast .toast-close {
margin-left: auto;
margin-right: -12px;
font-size: 1.22em;
color: #999;
background: none;
border: none;
cursor: pointer;
opacity: .6;
transition: opacity .18s;
}
.custom-toast .toast-close:hover { opacity: 1; }
@keyframes toastIn {
0% { opacity:0; transform: translateY(-20px) scale(.97);}
100% { opacity:1; transform: translateY(0) scale(1);}
}

.profile-header-info { font-size: 1.06em; color: #808080; }
.account-user-name { font-weight: bold; }
.account-user-role { font-size: .97em; color: #556ee6; }

span.badge {
    padding: 5px;
}

#passwordStrength { transition: width .22s, background .22s; }
#pwMatch.text-success { color: #16c784 !important; }
#pwMatch.text-danger  { color: #fa5c7c !important; }
#pw-suggestions i { font-size:1em; vertical-align:-1px; }
#pw-suggestions li { margin-bottom: 1px; }

a.side-nav-link strong {
    font-size: 10px;
    background: #F44336;
    color: white;
    padding: 2px 7px;
    position: absolute;
    top: 11px;
    border-radius: 10px;
    right: 35px;
}


@keyframes hero-bg-move {0% { background-position: 30% 80%; } 100% { background-position: 80% 30%; }}
.avatar-frame {position:absolute;left:0;top:0;width:130px;height:130px;border:4px solid #7c3aed;pointer-events:none;border-radius:50%;box-shadow:0 0 10px #7c3aed55;}
.avatar-upload:hover .avatar-hero-img {box-shadow:0 0 0 5px #7c3aed80;}
.avatar-upload:hover .avatar-edit-badge {transform: scale(1.1);}
.avatar-edit-badge {transition:transform 0.18s;}

        .profile-avatar-wrapper {
            position: relative; width: 124px; margin: 0 auto;
        }
        .gradient-card {
    background: linear-gradient(110deg, #fafbfe 60%, #6baaff 100%) !important;
    border-radius: 20px !important;
}
        .profile-avatar-wrapper img {
            border: 4px solid #fff; border-radius: 100%; width: 124px; height: 124px; object-fit: cover;
            box-shadow: 0 2px 16px rgba(44,62,80,.08);
        }
        .profile-avatar-edit {
            position: absolute; right: 0; bottom: 0; background: #f5f5f5; border-radius: 50%;
            border: 1.5px solid #ddd; padding: 6px 8px; cursor: pointer;
            box-shadow: 0 2px 8px rgba(44,62,80,.10); transition: background .2s;
        }
        .profile-avatar-edit:hover { background: #e9ecef; }
        .badge-role { font-size: .93em; padding: .3em .7em; font-weight: 500; letter-spacing: .5px; text-transform: uppercase; }
        .form-label-desc { font-size: .95em; color: #888; margin-top: 9px; margin-bottom: 8px; display: block; }
        .tab-pane { min-height: 220px; }
        .card-profile { border-radius: 18px; box-shadow: 0 1px 12px rgba(0,0,0,.06);}
        #customToastContainer { position: fixed; top: 24px; right: 24px; z-index: 9999; }
        .wrapper {
    height: 100%;
    width: 100%;
    background: white;
}
.card.border-0.shadow {
    border-radius: 18px;
}
button#logoutBtn {
    background: #F44336;
    color: white;
}
button#logoutBtn:hover {
    background: white;
    color: red;
}
/* Her kart için daha okunur ve canlı renkli arka planlar */
.bg-card-2fa {
  background: linear-gradient(135deg, #5869ee 0%, #6dd5fa 100%);
  color: #fff !important;
}
.bg-card-pin {
    background: linear-gradient(135deg, #ffffff 0%, #a7f3d0 100%);
    color: #222 !important;
}
.card.border-0.shadow.h-100.bg-secondary {
    background-color: #FF5722 !important;
    color: white;
}
button.btn.btn-outline-secondary.toggle-pw {
    border: 1px solid #dadada;
}
button#changePasswordBtn {
    background: #FF5722;
    padding: 10px;
}
.profile-dropdown .list-group-item-action:hover {
    background: #f5f8ff !important;
    transition: background 0.2s;
}
.profile-dropdown .list-group-item {
    border: none !important;
}
div#tab-profile-pane input {
    font-size: 16px;
}
div#tab-profile-pane input {
    font-size: 16px;
    padding-top: 1rem;
    padding-bottom: .625rem;
}
.bg-card-izin {
    background: linear-gradient(135deg, #fffde4 0%, #cdd5e1 100%);
    color: #183153 !important;
}
.bg-card-hareket {
  background: linear-gradient(135deg, #2b5876 0%, #4e4376 100%);
  color: #fff !important;
}
.sms-code-input {
    width: 3.5rem;
    height: 3.5rem;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
  }
  .sms-code-input:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 10px rgba(13, 110, 253, 0.5);
    outline: none;
    background-color: #e7f1ff;
  }
  .sms-code-input:hover {
    border-color: #0a58ca;
  }
button#savePinBtn {
    position: relative;
    left: 13px;
}
div#profileHeaderInfo {
    font-weight: 400;
}
div#totpQrArea {
    text-align: center;
}
.gradient-card { background: linear-gradient(110deg, #fafbfe 60%, #f3f6fa 100%) !important; border-radius:20px !important;}
.ribbon {
    position: absolute;
    top: -12px;
    right: 18px;
    z-index: 2;
    padding: 5px 18px 5px 16px;
    border-radius: 12px 12px 12px 0;
    font-size: 1.5rem;
    box-shadow: 0 2px 10px #2222;
    opacity: .92;
}
.bg-gradient-info   { background: linear-gradient(90deg,#45a8fd 40%,#82e7fa 100%) !important; }
.bg-gradient-warning{ background: linear-gradient(90deg,#fecd2f 0,#ffb545 100%) !important; }
.bg-gradient-primary{ background: linear-gradient(90deg,#7e45ff 0,#38a1e7 100%) !important; }
.bg-gradient-success{ background: linear-gradient(90deg,#3edb85 0,#56e9e1 100%) !important; }
.bg-gradient-secondary{ background: linear-gradient(90deg,#e2e8f0 0,#c9cfd6 100%) !important; }
.btn-gradient-success { background: linear-gradient(90deg,#27ffbe 0,#33b5e5 100%)!important; color:#fff; border:0; }
.btn-gradient-info    { background: linear-gradient(90deg,#3edbfd 0,#16b4fa 100%)!important; color:#fff; border:0; }
.btn-gradient-secondary { background: linear-gradient(90deg,#dbeafe 0,#f1f5f9 100%)!important; color:#273549; border:0; }
.btn-gradient-success:hover,.btn-gradient-info:hover,.btn-gradient-secondary:hover { filter: brightness(.97); }
@media (max-width:900px) { .gradient-card { border-radius:12px !important; } .ribbon{font-size:1.1rem; left:10px; top:-8px;} }



.profile-hero-bg {
  pointer-events:none;
  z-index:0;
  animation: hero-bg-move 8s linear infinite alternate;
}
@keyframes hero-bg-move {
  0% {background-position: 0 0;}
  100% {background-position: 100% 100%;}
}
.avatar-hero-img {
  box-shadow: 0 4px 32px 0 rgba(80,80,130,0.08), 0 2px 8px 0 rgba(40,40,70,0.08);
  transition: box-shadow 0.2s;
}
.avatar-hero-img:hover {
  box-shadow: 0 8px 48px 0 rgba(80,80,130,0.15);
}
.avatar-edit-badge {
  cursor:pointer;
  transition: background 0.2s;
}
.avatar-edit-badge:hover {
  background: #7c3aed;
}
.ribbon-admin {
  top:12px; right:-18px;
  font-size:.93rem;
  border-radius:18px;
  padding:3px 14px;
  z-index:2;
  position:absolute;
  font-weight:600;
  background: linear-gradient(90deg,#7c3aed,#38a1e7 80%);
  color:#fff;
  letter-spacing:1px;
  box-shadow:0 2px 8px #b8b8d333;
  animation: bounceIn .7s;
}
@media (max-width:600px){
  .ribbon-admin { font-size:.95rem; right:-12px; top:7px;}
}
#mailcheck-icon {
    position: absolute;
    right: 14px;
    top: 35px;
    font-size: 22px;
}
        #role-badge {
    position: absolute;
    right: 43px;
    top: 44px;
}
span#lastPasswordChange {
    color: black;
}
        #welcome-info {
    margin-top: 2px;
    font-size: 12px;
    margin-bottom: 10px;
}

span.text-success.fw-bold {
    background: #f9f8f8;
    padding: 5px;
    border-radius: 5px;
}
        .position-relative {position:relative !important;}
        body .modal-backdrop {
    z-index: 4096 !important;
}
body .modal {
    z-index: 4100 !important;
}
body .modal-dialog, 
body .modal-content {
    z-index: 4101 !important;
}
body .modal-backdrop + .modal-backdrop {
    z-index: 4097 !important; 
}
button#loginBtn {
    padding: 12px;
    background: #009688;
    border: 1px #009688 solid;
}
        .sms-digit.form-control {width:58px !important; height:56px; font-size:2.1rem;}
        input#emailaddress, input#password {height:45px;}
        .pass-eye {
    position: absolute;
    right: 14px;
    top: 39px;
    z-index: 10;
    cursor: pointer;
    color: #aaa;
}
i.ri-eye-line {
    font-size: 17px;
}
i.ri-eye-off-line {
    font-size: 18px;
}

/* Göster/gizle butonu hover animasyonu */
.toggle-pw:hover {
    color: #0d6efd;
    cursor: pointer;
    transition: color 0.3s ease;
  }
  
  /* Progress bar renk geçişleri */
  #passwordStrength {
    transition: width 0.5s ease, background-color 0.5s ease;
  }
  
  /* Modal inputlar: 6 haneli SMS kodu kutucukları */
  .sms-code-input {
    width: 3rem;
    height: 3rem;
    font-size: 1.8rem;
    text-align: center;
    border-radius: 0.5rem;
    border: 1.5px solid #ced4da;
    margin: 0 0.25rem;
    transition: border-color 0.3s ease;
  }
  .nav-link {
    display: block;
    padding: var(--ct-nav-link-padding-y) var(--ct-nav-link-padding-x);
    font-size: var(--ct-nav-link-font-size);
    font-weight: var(--ct-nav-link-font-weight);
    color: #03A9F4;
    background: 0 0;
    border: 0;
    -webkit-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}
  .sms-code-input:focus {
    outline: none;
    border-color: #0d6efd;
    box-shadow: 0 0 8px rgba(13,110,253,0.3);
  }
  
  /* Modal görünümü - bootstrap modala uygun */

  div#tab-profile-pane label {
    top: -13px;
    left: 21px;
}
.profile-dropdown .list-group-item-action {
    transition: background .14s;
    border: 0 !important;
}
.profile-dropdown .list-group-item-action:hover, 
.profile-dropdown .list-group-item-action:focus {
    background: #f1f3f5 !important;
}
.profile-dropdown .dropdown-header {
    border-bottom: 1px solid #ececec;
}
.profile-dropdown i {
    min-width: 1.7em;
    text-align: center;
}
body.show {
    background: #ffffff;
}

  #pageEditModal .modal-body {
    min-height: 70vh;
    overflow-y: auto;
  }
  @media (max-width: 768px) {
    #pageEditModal .modal-body {
      min-height: 60vh;
    }
  }
  

  #editModalInfo {
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #e0e7ef;
  border-radius: 6px;
  font-weight: 600;
  padding: 3px 10px;
}


ul#codeTab {
    position: relative;
    top: 5px;
}
.content-page {
    position: relative;
    margin-left: var(--ct-leftbar-width);
    min-height: calc(97vh - var(--ct-topbar-height) - -3px);
    padding: 0 .75rem var(--ct-footer-height);
    -webkit-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
}

.footer {
    background: white;
}

.side-nav li > a .menu-arrow { margin-left: auto; }