/* Premium retail login. The only image dependency lives in files/. */
:root {
    color-scheme: light;
    --rl-u: clamp(.6864px, .0526316vw, .88px); /* -12% compact scale, desktop */
    --rl-ink: #062f3c;
    --rl-gold: #e7bd69;
    --rl-serif: "Times New Roman", "Liberation Serif", Times, serif;
    --rl-sans: "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: #04252d; }
body.retail-login {
    margin: 0;
    min-width: 320px;
    color: var(--rl-ink);
    font-family: var(--rl-serif);
    -webkit-font-smoothing: antialiased;
    background: #04252d;
}
body.retail-login::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: linear-gradient(90deg, rgba(0, 21, 29, .2), rgba(0, 23, 30, .06) 55%, rgba(0, 22, 29, .02)), url("../../files/retail-login-background.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: .45;
}
button, input { font: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
button { touch-action: manipulation; }
[hidden] { display: none !important; }
svg { display: block; }
.icon { width: 32px; height: 32px; flex-shrink: 0; }
.login-page { position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
.login-shell { position: relative; flex: 1; width: 83.25%; max-width: calc(1392 * var(--rl-u)); margin: 0 auto; padding-top: calc(118 * var(--rl-u)); padding-bottom: calc(46 * var(--rl-u)); }
.brand { position: absolute; top: calc(61 * var(--rl-u)); left: 0; display: inline-flex; align-items: center; gap: calc(24 * var(--rl-u)); max-width: 52%; text-decoration: none; }
.brand-icon { width: calc(54 * var(--rl-u)); height: calc(66 * var(--rl-u)); color: #f1c975; stroke-width: 1.5; overflow: visible; }
.brand-copy { display: block; min-width: 0; }
.brand-name { display: block; color: #fffdf6; font-size: calc(38 * var(--rl-u)); font-weight: 700; line-height: 1.05; text-transform: uppercase; letter-spacing: .7px; overflow-wrap: anywhere; text-shadow: 0 2px 12px #001e28; }
.brand-subtitle { display: block; margin-top: calc(5 * var(--rl-u)); color: #efd091; font-family: var(--rl-sans); font-size: calc(12 * var(--rl-u)); font-weight: 400; letter-spacing: calc(6.3 * var(--rl-u)); text-transform: uppercase; }
.login-layout { display: grid; grid-template-columns: minmax(0, 1fr) calc(540 * var(--rl-u)); gap: calc(118 * var(--rl-u)); padding-right: calc(78 * var(--rl-u)); align-items: start; }
.hero { min-width: 0; padding-top: calc(108 * var(--rl-u)); padding-left: calc(6 * var(--rl-u)); color: #fffdf8; }
.hero-eyebrow { display: flex; align-items: center; gap: calc(18 * var(--rl-u)); margin: 0; color: #ffe4a3; font-family: var(--rl-sans); font-size: calc(12 * var(--rl-u)); line-height: 1.5; font-weight: 600; letter-spacing: calc(3.5 * var(--rl-u)); text-transform: uppercase; white-space: nowrap; }
.hero-eyebrow > span { width: calc(52 * var(--rl-u)); height: 2px; background: #edc56f; flex-shrink: 0; }
.hero-heading { position: relative; margin: calc(11 * var(--rl-u)) 0 0; font-size: calc(114 * var(--rl-u)); font-style: italic; font-weight: 700; line-height: .79; letter-spacing: calc(-1.8 * var(--rl-u)); text-shadow: 0 3px 12px rgba(0, 21, 29, .15); }
.hero-heading > span { display: block; white-space: nowrap; }
.hero-heading-gold { color: #e9c371; }
.hero-flourish { width: calc(258 * var(--rl-u)); height: calc(29 * var(--rl-u)); margin-top: calc(-2 * var(--rl-u)); margin-left: calc(-4 * var(--rl-u)); color: #efc56e; }
.hero-description { margin: calc(14 * var(--rl-u)) 0 calc(18 * var(--rl-u)); font-size: calc(27 * var(--rl-u)); line-height: 1.12; letter-spacing: .15px; text-shadow: 0 2px 10px #001c24; }
.hero-description > span { color: #a0dfeb; }
.feature-list { display: grid; grid-template-columns: .94fr 1.02fr 1.02fr; gap: calc(14 * var(--rl-u)); margin: 0; padding: 0; list-style: none; }
.feature { display: flex; min-width: 0; min-height: calc(108 * var(--rl-u)); flex-direction: column; justify-content: center; align-items: center; gap: calc(10 * var(--rl-u)); padding: calc(13 * var(--rl-u)) calc(7 * var(--rl-u)); border: 1px solid rgba(226, 188, 112, .78); border-radius: calc(11 * var(--rl-u)); background: linear-gradient(130deg, rgba(0, 37, 46, .91), rgba(0, 42, 53, .75)); box-shadow: inset 0 0 0 2px rgba(1, 31, 39, .28), 0 5px 18px rgba(0, 17, 24, .08); color: white; font-size: calc(18 * var(--rl-u)); line-height: 1.2; text-align: center; white-space: nowrap; }
.feature .icon { width: calc(41 * var(--rl-u)); height: calc(41 * var(--rl-u)); color: #f0c86e; stroke-width: 1.65; }
.hero-signature { display: flex; align-items: center; justify-content: center; gap: calc(18 * var(--rl-u)); margin: calc(18 * var(--rl-u)) 0 0; color: #f4dfa9; font-size: calc(18 * var(--rl-u)); font-style: italic; line-height: 1.35; white-space: nowrap; }
.hero-signature > span { height: 1px; width: calc(85 * var(--rl-u)); background: linear-gradient(90deg, transparent, #d5ac5a); }
.hero-signature > span:last-child { transform: rotate(180deg); }

.login-card { position: relative; isolation: isolate; width: 100%; overflow: hidden; padding: calc(34 * var(--rl-u)) calc(56 * var(--rl-u)) calc(24 * var(--rl-u)); border: 2px solid #ddb15d; border-radius: calc(26 * var(--rl-u)); background-color: #faf8f1; background-image: radial-gradient(ellipse at 68% 8%, rgba(255, 255, 255, .82), transparent 50%), repeating-linear-gradient(118deg, rgba(141, 109, 54, .018) 0, rgba(141, 109, 54, .018) 1px, transparent 1px, transparent 4px); box-shadow: 0 0 0 2px rgba(248, 226, 175, .95), 0 13px 45px rgba(0, 19, 24, .37), inset 0 0 0 3px #fffdf9; }
.login-card::after { content: ""; position: absolute; inset: 4px; z-index: 5; border: 1px solid rgba(192, 143, 59, .8); border-radius: calc(20 * var(--rl-u)); pointer-events: none; }
.card-corner-top { position: absolute; z-index: -1; top: 0; left: 0; width: calc(290 * var(--rl-u)); height: calc(285 * var(--rl-u)); pointer-events: none; }
.card-corner-motto { position: absolute; z-index: 1; top: calc(29 * var(--rl-u)); right: calc(29 * var(--rl-u)); width: calc(108 * var(--rl-u)); margin: 0; color: #a57224; text-align: center; font-size: calc(18 * var(--rl-u)); font-style: italic; line-height: 1.23; pointer-events: none; }
.card-heading { position: relative; left: calc(10 * var(--rl-u)); z-index: 2; text-align: center; }
.company-medallion { position: relative; display: grid; place-items: center; width: calc(100 * var(--rl-u)); height: calc(100 * var(--rl-u)); margin: 0 auto; border: 1px solid #c49643; border-radius: 50%; background: linear-gradient(135deg, #fffdf6, #f7f5ea); box-shadow: 0 7px 16px rgba(29, 47, 42, .16), inset 0 0 0 2px #fff8dd, inset 0 0 0 3px #b78433; }
.company-medallion::after { content: ""; position: absolute; inset: 4px; border: 1px solid #edcb80; border-radius: 50%; pointer-events: none; }
.company-monogram { position: relative; display: flex; align-items: center; justify-content: center; font-family: var(--rl-serif); font-size: calc(58 * var(--rl-u)); font-weight: 400; line-height: 1; text-shadow: 1px 1px 0 #dfc17e; text-transform: uppercase; }
.company-monogram > span:first-child { transform: translate(calc(7 * var(--rl-u)), calc(-9 * var(--rl-u))); }
.company-monogram > span:nth-child(2) { margin-left: calc(-9 * var(--rl-u)); transform: translate(calc(-1 * var(--rl-u)), calc(9 * var(--rl-u))); }
.company-monogram > span:only-child { transform: none; }
.company-monogram > .icon { width: calc(44 * var(--rl-u)); height: calc(44 * var(--rl-u)); }
.company-logo { position: absolute; inset: 12%; width: 76%; height: 76%; object-fit: contain; border-radius: 8%; }
.has-company-logo .company-monogram { visibility: hidden; }
.company-name { display: grid; align-items: center; min-height: calc(48.16 * var(--rl-u)); margin: calc(5 * var(--rl-u)) 0 0; color: #042c39; font-size: calc(34 * var(--rl-u)); line-height: 1.12; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; overflow-wrap: anywhere; }
.company-name.company-name--medium { font-size: calc(30 * var(--rl-u)); }
.company-name.company-name--long { font-size: calc(25 * var(--rl-u)); }
.brand-name.company-name--medium { font-size: calc(32 * var(--rl-u)); }
.brand-name.company-name--long { font-size: calc(27 * var(--rl-u)); }
.card-subtitle { margin: calc(4 * var(--rl-u)) calc(-12 * var(--rl-u)) 0; font-size: calc(10 * var(--rl-u)); line-height: 1.5; font-weight: 600; letter-spacing: calc(5.3 * var(--rl-u)); text-transform: uppercase; }
.ornament-divider { display: flex; align-items: center; justify-content: center; gap: calc(10 * var(--rl-u)); height: calc(13 * var(--rl-u)); }
.ornament-divider > span { height: 1px; flex: 1; background: linear-gradient(90deg, rgba(204, 165, 88, .25), #c99a44); }
.ornament-divider > span:last-child { transform: rotate(180deg); }
.ornament-divider > i { position: relative; display: block; width: calc(9 * var(--rl-u)); height: calc(9 * var(--rl-u)); transform: rotate(45deg); border: 1px solid #b67e27; }
.ornament-divider > i::after { content: ""; position: absolute; inset: 2px; background: #d9b16b; }
.ornament-divider--short { width: calc(115 * var(--rl-u)); margin: calc(5 * var(--rl-u)) auto calc(14 * var(--rl-u)); gap: calc(7 * var(--rl-u)); }
.ornament-divider--short > i { width: calc(7 * var(--rl-u)); height: calc(7 * var(--rl-u)); }
.ornament-divider--short > i::after { inset: 1px; }
.welcome-banner { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: calc(12 * var(--rl-u)); min-height: calc(52 * var(--rl-u)); padding: calc(8 * var(--rl-u)) 12px; border: 1px solid #c8e0d7; border-radius: calc(11 * var(--rl-u)); background: linear-gradient(#f0f7ef, #e8f3eb); box-shadow: inset 0 1px 0 rgba(255,255,255,.9); font-size: calc(24 * var(--rl-u)); font-style: italic; font-weight: 700; }
.welcome-banner .icon { width: calc(28 * var(--rl-u)); height: calc(30 * var(--rl-u)); color: #087466; stroke-width: 2; }
.login-form { position: relative; z-index: 3; margin-top: calc(14 * var(--rl-u)); }
.form-field + .form-field { margin-top: calc(18 * var(--rl-u)); }
.form-field > label { display: block; margin-bottom: calc(6 * var(--rl-u)); font-size: max(14px, calc(17 * var(--rl-u))); line-height: 1.25; }
.input-shell { position: relative; display: flex; align-items: center; min-height: max(44px, calc(52 * var(--rl-u))); border: 1px solid #b9c8ce; border-radius: calc(11 * var(--rl-u)); background: rgba(255, 255, 255, .94); box-shadow: inset 0 1px 2px rgba(48, 83, 94, .035); transition: border-color .18s, box-shadow .18s; }
.input-shell:focus-within { border-color: #147b7b; box-shadow: 0 0 0 3px rgba(22, 113, 112, .13); }
.input-icon { position: absolute; left: calc(17 * var(--rl-u)); width: calc(24 * var(--rl-u)); height: calc(24 * var(--rl-u)); color: #3d6579; stroke-width: 1.8; pointer-events: none; }
.input-shell input { width: 100%; min-width: 0; height: max(44px, calc(50 * var(--rl-u))); padding: 0 calc(16 * var(--rl-u)) 0 calc(58 * var(--rl-u)); border: 0; outline: none; border-radius: inherit; color: #173f4d; background: transparent; font-family: var(--rl-serif); font-size: max(16px, calc(17 * var(--rl-u))); line-height: normal; }
.input-shell input::placeholder { color: #8294aa; opacity: 1; }
.input-shell input:-webkit-autofill { -webkit-text-fill-color: #173f4d; -webkit-box-shadow: 0 0 0 1000px #f2f8f4 inset; }
.password-shell input { padding-right: max(46px, calc(52 * var(--rl-u))); }
.password-toggle { position: absolute; top: 0; right: 3px; display: flex; justify-content: center; align-items: center; width: max(44px, calc(50 * var(--rl-u))); height: 100%; padding: 0; border: 0; border-radius: 8px; color: #3d6579; background: transparent; cursor: pointer; }
.password-toggle .icon { width: calc(25 * var(--rl-u)); height: calc(25 * var(--rl-u)); }
.password-toggle:hover { color: #00645f; background: #edf5f1; }
.eye-slash { display: none; }
.password-toggle[aria-pressed="true"] .eye-slash { display: block; }
.form-links { display: flex; justify-content: flex-end; margin-top: calc(9 * var(--rl-u)); font-size: max(14px, calc(15 * var(--rl-u))); font-style: italic; line-height: 1.35; }
.form-links a { color: #055265; text-decoration: none; text-underline-offset: 3px; }
.form-links a:hover { text-decoration: underline; }
.sign-in-button { position: relative; display: flex; align-items: center; justify-content: center; gap: calc(18 * var(--rl-u)); width: calc(100% + 20 * var(--rl-u)); min-height: calc(65 * var(--rl-u)); margin: calc(17 * var(--rl-u)) calc(-10 * var(--rl-u)) 0; padding: calc(9 * var(--rl-u)) 20px; border: 2px solid #d6a94f; border-radius: calc(27 * var(--rl-u)); color: #fffdf8; background: linear-gradient(106deg, #002731 0%, #034958 52%, #07849a 100%); box-shadow: inset 0 0 0 1px #f4d493, inset 0 3px 0 rgba(255, 255, 255, .13), 0 10px 19px rgba(33, 54, 47, .18); font-size: calc(28 * var(--rl-u)); font-style: italic; font-weight: 700; line-height: 1.2; cursor: pointer; transition: box-shadow .18s, filter .18s, transform .18s; }
.sign-in-button:hover { filter: brightness(1.09); box-shadow: inset 0 0 0 1px #f6db9e, inset 0 3px 0 rgba(255, 255, 255, .15), 0 12px 24px rgba(18, 54, 47, .24); }
.sign-in-button:active { transform: translateY(1px); }
.sign-in-button:disabled { cursor: wait; filter: saturate(.75); }
.sign-in-arrow { display: grid; place-items: center; flex-shrink: 0; width: calc(40 * var(--rl-u)); height: calc(40 * var(--rl-u)); border-radius: 50%; color: #093b47; background: linear-gradient(140deg, #fff0b3, #d6a23d); box-shadow: inset 0 1px 1px #fff7d3, 0 2px 2px rgba(0, 25, 34, .16); }
.sign-in-arrow .icon { width: calc(25 * var(--rl-u)); height: calc(25 * var(--rl-u)); stroke-width: 2; }
.card-footer { position: relative; z-index: 2; margin-top: calc(22 * var(--rl-u)); text-align: center; }
.card-footer > .ornament-divider { margin: 0 calc(16 * var(--rl-u)); }
.card-signature { margin: calc(16 * var(--rl-u)) calc(-17 * var(--rl-u)) 0; font-size: calc(10 * var(--rl-u)); font-weight: 600; line-height: 1.5; letter-spacing: calc(2.9 * var(--rl-u)); text-transform: uppercase; }
.support-line { margin: calc(9 * var(--rl-u)) 0 0; font-size: max(13px, calc(17 * var(--rl-u))); line-height: 1.4; }
.support-line a { color: #005166; text-decoration: none; text-underline-offset: 3px; }
.support-line a:hover { text-decoration: underline; }
.support-line--plain { font-size: max(12px, calc(14 * var(--rl-u))); }
.card-corner-bottom { position: absolute; right: 0; bottom: 0; z-index: 1; width: calc(174 * var(--rl-u)); height: calc(150 * var(--rl-u)); opacity: .12; pointer-events: none; }
.page-footer { padding: 0 20px calc(37 * var(--rl-u)); color: rgba(255, 253, 247, .81); font-family: var(--rl-sans); font-size: max(12px, calc(14 * var(--rl-u))); line-height: 1.5; text-align: center; overflow-wrap: anywhere; text-shadow: 0 1px 5px #001c25; }
.login-error { position: relative; z-index: 2; display: flex; align-items: flex-start; gap: 9px; margin-top: 13px; padding: 10px 12px; border: 1px solid #d9a99b; border-radius: 8px; background: #fff2ed; color: #872f23; font-family: var(--rl-sans); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.login-error .icon { width: 20px; height: 20px; margin-top: 1px; }
.caps-lock-hint { margin: 7px 0 0; color: #8c570c; font-family: var(--rl-sans); font-size: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 20; top: 12px; left: 12px; transform: translateY(-160%); padding: 12px 18px; border: 2px solid #d4ab5e; border-radius: 7px; color: #073842; background: #fffaf0; font-family: var(--rl-sans); }
.skip-link:focus { transform: none; }
a:focus-visible, button:focus-visible { outline: 3px solid #b68434; outline-offset: 4px; }
.brand:focus-visible { outline-color: #ffdd8c; }

@media (min-width: 1800px) {
    .login-shell { padding-top: max(118px, calc((100svh - 705px) / 2)); }
    .brand { top: max(61px, calc((100svh - 860px) / 2)); }
}
@media (min-width: 1180px) and (max-height: 850px) {
    .login-shell { padding-bottom: calc(25 * var(--rl-u)); }
    .page-footer { padding-bottom: calc(28 * var(--rl-u)); }
}
@media (max-width: 1179px) {
    :root { --rl-u: .88px; }
    body.retail-login::before { background-image: linear-gradient(90deg, rgba(0, 24, 32, .5), rgba(0, 24, 32, .17)), url("../../files/retail-login-background.png"); background-position: 58% center; }
    .login-shell { display: flex; flex-direction: column; align-items: center; width: calc(100% - 48px); max-width: 760px; padding: 35px 0 32px; }
    .brand { position: static; max-width: 100%; gap: 17px; margin: 0 auto 32px; }
    .brand-icon { width: 43px; height: 52px; }
    .brand-name { font-size: 32px; }
    .brand-subtitle { font-size: 9px; letter-spacing: 5px; }
    .brand-name.company-name--medium { font-size: 28px; }
    .brand-name.company-name--long { font-size: 24px; }
    .login-layout { display: block; width: 100%; max-width: 540px; padding: 0; }
    .hero { display: none; }
    .card-heading { left: 0; }
    .page-footer { padding-bottom: 25px; font-size: 12px; }
}
@media (max-width: 600px) {
    .login-shell { width: calc(100% - 32px); padding-top: 25px; padding-bottom: 22px; }
    .brand { gap: 13px; margin-bottom: 25px; }
    .brand-icon { width: 36px; height: 47px; }
    .brand-name { font-size: 27px; letter-spacing: .2px; }
    .brand-name.company-name--medium { font-size: 23px; }
    .brand-name.company-name--long { font-size: 20px; }
    .brand-subtitle { font-size: 8px; letter-spacing: 3.7px; }
    .login-card { padding: 30px 26px 26px; border-radius: 24px; }
    .login-card::after { border-radius: 18px; }
    .card-corner-top { width: 205px; height: 202px; }
    .card-corner-motto { top: 25px; right: 17px; width: 77px; font-size: 13px; }
    .company-medallion { width: 88px; height: 88px; }
    .company-monogram { font-size: 51px; }
    .company-name { min-height: 38.08px; margin: 10px 0 0; font-size: 27px; }
    .company-name.company-name--medium { font-size: 25px; }
    .company-name.company-name--long { font-size: 22px; }
    .card-subtitle { margin: 6px -8px 0; font-size: 8px; letter-spacing: 2.8px; }
    .ornament-divider--short { margin: 11px auto 16px; }
    .welcome-banner { min-height: 48px; font-size: 22px; }
    .welcome-banner .icon { width: 26px; height: 28px; }
    .login-form { margin-top: 18px; }
    .form-field > label { font-size: 15px; }
    .input-shell { min-height: 50px; }
    .input-shell input { height: 48px; padding-left: 47px; }
    .input-icon { left: 13px; width: 22px; height: 22px; }
    .password-toggle { width: 44px; }
    .password-toggle .icon { width: 23px; height: 23px; }
    .form-links { margin-top: 11px; }
    .sign-in-button { width: 100%; min-height: 58px; margin: 18px 0 0; font-size: 25px; border-radius: 23px; }
    .sign-in-arrow { width: 35px; height: 35px; }
    .sign-in-arrow .icon { width: 22px; height: 22px; }
    .card-footer { margin-top: 20px; }
    .card-signature { margin: 12px -12px 0; font-size: 8px; letter-spacing: 1.7px; }
    .support-line { margin-top: 9px; font-size: 14px; }
    .support-line--plain { font-size: 12px; }
    .card-corner-bottom { width: 120px; height: 104px; }
}
@media (max-width: 369px) {
    .login-shell { width: calc(100% - 24px); }
    .login-card { padding: 28px 20px 25px; }
    .card-corner-top { width: 180px; height: 177px; }
    .card-corner-motto { right: 13px; width: 65px; font-size: 11px; }
    .company-name { min-height: 32.48px; font-size: 23px; }
    .card-subtitle { font-size: 7px; letter-spacing: 2.4px; }
    .card-signature { font-size: 7px; letter-spacing: 1.6px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* English/Turkish selector inherited from the current translated software.
   Positioned above the approved ivory card, never over its gold ornaments. */
.login-languages { position: absolute; z-index: 8; top: calc(57 * var(--rl-u)); right: calc(78 * var(--rl-u)); }
.login-languages .retail-auth-languages { display: flex; justify-content: flex-end; gap: 9px; margin: 0; }
.login-languages .retail-language-choice { min-height: 35px; padding: 6px 10px; border: 1px solid rgba(236,202,133,.6); border-radius: 7px; background: rgba(0,39,50,.8); color: #f0e8ce; font-family: var(--rl-sans); font-size: 11px; font-weight: 600; letter-spacing: .15px; box-shadow: 0 2px 8px rgba(1,16,23,.1); }
.login-languages .retail-language-choice:hover { background: rgba(6,70,80,.94); border-color: #eac478; color: white; }
.login-languages .retail-language-choice.is-active { background: #fff8e9; border-color: #deb25e; color: #063947; box-shadow: inset 0 0 0 1px rgba(255,255,255,.76), 0 3px 10px rgba(0,13,20,.12); }
.login-languages .retail-language-choice:focus-visible { outline: 3px solid #e8c36f; outline-offset: 2px; }
.login-languages .retail-language-choice img { width: 23px; height: 16px; }
.login-languages .retail-language-choice .retail-language-check { width: 12px; }
/* Tighten the dynamic name so it cannot touch the sculpted upper-left corner. */
.login-card .card-heading { left: 0; }
.login-card .company-name { max-width: 100%; padding-inline: 7px; font-size: calc(32 * var(--rl-u)); }
.login-card .company-name.company-name--medium { font-size: calc(27 * var(--rl-u)); }
.login-card .company-name.company-name--long { font-size: calc(22 * var(--rl-u)); }
/* Turkish labels are longer: wrapping instead of clipped headings or features. */
.hero-eyebrow { white-space: normal; }
.feature { white-space: normal; }
.card-corner-motto { overflow-wrap: break-word; }
.sign-in-button { font-family: var(--rl-serif); }
@media (max-width: 1179px) {
  .login-languages { position: static; align-self: center; margin: 0 auto 18px; }
  .login-languages .retail-auth-languages { justify-content: center; }
}
@media (max-width: 600px) {
  .login-languages { margin-top: -9px; margin-bottom: 18px; }
  .login-card .company-name { font-size: 26px; }
  .login-card .company-name.company-name--medium { font-size: 23px; }
  .login-card .company-name.company-name--long { font-size: 20px; }
  .brand-subtitle { letter-spacing: 2.4px; }
  .card-corner-motto { right: 15px; width: 78px; }
}
@media (max-width: 369px) {
  .login-languages .retail-language-choice { min-height: 33px; padding: 5px 8px; }
  .login-card .company-name { font-size: 23px; }
  .login-card .company-name.company-name--medium { font-size: 21px; }
  .login-card .company-name.company-name--long { font-size: 19px; }
}

/* 2026-10-25 compact revision (approximately 12% smaller).
   Keep the premium artwork, dynamic branding, language controls and form markup
   exactly as supplied by the translated build. Small screens receive explicit
   dimensions so previous fixed-pixel mobile rules follow the desktop scale. */
@media (min-width: 1800px) {
    .login-shell { padding-top: max(104px, calc((100svh - 630px) / 2)); }
    .brand { top: max(54px, calc((100svh - 860px) / 2)); }
}
@media (max-width: 1179px) {
    .login-shell { max-width: 690px; padding-top: 31px; padding-bottom: 27px; }
    .brand { gap: 15px; margin-bottom: 28px; }
    .brand-icon { width: 38px; height: 46px; }
    .brand-name { font-size: 28px; }
    .brand-name.company-name--medium { font-size: 25px; }
    .brand-name.company-name--long { font-size: 21px; }
    .brand-subtitle { font-size: 8px; letter-spacing: 4.3px; }
    .login-layout { max-width: 475px; }
    .login-languages { margin-bottom: 16px; }
    .login-languages .retail-language-choice { min-height: 33px; padding: 5px 9px; font-size: 10px; }
    .login-languages .retail-language-choice img { width: 21px; height: 15px; }
}
@media (max-width: 600px) {
    .login-shell { width: calc(100% - 48px); padding-top: 22px; padding-bottom: 18px; }
    .brand { gap: 11px; margin-bottom: 21px; }
    .brand-icon { width: 32px; height: 41px; }
    .brand-name { font-size: 24px; }
    .brand-name.company-name--medium { font-size: 21px; }
    .brand-name.company-name--long { font-size: 18px; }
    .brand-subtitle { font-size: 7px; letter-spacing: 2.9px; }
    .login-card { padding: 26px 23px 22px; border-radius: 21px; }
    .login-card::after { border-radius: 16px; }
    .card-corner-top { width: 180px; height: 178px; }
    .card-corner-motto { top: 22px; right: 15px; width: 68px; font-size: 12px; }
    .company-medallion { width: 78px; height: 78px; }
    .company-monogram { font-size: 45px; }
    .company-name { min-height: 34px; margin: 9px 0 0; font-size: 24px; }
    .card-subtitle { margin: 4px -7px 0; font-size: 7.5px; letter-spacing: 2.4px; }
    .ornament-divider--short { margin: 8px auto 12px; }
    .welcome-banner { min-height: 44px; font-size: 19px; }
    .welcome-banner .icon { width: 23px; height: 25px; }
    .login-form { margin-top: 15px; }
    .form-field + .form-field { margin-top: 14px; }
    .form-field > label { font-size: 14px; }
    .input-shell { min-height: 45px; }
    .input-shell input { height: 44px; padding-left: 42px; font-size: 16px; }
    .input-icon { left: 12px; width: 20px; height: 20px; }
    .password-toggle { width: 42px; }
    .password-toggle .icon { width: 22px; height: 22px; }
    .form-links { margin-top: 9px; font-size: 13px; }
    .sign-in-button { min-height: 52px; margin: 16px 0 0; font-size: 22px; border-radius: 20px; }
    .sign-in-arrow { width: 31px; height: 31px; }
    .sign-in-arrow .icon { width: 20px; height: 20px; }
    .card-footer { margin-top: 17px; }
    .card-signature { margin: 10px -9px 0; font-size: 7.5px; letter-spacing: 1.4px; }
    .support-line { margin-top: 7px; font-size: 13px; }
    .support-line--plain { font-size: 11px; }
    .card-corner-bottom { width: 106px; height: 92px; }
    .page-footer { padding-bottom: 20px; }
    .login-languages { margin-top: -8px; margin-bottom: 14px; }
    .login-languages .retail-language-choice { min-height: 34px; }
    .login-card .company-name { font-size: 23px; }
    .login-card .company-name.company-name--medium { font-size: 21px; }
    .login-card .company-name.company-name--long { font-size: 19px; }
}
@media (max-width: 369px) {
    .login-shell { width: calc(100% - 30px); }
    .login-card { padding: 24px 18px 20px; }
    .card-corner-top { width: 166px; height: 163px; }
    .card-corner-motto { right: 10px; width: 58px; font-size: 10.5px; }
    .company-name { min-height: 29px; }
    .card-subtitle { font-size: 6.8px; letter-spacing: 2px; }
    .card-signature { font-size: 7px; letter-spacing: 1.2px; }
    .login-card .company-name { font-size: 21px; }
    .login-card .company-name.company-name--medium { font-size: 19px; }
    .login-card .company-name.company-name--long { font-size: 17px; }
}