:root{
    --portal-primary:#1d65cf;
    --portal-secondary:#071321;
    --portal-bg:none;
    --portal-watermark:none;
    --white:#fff;
    --ease:cubic-bezier(.18,.74,.18,1);
    --display:"Bodoni MT","Didot","Baskerville","Times New Roman",serif;
    --body:"Segoe UI Light","Helvetica Neue","Avenir Next",Arial,sans-serif;
}

*{
    box-sizing:border-box;
}

html,
body{
    width:100%;
    min-height:100%;
}

body{
    margin:0;
    overflow:hidden;
    color:var(--white);
    background:#02060c;
    font-family:var(--body);
    font-weight:300;
    -webkit-font-smoothing:antialiased;
}

a{
    color:inherit;
}

img{
    display:block;
    max-width:100%;
}

.portal-intro{
    position:fixed;
    inset:0;
    z-index:1000;
    display:grid;
    place-items:center;
    background:#010409;
    transition:
        opacity .9s ease,
        visibility .9s ease;
}

.portal-intro.is-hidden{
    opacity:0;
    visibility:hidden;
}

.portal-intro-mark{
    position:relative;
    width:158px;
    height:158px;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,255,255,.18);
    border-radius:50%;
    background:
        radial-gradient(
            circle at 32% 28%,
            rgba(80,151,245,.35),
            transparent 43%
        ),
        #06111e;
    box-shadow:
        0 0 120px rgba(29,101,207,.22);
    font-family:var(--display);
    font-size:28px;
    letter-spacing:.06em;
}

.portal-intro-mark img{
    width:70%;
    max-height:70%;
    object-fit:contain;
}

.portal-intro-mark::before,
.portal-intro-mark::after{
    content:"";
    position:absolute;
    border:1px solid rgba(80,151,245,.34);
    border-radius:50%;
    animation:portalPulse 1.9s infinite var(--ease);
}

.portal-intro-mark::before{
    inset:-19px;
}

.portal-intro-mark::after{
    inset:-40px;
    animation-delay:.3s;
}

@keyframes portalPulse{
    0%{
        opacity:0;
        transform:scale(.84);
    }

    38%{
        opacity:.8;
    }

    100%{
        opacity:0;
        transform:scale(1.12);
    }
}

.branch-selector{
    position:relative;
    width:100%;
    min-height:100svh;
    overflow:hidden;
    isolation:isolate;
    background:#02060c;
}

.branch-selector-background{
    position:absolute;
    inset:0;
    z-index:-5;
    background:
        linear-gradient(
            180deg,
            rgba(2,6,12,.52),
            rgba(2,6,12,.87)
        ),
        var(--portal-bg) center/cover no-repeat;
    filter:saturate(.72);
}

.branch-selector-background::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(29,101,207,.18),
            transparent 34%
        ),
        linear-gradient(
            90deg,
            rgba(2,6,12,.48),
            transparent 32%,
            transparent 68%,
            rgba(2,6,12,.48)
        );
}

.branch-selector-watermark{
    position:absolute;
    z-index:2;
    top:50%;
    left:50%;
    width:min(920px,65vw);
    aspect-ratio:15/7;
    pointer-events:none;
    background:
        var(--portal-watermark)
        center/contain
        no-repeat;
    opacity:.62;
    transform:translate(-50%,-50%);
    filter:
        drop-shadow(
            0 0 50px rgba(29,101,207,.18)
        );
}

.selector-brand{
    position:absolute;
    z-index:20;
    top:34px;
    left:50%;
    display:flex;
    align-items:center;
    gap:14px;
    transform:translateX(-50%);
    text-align:center;
}

.selector-brand > img{
    width:52px;
    height:52px;
    object-fit:contain;
}

.selector-brand-mark{
    position:relative;
    display:grid;
    place-items:center;
    width:52px;
    height:52px;
    border:1px solid rgba(255,255,255,.20);
    border-radius:50%;
    background:
        radial-gradient(
            circle at 30% 25%,
            rgba(87,157,250,.52),
            transparent 44%
        ),
        #0a1d39;
    box-shadow:
        0 14px 36px rgba(31,101,207,.24);
    font-family:var(--display);
    font-size:14px;
    letter-spacing:.04em;
}

.selector-brand strong{
    display:block;
    font-family:var(--display);
    font-size:20px;
    font-weight:400;
    letter-spacing:.025em;
}

.selector-brand small{
    display:block;
    margin-top:5px;
    color:rgba(255,255,255,.45);
    font-size:8px;
    letter-spacing:.22em;
    text-transform:uppercase;
    white-space:nowrap;
}

.branch-panels{
    position:absolute;
    inset:0;
    display:flex;
}

.branch-panel{
    position:relative;
    flex:1 1 50%;
    min-width:0;
    overflow:hidden;
    text-decoration:none;
    transition:
        flex-basis .75s var(--ease),
        filter .55s ease;
}

.branch-panels:hover .branch-panel{
    flex-basis:44%;
}

.branch-panels .branch-panel:hover{
    flex-basis:56%;
}

.branch-panel + .branch-panel{
    border-left:
        1px solid rgba(255,255,255,.12);
}

.branch-panel-image{
    position:absolute;
    inset:0;
    background:
        var(--branch-image)
        center/cover
        no-repeat;
    filter:
        saturate(.62)
        contrast(1.08)
        brightness(.46);
    transform:scale(1.03);
    transition:
        transform 1.35s var(--ease),
        filter .65s ease;
}

.branch-panel:hover .branch-panel-image{
    filter:
        saturate(.90)
        contrast(1.05)
        brightness(.68);
    transform:scale(1.10);
}

.branch-panel-overlay{
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            180deg,
            rgba(2,6,12,.24),
            rgba(2,6,12,.62) 58%,
            rgba(2,6,12,.95)
        ),
        linear-gradient(
            90deg,
            rgba(5,32,75,.28),
            transparent
        );
    transition:background .55s ease;
}

.branch-panel:hover .branch-panel-overlay{
    background:
        linear-gradient(
            180deg,
            rgba(2,6,12,.10),
            rgba(2,6,12,.44) 56%,
            rgba(2,6,12,.91)
        ),
        linear-gradient(
            90deg,
            rgba(20,79,164,.33),
            transparent
        );
}

.branch-panel-index{
    position:absolute;
    z-index:3;
    top:40px;
    color:rgba(255,255,255,.42);
    font-family:var(--display);
    font-size:16px;
    font-weight:400;
}

.branch-panel:first-child .branch-panel-index{
    left:42px;
}

.branch-panel:last-child .branch-panel-index{
    right:42px;
}

.branch-panel-content{
    position:absolute;
    z-index:4;
    bottom:72px;
    max-width:560px;
    transition:transform .65s var(--ease);
}

.branch-panel:first-child .branch-panel-content{
    left:6vw;
    text-align:left;
}

.branch-panel:last-child .branch-panel-content{
    right:6vw;
    text-align:right;
}

.branch-panel:hover .branch-panel-content{
    transform:translateY(-15px);
}

.branch-panel-eyebrow{
    display:block;
    margin-bottom:17px;
    color:#7eb4ff;
    font-size:9px;
    font-weight:400;
    letter-spacing:.25em;
    text-transform:uppercase;
}

.branch-panel h1{
    margin:0 0 26px;
    font-family:var(--display);
    font-size:clamp(58px,7vw,116px);
    line-height:.86;
    letter-spacing:-.055em;
    font-weight:400;
}

.branch-panel-action{
    display:inline-flex;
    align-items:center;
    gap:14px;
    color:rgba(255,255,255,.70);
    font-size:10px;
    letter-spacing:.18em;
    text-transform:uppercase;
}

.branch-panel-action i{
    display:grid;
    place-items:center;
    width:45px;
    height:45px;
    border:1px solid rgba(255,255,255,.26);
    border-radius:50%;
    font-style:normal;
    transition:
        transform .35s var(--ease),
        background .35s ease;
}

.branch-panel:hover .branch-panel-action i{
    color:#fff;
    border-color:var(--portal-primary);
    background:var(--portal-primary);
    transform:rotate(45deg);
    box-shadow:
        0 0 28px rgba(29,101,207,.35);
}

.selector-center-copy{
    position:absolute;
    z-index:10;
    top:50%;
    left:50%;
    width:min(520px,38vw);
    padding:26px 30px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:28px;
    background:rgba(3,10,20,.50);
    backdrop-filter:blur(24px);
    text-align:center;
    pointer-events:none;
    transform:translate(-50%,-50%);
    box-shadow:
        0 35px 100px rgba(0,0,0,.28);
    transition:
        opacity .45s ease,
        transform .45s var(--ease);
}

.branch-panels:hover ~ .selector-center-copy{
    opacity:.10;
    transform:
        translate(-50%,-50%)
        scale(.96);
}

.selector-center-copy span{
    display:block;
    margin-bottom:13px;
    color:#78adf4;
    font-size:8px;
    letter-spacing:.24em;
    text-transform:uppercase;
}

.selector-center-copy h2{
    margin:0 0 13px;
    font-family:var(--display);
    font-size:clamp(34px,3.2vw,54px);
    line-height:1;
    letter-spacing:-.035em;
    font-weight:400;
}

.selector-center-copy p{
    margin:0;
    color:rgba(255,255,255,.52);
    font-size:13px;
    line-height:1.7;
}

.selector-footer{
    position:absolute;
    z-index:20;
    left:42px;
    right:42px;
    bottom:27px;
    display:flex;
    justify-content:space-between;
    color:rgba(255,255,255,.32);
    font-size:8px;
    letter-spacing:.16em;
    text-transform:uppercase;
    pointer-events:none;
}

@media(max-width:900px){
    body{
        overflow:auto;
    }

    .branch-selector{
        min-height:100svh;
    }

    .branch-panels{
        position:relative;
        min-height:100svh;
        flex-direction:column;
    }

    .branch-panel{
        min-height:50svh;
        flex-basis:auto !important;
    }

    .branch-panel + .branch-panel{
        border-top:
            1px solid rgba(255,255,255,.12);
        border-left:0;
    }

    .branch-panel:first-child .branch-panel-content,
    .branch-panel:last-child .branch-panel-content{
        right:auto;
        bottom:38px;
        left:24px;
        text-align:left;
    }

    .branch-panel:first-child .branch-panel-index,
    .branch-panel:last-child .branch-panel-index{
        top:22px;
        right:24px;
        left:auto;
    }

    .branch-panel h1{
        margin-bottom:16px;
        font-size:clamp(48px,15vw,74px);
    }

    .selector-brand{
        top:18px;
        z-index:30;
    }

    .selector-brand div{
        display:none;
    }

    .selector-center-copy{
        top:50%;
        width:calc(100% - 40px);
        padding:18px 20px;
    }

    .selector-center-copy h2{
        font-size:29px;
    }

    .selector-center-copy p,
    .selector-center-copy span{
        display:none;
    }

    .selector-footer{
        display:none;
    }

    .branch-selector-watermark{
        width:90vw;
    }
}

@media(prefers-reduced-motion:reduce){
    *,
    *::before,
    *::after{
        animation:none !important;
        transition:none !important;
    }
}
/* Adana İl Sınırı gerçek logo alanı */

.selector-brand {
    position: absolute;
    z-index: 30;
    top: 24px;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateX(-50%);
}

.selector-brand-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 18px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 18px;
    background: rgba(3, 10, 20, .34);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    text-decoration: none;
    box-shadow: 0 18px 55px rgba(0, 0, 0, .22);
    transition: transform .3s cubic-bezier(.18, .74, .18, 1), background .3s ease, border-color .3s ease;
}

    .selector-brand-link:hover {
        border-color: rgba(86, 153, 244, .45);
        background: rgba(8, 33, 76, .52);
        transform: translateY(-3px);
    }

.selector-brand-logo {
    display: block;
    width: auto;
    height: 72px;
    max-width: 165px;
    object-fit: contain;
    object-position: center;
    filter: drop-shadow(0 12px 25px rgba(0, 0, 0, .28));
}

/* Eski yazı ve yuvarlak AİS işareti kullanılmayacak */

.selector-brand-mark,
.selector-brand > div {
    display: none !important;
}

@media (max-width: 900px) {
    .selector-brand {
        top: 14px;
    }

    .selector-brand-link {
        padding: 6px 13px;
        border-radius: 15px;
    }

    .selector-brand-logo {
        height: 58px;
        max-width: 135px;
    }
}

@media (max-width: 480px) {
    .selector-brand-logo {
        height: 50px;
        max-width: 116px;
    }
}