﻿html { scroll-behavior: smooth; }
body { font-size: var(--icerik-font-boyutu); font-family: var(--icerik-fontu); margin: 0; padding: 0; background: #ececec; color: var(--tema-renk3); font-weight: var(--icerik-font-weight); overflow-x: hidden; }
a, a:active, a:hover, a:visited { text-decoration: none; transition: color ease .1s; font-family: var(--baslik-fontu); color: var(--tema-renk3); }
h1, h2, .h2, .h3, .h4, h3, h4 { font-family: var(--baslik-fontu); font-weight: var(--baslik-font-weight); color: var(--tema-renk1); font-size: var(--baslik-font-boyutu); }
a:hover { color: var(--tema-renk1); }
figure { margin: 0 }
img { max-width: 100%; display: block; }
/***kolon yapisi***/
*,
*::before,
*::after { box-sizing: border-box; }
.container { margin: 0 auto; position: relative; }
.row { display: flex; }
.wrap { flex-wrap: wrap }
.container:after, .container:before { display: table; content: " "; }
.container:after { clear: both; }
.xs4, .xs6, .xs8, .cl1, .cl2, .cl3, .cl4, .cl5, .cl6, .cl7, .cl8, .cl9, .cl10, .cl11, .cl12 { padding: 0; position: relative; }
.cl1 { width: 8.333333% }
.cl2 { width: 16.666667% }
.cl3 { width: 25% }
.cl4 { width: 33.333333%; }
.cl5 { width: 41.666667% }
.cl6 { width: 50% }
.cl7 { width: 58.333333% }
.cl8 { width: 66.666667% }
.cl9 { width: 75% }
.cl10 { width: 83.333333% }
.cl11 { width: 91.666667% }
.cl12 { width: 100% }
header { position: relative; z-index: 8; background: #f7f7f7; }

a.logo { display: block; margin: 0 10px 0 0; }
a.logo img { max-width: 266px; display: block; }

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


header nav { }
header nav .kapsul { }
header nav ul { display: flex; }
header nav ul li { }
header nav ul li a { text-transform: uppercase; display: block; height: 50px; padding: 16px 13px; font-size: 12px; font-weight: 600; color: #474747; position: relative; }
header nav ul li a:hover { }
header nav ul li:nth-child(1) a { padding-left: 0 }
header nav ul li:last-child a:after { display: none; }
/******/
header .satir1 { padding: 5px 0; position: relative; }
header.menuFixle .satir1 { display: none; }
header.menuFixle nav ul { justify-content: flex-start; }
header .satir1 .row { align-items: center }
header .kapsul { box-shadow: 2px 2px 6px 0px #00000014; background: #f7f7f7; position: relative; z-index: 2; }
/************/
#sondakikaustu { text-align: center; margin: 5px 0; }
#sondakikaustu a { display: block }
#sondakikaustu a img { display: block; margin: 0 auto; width: 100%; }
/************/
/***sondakika***/
#sonDakika { font-weight: 600; margin-bottom: 6px; height: 43px; overflow: hidden; }
#sonDakika .container { background: #f8f8f8; padding: 0; }
#sonDakika strong { position: relative; color: #fafafa; font-size: 14px; padding: 12px 10px; margin-right: 15px; width: 112px; display: block; background: var(--tema-renk1); }
#sonDakika ul { display: block; width: calc(100% - 120px); line-height: 25px; overflow: hidden; padding: 8px 10px; }
#sonDakika ul li { display: none; }
#sonDakika ul li a { font-size: 12px; color: #333; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; }
#sonDakika ul li:hover a { color: rgb(255, 0, 15); }


/***sondakika***/
.slideOklar { position: absolute; top: 50%; width: 100%; margin-top: -19px; }
.slideOklar i { line-height: 15px; margin-top: 10px; display: block }
.slideOklar .left, .slideOklar .right { transition: none; display: block; z-index: 10; position: absolute; width: 42px; height: 42px; border-radius: 50%; }
.slideOklar .left { left: 5px; }
.slideOklar .right { right: 5px; }
.slideOklar .left:after { position: absolute; top: 11px; right: 10px; width: 25px; height: 25px; content: ''; margin-left: -11px; border-right: 2px solid #ffffff; border-top: 2px solid #ffffff; transform: rotate( 224deg ); box-sizing: border-box; }
.slideOklar .right:after { position: absolute; top: 11px; right: 13px; width: 25px; height: 25px; content: ''; margin-left: -11px; border-left: 2px solid #ffffff; border-bottom: 2px solid #ffffff; transform: rotate( 224deg ); box-sizing: border-box; }
.slideOklar .left:hover,
.slideOklar .right:hover { }
/*********/
.kutuhaber a figure img { transition: transform ease .2s; }
.kutuhaber a:hover figure img { transform: translate(-50%,-50%) scale(1.05); }
.kutuhaber a:hover strong { color: red }
.kutuhaber strong { font-size: 15px; line-height: 27px; color: #000; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; margin: 7px 10px 8px 11px; font-weight: 600; height: 54px; }

#solkisim { width: 306px; flex-shrink: 0; }
#solkisim .item { position: relative; display: block; margin: 0 0 10px 0; height: 243px; overflow: hidden; background: #fff; border: 1px solid #e8e8e8; }
#solkisim .item:last-child { margin-bottom: 0 }
#solkisim .item figure { z-index: 1; }

#solkisim .item figure:after { }

#solkisim .item figure img { }
#solkisim .item strong { }

#sagkisim { margin: 10px 0; }

#sagkisim .item { width: 25%; position: relative; margin: 0 5px; overflow: hidden; background: #fff; border: 1px solid #e8e8e8; display: block; border-radius: 8px 8px 0 0; }
#sagkisim .item:first-child { margin-left: 0 }
#sagkisim .item:last-child { margin-right: 0 }
#sagkisim .item figure { }
#sagkisim .item figure img { height: auto; }
#sagkisim .item strong { }

#ortakisim { position: relative; width: calc(100% - 321px); margin: 0 10px 0 0; }
/****/
.aspect-ratio { padding-bottom: 56.25%; height: 0; position: relative; overflow: hidden; }
.aspect-ratio img { position: absolute; left: 50%; top: 50%; width: 100%; height: auto; z-index: 1; transform: translate(-50%,-50%); }
/*******/
@media (min-width:1200px) {
    .container { width: 1100px; }
}



@media (min-width:992px) and (max-width:1199px) {
    .container { width: 96%; padding: 0 10px; margin: 0 2% }
    #sabitSagAds, #sabitSolAds { display: none; }
}

@media (min-width:768px) and (max-width:991px) {
    .gizle-xs { display: none !important; }
    #hamburger { display: block; }
    #sabitSagAds, #sabitSolAds { display: none; }
}

@media(max-width:767px) {
    .row { display: block }
    .container { width: 100%; padding: 0 10px }
    .gizle-xs { display: none !important; }
    .xs4 { width: 40%; padding: 0; }
    .xs6 { width: 50%; padding: 0; }

    .xs8 { width: 60%; padding: 0; }
    .xs12 { width: 100%; padding: 0; }
    .goster-xs { display: block !important; }
    /********/
    #hamburger { display: block; background: #f7f7f7; top: 11px; right: 5px; display: none; }
    #hamburger:after { content: ''; background: linear-gradient(270deg, #f7f7f7 52px, transparent); position: absolute; right: 0; top: 0; width: 110px; height: 100%; z-index: -1; }
    #solkisim { white-space: nowrap; width: initial; overflow-x: auto; height: max-content; margin-right: -10px; }
    #solkisim .item { display: inline-block; width: 255px; margin: 0; }
    #solkisim .item:last-child { margin: 0; }
    #sagkisim .item strong, #solkisim .item strong { white-space: initial }
    #ortakisim { width: calc(100% + 20px); margin: 0 -10px; }
    #sonDakika strong { font-size: 12px; width: 90px; height: max-content; margin-right: 0px; }
    #sonDakika ul { width: calc(100% - 90px); line-height: 18px; }
    #sonDakika .row { display: flex }
    #sonDakika ul li a { }
    #sagkisim { white-space: nowrap; width: initial; overflow-x: auto; margin: 10px -10px 0 0; }
    #sagkisim .item { display: inline-block; width: 255px; margin: 0; }
    .slideOklar .left, .slideOklar .right { }
    .slideOklar .right:after { width: 14px; height: 14px; }
    .slideOklar .left:after { width: 14px; height: 14px; }
    header nav ul { display: block; white-space: nowrap; overflow-x: auto; padding-right: 107px; }
    header nav ul li { display: inline-block; }
    header nav ul li a { padding: 13px 7px; height: 38px; font-size: 11px; }
    .rowmobil { display: flex; flex-wrap: wrap; background: #f6f6f6; }
    #sonDakika {margin-bottom: 10px;height: 36px;}
    a.logo { display: inline-block; }
    .mobilicinorder {display: flex;flex-wrap: wrap;}
    .mobilicinorder .mobilorder1{order: 2;width: 100%;}
    .mobilicinorder .mobilorder2{order: 1;width: 100%;}
}
