﻿
/* ==========================================================
   QUICKFLY24 - FINAL LOGIN DESIGN
   Sadece tasarim katmani.
   Default.aspx.cs ve mevcut login kontrol ID'leri korunur.
   ========================================================== */

/* Eski MasterPage logo / Acente Girisi butonu */
header .top .logo,
header .top .logo a,
header .top .logo img,
header .top .agent_top_logout {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Diller mevcut MasterPage konumunda */
header .Language {
    position: relative !important;
    z-index: 1000 !important;
}

/* Mavi menü */
header .main-menu {
    position: relative !important;
    height: 48px !important;
    min-height: 48px !important;
}

/* ==========================================================
   ANA ALAN
   ========================================================== */

#qf-login {
    position: relative !important;
    width: 100% !important;
    height: calc(100vh - 164px) !important;
    min-height: 390px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    /* GERCEK DOSYA: Assets/images */
    background-image: url('/Assets/images/Quickfly24_login_background_bright.png') !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-color: #f4f7fb !important;
}

/* ==========================================================
   LOGO
   ========================================================== */

.qf-brand {
    position: absolute !important;
    z-index: 20 !important;
    left: 30px !important;
    top: 15px !important;
    width: 240px !important;
    max-width: 240px !important;
    margin: 0 !important;
    padding: 0 !important;
}

    .qf-brand img {
        display: block !important;
        width: 240px !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
        border-radius: 12px !important;
        box-shadow: 0 8px 24px rgba(0,0,0,.18) !important;
    }

.qf-brand-text {
    display: none !important;
}

/* ==========================================================
   LOGIN
   Logo ile ayni genislikte.
   Logo ezilmesin diye yeterli aralik var.
   ========================================================== */

.qf-card-wrap {
    position: absolute !important;
    z-index: 25 !important;
    left: 30px !important;
    top: 145px !important;
    right: auto !important;
    width: 240px !important;
    max-width: 240px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.qf-card {
    width: 240px !important;
    max-width: 240px !important;
    box-sizing: border-box !important;
    padding: 16px 18px 17px !important;
    background: rgba(255,255,255,.97) !important;
    border: 1px solid rgba(255,255,255,.98) !important;
    border-radius: 14px !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.20) !important;
}

.qf-title {
    margin: 0 !important;
    color: #173f78 !important;
    text-align: center !important;
    font-size: 21px !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
}

.qf-subtitle {
    margin: 4px 0 13px !important;
    color: #607797 !important;
    text-align: center !important;
    font-size: 9px !important;
    font-weight: 600 !important;
}

.qf-field {
    margin-bottom: 9px !important;
}

    .qf-field label {
        display: block !important;
        margin-bottom: 6px !important;
        color: #173f78 !important;
        font-size: 11px !important;
        font-weight: 700 !important;
    }

.qf-input {
    position: relative !important;
}

    .qf-input i {
        position: absolute !important;
        left: 10px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        color: #5275a6 !important;
        z-index: 2 !important;
    }

    .qf-input input {
        width: 100% !important;
        height: 36px !important;
        box-sizing: border-box !important;
        padding: 6px 9px 6px 32px !important;
        border: 1px solid #c6d4e5 !important;
        border-radius: 8px !important;
        background: #fff !important;
        color: #23344d !important;
        font-size: 10px !important;
        outline: none !important;
        box-shadow: none !important;
    }

        .qf-input input:focus {
            border-color: #176fc7 !important;
            box-shadow: 0 0 0 3px rgba(23,111,199,.12) !important;
        }

.qf-button {
    display: block !important;
    width: 100% !important;
    height: 37px !important;
    margin: 1px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: #176fc7 !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    box-shadow: 0 6px 15px rgba(23,111,199,.25) !important;
}

    .qf-button:hover {
        background: #125da8 !important;
    }

.qf-validator {
    display: none !important;
}

.qf-message:empty {
    display: none !important;
}

.qf-message {
    display: block !important;
    max-width: 330px !important;
    margin: 8px 0 0 !important;
    padding: 6px 8px !important;
    border-radius: 6px !important;
    background: rgba(255,255,255,.96) !important;
    color: #b42318 !important;
    text-align: center !important;
    font-size: 9px !important;
}

/* ==========================================================
   4 IKON - SAG ALT
   ========================================================== */

.qf-services {
    position: absolute !important;
    z-index: 15 !important;
    left: auto !important;
    right: 30px !important;
    bottom: 16px !important;
    width: 430px !important;
    max-width: 34% !important;
    height: 64px !important;
    padding: 0 8px !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: repeat(4,1fr) !important;
    align-items: center !important;
    background: rgba(255,255,255,.95) !important;
    border-radius: 13px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.15) !important;
}

.qf-service {
    min-height: 55px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-right: 1px solid #d5dce6 !important;
}

    .qf-service:last-child {
        border-right: 0 !important;
    }

    .qf-service i {
        width: 46px !important;
        height: 46px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        background: rgba(255,255,255,.97) !important;
        color: #1775cc !important;
        font-size: 18px !important;
        box-shadow: 0 5px 15px rgba(0,0,0,.13) !important;
    }

    .qf-service:nth-child(2) i {
        color: #f39b12 !important;
    }

    .qf-service:nth-child(3) i {
        color: #32b866 !important;
    }

    .qf-service:nth-child(4) i {
        color: #b74ad6 !important;
    }

    .qf-service span,
    .qf-service small {
        display: none !important;
    }

/* Footer */
#footer {
    position: relative !important;
    z-index: 50 !important;
    display: block !important;
}

/* ==========================================================
   PIN
   ========================================================== */

.qf-pin-info {
    padding: 9px 11px !important;
    margin-bottom: 10px !important;
    border-radius: 7px !important;
    background: #f2f7fc !important;
    color: #506176 !important;
    font-size: 10px !important;
    line-height: 1.4 !important;
}

.qf-pin-note {
    margin-top: 9px !important;
    color: #69778a !important;
    font-size: 9px !important;
    line-height: 1.35 !important;
}

.qf-pin-button {
    width: 100% !important;
    margin-top: 7px !important;
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 900px) {

    .qf-brand {
        left: 20px !important;
        top: 12px !important;
        width: 220px !important;
        max-width: 220px !important;
    }

        .qf-brand img {
            width: 220px !important;
        }

    .qf-card-wrap {
        left: 20px !important;
        top: 145px !important;
        width: 220px !important;
        max-width: 220px !important;
    }

    .qf-card {
        width: 220px !important;
        max-width: 220px !important;
    }

    .qf-services {
        right: 20px !important;
        width: 340px !important;
        max-width: 45% !important;
    }
}

@media (max-width: 650px) {

    #qf-login {
        height: auto !important;
        min-height: 720px !important;
    }

    .qf-brand {
        left: 50% !important;
        top: 18px !important;
        transform: translateX(-50%) !important;
        width: 220px !important;
        max-width: 220px !important;
    }

        .qf-brand img {
            width: 220px !important;
        }

    .qf-card-wrap {
        left: 50% !important;
        top: 150px !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        width: 315px !important;
        max-width: calc(100% - 24px) !important;
    }

    .qf-card {
        width: 315px !important;
        max-width: 100% !important;
    }

    .qf-services {
        left: 3% !important;
        right: 3% !important;
        bottom: 15px !important;
        width: 94% !important;
        max-width: 94% !important;
        height: 66px !important;
    }

    .qf-service i {
        width: 43px !important;
        height: 34px !important;
        font-size: 17px !important;
    }
}


/* QUICKFLY24 FINAL V7 - footer separation */
#footer, .footer, footer {
    min-height: 42px !important;
    height: 42px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 20 !important;
}


html, body {
    overflow-x: hidden !important;
}

/* QUICKFLY24 FINAL V8 - footer is a separate visible row */
#footer, .footer, footer {
    position: relative !important;
    z-index: 50 !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    box-sizing: border-box !important;
    display: block !important;
    overflow: visible !important;
}


/* QUICKFLY24 FINAL V10 - compact white header area */
header .top {
    height: 48px !important;
    min-height: 48px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
}

header .Language {
    top: 0 !important;
}

/* QUICKFLY24 FINAL V10 - remove unnecessary bottom white strip */
html, body {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

#footer, .footer, footer {
    margin-bottom: 0 !important;
}
