/* =========================================================
   RMG TEKNOLOJİ
   RMG ÖĞRETMEN PLATFORMU
   ANA STİL DOSYASI
   ========================================================= */


/* =========================================================
   1. GENEL AYARLAR
   ========================================================= */

html {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;

    font-family: "Segoe UI", Arial, sans-serif;

    background-color: #f8f9fa;
    color: #212529;

    overflow-x: hidden;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

a {
    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

img {
    max-width: 100%;
    height: auto;
}


/* =========================================================
   2. RMG ÖĞRETMEN HEADER
   ========================================================= */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1100;

    width: 100%;

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

    border-bottom: 1px solid #e5eaf0;

    box-shadow: 0 2px 12px rgba(15, 39, 71, 0.05);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}


/* =========================================================
   3. HEADER CONTAINER
   ========================================================= */

.header-container {
    width: 100%;
    max-width: 1400px;

    min-height: 100px;

    margin: 0 auto;
    padding: 0 25px;

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

    gap: 25px;
}


/* =========================================================
   4. HEADER SOL ALAN
   ========================================================= */

.header-left {
    display: flex;
    align-items: center;

    flex-shrink: 0;
}


/* =========================================================
   5. LOGO
   ========================================================= */

.logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 150px;
}

.logo-image {
    width: 150px;
    height: 150px;
    max-width: none;
    max-height: none;
    object-fit: contain;
    display: block;
}

/* =========================================================
   6. HEADER SAĞ / MENÜ
   ========================================================= */

.header-right {
    display: flex;

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

    gap: 9px;

    flex-wrap: wrap;
}


/* =========================================================
   7. ANA SAYFA + HAKKIMIZDA
   Beyaz zemin / Lacivert içerik
   ========================================================= */

.nav-page-btn {
    display: inline-flex;

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

    gap: 8px;

    min-height: 42px;

    padding: 9px 16px;

    background: #ffffff;
    color: #0f2747;

    border: 1px solid #d8e0e9;
    border-radius: 9px;

    text-decoration: none;

    font-size: 14px;
    font-weight: 600;

    white-space: nowrap;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.nav-page-btn:hover {
    background: #f4f8fc;

    color: #0b3a6e;

    border-color: #b9cbe0;

    box-shadow:
        0 4px 12px rgba(15, 39, 71, 0.08);

    transform: translateY(-1px);

    text-decoration: none;
}

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

.nav-page-btn .nav-icon {
    display: inline-flex;

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

    color: #0f2747;

    font-size: 16px;
    line-height: 1;
}


/* =========================================================
   8. GENEL HEADER BUTONU
   ========================================================= */

.header-btn {
    display: inline-flex;

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

    gap: 7px;

    min-height: 42px;

    padding: 9px 16px;

    border-radius: 9px;

    text-decoration: none;

    font-size: 14px;
    font-weight: 700;

    border: 1px solid transparent;

    white-space: nowrap;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

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

    text-decoration: none;
}


/* =========================================================
   9. ÜYE OL
   ========================================================= */

.register-btn {
    color: #198754;

    background: #ecfdf3;

    border-color: #d1fae5;
}

.register-btn:hover {
    color: #146c43;

    background: #dcfce7;

    border-color: #bbf7d0;

    box-shadow:
        0 6px 16px rgba(25, 135, 84, 0.12);
}


/* =========================================================
   10. GİRİŞ YAP
   ========================================================= */

.login-btn {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #0d6efd,
            #4f46e5
        );

    border-color: transparent;

    box-shadow:
        0 5px 14px rgba(13, 110, 253, 0.20);
}

.login-btn:hover {
    color: #ffffff;

    box-shadow:
        0 8px 20px rgba(13, 110, 253, 0.28);
}


/* =========================================================
   11. PROFİLİM
   ========================================================= */

.profile-btn {
    color: #0f2747;

    background: #eef4ff;

    border-color: #dbe7ff;
}

.profile-btn:hover {
    color: #0b3a6e;

    background: #e2ecff;

    border-color: #c8dafb;

    box-shadow:
        0 6px 16px rgba(15, 39, 71, 0.10);
}


/* =========================================================
   12. ÇIKIŞ YAP
   ========================================================= */

.logout-btn {
    color: #dc3545;

    background: #fff1f2;

    border-color: #ffe4e6;
}

.logout-btn:hover {
    color: #b02a37;

    background: #ffe4e6;

    border-color: #fecdd3;

    box-shadow:
        0 6px 16px rgba(220, 53, 69, 0.12);
}


/* =========================================================
   13. ESKİ BTN-LINK DESTEĞİ
   ========================================================= */

.btn-link {
    display: inline-flex;

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

    padding: 7px 13px;

    border-radius: 6px;

    font-weight: 600;
    font-size: 0.9rem;

    text-decoration: none;

    color: #ffffff;

    background: #6c757d;

    border: 1px solid transparent;
}

.btn-link:hover {
    background: #495057;

    color: #ffffff;

    text-decoration: none;
}

.btn-link.success {
    background: #198754;
}

.btn-link.success:hover {
    background: #146c43;
}

.btn-link.warning {
    background: #ffc107;

    color: #212529;
}

.btn-link.warning:hover {
    background: #e0a800;

    color: #212529;
}

.btn-link.danger {
    background: #dc3545;
}

.btn-link.danger:hover {
    background: #bb2d3b;
}


/* =========================================================
   14. MOBİL MENÜ BUTONU
   ========================================================= */

.mobile-menu-toggle {
    display: none;

    width: 44px;
    height: 44px;

    padding: 8px;

    border: 1px solid #d8e0e9;
    border-radius: 9px;

    background: #ffffff;

    cursor: pointer;

    flex-direction: column;
    justify-content: center;
    align-items: center;

    gap: 5px;

    flex-shrink: 0;
}

.mobile-menu-toggle:hover {
    background: #f4f8fc;
}

.mobile-menu-toggle span {
    display: block;

    width: 23px;
    height: 3px;

    border-radius: 3px;

    background: #0f2747;

    transition:
        transform 0.25s ease,
        opacity 0.25s ease;
}


/* =========================================================
   15. HAMBURGER -> X
   ========================================================= */

.mobile-menu-toggle.active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}


/* =========================================================
   16. SAYFA CONTAINER
   ========================================================= */

.page-container {
    width: 100%;

    min-height: calc(100vh - 100px);
}


/* =========================================================
   17. ESKİ ANA CONTAINER
   ========================================================= */

.main-container {
    width: 100%;

    display: flex;
    flex-direction: column;

    margin: 0;
    padding: 0;

    background: #f8f9fa;
}

.main-container > .content {
    width: 100%;

    flex: 1;

    min-width: 0;

    padding: 20px;
}


/* =========================================================
   18. GENEL CONTENT
   ========================================================= */

.content {
    min-width: 0;
}


/* =========================================================
   19. DASHBOARD ANA YAPI
   ========================================================= */

.dashboard-layout {
    width: 100%;

    display: flex;

    align-items: stretch;

    min-height: calc(100vh - 100px);

    background: #f8f9fa;
}


/* =========================================================
   20. DASHBOARD SIDEBAR
   ========================================================= */

.dashboard-layout > .sidebar {
    width: 220px;
    min-width: 220px;

    min-height: calc(100vh - 100px);

    padding: 20px 10px;

    flex: 0 0 220px;
    flex-shrink: 0;

    background: #e6f0fa;

    border-right: 1px solid #c3d4f5;

    position: relative;

    z-index: 1000;
}


/* =========================================================
   21. SIDEBAR WELCOME
   ========================================================= */

.dashboard-layout .welcome {
    width: 100%;

    margin-bottom: 18px;

    padding: 15px 10px;

    background: #0d6efd;

    color: #ffffff;

    border-radius: 8px;

    text-align: center;

    box-shadow:
        0 3px 8px rgba(0, 0, 0, 0.12);
}

.welcome-icon {
    margin-bottom: 3px;

    font-size: 25px;

    line-height: 1.2;
}

.welcome-text {
    font-size: 13px;

    line-height: 1.4;

    opacity: 0.9;
}

.welcome-name {
    margin-top: 3px;

    font-size: 15px;

    font-weight: 700;

    line-height: 1.4;

    word-break: break-word;
}


/* =========================================================
   22. SIDEBAR MENU
   ========================================================= */

.sidebar-menu {
    width: 100%;
}

.dashboard-layout .sidebar .nav-link {
    width: 100%;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 11px 13px;

    margin-bottom: 6px;

    border-radius: 6px;

    color: #0d3c61;

    background: #cfe2ff;

    text-decoration: none;

    font-size: 0.95rem;

    font-weight: 500;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.dashboard-layout .sidebar .nav-link i {
    width: 22px;
    min-width: 22px;

    text-align: center;

    font-size: 17px;
}

.dashboard-layout .sidebar .nav-link:hover {
    background: #0d6efd;

    color: #ffffff;

    text-decoration: none;

    transform: translateX(3px);
}

.dashboard-layout .sidebar .nav-link.active {
    background: #084298;

    color: #ffffff;
}

.dashboard-layout .sidebar .nav-link.active:hover {
    background: #084298;

    color: #ffffff;
}


/* =========================================================
   23. SIDEBAR ÇIKIŞ
   ========================================================= */

.dashboard-layout .sidebar .logout-link {
    background: #f8d7da;

    color: #842029;
}

.dashboard-layout .sidebar .logout-link:hover {
    background: #dc3545;

    color: #ffffff;
}


/* =========================================================
   24. SIDEBAR AYRAÇ
   ========================================================= */

.sidebar-divider {
    width: calc(100% - 10px);

    height: 1px;

    margin: 15px 5px;

    background: #b8cce8;
}


/* =========================================================
   25. DASHBOARD İÇERİK
   ========================================================= */

.dashboard-content {
    flex: 1;

    min-width: 0;

    padding: 25px;

    background: #f8f9fa;
}

.content-wrapper {
    width: 100%;

    max-width: 1200px;

    margin: 0 auto;
}


/* =========================================================
   26. GENEL KART
   ========================================================= */

.card {
    border-radius: 10px;

    border: 0;

    background: #ffffff;

    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.10);

    overflow: hidden;
}

.card-header {
    border-top-left-radius: 10px !important;
    border-top-right-radius: 10px !important;
}

.card-footer {
    border-bottom-left-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
}


/* =========================================================
   27. DASHBOARD KART
   ========================================================= */

.dashboard-card {
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.dashboard-card:hover {
    transform: translateY(-2px);

    box-shadow:
        0 7px 20px rgba(0, 0, 0, 0.14);
}


/* =========================================================
   28. PROFİL KARTI
   ========================================================= */

.profile-card {
    width: 100%;

    border: 0;

    border-radius: 12px;

    overflow: hidden;

    background: #ffffff;

    box-shadow:
        0 5px 20px rgba(0, 0, 0, 0.12);
}

.profile-card .card-header {
    padding: 18px 22px;

    border: 0;
}

.profile-card .card-body {
    padding: 22px;
}


/* =========================================================
   29. PROFİL BAŞLIK
   ========================================================= */

.profile-title {
    display: flex;

    align-items: center;

    gap: 12px;
}

.profile-title-icon {
    font-size: 28px;

    line-height: 1;
}

.profile-title h4 {
    margin: 0;

    font-size: 1.25rem;

    font-weight: 600;
}

.profile-title small {
    display: block;

    margin-top: 3px;

    opacity: 0.8;
}


/* =========================================================
   30. PROFİL TABLOSU
   ========================================================= */

.profile-table {
    width: 100%;

    margin-bottom: 0;

    background: #ffffff;
}

.profile-table th {
    width: 220px;

    padding: 13px 15px;

    background: #f8f9fa;

    color: #343a40;

    font-weight: 600;

    white-space: nowrap;

    vertical-align: middle;
}

.profile-table td {
    padding: 13px 15px;

    color: #495057;

    vertical-align: middle;

    word-break: break-word;
}

.profile-table tr:hover th,
.profile-table tr:hover td {
    background-color: #f1f6ff;
}


/* =========================================================
   31. GENEL TABLO
   ========================================================= */

.table {
    background: #ffffff;
}

.table th {
    font-weight: 600;
}

.table td {
    vertical-align: middle;
}

.table-responsive {
    width: 100%;

    overflow-x: auto;

    -webkit-overflow-scrolling: touch;
}


/* =========================================================
   32. PROFİL BUTON ALANI
   ========================================================= */

.profile-actions {
    display: flex;

    justify-content: flex-end;

    align-items: center;

    margin-top: 20px;
}

.profile-actions .btn {
    padding: 10px 20px;

    border-radius: 6px;

    font-weight: 600;
}


/* =========================================================
   33. DASHBOARD KART GRID
   ========================================================= */

.card-grid {
    width: 100%;

    display: flex;

    align-items: stretch;

    justify-content: center;

    gap: 20px;

    flex-wrap: wrap;

    margin-top: 20px;
}

.card-grid > .card {
    flex: 1 1 280px;
}


/* =========================================================
   34. KART LİSTESİ
   ========================================================= */

.card-list {
    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 20px;
}

.card-list .card {
    width: 100%;

    max-width: 500px;

    background: #ffffff;

    border-radius: 8px;

    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.12);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.card-list .card:hover {
    transform: translateY(-3px);

    box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.16);
}

.card-list .card-body {
    padding: 20px;

    text-align: center;
}


/* =========================================================
   35. LOGIN WRAPPER
   ========================================================= */

.login-wrapper {
    width: 100%;

    min-height: calc(100vh - 120px);

    display: flex;

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

    padding: 30px 15px;

    background: #f8f9fa;
}


/* =========================================================
   36. LOGIN CARD
   ========================================================= */

.login-card {
    width: 100%;

    max-width: 420px;

    margin: 0 auto;

    background: #ffffff;

    border-radius: 12px;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.15);

    overflow: hidden;
}

.login-card .card-header {
    padding: 16px 20px;
}

.login-card .card-body {
    padding: 24px;
}

.login-card .card-footer {
    padding: 12px 20px;
}


/* =========================================================
   37. LOGIN BAŞLIK
   ========================================================= */

.login-header {
    text-align: center;

    margin-bottom: 15px;
}


/* =========================================================
   38. LOGIN FORM
   ========================================================= */

.login-body .form-group {
    margin-bottom: 15px;
}

.login-body input {
    width: 100%;

    padding: 9px 10px;

    border: 1px solid #ced4da;

    border-radius: 6px;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.login-body input:focus {
    border-color: #86b7fe;

    box-shadow:
        0 0 0 0.2rem rgba(13, 110, 253, 0.15);
}


/* =========================================================
   39. FORM WRAPPER
   ========================================================= */

.form-wrapper {
    width: 100%;

    min-height: calc(100vh - 120px);

    display: flex;

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

    padding: 30px 15px;

    background: #f8f9fa;
}


/* =========================================================
   40. FORM CARD
   ========================================================= */

.form-card {
    width: 100%;

    max-width: 500px;

    margin: 0 auto;

    padding: 0;

    background: #ffffff;

    border-radius: 10px;

    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.15);

    overflow: hidden;
}

.form-card .card-body {
    padding: 24px;
}


/* =========================================================
   41. FORM BAŞLIK
   ========================================================= */

.form-header {
    text-align: center;

    margin-bottom: 15px;
}

.form-body .form-group {
    margin-bottom: 15px;
}

.form-body input,
.form-body textarea {
    width: 100%;

    padding: 9px 10px;

    border: 1px solid #ced4da;

    border-radius: 6px;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.form-body input:focus,
.form-body textarea:focus {
    border-color: #86b7fe;

    box-shadow:
        0 0 0 0.2rem rgba(13, 110, 253, 0.15);
}


/* =========================================================
   42. CAPTCHA
   ========================================================= */

.captcha {
    width: 100%;

    display: flex;

    align-items: center;

    gap: 10px;
}

.captcha input {
    max-width: 100px;

    flex: 0 0 100px;

    text-align: center;
}


/* =========================================================
   43. BOOTSTRAP BUTONLARI
   ========================================================= */

button.btn {
    font-weight: 600;

    cursor: pointer;
}

.login-card button.btn,
.form-card button.btn {
    width: 100%;

    padding: 10px;

    border-radius: 6px;

    font-weight: 700;
}


/* =========================================================
   44. LOGIN / FORM FOOTER
   ========================================================= */

.login-footer,
.form-footer {
    text-align: center;

    margin-top: 10px;

    color: #666666;
}


/* =========================================================
   45. ALERT
   ========================================================= */

.alert {
    border-radius: 8px;
}


/* =========================================================
   46. GENEL FORM ELEMANLARI
   ========================================================= */

.form-control {
    border-radius: 6px;
}

.form-control:focus {
    border-color: #86b7fe;

    box-shadow:
        0 0 0 0.2rem rgba(13, 110, 253, 0.15);
}

.form-label {
    font-weight: 500;
}


/* =========================================================
   47. PROFİL DÜZENLEME FORMU
   ========================================================= */

.profile-edit-card {
    width: 100%;
}

.profile-edit-card .card-body {
    padding: 28px 30px;
}

.profile-edit-form {
    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    column-gap: 24px;

    row-gap: 18px;
}

.profile-edit-form .mb-3 {
    width: 100%;

    margin-bottom: 0 !important;
}

.profile-edit-form .form-label {
    display: block;

    width: 100%;

    margin-bottom: 7px;

    font-size: 14px;

    font-weight: 600;

    color: #343a40;
}

.profile-edit-form .form-control {
    display: block;

    width: 100% !important;

    max-width: 100% !important;

    min-height: 46px;

    padding: 10px 13px;

    border: 1px solid #ced4da;

    border-radius: 7px;

    background-color: #ffffff;

    font-size: 15px;

    color: #212529;

    box-sizing: border-box;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.profile-edit-form textarea.form-control {
    min-height: 120px;

    resize: vertical;
}

.profile-edit-form .form-control:focus {
    border-color: #86b7fe;

    outline: 0;

    box-shadow:
        0 0 0 0.2rem rgba(13, 110, 253, 0.15);
}

.profile-edit-form .mb-3:nth-child(5) {
    grid-column: 1 / -1;
}

.profile-edit-form .mb-3:nth-child(8) {
    grid-column: 1 / -1;
}

.profile-edit-actions {
    grid-column: 1 / -1;

    display: flex;

    justify-content: flex-end;

    align-items: center;

    gap: 10px;

    padding-top: 20px;

    margin-top: 4px;

    border-top: 1px solid #e9ecef;
}

.profile-edit-actions .btn {
    min-width: 150px;

    min-height: 44px;

    padding: 10px 18px;

    border-radius: 7px;

    font-weight: 600;
}


/* =========================================================
   48. ÖĞRETMEN GİRİŞ SAYFASI
   ========================================================= */

.login-page {
    min-height: calc(100vh - 100px);

    display: flex;

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

    padding: 40px 20px;

    background:
        linear-gradient(
            135deg,
            #eef5ff 0%,
            #f8f9fa 50%,
            #e9f2ff 100%
        );

    box-sizing: border-box;
}


/* =========================================================
   49. LOGIN CARD MODERN
   ========================================================= */

.login-page .login-card {
    width: 100%;

    max-width: 450px;

    background: #ffffff;

    border: 1px solid #e3e8ef;

    border-radius: 16px;

    overflow: hidden;

    box-shadow:
        0 15px 45px rgba(0, 0, 0, 0.10),
        0 4px 12px rgba(0, 0, 0, 0.05);

    animation: loginCardShow 0.45s ease;
}

@keyframes loginCardShow {

    from {
        opacity: 0;

        transform: translateY(15px);
    }

    to {
        opacity: 1;

        transform: translateY(0);
    }

}


/* =========================================================
   50. LOGIN HEADER
   ========================================================= */

.login-page .login-header {
    text-align: center;

    padding: 34px 30px 25px;

    background:
        linear-gradient(
            135deg,
            #0d6efd,
            #0b5ed7
        );

    color: #ffffff;
}

.login-logo {
    width: 68px;
    height: 68px;

    display: flex;

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

    margin: 0 auto 15px;

    border-radius: 50%;

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

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

    font-size: 34px;

    box-shadow:
        0 5px 15px rgba(0, 0, 0, 0.12);
}

.login-page .login-header h1 {
    margin: 0;

    font-size: 25px;

    font-weight: 700;

    letter-spacing: -0.3px;
}

.login-page .login-header p {
    margin: 8px 0 0;

    font-size: 14px;

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


/* =========================================================
   51. LOGIN BODY
   ========================================================= */

.login-page .login-body {
    padding: 30px;
}


/* =========================================================
   52. LOGIN FORM ALANLARI
   ========================================================= */

.login-field {
    margin-bottom: 20px;
}

.login-field label {
    display: block;

    margin-bottom: 7px;

    color: #343a40;

    font-size: 14px;

    font-weight: 600;
}


/* =========================================================
   53. LOGIN INPUT WRAPPER
   ========================================================= */

.login-input-wrapper {
    position: relative;

    width: 100%;
}

.login-input-wrapper .form-control {
    width: 100% !important;

    min-height: 48px;

    padding: 11px 45px 11px 43px;

    border: 1px solid #ced4da;

    border-radius: 8px;

    background: #ffffff;

    font-size: 14px;

    box-sizing: border-box;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}

.login-input-wrapper .form-control:hover {
    border-color: #adb5bd;
}

.login-input-wrapper .form-control:focus {
    border-color: #0d6efd;

    outline: none;

    background: #ffffff;

    box-shadow:
        0 0 0 3px rgba(13, 110, 253, 0.12);
}

.login-input-wrapper .form-control::placeholder {
    color: #9aa3ad;
}


/* =========================================================
   54. INPUT ICON
   ========================================================= */

.login-input-icon {
    position: absolute;

    left: 14px;
    top: 50%;

    transform: translateY(-50%);

    z-index: 2;

    font-size: 17px;

    line-height: 1;

    pointer-events: none;
}


/* =========================================================
   55. ŞİFRE GÖSTER
   ========================================================= */

.password-toggle {
    position: absolute;

    right: 8px;
    top: 50%;

    transform: translateY(-50%);

    width: 34px;
    height: 34px;

    display: flex;

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

    border: 0;

    border-radius: 6px;

    background: transparent;

    cursor: pointer;

    font-size: 16px;

    transition:
        background 0.2s ease;
}

.password-toggle:hover {
    background: #f1f3f5;
}


/* =========================================================
   56. CAPTCHA MODERN
   ========================================================= */

.captcha-box {
    display: flex;

    align-items: stretch;

    gap: 10px;
}

.captcha-question {
    min-width: 125px;

    display: flex;

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

    gap: 7px;

    padding: 0 12px;

    border: 1px solid #cfe2ff;

    border-radius: 8px;

    background: #eef5ff;

    color: #084298;

    white-space: nowrap;
}

.captcha-question span {
    width: 22px;
    height: 22px;

    display: flex;

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

    border-radius: 50%;

    background: #0d6efd;

    color: #ffffff;

    font-size: 13px;

    font-weight: 700;
}

.captcha-question strong {
    font-size: 15px;
}

.captcha-question small {
    font-size: 15px;

    font-weight: 600;
}

.captcha-input {
    flex: 1;

    min-width: 0;

    padding-left: 13px !important;

    padding-right: 13px !important;
}


/* =========================================================
   57. LOGIN MESAJ
   ========================================================= */

#loginMessage {
    margin-bottom: 15px;
}

#loginMessage:empty {
    display: none;
}

#formMessage {
    margin-bottom: 15px;
}

#formMessage:empty {
    display: none;
}

.login-alert {
    display: flex;

    align-items: center;

    gap: 9px;

    padding: 11px 13px;

    margin-bottom: 15px;

    border: 1px solid #f1aeb5;

    border-radius: 7px;

    background: #f8d7da;

    color: #842029;

    font-size: 13px;

    line-height: 1.4;
}

.login-alert-icon {
    flex-shrink: 0;
}


/* =========================================================
   58. LOGIN BUTONU
   ========================================================= */

.login-submit {
    width: 100%;

    min-height: 49px;

    display: flex;

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

    gap: 8px;

    margin-top: 5px;

    padding: 12px 18px;

    border: 0;

    border-radius: 8px;

    background:
        linear-gradient(
            135deg,
            #0d6efd,
            #0b5ed7
        );

    color: #ffffff;

    font-size: 15px;

    font-weight: 600;

    cursor: pointer;

    box-shadow:
        0 4px 10px rgba(13, 110, 253, 0.20);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        opacity 0.2s ease;
}

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

    box-shadow:
        0 6px 15px rgba(13, 110, 253, 0.28);
}

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

.login-submit:disabled {
    opacity: 0.75;

    cursor: not-allowed;

    transform: none;

    box-shadow: none;
}

.login-submit-icon {
    font-size: 16px;
}


/* =========================================================
   59. LOGIN LOADING
   ========================================================= */

.login-spinner {
    width: 16px;
    height: 16px;

    border: 2px solid rgba(255, 255, 255, 0.4);

    border-top-color: #ffffff;

    border-radius: 50%;

    animation:
        loginSpin 0.7s linear infinite;
}

@keyframes loginSpin {

    to {
        transform: rotate(360deg);
    }

}


/* =========================================================
   60. LOGIN FOOTER
   ========================================================= */

.login-page .login-footer {
    display: flex;

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

    gap: 8px;

    padding: 16px 20px;

    border-top: 1px solid #edf0f3;

    background: #fafbfc;

    color: #7a828a;

    font-size: 12px;

    text-align: center;
}

.login-footer-separator {
    color: #adb5bd;
}


/* =========================================================
   61. ÜYELİK FORMU EK STİLLERİ
   ========================================================= */

.login-body textarea.form-control {
    min-height: 80px;

    border-radius: 8px;

    resize: vertical;
}

.login-body input[type="date"].form-control {
    min-height: 48px;

    border-radius: 8px;

    font-size: 14px;
}

.login-input-wrapper textarea.form-control {
    min-height: 80px;

    padding:
        11px 45px 11px 43px;

    border-radius: 8px;

    font-size: 14px;

    resize: vertical;
}


/* =========================================================
   62. MODAL
   ========================================================= */

.modal-content {
    border-radius: 12px;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.25);
}

.modal-header {
    border-bottom:
        1px solid #dee2e6;
}

.modal-footer {
    border-top:
        1px solid #dee2e6;
}


/* =========================================================
   63. TOAST
   ========================================================= */

.toast-container {
    z-index: 2000;
}

.toast {
    border-radius: 10px;

    font-size: 14px;

    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.25);
}


/* =========================================================
   64. FOOTER
   ========================================================= */

.site-footer {
    width: 100%;

    margin: 0;

    padding: 20px;

    background: #212529;

    color: #ffffff;
}

.site-footer a {
    color: #ffffff;

    margin-right: 15px;

    text-decoration: none;

    transition:
        color 0.2s ease;
}

.site-footer a:hover {
    color: #ced4da;

    text-decoration: underline;
}

.footer-top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    flex-wrap: wrap;
}

.footer-left h5 {
    margin:
        0 0 5px 0;
}

.footer-left p {
    margin: 0;

    font-size: 0.9rem;
}

.footer-right {
    margin-top: 10px;
}

.site-footer hr {
    margin: 15px 0;

    border: 0;

    border-top:
        1px solid rgba(255, 255, 255, 0.2);
}

.footer-bottom {
    text-align: center;
}

.footer-bottom a {
    margin: 0 10px;

    font-size: 1.2rem;
}


/* =========================================================
   65. ESKİ FOOTER DESTEĞİ
   ========================================================= */

.footer {
    width: 100%;

    padding: 10px;

    background: #0d6efd;

    color: #ffffff;

    text-align: center;
}


/* =========================================================
   66. MASAÜSTÜ
   ========================================================= */

@media (min-width: 769px) {

    .dashboard-layout {
        flex-direction: row;
    }

    .dashboard-layout > .sidebar {
        position: relative;
    }

    .dashboard-content {
        width: auto;
    }

}


/* =========================================================
   67. TABLET
   ========================================================= */

@media (max-width: 768px) {

    /* -----------------------------------------------------
       HEADER
       ----------------------------------------------------- */

    .site-header {
        position: sticky;

        top: 0;
    }

    .header-container {
        min-height: 100px;

        padding:
            0 15px;

        gap: 12px;
    }

    /*
       Logo mobilde de 100x100.
       Header yüksekliği logo ile uyumlu tutuluyor.
    */

    .logo {
        width: 100px;
        height: 100px;
    }

    .logo-image {
        width: 100px;
        height: 100px;
    }


    /* -----------------------------------------------------
       HAMBURGER
       ----------------------------------------------------- */

    .mobile-menu-toggle {
        display: flex;

        margin-left: auto;
    }


    /* -----------------------------------------------------
       MOBİL MENÜ
       ----------------------------------------------------- */

    .header-right {
        display: none;

        position: absolute;

        top: 100%;

        left: 0;
        right: 0;

        width: 100%;

        padding:
            12px 15px 18px;

        background: #ffffff;

        border-top:
            1px solid #e5eaf0;

        box-shadow:
            0 10px 30px rgba(15, 39, 71, 0.10);

        flex-direction: column;

        align-items: stretch;

        gap: 8px;

        z-index: 9999;
    }

    .header-right.mobile-menu-open {
        display: flex;
    }


    /* -----------------------------------------------------
       MOBİL MENÜ BUTONLARI
       ----------------------------------------------------- */

    .header-right .header-btn,
    .header-right .nav-page-btn {
        width: 100%;

        min-height: 48px;

        justify-content: flex-start;

        padding:
            11px 16px;

        border-radius: 9px;

        box-sizing: border-box;

        font-size: 14px;
    }

    .header-right .nav-page-btn {
        background: #ffffff;

        color: #0f2747;
    }

    .header-right .nav-page-btn:hover {
        background: #f4f8fc;

        color: #0b3a6e;
    }


    /* -----------------------------------------------------
       DASHBOARD
       ----------------------------------------------------- */

    .dashboard-layout {
        display: block;

        min-height: auto;
    }


    /* -----------------------------------------------------
       MOBİL SIDEBAR
       ----------------------------------------------------- */

    .dashboard-layout > .sidebar {
        position: fixed;

        top: 0;
        left: 0;

        width: 250px;
        min-width: 250px;

        height: 100vh;

        min-height: 100vh;

        padding: 20px 10px;

        transform:
            translateX(-100%);

        transition:
            transform 0.3s ease;

        overflow-y: auto;

        background: #e6f0fa;

        box-shadow:
            3px 0 15px rgba(0, 0, 0, 0.20);

        z-index: 1200;
    }

    .dashboard-layout > .sidebar.open {
        transform:
            translateX(0);
    }


    /* -----------------------------------------------------
       DASHBOARD İÇERİK
       ----------------------------------------------------- */

    .dashboard-content {
        width: 100%;

        padding: 15px;
    }

    .content-wrapper {
        max-width: 100%;
    }


    /* -----------------------------------------------------
       PROFİL
       ----------------------------------------------------- */

    .profile-card {
        width: 100%;
    }

    .profile-table th {
        width: 40%;

        white-space: normal;
    }

    .profile-actions {
        justify-content: stretch;
    }

    .profile-actions .btn {
        width: 100%;
    }


    /* -----------------------------------------------------
       PROFİL DÜZENLEME
       ----------------------------------------------------- */

    .profile-edit-card .card-body {
        padding: 22px;
    }

    .profile-edit-form {
        grid-template-columns: 1fr;

        gap: 16px;
    }

    .profile-edit-form .mb-3:nth-child(5),
    .profile-edit-form .mb-3:nth-child(8),
    .profile-edit-actions {
        grid-column: auto;
    }

    .profile-edit-actions {
        flex-direction: column-reverse;

        align-items: stretch;
    }

    .profile-edit-actions .btn {
        width: 100%;
    }


    /* -----------------------------------------------------
       LOGIN / FORM
       ----------------------------------------------------- */

    .login-wrapper,
    .form-wrapper {
        min-height:
            calc(100vh - 100px);

        padding:
            20px 12px;
    }

    .login-card,
    .form-card {
        width: 100%;

        max-width: 100%;
    }


    /* -----------------------------------------------------
       ESKİ CONTENT
       ----------------------------------------------------- */

    .main-container > .content {
        width: 100%;

        padding: 15px;
    }


    /* -----------------------------------------------------
       TABLO
       ----------------------------------------------------- */

    .table-responsive {
        overflow-x: auto;
    }

}


/* =========================================================
   68. TELEFON
   ========================================================= */

@media (max-width: 480px) {

    /* -----------------------------------------------------
       HEADER
       ----------------------------------------------------- */

    .header-container {
        min-height: 88px;

        padding:
            0 10px;
    }

    /*
       Telefonda logo biraz küçültülür.
       Kullanıcı özellikle 100x100 istemiş olduğu için
       480px üzerindeki mobilde 100x100 korunur.
    */

    .logo {
        width: 80px;
        height: 80px;
    }

    .logo-image {
        width: 80px;
        height: 80px;
    }

    .mobile-menu-toggle {
        width: 42px;
        height: 42px;
    }


    /* -----------------------------------------------------
       DASHBOARD
       ----------------------------------------------------- */

    .dashboard-content {
        padding: 10px;
    }


    /* -----------------------------------------------------
       SIDEBAR
       ----------------------------------------------------- */

    .dashboard-layout > .sidebar {
        width: 240px;

        min-width: 240px;
    }


    /* -----------------------------------------------------
       PROFİL
       ----------------------------------------------------- */

    .profile-card .card-header {
        padding: 15px;
    }

    .profile-card .card-body {
        padding: 15px;
    }

    .profile-title {
        gap: 9px;
    }

    .profile-title h4 {
        font-size: 18px;
    }

    .profile-title-icon {
        font-size: 23px;
    }

    .profile-table {
        font-size: 14px;
    }

    .profile-table th {
        width: 42%;

        padding: 10px;
    }

    .profile-table td {
        padding: 10px;
    }


    /* -----------------------------------------------------
       CARD
       ----------------------------------------------------- */

    .card-body {
        padding: 15px !important;
    }

    .card-header {
        padding:
            12px 15px !important;
    }


    /* -----------------------------------------------------
       CAPTCHA
       ----------------------------------------------------- */

    .captcha {
        flex-wrap: wrap;
    }

    .captcha input {
        flex:
            1 1 100px;

        max-width: none;
    }


    /* -----------------------------------------------------
       LOGIN
       ----------------------------------------------------- */

    .login-card .card-body {
        padding:
            18px !important;
    }

    .login-wrapper,
    .form-wrapper {
        padding:
            15px 10px;
    }


    /* -----------------------------------------------------
       PROFİL DÜZENLEME
       ----------------------------------------------------- */

    .profile-edit-card .card-body {
        padding: 17px;
    }

    .profile-edit-form {
        gap: 14px;
    }

    .profile-edit-form .form-control {
        min-height: 44px;

        font-size: 14px;
    }

    .profile-edit-actions .btn {
        min-width: 100%;
    }


    /* -----------------------------------------------------
       ESKİ CONTENT
       ----------------------------------------------------- */

    .main-container > .content {
        padding: 10px;
    }


    /* -----------------------------------------------------
       FOOTER
       ----------------------------------------------------- */

    .footer-top {
        flex-direction: column;

        align-items: flex-start;
    }

    .footer-right {
        width: 100%;
    }

}


/* =========================================================
   69. LOGIN MOBİL
   ========================================================= */

@media (max-width: 576px) {

    .login-page {
        min-height:
            calc(100vh - 88px);

        padding:
            25px 15px;
    }

    .login-page .login-card {
        border-radius: 13px;
    }

    .login-page .login-header {
        padding:
            28px 20px 22px;
    }

    .login-logo {
        width: 60px;
        height: 60px;

        font-size: 30px;
    }

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

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

    .login-page .login-body {
        padding:
            23px 20px;
    }

    .captcha-box {
        gap: 8px;
    }

    .captcha-question {
        min-width: 112px;

        padding: 0 8px;
    }

    .captcha-question strong {
        font-size: 14px;
    }

    .login-page .login-footer {
        flex-direction: column;

        gap: 3px;
    }

    .login-footer-separator {
        display: none;
    }

}


/* =========================================================
   70. ÇOK KÜÇÜK TELEFON
   ========================================================= */

@media (max-width: 380px) {

    .header-container {
        min-height: 82px;
    }

    .logo {
        width: 72px;
        height: 72px;
    }

    .logo-image {
        width: 72px;
        height: 72px;
    }

    .dashboard-layout > .sidebar {
        width: 225px;

        min-width: 225px;
    }

    .dashboard-layout .sidebar .nav-link {
        padding:
            10px 11px;

        font-size: 0.9rem;
    }

    .welcome-name {
        font-size: 14px;
    }

    .profile-table {
        font-size: 13px;
    }

    .login-page {
        padding:
            15px 10px;
    }

    .login-page .login-body {
        padding:
            20px 15px;
    }

    .captcha-box {
        flex-direction: column;
    }

    .captcha-question {
        width: 100%;

        min-height: 44px;

        box-sizing: border-box;
    }

}


/* =========================================================
   71. ERİŞİLEBİLİRLİK / FOCUS
   ========================================================= */

a:focus-visible,
button:focus-visible {
    outline: 3px solid rgba(13, 110, 253, 0.35);

    outline-offset: 2px;
}


/* =========================================================
   72. HAREKET AZALTMA
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        transition-duration: 0.01ms !important;

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;
    }

}