.container {
    max-width: 1200px;
}

main.skil-home {
    padding-bottom: 120px;
    padding-top: 20px;
}

hr.line {
    border-top: 2px solid;
}

.crm-btn {
    -ms-transform: skewX(-20deg);
    /* IE 9 */
    -webkit-transform: skewX(-20deg);
    /* Safari */
    transform: skewX(-20deg);
    box-shadow: unset !important;
}

.crm-btn span {
    -ms-transform: skewX(20deg);
    /* IE 9 */
    -webkit-transform: skewX(20deg);
    /* Safari */
    transform: skewX(20deg);
    padding: 0 0;
    display: block;
}

.btn-reds {
    background: #d0222b;
    color: #fff !important;
    border-radius: 0;
    width: 95%;
    margin: auto;
    display: block;
    margin-bottom: 24px;
    font-family: Bebas Neue, Segoe UI, Helvetica Neue, Arial, sans-serif;
    font-size: 28px;
}

.btn-trans.crm-btn {
    border: 1px solid #08101a;
    color: #08101a;
    border-radius: unset;
    font-weight: 700;
    margin-bottom: 12px;
    background:transparent;
}

.login {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
}

.btn-trans {
    padding: 20px 40px;
    font-size: 20px;
}

body.home.crm {
    background: #fff;
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

body.home.crm p {

    color: #08101a;
}

section.page-title h1 {
    font-family: Bebas Neue, Segoe UI, Helvetica Neue, Arial, sans-serif;
    font-size: 2rem;
    text-transform: uppercase;
    line-height: .9;
    margin-top: 30px;
    margin-bottom: 40px;
    font-weight: 400;
    overflow-wrap: break-word;
    color: #08101a;
}

section.top-buttons {
    margin-top: 80px;
}


.search-wrapper {
    position: relative;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #aaa;
    padding-bottom: 8px;
    margin-bottom: 36px;
}

.search-wrapper input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 16px;
    padding: 0 35px;
    outline: unset;
    box-shadow: unset !important;
    border: unset;
    text-align: center;
}

.icon-left,
.icon-right {
    position: absolute;
    font-size: 18px;
    color: #444;
    cursor: pointer;
}

.icon-left {
    left: 0;
}

.icon-right {
    right: 0;
    opacity: 0.6;
}

#sr a {
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 16px;
    margin-bottom: 12px;
    display: block;
    text-align: center;
    border-bottom: 1px solid;
    color: #08101a;
    border-color: #08101a;
    padding-bottom: 8px;
}

#sr li {
    padding: 0 !important;
    color: #08101a;
    text-align: center;
}


/* Floating Label Wrapper */
.form-label-group {
    position: relative;
    width: 100%;
    margin-top: 1.5rem;
    margin-bottom: 8px;
}

/* Input */
.form-label-group>input {
    /* height: calc(3.5rem + 2px); */
    padding: 14px 8px;
    border-radius: 0;
    border: unset;
    border-bottom: 1px solid #000;
    width: 100%;
    border-color: #000 !important;
}

/* Label */
.form-label-group>label {
    position: absolute;
    top: 0;
    left: 0;
    padding: 1.25rem .75rem;
    transition: all 0.15s ease-in-out;
    pointer-events: none;
    color: #6c757d;
    padding-left: 0;
}

/* Floating Effect */
.form-label-group input:not(:placeholder-shown)~label,
.form-label-group input:focus~label {
    padding: 0;
    padding-top: 1rem;
    padding-left: 0;
    font-size: 75%;
    color: #495057;
    transform: translateY(-50%);
}

/* Placeholder görünmez ama boş olma kontrolü çalışır */
.form-label-group input::placeholder {
    color: transparent;
}

/* Focus shadow temizleme */
.form-label-group input:focus {
    box-shadow: none;
}

/* Senin tasarıma göre linkler */
.red-link {
    color: #c00;
    text-decoration: underline;
    font-size: 15px;
}

.auth-box {
    width: 50%;
}

.auth-box.register {
    width: 90%;
}

.auth-box input[type="checkbox"] {
    width: 22px;
    height: 22px;
    margin-top: 2px;
    margin-right: 8px;
    border-radius: .25rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    display: inline-block;
    vertical-align: middle;
    background-origin: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    flex-shrink: 0;
    color: #2563eb;
    background-color: #fff;
    border-color: #6b7280;
    border-width: 1px;
    --tw-shadow: 0 0 #0000;
}

.auth-box input[type="checkbox"]:checked {
    border-color: rgb(203 51 59);
    background-color: rgb(203 51 59);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E");
}


/* İkonu konumlandırmak için kapsayıcıyı relative yapıyoruz */
.password-wrapper {
    position: relative;
}

/* İkonun yerleşimi ve görünümü */
.password-toggle-icon {
    position: absolute;
    /* Sağdan ve dikey olarak ortalama */
    right: 10px;
    top: 20px; /* Label'ı es geçip input'un ortasına yakın olması için ayar */
    /* Input'un yüksekliğine göre bu top değeri değişebilir, gerekirse ayarla */

    cursor: pointer;
    z-index: 5; /* Input'un üzerinde kalması için */
    padding: 5px;
    line-height: 1; /* SVG'yi tam boyutunda gösterir */
}

/* Gizli Göz İkonu (üstü çizili) için stil */
.password-toggle-icon .hidden-eye {
    display: none; /* Varsayılan olarak gizli tutulacak */
}