:root {
    --hh-kirmizi: #dc2626;
    --hh-kirmizi-koyu: #b91c1c;
    --hh-kirmizi-acik: #fef2f2;
    --hh-sondakika-zemin: #d50100;
    --hh-lacivert: #16202e;
    --hh-sondakika-saat: #ffd166;
    --hh-zemin: #edf0f4;
    --hh-yuzey: #fff;
    --hh-metin: #1b2634;
    --hh-metin-koyu: #111a26;
    --hh-metin-soluk: #627084;
    --hh-metin-silik: #94a0b0;
    --hh-menu-metin: #475365;
    --hh-cizgi: #dde2e9;
    --hh-cizgi-acik: #edf0f4;
    --hh-kabuk-genislik: 1240px;
    --hh-yazi-tipi: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --hh-yazi-olcek: 1;
}

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

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

html,
body {
    background: var(--hh-zemin);
    color: var(--hh-metin);
    font-family: var(--hh-yazi-tipi);
    margin: 0;
    padding: 0;
}

body {
    -webkit-font-smoothing: antialiased;
    min-width: 320px;
    overflow-x: hidden;
}

body.hh-yan-menu-acik {
    overflow: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

img,
svg,
video,
iframe {
    max-width: 100%;
}

img {
    height: auto;
}

ul,
ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: inherit;
    font-weight: inherit;
    margin: 0;
}

p,
figure {
    margin: 0;
}

button {
    background: none;
    border: 0;
    color: inherit;
    cursor: pointer;
    font: inherit;
    margin: 0;
    padding: 0;
}

input,
select,
textarea {
    color: inherit;
    font: inherit;
}

table {
    border-collapse: collapse;
}

[hidden] {
    display: none !important;
}

::selection {
    background: var(--hh-kirmizi);
    color: #fff;
}

:focus-visible {
    outline: 2px solid var(--hh-kirmizi);
    outline-offset: 2px;
}

.hh-ekran-okuyucu {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.hh-kapsayici {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.hh-kabuk {
    background: var(--hh-yuzey);
    border-left: 1px solid var(--hh-cizgi);
    border-right: 1px solid var(--hh-cizgi);
    box-shadow: 0 0 0 1px rgba(17, 26, 38, .04);
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    max-width: var(--hh-kabuk-genislik);
    min-height: 100vh;
    position: relative;
    width: 100%;
}

.hh-kabuk > main,
.hh-kabuk > .hh-kapsayici {
    flex-grow: 1;
}

.hh-kabuk .hh-kapsayici {
    max-width: 100%;
    padding-left: 2rem;
    padding-right: 2rem;
}

@media (max-width: 767px) {
    .hh-kabuk {
        border-left: 0;
        border-right: 0;
    }

    .hh-kabuk .hh-kapsayici {
        padding-left: .75rem;
        padding-right: .75rem;
    }
}

.hh-baslik {
    background: var(--hh-yuzey);
    border-bottom: 1px solid var(--hh-cizgi);
    border-top: 3px solid var(--hh-kirmizi);
    box-shadow: none;
    display: block;
    position: relative;
    z-index: 50;
}

.hh-baslik-cubuk {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    gap: .5rem;
    justify-content: space-between;
    min-height: 3.5rem;
    padding: .5rem .75rem;
    position: relative;
}

.hh-baslik-menu-dugmesi {
    color: #334052;
    display: none;
    flex-shrink: 0;
    padding: .25rem;
}

.hh-baslik-menu-dugmesi:hover {
    color: var(--hh-kirmizi);
}

.hh-baslik-logo {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    overflow: hidden;
    transition: opacity .15s;
}

.hh-baslik-logo:hover {
    opacity: .9;
}

.hh-baslik-logo img {
    display: block;
    height: 50px;
    max-width: 200px;
    object-fit: contain;
    width: 200px;
}

.hh-baslik-arama {
    align-items: center;
    background: #f5f7fa;
    border: 1px solid var(--hh-cizgi);
    border-radius: 9999px;
    display: flex;
    flex: 0 1 15rem;
    margin-left: .5rem;
    min-width: 9rem;
    transition: border-color .15s, background-color .15s;
}

.hh-baslik-arama:focus-within {
    background: var(--hh-yuzey);
    border-color: var(--hh-kirmizi);
}

.hh-baslik-arama input {
    background: transparent;
    border: 0;
    color: var(--hh-metin);
    flex: 1 1 0%;
    font-size: .8125rem;
    min-width: 0;
    outline: 0;
    padding: .5rem 0 .5rem 1rem;
}

.hh-baslik-arama input::-webkit-search-cancel-button {
    display: none;
}

.hh-baslik-arama button {
    align-items: center;
    color: var(--hh-kirmizi);
    display: flex;
    flex-shrink: 0;
    height: 2.125rem;
    justify-content: center;
    width: 2.5rem;
}

.hh-baslik-arama button:hover {
    color: var(--hh-kirmizi-koyu);
}

.hh-baslik-menu {
    align-items: center;
    display: flex;
    flex: 1 1 0%;
    justify-content: center;
    min-width: 0;
    padding: 0 .25rem;
}

.hh-baslik-menu-ic {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .125rem;
    justify-content: center;
    max-width: 100%;
}

.hh-baslik-menu-oge,
.hh-daha-fazla-dugme {
    border-radius: 0;
    color: var(--hh-menu-metin);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.5;
    padding: .375rem .5rem;
    text-transform: uppercase;
    transition: color .2s, box-shadow .2s;
    white-space: nowrap;
}

.hh-baslik-menu-oge:hover,
.hh-baslik-menu-oge.hh-aktif,
.hh-daha-fazla-dugme:hover {
    background: transparent;
    box-shadow: inset 0 -2px 0 var(--hh-kirmizi);
    color: var(--hh-kirmizi);
}

.hh-daha-fazla {
    position: relative;
}

.hh-daha-fazla-dugme {
    align-items: center;
    color: var(--hh-kirmizi);
    display: flex;
    font-weight: 900;
    gap: .3125rem;
}

.hh-daha-fazla-dugme svg {
    transition: transform .2s;
}

.hh-daha-fazla-dugme[aria-expanded="true"] {
    box-shadow: inset 0 -2px 0 var(--hh-kirmizi);
}

.hh-daha-fazla-dugme[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.hh-daha-fazla-liste {
    animation: hh-daha-fazla-acil .18s ease-out;
    background: var(--hh-kirmizi);
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(127, 29, 29, .35), 0 0 0 1px rgba(255, 255, 255, .28);
    color: #fff;
    padding: .875rem;
    position: absolute;
    right: 0;
    top: calc(100% + .75rem);
    width: 23rem;
    z-index: 250;
}

.hh-daha-fazla-liste::before {
    background: var(--hh-kirmizi);
    border-radius: 2px;
    content: "";
    height: .75rem;
    position: absolute;
    right: 2rem;
    top: -.3125rem;
    transform: rotate(45deg);
    width: .75rem;
}

.hh-daha-fazla-liste[hidden] {
    display: none;
}

@keyframes hh-daha-fazla-acil {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

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

.hh-daha-fazla-baslik {
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, .28);
    display: flex;
    justify-content: space-between;
    margin-bottom: .625rem;
    padding: 0 .375rem .625rem;
}

.hh-daha-fazla-baslik span {
    color: rgba(255, 255, 255, .8);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.hh-daha-fazla-baslik a {
    color: var(--hh-sondakika-saat);
    font-size: 11px;
    font-weight: 800;
}

.hh-daha-fazla-baslik a:hover {
    text-decoration: underline;
}

.hh-daha-fazla-izgara {
    display: grid;
    gap: .25rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: 60vh;
    overflow-y: auto;
}

.hh-daha-fazla-oge {
    border-left: 2px solid rgba(255, 255, 255, .4);
    border-radius: 0 8px 8px 0;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.3;
    padding: .5rem .625rem;
    transition: background-color .15s, border-color .15s, color .15s;
}

.hh-daha-fazla-oge:hover,
.hh-daha-fazla-oge.hh-aktif {
    background: #fff;
    border-left-color: var(--hh-lacivert);
    color: var(--hh-kirmizi-koyu);
}

.hh-baslik-ara {
    align-items: center;
    background: var(--hh-yuzey);
    border: 1px solid var(--hh-cizgi);
    border-radius: 9999px;
    color: #475365;
    display: none;
    flex-direction: row;
    flex-shrink: 0;
    gap: .375rem;
    justify-content: center;
    min-width: 2.75rem;
    padding: .5rem .875rem;
    transition: color .15s;
}

.hh-baslik-ara:hover {
    color: var(--hh-kirmizi);
}

.hh-baslik-ara span {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .025em;
    line-height: 1;
    margin-top: 0;
    text-transform: uppercase;
}

.hh-baslik-arama-paneli {
    background: var(--hh-yuzey);
    border-top: 1px solid var(--hh-cizgi);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
    left: 0;
    padding: 1rem;
    position: absolute;
    top: 100%;
    width: 100%;
    z-index: 240;
}

.hh-baslik-arama-paneli[hidden] {
    display: none;
}

.hh-baslik-arama-paneli form {
    display: flex;
    gap: .5rem;
}

.hh-baslik-arama-paneli input {
    border: 1px solid #c5ccd6;
    border-radius: 8px;
    font: inherit;
    font-size: .875rem;
    line-height: 1.25rem;
    min-width: 0;
    padding: .5rem .75rem;
    width: 100%;
}

.hh-baslik-arama-paneli input:focus {
    border-color: #ef4444;
    box-shadow: 0 0 0 1px #ef4444;
    outline: 0;
}

.hh-baslik-arama-paneli button {
    background: var(--hh-kirmizi);
    border-radius: 8px;
    color: #fff;
    flex-shrink: 0;
    font-size: .875rem;
    font-weight: 700;
    padding: .5rem 1.5rem;
}

.hh-baslik-arama-paneli button:hover {
    background: var(--hh-kirmizi-koyu);
}

@media (min-width: 768px) {
    .hh-baslik-cubuk {
        min-height: 4.5rem;
    }
}

@media (min-width: 1024px) {
    .hh-baslik-cubuk {
        min-height: 5rem;
    }

    .hh-baslik-menu-oge,
    .hh-daha-fazla-dugme {
        font-size: 10px;
        padding-left: .625rem;
        padding-right: .625rem;
    }
}

@media (min-width: 1280px) {
    .hh-baslik-menu-oge,
    .hh-daha-fazla-dugme {
        font-size: 11px;
        padding-left: .75rem;
        padding-right: .75rem;
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    .hh-baslik-arama {
        flex-basis: 9rem;
        min-width: 8rem;
    }

    .hh-baslik-menu-oge,
    .hh-daha-fazla-dugme {
        padding-left: .5rem;
        padding-right: .5rem;
    }
}

@media (max-width: 1023px) {
    .hh-baslik-arama {
        display: none;
    }

    .hh-baslik-ara {
        display: flex;
    }

    .hh-baslik-menu {
        justify-content: center;
    }
}

@media (max-width: 767px) {
    .hh-baslik-menu,
    .hh-baslik-arama {
        display: none;
    }

    .hh-baslik-ara {
        display: flex;
    }

    .hh-baslik-menu-dugmesi {
        display: flex;
    }

    .hh-baslik-logo img {
        height: 44px;
        max-width: 150px;
        width: auto;
    }
}

.hh-sondakika {
    background: var(--hh-sondakika-zemin);
    border-bottom: 0;
    color: #fff;
    overflow: hidden;
    padding: 0;
    position: relative;
    width: 100%;
    z-index: 40;
}

.hh-sondakika-ic {
    align-items: center;
    display: flex;
    min-height: 3.25rem;
    min-width: 0;
    padding: 0 1rem 0 .25rem;
}

.hh-sondakika-gorsel {
    align-self: stretch;
    display: flex;
    flex-shrink: 0;
    margin-right: .625rem;
}

.hh-sondakika-gorsel img {
    display: block;
    height: 3.25rem;
    width: auto;
}

.hh-sondakika-pencere {
    flex: 1 1 0%;
    height: 2.25rem;
    min-width: 0;
    overflow: hidden;
    position: relative;
}

.hh-sondakika-oge {
    align-items: center;
    color: #fff;
    display: flex;
    font-size: 16px;
    font-weight: 800;
    height: 100%;
    inset: 0;
    letter-spacing: -.005em;
    opacity: 0;
    position: absolute;
    transform: translateY(100%);
    transition: transform .55s cubic-bezier(.22, 1, .36, 1), opacity .35s ease;
    will-change: transform;
}

.hh-sondakika-oge.hh-aktif {
    opacity: 1;
    transform: none;
}

.hh-sondakika-oge:hover .hh-sondakika-baslik {
    text-decoration: underline;
}

.hh-sondakika-saat {
    background: rgba(0, 0, 0, .2);
    border-radius: 6px;
    color: #fff;
    flex-shrink: 0;
    font-size: .8125rem;
    font-variant-numeric: tabular-nums;
    font-weight: 900;
    line-height: 1.5;
    margin-right: .625rem;
    padding: .0625rem .4375rem;
}

.hh-sondakika-baslik {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .18);
    white-space: nowrap;
}

.hh-sondakika-gezinti {
    display: flex;
    flex-shrink: 0;
    gap: .25rem;
    margin-left: .75rem;
}

.hh-sondakika-ok {
    align-items: center;
    background: rgba(255, 255, 255, .16);
    border-radius: 6px;
    color: #fff;
    display: flex;
    height: 1.625rem;
    justify-content: center;
    transition: background-color .15s, color .15s;
    width: 1.625rem;
}

.hh-sondakika-ok:hover,
.hh-sondakika-ok:focus-visible {
    background: #fff;
    color: var(--hh-sondakika-zemin);
}

@media (max-width: 767px) {
    .hh-sondakika-ic {
        min-height: 3rem;
        padding: 0 .5rem 0 0;
    }

    .hh-sondakika-gorsel {
        margin-right: .375rem;
    }

    .hh-sondakika-gorsel img {
        height: 3rem;
    }

    .hh-sondakika-oge {
        font-size: 13px;
    }

    .hh-sondakika-saat {
        font-size: .6875rem;
        margin-right: .4rem;
    }

    .hh-sondakika-baslik {
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        line-height: 1.25;
        white-space: normal;
    }

    .hh-sondakika-gezinti {
        margin-left: .5rem;
    }
}

@media (max-width: 479px) {
    .hh-sondakika-gorsel img {
        height: 2.625rem;
    }

    .hh-sondakika-ic {
        min-height: 2.625rem;
    }

    .hh-sondakika-saat {
        display: none;
    }

    .hh-sondakika-gezinti {
        gap: .1875rem;
        margin-left: .375rem;
    }

    .hh-sondakika-ok {
        height: 1.5rem;
        width: 1.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hh-daha-fazla-liste {
        animation: none;
    }

    .hh-sondakika-oge {
        transition: none;
    }
}

.hh-arsiv-duzen {
    align-items: start;
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 18rem minmax(0, 1fr);
    margin-top: 1rem;
}

.hh-arsiv-yan {
    display: grid;
    gap: 1rem;
    position: sticky;
    top: 1rem;
}

.hh-arsiv-git,
.hh-arsiv-takvim {
    background: var(--hh-yuzey);
    border: 1px solid var(--hh-cizgi);
    border-radius: 12px;
    padding: .875rem;
}

.hh-arsiv-git {
    display: grid;
    gap: .375rem .5rem;
    grid-template-columns: minmax(0, 1fr) auto;
}

.hh-arsiv-git label {
    color: var(--hh-metin-soluk);
    font-size: .6875rem;
    font-weight: 800;
    grid-column: 1 / -1;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.hh-arsiv-git input {
    background: var(--hh-zemin);
    border: 1px solid var(--hh-cizgi);
    border-radius: 8px;
    color: var(--hh-metin-koyu);
    font: inherit;
    font-size: .875rem;
    height: 2.5rem;
    min-width: 0;
    padding: 0 .625rem;
}

.hh-arsiv-git input:focus {
    background: var(--hh-yuzey);
    border-color: var(--hh-kirmizi);
    outline: 0;
}

.hh-arsiv-git button {
    background: var(--hh-kirmizi);
    border-radius: 8px;
    color: #fff;
    font-size: .8125rem;
    font-weight: 800;
    height: 2.5rem;
    padding: 0 .875rem;
    transition: background-color .15s;
}

.hh-arsiv-git button:hover {
    background: var(--hh-kirmizi-koyu);
}

.hh-arsiv-takvim-ust {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: .625rem;
}

.hh-arsiv-takvim-ust strong {
    color: var(--hh-metin-koyu);
    font-size: .9375rem;
    font-weight: 900;
}

.hh-arsiv-takvim-ust a,
.hh-arsiv-takvim-ust span {
    align-items: center;
    border: 1px solid var(--hh-cizgi);
    border-radius: 8px;
    color: var(--hh-metin);
    display: flex;
    font-size: 1.125rem;
    height: 1.875rem;
    justify-content: center;
    line-height: 1;
    padding-bottom: 2px;
    width: 1.875rem;
}

.hh-arsiv-takvim-ust span {
    color: var(--hh-cizgi);
}

.hh-arsiv-takvim-ust a:hover {
    background: var(--hh-kirmizi);
    border-color: var(--hh-kirmizi);
    color: #fff;
}

.hh-arsiv-takvim-izgara {
    display: grid;
    gap: .1875rem;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    text-align: center;
}

.hh-arsiv-takvim-gunadi {
    color: var(--hh-metin-silik);
    font-size: .625rem;
    font-weight: 800;
    padding: .25rem 0;
    text-transform: uppercase;
}

.hh-arsiv-takvim-gun {
    border-radius: 8px;
    color: var(--hh-metin-koyu);
    font-size: .8125rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    line-height: 2rem;
    transition: background-color .15s, color .15s;
}

a.hh-arsiv-takvim-gun {
    background: var(--hh-zemin);
}

a.hh-arsiv-takvim-gun:hover {
    background: var(--hh-kirmizi-acik);
    color: var(--hh-kirmizi);
}

.hh-arsiv-takvim-gun.hh-aktif,
a.hh-arsiv-takvim-gun.hh-aktif:hover {
    background: var(--hh-kirmizi);
    color: #fff;
}

.hh-arsiv-takvim-gun.hh-pasif {
    color: var(--hh-cizgi);
    font-weight: 500;
}

.hh-arsiv-aralik {
    color: var(--hh-metin-silik);
    font-size: .75rem;
    margin: 0;
    text-align: center;
}

.hh-arsiv-gun {
    min-width: 0;
}

.hh-arsiv-gun-ust {
    align-items: center;
    background: var(--hh-lacivert);
    border-radius: 12px;
    color: #fff;
    display: flex;
    gap: .75rem;
    justify-content: space-between;
    padding: .875rem 1rem;
}

.hh-arsiv-gun-baslik {
    min-width: 0;
    text-align: center;
}

.hh-arsiv-gun-baslik h2 {
    font-size: 1.375rem;
    font-weight: 900;
    line-height: 1.2;
    margin: 0;
}

.hh-arsiv-gun-baslik p {
    color: #94a0b0;
    font-size: .75rem;
    font-weight: 700;
    margin: .125rem 0 0;
}

.hh-arsiv-gun-ok {
    border-radius: 8px;
    flex-shrink: 0;
    font-size: .8125rem;
    font-weight: 800;
    padding: .5rem .75rem;
    transition: background-color .15s, color .15s;
    white-space: nowrap;
}

.hh-arsiv-gun-ust .hh-arsiv-gun-ok {
    background: rgba(255, 255, 255, .1);
    color: #fff;
}

.hh-arsiv-gun-ust a.hh-arsiv-gun-ok:hover {
    background: var(--hh-kirmizi);
}

.hh-arsiv-gun-ok.hh-pasif {
    opacity: .35;
}

.hh-arsiv-liste {
    background: var(--hh-yuzey);
    border: 1px solid var(--hh-cizgi);
    border-radius: 12px;
    list-style: none;
    margin: 1rem 0 0;
    padding: 0 1rem;
}

.hh-arsiv-satir {
    align-items: center;
    border-bottom: 1px solid var(--hh-cizgi-acik);
    display: grid;
    gap: .875rem;
    grid-template-columns: 3rem 8rem minmax(0, 1fr);
    padding: .75rem 0;
}

.hh-arsiv-satir:last-child {
    border-bottom: 0;
}

.hh-arsiv-satir time {
    color: var(--hh-kirmizi);
    font-size: .9375rem;
    font-variant-numeric: tabular-nums;
    font-weight: 900;
}

.hh-arsiv-satir-gorsel {
    aspect-ratio: 16 / 9;
    background: var(--hh-zemin);
    border-radius: 8px;
    display: block;
    overflow: hidden;
}

.hh-arsiv-satir-gorsel img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.hh-arsiv-satir-govde {
    min-width: 0;
}

.hh-arsiv-satir-kategori {
    color: var(--hh-metin-soluk);
    font-size: .6875rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.hh-arsiv-satir-kategori:hover {
    color: var(--hh-kirmizi);
}

.hh-arsiv-satir h3 {
    color: var(--hh-metin-koyu);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    margin: .125rem 0 0;
}

.hh-arsiv-satir h3 a {
    color: inherit;
}

.hh-arsiv-satir h3 a:hover {
    color: var(--hh-kirmizi);
}

.hh-arsiv-gun-alt {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: space-between;
    margin-top: 1rem;
}

.hh-arsiv-gun-alt .hh-arsiv-gun-ok {
    background: var(--hh-yuzey);
    border: 1px solid var(--hh-cizgi);
    color: var(--hh-metin-koyu);
}

.hh-arsiv-gun-alt .hh-arsiv-gun-ok:hover {
    border-color: var(--hh-kirmizi);
    color: var(--hh-kirmizi);
}

@media (max-width: 1023px) {
    .hh-arsiv-duzen {
        grid-template-columns: minmax(0, 1fr);
    }

    .hh-arsiv-yan {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        position: static;
    }

    .hh-arsiv-aralik {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767px) {

    .hh-arsiv-duzen {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .hh-arsiv-yan {
        display: contents;
    }

    .hh-arsiv-git {
        order: 1;
    }

    .hh-arsiv-gun {
        order: 2;
    }

    .hh-arsiv-takvim {
        order: 3;
    }

    .hh-ilan-no-form {
        order: 3;
    }

    .hh-arsiv-aralik {
        order: 4;
    }

    .hh-arsiv-gun-ok span {
        display: none;
    }

    .hh-arsiv-gun-baslik h2 {
        font-size: 1.125rem;
    }

    .hh-arsiv-liste {
        padding: 0 .75rem;
    }

    .hh-arsiv-satir {
        gap: .625rem;
        grid-template-columns: 2.5rem 5.5rem minmax(0, 1fr);
    }

    .hh-arsiv-satir time {
        font-size: .8125rem;
    }

    .hh-arsiv-satir h3 {
        font-size: .875rem;
    }
}

.hh-ilan-sayfa .hh-arsiv-takvim-ust strong a {
    color: inherit;
}

.hh-ilan-sayfa .hh-arsiv-takvim-ust strong a:hover {
    color: var(--hh-kirmizi);
}

.hh-ilan-satir time {
    align-items: center;
    display: flex;
    flex-direction: column;
    line-height: 1.05;
}

.hh-ilan-satir time strong {
    font-size: 1.375rem;
    font-weight: 900;
}

.hh-ilan-satir time span {
    color: var(--hh-metin-soluk);
    font-size: .6875rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.hh-ilan-sayfa .hh-arsiv-gun-alt {
    margin-top: 1.5rem;
}

.hh-ilan-kaynak-notu {
    color: var(--hh-metin-soluk);
    font-size: .8125rem;
    margin: 1.5rem 0 0;
    text-align: center;
}

.hh-ilan-kaynak-notu a {
    color: var(--hh-kirmizi);
    font-weight: 700;
}

.hh-baslik-sade .hh-baslik-cubuk {
    justify-content: space-between;
}

.hh-baslik-sade-baglanti {
    color: var(--hh-metin-koyu);
    font-size: .875rem;
    font-weight: 800;
    margin-left: auto;
    padding: .5rem .25rem;
}

.hh-baslik-sade-baglanti:hover {
    color: var(--hh-kirmizi);
}

.hh-ilan-detay-sayfa {
    padding-bottom: 2rem;
}

.hh-ilan-detay-yol {
    align-items: center;
    color: var(--hh-metin-silik);
    display: flex;
    flex-wrap: wrap;
    font-size: .8125rem;
    font-weight: 600;
    gap: .5rem;
    margin: 1.25rem 0 1rem;
}

.hh-ilan-detay-yol a {
    color: var(--hh-metin-soluk);
}

.hh-ilan-detay-yol a:nth-of-type(2) {
    color: var(--hh-metin-koyu);
    font-weight: 800;
}

.hh-ilan-detay-yol a:hover {
    color: var(--hh-kirmizi);
}

.hh-ilan-detay-kutu {
    background: var(--hh-yuzey);
    border: 1px solid var(--hh-cizgi);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(17, 26, 38, .05);
    padding: 2.5rem;
}

.hh-ilan-detay-ust {
    align-items: center;
    color: var(--hh-metin-soluk);
    display: flex;
    flex-wrap: wrap;
    font-size: .75rem;
    font-weight: 800;
    gap: .5rem .875rem;
    letter-spacing: .04em;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
}

.hh-ilan-detay-rozet {
    background: var(--hh-kirmizi);
    border-radius: 6px;
    color: #fff;
    padding: .25rem .75rem;
}

.hh-ilan-detay-no {
    color: var(--hh-lacivert);
    letter-spacing: .02em;
}

.hh-ilan-detay-govde {
    color: var(--hh-metin-koyu);
    font-size: 1rem;
    line-height: 1.5;
    overflow-x: auto;
}

.hh-ilan-detay-govde p {
    margin: 0 0 .75rem;
}

.hh-ilan-detay-govde .ilan-baslik {
    font-weight: 800;
    line-height: 1.2;
}

.hh-ilan-detay-govde table {
    border-collapse: collapse;
    margin: .5rem 0 1rem;
    width: 100%;
}

.hh-ilan-detay-govde td,
.hh-ilan-detay-govde th {
    border: 1px solid var(--hh-metin-soluk);
    padding: .25rem .375rem;
    text-align: left;
    vertical-align: top;
}

.hh-ilan-detay-govde img {
    height: auto;
    max-width: 100%;
}

.hh-ilan-detay-alt {
    border-top: 1px solid var(--hh-cizgi);
    color: var(--hh-metin-soluk);
    display: flex;
    flex-wrap: wrap;
    font-size: .875rem;
    font-weight: 700;
    gap: .25rem 1rem;
    justify-content: space-between;
    margin-top: 2rem;
    padding-top: 1.5rem;
}

.hh-ilan-detay-alt p {
    margin: 0;
}

.hh-ilan-detay-alt a {
    color: var(--hh-kirmizi);
    text-decoration: underline;
}

.hh-ilan-detay-don {
    margin: 1.5rem 0 0;
    text-align: center;
}

.hh-ilan-detay-don a {
    color: var(--hh-metin-soluk);
    font-size: .875rem;
    font-weight: 800;
}

.hh-ilan-detay-don a:hover {
    color: var(--hh-kirmizi);
}

@media (max-width: 767px) {
    .hh-ilan-detay-kutu {
        padding: 1.25rem 1rem;
    }

    .hh-ilan-detay-govde span[style*="font-size"] {
        font-size: 1rem !important;
    }

    .hh-ilan-detay-govde .ilan-baslik span[style*="font-size"] {
        font-size: 1.25rem !important;
    }
}

footer.hh-altbilgi {
    background: #111a26;
    color: #c5ccd6;
    font-size: .875rem;
    line-height: 1.5;
    margin-top: 1.5rem;
    overflow: hidden;
}

.hh-altbilgi-hizli {
    background: var(--hh-kirmizi);
    display: flex;
}

.hh-altbilgi-hizli a {
    align-items: center;
    border-left: 1px solid rgba(255, 255, 255, .18);
    color: #fff;
    display: flex;
    flex: 1 1 0%;
    flex-direction: column;
    font-size: .75rem;
    font-weight: 800;
    gap: .375rem;
    justify-content: center;
    line-height: 1.2;
    min-width: 0;
    padding: .875rem .5rem;
    text-align: center;
    transition: background-color .15s;
}

.hh-altbilgi-hizli a:first-child {
    border-left: 0;
}

.hh-altbilgi-hizli a:hover {
    background: var(--hh-kirmizi-koyu);
}

.hh-altbilgi-hizli svg {
    transition: transform .2s;
}

.hh-altbilgi-hizli a:hover svg {
    transform: translateY(-2px);
}

.hh-altbilgi-ic {
    align-items: start;
    display: grid;
    gap: 2rem 2.5rem;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 2fr) minmax(0, .9fr) minmax(0, 1.35fr);
    padding: 2.25rem 1.5rem 2rem;
}

.hh-altbilgi-logo {
    background: #fff;
    border-radius: 12px;
    display: inline-flex;
    padding: .5rem .875rem;
}

.hh-altbilgi-logo img {
    display: block;
    height: 44px;
    object-fit: contain;
    width: auto;
}

.hh-altbilgi-slogan {
    color: #94a0b0;
    font-size: .8125rem;
    margin: .875rem 0 1rem;
}

.hh-altbilgi-sosyal {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.hh-altbilgi-sosyal a {
    align-items: center;
    background: rgba(255, 255, 255, .08);
    border-radius: 10px;
    color: #fff;
    display: flex;
    height: 2.5rem;
    justify-content: center;
    transition: background-color .15s, transform .15s;
    width: 2.5rem;
}

.hh-altbilgi-sosyal a:hover {
    background: var(--hh-kirmizi);
    transform: translateY(-2px);
}

.hh-altbilgi-baslik {
    align-items: center;
    color: #fff;
    display: flex;
    font-size: .75rem;
    font-weight: 900;
    gap: .5rem;
    letter-spacing: .1em;
    margin: 0 0 1rem;
    text-transform: uppercase;
}

.hh-altbilgi-baslik::before {
    background: var(--hh-kirmizi);
    border-radius: 2px;
    content: "";
    height: .5rem;
    width: .5rem;
}

.hh-altbilgi-menu ul {
    display: grid;
    gap: .5rem 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.hh-altbilgi-kategoriler ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hh-altbilgi-menu a {
    color: #c5ccd6;
    font-weight: 600;
    transition: color .15s;
}

.hh-altbilgi-menu a:hover {
    color: #fff;
    text-decoration: underline;
    text-decoration-color: var(--hh-kirmizi);
    text-underline-offset: 4px;
}

.hh-altbilgi-ulasim {
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 12px;
    padding: 1.125rem;
}

.hh-altbilgi-ulasim-satir {
    align-items: flex-start;
    color: #c5ccd6;
    display: flex;
    font-size: .8125rem;
    gap: .625rem;
    margin: 0 0 .75rem;
    overflow-wrap: anywhere;
}

.hh-altbilgi-ulasim-satir svg {
    color: #f87171;
    flex-shrink: 0;
    margin-top: 1px;
}

a.hh-altbilgi-ulasim-satir:hover {
    color: #fff;
}

.hh-altbilgi-ulasim-dugme {
    background: var(--hh-kirmizi);
    border-radius: 8px;
    color: #fff;
    display: inline-flex;
    font-size: .8125rem;
    font-weight: 800;
    margin-top: .25rem;
    padding: .5rem .875rem;
    transition: background-color .15s;
}

.hh-altbilgi-ulasim-dugme:hover {
    background: var(--hh-kirmizi-koyu);
}

.hh-altbilgi-alt {
    align-items: center;
    background: #0c131d;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 1rem 1.5rem;
}

.hh-altbilgi-alt p {
    margin: 0;
}

.hh-altbilgi-telif {
    color: #c5ccd6;
    font-size: .8125rem;
    font-weight: 700;
}

.hh-altbilgi-yasal {
    color: #627084;
    font-size: .75rem;
    margin-top: .125rem;
}

.hh-altbilgi-yukari {
    align-items: center;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 9999px;
    color: #fff;
    display: inline-flex;
    flex-shrink: 0;
    font-size: .75rem;
    font-weight: 800;
    gap: .375rem;
    padding: .4375rem .875rem;
    transition: background-color .15s, border-color .15s;
}

.hh-altbilgi-yukari:hover {
    background: var(--hh-kirmizi);
    border-color: var(--hh-kirmizi);
}

@media (max-width: 1023px) {
    .hh-altbilgi-ic {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hh-altbilgi-kategoriler {
        grid-column: 1 / -1;
        order: 3;
    }

    .hh-altbilgi-kategoriler ul {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .hh-altbilgi-ulasim {
        order: 2;
    }

    .hh-altbilgi-menu:not(.hh-altbilgi-kategoriler) {
        grid-column: 1 / -1;
        order: 4;
    }

    .hh-altbilgi-menu:not(.hh-altbilgi-kategoriler) ul {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {

    .hh-altbilgi-hizli {
        overflow-x: auto;
        scrollbar-width: none;
    }

    .hh-altbilgi-hizli::-webkit-scrollbar {
        display: none;
    }

    .hh-altbilgi-hizli a {
        flex: 0 0 auto;
        padding: .75rem 1rem;
        white-space: nowrap;
    }

    .hh-altbilgi-ic {
        gap: 1.75rem;
        grid-template-columns: minmax(0, 1fr);
        padding: 1.75rem 1rem 1.5rem;
    }

    .hh-altbilgi-kategoriler ul,
    .hh-altbilgi-menu:not(.hh-altbilgi-kategoriler) ul {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hh-altbilgi-alt {
        align-items: flex-start;
        padding: 1rem;
    }
}

.hh-kabuk > main.hh-kapsayici {
    padding-bottom: .5rem;
    padding-top: .5rem;
}

.hh-reklam-sarmal:empty,
.hh-reklam-sarmal-ev:empty {
    display: none;
}

.hh-icerik-bos-uyarisi {
    color: var(--hh-metin-soluk);
    padding: 2rem 0;
    text-align: center;
}

.hh-anasayfa {
    display: flex;
    flex-direction: column;
}

.hh-anasayfa > * {
    margin-bottom: 1.25rem;
}

.hh-anasayfa img {
    display: block;
}

.hh-spot-serit {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 0;
}

.hh-spot-kart {
    aspect-ratio: 16 / 9;
    border: 1px solid var(--hh-cizgi);
    border-radius: 12px;
    box-shadow: none;
    display: block;
    overflow: hidden;
    position: relative;
    transition: box-shadow .15s;
}

.hh-spot-kart:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
}

.hh-spot-kart img {
    height: 100%;
    inset: 0;
    max-width: none;
    object-fit: cover;
    position: absolute;
    transition: transform .5s;
    width: 100%;
}

.hh-spot-kart:hover img {
    transform: scale(1.05);
}

.hh-spot-kart-ortu {
    align-items: flex-end;
    background: linear-gradient(to top, rgba(0, 0, 0, .8), transparent 50%, transparent);
    display: flex;
    inset: 0;
    padding: .75rem;
    position: absolute;
}

.hh-spot-kart-baslik {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: #fff;
    display: -webkit-box;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
    overflow: hidden;
}

.hh-spot-ilan {
    min-width: 0;
}

.hh-spot-ilan .hh-spot-kart {
    border-color: var(--hh-lacivert);
}

.hh-spot-ilan-rozet {
    background: var(--hh-lacivert);
    border-radius: 6px;
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    left: .5rem;
    letter-spacing: .06em;
    line-height: 1.5;
    padding: .2rem .5rem;
    position: absolute;
    text-transform: uppercase;
    top: .5rem;
}

.hh-spot-ilan-bos {
    background: var(--hh-lacivert);
}

.hh-manset {
    align-items: stretch;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    padding: 0;
}

.hh-manset-ana {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.hh-manset-sahne {
    aspect-ratio: 1200 / 675;
    background: #1b2634;
    border-radius: 12px;
    box-shadow: none;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.hh-manset-slayt {
    display: block;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    transition: opacity .5s ease-in-out;
}

.hh-manset-slayt.hh-aktif {
    opacity: 1;
    pointer-events: auto;
}

.hh-manset-slayt img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.hh-manset-numaralar {
    display: flex;
    flex-wrap: nowrap;
    gap: .375rem;
    justify-content: center;
    margin-top: .625rem;
    width: 100%;
}

.hh-manset-numara {
    align-items: center;
    aspect-ratio: 1 / 1;
    background: var(--hh-zemin);
    border-radius: 9999px;
    color: var(--hh-kirmizi);
    display: flex;
    flex: 0 1 2rem;
    font-size: .8125rem;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    justify-content: center;
    line-height: 1;
    min-width: 0;
    transition: background-color .15s, color .15s, transform .15s;
}

.hh-manset-numara:hover {
    background: var(--hh-cizgi);
}

.hh-manset-numara.hh-aktif {
    background: var(--hh-kirmizi);
    color: #fff;
    transform: scale(1.08);
}

.hh-manset-yan {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
}

.hh-manset-yan-pencere {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    position: relative;
}

.hh-manset-yan-sayfa {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    inset: 0;
    opacity: 0;
    position: absolute;
    transform: translateX(1.5rem);
    transition: opacity .4s ease, transform .4s ease, visibility .4s;
    visibility: hidden;
}

.hh-manset-yan-sayfa.hh-aktif {
    opacity: 1;
    transform: none;
    visibility: visible;
}

.hh-manset-yan-gezinti {
    align-items: center;
    display: flex;
    gap: .5rem;
    height: 2rem;
    justify-content: center;
    margin-top: .625rem;
}

.hh-manset-yan-ok {
    align-items: center;
    background: var(--hh-zemin);
    border-radius: 9999px;
    color: var(--hh-kirmizi);
    display: flex;
    font-size: 1.125rem;
    font-weight: 800;
    height: 2rem;
    justify-content: center;
    line-height: 1;
    padding-bottom: 2px;
    transition: background-color .15s, color .15s;
    width: 2rem;
}

.hh-manset-yan-ok:hover {
    background: var(--hh-kirmizi);
    color: #fff;
}

.hh-manset-yan-noktalar {
    align-items: center;
    display: flex;
    gap: .375rem;
}

.hh-manset-yan-nokta {
    background: var(--hh-cizgi);
    border-radius: 9999px;
    height: .5rem;
    transition: background-color .2s, width .2s;
    width: .5rem;
}

.hh-manset-yan-nokta.hh-aktif {
    background: var(--hh-kirmizi);
    width: 1.25rem;
}

.hh-manset-yan-canli .hh-manset-canli {
    border-radius: 12px;
    flex: 1 1 0;
    margin-bottom: .75rem;
    min-height: 0;
    overflow: hidden;
    position: relative;
}

.hh-manset-yan-kart {
    border-radius: 12px;
    display: block;
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    position: relative;
}

.hh-manset-yan-kart:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
}

.hh-manset-yan-kart img {
    height: 100%;
    inset: 0;
    max-width: none;
    object-fit: cover;
    position: absolute;
    transition: transform .7s;
    width: 100%;
}

.hh-manset-yan-kart:hover img {
    transform: scale(1.1);
}

.hh-manset-yan-ortu {
    background: linear-gradient(to top, #000, rgba(0, 0, 0, .7) 50%, transparent);
    bottom: 0;
    left: 0;
    padding: 2.5rem 1rem 1rem;
    position: absolute;
    right: 0;
    z-index: 1;
}

.hh-manset-yan-ortu h3 {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: #fff;
    display: -webkit-box;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .1)) drop-shadow(0 1px 1px rgba(0, 0, 0, .06));
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.25;
    margin: 0;
    overflow: hidden;
}

.hh-manset-canli {
    background: #000;
}

.hh-manset-canli iframe {
    border: 0;
    height: 100%;
    inset: 0;
    position: absolute;
    width: 100%;
}

.hh-manset-canli-etiket {
    background: var(--hh-sondakika-zemin);
    border-radius: 4px;
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    left: .5rem;
    padding: .125rem .375rem;
    position: absolute;
    top: .5rem;
    z-index: 2;
}

.hh-yazar-serit {
    min-width: 0;
}

.hh-yazar-serit-ust {
    align-items: center;
    border-bottom: 2px solid var(--hh-lacivert);
    display: flex;
    gap: .75rem;
    justify-content: space-between;
    padding-bottom: .625rem;
}

.hh-yazar-serit-baslik {
    align-items: center;
    color: var(--hh-metin-koyu);
    display: flex;
    font-size: 1.125rem;
    font-weight: 900;
    gap: .625rem;
    letter-spacing: .01em;
    line-height: 1.25;
    margin: 0;
    text-transform: uppercase;
    white-space: nowrap;
}

.hh-yazar-serit-baslik span {
    align-items: flex-end;
    flex-shrink: 0;
    background: var(--hh-kirmizi);
    border-radius: 8px;
    color: #fff;
    display: flex;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.75rem;
    height: 1.75rem;
    justify-content: center;
    line-height: .62;
    overflow: hidden;
    width: 1.75rem;
}

.hh-yazar-serit-araclar {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    gap: .375rem;
}

.hh-yazar-serit-araclar a {
    color: var(--hh-metin-soluk);
    font-size: .75rem;
    font-weight: 700;
    margin-right: .5rem;
    transition: color .15s;
}

.hh-yazar-serit-araclar a:hover {
    color: var(--hh-kirmizi);
}

.hh-yazar-serit-araclar button {
    align-items: center;
    background: var(--hh-yuzey);
    border: 1px solid var(--hh-cizgi);
    border-radius: 8px;
    color: var(--hh-metin);
    display: flex;
    font-size: 1.125rem;
    height: 2rem;
    justify-content: center;
    line-height: 1;
    padding-bottom: 2px;
    transition: background-color .15s, border-color .15s, color .15s;
    width: 2rem;
}

.hh-yazar-serit-araclar button:hover {
    background: var(--hh-kirmizi);
    border-color: var(--hh-kirmizi);
    color: #fff;
}

.hh-yazar-serit-pencere {
    margin: 0 -.5rem;
    overflow: hidden;
    padding-top: .875rem;
}

.hh-yazar-serit-ray {
    display: flex;
    transition: transform .35s ease;
}

.hh-kose-hucre {
    display: flex;
    flex: 0 0 25%;
    min-width: 0;
    padding: 0 .5rem 2px;
}

.hh-kose-kart {
    background: var(--hh-yuzey);
    border: 1px solid var(--hh-cizgi);
    border-radius: 12px;
    display: flex;
    gap: .75rem;
    min-width: 0;
    padding: .875rem;
    transition: border-color .2s, box-shadow .2s;
    width: 100%;
}

.hh-kose-kart:hover,
.hh-kose-kart:focus-within {
    border-color: var(--hh-kirmizi);
    box-shadow: 0 6px 16px rgba(17, 26, 38, .08);
}

.hh-kose-kart-foto {
    background: var(--hh-zemin);
    border-radius: 14px;
    display: block;
    flex-shrink: 0;
    height: 84px;
    overflow: hidden;
    width: 84px;
}

.hh-kose-kart-foto img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.hh-kose-kart-harf {
    align-items: center;
    color: var(--hh-metin-soluk);
    display: flex;
    font-size: 2rem;
    font-weight: 900;
    height: 100%;
    justify-content: center;
}

.hh-kose-kart-govde {
    display: flex;
    flex: 1 1 0%;
    flex-direction: column;
    min-width: 0;
}

.hh-kose-kart-ad {
    color: var(--hh-kirmizi);
    font-size: .875rem;
    font-weight: 900;
    letter-spacing: .02em;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hh-kose-kart-ad:hover {
    color: var(--hh-kirmizi-koyu);
}

.hh-kose-kart-baslik {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    color: var(--hh-metin-koyu);
    display: -webkit-box;
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.3;
    margin: .3125rem 0 0;
    overflow: hidden;
}

.hh-kose-kart-baslik a {
    color: inherit;
}

.hh-kose-kart-baslik a:hover {
    color: var(--hh-kirmizi);
}

.hh-yazar-kart {
    align-items: center;
    display: flex;
    flex: 0 0 20%;
    flex-direction: column;
    min-width: 0;
    padding: 0 .375rem;
    text-align: center;
}

.hh-yazar-kart-foto {
    background: var(--hh-yuzey);
    border: 4px solid var(--hh-cizgi);
    border-radius: 9999px;
    display: block;
    height: 72px;
    margin-bottom: .5rem;
    overflow: hidden;
    transition: border-color .3s ease, box-shadow .3s ease;
    width: 72px;
}

.hh-yazar-kart:hover .hh-yazar-kart-foto,
.hh-yazar-kart:focus-within .hh-yazar-kart-foto {
    border-color: #dc2626;
    box-shadow: 0 0 0 4px rgba(220, 38, 38, .18);
}

.hh-yazar-kart-foto img {
    height: 100%;
    object-fit: cover;
    transition: transform .3s;
    width: 100%;
}

.hh-yazar-kart:hover .hh-yazar-kart-foto img {
    transform: scale(1.05);
}

.hh-yazar-kart-harf {
    align-items: center;
    background: var(--hh-zemin);
    color: var(--hh-metin-soluk);
    display: flex;
    font-size: 1.5rem;
    font-weight: 900;
    height: 100%;
    justify-content: center;
}

.hh-yazar-kart-ad {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--hh-metin-koyu);
    display: -webkit-box;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 .25rem;
    overflow: hidden;
    padding: 0 .25rem;
    width: 100%;
}

.hh-yazar-kart-ad a {
    color: inherit;
}

.hh-yazar-kart-yazi {
    background: #f5f7fa;
    border: 1px solid var(--hh-cizgi-acik);
    border-radius: 8px;
    display: block;
    margin-top: .25rem;
    padding: .375rem;
    transition: background-color .15s, border-color .15s;
    width: 100%;
}

.hh-yazar-kart-yazi:hover {
    background: var(--hh-kirmizi-acik);
    border-color: #fecaca;
}

.hh-yazar-kart-yazi span {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--hh-metin-koyu);
    display: -webkit-box;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.375;
    overflow: hidden;
    transition: color .15s;
}

.hh-yazar-kart-yazi:hover span {
    color: var(--hh-kirmizi);
}

.hh-piyasa-serit {
    align-items: center;
    background: var(--hh-lacivert);
    border-radius: 12px;
    color: #fff;
    display: flex;
    min-width: 0;
    padding: .625rem .5rem .625rem 1rem;
}

.hh-piyasa-etiket {
    background: var(--hh-kirmizi);
    border-radius: 6px;
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .06em;
    line-height: 1.5;
    padding: .25rem .625rem;
    text-transform: uppercase;
}

.hh-piyasa-serit-ic {
    display: flex;
    flex: 1 1 0%;
    min-width: 0;
}

.hh-piyasa-kutu {
    align-items: center;
    border-left: 1px solid rgba(255, 255, 255, .12);
    display: flex;
    flex: 1 1 0%;
    gap: .625rem;
    justify-content: center;
    min-width: 0;
    padding: .125rem .75rem;
}

.hh-piyasa-kutu:first-child {
    border-left: 0;
}

.hh-piyasa-kutu-simge {
    align-items: center;
    border: 1px solid rgba(255, 209, 102, .45);
    border-radius: 9999px;
    color: var(--hh-sondakika-saat);
    display: flex;
    flex-shrink: 0;
    font-size: .75rem;
    font-weight: 800;
    height: 1.75rem;
    justify-content: center;
    width: 1.75rem;
}

.hh-piyasa-kutu-metin {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.hh-piyasa-kutu-ad {
    color: #94a0b0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.4;
    text-transform: uppercase;
    white-space: nowrap;
}

.hh-piyasa-kutu-ad {
    align-items: baseline;
    display: flex;
    gap: .375rem;
}

.hh-piyasa-kutu-degisim {
    font-size: 9px;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    letter-spacing: 0;
}

.hh-piyasa-kutu-degisim.hh-yukari {
    color: #4ade80;
}

.hh-piyasa-kutu-degisim.hh-asagi {
    color: #f87171;
}

.hh-piyasa-kutu-deger {
    color: #fff;
    font-size: .9375rem;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    line-height: 1.25;
    white-space: nowrap;
}

.hh-ana-izgara {
    align-items: start;
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

.hh-ana-izgara-sol {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    grid-column: span 8;
    min-width: 0;
}

.hh-ana-izgara-yan {
    align-self: stretch;
    grid-column: span 4;
    min-width: 0;
}

.hh-yan-yapiskan {
    position: sticky;
    top: 1rem;
}

.hh-kategori-ikili {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hh-kategori-kutu {
    background: var(--hh-yuzey);
    border: 1px solid var(--hh-cizgi);
    border-radius: 12px;
    box-shadow: none;
    overflow: hidden;
    padding: 0;
}

.hh-kategori-kutu-ust {
    align-items: center;
    background: var(--hh-yuzey);
    border-bottom: 2px solid var(--hh-lacivert);
    display: flex;
    justify-content: space-between;
    padding: .625rem 1rem;
}

.hh-kategori-kutu-ust h3 {
    border-left: 4px solid var(--hh-kirmizi);
    color: var(--hh-metin-koyu);
    font-size: 13px;
    font-weight: 900;
    line-height: 1.2;
    margin: 0;
    padding-left: .5rem;
    text-transform: uppercase;
}

.hh-kategori-kutu-ust a {
    color: #475365;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
}

.hh-kategori-kutu-ust a:hover {
    color: var(--hh-kirmizi);
}

.hh-kategori-kutu-govde {
    padding: 1rem;
}

.hh-kategori-kutu-buyuk {
    display: block;
    margin-bottom: .75rem;
}

.hh-kategori-kutu-buyuk-gorsel,
.hh-kategori-kutu-satir-gorsel {
    aspect-ratio: 16 / 9;
    background: var(--hh-zemin);
    display: block;
    overflow: hidden;
    position: relative;
}

.hh-kategori-kutu-buyuk-gorsel {
    border-radius: 8px;
    margin-bottom: .5rem;
}

.hh-kategori-kutu-buyuk-gorsel img,
.hh-kategori-kutu-satir-gorsel img {
    height: 100%;
    inset: 0;
    max-width: none;
    object-fit: cover;
    position: absolute;
    transition: transform .5s;
    width: 100%;
}

.hh-kategori-kutu-buyuk:hover img {
    transform: scale(1.05);
}

.hh-kategori-kutu-buyuk h4 {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--hh-metin-koyu);
    display: -webkit-box;
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
    overflow: hidden;
}

.hh-kategori-kutu-buyuk:hover h4,
.hh-kategori-kutu-satir:hover h5 {
    color: var(--hh-kirmizi);
}

.hh-kategori-kutu-satir {
    align-items: center;
    border-bottom: 1px solid #f5f7fa;
    display: flex;
    gap: .75rem;
    margin-bottom: .75rem;
    padding-bottom: .5rem;
}

.hh-kategori-kutu-satir:last-child {
    border-bottom: 0;
    margin-bottom: 0;
}

.hh-kategori-kutu-satir-gorsel {
    border-radius: 4px;
    flex-shrink: 0;
    width: 6rem;
}

.hh-kategori-kutu-satir h5 {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: #334052;
    display: -webkit-box;
    flex: 1 1 0%;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.25;
    margin: 0;
    min-width: 0;
    overflow: hidden;
}

.hh-kart-izgara {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hh-kart {
    background: var(--hh-yuzey);
    border: 1px solid var(--hh-cizgi);
    border-radius: 12px;
    box-shadow: none;
    overflow: hidden;
    transition: box-shadow .15s;
}

.hh-kart:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
}

.hh-kart-gorsel {
    aspect-ratio: 16 / 9;
    background: var(--hh-zemin);
    display: block;
    overflow: hidden;
}

.hh-kart-gorsel img {
    display: block;
    height: 100%;
    object-fit: cover;
    transition: transform .5s;
    width: 100%;
}

.hh-kart:hover .hh-kart-gorsel img {
    transform: scale(1.05);
}

.hh-kart-govde {
    padding: .75rem;
}

.hh-kabuk .hh-kart-govde h3 {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--hh-metin-koyu);
    display: -webkit-box;
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.375;
    margin: 0;
    overflow: hidden;
}

.hh-kabuk .hh-kart-govde h3 a {
    color: inherit;
}

.hh-kabuk .hh-kart:hover .hh-kart-govde h3 {
    color: var(--hh-kirmizi);
}

.hh-kart-ozet {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--hh-metin-soluk);
    display: -webkit-box;
    font-size: .75rem;
    line-height: 1.5;
    margin: .375rem 0 0;
    overflow: hidden;
}

.hh-kart-zaman {
    color: var(--hh-metin-silik);
    display: block;
    font-size: 10px;
    font-weight: 500;
    margin-top: .375rem;
}

.hh-yan-kutu {
    background: var(--hh-yuzey);
    border: 1px solid var(--hh-cizgi);
    border-radius: 12px;
    box-shadow: none;
    margin-bottom: 1.5rem;
    overflow: hidden;
    padding: 0;
}

.hh-yan-kutu-ust {
    align-items: center;
    background: var(--hh-lacivert);
    border-bottom: 0;
    display: flex;
    justify-content: space-between;
    padding: .75rem 1.25rem;
}

.hh-yan-kutu-ust h3 {
    align-items: center;
    color: #fff;
    display: flex;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: .02em;
    line-height: 1.5;
    margin: 0;
    text-transform: uppercase;
}

.hh-yan-kutu-populer .hh-yan-kutu-ust h3 {
    font-size: 15px;
}

.hh-yan-kutu-ust h3 span {
    background: #94a0b0;
    border-radius: 9999px;
    height: 1rem;
    margin-right: .5rem;
    width: .25rem;
}

.hh-yan-kutu-populer .hh-yan-kutu-ust h3 span {
    background: var(--hh-kirmizi);
}

.hh-yan-oge {
    border-top: 1px solid var(--hh-cizgi-acik);
    display: flex;
    gap: .75rem;
    padding: .75rem;
    transition: background-color .2s;
}

.hh-yan-oge:first-child {
    border-top: 0;
}

.hh-yan-oge:hover {
    background: #f5f7fa;
}

.hh-yan-kutu-populer .hh-yan-oge:hover {
    background: #f5f7fa;
}

.hh-yan-oge-gorsel {
    background: var(--hh-zemin);
    border-radius: 6px;
    flex-shrink: 0;
    height: 4rem;
    overflow: hidden;
    position: relative;
    width: 6rem;
}

.hh-yan-oge-gorsel img {
    display: block;
    height: 100%;
    object-fit: cover;
    transition: transform .5s;
    width: 100%;
}

.hh-yan-oge:hover .hh-yan-oge-gorsel img {
    transform: scale(1.1);
}

.hh-yan-oge-sira {
    align-items: center;
    background: var(--hh-lacivert);
    border-radius: 9999px;
    box-shadow: 0 0 0 2px #fff;
    color: #fff;
    display: flex;
    font-size: 10px;
    font-weight: 700;
    height: 1.375rem;
    justify-content: center;
    left: .25rem;
    position: absolute;
    top: .25rem;
    width: 1.375rem;
    z-index: 10;
}

.hh-yan-oge-metin {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: .125rem 0;
}

.hh-yan-oge-metin h4 {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--hh-metin);
    display: -webkit-box;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.375;
    margin: 0;
    overflow: hidden;
}

.hh-yan-kutu-populer .hh-yan-oge-metin h4 {
    font-size: 15px;
}

.hh-yan-oge:hover h4 {
    color: var(--hh-kirmizi);
}

.hh-yan-kutu-populer .hh-yan-oge:hover h4 {
    color: var(--hh-kirmizi);
}

.hh-yan-oge-zaman {
    color: var(--hh-metin-silik);
    font-size: 10px;
    font-weight: 500;
    margin-top: .25rem;
}

.hh-galeri-serit {
    padding: 0;
}

.hh-galeri-serit-foto {
    border-top: 1px solid var(--hh-cizgi);
    margin-top: .75rem;
    padding-top: 1.5rem;
}

.hh-galeri-serit-ust {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.hh-galeri-serit-ust h2 {
    color: var(--hh-metin-koyu);
    font-size: 1.25rem;
    font-weight: 900;
    line-height: 1.75rem;
    margin: 0;
}

.hh-galeri-serit-ust a {
    color: var(--hh-metin-silik);
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.hh-galeri-serit-ust a:hover {
    color: var(--hh-kirmizi);
}

.hh-galeri-serit-izgara {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.hh-galeri-kart {
    background: var(--hh-yuzey);
    border: 1px solid var(--hh-cizgi);
    border-radius: 12px;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    transition: box-shadow .15s;
}

.hh-galeri-kart:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
}

.hh-galeri-kart-gorsel {
    aspect-ratio: 16 / 9;
    background: var(--hh-zemin);
    display: block;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.hh-galeri-kart-gorsel img {
    display: block;
    height: 100%;
    object-fit: cover;
    transition: transform .5s;
    width: 100%;
}

.hh-galeri-kart:hover .hh-galeri-kart-gorsel img {
    transform: scale(1.05);
}

.hh-galeri-kart-oynat {
    background: rgba(220, 38, 38, .92);
    border-radius: 9999px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
    height: 2.75rem;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: transform .15s;
    width: 2.75rem;
}

.hh-galeri-kart-oynat::after {
    border-color: transparent transparent transparent #fff;
    border-style: solid;
    border-width: 7px 0 7px 11px;
    content: "";
    left: 54%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

.hh-galeri-kart:hover .hh-galeri-kart-oynat {
    transform: translate(-50%, -50%) scale(1.1);
}

.hh-galeri-kart-baslik {
    background: var(--hh-yuzey);
    display: block;
    min-height: 3.25rem;
    overflow: hidden;
    padding: 8px 10px 10px;
}

.hh-galeri-kart-baslik span {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--hh-metin-koyu);
    display: -webkit-box;
    font-size: 13px;
    font-weight: 700;
    line-height: 17px;
    max-height: 34px;
    overflow: hidden;
    overflow-wrap: anywhere;
}

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

    .hh-manset-yan-pencere {
        aspect-ratio: 32 / 9;
        flex: none;
    }

    .hh-manset-yan-sayfa {
        flex-direction: row;
    }

    .hh-manset-yan-canli .hh-manset-canli {
        aspect-ratio: 16 / 9;
        flex: none;
    }

    .hh-ana-izgara-sol,
    .hh-ana-izgara-yan {
        grid-column: span 12;
    }

    .hh-yan-yapiskan {
        position: static;
    }

    .hh-kose-hucre {
        flex-basis: 50%;
    }

    .hh-piyasa-serit-ic {
        overflow-x: auto;
        scrollbar-width: none;
    }

    .hh-piyasa-serit-ic::-webkit-scrollbar {
        display: none;
    }

    .hh-piyasa-kutu {
        flex: 0 0 auto;
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media (max-width: 767px) {
    .hh-kabuk > main.hh-kapsayici.hh-anasayfa {
        padding-left: 0;
        padding-right: 0;
    }

    .hh-anasayfa > * {
        margin-left: 1rem;
        margin-right: 1rem;
    }

    .hh-anasayfa > .hh-manset {
        margin-left: 0;
        margin-right: 0;
        order: 1;
    }

    .hh-anasayfa > .hh-yazar-serit {
        order: 3;
    }

    .hh-anasayfa > .hh-piyasa-serit {
        order: 4;
    }

    .hh-anasayfa > .hh-spot-serit {
        order: 5;
    }

    .hh-anasayfa > .hh-ana-izgara {
        order: 6;
    }

    .hh-anasayfa > .hh-reklam-sarmal {
        order: 2;
    }

    .hh-manset-sahne {
        border-radius: 0;
        box-shadow: none;
    }

    .hh-manset-numaralar {
        flex-wrap: wrap;
        gap: .375rem;
        padding: 0 .75rem;
    }

    .hh-manset-numara {
        flex: 0 0 1.75rem;
        font-size: .75rem;
    }

    .hh-manset-yan,
    .hh-kart-izgara,
    .hh-ana-izgara-yan,
    .hh-galeri-serit {
        display: none;
    }

    .hh-spot-serit {
        gap: .75rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hh-spot-kart-baslik {
        font-size: 14.4px;
    }

    .hh-anasayfa > .hh-yazar-serit,
    .hh-anasayfa > .hh-piyasa-serit {
        margin-left: .75rem;
        margin-right: .75rem;
    }

    .hh-piyasa-serit {
        padding-left: .75rem;
    }

    .hh-piyasa-kutu-deger {
        font-size: .875rem;
    }

    .hh-yazar-serit-baslik {
        font-size: 1rem;
    }

    .hh-kose-hucre {
        flex-basis: 86%;
    }

    .hh-kategori-ikili {
        gap: 1.25rem;
        grid-template-columns: minmax(0, 1fr);
    }

    .hh-ana-izgara-sol {
        gap: 1.25rem;
    }
}

.hh-kirinti {
    color: var(--hh-metin-soluk);
    display: flex;
    font-size: .875rem;
    line-height: 1.25rem;
    margin: 1.5rem 0;
    overflow-x: auto;
    white-space: nowrap;
}

.hh-kirinti a {
    color: inherit;
    transition: color .15s;
}

.hh-kirinti a:hover {
    color: var(--hh-kirmizi);
}

.hh-kirinti > span {
    margin: 0 .5rem;
}

.hh-kirinti .hh-kirinti-kategori {
    color: #334052;
    font-weight: 700;
}

.hh-kirinti .hh-kirinti-son {
    color: var(--hh-metin-silik);
    margin: 0;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hh-detay-izgara {
    align-items: start;
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    margin-bottom: 1.5rem;
}

.hh-detay-ana {
    grid-column: span 8;
    min-width: 0;
}

.hh-detay-yan {
    align-self: stretch;
    grid-column: span 4;
    min-width: 0;
}

.hh-detay-yan-sabit {
    position: sticky;
    top: 1rem;
}

.hh-detay-kart {
    background: var(--hh-yuzey);
    border: 1px solid var(--hh-cizgi-acik);
    border-radius: 12px;
    box-shadow: none;
    margin-bottom: 2rem;
    overflow: hidden;
    padding: 0;
}

.hh-detay-kapak {
    aspect-ratio: 16 / 9;
    background: var(--hh-zemin);
    margin: 0;
    width: 100%;
}

.hh-detay-kapak img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.hh-detay-paylas {
    align-items: center;
    background: var(--hh-yuzey);
    border-bottom: 1px solid var(--hh-cizgi-acik);
    display: flex;
    flex-wrap: wrap;
    gap: .5rem .875rem;
    padding: .875rem 2.5rem;
}

.hh-detay-paylas-etiket {
    color: var(--hh-metin-silik);
    font-size: .6875rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.hh-detay-paylas-dugmeler {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .4375rem;
}

.hh-detay-paylas-dugme {
    --hh-paylas-renk: var(--hh-lacivert);
    align-items: center;
    background: var(--hh-zemin);
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--hh-metin-koyu);
    display: inline-flex;
    font-size: .8125rem;
    font-weight: 700;
    gap: .4375rem;
    height: 2.25rem;
    justify-content: center;
    padding: 0 .75rem;
    transition: background-color .15s, border-color .15s, color .15s;
}

.hh-detay-paylas-sistem {
    display: none;
}

.hh-paylasim-var .hh-detay-paylas-sistem {
    display: inline-flex;
}

.hh-detay-paylas-dugme svg {
    color: var(--hh-paylas-renk);
    flex-shrink: 0;
    transition: color .15s;
}

.hh-detay-paylas-dugme:hover,
.hh-detay-paylas-dugme:focus-visible {
    background: var(--hh-paylas-renk);
    color: #fff;
}

.hh-detay-paylas-dugme:hover svg,
.hh-detay-paylas-dugme:focus-visible svg {
    color: #fff;
}

.hh-detay-paylas-facebook {
    --hh-paylas-renk: #1877f2;
}

.hh-detay-paylas-x {
    --hh-paylas-renk: #111a26;
}

.hh-detay-paylas-whatsapp {
    --hh-paylas-renk: #128c4b;
}

.hh-detay-paylas-telegram {
    --hh-paylas-renk: #1c8adb;
}

.hh-detay-paylas-kopyala {
    --hh-paylas-renk: var(--hh-kirmizi);
    background: var(--hh-yuzey);
    border: 1px dashed var(--hh-cizgi);
}

.hh-detay-ic {
    padding: 2.5rem;
}

.hh-detay-ust {
    padding: 2rem 2.5rem 1.25rem;
}

.hh-detay-ust + .hh-detay-kapak + .hh-detay-paylas + .hh-detay-ic,
.hh-detay-ust + .hh-detay-paylas + .hh-detay-ic {
    padding-top: 1.75rem;
}

.hh-detay-kategori {
    background: var(--hh-kirmizi);
    border-radius: 6px;
    color: #fff;
    display: inline-block;
    font-size: .6875rem;
    font-weight: 900;
    letter-spacing: .08em;
    line-height: 1.5;
    margin-bottom: .875rem;
    padding: .25rem .625rem;
    text-transform: uppercase;
    transition: background-color .15s;
}

.hh-detay-kategori:hover {
    background: var(--hh-lacivert);
}

.hh-detay-baslik {
    color: var(--hh-metin-koyu);
    font-size: 36px;
    font-weight: 900;
    letter-spacing: -.015em;
    line-height: 1.2;
    margin: 0 0 1rem;
}

.hh-detay-bilgi {
    align-items: center;
    border-bottom: 1px solid var(--hh-cizgi-acik);
    border-top: 1px solid var(--hh-cizgi-acik);
    color: var(--hh-metin-soluk);
    display: flex;
    flex-wrap: wrap;
    font-size: .8125rem;
    font-weight: 600;
    gap: .5rem 1rem;
    line-height: 1.25rem;
    margin-bottom: 1rem;
    padding: .625rem 0;
}

.hh-detay-ust .hh-detay-bilgi {
    margin-bottom: 0;
}

.hh-detay-bilgi time {
    align-items: center;
    display: flex;
    gap: .375rem;
}

.hh-detay-bilgi time svg {
    flex-shrink: 0;
    opacity: .75;
}

.hh-detay-bilgi-araclar {
    align-items: center;
    display: flex;
    gap: .5rem;
    margin-left: auto;
}

.hh-detay-bilgi-araclar button {
    background: var(--hh-yuzey);
    border: 1px solid var(--hh-cizgi);
    border-radius: 6px;
    color: #334052;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1;
    padding: .375rem .5rem;
}

.hh-detay-bilgi-araclar button:hover {
    border-color: var(--hh-kirmizi);
    color: var(--hh-kirmizi);
}

.hh-detay-bilgi-araclar .hh-haber-detay-yazi-boyutu {
    display: inline-flex;
    gap: .25rem;
}

.hh-detay-ozet {
    border-left: 4px solid var(--hh-kirmizi);
    margin-bottom: 1.25rem;
    padding: .125rem 0 .125rem 1rem;
}

.hh-detay-ozet h2 {
    color: var(--hh-menu-metin);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.5;
    margin: 0;
}

.hh-kabuk .hh-detay-icerik {
    color: var(--hh-metin);
    font-size: calc(19px * var(--hh-yazi-olcek));
    line-height: 1.75;
    overflow-wrap: break-word;
}

.hh-kabuk .hh-detay-icerik p {
    color: var(--hh-metin);
    margin: 0 0 1.25em;
}

.hh-kabuk .hh-detay-icerik h2,
.hh-kabuk .hh-detay-icerik h3,
.hh-kabuk .hh-detay-icerik h4 {
    color: var(--hh-metin-koyu);
    font-weight: 700;
    line-height: 1.35;
    margin: 1em 0 .5em;
}

.hh-kabuk .hh-detay-icerik h2 {
    border-left: 4px solid var(--hh-kirmizi);
    font-size: 1.4em;
    padding-left: .625em;
}

.hh-kabuk .hh-detay-icerik h3 {
    font-size: 1.25em;
}

.hh-kabuk .hh-detay-icerik h4 {
    font-size: 1.125em;
}

.hh-kabuk .hh-detay-icerik p a {
    color: var(--hh-kirmizi);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-thickness: auto;
}

.hh-kabuk .hh-detay-icerik p a::after {
    content: none;
}

.hh-kabuk .hh-detay-icerik p a:hover {
    color: var(--hh-kirmizi-koyu);
}

.hh-kabuk .hh-detay-icerik img {
    border-radius: 12px;
    height: auto;
    margin: 1em 0;
    max-width: 100%;
}

.hh-kabuk .hh-detay-icerik ul,
.hh-kabuk .hh-detay-icerik ol {
    margin: 0 0 1rem;
    padding-left: 1.5rem;
}

.hh-kabuk .hh-detay-icerik ul {
    list-style: disc;
}

.hh-kabuk .hh-detay-icerik ol {
    list-style: decimal;
}

.hh-kabuk .hh-detay-icerik li {
    margin-bottom: .25rem;
}

.hh-kabuk .hh-detay-icerik blockquote {
    background: var(--hh-kirmizi-acik);
    border-left: 4px solid var(--hh-kirmizi);
    border-radius: 0 12px 12px 0;
    color: var(--hh-metin-koyu);
    font-weight: 600;
    margin: 1.4em 0;
    padding: .875em 1.125em;
}

.hh-kabuk .hh-detay-icerik blockquote p:last-child {
    margin-bottom: 0;
}

.hh-kabuk .hh-detay-icerik iframe {
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: 12px;
    height: auto;
    margin: 1em 0;
    max-width: 100%;
    width: 100%;
}

.hh-kabuk .hh-detay-icerik .hh-haber-detay-satir-ici-kart {
    align-items: center;
    background: #f5f7fa;
    border: 1px solid var(--hh-cizgi);
    border-left: 4px solid var(--hh-lacivert);
    border-radius: .5rem;
    box-shadow: none;
    color: inherit;
    display: flex;
    flex-direction: row;
    gap: .75rem;
    margin: 1.35rem 0;
    overflow: hidden;
    padding: .85rem .9rem;
    text-decoration: none;
    transition: background .15s ease;
}

.hh-kabuk .hh-detay-icerik .hh-haber-detay-satir-ici-kart:hover {
    background: #edf0f4;
}

.hh-kabuk .hh-detay-icerik .hh-haber-detay-satir-ici-kart img {
    aspect-ratio: auto;
    background: var(--hh-zemin);
    border: 0;
    border-radius: .35rem;
    flex: 0 0 7.5rem;
    height: 4.22rem;
    margin: 0;
    object-fit: cover;
    width: 7.5rem;
}

.hh-kabuk .hh-detay-icerik .hh-haber-detay-satir-ici-kart-govde {
    background: none;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0;
    justify-content: center;
    min-width: 0;
    padding: 0;
}

.hh-kabuk .hh-detay-icerik .hh-haber-detay-satir-ici-kart-govde::before {
    color: var(--hh-metin-soluk);
    content: "İlgili haber";
    display: block;
    font-size: .7rem;
    font-weight: 700;
    left: auto;
    letter-spacing: .08em;
    line-height: 1.3;
    margin-bottom: .35rem;
    opacity: .9;
    position: static;
    text-transform: uppercase;
    top: auto;
}

.hh-kabuk .hh-detay-icerik .hh-haber-detay-satir-ici-kart-baslik {
    -webkit-line-clamp: unset;
    color: #1b2634;
    display: block;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.4;
    margin: 0;
    transition: color .15s ease;
}

.hh-kabuk .hh-detay-icerik .hh-haber-detay-satir-ici-kart-baslik::after {
    color: var(--hh-kirmizi);
    content: " ›";
    font-weight: 600;
    opacity: 1;
}

.hh-kabuk .hh-detay-icerik .hh-haber-detay-satir-ici-kart:hover .hh-haber-detay-satir-ici-kart-baslik {
    color: #dc2626;
}

.hh-detay-kaynak {
    align-items: center;
    border-top: 1px solid var(--hh-cizgi-acik);
    display: flex;
    gap: .625rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
}

.hh-detay-kaynak span {
    color: var(--hh-metin-silik);
    font-size: .6875rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.hh-detay-kaynak strong {
    background: var(--hh-lacivert);
    border-radius: 6px;
    color: #fff;
    font-size: .8125rem;
    font-weight: 700;
    padding: .25rem .625rem;
}

.hh-haber-detay-etiketler {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1.5rem;
}

.hh-kabuk .hh-haber-detay-etiket {
    background: var(--hh-yuzey);
    border: 1px solid var(--hh-cizgi);
    border-radius: 8px;
    color: var(--hh-menu-metin);
    font-size: .75rem;
    font-weight: 700;
    padding: .3125rem .625rem;
    transition: background-color .15s, border-color .15s, color .15s;
}

.hh-kabuk .hh-haber-detay-etiket:hover {
    background: var(--hh-kirmizi);
    border-color: var(--hh-kirmizi);
    color: #fff;
}

.hh-kabuk .hh-ilgili-haberler,
.hh-detay-cok-okunan {
    border-top: 1px solid var(--hh-cizgi-acik);
    margin-top: 3rem;
    padding-top: 2rem;
}

.hh-kabuk .hh-ilgili-haberler-baslik,
.hh-detay-cok-okunan h3 {
    align-items: center;
    border: 0;
    border-bottom: 2px solid var(--hh-lacivert);
    color: var(--hh-metin-koyu);
    display: flex;
    font-size: 1.125rem;
    font-weight: 900;
    line-height: 1.75rem;
    margin: 0 0 1.25rem;
    padding: 0 0 .5rem;
    text-transform: uppercase;
}

.hh-kabuk .hh-ilgili-haberler-baslik::before,
.hh-detay-cok-okunan h3 span {
    background: var(--hh-kirmizi);
    border-radius: 9999px;
    content: "";
    height: .5rem;
    margin-right: .5rem;
    width: .5rem;
}

.hh-kabuk .hh-ilgili-haberler-izgara {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hh-kabuk .hh-ilgili-haberler-kart {
    display: block;
}

.hh-kabuk .hh-ilgili-haberler-kart img {
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    display: block;
    margin-bottom: .5rem;
    object-fit: cover;
    width: 100%;
}

.hh-kabuk .hh-ilgili-haberler-kart-baslik {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--hh-metin);
    display: -webkit-box;
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.375;
    overflow: hidden;
}

.hh-kabuk .hh-ilgili-haberler-kart:hover .hh-ilgili-haberler-kart-baslik {
    color: var(--hh-kirmizi);
}

.hh-detay-cok-okunan .hh-kart-izgara {
    gap: 1rem;
}

@media (max-width: 1023px) {
    .hh-detay-ana,
    .hh-detay-yan {
        grid-column: span 12;
    }
}

@media (max-width: 767px) {
    .hh-detay-izgara {
        gap: 1.25rem;
    }

    .hh-detay-kart {
        border-left: 0;
        border-radius: 0;
        border-right: 0;
        margin-left: -.75rem;
        margin-right: -.75rem;
    }

    .hh-detay-paylas {
        padding: .75rem 1rem;
    }

    .hh-detay-paylas-dugmeler {
        flex-wrap: nowrap;
    }

    .hh-detay-paylas-dugme {
        height: 2.5rem;
        min-width: 2.5rem;
        padding: 0 .625rem;
    }

    .hh-detay-paylas-dugme span {
        display: none;
    }

    .hh-detay-paylas-dugme.hh-kopyalandi span {
        display: inline;
    }

    .hh-detay-ic {
        padding: 1rem;
    }

    .hh-detay-ust {
        padding: 1.25rem 1rem 1rem;
    }

    .hh-detay-ust + .hh-detay-kapak + .hh-detay-paylas + .hh-detay-ic,
    .hh-detay-ust + .hh-detay-paylas + .hh-detay-ic {
        padding-top: 1.25rem;
    }

    .hh-detay-ozet h2 {
        font-size: 17px;
    }

    .hh-detay-baslik {
        font-size: 25.6px;
    }

    .hh-detay-ozet h2 {
        font-size: 20.7px;
    }

    .hh-kabuk .hh-detay-icerik {
        font-size: calc(18.05px * var(--hh-yazi-olcek));
    }

    .hh-detay-bilgi {
        font-size: .75rem;
    }

    .hh-detay-bilgi-araclar {
        margin-left: 0;
    }

    .hh-kabuk .hh-ilgili-haberler-izgara,
    .hh-detay-cok-okunan .hh-kart-izgara {
        grid-template-columns: minmax(0, 1fr);
    }

    .hh-detay-cok-okunan {
        display: none;
    }
}

@media (max-width: 480px) {
    .hh-kabuk .hh-detay-icerik .hh-haber-detay-satir-ici-kart img {
        flex-basis: 5.75rem;
        height: 3.24rem;
        width: 5.75rem;
    }

    .hh-kabuk .hh-detay-icerik .hh-haber-detay-satir-ici-kart-baslik {
        font-size: .95rem;
    }
}

.hh-liste-sayfa {
    padding: 2.5rem 0 2rem;
}

.hh-sayfa-baslik {
    border-left: 6px solid var(--hh-kirmizi);
    color: var(--hh-metin-koyu);
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 2.25rem;
    margin: 0 0 2rem;
    padding-left: .875rem;
}

.hh-liste-izgara {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hh-liste-izgara-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 2.5rem;
}

.hh-liste-ayrac {
    border: 0;
    border-top: 1px solid var(--hh-cizgi);
    margin: 0 0 2rem;
}

.hh-liste-kart {
    background: var(--hh-yuzey);
    border: 1px solid var(--hh-cizgi);
    border-radius: 12px;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    transition: box-shadow .15s;
}

.hh-liste-kart:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
}

.hh-liste-kart-gorsel {
    aspect-ratio: 16 / 9;
    background: var(--hh-zemin);
    display: block;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
}

.hh-liste-kart-gorsel img {
    display: block;
    height: 100%;
    object-fit: cover;
    transition: transform .5s;
    width: 100%;
}

.hh-liste-kart:hover .hh-liste-kart-gorsel img {
    transform: scale(1.05);
}

.hh-liste-kart-rozet {
    background: var(--hh-kirmizi);
    border-radius: 4px;
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    left: .5rem;
    line-height: 1rem;
    padding: .25rem .5rem;
    position: absolute;
    top: .5rem;
}

.hh-liste-kart-govde {
    display: flex;
    flex: 1 1 0%;
    flex-direction: column;
    padding: 1.25rem;
}

.hh-liste-kart-govde h2 {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--hh-metin-koyu);
    display: -webkit-box;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.75rem;
    margin: 0 0 .5rem;
    overflow: hidden;
}

.hh-liste-kart-govde h2 a {
    color: inherit;
    transition: color .15s;
}

.hh-liste-kart-govde h2 a:hover {
    color: var(--hh-kirmizi);
}

.hh-liste-kart-tarih {
    color: var(--hh-metin-soluk);
    font-size: .75rem;
    line-height: 1rem;
    margin-top: auto;
}

.hh-liste-izgara-4 .hh-liste-kart-govde {
    padding: 1rem;
}

.hh-liste-izgara-4 .hh-liste-kart-govde h2 {
    font-size: 1rem;
    line-height: 1.5rem;
}

.hh-kabuk .hh-sayfalama {
    align-items: center;
    border: 0;
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin: 2.5rem 0 0;
    padding: 0;
}

.hh-kabuk .hh-sayfalama-ok {
    background: var(--hh-kirmizi);
    border: 0;
    border-radius: 9999px;
    box-shadow: none;
    color: #fff;
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.25rem;
    padding: .5rem 1.5rem;
    transition: background-color .15s;
}

.hh-kabuk a.hh-sayfalama-ok:hover {
    background: var(--hh-kirmizi-koyu);
    color: #fff;
}

.hh-kabuk .hh-sayfalama-ok.hh-pasif {
    background: var(--hh-zemin);
    box-shadow: none;
    color: var(--hh-metin-silik);
    cursor: not-allowed;
}

.hh-sayfalama-bilgi {
    color: var(--hh-metin-soluk);
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.hh-arama-kutusu {
    display: flex;
    gap: .5rem;
    margin-bottom: 1.5rem;
    max-width: 40rem;
}

.hh-arama-kutusu input {
    border: 1px solid #c5ccd6;
    border-radius: 8px;
    font: inherit;
    font-size: .875rem;
    min-width: 0;
    padding: .625rem .75rem;
    width: 100%;
}

.hh-arama-kutusu input:focus {
    border-color: #ef4444;
    box-shadow: 0 0 0 1px #ef4444;
    outline: 0;
}

.hh-arama-kutusu button {
    background: var(--hh-kirmizi);
    border-radius: 8px;
    color: #fff;
    flex-shrink: 0;
    font-size: .875rem;
    font-weight: 700;
    padding: .5rem 1.5rem;
}

.hh-arama-kutusu button:hover {
    background: var(--hh-kirmizi-koyu);
}

.hh-arama-sonuc-bilgi {
    color: var(--hh-metin-soluk);
    font-size: .875rem;
    margin: 0 0 1.5rem;
}

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

@media (max-width: 767px) {
    .hh-liste-sayfa {
        padding-top: 1.5rem;
    }

    .hh-sayfa-baslik {
        font-size: 1.75rem;
        line-height: 2rem;
        margin-bottom: 1.25rem;
    }

    .hh-liste-izgara,
    .hh-liste-izgara-4 {
        grid-template-columns: minmax(0, 1fr);
    }
}

.hh-yazar-profil {
    background: linear-gradient(120deg, #111a26 0%, #1b2634 62%, #3b0f1c 100%);
    color: #fff;
}

.hh-kose-liste-sayfa {
    margin: 1.25rem 0 2rem;
}

.hh-kose-liste-ust .hh-yazar-serit-baslik {
    font-size: 1.5rem;
}

.hh-kose-liste-ust .hh-yazar-serit-baslik span {
    font-size: 2.125rem;
    height: 2.125rem;
    width: 2.125rem;
}

.hh-kose-liste-bilgi {
    color: var(--hh-metin-soluk);
    font-size: .8125rem;
    font-weight: 700;
    margin: 0;
}

.hh-kose-liste {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 1rem;
}

.hh-kose-kart-buyuk {
    gap: 1rem;
    padding: 1rem;
}

.hh-kose-kart-buyuk .hh-kose-kart-foto {
    height: 96px;
    width: 96px;
}

.hh-kose-kart-buyuk .hh-kose-kart-ad {
    font-size: .9375rem;
}

.hh-kose-kart-buyuk .hh-kose-kart-baslik {
    font-size: 1rem;
}

.hh-kose-kart-foto .hh-yazar-avatar-yertutucu {
    align-items: center;
    color: var(--hh-metin-soluk);
    display: flex;
    font-size: 2rem;
    font-weight: 900;
    height: 100%;
    justify-content: center;
}

.hh-kose-kart-unvan {
    color: var(--hh-metin-silik);
    font-size: .6875rem;
    font-weight: 700;
    margin-top: .0625rem;
}

.hh-kose-kart-bos {
    color: var(--hh-metin-silik);
    font-size: .8125rem;
    margin: .375rem 0 0;
}

.hh-kose-kart-tumu {
    align-self: flex-start;
    color: var(--hh-metin-soluk);
    font-size: .75rem;
    font-weight: 800;
    margin-top: .5rem;
    transition: color .15s;
}

.hh-kose-kart-buyuk .hh-kose-kart-tumu {
    margin-top: auto;
    padding-top: .5rem;
}

.hh-kose-kart-tumu:hover {
    color: var(--hh-kirmizi);
}

.hh-yazar-profil {
    margin: 1rem 0 2rem;
    padding: 2.5rem 1rem;
}

.hh-detay-kart > .hh-yazar-profil {
    margin: 0;
    padding: 2.5rem;
}

.hh-yazar-profil-ic {
    align-items: flex-start;
    display: flex;
    gap: 1.5rem;
}

.hh-yazar-profil-foto {
    background: #fff;
    border: 4px solid #fff;
    border-radius: 9999px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .35);
    display: block;
    flex-shrink: 0;
    height: 9rem;
    overflow: hidden;
    width: 9rem;
}

.hh-detay-kart .hh-yazar-profil-foto {
    height: 7rem;
    width: 7rem;
}

.hh-yazar-profil-bilgi {
    flex: 1 1 0%;
    min-width: 0;
}

.hh-yazar-profil-rozet {
    background: #fff;
    border-radius: 9999px;
    color: var(--hh-kirmizi);
    display: inline-block;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .1em;
    margin-bottom: .5rem;
    padding: .25rem .75rem;
    text-transform: uppercase;
}

.hh-yazar-profil-ad {
    color: #fff;
    display: block;
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1.25;
    margin: 0 0 .75rem;
}

.hh-detay-kart .hh-yazar-profil-ad {
    font-size: 1.875rem;
    margin-bottom: .5rem;
}

a.hh-yazar-profil-ad:hover {
    color: #fecaca;
}

.hh-yazar-profil-baglantilar {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1rem;
}

.hh-yazar-profil-baglantilar a {
    color: var(--hh-metin-silik);
    font-size: .75rem;
    transition: color .15s;
}

.hh-yazar-profil-baglantilar a:hover {
    color: #dc2626;
}

.hh-yazar-profil .hh-yazar-detay-sosyal {
    display: flex;
    gap: .5rem;
    margin-top: .75rem;
}

.hh-yazar-profil .hh-yazar-detay-sosyal-baglanti {
    align-items: center;
    background: rgba(255, 255, 255, .1);
    border-radius: 9999px;
    color: #fff;
    display: inline-flex;
    font-size: .75rem;
    font-weight: 700;
    height: 2rem;
    justify-content: center;
    width: 2rem;
}

.hh-yazar-profil .hh-yazar-detay-sosyal-baglanti:hover {
    background: #dc2626;
    color: var(--hh-metin-koyu);
}

.hh-yazar-biyografi {
    color: #475365;
    font-size: .9375rem;
    line-height: 1.7;
    margin: 0 0 2rem;
}

.hh-yazar-bolum-baslik {
    align-items: center;
    display: flex;
    gap: .5rem;
    margin-bottom: 1.5rem;
}

.hh-yazar-bolum-baslik span {
    background: #dc2626;
    border-radius: 9999px;
    height: 1.25rem;
    width: .375rem;
}

.hh-yazar-bolum-baslik h2 {
    color: var(--hh-metin);
    font-size: 1.25rem;
    font-weight: 900;
    line-height: 1.75rem;
    margin: 0;
    text-transform: uppercase;
}

.hh-yazar-one-cikan {
    background: #f5f7fa;
    border: 1px solid var(--hh-cizgi);
    border-left: 6px solid var(--hh-kirmizi);
    border-radius: 16px;
    box-shadow: none;
    display: block;
    margin-bottom: 2rem;
    padding: 2rem 2rem 2rem 2.5rem;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.hh-yazar-one-cikan:hover {
    border-color: rgba(220, 38, 38, .5);
    box-shadow: 0 20px 40px rgba(220, 38, 38, .14);
    transform: translateY(-3px);
}

.hh-yazar-one-cikan-tarih {
    color: var(--hh-metin-soluk);
    display: block;
    font-size: .75rem;
    margin-bottom: .75rem;
}

.hh-yazar-one-cikan h3 {
    color: var(--hh-metin-koyu);
    font-size: 1.875rem;
    font-weight: 900;
    line-height: 1.25;
    margin: 0 0 1rem;
    transition: color .15s;
}

.hh-yazar-one-cikan:hover h3 {
    color: #b91c1c;
}

.hh-yazar-one-cikan-devam {
    color: #b91c1c;
    font-size: .875rem;
    font-weight: 700;
}

.hh-yazar-yazi-liste {
    background: var(--hh-yuzey);
    border: 1px solid var(--hh-cizgi-acik);
    border-radius: 16px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
    overflow: hidden;
}

.hh-yazar-yazi-liste-ust {
    background: #f5f7fa;
    border-bottom: 1px solid var(--hh-cizgi-acik);
    padding: .75rem 1.25rem;
}

.hh-yazar-yazi-liste-ust h3 {
    color: var(--hh-metin-soluk);
    font-size: .75rem;
    font-weight: 900;
    letter-spacing: .1em;
    margin: 0;
    text-transform: uppercase;
}

.hh-yazar-yazi-satir {
    align-items: flex-start;
    border-top: 1px solid #f5f7fa;
    display: flex;
    gap: .75rem;
    padding: .75rem 1.25rem;
    transition: background .2s ease, transform .15s ease;
}

.hh-yazar-yazi-satir:hover {
    background: #fef2f2;
    transform: translateX(4px);
}

.hh-yazar-yazi-satir-tarih {
    border-right: 1px solid var(--hh-cizgi-acik);
    flex-shrink: 0;
    min-width: 80px;
    padding-right: .75rem;
    text-align: center;
}

.hh-yazar-yazi-satir-tarih strong {
    color: #dc2626;
    display: block;
    font-size: 11px;
    font-weight: 900;
}

.hh-yazar-yazi-satir-tarih span {
    color: var(--hh-metin-silik);
    display: block;
    font-size: 9px;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.hh-yazar-yazi-satir h4 {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--hh-metin);
    display: -webkit-box;
    flex: 1 1 0%;
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.375;
    margin: 0;
    min-width: 0;
    overflow: hidden;
    transition: color .15s;
}

.hh-yazar-yazi-satir:hover h4 {
    color: #b91c1c;
}

.hh-yazar-yazi-satir-ok {
    color: #c5ccd6;
    flex-shrink: 0;
}

.hh-yazar-son {
    background: var(--hh-yuzey);
    border: 1px solid var(--hh-cizgi-acik);
    border-radius: 16px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
    margin-bottom: 1.5rem;
    overflow: hidden;
    padding: 0;
}

.hh-yazar-son-ust {
    align-items: center;
    background: var(--hh-metin-koyu);
    display: flex;
    gap: .5rem;
    padding: .75rem 1rem;
}

.hh-yazar-son-ust span {
    background: #dc2626;
    border-radius: 9999px;
    height: 1rem;
    width: .25rem;
}

.hh-yazar-son-ust h3 {
    color: #fff;
    font-size: .75rem;
    font-weight: 900;
    letter-spacing: .1em;
    margin: 0;
    text-transform: uppercase;
}

.hh-yazar-son-satir {
    align-items: flex-start;
    border-top: 1px solid #f5f7fa;
    display: flex;
    gap: .75rem;
    padding: .75rem;
    transition: background-color .15s;
}

.hh-yazar-son-satir:hover {
    background: #fef2f2;
}

.hh-yazar-son-satir span {
    color: var(--hh-cizgi);
    font-size: 1.5rem;
    font-weight: 900;
    line-height: 1;
    transition: color .15s;
}

.hh-yazar-son-satir:hover span {
    color: #fecaca;
}

.hh-yazar-son-satir h4 {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--hh-metin);
    display: -webkit-box;
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.375;
    margin: 0;
    overflow: hidden;
}

.hh-yazar-son-satir:hover h4 {
    color: #b91c1c;
}

.hh-yazar-diger-izgara {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.hh-yazar-diger-izgara .hh-yazar-kart {
    flex: none;
    padding: 0;
}

@media (max-width: 1023px) {
    .hh-kose-liste {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .hh-kose-liste {
        gap: .75rem;
        grid-template-columns: minmax(0, 1fr);
    }

    .hh-kose-liste-ust .hh-yazar-serit-baslik {
        font-size: 1.25rem;
    }

    .hh-kose-kart-buyuk .hh-kose-kart-foto {
        height: 84px;
        width: 84px;
    }

    .hh-yazar-profil-ic {
        align-items: center;
        flex-direction: column;
        text-align: center;
    }

    .hh-yazar-profil-baglantilar {
        justify-content: center;
    }

    .hh-yazar-profil-foto {
        height: 7rem;
        width: 7rem;
    }

    .hh-yazar-profil-ad,
    .hh-detay-kart .hh-yazar-profil-ad {
        font-size: 1.5rem;
    }

    .hh-detay-kart > .hh-yazar-profil {
        padding: 2rem 1rem;
    }

    .hh-yazar-one-cikan {
        padding: 1.5rem 1.5rem 1.5rem 1.75rem;
    }

    .hh-yazar-one-cikan h3 {
        font-size: 1.5rem;
    }

    .hh-yazar-diger-izgara {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.hh-mini-kirinti {
    color: var(--hh-metin-soluk);
    display: flex;
    flex-wrap: wrap;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    margin-bottom: .5rem;
    text-transform: uppercase;
}

.hh-mini-kirinti a {
    color: inherit;
}

.hh-mini-kirinti a:hover {
    color: var(--hh-kirmizi);
}

.hh-mini-kirinti > span:not(.hh-mini-kirinti-son) {
    margin: 0 .5rem;
}

.hh-mini-kirinti-son {
    color: var(--hh-metin-koyu);
}

.hh-galeri-detay-ust h1,
.hh-video-baslik {
    color: var(--hh-metin-koyu);
    font-size: 2.25rem;
    font-weight: 900;
    letter-spacing: -.05em;
    line-height: 1.25;
    margin: 0;
}

.hh-video-oynat {
    background: var(--hh-kirmizi);
    border-radius: 9999px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
    height: 3rem;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: transform .3s;
    width: 3rem;
}

.hh-video-oynat::after {
    border-color: transparent transparent transparent #fff;
    border-style: solid;
    border-width: 8px 0 8px 13px;
    content: "";
    left: 54%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

.hh-galeri-detay-sarmal {
    padding-top: 1.5rem;
}

.hh-galeri-detay {
    margin-left: auto;
    margin-right: auto;
    max-width: 64rem;
}

.hh-galeri-detay-ust {
    border-bottom: 1px solid var(--hh-cizgi-acik);
    padding: 2.5rem;
}

.hh-galeri-detay-bilgi {
    align-items: center;
    color: var(--hh-metin-soluk);
    display: flex;
    flex-wrap: wrap;
    font-size: .75rem;
    font-weight: 700;
    gap: 1rem;
    margin-top: 1rem;
    text-transform: uppercase;
}

.hh-galeri-detay-ozet {
    color: #334052;
    font-size: 1.0625rem;
    line-height: 1.7;
    margin: 0;
    padding: 1.5rem 2.5rem 0;
}

.hh-kabuk .hh-galeri-liste {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.5rem 2.5rem 2.5rem;
}

.hh-kabuk .hh-galeri-oge {
    margin: 0;
    scroll-margin-top: 5.5rem;
}

.hh-kabuk .hh-galeri-oge-gorsel {
    background: var(--hh-metin-koyu);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}

.hh-kabuk .hh-galeri-oge-gorsel img {
    display: block;
    height: auto;
    margin: 0 auto;
    max-width: 100%;
    width: 100%;
}

.hh-kabuk .hh-galeri-oge-sayac {
    background: var(--hh-kirmizi);
    border-radius: 8px;
    color: rgba(255, 255, 255, .8);
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    padding: .25rem .625rem;
    position: absolute;
    right: .75rem;
    top: .75rem;
}

.hh-kabuk .hh-galeri-oge-sayac-guncel {
    color: #fff;
    font-size: .9375rem;
    font-weight: 900;
}

.hh-galeri-detay-adet {
    background: var(--hh-lacivert);
    border-radius: 6px;
    color: #fff;
    padding: .1875rem .5rem;
}

.hh-kabuk .hh-galeri-oge-baslik {
    color: var(--hh-metin-koyu);
    font-size: 1.25rem;
    font-weight: 900;
    line-height: 1.3;
    margin: 1rem 0 0;
}

.hh-kabuk .hh-galeri-oge-metin {
    margin-top: 1rem;
}

.hh-kabuk .hh-galeri-oge-metin > :first-child {
    margin-top: 0;
}

.hh-kabuk .hh-galeri-oge-metin > :last-child {
    margin-bottom: 0;
}

.hh-kabuk .hh-haber-kareler {
    gap: 2rem;
    margin-top: 1.75rem;
    padding: 0;
}

.hh-kabuk .hh-galeri-oge-aciklama {
    color: #334052;
    font-size: 1rem;
    line-height: 1.7;
    margin: .75rem 0 0;
}

.hh-kategori-sayfa .hh-medya-ust {
    margin-top: .25rem;
}

.hh-kategori-vitrin {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
    margin-bottom: 1.5rem;
}

.hh-kategori-vitrin-ana {
    background: var(--hh-yuzey);
    border: 1px solid var(--hh-cizgi);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s;
}

.hh-kategori-vitrin-ana:hover {
    border-color: var(--hh-kirmizi);
    box-shadow: 0 6px 16px rgba(17, 26, 38, .08);
}

.hh-kategori-vitrin-gorsel {
    aspect-ratio: 16 / 9;
    background: var(--hh-lacivert);
    display: block;
    overflow: hidden;
}

.hh-kategori-vitrin-gorsel img {
    display: block;
    height: 100%;
    object-fit: cover;
    transition: transform .5s;
    width: 100%;
}

.hh-kategori-vitrin-ana:hover img {
    transform: scale(1.03);
}

.hh-kategori-vitrin-metin {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: .5rem;
    padding: 1rem 1.25rem 1.125rem;
}

.hh-kategori-vitrin-etiket {
    align-self: flex-start;
    background: var(--hh-kirmizi);
    border-radius: 6px;
    color: #fff;
    font-size: .625rem;
    font-weight: 900;
    letter-spacing: .08em;
    padding: .1875rem .5rem;
    text-transform: uppercase;
}

.hh-kategori-vitrin-metin strong {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    color: var(--hh-metin-koyu);
    display: -webkit-box;
    font-size: 1.625rem;
    font-weight: 900;
    letter-spacing: -.01em;
    line-height: 1.2;
    overflow: hidden;
}

.hh-kategori-vitrin-ana:hover strong {
    color: var(--hh-kirmizi);
}

.hh-kategori-vitrin-ozet {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--hh-metin-soluk);
    display: -webkit-box;
    font-size: .9375rem;
    line-height: 1.45;
    overflow: hidden;
}

.hh-kategori-vitrin-zaman {
    color: var(--hh-metin-silik);
    font-size: .75rem;
    font-weight: 700;
    margin-top: auto;
}

.hh-kategori-vitrin-yan {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    min-width: 0;
}

.hh-kategori-vitrin-oge {
    align-items: center;
    background: var(--hh-yuzey);
    border: 1px solid var(--hh-cizgi);
    border-radius: 12px;
    display: flex;
    flex: 1 1 0%;
    gap: .75rem;
    min-height: 0;
    overflow: hidden;
    padding: .5rem;
    transition: border-color .2s, box-shadow .2s;
}

.hh-kategori-vitrin-oge:hover {
    border-color: var(--hh-kirmizi);
    box-shadow: 0 6px 16px rgba(17, 26, 38, .08);
}

.hh-kategori-vitrin-oge-gorsel {
    aspect-ratio: 16 / 9;
    background: var(--hh-zemin);
    border-radius: 8px;
    flex: 0 0 50%;
    overflow: hidden;
}

.hh-kategori-vitrin-oge-gorsel img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.hh-kategori-vitrin-oge-metin {
    display: flex;
    flex-direction: column;
    gap: .375rem;
    justify-content: center;
    min-width: 0;
    padding-right: .25rem;
}

.hh-kategori-vitrin-oge-metin strong {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    color: var(--hh-metin-koyu);
    display: -webkit-box;
    font-size: .9375rem;
    font-weight: 800;
    line-height: 1.3;
    overflow: hidden;
}

.hh-kategori-vitrin-oge:hover strong {
    color: var(--hh-kirmizi);
}

.hh-kategori-vitrin-oge-metin span {
    color: var(--hh-metin-silik);
    font-size: .6875rem;
    font-weight: 700;
}

@media (max-width: 1023px) {
    .hh-kategori-vitrin {
        grid-template-columns: minmax(0, 1fr);
    }

    .hh-kategori-vitrin-oge {
        flex: 0 0 auto;
    }

    .hh-kategori-vitrin-oge-gorsel {
        flex-basis: 34%;
    }
}

@media (max-width: 767px) {
    .hh-kategori-vitrin-metin {
        padding: .875rem 1rem 1rem;
    }

    .hh-kategori-vitrin-metin strong {
        font-size: 1.25rem;
    }

    .hh-kategori-vitrin-ozet {
        display: none;
    }

    .hh-kategori-vitrin-oge-gorsel {
        flex-basis: 42%;
    }
}

.hh-medya-sayfa {
    padding: 1.25rem 0 3rem;
}

.hh-medya-ust {
    align-items: center;
    border-bottom: 2px solid var(--hh-lacivert);
    display: flex;
    gap: .75rem;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-bottom: .625rem;
}

.hh-medya-baslik {
    align-items: center;
    color: var(--hh-metin-koyu);
    display: flex;
    font-size: 1.5rem;
    font-weight: 900;
    gap: .625rem;
    line-height: 1.25;
    margin: 0;
    text-transform: uppercase;
}

.hh-medya-ikon {
    align-items: center;
    background: var(--hh-kirmizi);
    border-radius: 8px;
    color: #fff;
    display: flex;
    flex-shrink: 0;
    height: 2.125rem;
    justify-content: center;
    width: 2.125rem;
}

.hh-medya-sayi {
    color: var(--hh-metin-soluk);
    font-size: .8125rem;
    font-weight: 700;
    margin: 0;
}

.hh-medya-rozet {
    align-items: center;
    background: rgba(17, 26, 38, .82);
    border-radius: 6px;
    color: #fff;
    display: inline-flex;
    font-size: .6875rem;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    gap: .3125rem;
    line-height: 1;
    padding: .3125rem .5rem;
    position: absolute;
    right: .625rem;
    top: .625rem;
}

.hh-medya-vitrin {
    display: grid;
    gap: .75rem;
    grid-auto-rows: 11.5rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 1.5rem;
}

.hh-medya-vitrin-kart {
    background: var(--hh-lacivert);
    border-radius: 12px;
    display: block;
    overflow: hidden;
    position: relative;
}

.hh-medya-vitrin-buyuk {
    grid-column: span 2;
    grid-row: span 2;
}

.hh-medya-vitrin-kart img {
    display: block;
    height: 100%;
    object-fit: cover;
    transition: transform .5s;
    width: 100%;
}

.hh-medya-vitrin-kart:hover img {
    transform: scale(1.04);
}

.hh-medya-vitrin-metin {
    background: linear-gradient(to top, rgba(17, 26, 38, .92), rgba(17, 26, 38, 0));
    bottom: 0;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    left: 0;
    padding: 2.5rem .875rem .75rem;
    position: absolute;
    right: 0;
}

.hh-medya-vitrin-metin strong {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    font-size: .9375rem;
    font-weight: 800;
    line-height: 1.25;
    overflow: hidden;
}

.hh-medya-vitrin-buyuk .hh-medya-vitrin-metin {
    padding: 4rem 1.25rem 1.125rem;
}

.hh-medya-vitrin-buyuk .hh-medya-vitrin-metin strong {
    -webkit-line-clamp: 3;
    font-size: 1.5rem;
    font-weight: 900;
    line-height: 1.2;
}

.hh-medya-vitrin-kategori {
    align-self: flex-start;
    background: var(--hh-kirmizi);
    border-radius: 6px;
    font-size: .625rem;
    font-weight: 900;
    letter-spacing: .08em;
    padding: .1875rem .5rem;
    text-transform: uppercase;
}

.hh-medya-vitrin-tarih {
    color: rgba(255, 255, 255, .75);
    font-size: .6875rem;
    font-weight: 700;
}

.hh-medya-izgara {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.hh-medya-kart {
    background: var(--hh-yuzey);
    border: 1px solid var(--hh-cizgi);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s;
}

.hh-medya-kart:hover {
    border-color: var(--hh-kirmizi);
    box-shadow: 0 6px 16px rgba(17, 26, 38, .08);
}

.hh-medya-kart-gorsel {
    aspect-ratio: 16 / 10;
    background: var(--hh-zemin);
    display: block;
    overflow: hidden;
    position: relative;
}

.hh-medya-kart-video .hh-medya-kart-gorsel {
    aspect-ratio: 16 / 9;
    background: var(--hh-lacivert);
}

.hh-medya-kart-gorsel img {
    display: block;
    height: 100%;
    object-fit: cover;
    transition: transform .4s;
    width: 100%;
}

.hh-medya-kart:hover .hh-medya-kart-gorsel img {
    transform: scale(1.04);
}

.hh-medya-kart-govde {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: .5rem;
    padding: .75rem .875rem .875rem;
}

.hh-medya-kart-govde h2 {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    color: var(--hh-metin-koyu);
    display: -webkit-box;
    font-size: .9375rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
    overflow: hidden;
}

.hh-medya-kart-govde h2 a {
    color: inherit;
}

.hh-medya-kart-govde h2 a:hover {
    color: var(--hh-kirmizi);
}

.hh-medya-kart-alt {
    color: var(--hh-metin-silik);
    font-size: .6875rem;
    font-weight: 700;
    margin-top: auto;
}

.hh-medya-oynat {
    align-items: center;
    background: var(--hh-kirmizi);
    border-radius: 9999px;
    bottom: .625rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .3);
    display: flex;
    height: 2.25rem;
    justify-content: center;
    left: .625rem;
    position: absolute;
    transition: transform .2s;
    width: 2.25rem;
}

.hh-medya-oynat::after {
    border-color: transparent transparent transparent #fff;
    border-style: solid;
    border-width: .375rem 0 .375rem .625rem;
    content: "";
    margin-left: .1875rem;
}

a:hover > .hh-medya-oynat,
a:hover .hh-video-sahne-oge-gorsel .hh-medya-oynat {
    transform: scale(1.1);
}

.hh-medya-oynat-buyuk {
    bottom: auto;
    height: 4.5rem;
    left: 50%;
    margin: -2.25rem 0 0 -2.25rem;
    top: 44%;
    width: 4.5rem;
}

.hh-medya-oynat-buyuk::after {
    border-width: .75rem 0 .75rem 1.25rem;
    margin-left: .3125rem;
}

.hh-video-sahne {
    background: var(--hh-lacivert);
    border-radius: 16px;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
    margin-bottom: 1.5rem;
    padding: 1rem;
}

.hh-video-sahne-ana {
    aspect-ratio: 16 / 9;
    background: #0c131d;
    border-radius: 12px;
    display: block;
    overflow: hidden;
    position: relative;
}

.hh-video-sahne-ana img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.hh-video-sahne-metin {
    background: linear-gradient(to top, rgba(12, 19, 29, .95), rgba(12, 19, 29, 0));
    bottom: 0;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: .375rem;
    left: 0;
    padding: 4rem 1.25rem 1.125rem;
    position: absolute;
    right: 0;
}

.hh-video-sahne-etiket {
    align-self: flex-start;
    background: var(--hh-kirmizi);
    border-radius: 6px;
    font-size: .625rem;
    font-weight: 900;
    letter-spacing: .08em;
    padding: .1875rem .5rem;
    text-transform: uppercase;
}

.hh-video-sahne-metin strong {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    font-size: 1.5rem;
    font-weight: 900;
    line-height: 1.2;
    overflow: hidden;
}

.hh-video-sahne-tarih {
    color: rgba(255, 255, 255, .7);
    font-size: .75rem;
    font-weight: 700;
}

.hh-video-sahne-liste {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    min-width: 0;
}

.hh-video-sahne-oge {
    align-items: center;
    border-radius: 10px;
    color: #fff;
    display: flex;
    flex: 1 1 0%;
    gap: .75rem;
    min-height: 0;
    padding: .375rem;
    transition: background-color .15s;
}

.hh-video-sahne-oge:hover {
    background: rgba(255, 255, 255, .08);
}

.hh-video-sahne-oge-gorsel {
    aspect-ratio: 16 / 9;
    background: #0c131d;
    border-radius: 8px;
    flex: 0 0 42%;
    overflow: hidden;
    position: relative;
}

.hh-video-sahne-oge-gorsel img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.hh-video-sahne-oge-gorsel .hh-medya-oynat {
    bottom: .375rem;
    height: 1.625rem;
    left: .375rem;
    width: 1.625rem;
}

.hh-video-sahne-oge-gorsel .hh-medya-oynat::after {
    border-width: .25rem 0 .25rem .4375rem;
    margin-left: .125rem;
}

.hh-video-sahne-oge-metin {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    min-width: 0;
}

.hh-video-sahne-oge-metin strong {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    display: -webkit-box;
    font-size: .8125rem;
    font-weight: 700;
    line-height: 1.3;
    overflow: hidden;
}

.hh-video-sahne-oge-metin span {
    color: #94a0b0;
    font-size: .6875rem;
    font-weight: 700;
}

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

    .hh-medya-vitrin {
        grid-auto-rows: 10rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hh-video-sahne {
        grid-template-columns: minmax(0, 1fr);
    }

    .hh-video-sahne-liste {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .hh-medya-sayfa {
        padding-top: 1rem;
    }

    .hh-medya-baslik {
        font-size: 1.25rem;
    }

    .hh-medya-izgara {
        gap: .75rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hh-medya-vitrin {
        gap: .5rem;
        grid-auto-rows: 8rem;
    }

    .hh-medya-vitrin-buyuk .hh-medya-vitrin-metin strong,
    .hh-video-sahne-metin strong {
        font-size: 1.125rem;
    }

    .hh-medya-kart-govde h2 {
        font-size: .875rem;
    }

    .hh-video-sahne {
        border-radius: 12px;
        padding: .625rem;
    }

    .hh-video-sahne-liste {
        grid-template-columns: minmax(0, 1fr);
    }

    .hh-medya-oynat-buyuk {
        height: 3.25rem;
        margin: -1.625rem 0 0 -1.625rem;
        width: 3.25rem;
    }
}

.hh-video-sayfa {
    padding: 1.5rem 0 3rem;
}

.hh-video-sayfa > .hh-mini-kirinti {
    margin-bottom: .875rem;
}

.hh-video-perde {
    background: var(--hh-lacivert);
    border-radius: 16px;
    padding: .75rem;
}

.hh-video-ust {
    margin-top: 1.25rem;
}

.hh-video-ust .hh-video-baslik {
    font-size: 1.875rem;
    letter-spacing: -.015em;
    line-height: 1.2;
}

.hh-video-bilgi {
    align-items: center;
    border-bottom: 1px solid var(--hh-cizgi-acik);
    border-top: 1px solid var(--hh-cizgi-acik);
    color: var(--hh-metin-soluk);
    display: flex;
    flex-wrap: wrap;
    font-size: .8125rem;
    font-weight: 600;
    gap: .5rem 1rem;
    margin-top: .875rem;
    padding: .625rem 0;
}

.hh-video-izgara {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hh-video-ana {
    grid-column: span 2;
    min-width: 0;
}

.hh-video-oynatici {
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.hh-video-oynatici iframe {
    border: 0;
    height: 100%;
    inset: 0;
    position: absolute;
    width: 100%;
}

.hh-video-aciklama {
    border-left: 4px solid var(--hh-kirmizi);
    margin-top: 1.125rem;
    padding: .125rem 0 .125rem 1rem;
}

.hh-video-aciklama p {
    color: var(--hh-menu-metin);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.55;
    margin: 0;
}

.hh-video-kaynak {
    background: var(--hh-lacivert);
    border-radius: 6px;
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    padding: .1875rem .5rem;
}

.hh-video-ana > .hh-detay-paylas {
    border-bottom: 0;
    border-top: 1px solid var(--hh-cizgi-acik);
    margin-top: 1.25rem;
    padding: .875rem 0 0;
}

.hh-video-yan h2 {
    border-bottom: 2px solid var(--hh-lacivert);
    color: var(--hh-metin-koyu);
    font-size: 1rem;
    font-weight: 900;
    margin: 0 0 1rem;
    padding-bottom: .5rem;
    text-transform: uppercase;
}

.hh-video-diger-liste {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.hh-video-diger {
    background: var(--hh-yuzey);
    border: 1px solid var(--hh-cizgi-acik);
    border-radius: 12px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
    display: flex;
    gap: .75rem;
    overflow: hidden;
    transition: box-shadow .3s;
}

.hh-video-diger:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
}

.hh-video-diger-gorsel {
    aspect-ratio: 16 / 9;
    background: var(--hh-cizgi);
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
    width: 7rem;
}

.hh-video-diger-gorsel img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.hh-video-diger-gorsel .hh-video-oynat {
    height: 1.75rem;
    width: 1.75rem;
}

.hh-video-diger-gorsel .hh-video-oynat::after {
    border-width: 5px 0 5px 8px;
}

.hh-video-diger-metin {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: .5rem .75rem .5rem 0;
}

.hh-video-diger-baslik {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--hh-metin-koyu);
    display: -webkit-box;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.375;
    overflow: hidden;
}

.hh-video-diger:hover .hh-video-diger-baslik {
    color: var(--hh-kirmizi);
}

.hh-video-diger-tarih {
    color: var(--hh-metin-silik);
    font-size: 10px;
    font-weight: 700;
    margin-top: .25rem;
}

.hh-detay-paylas-dugme.hh-kopyalandi,
.hh-detay-paylas-dugme.hh-kopyalandi:hover {
    background: #dcfce7;
    border: 1px solid #86efac;
    color: #15803d;
}

.hh-detay-paylas-dugme.hh-kopyalandi svg,
.hh-detay-paylas-dugme.hh-kopyalandi:hover svg {
    color: #15803d;
}

@media (max-width: 1023px) {

    .hh-video-izgara {
        grid-template-columns: minmax(0, 1fr);
    }

    .hh-video-ana {
        grid-column: auto;
    }
}

@media (max-width: 767px) {

    .hh-galeri-detay-ust h1,
    .hh-video-baslik {
        font-size: 1.5rem;
    }

    .hh-galeri-detay-ust {
        padding: 1rem;
    }

    .hh-galeri-detay-ozet {
        padding: 1rem 1rem 0;
    }

    .hh-kabuk .hh-galeri-liste {
        padding: 1rem;
    }
}

.hh-yorum-yorumlar {
    border-top: 1px solid var(--hh-cizgi-acik);
    margin-top: 3rem;
    padding-top: 2rem;
}

.hh-yorum-yorumlar-baslik {
    color: var(--hh-metin-koyu);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.75rem;
    margin-bottom: 1.25rem;
}

.hh-yorum-yorumlar-baslik span {
    color: var(--hh-metin-soluk);
    font-weight: 500;
}

.hh-haber-yorum-bildirim {
    border-radius: 8px;
    font-size: .875rem;
    margin-bottom: 1rem;
    padding: .625rem .875rem;
}

.hh-haber-yorum-bildirim-basari {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
}

.hh-haber-yorum-bildirim-hata {
    background: var(--hh-kirmizi-acik);
    border: 1px solid #fecaca;
    color: #991b1b;
}

.hh-haber-yorum-uyari {
    background: #f5f7fa;
    border: 1px solid var(--hh-cizgi-acik);
    border-radius: 8px;
    color: var(--hh-metin-soluk);
    font-size: .875rem;
    padding: .75rem 1rem;
}

.hh-yorum-yorum-form {
    background: var(--hh-yuzey);
    border: 1px solid var(--hh-cizgi-acik);
    border-radius: 12px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
    margin-bottom: 1.5rem;
    padding: 1.5rem;
}

.hh-haber-yorum-tuzak,
.hh-iletisim-tuzak {
    height: 0;
    left: -9999px;
    overflow: hidden;
    position: absolute;
    width: 0;
}

.hh-haber-yorum-alanlari {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 1rem;
}

.hh-yorum-yorum-form label {
    color: #334052;
    display: block;
    font-size: .875rem;
    font-weight: 500;
}

.hh-haber-yorum-metin-etiket {
    margin-bottom: .25rem;
}

.hh-yorum-yorum-form input[type="text"],
.hh-yorum-yorum-form input[type="email"],
.hh-yorum-yorum-form textarea {
    background: var(--hh-yuzey);
    border: 1px solid #c5ccd6;
    border-radius: 8px;
    display: block;
    font-size: .875rem;
    margin-top: .25rem;
    padding: .5rem .75rem;
    width: 100%;
}

.hh-yorum-yorum-form textarea {
    min-height: 6.5rem;
    resize: vertical;
}

.hh-yorum-yorum-form input:focus,
.hh-yorum-yorum-form textarea:focus {
    border-color: #fca5a5;
    box-shadow: 0 0 0 2px #fca5a5;
    outline: 0;
}

.hh-yorum-yorum-form-alt {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: space-between;
    margin-top: 1rem;
}

.hh-yorum-yorum-form-ipucu {
    color: var(--hh-metin-silik);
    font-size: .75rem;
}

.hh-yorum-yorum-gonder {
    background: var(--hh-kirmizi);
    border-radius: 8px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
    color: #fff;
    font-size: .875rem;
    font-weight: 600;
    padding: .625rem 1.5rem;
    transition: background-color .15s;
}

.hh-yorum-yorum-gonder:hover {
    background: var(--hh-kirmizi-koyu);
}

.hh-yorum-yorum-liste {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.hh-yorum-yorum {
    display: flex;
    gap: .75rem;
}

.hh-yorum-yorum-avatar {
    align-items: center;
    background: var(--hh-kirmizi-acik);
    border-radius: 9999px;
    color: var(--hh-kirmizi);
    display: flex;
    flex-shrink: 0;
    font-size: .875rem;
    font-weight: 800;
    height: 2.5rem;
    justify-content: center;
    width: 2.5rem;
}

.hh-yorum-yorum-icerik {
    background: #f5f7fa;
    border: 1px solid var(--hh-cizgi-acik);
    border-radius: 12px;
    flex: 1 1 0%;
    min-width: 0;
    padding: .75rem 1rem;
}

.hh-yorum-yorum-ust {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .25rem;
}

.hh-yorum-yorum-ust strong {
    color: var(--hh-metin-koyu);
    font-size: .875rem;
    font-weight: 700;
}

.hh-yorum-yorum-ust time {
    color: var(--hh-metin-silik);
    font-size: .75rem;
}

.hh-yorum-yorum-icerik > p {
    color: #334052;
    font-size: .9375rem;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.hh-yorum-oylama {
    display: flex;
    gap: .5rem;
    margin-top: .5rem;
}

.hh-yorum-oy-dugme {
    align-items: center;
    border: 1px solid var(--hh-cizgi);
    border-radius: 9999px;
    color: var(--hh-metin-soluk);
    display: inline-flex;
    font-size: .75rem;
    font-weight: 600;
    gap: .25rem;
    padding: .25rem .625rem;
    transition: color .15s, border-color .15s;
}

.hh-yorum-oy-dugme:hover,
.hh-yorum-oy-dugme.hh-aktif {
    border-color: var(--hh-kirmizi);
    color: var(--hh-kirmizi);
}

.hh-haber-yanit-detay {
    margin-top: .5rem;
}

.hh-haber-yanit-detay > summary {
    color: var(--hh-kirmizi);
    cursor: pointer;
    font-size: .75rem;
    font-weight: 700;
    list-style: none;
}

.hh-haber-yanit-detay > summary::-webkit-details-marker {
    display: none;
}

.hh-haber-yanit-detay .hh-yorum-yorum-form {
    margin: .75rem 0 0;
    padding: 1rem;
}

.hh-yorum-yanitlar {
    border-left: 2px solid var(--hh-cizgi);
    margin: .75rem 0 0 1.25rem;
    padding-left: 1rem;
}

.hh-yorum-yanitlar-liste {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.hh-haber-detay-okuma-suresi {
    color: var(--hh-metin-silik);
    font-size: .75rem;
}

.hh-yan-menu-ortusu {
    backdrop-filter: blur(4px);
    background: rgba(17, 26, 38, .72);
    inset: 0;
    opacity: 0;
    position: fixed;
    transition: opacity .2s, visibility .2s;
    visibility: hidden;
    z-index: 300;
}

.hh-yan-menu-ortusu.hh-aktif {
    opacity: 1;
    visibility: visible;
}

.hh-yan-menu {
    background: var(--hh-yuzey);
    border-right: 1px solid var(--hh-cizgi);
    bottom: 0;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
    color: var(--hh-metin-koyu);
    display: flex;
    flex-direction: column;
    left: 0;
    max-width: 20rem;
    padding: 1.25rem;
    position: fixed;
    top: 0;
    transform: translateX(-100%);
    transition: transform .2s ease-out;
    width: calc(100vw - 3rem);
    z-index: 310;
}

.hh-yan-menu.hh-aktif {
    transform: translateX(0);
}

.hh-yan-menu-ust {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.hh-yan-menu-logo img {
    display: block;
    height: 40px;
    width: auto;
}

.hh-yan-menu-ust button {
    border-radius: 8px;
    color: #475365;
    font-size: 1.75rem;
    height: 2.25rem;
    line-height: 1;
    width: 2.25rem;
}

.hh-yan-menu-ust button:hover {
    background: var(--hh-zemin);
    color: var(--hh-kirmizi);
}

.hh-yan-menu-nav {
    flex: 1 1 0%;
    min-height: 0;
    overflow-y: auto;
    padding-bottom: 1rem;
    -webkit-overflow-scrolling: touch;
}

.hh-yan-menu-nav li {
    border-bottom: 1px solid var(--hh-cizgi-acik);
}

.hh-yan-menu-nav li:last-child {
    border-bottom: 0;
}

.hh-yan-menu-nav a {
    border-radius: 8px;
    color: var(--hh-metin);
    display: block;
    font-size: .875rem;
    font-weight: 700;
    padding: .625rem 1rem;
    transition: color .15s, background-color .15s;
}

.hh-yan-menu-nav a:hover {
    background: #f5f7fa;
    color: var(--hh-kirmizi);
}

.hh-yan-menu-nav li:first-child a {
    background: var(--hh-zemin);
    margin-bottom: .5rem;
}

.hh-cerez-uyarisi {
    align-items: center;
    background: var(--hh-metin-koyu);
    bottom: 0;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, .15);
    color: #edf0f4;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1.5rem;
    justify-content: center;
    left: 0;
    padding: .875rem 1rem;
    position: fixed;
    right: 0;
    z-index: 280;
}

.hh-cerez-metin {
    font-size: .8125rem;
    line-height: 1.5;
    max-width: 44rem;
    text-align: center;
}

.hh-cerez-islemler {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    gap: 1rem;
}

.hh-cerez-baglanti {
    color: #c5ccd6;
    font-size: .8125rem;
    text-decoration: underline;
}

.hh-cerez-baglanti:hover {
    color: #fff;
}

.hh-cerez-onay {
    background: var(--hh-kirmizi);
    border-radius: 8px;
    color: #fff;
    font-size: .8125rem;
    font-weight: 700;
    padding: .5rem 1.5rem;
}

.hh-cerez-onay:hover {
    background: var(--hh-kirmizi-koyu);
}

.hh-reklam-sarmal {
    margin: 1rem 0;
    overflow: hidden;
    text-align: center;
}

.hh-reklam-icerik {
    margin: 1.5rem 0;
    overflow: hidden;
    text-align: center;
}

.hh-reklam-sarmal img,
.hh-reklam-icerik img {
    display: inline-block;
    height: auto;
    max-width: 100%;
}

.hh-reklam-alani {
    display: block;
    margin: 0 auto;
    max-width: 100%;
}

.hh-reklam-gorsel {
    display: inline-block;
    height: auto;
    max-width: 100%;
}

.hh-turnstile {
    margin: 1rem 0;
    min-height: 0;
}

.hh-spor-gorsel-yertutucu {
    background: var(--hh-zemin);
    display: block;
    height: 100%;
    width: 100%;
}

.hh-bilgi-kutusu {
    background: var(--hh-yuzey);
    border: 1px solid var(--hh-cizgi);
    border-left: 4px solid var(--hh-kirmizi);
    border-radius: 12px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
    color: #475365;
    max-width: 40rem;
    padding: 1.25rem 1.5rem;
}

.hh-bilgi-kutusu h1,
.hh-bilgi-kutusu h2 {
    color: var(--hh-metin-koyu);
    font-size: 1.125rem;
    font-weight: 800;
    margin-bottom: .375rem;
}

.hh-bilgi-kutusu p {
    font-size: .9375rem;
    margin-bottom: .75rem;
}

.hh-bilgi-kutusu a {
    color: var(--hh-kirmizi);
    display: inline-block;
    font-size: .875rem;
    font-weight: 700;
    margin-right: 1rem;
}

.hh-bilgi-kutusu a:hover {
    text-decoration: underline;
}

.hh-sayfa-yerlesim {
    align-items: start;
    display: grid;
    gap: 2rem;
    grid-template-columns: minmax(0, 1fr) 16rem;
    padding: 2.5rem 0 2rem;
}

.hh-kapsayici > .hh-sayfa-icerik {
    padding: 2.5rem 0 2rem;
}

.hh-sayfa-icerik {
    color: #334052;
    font-size: 1rem;
    line-height: 1.7;
    min-width: 0;
}

.hh-sayfa-icerik .hh-sayfa-baslik {
    margin-bottom: 1.5rem;
}

.hh-sayfa-icerik p {
    margin-bottom: 1rem;
}

.hh-sayfa-icerik strong {
    color: var(--hh-metin-koyu);
    font-weight: 700;
}

.hh-sayfa-icerik a {
    color: var(--hh-kirmizi);
    font-weight: 600;
}

.hh-sayfa-icerik a:hover {
    color: var(--hh-kirmizi-koyu);
    text-decoration: underline;
}

.hh-sayfa-icerik ul,
.hh-sayfa-icerik ol {
    margin: 0 0 1rem;
    padding-left: 1.5rem;
}

.hh-sayfa-icerik ul {
    list-style: disc;
}

.hh-sayfa-icerik ol {
    list-style: decimal;
}

.hh-sayfa-icerik li {
    margin-bottom: .375rem;
}

.hh-sayfa-alt-baslik,
.hh-sayfa-icerik h2,
.hh-sayfa-icerik h3 {
    color: var(--hh-metin-koyu);
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.75rem;
    margin: 2rem 0 .75rem;
}

.hh-sayfa-icerik h3 {
    font-size: 1.0625rem;
}

.hh-sayfa-yan-panel {
    background: var(--hh-yuzey);
    border: 1px solid var(--hh-cizgi);
    border-radius: 12px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
    overflow: hidden;
    position: sticky;
    top: 1rem;
}

.hh-sayfa-yan-panel-baslik {
    background: #f5f7fa;
    border-bottom: 1px solid var(--hh-cizgi);
    color: var(--hh-metin);
    font-size: .75rem;
    font-weight: 900;
    letter-spacing: .1em;
    padding: .75rem 1rem;
    text-transform: uppercase;
}

.hh-sayfa-yan-panel-menu li {
    border-top: 1px solid var(--hh-cizgi-acik);
}

.hh-sayfa-yan-panel-menu li:first-child {
    border-top: 0;
}

.hh-sayfa-yan-panel-menu a {
    color: #475365;
    display: block;
    font-size: .875rem;
    font-weight: 600;
    padding: .625rem 1rem;
    transition: color .15s, background-color .15s;
}

.hh-sayfa-yan-panel-menu a:hover,
.hh-sayfa-yan-panel-menu .hh-aktif a,
.hh-sayfa-yan-panel-menu a.hh-aktif {
    background: var(--hh-kirmizi-acik);
    color: var(--hh-kirmizi);
}

.hh-sayfa-marka {
    align-items: center;
    background: #f5f7fa;
    border: 1px solid var(--hh-cizgi-acik);
    border-radius: 12px;
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1rem 1.25rem;
}

.hh-sayfa-marka-logo {
    flex-shrink: 0;
    height: auto;
    width: 6.5rem;
}

.hh-sayfa-marka-ad {
    color: var(--hh-metin-koyu);
    font-weight: 800;
}

.hh-sayfa-marka-detay {
    color: var(--hh-metin-soluk);
    font-size: .875rem;
}

.hh-sayfa-tablo {
    border: 1px solid var(--hh-cizgi);
    border-radius: 12px;
    border-spacing: 0;
    font-size: .9375rem;
    margin-bottom: 1rem;
    width: 100%;
}

.hh-sayfa-tablo td {
    border-top: 1px solid var(--hh-cizgi-acik);
    padding: .625rem 1rem;
    vertical-align: top;
}

.hh-sayfa-tablo tr:first-child td {
    border-top: 0;
}

.hh-sayfa-tablo td:first-child {
    color: var(--hh-metin-soluk);
    font-weight: 600;
    white-space: nowrap;
    width: 9rem;
}

.hh-sayfa-sosyal {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 1rem;
}

.hh-sayfa-sosyal a {
    align-items: center;
    background: var(--hh-metin-koyu);
    border-radius: 4px;
    display: inline-flex;
    height: 2rem;
    justify-content: center;
    transition: opacity .15s;
    width: 2rem;
}

.hh-sayfa-sosyal a:hover {
    opacity: .8;
}

.hh-ikon {
    background: #fff;
    display: inline-block;
    height: 1rem;
    -webkit-mask: var(--hh-ikon) center / contain no-repeat;
    mask: var(--hh-ikon) center / contain no-repeat;
    width: 1rem;
}

.hh-sosyal-x {
    --hh-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.2 2.3h3.3l-7.2 8.2 8.5 11.200h-6.600l-5.200-6.800-6 6.800H1.700l7.700-8.800L1.300 2.300H8l4.700 6.200zm-1.200 17.500h1.800L7.100 4.100h-2z'/%3E%3C/svg%3E");
}

.hh-sosyal-facebook {
    --hh-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.5 21v-7.500H16l.400-3h-2.900V8.600c0-.900.300-1.500 1.500-1.500h1.500V4.400c-.700-.100-1.500-.100-2.200-.100-2.200 0-3.700 1.300-3.700 3.800v2.400H7.500v3H10V21z'/%3E%3C/svg%3E");
}

.hh-sosyal-instagram {
    --hh-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M7.500 3h9A4.500 4.500 0 0 1 21 7.500v9a4.500 4.500 0 0 1-4.500 4.500h-9A4.500 4.500 0 0 1 3 16.500v-9A4.500 4.500 0 0 1 7.500 3zm0 1.800a2.700 2.700 0 0 0-2.700 2.700v9a2.700 2.700 0 0 0 2.700 2.700h9a2.700 2.700 0 0 0 2.700-2.700v-9a2.700 2.700 0 0 0-2.700-2.700zM12 7.600a4.400 4.400 0 1 1 0 8.800 4.400 4.400 0 0 1 0-8.800zm0 1.800a2.600 2.600 0 1 0 0 5.200 2.600 2.600 0 0 0 0-5.200zm4.700-3.200a1.100 1.100 0 1 1 0 2.200 1.100 1.100 0 0 1 0-2.200z'/%3E%3C/svg%3E");
}

.hh-sosyal-youtube {
    --hh-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M4.200 5.400C5.700 5 12 5 12 5s6.300 0 7.800.400a2.500 2.500 0 0 1 1.800 1.800c.400 1.600.400 4.800.400 4.800s0 3.200-.400 4.800a2.500 2.500 0 0 1-1.800 1.800C18.300 19 12 19 12 19s-6.300 0-7.800-.400a2.500 2.500 0 0 1-1.800-1.800C2 15.200 2 12 2 12s0-3.200.400-4.800a2.500 2.500 0 0 1 1.800-1.800zM10 9v6l5.200-3z'/%3E%3C/svg%3E");
}

.hh-iletisim-formu {
    background: var(--hh-yuzey);
    border: 1px solid var(--hh-cizgi-acik);
    border-radius: 12px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
    padding: 1.5rem;
    position: relative;
}

.hh-iletisim-form-izgara {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 1rem;
}

.hh-iletisim-formu label > span {
    color: #334052;
    display: block;
    font-size: .875rem;
    font-weight: 500;
    margin-bottom: .25rem;
}

.hh-iletisim-formu input[type="text"],
.hh-iletisim-formu input[type="email"],
.hh-iletisim-formu input[type="tel"],
.hh-iletisim-formu textarea {
    background: var(--hh-yuzey);
    border: 1px solid #c5ccd6;
    border-radius: 8px;
    display: block;
    font-size: .875rem;
    padding: .5rem .75rem;
    width: 100%;
}

.hh-iletisim-formu textarea {
    min-height: 8rem;
    resize: vertical;
}

.hh-iletisim-formu input:focus,
.hh-iletisim-formu textarea:focus {
    border-color: #fca5a5;
    box-shadow: 0 0 0 2px #fca5a5;
    outline: 0;
}

.hh-iletisim-tam {
    display: block;
    margin-bottom: 1rem;
}

.hh-iletisim-onay {
    align-items: flex-start;
    display: flex;
    gap: .5rem;
    margin-bottom: 1rem;
}

.hh-iletisim-onay input {
    flex-shrink: 0;
    margin-top: .3rem;
}

.hh-iletisim-formu .hh-iletisim-onay > span {
    color: var(--hh-metin-soluk);
    font-size: .8125rem;
    font-weight: 400;
    margin: 0;
}

.hh-iletisim-gonder {
    background: var(--hh-kirmizi);
    border-radius: 8px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
    color: #fff;
    font-size: .875rem;
    font-weight: 600;
    padding: .625rem 1.5rem;
    transition: background-color .15s;
}

.hh-iletisim-gonder:hover {
    background: var(--hh-kirmizi-koyu);
}

.hh-iletisim-bildirim {
    border-radius: 8px;
    display: block;
    font-size: .875rem;
    padding: .625rem .875rem;
}

.hh-iletisim-bildirim.hh-basarili {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
}

.hh-iletisim-bildirim.hh-hata {
    background: var(--hh-kirmizi-acik);
    border: 1px solid #fecaca;
    color: #991b1b;
}

.hh-rss-izgara {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 1rem;
}

.hh-sayfa-icerik .hh-rss-kart {
    align-items: center;
    background: var(--hh-yuzey);
    border: 1px solid var(--hh-cizgi);
    border-radius: 12px;
    color: var(--hh-metin);
    display: flex;
    font-size: .875rem;
    font-weight: 700;
    gap: .625rem;
    padding: .75rem 1rem;
    transition: border-color .15s, color .15s;
}

.hh-sayfa-icerik .hh-rss-kart:hover {
    border-color: #f97316;
    color: #ea580c;
    text-decoration: none;
}

.hh-rss-kart-ikon {
    background: #f97316;
    border-radius: 6px;
    flex-shrink: 0;
    height: 1.5rem;
    position: relative;
    width: 1.5rem;
}

.hh-rss-kart-ikon::before {
    background: #fff;
    border-radius: 9999px;
    bottom: .3rem;
    content: "";
    height: .3rem;
    left: .3rem;
    position: absolute;
    width: .3rem;
}

.hh-rss-kart-ikon::after {
    border: 2px solid #fff;
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-radius: 0 100% 0 0;
    bottom: .3rem;
    content: "";
    height: .7rem;
    left: .3rem;
    position: absolute;
    width: .7rem;
}

.hh-iz-yolu {
    color: var(--hh-metin-soluk);
    display: flex;
    flex-wrap: wrap;
    font-size: .8125rem;
    gap: .5rem;
    padding-top: 1.5rem;
}

.hh-iz-yolu a:hover {
    color: var(--hh-kirmizi);
}

.hh-iz-yolu .hh-ayrac {
    color: var(--hh-metin-silik);
}

.hh-iz-yolu .hh-guncel {
    color: var(--hh-metin-koyu);
    font-weight: 700;
}

.hh-namaz-ana,
.hh-eczane-sayfa,
.hh-deprem-sayfa {
    padding: 1.5rem 0 2.5rem;
}

.hh-namaz-baslik,
.hh-eczane-baslik,
.hh-deprem-vitrin-baslik {
    border-left: 6px solid var(--hh-kirmizi);
    color: var(--hh-metin-koyu);
    font-size: 2rem;
    font-weight: 800;
    line-height: 2.25rem;
    margin-bottom: .5rem;
    padding-left: .875rem;
}

.hh-namaz-aciklama,
.hh-eczane-aciklama {
    color: var(--hh-metin-soluk);
    font-size: .9375rem;
    margin-bottom: 1.5rem;
}

.hh-namaz-bolum-baslik,
.hh-eczane-sonuc-baslik {
    color: var(--hh-metin-koyu);
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.75rem;
    margin-bottom: 1rem;
}

.hh-namaz-secim-etiket,
.hh-eczane-alan > span {
    color: #334052;
    display: block;
    font-size: .875rem;
    font-weight: 600;
    margin-bottom: .25rem;
}

.hh-namaz-secim,
.hh-eczane-secim {
    background: var(--hh-yuzey);
    border: 1px solid #c5ccd6;
    border-radius: 8px;
    font-size: .875rem;
    min-width: 14rem;
    padding: .5rem .75rem;
}

.hh-namaz-secim-sarmal {
    margin-bottom: 2rem;
}

.hh-namaz-populer,
.hh-namaz-aylik,
.hh-namaz-bugun {
    margin-bottom: 2.5rem;
}

.hh-namaz-populer-izgara {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hh-namaz-sehir-kart,
.hh-namaz-bugun {
    background: var(--hh-yuzey);
    border: 1px solid var(--hh-cizgi);
    border-radius: 12px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
    padding: 1.25rem;
    text-align: center;
}

.hh-namaz-sehir-kart-ad,
.hh-namaz-bugun-sehir {
    color: var(--hh-metin-koyu);
    font-size: 1.25rem;
    font-weight: 800;
}

.hh-namaz-sehir-kart-tarih,
.hh-namaz-bugun-tarih {
    color: var(--hh-metin-soluk);
    font-size: .8125rem;
    margin-bottom: 1rem;
}

.hh-namaz-sehir-saatler-satir {
    display: grid;
    gap: .5rem;
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.hh-namaz-sehir-saat {
    background: #f5f7fa;
    border-radius: 8px;
    padding: .5rem .25rem;
}

.hh-namaz-sehir-saat-etiket {
    color: var(--hh-metin-soluk);
    display: block;
    font-size: .6875rem;
    font-weight: 600;
}

.hh-namaz-sehir-saat-deger {
    color: var(--hh-metin-koyu);
    display: block;
    font-size: .9375rem;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
}

.hh-namaz-sehir-saat.hh-gece,
.hh-namaz-sehir-saat.hh-aktif {
    background: var(--hh-kirmizi);
}

.hh-namaz-sehir-saat.hh-gece span,
.hh-namaz-sehir-saat.hh-aktif span {
    color: #fff;
}

.hh-namaz-sehir-kart-baglanti {
    color: var(--hh-kirmizi);
    display: inline-block;
    font-size: .8125rem;
    font-weight: 700;
    margin-top: 1rem;
}

.hh-namaz-sehir-kart-baglanti:hover {
    text-decoration: underline;
}

.hh-namaz-geri-sayim {
    align-items: baseline;
    background: var(--hh-kirmizi-acik);
    border-radius: 8px;
    color: var(--hh-metin);
    display: flex;
    flex-wrap: wrap;
    font-size: .875rem;
    gap: .5rem;
    justify-content: center;
    margin-top: 1rem;
    padding: .625rem 1rem;
}

.hh-namaz-geri-sayim-vakit {
    font-weight: 700;
}

.hh-namaz-geri-sayim-saat {
    color: var(--hh-kirmizi);
    font-variant-numeric: tabular-nums;
    font-weight: 800;
}

.hh-namaz-tablo-sarmal {
    border: 1px solid var(--hh-cizgi);
    border-radius: 12px;
    overflow-x: auto;
}

.hh-namaz-tablo {
    font-size: .875rem;
    font-variant-numeric: tabular-nums;
    min-width: 36rem;
    width: 100%;
}

.hh-namaz-tablo th {
    background: #f5f7fa;
    color: var(--hh-metin-soluk);
    font-size: .75rem;
    font-weight: 700;
    padding: .625rem .75rem;
    text-align: center;
    text-transform: uppercase;
}

.hh-namaz-tablo td {
    border-top: 1px solid var(--hh-cizgi-acik);
    padding: .5rem .75rem;
    text-align: center;
}

.hh-namaz-tablo th:first-child,
.hh-namaz-tablo td:first-child {
    text-align: left;
}

.hh-namaz-tablo .hh-bugun td {
    background: var(--hh-kirmizi-acik);
    color: var(--hh-kirmizi-koyu);
    font-weight: 700;
}

.hh-namaz-sehirler-liste {
    display: grid;
    gap: .5rem;
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.hh-namaz-sehirler-liste a {
    background: var(--hh-yuzey);
    border: 1px solid var(--hh-cizgi);
    border-radius: 8px;
    color: #334052;
    display: block;
    font-size: .8125rem;
    font-weight: 600;
    padding: .375rem .625rem;
    text-align: center;
    transition: color .15s, border-color .15s;
}

.hh-namaz-sehirler-liste a:hover {
    border-color: var(--hh-kirmizi);
    color: var(--hh-kirmizi);
}

.hh-eczane-form {
    align-items: flex-end;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2rem;
}

.hh-eczane-buton {
    background: var(--hh-kirmizi);
    border-radius: 8px;
    color: #fff;
    font-size: .875rem;
    font-weight: 700;
    padding: .5625rem 1.5rem;
}

.hh-eczane-buton:hover {
    background: var(--hh-kirmizi-koyu);
}

.hh-eczane-sonuc-ust {
    margin-bottom: 1rem;
}

.hh-eczane-sonuc-baslik {
    margin-bottom: .25rem;
}

.hh-eczane-sonuc-not {
    color: var(--hh-metin-soluk);
    font-size: .8125rem;
}

.hh-eczane-liste {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hh-eczane-kart {
    background: var(--hh-yuzey);
    border: 1px solid var(--hh-cizgi);
    border-radius: 12px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
    display: flex;
    flex-direction: column;
    font-size: .875rem;
    gap: .75rem;
    padding: 1rem 1.25rem;
}

.hh-eczane-kart-ust {
    align-items: flex-start;
    display: flex;
    gap: .75rem;
    justify-content: space-between;
}

.hh-eczane-kart-baslik-sarmal {
    align-items: center;
    display: flex;
    gap: .625rem;
    min-width: 0;
}

.hh-eczane-simge {
    align-items: center;
    background: var(--hh-kirmizi);
    border-radius: 8px;
    color: #fff;
    display: flex;
    flex-shrink: 0;
    font-weight: 900;
    height: 2rem;
    justify-content: center;
    width: 2rem;
}

.hh-eczane-kart-baslik {
    color: var(--hh-metin-koyu);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.3;
}

.hh-eczane-ilce {
    background: var(--hh-zemin);
    border-radius: 9999px;
    color: #475365;
    flex-shrink: 0;
    font-size: .6875rem;
    font-weight: 700;
    padding: .125rem .625rem;
    text-transform: uppercase;
}

.hh-eczane-adres {
    color: #475365;
    line-height: 1.5;
}

.hh-eczane-adres span,
.hh-eczane-ara span {
    color: var(--hh-metin-silik);
    display: block;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.hh-eczane-kart-islemler {
    align-items: flex-end;
    border-top: 1px solid var(--hh-cizgi-acik);
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: space-between;
    margin-top: auto;
    padding-top: .75rem;
}

.hh-eczane-ara {
    color: var(--hh-metin-koyu);
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
}

.hh-eczane-harita {
    color: var(--hh-kirmizi);
    font-size: .8125rem;
    font-weight: 700;
}

.hh-eczane-ara:hover,
.hh-eczane-harita:hover {
    color: var(--hh-kirmizi-koyu);
    text-decoration: underline;
}

.hh-eczane-guncelleme {
    color: var(--hh-metin-silik);
    font-size: .75rem;
    margin-top: 1rem;
}

.hh-eczane-ilce-onerileri {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.5rem;
}

.hh-eczane-ilce-onerileri a {
    background: var(--hh-yuzey);
    border: 1px solid var(--hh-cizgi);
    border-radius: 9999px;
    font-size: .75rem;
    font-weight: 600;
    padding: .25rem .75rem;
}

.hh-eczane-ilce-onerileri a:hover {
    border-color: var(--hh-kirmizi);
    color: var(--hh-kirmizi);
}

.hh-deprem-vitrin-baslik {
    margin-bottom: 1.5rem;
}

.hh-deprem-liste {
    background: var(--hh-yuzey);
    border: 1px solid var(--hh-cizgi);
    border-radius: 12px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
    overflow: hidden;
}

.hh-deprem-satir {
    border-top: 1px solid var(--hh-cizgi-acik);
}

.hh-deprem-satir:first-child {
    border-top: 0;
}

.hh-deprem-satir-ana {
    align-items: center;
    display: flex;
    gap: 1rem;
    padding: .75rem 1rem 0;
}

.hh-deprem-buyukluk {
    align-items: center;
    background: #16a34a;
    border-radius: 8px;
    color: #fff;
    display: flex;
    flex-shrink: 0;
    font-size: .9375rem;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    height: 2.75rem;
    justify-content: center;
    width: 3.5rem;
}

.hh-deprem-buyukluk-orta {
    background: #f59e0b;
}

.hh-deprem-buyukluk-yuksek,
.hh-deprem-buyukluk-buyuk {
    background: var(--hh-kirmizi);
}

.hh-deprem-satir-bilgi {
    display: flex;
    flex: 1 1 0%;
    flex-direction: column;
    min-width: 0;
}

.hh-deprem-satir-konum {
    color: var(--hh-metin-koyu);
    font-size: .9375rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.hh-deprem-satir-saat {
    color: var(--hh-metin-soluk);
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
}

.hh-deprem-satir-dugme {
    display: none;
}

.hh-deprem-satir-detay {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 2rem;
    padding: .5rem 1rem .75rem 5.5rem;
}

.hh-deprem-detay span {
    color: var(--hh-metin-soluk);
    display: block;
    font-size: .6875rem;
    font-weight: 600;
    text-transform: uppercase;
}

.hh-deprem-detay strong {
    color: var(--hh-metin-koyu);
    font-size: .875rem;
    font-weight: 700;
}

.hh-deprem-detay-harita {
    align-items: center;
    color: var(--hh-kirmizi);
    display: inline-flex;
    font-size: .8125rem;
    font-weight: 700;
    gap: .375rem;
    margin-left: auto;
}

.hh-deprem-detay-harita:hover {
    text-decoration: underline;
}

.hh-deprem-harita-isaret {
    background: var(--hh-kirmizi);
    border-radius: 50% 50% 50% 0;
    height: .75rem;
    transform: rotate(-45deg);
    width: .75rem;
}

.hh-deprem-bilgi {
    color: var(--hh-metin-soluk);
    font-size: .875rem;
    margin-top: 2rem;
}

.hh-deprem-bilgi h2 {
    color: var(--hh-metin-koyu);
    font-size: 1.125rem;
    font-weight: 800;
    margin-bottom: .5rem;
}

@media (max-width: 1023px) {
    .hh-sayfa-yerlesim {
        grid-template-columns: minmax(0, 1fr);
    }

    .hh-sayfa-yan-panel {
        position: static;
    }

    .hh-eczane-liste {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hh-namaz-sehirler-liste {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .hh-namaz-baslik,
    .hh-eczane-baslik,
    .hh-deprem-vitrin-baslik {
        font-size: 1.75rem;
        line-height: 2rem;
    }

    .hh-namaz-populer-izgara,
    .hh-eczane-liste,
    .hh-rss-izgara,
    .hh-iletisim-form-izgara,
    .hh-haber-yorum-alanlari {
        grid-template-columns: minmax(0, 1fr);
    }

    .hh-namaz-sehir-saatler-satir {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .hh-namaz-sehirler-liste {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hh-namaz-secim,
    .hh-eczane-secim {
        min-width: 0;
        width: 100%;
    }

    .hh-eczane-alan {
        flex: 1 1 100%;
    }

    .hh-deprem-satir-detay {
        padding-left: 1rem;
    }

    .hh-sayfa-tablo td:first-child {
        width: 6rem;
    }
}

.hh-spor-sayfa {
    padding: 2.5rem 0 2rem;
}

.hh-spor-sayfa > * {
    margin-bottom: 2rem;
}

.hh-spor-sayfa > .hh-liste-izgara-4 {
    margin-bottom: 1.5rem;
}

.hh-spor-bolum-baslik {
    align-items: center;
    color: var(--hh-metin-koyu);
    display: flex;
    font-size: 1.25rem;
    font-weight: 900;
    line-height: 1.75rem;
    margin-bottom: 1.5rem;
}

.hh-spor-bolum-baslik span {
    background: var(--hh-kirmizi);
    border-radius: 9999px;
    height: .5rem;
    margin-right: .5rem;
    width: .5rem;
}

.hh-takim-logo {
    display: inline-block;
    flex-shrink: 0;
    height: 1.5rem;
    object-fit: contain;
    vertical-align: middle;
    width: 1.5rem;
}

.hh-takim-logo-yertutucu {
    background: var(--hh-cizgi);
    border-radius: 9999px;
    display: inline-block;
    flex-shrink: 0;
    height: 1.5rem;
    vertical-align: middle;
    width: 1.5rem;
}

.hh-spor-bilesen-uyarisi,
.hh-spor-bos-uyarisi,
.hh-puan-durumu-hata,
.hh-fikstur-hata {
    color: var(--hh-metin-soluk);
    font-size: .875rem;
    padding: 1.5rem 1rem;
    text-align: center;
}

.hh-spor-son-guncelleme {
    color: var(--hh-metin-silik);
    font-size: .75rem;
    margin-top: -1.25rem;
    text-align: right;
}

.hh-spor-sayfa-mac-cubugu {
    background: var(--hh-yuzey);
    border: 1px solid var(--hh-cizgi);
    border-radius: 12px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
    overflow: hidden;
}

.hh-spor-sayfa-mac-cubugu-ust,
.hh-spor-sayfa-bilesen-ust {
    align-items: center;
    background: #f5f7fa;
    border-bottom: 1px solid var(--hh-cizgi);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: .625rem 1rem;
}

.hh-spor-sayfa-mac-cubugu-baslik,
.hh-spor-sayfa-bilesen-baslik {
    color: var(--hh-metin-koyu);
    font-size: .8125rem;
    font-weight: 900;
    text-transform: uppercase;
}

.hh-spor-sayfa-mac-cubugu-tumu,
.hh-spor-sayfa-bilesen-baglanti {
    color: #475365;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.hh-spor-sayfa-mac-cubugu-tumu:hover,
.hh-spor-sayfa-bilesen-baglanti:hover {
    color: var(--hh-kirmizi);
}

.hh-spor-sayfa-mac-cubugu-liste {
    display: flex;
    gap: .75rem;
    overflow-x: auto;
    padding: .75rem 1rem;
}

.hh-spor-sayfa-mac-cubugu-kart {
    align-items: center;
    background: #f5f7fa;
    border: 1px solid var(--hh-cizgi-acik);
    border-radius: 8px;
    display: flex;
    flex: 0 0 auto;
    gap: .75rem;
    padding: .5rem .875rem;
}

.hh-spor-sayfa-mac-cubugu-takim {
    align-items: center;
    color: var(--hh-metin-koyu);
    display: flex;
    font-size: .8125rem;
    font-weight: 800;
    gap: .375rem;
}

.hh-spor-sayfa-mac-cubugu-skor,
.hh-spor-sayfa-fikstur-skor,
.hh-fikstur-skor {
    background: var(--hh-yuzey);
    border: 1px solid var(--hh-cizgi);
    border-radius: 6px;
    color: #475365;
    flex-shrink: 0;
    font-size: .8125rem;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    min-width: 3.5rem;
    padding: .125rem .5rem;
    text-align: center;
}

.hh-spor-sayfa-mac-cubugu-tamamlandi,
.hh-spor-sayfa-fikstur-skor-tamamlandi,
.hh-fikstur-skor-tamamlandi {
    background: var(--hh-metin-koyu);
    border-color: var(--hh-metin-koyu);
    color: #fff;
}

.hh-spor-sayfa-mac-cubugu-canli,
.hh-spor-sayfa-fikstur-skor-canli,
.hh-fikstur-skor-canli {
    background: var(--hh-kirmizi);
    border-color: var(--hh-kirmizi);
    color: #fff;
}

.hh-spor-sayfa-bilesenler {
    align-items: start;
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hh-spor-sayfa-bilesen {
    background: var(--hh-yuzey);
    border: 1px solid var(--hh-cizgi);
    border-radius: 12px;
    box-shadow: none;
    overflow: hidden;
}

.hh-spor-sayfa-bilesen-alt-baslik {
    color: var(--hh-metin-soluk);
    font-size: .75rem;
    font-weight: 600;
}

.hh-spor-sayfa-bilesen > .hh-spor-sayfa-bilesen-baglanti {
    border-top: 1px solid var(--hh-cizgi-acik);
    display: block;
    padding: .625rem 1rem;
    text-align: center;
}

.hh-spor-sayfa-tablo-sarmal,
.hh-puan-durumu-tablo-sarmal {
    overflow-x: auto;
}

.hh-spor-sayfa-tablo,
.hh-puan-durumu-tablo {
    font-size: .8125rem;
    font-variant-numeric: tabular-nums;
    width: 100%;
}

.hh-spor-sayfa-tablo th,
.hh-puan-durumu-tablo th {
    color: var(--hh-metin-soluk);
    font-size: .6875rem;
    font-weight: 700;
    padding: .5rem .375rem;
    text-align: center;
    text-transform: uppercase;
}

.hh-spor-sayfa-tablo td,
.hh-puan-durumu-tablo td {
    border-top: 1px solid var(--hh-cizgi-acik);
    padding: .5rem .375rem;
    text-align: center;
}

.hh-spor-sayfa-tablo th:nth-child(2),
.hh-puan-durumu-tablo .hh-puan-durumu-hh-takim {
    text-align: left;
}

.hh-spor-sayfa-tablo .hh-spor-sayfa-tablo-takim,
.hh-puan-durumu-tablo .hh-puan-durumu-takim {
    color: var(--hh-metin-koyu);
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
}

.hh-spor-sayfa-tablo-takim .hh-takim-logo,
.hh-puan-durumu-takim .hh-takim-logo {
    margin-right: .5rem;
}

.hh-spor-sayfa-tablo-kalin,
.hh-puan-durumu-puan {
    color: var(--hh-metin-koyu);
    font-weight: 900;
}

.hh-spor-sayfa-tablo td:first-child,
.hh-puan-durumu-sira {
    border-left: 3px solid transparent;
    color: var(--hh-metin-soluk);
    font-weight: 700;
    width: 2.25rem;
}

td.hh-spor-sayfa-tur-1,
.hh-puan-durumu-bolge-1 .hh-puan-durumu-sira {
    border-left-color: #2563eb;
}

td.hh-spor-sayfa-tur-2,
.hh-puan-durumu-bolge-2 .hh-puan-durumu-sira {
    border-left-color: #0891b2;
}

td.hh-spor-sayfa-tur-3,
.hh-puan-durumu-bolge-3 .hh-puan-durumu-sira {
    border-left-color: #f59e0b;
}

td.hh-spor-sayfa-tur-4,
.hh-puan-durumu-bolge-4 .hh-puan-durumu-sira {
    border-left-color: #16a34a;
}

td.hh-spor-sayfa-tur-5,
.hh-puan-durumu-bolge-5 .hh-puan-durumu-sira {
    border-left-color: var(--hh-kirmizi);
}

.hh-spor-sayfa-tablo-aciklama,
.hh-puan-durumu-aciklama {
    border-top: 1px solid var(--hh-cizgi-acik);
    color: var(--hh-metin-soluk);
    display: flex;
    flex-wrap: wrap;
    font-size: .6875rem;
    font-weight: 600;
    gap: .375rem 1rem;
    padding: .625rem 1rem;
}

.hh-spor-sayfa-tablo-aciklama > span,
.hh-puan-durumu-aciklama > span {
    align-items: center;
    display: inline-flex;
    gap: .375rem;
}

.hh-spor-sayfa-tur-nokta,
.hh-puan-durumu-nokta {
    border-radius: 9999px;
    height: .5rem;
    width: .5rem;
}

span.hh-spor-sayfa-tur-1,
span.hh-puan-durumu-bolge-1 {
    background: #2563eb;
}

span.hh-spor-sayfa-tur-2,
span.hh-puan-durumu-bolge-2 {
    background: #0891b2;
}

span.hh-spor-sayfa-tur-3,
span.hh-puan-durumu-bolge-3 {
    background: #f59e0b;
}

span.hh-spor-sayfa-tur-4,
span.hh-puan-durumu-bolge-4 {
    background: #16a34a;
}

span.hh-spor-sayfa-tur-5,
span.hh-puan-durumu-bolge-5 {
    background: var(--hh-kirmizi);
}

.hh-spor-sayfa-fikstur-menu {
    align-items: center;
    display: flex;
    gap: .5rem;
}

.hh-spor-sayfa-fikstur-ok,
.hh-fikstur-hafta-ok {
    align-items: center;
    border: 1px solid var(--hh-cizgi);
    border-radius: 9999px;
    color: var(--hh-metin-soluk);
    display: flex;
    flex-shrink: 0;
    height: 1.75rem;
    justify-content: center;
    line-height: 1;
    padding-bottom: 2px;
    width: 1.75rem;
}

.hh-spor-sayfa-fikstur-ok:hover,
.hh-fikstur-hafta-ok:hover {
    border-color: var(--hh-kirmizi);
    color: var(--hh-kirmizi);
}

.hh-fikstur-pasif {
    opacity: .4;
    pointer-events: none;
}

.hh-spor-sayfa-fikstur-hafta {
    color: #334052;
    font-size: .75rem;
    font-weight: 700;
}

.hh-spor-sayfa-fikstur-tarih,
.hh-fikstur-tarih {
    background: #f5f7fa;
    color: var(--hh-metin-soluk);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .05em;
    padding: .375rem 1rem;
}

.hh-spor-sayfa-fikstur-satir {
    align-items: center;
    border-top: 1px solid var(--hh-cizgi-acik);
    display: grid;
    gap: .75rem;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    padding: .5rem 1rem;
}

.hh-spor-sayfa-fikstur-ev,
.hh-spor-sayfa-fikstur-deplasman,
.hh-fikstur-ev,
.hh-fikstur-deplasman {
    align-items: center;
    color: var(--hh-metin-koyu);
    display: flex;
    font-size: .8125rem;
    font-weight: 700;
    gap: .5rem;
    min-width: 0;
}

.hh-spor-sayfa-fikstur-ev,
.hh-fikstur-ev {
    justify-content: flex-end;
    text-align: right;
}

.hh-puan-durumu-sayfa,
.hh-fikstur-sayfa {
    padding: 2.5rem 0 2rem;
}

.hh-puan-durumu-baslik,
.hh-fikstur-baslik {
    border-left: 6px solid var(--hh-kirmizi);
    color: var(--hh-metin-koyu);
    font-size: 2rem;
    font-weight: 800;
    line-height: 2.25rem;
    padding-left: .875rem;
}

.hh-puan-durumu-alt-baslik,
.hh-fikstur-alt-baslik {
    color: var(--hh-metin-soluk);
    font-size: .9375rem;
    margin: .25rem 0 1.5rem;
}

.hh-puan-durumu-tablo-sarmal {
    background: var(--hh-yuzey);
    border: 1px solid var(--hh-cizgi);
    border-radius: 12px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
}

.hh-puan-durumu-tablo {
    font-size: .875rem;
}

.hh-puan-durumu-tablo th {
    background: #f5f7fa;
}

.hh-puan-durumu-tablo th,
.hh-puan-durumu-tablo td {
    padding: .625rem .5rem;
}

.hh-puan-durumu-aciklama {
    border-top: 0;
    padding: 1rem 0 0;
}

.hh-fikstur-haftalar {
    align-items: center;
    display: flex;
    gap: .5rem;
    margin-bottom: 1.5rem;
}

.hh-fikstur-hafta-liste {
    display: flex;
    gap: .375rem;
    overflow-x: auto;
    padding: .25rem 0;
}

.hh-fikstur-hafta-dugme {
    border: 1px solid var(--hh-cizgi);
    border-radius: 8px;
    color: #334052;
    flex-shrink: 0;
    font-size: .8125rem;
    font-weight: 700;
    min-width: 2.25rem;
    padding: .375rem .5rem;
    text-align: center;
}

.hh-fikstur-hafta-dugme:hover {
    border-color: var(--hh-kirmizi);
    color: var(--hh-kirmizi);
}

.hh-fikstur-hafta-dugme.hh-aktif {
    background: var(--hh-kirmizi);
    border-color: var(--hh-kirmizi);
    color: #fff;
}

.hh-fikstur-hafta-baslik {
    color: var(--hh-metin-koyu);
    font-size: 1.25rem;
    font-weight: 800;
    margin-bottom: 1rem;
}

.hh-fikstur-sayfa .hh-fikstur-tarih-grup {
    background: var(--hh-yuzey);
    border: 1px solid var(--hh-cizgi);
    border-radius: 12px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
    margin-bottom: 1rem;
    overflow: hidden;
}

.hh-fikstur-mac {
    align-items: center;
    border-top: 1px solid var(--hh-cizgi-acik);
    display: grid;
    gap: 1rem;
    grid-template-columns: 3.5rem minmax(0, 1fr) 12rem;
    padding: .75rem 1rem;
}

.hh-fikstur-saat {
    color: var(--hh-metin-soluk);
    font-size: .8125rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.hh-fikstur-takimlar {
    align-items: center;
    display: grid;
    gap: .75rem;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.hh-fikstur-ev,
.hh-fikstur-deplasman {
    font-size: .9375rem;
}

.hh-fikstur-takim-ad {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hh-fikstur-stadyum {
    color: var(--hh-metin-silik);
    font-size: .75rem;
    text-align: right;
}

@media (max-width: 1023px) {
    .hh-spor-sayfa-bilesenler {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767px) {
    .hh-spor-sayfa {
        padding-top: 1.5rem;
    }

    .hh-spor-vitrin .hh-manset-sahne {
        border-radius: 12px;
    }

    .hh-puan-durumu-baslik,
    .hh-fikstur-baslik {
        font-size: 1.75rem;
        line-height: 2rem;
    }

    .hh-fikstur-mac {
        gap: .5rem;
        grid-template-columns: 3rem minmax(0, 1fr);
    }

    .hh-fikstur-stadyum {
        grid-column: 2;
        text-align: center;
    }

    .hh-fikstur-ev,
    .hh-fikstur-deplasman {
        font-size: .8125rem;
    }
}

.hh-canli {
    margin: 0 0 22px;
    border: 1px solid var(--hh-cizgi);
    border-radius: 18px;
    background: var(--hh-yuzey);
    overflow: hidden;
}

.hh-canli-ust {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    padding: 22px 20px 20px;
    background: linear-gradient(135deg, var(--hh-lacivert), #24344c);
    color: #fff;
}

.hh-canli-takim {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 0;
    text-align: center;
}

.hh-canli-takim img,
.hh-canli-takim-harf {
    width: 72px;
    height: 72px;
    object-fit: contain;
}

.hh-canli-takim-harf {
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    font-size: 30px;
    font-weight: 800;
}

.hh-canli-takim strong {
    font-size: 17px;
    font-weight: 800;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.hh-canli-kartlar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    min-height: 14px;
}

.hh-canli-kart {
    width: 10px;
    height: 14px;
    border-radius: 2px;
    background: #facc15;
}

.hh-canli-kart-kirmizi {
    background: #ef4444;
}

.hh-canli-orta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.hh-canli-zaman {
    color: rgba(255, 255, 255, .7);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
}

.hh-canli-skor {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 46px;
    font-weight: 900;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.hh-canli-skor i {
    color: rgba(255, 255, 255, .45);
    font-style: normal;
    font-weight: 500;
}

.hh-canli-durum {
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.hh-canli-suruyor .hh-canli-durum {
    background: var(--hh-kirmizi);
}

.hh-canli-kadro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--hh-cizgi);
    background: #f7f9fb;
    font-size: 13px;
}

.hh-canli-kadro h3 {
    margin: 0 0 6px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--hh-cizgi);
    color: var(--hh-metin-koyu);
    font-size: 13px;
    font-weight: 800;
}

.hh-canli-kadro ul {
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--hh-metin-soluk);
    line-height: 1.75;
}

.hh-canli-kadro > div:last-child {
    text-align: right;
}

.hh-canli-kadro-orta {
    padding: 0 14px;
    border-inline: 1px solid var(--hh-cizgi);
    text-align: center;
}

.hh-canli-kadro-orta h3 {
    border: 0;
    padding: 0;
    color: var(--hh-metin-silik);
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.hh-canli-kadro-orta p {
    margin: 0 0 12px;
    color: var(--hh-metin);
    font-weight: 700;
}

.hh-canli-kadro-orta ul {
    font-size: 12px;
    line-height: 1.6;
}

.hh-canli-akis {
    padding: 18px 20px 20px;
}

.hh-canli-akis-ust {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.hh-canli-akis-ust h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--hh-metin-koyu);
    font-size: 17px;
    font-weight: 900;
}

.hh-canli-nokta {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--hh-metin-silik);
}

.hh-canli-suruyor .hh-canli-nokta {
    background: var(--hh-kirmizi);
    animation: hh-canli-nabiz 1.4s ease-in-out infinite;
}

@keyframes hh-canli-nabiz {
    50% {
        opacity: .25;
    }
}

.hh-canli-yenile {
    padding: 7px 14px;
    border: 1px solid var(--hh-cizgi);
    border-radius: 10px;
    background: var(--hh-yuzey);
    color: var(--hh-metin-soluk);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.hh-canli-yenile:hover,
.hh-canli-yenile.hh-donuyor {
    border-color: var(--hh-kirmizi);
    background: var(--hh-kirmizi-acik);
    color: var(--hh-kirmizi);
}

.hh-canli-liste {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hh-canli-olay {
    --hh-canli-renk: var(--hh-metin-silik);
    display: grid;
    grid-template-columns: 46px 34px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--hh-cizgi-acik);
    border-left: 4px solid var(--hh-canli-renk);
    border-radius: 12px;
    background: var(--hh-yuzey);
}

.hh-canli-renk-gol {
    --hh-canli-renk: #16a34a;
}

.hh-canli-renk-sari {
    --hh-canli-renk: #eab308;
}

.hh-canli-renk-kirmizi {
    --hh-canli-renk: var(--hh-kirmizi);
}

.hh-canli-renk-mavi {
    --hh-canli-renk: #2563eb;
}

.hh-canli-renk-uyari {
    --hh-canli-renk: #ea580c;
}

.hh-canli-dakika {
    padding-top: 6px;
    color: var(--hh-kirmizi);
    font-size: 15px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.hh-canli-simge {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #f1f4f8;
    background: color-mix(in srgb, var(--hh-canli-renk) 14%, #fff);
    color: var(--hh-canli-renk);
}

.hh-canli-olay-govde {
    min-width: 0;
}

.hh-canli-olay-govde p,
.hh-canli-olay-govde h4 {
    margin: 0;
}

.hh-canli-olay-tur {
    color: var(--hh-canli-renk);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.hh-canli-renk-notr .hh-canli-olay-tur {
    color: var(--hh-metin-soluk);
}

.hh-canli-olay-tur span {
    color: var(--hh-metin-silik);
    font-weight: 700;
}

.hh-canli-olay-tur span::before {
    content: "· ";
}

.hh-canli-olay-govde h4 {
    margin-top: 2px;
    color: var(--hh-metin-koyu);
    font-size: 16px;
    font-weight: 800;
}

.hh-canli-olay-metin {
    margin-top: 3px !important;
    color: var(--hh-metin);
    font-size: 15px;
    line-height: 1.55;
}

.hh-canli-yeni {
    animation: hh-canli-yeni 2.4s ease-out;
}

@keyframes hh-canli-yeni {
    from {
        background: var(--hh-kirmizi-acik);
    }
}

.hh-canli-bos {
    margin: 0;
    padding: 18px;
    border: 1px dashed var(--hh-cizgi);
    border-radius: 12px;
    color: var(--hh-metin-soluk);
    text-align: center;
}

@media (max-width: 767px) {
    .hh-canli {
        border-radius: 14px;
    }

    .hh-canli-ust {
        gap: 8px;
        padding: 16px 10px 14px;
    }

    .hh-canli-takim img,
    .hh-canli-takim-harf {
        width: 52px;
        height: 52px;
    }

    .hh-canli-takim strong {
        font-size: 13px;
    }

    .hh-canli-skor {
        gap: 6px;
        font-size: 34px;
    }

    .hh-canli-durum {
        padding: 3px 9px;
        font-size: 10px;
    }

    .hh-canli-kadro {
        gap: 8px;
        padding: 12px 10px;
        font-size: 11px;
    }

    .hh-canli-kadro-orta {
        padding: 0 6px;
    }

    .hh-canli-kadro-orta ul {
        font-size: 10px;
    }

    .hh-canli-akis {
        padding: 14px 10px 12px;
    }

    .hh-canli-olay {
        grid-template-columns: 40px 30px minmax(0, 1fr);
        gap: 8px;
        padding: 10px;
    }

    .hh-canli-simge {
        width: 30px;
        height: 30px;
    }

    .hh-canli-dakika {
        padding-top: 5px;
        font-size: 13px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hh-canli-suruyor .hh-canli-nokta,
    .hh-canli-yeni {
        animation: none;
    }
}

.hh-kabuk .hh-yazi-georgia {
    font-family: Georgia, "Times New Roman", serif;
}

.hh-kabuk .hh-yazi-times {
    font-family: "Times New Roman", Times, serif;
}

.hh-kabuk .hh-yazi-arial {
    font-family: Arial, Helvetica, sans-serif;
}

.hh-kabuk .hh-yazi-verdana {
    font-family: Verdana, Geneva, sans-serif;
}

.hh-kabuk .hh-yazi-tahoma {
    font-family: Tahoma, Geneva, sans-serif;
}

.hh-kabuk .hh-yazi-trebuchet {
    font-family: "Trebuchet MS", Tahoma, sans-serif;
}

.hh-kabuk .hh-yazi-courier {
    font-family: "Courier New", Courier, monospace;
}

.hh-kabuk .hh-boyut-kucuk {
    font-size: .85em;
}

.hh-kabuk .hh-boyut-buyuk {
    font-size: 1.2em;
}

.hh-kabuk .hh-boyut-dahabuyuk {
    font-size: 1.45em;
    line-height: 1.35;
}

.hh-kabuk .hh-boyut-cokbuyuk {
    font-size: 1.8em;
    line-height: 1.25;
}

@media print {
    .hh-baslik,
    .hh-altbilgi,
    .hh-yan-menu,
    .hh-yan-menu-ortusu,
    .hh-cerez-uyarisi,
    .hh-reklam-sarmal,
    .hh-reklam-icerik,
    .hh-detay-yan,
    .hh-detay-paylas,
    .hh-detay-bilgi-araclar,
    .hh-yorum-yorumlar,
    .hh-detay-cok-okunan,
    .hh-kirinti {
        display: none !important;
    }

    html,
    body {
        background: #fff;
    }

    .hh-kabuk {
        border: 0;
        box-shadow: none;
        max-width: none;
    }

    .hh-detay-ana {
        grid-column: 1 / -1;
    }

    .hh-detay-kart {
        border: 0;
        box-shadow: none;
    }
}