/* CHS Holding 2.1: independent images and live HTML/CSS. */
/* Background files carry the tonal correction; do not add a whitening filter. */
:root {
    color-scheme:light;
    --ink:#000;
    --brand:#0c4da2;
    --page-max:1440px;
    --card-gap:18px;
    --card-width:calc((100% - 3 * var(--card-gap))/4);
    --card-height:clamp(182px,21.8vh,216px);
}

* {
    box-sizing:border-box;
}

html {
    min-width:280px;
    background:#0b1d31;
}

body {
    margin:0;
    color:var(--ink);
    font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

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

a {
    color:inherit;
}

.skip-link {
    position:fixed;
    z-index:10;
    left:16px;
    top:-80px;
    padding:12px 20px;
    background:#fff;
    color:#073b8f;
    border-radius:6px;
}

.skip-link:focus {
    top:16px;
}

.holding-page {
    position:relative;
    isolation:isolate;
    min-height:100vh;
    min-height:100svh;
    overflow:hidden;
    background:#0b1d31;
}

.backdrop {
    position:absolute;
    z-index:0;
    inset:0;
    pointer-events:none;
    overflow:hidden;
}

.backdrop picture {
    display:block;
    width:100%;
    height:100%;
}

.backdrop img {
    width:100%;
    height:100%;
    max-width:none;
    object-fit:cover;
    object-position:center top;
}

.backdrop::after {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(to bottom,rgba(4,14,28,.06) 0%,rgba(4,14,28,.03) 62%,rgba(4,14,28,.08) 100%);
}

.holding-content {
    position:relative;
    z-index:1;
    width:min(var(--page-max),calc(100% - 96px));
    margin-inline:auto;
    min-height:100vh;
    min-height:100svh;
    display:flex;
    flex-direction:column;
    padding-top:clamp(48px,8vh,82px);
    padding-bottom:8px;
}

.holding-header {
    text-align:center;
    margin:0;
}

.holding-header__brand {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:clamp(14px,1.8vw,24px);
    flex-wrap:wrap;
}

.holding-header__logo {
    width:clamp(56px,5vw,92px);
    height:auto;
    flex:0 0 auto;
    filter:drop-shadow(0 2px 8px rgba(12,77,162,.22));
}

.holding-header h1 {
    margin:0;
    color:#094bba;
    font-size:clamp(42px,5.35vw,92px);
    font-weight:800;
    line-height:1.09;
    letter-spacing:-.025em;
    background:linear-gradient(104deg,#041b83 15%,#074bbe 56%,#0089e7 88%);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    filter:drop-shadow(0 2px 8px rgba(220,238,255,.22));
}

.companies {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:stretch;
    gap:var(--card-gap);
    margin-top:auto;
    scroll-margin-top:24px;
}

.company-card {
    flex:0 0 var(--card-width);
    min-width:0;
    min-height:var(--card-height);
    background:rgba(255,255,255,.97);
    border:1px solid rgba(229,237,245,.8);
    border-radius:12px;
    box-shadow:0 9px 26px rgba(37,84,120,.065),0 1px 3px rgba(37,84,120,.02);
    transition:box-shadow .2s ease,transform .2s ease;
}

.company-card__content {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    height:100%;
    min-height:var(--card-height);
    padding:23px 14px 20px;
    text-decoration:none;
    border-radius:inherit;
    gap:13px;
}

.company-card__logo {
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:99px;
    flex:0 0 99px;
}

.company-card__logo img {
    width:auto;
    height:77px;
    max-width:94%;
    object-fit:contain;
}

.company-card--cehase .company-card__logo img {
    height:78px;
    max-width:84%;
}

.company-card--ilistra .company-card__logo img {
    height:67px;
    max-width:82%;
}

.company-card--bilge .company-card__logo img {
    height:66px;
    max-width:94%;
}

.company-card--yatirim .company-card__logo img {
    height:78px;
    max-width:94%;
}

.company-card__name {
    margin:0;
    min-height:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#000;
    font-size:clamp(12px,1vw,15px);
    font-weight:600;
    line-height:1.4;
    letter-spacing:.012em;
    text-align:center;
    overflow-wrap:anywhere;
}

.company-card__content:focus-visible {
    outline:3px solid #0b61c9;
    outline-offset:5px;
}

@media(hover:hover) {
    .company-card:has(a):hover {
        transform:translateY(-4px);
        box-shadow:0 15px 34px rgba(37,84,120,.13);
    }
}

.holding-footer {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:27px;
    margin-top:14px;
    margin-bottom:0;
    color:#79b8ff;
}

.holding-footer__line {
    width:57px;
    height:1px;
    background:#79b8ff;
}

.holding-footer__text {
    font-size:12px;
    font-weight:500;
    letter-spacing:.39em;
    padding-left:.39em;
    line-height:1.5;
    white-space:nowrap;
}

.error-page {
    max-width:720px;
    margin:15vh auto;
    padding:24px;
    text-align:center;
}

.error-page h1 {
    color:var(--brand);
}

.error-page a {
    display:inline-block;
    padding:12px 18px;
    background:var(--brand);
    border-radius:6px;
    color:#fff;
    text-decoration:none;
}

@media(min-width:1600px) {
    .holding-content {
        position:relative;
        z-index:1;
        width:min(var(--page-max),calc(100% - 160px));
    }
}

@media(min-width:1024px) and (max-height:800px) {
    :root {
        --card-height:176px;
        --card-gap:16px;
    }
    .holding-content {
        padding-top:34px;
        padding-bottom:6px;
    }
    .holding-header {
        margin-bottom:0;
    }
    .holding-header h1 {
        font-size:clamp(54px,5.35vw,80px);
    }
    .company-card__content {
        padding-block:15px;
        gap:8px;
    }
    .company-card__logo {
        height:89px;
        flex-basis:89px;
    }
    .company-card__logo img {
        height:70px;
    }
    .company-card--cehase .company-card__logo img {
        height:71px;
    }
    .company-card--ilistra .company-card__logo img {
        height:60px;
    }
    .company-card--bilge .company-card__logo img {
        height:59px;
    }
    .company-card--yatirim .company-card__logo img {
        height:70px;
    }
    .holding-footer {
        margin-top:10px;
    }
}

@media(max-width:1100px) and (min-width:901px) {
    .holding-content {
        width:calc(100% - 48px);
    }
    .company-card__content {
        padding-inline:10px;
    }
    .company-card__logo img {
        height:66px;
    }
    .company-card__name {
        font-size:12px;
    }
}

@media(max-width:900px) {
    :root {
        --card-gap:16px;
        --card-width:calc((100% - var(--card-gap))/2);
        --card-height:186px;
    }
    .holding-content {
        width:min(740px,calc(100% - 48px));
        min-height:auto;
        display:block;
        padding-top:68px;
        padding-bottom:20px;
    }
    .holding-header {
        margin-bottom:58px;
    }
    .companies {
        margin-top:0;
    }
    .holding-header h1 {
        font-size:clamp(39px,7.8vw,68px);
    }
    .holding-header__logo {
        width:clamp(52px,9vw,74px);
    }
    .company-card__name {
        font-size:13px;
    }
    .holding-footer {
        margin-top:40px;
    }
    .backdrop {
        position:fixed;
        height:100vh;
        height:100lvh;
    }
    .backdrop img {
        object-position:75% top;
        opacity:1;
    }
    .backdrop::after {
        background:linear-gradient(to bottom,transparent,rgba(255,255,255,.06));
    }
}

@media(max-width:520px) {
    :root {
        --card-gap:14px;
        --card-width:100%;
        --card-height:178px;
    }
    .holding-content {
        width:min(390px,calc(100% - 36px));
        min-height:auto;
        display:block;
        padding-top:45px;
        padding-bottom:16px;
    }
    .holding-header {
        margin-bottom:37px;
    }
    .holding-header h1 {
        font-size:clamp(31px,9.2vw,47px);
        letter-spacing:-.035em;
    }
    .holding-header__brand {
        gap:10px;
    }
    .holding-header__logo {
        width:46px;
    }
    .company-card {
        border-radius:11px;
    }
    .company-card__content {
        padding:16px 18px;
        gap:9px;
    }
    .company-card__logo {
        height:93px;
        flex-basis:93px;
    }
    .company-card__name {
        font-size:13px;
    }
    .holding-footer {
        gap:16px;
        margin-top:24px;
    }
    .holding-footer__line {
        width:32px;
    }
    .holding-footer__text {
        font-size:10px;
    }
    .backdrop {
        height:100vh;
        height:100lvh;
    }
    .backdrop img {
        opacity:1;
        object-position:82% top;
    }
}

@media(prefers-reduced-motion:reduce) {
    *,*::before,*::after {
        scroll-behavior:auto!important;
        transition:none!important;
    }
}

@media(forced-colors:active) {
    .holding-header h1 {
        background:none;
        -webkit-text-fill-color:CanvasText;
    }
    .company-card {
        border:1px solid CanvasText;
    }
}

@media print {
    .backdrop,.skip-link {
        display:none;
    }
    .holding-page {
        background:#fff;
    }
    .holding-content {
        width:100%;
        padding:20px 0;
    }
    .holding-header {
        margin-bottom:30px;
    }
    .holding-header h1 {
        background:none;
        -webkit-text-fill-color:#0c4da2;
        font-size:40px;
    }
    .holding-header__logo {
        width:52px;
    }
    :root {
        --card-width:calc((100% - 2 * var(--card-gap))/3);
        --card-height:170px;
    }
    .company-card {
        break-inside:avoid;
        box-shadow:none;
        border:1px solid #ddd;
    }
    .company-card--bilge {
        flex-basis:var(--card-width);
    }
    .company-card__name {
        font-size:11px;
    }
    .holding-footer {
        margin-top:25px;
    }
}

