.footer-logo,
.read-more,
a {
    text-decoration: none
}

.footer-bottom,
.hero-visual,
.homepage-subscribe,
.how-step,
.metrics-grid,
.site-card {
    text-align: center
}

:root {
    --default: #3974da;
    --default-rgb: 57 116 218;
    --default-dark: #265bb6;
    --orange: #ff6c2c;
    --orange-rgb: 255 108 44;
    --orange-dark: #c94e19;
    --blue: #3974da;
    --blue-rgb: 57 116 218;
    --blue-dark: #265bb6;
    --green: #37d16f;
    --green-rgb: 55 209 111;
    --green-dark: #0a7e34;
    --green-dark-rgb: 10 126 52;
    --purple: #8e2bff;
    --purple-rgb: 142 43 255;
    --purple-dark: #6414c0;
    --sh: 0 .5rem 1rem rgba(0, 0, 0, .15);
    --red: #ff4b4b;
    --red-rgb: 255 75 75;
    --text-color: #3f4257;
    --text-color-rgb: 63 66 87;
    --border-color: #d2e4eb;
    --box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
    --white: white;
    --body-color: #eeeef0;
    --black: black;
    --secondary: #f3f4f6;
    --secondary-dark: #c3c4c5
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    font: 16px/1.6 Inter, sans-serif;
    background-color: #f8f9fc;
    color: #212529
}

.container {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 32px)
}

h1,
h2,
h3 {
    font-weight: 600;
    color: #1f1f1f
}

h1 {
    font-size: 2rem
}

h2 {
    font-size: 1.5rem;
    margin-bottom: 1rem
}

h3 {
    font-size: 1.25rem;
    margin-bottom: .5rem
}

a {
    color: #007bff;
    transition: .2s ease-in-out
}

a:hover {
    color: #0056b3
}

.btn {
    --btn-padding: 15px;
    --btn-font-size: 17px;
    background: var(--btn-bg) !important;
    transition: .3s;
    padding: var(--btn-padding);
    border-radius: 3px;
    font-size: var(--btn-font-size);
    display: inline-block;
    gap: 9px;
    line-height: 1;
    font-weight: 500;
    font-family: inherit;
    border-width: var(--btn-border-width);
    border-style: solid;
    border-color: var(--btn-border-color) !important;
    color: var(--btn-color);
    cursor: pointer
}

.btn-small {
    --btn-padding: 9px 11px;
    --btn-font-size: 15px
}

.btn-icon {
    justify-content: center;
    display: inline-flex;
    align-items: center
}

.btn:hover,
.comment-reply-link:hover,
.submit:hover {
    background: var(--btn-hover-bg) !important;
    color: var(--btn-hover-color) !important;
    border-color: var(--btn-hover-border-color) !important
}

.btn-default {
    --btn-bg: var(--default);
    --btn-hover-bg: var(--default-dark)
}

.btn-secondary {
    --btn-bg: var(--secondary);
    --btn-hover-bg: var(--secondary-dark)
}

.btn-orange {
    --btn-bg: var(--orange);
    --btn-hover-bg: var(--orange-dark)
}

.btn-blue {
    --btn-bg: var(--blue);
    --btn-hover-bg: var(--blue-dark)
}

.btn-green {
    --btn-bg: var(--green);
    --btn-hover-bg: var(--green-dark)
}

.btn-white {
    --btn-bg: var(--white);
    --btn-hover-bg: var(--black);
    --btn-color: black
}

.btn-blue,
.btn-default,
.btn-green,
.btn-orange,
.btn-purple {
    --btn-color: white
}

.btn-purple {
    --btn-bg: var(--purple);
    --btn-hover-bg: var(--purple-dark)
}

.btn-secondary {
    --btn-color: #111827;
    --btn-hover-color: #111827 !important
}

.btn-blue,
.btn-default,
.btn-green,
.btn-orange,
.btn-purple,
.btn-secondary,
.btn-white {
    --btn-border-width: 0;
    --btn-hover-color: white
}

.btn-blue,
.btn-default,
.btn-green,
.btn-orange,
.btn-outline-default,
.btn-secondary,
.btn-white {
    --btn-hover-color: white
}

.btn-outline-default {
    --btn-color: #525252;
    --btn-border-color: #eae4e4;
    --btn-hover-bg: var(--default);
    --btn-hover-border-color: var(--default);
    --btn-border-width: 1px
}

.btn-outline-white {
    --btn-color: white;
    --btn-border-color: white;
    --btn-hover-color: var(--black);
    --btn-hover-bg: white;
    --btn-hover-border-color: white;
    --btn-border-width: 1px
}

.btn-outline-blue,
.btn-outline-orange,
.btn-outline-purple {
    --btn-hover-color: white;
    --btn-border-width: 1px
}

.btn-outline-orange {
    --btn-color: var(--orange);
    --btn-border-color: var(--orange);
    --btn-hover-bg: var(--orange);
    --btn-hover-border-color: var(--orange)
}

.btn-outline-blue {
    --btn-color: var(--blue);
    --btn-border-color: var(--blue);
    --btn-hover-bg: var(--blue);
    --btn-hover-border-color: var(--blue)
}

.btn-outline-purple {
    --btn-color: var(--purple);
    --btn-border-color: var(--purple);
    --btn-hover-bg: var(--purple);
    --btn-hover-border-color: var(--purple)
}

.btn.disabled,
.btn[disabled] {
    opacity: .7;
    cursor: no-drop
}

.btn.disabled:hover,
.btn[disabled]:hover {
    background: var(--btn-bg)
}

.topbar {
    background-color: #1f2937;
    color: #f3f4f6;
    font-size: 14px;
    padding: 6px 0
}

.highlight-meta,
.topbar-container {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.topbar-right a {
    color: #f3f4f6;
    margin-left: 10px;
    font-size: 16px;
    transition: color .2s
}

.topbar-right a:hover {
    color: #60a5fa
}

.site-header {
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
    position: sticky;
    top: 0;
    z-index: 1000
}

.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-top: 15px;
    padding-bottom: 15px
}

.main-menu .menu-list {
    display: flex;
    list-style: none;
    gap: 20px
}

.main-menu .menu-list li a {
    font-weight: 500;
    color: #374151;
    padding: 8px 12px;
    border-radius: 6px
}

.main-menu .menu-list li a.active,
.main-menu .menu-list li a:hover {
    background-color: #eef2ff;
    color: #4338ca
}

.has-dropdown {
    position: relative
}

.has-dropdown:hover .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0)
}

.dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    border-radius: 6px;
    padding: 10px 0;
    box-shadow: 0 6px 12px rgba(0, 0, 0, .08);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: .2s ease-in-out;
    min-width: 180px;
    z-index: 999
}

.dropdown li {
    list-style: none
}

.dropdown li a {
    display: block;
    padding: 8px 16px;
    color: #374151;
    transition: background .2s
}

.dropdown li a:hover {
    background-color: #f3f4f6
}

.nav-actions {
    display: flex;
    gap: 10px
}

.mobile-toggle {
    display: none;
    background: 0 0;
    border: none;
    font-size: 22px;
    color: #374151
}

.homepage-hero {
    padding: 80px 0 60px;
    background: #fff;
    position: relative;
    overflow: hidden
}

.hero-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 40px
}

.hero-content {
    max-width: 600px;
    flex: 1 1 50%
}

.hero-title {
    font-size: 36px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 16px
}

.hero-description {
    font-size: 18px;
    color: #4b5563;
    margin-bottom: 24px;
    line-height: 1.6
}

.search-box {
    position: relative;
    margin-bottom: 20px
}

.search-dropdown {
    list-style: none;
    margin: 0;
    padding: 0;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 0 0 8px 8px;
    max-height: 200px;
    overflow-y: auto;
    position: absolute;
    width: 100%;
    z-index: 10;
    display: none
}

.hero-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
    margin: 30px 0
}

.how-grid,
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 32px
}

.hero-visual {
    flex: 1 1 40%
}

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

@media (max-width:768px) {
    .main-menu {
        display: none;
        width: 100%;
        margin-top: 15px
    }

    .main-menu.show,
    .mobile-toggle {
        display: block
    }

    .main-menu .menu-list {
        flex-direction: column;
        gap: 0
    }

    .main-menu .menu-list li {
        border-bottom: 1px solid #e5e7eb
    }

    .nav-actions {
        flex-direction: column;
        width: 100%;
        margin-top: 10px
    }

    .hero-flex {
        flex-direction: column;
        text-align: center
    }

    .hero-content {
        max-width: 100%
    }

    .hero-title {
        font-size: 28px
    }

    .hero-description {
        font-size: 16px
    }
}

.homepage-latest-sites,
.homepage-metrics,
.homepage-most-visited {
    background-color: #f9fafb;
    padding: 60px 0
}

.metric-box {
    background-color: #fff;
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .03);
    transition: transform .2s, box-shadow .2s
}

.metric-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .05)
}

.how-step:hover,
.site-card:hover {
    transform: translateY(-6px)
}

.metric-box i {
    font-size: 32px;
    color: #6366f1;
    margin-bottom: 12px
}

.metric-box h3 {
    font-size: 28px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 8px
}

.metric-box p {
    font-size: 16px;
    color: #6b7280;
    margin: 0
}

.homepage-how-it-works {
    background-color: #f3f4f6;
    padding: 60px 0
}

.how-grid {
    margin-top: 40px
}

.how-step {
    background-color: #fff;
    border-radius: 16px;
    padding: 24px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .03);
    transition: transform .2s
}

.step-icon {
    width: 64px;
    height: 64px;
    background-color: #e0e7ff;
    color: #4338ca;
    font-size: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    margin: 0 auto 16px
}

.click-count,
.site-score {
    color: #10b981;
    font-weight: 600
}

.how-step h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #1f2937
}

.category-card p,
.how-step p {
    font-size: 15px;
    color: #6b7280;
    margin: 0
}

.homepage-categories,
.homepage-top-rated {
    padding: 60px 0;
    background-color: #fff
}

.glossary-grid,
.latest-site-grid,
.top-rated-grid,
.visited-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-top: 30px
}

.site-card {
    background-color: #f9fafb;
    border-radius: 16px;
    padding: 20px;
    border: 1px solid #e5e7eb;
    transition: box-shadow .2s, transform .2s
}

.site-card:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, .05)
}

.site-logo img {
    max-height: 60px;
    object-fit: contain;
    height: 100%
}

.site-logo {
    display: flex;
    align-items: center
}

.site-info h3 {
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 4px;
    color: #111827
}

.site-info p {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 6px
}

.site-score {
    font-size: 16px
}

.visited-card {
    background-color: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .02);
    transition: transform .2s
}

.visited-card:hover {
    transform: translateY(-5px)
}

.highlight-title,
.visited-info h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 6px
}

.visited-info p {
    font-size: 14px;
    color: #6b7280
}

.visited-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px
}

.click-count {
    font-size: 14px
}

.homepage-highlight {
    background-color: #fff;
    padding: 60px 0;
    position: relative;
    z-index: 9
}

.article-list,
.highlight-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    margin-top: 30px
}

.highlight-card {
    display: flex;
    flex-direction: column;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    overflow: hidden;
    background-color: #f9fafb;
    transition: box-shadow .2s, transform .2s
}

.highlight-card:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, .05);
    transform: translateY(-6px)
}

.highlight-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-bottom: 1px solid #e5e7eb
}

.highlight-body {
    padding: 20px
}

.highlight-desc {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 16px
}

.highlight-badge {
    background-color: #e0e7ff;
    color: #4338ca;
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 6px
}

.random-site-suggestion {
    background-color: #eef2ff;
    padding: 60px 0;
    text-align: center
}

.random-box {
    max-width: 500px;
    margin: 20px auto 0;
    background-color: #fff;
    padding: 30px 24px;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .04)
}

.random-icon {
    margin-bottom: 20px;
    color: #4f46e5
}

.small-note {
    margin-top: 12px;
    font-size: 13px;
    color: #6b7280
}

.latest-site-card {
    background-color: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 20px;
    transition: box-shadow .2s
}

.latest-site-card:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, .04)
}

.latest-site-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px
}

.site-thumb {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid #e5e7eb
}

.site-meta h3 {
    font-size: 16px;
    margin: 0
}

.badge {
    display: inline-block;
    background-color: #e0f2fe;
    color: #0369a1;
    padding: 2px 8px;
    font-size: 12px;
    border-radius: 6px;
    margin-top: 4px
}

.site-description {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 10px
}

.homepage-articles,
.seo-glossary {
    background-color: #fff;
    padding: 60px 0
}

.article-card {
    background-color: #f9fafb;
    padding: 20px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    transition: box-shadow .2s
}

.article-card:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, .03)
}

.article-meta {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #9ca3af;
    margin-bottom: 10px
}

.article-category {
    background-color: #fee2e2;
    color: #b91c1c;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 500
}

.article-date {
    font-style: italic
}

.article-card h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 6px 0
}

.article-card p {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 14px
}

.read-more {
    font-size: 14px;
    color: #6366f1;
    font-weight: 600
}

.read-more:hover,
.site-list a:hover {
    text-decoration: underline
}

.homepage-subscribe {
    background-color: #f0fdf4;
    padding: 60px 0
}

.subscribe-form {
    max-width: 500px;
    margin: 20px auto 0
}

.subscribe-input-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px
}

.privacy-note {
    font-size: 13px;
    color: #6b7280
}

.glossary-card {
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
    transition: transform .2s
}

.glossary-card:hover {
    transform: translateY(-4px)
}

.term-key {
    font-weight: 700;
    color: #2563eb;
    font-size: 16px
}

.glossary-card h3 {
    font-size: 17px;
    margin-bottom: 8px
}

.glossary-card p {
    font-size: 14px;
    color: #4b5563
}

footer.footer {
    background-color: #111827;
    color: #d1d5db;
    padding: 60px 0 20px
}

.footer-top {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    margin-bottom: 40px
}

.footer-logo {
    font-size: 22px;
    font-weight: 700;
    color: #10b981
}

.footer-credits a:hover,
.footer-links a:hover,
.footer-logo span,
.footer-social a:hover {
    color: #fff
}

.footer-brand p {
    font-size: 14px;
    color: #9ca3af;
    margin-top: 10px;
    line-height: 1.6
}

.footer-contact h3,
.footer-credits h3,
.footer-links h3 {
    color: #f9fafb;
    font-size: 16px;
    margin-bottom: 12px
}

.footer-credits ul,
.footer-links ul {
    list-style: none;
    padding: 0
}

.footer-credits li,
.footer-links li {
    margin-bottom: 8px
}

.footer-credits a,
.footer-links a {
    color: #9ca3af;
    font-size: 14px;
    text-decoration: none
}

.footer-contact p {
    font-size: 14px;
    margin-bottom: 10px
}

.footer-contact a {
    color: #10b981;
    text-decoration: underline
}

.footer-social a {
    margin-right: 12px;
    font-size: 18px;
    color: #9ca3af;
    transition: color .2s
}

.footer-bottom {
    border-top: 1px solid #1f2937;
    padding-top: 20px;
    font-size: 13px;
    color: #6b7280
}

.homepage-popular-categories {
    padding: 60px 0;
    background: #f9fafb
}

.popular-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
    margin-top: 30px
}

.category-card:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, .08);
    transform: translateY(-6px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, .05)
}

.category-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    justify-content: center;
    flex-wrap: wrap
}

.site-list {
    margin-top: 12px;
    padding-left: 20px;
    font-size: 14px;
    text-align: left
}

.site-list li {
    list-style-type: disc;
    margin-bottom: 4px
}

.site-list a {
    color: #2563eb;
    text-decoration: none
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
    margin-top: 30px
}

.category-card {
    background: linear-gradient(135deg, #eef2ff, #fdf4ff);
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    transition: transform .3s, box-shadow .3s
}

.category-card i {
    font-size: 28px;
    color: #6366f1;
    margin-bottom: 12px
}

.category-card h3 {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 8px
}

.form-item,
input[type=email],
input[type=text],
input[type=url],input[type=password],
textarea,button {
    font-family: inherit;
    padding: 15px;
    border: 1px solid var(--border-color);
    color: inherit;
    outline: 0;
    border-radius: 3px;
    background: #fff0;
    font-size: 16px;
    line-height: 1.5;
    display: inline-block;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out
}

@media (prefers-reduced-motion:reduce) {
    .form-item {
        transition: none
    }
}

.form-item:focus,
input[type=email]:focus,
input[type=text]:focus,input[type=password]:focus,
textarea:focus {
    border-color: rgb(var(--default-rgb) / 25%);
    outline: 0;
    box-shadow: 0 0 0 .25rem rgb(var(--default-rgb) / 15%)
}

.subscribe-input-group input,
.w-100 {
    width: 100%
}

.visually-hidden {
    visibility: hidden;
    height: 0;
    width: 0;
    overflow: hidden;
    text-indent: -99999px
}

.site-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px
}

.site-link {
    margin-top: 12px
}

.section-title {
    margin-bottom: .5rem
}

.section-subtitle {
    margin-bottom: 2rem;
    color: #6b7280;
    font-size: 15px
}
.select2-results__option .flag-icon,
.select2-selection__rendered .flag-icon {
    margin-right: 8px;
    vertical-align: middle;
    width: 16px;
    height: 12px;
    display: inline-block;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}

.language-select {
    width:300px;
}
.language-select select {
    width:100%
}
.topbar-right {
    display: flex;
    align-items:center
}
/* Header'daki dil seçici alan */
.language-select {
    margin-left: 12px;
    width: auto;
    min-width: 140px;
    max-width: 200px;
    display: flex;
    align-items: center;
}

.language-select .select2-container--default .select2-selection--single {
    background-color: #1f2937;
    border: 1px solid #374151;
    border-radius: 6px;
    height: 37.59px;
    padding: 6px 10px;
    font-size: 16px;
    color: #f3f4f6;
}
.language-select .select2-container--default .select2-selection--single .select2-container--open {
    border-bottom:none !important;
}
.language-select .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 37.59px;
    top: 0;
    right: 6px;
}

/* Flag ikonları */
.language-select .flag-icon {
    width: 20px !important;
    height: 17px !important;
    border-radius: 2px;
    object-fit: cover;
    margin-right: 8px !important;
}

/* Dropdown item görünümü */
.language-select .select2-results__option {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Seçili öğe görünümü */
.language-select .select2-selection__rendered {
    display: flex !important;
    align-items: center;
    gap: 8px;
    color: #f3f4f6 !important;
    line-height: inherit !important;
    padding-right:25px !important
}
.language-select .select2-selection__rendered > span {
    display:flex;
    align-items:center;
}
.language-select-open.select2-dropdown {
    background:#1f2937;
    border-color: #374151;
    color: white;
}
.select2-container--default .language-select-open .select2-results__option--highlighted.select2-results__option--selectable,.select2-container--default .language-select-open .select2-results__option--selected {
    background:#0b1016 !important;
    border-color:red;
}
.auth-container {
    background: #fff;
    border-radius: 16px;
    padding: 40px 32px;
    box-shadow: var(--sh);
    display: flex;
    flex-direction: column;
    gap: 28px;
    max-width: 100%;
    width: 100%;
    font-family: inherit;
}

.auth-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    gap: 2px;
    border-radius: 10px;
    overflow: hidden;
}

.auth-tab {
    flex: 1;
    padding: 14px 18px;
    font-weight: 600;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
    background: var(--secondary);
    border: none;
    transition: all 0.2s ease;
    color: var(--text-color);
    outline: none;
}

.auth-tab:focus-visible {
    outline: 2px dashed var(--default);
    outline-offset: 2px;
}

.auth-tab.active {
    background: var(--default);
    color: white;
}

.auth-form {
    display: none;
    flex-direction: column;
    gap: 18px;
    margin-top: 20px;
}

.auth-form.active {
    display: flex;
}

.auth-form input:focus {
    border-color: var(--default);
    box-shadow: 0 0 0 2px rgb(var(--default-rgb) / 25%);
    outline: none;
}


.form-remember {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #4b5563;
    margin-top: -4px;
}

.forgot-password {
    text-align: center;
    font-size: 14px;
    color: var(--blue);
    margin-top: 10px;
    display: inline-block;
}

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

.error-input {
    border-color: var(--red) !important;
    border-width: 2px !important;
}

.error {
    background: rgb(var(--red-rgb) / 15%);
    color: var(--red);
    font-weight: 500;
    padding: 10px 14px;
    border-radius: 6px;
    display: none;
    font-size: 14px;
    width: 100%;
    margin-top: 10px;
}

fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

legend {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 20px;
    color: var(--text-color);
}
.form-label {
    margin-bottom: 10px;
    font-weight:500;
    display: block;
}
.m-0 {
  margin: 0 !important;
}

.m-1 {
  margin: 0.25rem !important;
}

.m-2 {
  margin: 0.5rem !important;
}

.m-3 {
  margin: 1rem !important;
}

.m-4 {
  margin: 1.5rem !important;
}

.m-5 {
  margin: 3rem !important;
}

.m-auto {
  margin: auto !important;
}

.mx-0 {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.mx-1 {
  margin-right: 0.25rem !important;
  margin-left: 0.25rem !important;
}

.mx-2 {
  margin-right: 0.5rem !important;
  margin-left: 0.5rem !important;
}

.mx-3 {
  margin-right: 1rem !important;
  margin-left: 1rem !important;
}

.mx-4 {
  margin-right: 1.5rem !important;
  margin-left: 1.5rem !important;
}

.mx-5 {
  margin-right: 3rem !important;
  margin-left: 3rem !important;
}

.mx-auto {
  margin-right: auto !important;
  margin-left: auto !important;
}

.my-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.my-1 {
  margin-top: 0.25rem !important;
  margin-bottom: 0.25rem !important;
}

.my-2 {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

.my-3 {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}

.my-4 {
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

.my-5 {
  margin-top: 3rem !important;
  margin-bottom: 3rem !important;
}

.my-auto {
  margin-top: auto !important;
  margin-bottom: auto !important;
}

.mt-0 {
  margin-top: 0 !important;
}

.mt-1 {
  margin-top: 0.25rem !important;
}

.mt-2 {
  margin-top: 0.5rem !important;
}

.mt-3 {
  margin-top: 1rem !important;
}

.mt-4 {
  margin-top: 1.5rem !important;
}

.mt-5 {
  margin-top: 3rem !important;
}

.mt-auto {
  margin-top: auto !important;
}

.me-0 {
  margin-right: 0 !important;
}

.me-1 {
  margin-right: 0.25rem !important;
}

.me-2 {
  margin-right: 0.5rem !important;
}

.me-3 {
  margin-right: 1rem !important;
}

.me-4 {
  margin-right: 1.5rem !important;
}

.me-5 {
  margin-right: 3rem !important;
}

.me-auto {
  margin-right: auto !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.mb-1 {
  margin-bottom: 0.25rem !important;
}

.mb-2 {
  margin-bottom: 0.5rem !important;
}

.mb-3 {
  margin-bottom: 1rem !important;
}

.mb-4 {
  margin-bottom: 1.5rem !important;
}

.mb-5 {
  margin-bottom: 3rem !important;
}

.mb-auto {
  margin-bottom: auto !important;
}

.ms-0 {
  margin-left: 0 !important;
}

.ms-1 {
  margin-left: 0.25rem !important;
}

.ms-2 {
  margin-left: 0.5rem !important;
}

.ms-3 {
  margin-left: 1rem !important;
}

.ms-4 {
  margin-left: 1.5rem !important;
}

.ms-5 {
  margin-left: 3rem !important;
}

.ms-auto {
  margin-left: auto !important;
}

.p-0 {
  padding: 0 !important;
}

.p-1 {
  padding: 0.25rem !important;
}

.p-2 {
  padding: 0.5rem !important;
}

.p-3 {
  padding: 1rem !important;
}

.p-4 {
  padding: 1.5rem !important;
}

.p-5 {
  padding: 3rem !important;
}

.px-0 {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.px-1 {
  padding-right: 0.25rem !important;
  padding-left: 0.25rem !important;
}

.px-2 {
  padding-right: 0.5rem !important;
  padding-left: 0.5rem !important;
}

.px-3 {
  padding-right: 1rem !important;
  padding-left: 1rem !important;
}

.px-4 {
  padding-right: 1.5rem !important;
  padding-left: 1.5rem !important;
}

.px-5 {
  padding-right: 3rem !important;
  padding-left: 3rem !important;
}

.py-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.py-1 {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}

.py-2 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

.py-3 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

.py-4 {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

.py-5 {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}

.pt-0 {
  padding-top: 0 !important;
}

.pt-1 {
  padding-top: 0.25rem !important;
}

.pt-2 {
  padding-top: 0.5rem !important;
}

.pt-3 {
  padding-top: 1rem !important;
}

.pt-4 {
  padding-top: 1.5rem !important;
}

.pt-5 {
  padding-top: 3rem !important;
}

.pe-0 {
  padding-right: 0 !important;
}

.pe-1 {
  padding-right: 0.25rem !important;
}

.pe-2 {
  padding-right: 0.5rem !important;
}

.pe-3 {
  padding-right: 1rem !important;
}

.pe-4 {
  padding-right: 1.5rem !important;
}

.pe-5 {
  padding-right: 3rem !important;
}

.pb-0 {
  padding-bottom: 0 !important;
}

.pb-1 {
  padding-bottom: 0.25rem !important;
}

.pb-2 {
  padding-bottom: 0.5rem !important;
}

.pb-3 {
  padding-bottom: 1rem !important;
}

.pb-4 {
  padding-bottom: 1.5rem !important;
}

.pb-5 {
  padding-bottom: 3rem !important;
}

.ps-0 {
  padding-left: 0 !important;
}

.ps-1 {
  padding-left: 0.25rem !important;
}

.ps-2 {
  padding-left: 0.5rem !important;
}

.ps-3 {
  padding-left: 1rem !important;
}

.ps-4 {
  padding-left: 1.5rem !important;
}

.ps-5 {
  padding-left: 3rem !important;
}
.password {
    position:relative;
}
.password-toggle {
    position:absolute;
    right: 17px;
    bottom:0;
    top:0;
    margin:auto;
    height:max-content;
    cursor:pointer;
    color:var(--default);
    width:max-content;
    background:none;
    border:none;
    padding: 0;
}

.password-strength {
    margin-bottom: 11px;
    margin-top: 8px;
    background: #e5e7eb;
    border-radius: 6px;
    height: 8px;
    position: relative;
    overflow: hidden;
}

.strength-bar {
    height: 100%;
    width: 0%;
    transition: width 0.3s ease;
}

.strength-text {
    margin-top: 6px;
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
}

/* Güç renkleri */
.strength-weak {
    background-color: #ef4444;
}

.strength-medium {
    background-color: #f59e0b;
}

.strength-strong {
    background-color: #10b981;
}