*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, sans-serif;
}

body{
    background:#fff;
    color:#111;
}

/* Header HTML is injected asynchronously by include-loader.js. Reserve its
   final height before that request completes so the login form never jumps. */
#headerContainer{
    min-height:72px;
    background:#000;
}

.container{
    padding:20px;
}

.role-step{
    width:100%;
}

.role-hint{
    color:#666;
    font-size:14px;
    margin:-6px 0 18px;
}

.role-choice{
    width:100%;
    min-height:78px;
    padding:16px 18px;
    margin-bottom:12px;
    border:1px solid #ddd;
    border-radius:14px;
    background:#f6f6f6;
    color:#111;
    display:flex;
    align-items:center;
    justify-content:space-between;
    text-align:left;
    cursor:pointer;
}

.role-choice strong,
.role-choice small{
    display:block;
}

.role-choice strong{
    font-size:17px;
    margin-bottom:4px;
}

.role-choice small{
    color:#666;
    font-size:13px;
}

.role-arrow{
    font-size:23px;
    line-height:1;
}

.role-back{
    border:0;
    background:transparent;
    color:#555;
    padding:0;
    margin:14px 0 2px;
    font-size:13px;
    cursor:pointer;
}

.title{
    font-size:20px;
    margin-top:20px;
    margin-bottom:15px;
    line-height:1.35;
}

.input-area{
    margin-bottom:15px;
}

.phone-row{
    display:flex;
    align-items:stretch;
    gap:10px;
    width:100%;
}

.country-box{
    display:none;
    position:relative;
    flex:0 0 92px;
}

.country-box.show{
    display:block;
}

.country-btn{
    width:100%;
    height:100%;
    min-height:54px;
    border-radius:12px;
    border:2px solid #000;
    background:#f3f3f3;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 10px;
    cursor:pointer;
}

.country-btn-left{
    display:flex;
    align-items:center;
    gap:8px;
}

.flag{
    font-size:24px;
    line-height:1;
}

.arrow{
    font-size:12px;
    color:#111;
    transition:transform 0.2s ease;
}

.country-box.open .arrow{
    transform:rotate(180deg);
}

.country-menu{
    display:none;
    position:absolute;
    top:calc(100% + 8px);
    left:0;
    width:180px;
    background:#fff;
    border:1px solid #ddd;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 10px 24px rgba(0,0,0,0.12);
    z-index:1000;
}

.country-box.open .country-menu{
    display:block;
}

.country-option{
    width:100%;
    border:none;
    background:#fff;
    padding:14px 12px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    cursor:pointer;
    font-size:15px;
}

.country-option:hover{
    background:#f6f6f6;
}

.country-option-left{
    display:flex;
    align-items:center;
    gap:8px;
}

input{
    width:100%;
    padding:15px;
    border-radius:12px;
    border:2px solid #000;
    font-size:16px;
    outline:none;
}

.main-input{
    min-height:54px;
    flex:1;
}

.btn-main{
    width:100%;
    padding:16px;
    background:#000;
    color:#fff;
    border:none;
    border-radius:12px;
    font-size:16px;
    font-weight:bold;
    margin-bottom:25px;
    cursor:pointer;
}

.btn-main:disabled,
.social:disabled{
    opacity:0.65;
    cursor:not-allowed;
}

.divider{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:20px;
}

.divider::before,
.divider::after{
    content:"";
    flex:1;
    height:1px;
    background:#ccc;
}

.social{
    width:100%;
    padding:15px;
    border-radius:12px;
    border:1px solid #ddd;
    background:#f6f6f6;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin-bottom:10px;
    font-size:15px;
    cursor:pointer;
    color:#111;
}

.social img{
    width:22px;
}

.info-text{
    font-size:12px;
    color:#666;
    margin-top:15px;
    line-height:1.4;
}

.loading{
    display:none;
    margin-top:10px;
    font-size:14px;
    color:#666;
}

.loading.show{
    display:block;
}

.error-text{
    display:none;
    margin-top:8px;
    font-size:13px;
    color:#d93025;
    line-height:1.4;
}

.error-text.show{
    display:block;
}

@media (max-width:640px){
    #headerContainer{
        min-height:70px;
    }
}

@media (max-width:480px){

    .country-box{
        flex:0 0 84px;
    }

    .country-menu{
        width:165px;
    }
}

/* =========================
   DESKTOP LOGIN MEASUREMENT
   Mobil görünüm korunur; sadece 1024px+ masaüstü ölçülendirme.
========================= */
@media (min-width:1024px){
    html,
    body{
        min-height:100%;
    }

    body{
        min-height:100vh;
        background:#fff;
        color:#111;
        font-family:Arial, Helvetica, sans-serif;
    }

    #headerContainer{
        position:relative;
        z-index:20;
        background:#000;
    }

    .container{
        width:min(420px, calc(100% - 64px));
        max-width:420px;
        min-height:auto;
        margin:clamp(44px, 8vh, 88px) auto 0;
        padding:0 0 56px;
        display:block;
        background:transparent;
        border:0;
        border-radius:0;
        box-shadow:none;
        overflow:visible;
    }

    .container::before,
    .container::after{
        content:none !important;
        display:none !important;
    }

    .container > *{
        width:100%;
        max-width:100%;
    }

    .title{
        margin:0 0 22px;
        font-size:28px;
        line-height:1.18;
        letter-spacing:-0.7px;
        font-weight:700;
        color:#111;
    }

    .input-area{
        margin-bottom:14px;
    }

    .phone-row{
        width:100%;
        gap:10px;
    }

    .country-box{
        flex:0 0 94px;
    }

    .country-btn,
    .main-input,
    input{
        min-height:56px;
        border-radius:12px;
        font-size:16px;
    }

    .country-btn{
        border:2px solid #000;
        background:#f3f3f3;
    }

    input{
        padding:0 15px;
        border:2px solid #000;
        background:#fff;
        color:#111;
    }

    .country-menu{
        width:190px;
        top:calc(100% + 8px);
    }

    .btn-main{
        width:100%;
        max-width:100%;
        min-height:56px;
        padding:0 18px;
        display:flex;
        align-items:center;
        justify-content:center;
        border-radius:12px;
        margin:0 0 24px;
        background:#000;
        color:#fff;
        font-size:16px;
        font-weight:700;
        line-height:1;
        box-shadow:none;
    }

    .divider{
        margin-bottom:20px;
        color:#555;
        font-size:14px;
    }

    .social{
        width:100%;
        max-width:100%;
        min-height:54px;
        padding:0 16px;
        border-radius:12px;
        border:1px solid #ddd;
        background:#f6f6f6;
        color:#111;
        font-size:15px;
        font-weight:600;
        box-shadow:none;
    }

    .social img{
        width:22px;
        height:22px;
        object-fit:contain;
    }

    .info-text{
        margin-top:15px;
        max-width:100%;
        font-size:12px;
        line-height:1.45;
        color:#666;
    }

    .loading{
        margin-top:10px;
        font-size:14px;
    }
}

@media (min-width:1440px){
    .container{
        width:420px;
        max-width:420px;
    }
}

/* Müşteri kayıt modu: siyah header üzerinde yalnız Temizlet logosu görünür. */
html.customer-register-mode #headerContainer .tmz-desktop-nav,
html.customer-register-mode #headerContainer .tmz-header-right,
html.customer-register-mode #headerContainer .right.tmz-header-right,
html.customer-register-mode #headerContainer .menu-icon,
html.customer-register-mode #headerContainer .tmz-fallback-menu-link{
    display:none !important;
}

html.customer-register-mode #headerContainer,
html.customer-register-mode #headerContainer .tmz-header{
    background:#000 !important;
}

html.customer-register-mode #headerContainer .tmz-header{
    justify-content:flex-start !important;
}

html.customer-register-mode #headerContainer .tmz-logo,
html.customer-register-mode #headerContainer .logo.tmz-logo{
    display:flex !important;
    align-items:center !important;
}

html.customer-register-mode #headerContainer .tmz-logo a,
html.customer-register-mode #headerContainer .logo.tmz-logo a{
    color:#fff !important;
}

/* Mobile auth: masaüstü kart ölçülerinden bağımsız telefon akışı. */
@media (max-width:768px){
    html,
    body{
        width:100%;
        min-width:0;
        min-height:100%;
        overflow-x:hidden;
    }

    body{
        min-height:100dvh;
    }

    .container{
        width:100%;
        max-width:440px;
        margin:0 auto;
        padding:28px 18px max(36px, env(safe-area-inset-bottom));
    }

    .title{
        margin-top:0;
        margin-bottom:18px;
        font-size:26px;
        line-height:1.18;
        letter-spacing:-.5px;
    }

    .role-hint{
        margin-top:-8px;
        margin-bottom:18px;
    }

    .role-choice{
        min-height:74px;
        padding:14px 16px;
        border-radius:14px;
        touch-action:manipulation;
    }

    .phone-row{
        min-width:0;
        gap:8px;
    }

    .country-box.show{
        flex:0 0 84px;
    }

    .main-input,
    .country-btn,
    input,
    .btn-main,
    .social{
        min-height:54px;
    }

    input{
        font-size:16px;
    }

    .btn-main,
    .social{
        touch-action:manipulation;
    }

    .social{
        padding:0 14px;
    }

    .info-text{
        line-height:1.5;
    }
}

@media (max-width:380px){
    .container{
        padding-left:14px;
        padding-right:14px;
    }

    .country-box.show{
        flex-basis:78px;
    }

    .role-choice strong{
        font-size:16px;
    }
}