/* =========================================================================
   CHP Kurumsal Kimlik
   Saf CSS — çerçeve yok, bağımlılık yok.
   ========================================================================= */

/* Kurumsal kimlik kilavuzu Futura + Gotham Bold diyor. Ikisi de ticari lisansli
   ve paketteki dosyalar fsType = "yalnizca onizleme/baski" ile isaretli, yani
   web fontu olarak gomulemez. Yerlerine acik lisansli en yakin karsiliklari:
     Futura -> Jost        (Futura yeniden yorumu)
     Gotham -> Montserrat  (ayni geometrik grotesk karakter)
   Web lisansi alinirsa bu blok ve asagidaki --yazi-* degiskenleri degistirilir. */

@font-face {
    font-family: "Jost";
    src: url("fonts/jost-latin.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Jost";
    src: url("fonts/jost-latin-ext.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
        U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
        U+A720-A7FF;
}

@font-face {
    font-family: "Montserrat";
    src: url("fonts/montserrat-latin.woff2") format("woff2");
    font-weight: 400 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Montserrat";
    src: url("fonts/montserrat-latin-ext.woff2") format("woff2");
    font-weight: 400 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
        U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
        U+A720-A7FF;
}

/* ---------- Jetonlar ------------------------------------------------ */

:root {
    color-scheme: light;

    /* Parti renkleri — değişmez */
    --chp-lacivert: #053c5d;
    --chp-kirmizi: #ec2028;
    --chp-pembe: #ca0b54;

    /* Yüzeyler */
    --zemin: #f4f3ef;
    --zemin-doku: rgba(5, 60, 93, .038);
    --kart: #fff;
    --kart-gorsel: #eceae4;

    /* Metin */
    --murekkep: #12171c;
    --murekkep-soluk: #5c6873;
    --murekkep-cok-soluk: #97a3ad;

    /* Çizgiler ve gölgeler */
    --cizgi: rgba(5, 60, 93, .16);
    --cizgi-ince: rgba(5, 60, 93, .09);
    --golge: 0 1px 2px rgba(5, 34, 53, .05);
    --golge-havada: 0 2px 4px rgba(5, 34, 53, .05), 0 12px 28px -8px rgba(5, 34, 53, .18);

    /* Vurgu — kart grubuna göre değişir */
    --vurgu: var(--chp-lacivert);
    --vurgu-koyu: #042c45;
    --vurgu-yazi: #fff;

    /* Yazı tipleri — kurumsal karşılıkları @font-face yorumunda açıklandı */
    --yazi-baslik: "Jost", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
    --yazi-govde: "Montserrat", ui-sans-serif, system-ui, "Segoe UI", sans-serif;

    /* Ölçü */
    --sayfa: 1360px;
    --bosluk: clamp(1rem, .55rem + 2.2vw, 1.6rem);
    --yay: cubic-bezier(.22, .61, .36, 1);
}

/* data-theme="light" ve "auto" (sistem açıkken) yukarıdaki açık paleti kullanır. */

@media (prefers-color-scheme: dark) {

    :root[data-theme="auto"],
    :root:not([data-theme]) {
        color-scheme: dark;
        --zemin: #0a0f14;
        --zemin-doku: rgba(255, 255, 255, .035);
        --kart: #131b23;
        --kart-gorsel: #1c262f;
        --murekkep: #e9eef3;
        --murekkep-soluk: #93a2b0;
        --murekkep-cok-soluk: #63727f;
        --cizgi: rgba(255, 255, 255, .14);
        --cizgi-ince: rgba(255, 255, 255, .08);
        --golge: 0 1px 2px rgba(0, 0, 0, .4);
        --golge-havada: 0 2px 4px rgba(0, 0, 0, .3), 0 14px 32px -10px rgba(0, 0, 0, .7);
        --vurgu: #0e6ea6;
        --vurgu-koyu: #1685c4;
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --zemin: #0a0f14;
    --zemin-doku: rgba(255, 255, 255, .035);
    --kart: #131b23;
    --kart-gorsel: #1c262f;
    --murekkep: #e9eef3;
    --murekkep-soluk: #93a2b0;
    --murekkep-cok-soluk: #63727f;
    --cizgi: rgba(255, 255, 255, .14);
    --cizgi-ince: rgba(255, 255, 255, .08);
    --golge: 0 1px 2px rgba(0, 0, 0, .4);
    --golge-havada: 0 2px 4px rgba(0, 0, 0, .3), 0 14px 32px -10px rgba(0, 0, 0, .7);
    --vurgu: #0e6ea6;
    --vurgu-koyu: #1685c4;
}

/* ---------- Temel ---------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background-color: var(--zemin);
    /* Kurumsal kimlik kılavuzu dokusu: çok soluk milimetrik ızgara */
    background-image:
        linear-gradient(var(--zemin-doku) 1px, transparent 1px),
        linear-gradient(90deg, var(--zemin-doku) 1px, transparent 1px);
    background-size: 64px 64px, 64px 64px;
    background-position: center top;
    color: var(--murekkep);
    font-family: var(--yazi-govde);
    font-size: 16px;
    line-height: 1.55;
    font-synthesis-weight: none;
    -webkit-font-smoothing: antialiased;
}

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

h1,
h2,
p,
dl,
dd,
dt,
figure,
ul {
    margin: 0;
    padding: 0;
}

ul {
    list-style: none;
}

a {
    color: inherit;
}

:where(a, button):focus-visible {
    outline: 2px solid var(--vurgu);
    outline-offset: 3px;
    border-radius: 2px;
}

.gizli {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.atla {
    position: fixed;
    top: .75rem;
    left: .75rem;
    z-index: 100;
    padding: .7rem 1.1rem;
    background: var(--chp-lacivert);
    color: #fff;
    font-weight: 650;
    font-size: .82rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    transform: translateY(-160%);
    transition: transform .18s var(--yay);
}

.atla:focus-visible {
    transform: translateY(0);
    outline-offset: 2px;
}

/* ---------- Tema düğmesi --------------------------------------------- */

.tema {
    position: fixed;
    inset: clamp(.8rem, 2vw, 1.4rem) clamp(.8rem, 2vw, 1.4rem) auto auto;
    z-index: 50;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    background: color-mix(in srgb, var(--kart) 82%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid var(--cizgi);
    border-radius: 4px;
    color: var(--murekkep-soluk);
    cursor: pointer;
    transition: color .18s, border-color .18s, background-color .18s;
}

.tema:hover {
    color: var(--murekkep);
    border-color: var(--murekkep-cok-soluk);
}

.tema__ikon {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
}

/* Açık temada ay, koyu temada güneş göster. */
.tema__ikon--gunes {
    display: none;
}

:root[data-theme="dark"] .tema__ikon--gunes {
    display: block;
}

:root[data-theme="dark"] .tema__ikon--ay {
    display: none;
}

@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] .tema__ikon--gunes {
        display: block;
    }

    :root[data-theme="auto"] .tema__ikon--ay {
        display: none;
    }
}

/* ---------- Künye (üst blok) ----------------------------------------- */

.kunye {
    max-width: var(--sayfa);
    margin-inline: auto;
    padding: clamp(3.5rem, 2rem + 7vw, 7rem) var(--bosluk) clamp(2rem, 1rem + 3vw, 3.25rem);
    text-align: center;
}

.kunye__amblem {
    width: clamp(88px, 8vw, 118px);
    height: auto;
    margin-inline: auto;
    animation: yukselt .7s var(--yay) both;
}

.kunye__baslik {
    margin-top: clamp(1.1rem, .8rem + 1.2vw, 1.75rem);
    animation: yukselt .7s var(--yay) .08s both;
}

/* Jost, Futura gibi geometrik ve dar — versal başlıkta biraz nefes gerekiyor. */
.kunye__parti {
    display: block;
    font-family: var(--yazi-baslik);
    font-size: clamp(1.35rem, 1rem + 1.9vw, 2.4rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: .015em;
    text-transform: uppercase;
    text-wrap: balance;
}

.kunye__bolum {
    display: block;
    margin-top: .5rem;
    color: var(--murekkep-soluk);
    font-size: clamp(.72rem, .66rem + .3vw, .88rem);
    font-weight: 620;
    letter-spacing: .3em;
    text-indent: .3em;
    text-transform: uppercase;
}

.suzgec {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin-top: clamp(1.6rem, 1rem + 2.2vw, 2.5rem);
    animation: yukselt .7s var(--yay) .16s both;
}

.suzgec__dugme {
    --pil: var(--chp-lacivert);
    display: inline-flex;
    align-items: baseline;
    gap: .45rem;
    padding: .52rem 1rem;
    background: transparent;
    border: 1px solid var(--cizgi);
    border-radius: 999px;
    color: var(--murekkep-soluk);
    font: inherit;
    font-size: .82rem;
    font-weight: 620;
    letter-spacing: .01em;
    cursor: pointer;
    transition: color .18s, border-color .18s, background-color .18s;
}

.suzgec__dugme--genclik { --pil: var(--chp-kirmizi); }
.suzgec__dugme--kadin   { --pil: var(--chp-pembe); }

.suzgec__dugme:hover {
    color: var(--murekkep);
    border-color: var(--murekkep-cok-soluk);
}

.suzgec__dugme[aria-pressed="true"] {
    background: var(--pil);
    border-color: var(--pil);
    color: #fff;
}

.suzgec__adet {
    font-size: .72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    opacity: .6;
}

/* JS yoksa süzgeç anlamsız — gizle, tüm kartlar görünür kalır. */
.suzgec { display: none; }
.js .suzgec { display: flex; }

.kart.kart--gizli { display: none; }

@media (max-width: 520px) {
    .suzgec__dugme {
        padding: .46rem .8rem;
        font-size: .78rem;
    }
}

/* ---------- Izgara ---------------------------------------------------- */

.izgara {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(.85rem, .4rem + 1.4vw, 1.5rem);
    max-width: var(--sayfa);
    margin-inline: auto;
    padding: 0 var(--bosluk) clamp(3.5rem, 2rem + 5vw, 6rem);
}

@media (max-width: 1180px) {
    .izgara {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    .izgara {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .izgara {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- Kart ------------------------------------------------------ */

.kart {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--kart);
    border: 1px solid var(--cizgi-ince);
    box-shadow: var(--golge);
    transition: transform .3s var(--yay), box-shadow .3s var(--yay), border-color .3s;
    animation: yukselt .55s var(--yay) both;
    animation-delay: calc(.22s + var(--sira, 0) * .035s);
}

.kart--genclik {
    --vurgu: var(--chp-kirmizi);
    --vurgu-koyu: #c2151d;
}

.kart--kadin {
    --vurgu: var(--chp-pembe);
    --vurgu-koyu: #a30843;
}

/* Üstteki renk şeridi — orijinaldeki degrade kenarlığın sadeleşmiş hâli */
.kart::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg,
            var(--vurgu),
            color-mix(in srgb, var(--vurgu) 45%, #fff) 50%,
            var(--vurgu));
    z-index: 2;
}

.kart:hover,
.kart:focus-within {
    transform: translateY(-3px);
    box-shadow: var(--golge-havada);
    border-color: var(--cizgi);
}

.kart__no {
    position: absolute;
    top: .85rem;
    left: .85rem;
    z-index: 2;
    padding: .18rem .4rem;
    background: color-mix(in srgb, var(--kart) 78%, transparent);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: var(--murekkep-cok-soluk);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .12em;
    font-variant-numeric: tabular-nums;
}

.kart__gorsel {
    position: relative;
    overflow: hidden;
    background: var(--kart-gorsel);
    aspect-ratio: 1025 / 725;
}

.kart__gorsel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s var(--yay);
}

.kart:hover .kart__gorsel img {
    transform: scale(1.035);
}

.kart__ad {
    flex: 1;
    font-family: var(--yazi-baslik);
    padding: 1rem 1.05rem 1.15rem;
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.3;
    letter-spacing: -.005em;
    text-wrap: balance;
}

/* ---------- İndir düğmesi --------------------------------------------- */

.indir {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .82rem 1rem;
    background: var(--vurgu);
    color: var(--vurgu-yazi);
    font-size: .81rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color .2s var(--yay);
}

.indir:hover {
    background: var(--vurgu-koyu);
}

.indir__ok {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
    transition: transform .25s var(--yay);
}

.kart:hover .indir__ok {
    transform: translateY(2px);
}

/* ---------- Alt bilgi ------------------------------------------------- */

.alt {
    max-width: var(--sayfa);
    margin-inline: auto;
    padding: clamp(2rem, 1rem + 3vw, 3rem) var(--bosluk) clamp(3rem, 2rem + 3vw, 4.5rem);
    border-top: 1px solid var(--cizgi-ince);
    color: var(--murekkep-soluk);
    font-size: .82rem;
    text-align: center;
}

.alt p+p {
    margin-top: .4rem;
}

.alt__telif {
    color: var(--murekkep);
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

.alt__not {
    max-width: 44ch;
    margin-inline: auto;
    text-wrap: balance;
}

.alt__bag {
    display: inline-block;
    margin-top: .5rem;
    color: var(--chp-kirmizi);
    font-weight: 650;
    letter-spacing: .04em;
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--chp-kirmizi) 40%, transparent);
    transition: border-color .2s;
}

.alt__bag:hover {
    border-bottom-color: currentColor;
}

/* ---------- Hareket ---------------------------------------------------- */

@keyframes yukselt {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-delay: 0ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    .kart:hover {
        transform: none;
    }

    .kart:hover .kart__gorsel img {
        transform: none;
    }
}

/* ---------- Baskı ------------------------------------------------------ */

@media print {

    .tema,
    .atla,
    .indir {
        display: none;
    }

    body {
        background: #fff;
    }

    .izgara {
        grid-template-columns: repeat(3, 1fr);
    }
}