/*
 * Fiberport Paket 02.27 — Müşteri Girişi
 * Scope: yalnız .fp-customer-login
 */

.fp-customer-login {
    --cl-navy:#0b2239;
    --cl-blue:#075f96;
    --cl-cyan:#37a7df;
    --cl-ink:#172838;
    --cl-text:#53697b;
    --cl-muted:#748693;
    --cl-line:#d6e0e7;
    --cl-soft:#f4f7f9;
    --cl-green:#18734d;
    --cl-amber:#9b6516;
    color:var(--cl-ink);
    background:#fff;
}

.fp-customer-login *,
.fp-customer-login *::before,
.fp-customer-login *::after {
    box-sizing:border-box;
}

.fp-customer-login-hero {
    padding:30px 0 76px;
    background:linear-gradient(180deg,#f5f8fa 0%,#edf3f6 100%);
    border-bottom:1px solid var(--cl-line);
}

.fp-customer-login-breadcrumbs {
    margin-bottom:52px;
}

.fp-customer-login-breadcrumbs a {
    color:#526a7c;
}

.fp-customer-login-breadcrumbs a:hover,
.fp-customer-login-breadcrumbs a:focus-visible {
    color:var(--cl-blue);
}

.fp-customer-login-hero-grid {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(320px,.4fr);
    gap:clamp(54px,8vw,110px);
    align-items:center;
}

.fp-customer-login-kicker,
.fp-customer-login-eyebrow {
    display:inline-flex;
    gap:9px;
    align-items:center;
    color:var(--cl-blue);
    font-size:.72rem;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.fp-customer-login-kicker::before,
.fp-customer-login-eyebrow::before {
    width:22px;
    height:2px;
    content:"";
    background:currentColor;
}

.fp-customer-login-kicker {
    margin-bottom:20px;
}

.fp-customer-login-eyebrow {
    margin-bottom:17px;
}

.fp-customer-login-hero h1 {
    max-width:860px;
    margin:0;
    color:var(--cl-navy);
    font-family:"Segoe UI","Helvetica Neue",Arial,sans-serif;
    font-size:clamp(2.7rem,5.5vw,5.2rem);
    font-weight:650;
    letter-spacing:-.045em;
    line-height:1;
}

.fp-customer-login-hero-copy > p {
    max-width:730px;
    margin:25px 0 0;
    color:var(--cl-text);
    font-size:clamp(1.02rem,1.35vw,1.18rem);
    line-height:1.68;
}

.fp-customer-login-summary {
    position:relative;
    min-height:330px;
    overflow:hidden;
    padding:34px;
    color:#fff;
    background:var(--cl-navy);
    border-left:5px solid var(--cl-cyan);
}

.fp-customer-login-summary::before,
.fp-customer-login-summary::after {
    position:absolute;
    content:"";
    border:1px solid rgba(255,255,255,.15);
    border-radius:50%;
}

.fp-customer-login-summary::before {
    width:290px;
    height:290px;
    top:-115px;
    right:-88px;
}

.fp-customer-login-summary::after {
    width:180px;
    height:180px;
    top:-61px;
    right:-20px;
}

.fp-customer-login-summary > span {
    position:relative;
    z-index:1;
    display:block;
    margin-bottom:23px;
    color:#a9ddf7;
    font-size:.7rem;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.fp-customer-login-summary dl {
    position:relative;
    z-index:1;
    margin:0;
}

.fp-customer-login-summary dl > div {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:20px;
    align-items:end;
    padding:22px 0;
    border-top:1px solid rgba(255,255,255,.2);
}

.fp-customer-login-summary dt {
    color:rgba(255,255,255,.72);
    font-size:.7rem;
    font-weight:800;
    letter-spacing:.06em;
    text-transform:uppercase;
}

.fp-customer-login-summary dd {
    margin:0;
    color:#fff;
    font-size:clamp(2.5rem,4vw,4rem);
    font-weight:580;
    letter-spacing:-.06em;
    line-height:.9;
}

.fp-customer-login-intro {
    padding:clamp(72px,8vw,106px) 0;
    background:#fff;
}

.fp-customer-login-intro-grid {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(330px,.44fr);
    gap:clamp(48px,7vw,96px);
    align-items:end;
}

.fp-customer-login-intro h2 {
    max-width:760px;
    margin:0;
    color:var(--cl-navy);
    font-size:clamp(1.9rem,3.2vw,3.15rem);
    font-weight:650;
    letter-spacing:-.035em;
    line-height:1.1;
}

.fp-customer-login-intro-grid > p {
    margin:0;
    color:var(--cl-text);
    line-height:1.7;
}

.fp-customer-login-directory {
    padding:clamp(72px,8vw,108px) 0;
    background:var(--cl-soft);
    border-top:1px solid var(--cl-line);
    border-bottom:1px solid var(--cl-line);
}

.fp-customer-login-directory-head {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(180px,.24fr);
    gap:24px;
    padding:0 0 12px 58px;
    color:var(--cl-muted);
    font-size:.67rem;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.fp-customer-login-list {
    margin:0;
    padding:0;
    border-top:2px solid var(--cl-navy);
    list-style:none;
}

.fp-customer-login-list > li {
    display:grid;
    grid-template-columns:38px minmax(0,1fr) minmax(180px,.24fr) auto;
    gap:20px;
    align-items:center;
    min-height:190px;
    padding:30px 0;
    border-bottom:1px solid var(--cl-line);
}

.fp-customer-login-number {
    align-self:start;
    padding-top:5px;
    color:var(--cl-blue);
    font-size:.68rem;
    font-weight:800;
    letter-spacing:.08em;
}

.fp-customer-login-product > small {
    color:var(--cl-muted);
    font-size:.66rem;
    font-weight:800;
    letter-spacing:.07em;
    text-transform:uppercase;
}

.fp-customer-login-product h2 {
    margin:9px 0 0;
    color:var(--cl-navy);
    font-size:clamp(1.25rem,2vw,1.8rem);
    font-weight:650;
    letter-spacing:-.02em;
    line-height:1.25;
}

.fp-customer-login-product p {
    max-width:690px;
    margin:12px 0 0;
    color:var(--cl-text);
    font-size:.88rem;
    line-height:1.6;
}

.fp-customer-login-status {
    display:flex;
    gap:10px;
    align-items:center;
}

.fp-customer-login-status > span {
    width:9px;
    height:9px;
    flex:0 0 auto;
    border-radius:50%;
}

.fp-customer-login-status strong {
    font-size:.76rem;
    font-weight:800;
    line-height:1.4;
}

.fp-customer-login-list .is-available .fp-customer-login-status {
    color:var(--cl-green);
}

.fp-customer-login-list .is-available .fp-customer-login-status > span {
    background:var(--cl-green);
    box-shadow:0 0 0 4px rgba(24,115,77,.12);
}

.fp-customer-login-list .is-unavailable .fp-customer-login-status {
    color:var(--cl-amber);
}

.fp-customer-login-list .is-unavailable .fp-customer-login-status > span {
    background:var(--cl-amber);
    box-shadow:0 0 0 4px rgba(155,101,22,.12);
}

.fp-customer-login-actions {
    display:flex;
    min-width:175px;
    flex-direction:column;
    gap:9px;
    align-items:stretch;
}

.fp-customer-login-primary,
.fp-customer-login-secondary {
    display:inline-flex;
    min-height:43px;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:0 15px;
    border-radius:4px;
    font-size:.76rem;
    font-weight:800;
    text-align:center;
    text-decoration:none;
}

.fp-customer-login-primary,
.fp-customer-login-primary:visited {
    color:#fff;
    -webkit-text-fill-color:#fff;
    background:var(--cl-blue);
    border:1px solid var(--cl-blue);
}

.fp-customer-login-primary:hover,
.fp-customer-login-primary:focus-visible {
    background:var(--cl-navy);
    border-color:var(--cl-navy);
}

.fp-customer-login-secondary,
.fp-customer-login-secondary:visited {
    color:var(--cl-blue);
    -webkit-text-fill-color:var(--cl-blue);
    background:#fff;
    border:1px solid var(--cl-blue);
}

.fp-customer-login-secondary:hover,
.fp-customer-login-secondary:focus-visible {
    color:#fff;
    -webkit-text-fill-color:#fff;
    background:var(--cl-blue);
}

.fp-customer-login-inline-icon {
    width:17px;
    height:17px;
}

.fp-customer-login-empty {
    max-width:760px;
    padding:42px;
    background:#fff;
    border-left:5px solid var(--cl-blue);
}

.fp-customer-login-empty > span {
    color:var(--cl-blue);
    font-size:.7rem;
    font-weight:800;
}

.fp-customer-login-empty h2 {
    margin:17px 0 0;
    color:var(--cl-navy);
}

.fp-customer-login-empty p {
    margin:12px 0 0;
    color:var(--cl-text);
}

.fp-customer-login-notice {
    padding:clamp(68px,8vw,100px) 0;
    background:#fff;
}

.fp-customer-login-notice-inner {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:48px;
    align-items:center;
    padding:clamp(36px,5vw,56px);
    color:#fff;
    background:var(--cl-navy);
    border-left:5px solid var(--cl-cyan);
}

.fp-customer-login-notice-inner > div > span {
    display:block;
    margin-bottom:11px;
    color:#a9ddf7;
    font-size:.69rem;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.fp-customer-login-notice h2 {
    margin:0;
    color:#fff;
    font-size:clamp(1.55rem,2.7vw,2.5rem);
    font-weight:650;
    letter-spacing:-.025em;
    line-height:1.15;
}

.fp-customer-login-notice p {
    max-width:750px;
    margin:13px 0 0;
    color:rgba(255,255,255,.74);
    line-height:1.62;
}

.fp-customer-login-notice a,
.fp-customer-login-notice a:visited {
    display:inline-flex;
    min-width:175px;
    min-height:44px;
    align-items:center;
    justify-content:center;
    padding:0 17px;
    color:var(--cl-navy);
    -webkit-text-fill-color:var(--cl-navy);
    background:#fff;
    border:1px solid #fff;
    border-radius:4px;
    font-size:.77rem;
    font-weight:800;
    text-decoration:none;
}

.fp-customer-login-notice a:hover,
.fp-customer-login-notice a:focus-visible {
    color:#fff;
    -webkit-text-fill-color:#fff;
    background:var(--cl-blue);
    border-color:var(--cl-blue);
}

@media(max-width:1000px) {
    .fp-customer-login-hero-grid,
    .fp-customer-login-intro-grid {
        grid-template-columns:1fr;
    }

    .fp-customer-login-directory-head {
        display:none;
    }

    .fp-customer-login-list > li {
        grid-template-columns:38px minmax(0,1fr) auto;
    }

    .fp-customer-login-status {
        grid-column:2;
    }

    .fp-customer-login-actions {
        grid-column:3;
        grid-row:1/3;
    }
}

@media(max-width:760px) {
    .fp-customer-login-hero {
        padding:22px 0 52px;
    }

    .fp-customer-login-breadcrumbs {
        margin-bottom:34px;
    }

    .fp-customer-login-hero h1 {
        font-size:clamp(2.3rem,12vw,3.5rem);
    }

    .fp-customer-login-summary {
        min-height:280px;
        padding:28px;
    }

    .fp-customer-login-intro,
    .fp-customer-login-directory {
        padding:56px 0;
    }

    .fp-customer-login-list > li {
        grid-template-columns:30px minmax(0,1fr);
        gap:12px;
        min-height:0;
        padding:25px 0;
    }

    .fp-customer-login-status,
    .fp-customer-login-actions {
        grid-column:2;
        grid-row:auto;
    }

    .fp-customer-login-actions {
        width:100%;
        min-width:0;
        margin-top:7px;
    }

    .fp-customer-login-notice-inner {
        grid-template-columns:1fr;
        gap:27px;
        padding:30px 24px;
    }

    .fp-customer-login-notice a {
        width:100%;
        min-width:0;
    }
}