/* =====================================================================
   SPORBLG — ön yüz stilleri
   Başlıklar Roboto Condensed (kalın, büyük harf, aralıklı), metin Lato 300.
   Renkler :root'ta panelden gelir (inc/ust.php > tema_renk_css()).
   ===================================================================== */

:root {
    --ana: #b71c1c;
    --link: #911414;
    --baslik: #000000;
    --yazi: #747474;
    --cizgi: #f4f4f4;
    --cizgi-koyu: #171a1c;
    --menu: #1b1e21;
    --gri: #f9f9f9;
    --header: #1b1e21;
    --koyu: #1b1e21;
    --ana-yazi: #ffffff;
    --ana-rgb: 183, 28, 28;
    --f-baslik: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
    --f-metin: "Lato", "Helvetica Neue", Arial, sans-serif;
    --kap: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    background: #fff;
    color: var(--yazi);
    font: 300 14px/24px var(--f-metin);
    letter-spacing: .5px;
    overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; border: 0; }
a { color: var(--baslik); text-decoration: none; transition: color .2s, background-color .2s, border-color .2s, opacity .2s; }
a:hover { color: var(--ana); }
h1, h2, h3, h4, h5, h6 { font-family: var(--f-baslik); color: var(--baslik); margin: 0; font-weight: 700; letter-spacing: 1px; }
p { margin: 0 0 20px; }
button, input, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

.kap { width: 100%; max-width: calc(var(--kap) + 32px); margin: 0 auto; padding: 0 16px; }
main.sayfa { display: block; min-height: 40vh; }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 40px; padding: 0 28px; border: 0; border-radius: 0;
    background: var(--ana); color: var(--ana-yazi);
    font: 700 12px/1 var(--f-baslik); letter-spacing: 1.5px; text-transform: uppercase;
}
.btn:hover { background: var(--link); color: var(--ana-yazi); }

.gizli-alan { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------------------------------------------------------------------
   ÜST: üst çubuk (gündem, tarih, sosyal), koyu ana menü, logo şeridi
   --------------------------------------------------------------------- */
.ust-cubuk { background: #fff; height: 32px; }
.ust-cubuk-ic { height: 100%; display: flex; align-items: center; }
.ticker { flex: 0 1 491px; min-width: 0; height: 100%; display: flex; align-items: center; gap: 12px; padding-right: 15px; }
.ticker-etiket {
    flex: 0 0 auto; padding: 6px 10px; background: var(--ana); color: var(--ana-yazi);
    font: 700 10px/10px var(--f-baslik); letter-spacing: 1px; text-transform: uppercase;
}
.ticker-pencere { position: relative; flex: 1; min-width: 0; height: 32px; overflow: hidden; }
.ticker-oge {
    position: absolute; left: 0; right: 0; top: 0;
    font: 700 11px/32px var(--f-metin); letter-spacing: .5px; color: #000;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    opacity: 0; transform: translateY(10px); transition: opacity .35s, transform .35s; pointer-events: none;
}
.ticker-oge.aktif { opacity: 1; transform: none; pointer-events: auto; }
.ticker-oklar { flex: 0 0 auto; display: flex; gap: 4px; }
.ticker-oklar button { width: 18px; height: 20px; border: 0; padding: 0; background: none; color: #000; font-size: 16px; display: flex; align-items: center; justify-content: center; }
.ticker-oklar button:hover { color: var(--ana); }
.ust-tarih {
    flex: 0 0 auto; height: 100%; padding: 0 22px; border-left: 1px solid #eee; border-right: 1px solid #eee;
    font: 400 12px/32px var(--f-baslik); letter-spacing: 1.2px; color: #000; white-space: nowrap;
}
.ust-sosyal { flex: 1; display: flex; justify-content: center; gap: 20px; }
.ust-sosyal a { color: #000; font-size: 13px; line-height: 32px; }
.ust-sosyal a:hover { color: var(--ana); }
.ust-baglanti { flex: 0 0 auto; height: 100%; display: flex; align-items: center; gap: 16px; padding-left: 22px; border-left: 1px solid #eee; }
.ust-baglanti a { font: 400 12px/32px var(--f-baslik); letter-spacing: 1.2px; color: var(--yazi); }
.ust-baglanti a:hover { color: var(--ana); }

.ana-menu {
    position: sticky; top: 0; z-index: 90;
    background: var(--menu); height: 46px; border-bottom: 2px solid var(--ana);
    transition: box-shadow .2s;
}
.ana-menu.yapisik { box-shadow: 0 2px 12px rgba(0, 0, 0, .25); }
.ana-menu-ic { position: relative; height: 100%; display: flex; align-items: center; }
.menu-dugme { display: none; width: 44px; height: 44px; border: 0; padding: 0; background: none; color: #fff; font-size: 26px; align-items: center; justify-content: center; }
.menu-dugme:hover { color: var(--ana); }
.menu-liste { flex: 1; list-style: none; margin: 0; padding: 0; display: flex; height: 100%; }
.menu-liste > li { position: static; height: 100%; }
.menu-liste > li:not(.mega) { position: relative; }
.menu-liste > li > a {
    position: relative; display: flex; align-items: center; gap: 4px; height: 100%; padding: 0 24px;
    font: 700 14px/1 var(--f-baslik); letter-spacing: 2px; text-transform: uppercase; color: #fff;
}
.menu-liste > li > a i { font-size: 15px; margin-left: 4px; }
.menu-liste > li.aktif > a, .menu-liste > li:hover > a { background: var(--ana); color: var(--ana-yazi); }

.logo-serit {
    position: relative; height: 180px;
    background-color: var(--header); background-size: cover; background-position: center;
    display: flex; align-items: center; justify-content: center;
}
.logo-serit-perde { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); }
.logo { position: relative; display: block; }
.logo img { max-width: 300px; max-height: 130px; width: auto; }
.menu-rozet {
    display: inline-block; margin-left: 4px; padding: 3px 5px; background: var(--ana); color: #fff;
    font: 700 9px/1 var(--f-baslik); letter-spacing: .5px; vertical-align: top;
}
.menu-rozet-2 { background: #c0392b; }

.alt-menu {
    position: absolute; top: 100%; left: 0; min-width: 220px; margin: 0; padding: 8px 0; list-style: none;
    background: #fff; border-top: 2px solid var(--ana); box-shadow: 0 8px 20px rgba(0, 0, 0, .1);
    opacity: 0; visibility: hidden; transform: translateY(8px); transition: .2s; z-index: 5;
}
.menu-liste > li:hover > .alt-menu, .menu-liste > li:focus-within > .alt-menu { opacity: 1; visibility: visible; transform: none; }
.alt-menu a {
    display: block; padding: 9px 20px;
    font: 700 13px/1.4 var(--f-baslik); letter-spacing: 1px; text-transform: uppercase; color: var(--baslik);
}
.alt-menu a:hover { color: var(--ana); padding-left: 24px; }

.mega-panel {
    position: absolute; top: 100%; left: 0; right: 0; padding: 25px 0;
    background: #fff; border-top: 2px solid var(--ana); box-shadow: 0 10px 24px rgba(0, 0, 0, .1);
    opacity: 0; visibility: hidden; transform: translateY(8px); transition: .2s; z-index: 5;
}
.menu-liste > li.mega:hover > .mega-panel, .menu-liste > li.mega:focus-within > .mega-panel { opacity: 1; visibility: visible; transform: none; }
.mega-izgara { display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px; }
.mega-kart { display: block; }
.mega-resim { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; margin-bottom: 12px; }
.mega-resim img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.mega-kart:hover img { transform: scale(1.05); }
.mega-kart b { display: block; font: 700 15px/1.3 var(--f-baslik); letter-spacing: 1px; text-transform: uppercase; color: var(--baslik); }
.mega-kart:hover b { color: var(--ana); }
.mega-kart small { display: flex; align-items: center; gap: 5px; margin-top: 6px; font: 400 11px/1 var(--f-baslik); color: #999; }
.mega-kart small i { color: var(--ana); }
.mega-tumu { display: inline-flex; align-items: center; gap: 4px; margin-top: 20px; font: 700 12px/1 var(--f-baslik); letter-spacing: 1.5px; text-transform: uppercase; color: var(--ana); }

.menu-arama {
    flex: 0 0 auto; width: 45px; height: 44px; margin-left: auto; border: 0; background: none; padding: 0; color: #fff; font-size: 17px;
}
.menu-arama:hover { background: var(--ana); }

/* sol çekmece */
.yan-menu {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 130; width: 320px; max-width: 86vw;
    background: #fff; overflow-y: auto; padding: 0 0 30px;
    transform: translateX(-102%); transition: transform .3s ease;
    box-shadow: 4px 0 24px rgba(0, 0, 0, .15);
}
body.menu-acik .yan-menu { transform: none; }
.yan-menu-bas { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; background: var(--header); }
.yan-menu-logo img { max-height: 54px; width: auto; }
.yan-menu-bas button { border: 0; background: var(--ana); color: #fff; width: 34px; height: 34px; font-size: 22px; display: flex; align-items: center; justify-content: center; }
.yan-menu > .arama-kutu { margin: 20px; }
.yan-menu-liste, .yan-menu-ek { list-style: none; margin: 0; padding: 0 20px; }
.yan-menu-liste > li { border-bottom: 1px solid var(--cizgi); }
.yan-menu-satir { display: flex; align-items: center; justify-content: space-between; }
.yan-menu-satir a { flex: 1; padding: 13px 0; font: 700 14px/1.3 var(--f-baslik); letter-spacing: 1.5px; text-transform: uppercase; }
.yan-menu-satir button { border: 0; background: none; font-size: 20px; color: var(--yazi); width: 34px; height: 34px; transition: transform .2s; }
.yan-menu-liste li.acik .yan-menu-satir button { transform: rotate(180deg); }
.yan-menu-liste ul { list-style: none; margin: 0; padding: 0 0 10px 12px; display: none; }
.yan-menu-liste li.acik > ul { display: block; }
.yan-menu-liste ul a { display: block; padding: 6px 0; font: 400 14px/1.4 var(--f-baslik); letter-spacing: 1px; color: var(--yazi); }
.yan-menu-ek { margin-top: 20px; }
.yan-menu-ek a { display: flex; align-items: center; gap: 6px; padding: 7px 0; font: 400 14px/1.4 var(--f-baslik); letter-spacing: 1px; color: var(--yazi); }
.yan-menu-ek a i { color: var(--ana); }
.yan-menu-sosyal { display: flex; flex-wrap: wrap; gap: 8px; padding: 25px 20px 0; }
.yan-menu-sosyal a { width: 35px; height: 35px; border: 1px solid #e6e6e6; display: flex; align-items: center; justify-content: center; color: var(--ana); font-size: 16px; }
.yan-menu-sosyal a:hover { background: var(--ana); border-color: var(--ana); color: #fff; }

.perde { position: fixed; inset: 0; z-index: 125; background: rgba(0, 0, 0, .6); opacity: 0; visibility: hidden; transition: .3s; }
body.menu-acik .perde { opacity: 1; visibility: visible; }
body.menu-acik { overflow: hidden; }

/* arama katmanı */
.arama-katman {
    position: fixed; inset: 0; z-index: 140; background: rgba(0, 0, 0, .92);
    display: flex; align-items: center; justify-content: center; padding: 16px;
    opacity: 0; visibility: hidden; transition: .3s;
}
body.arama-acik .arama-katman { opacity: 1; visibility: visible; }
body.arama-acik { overflow: hidden; }
.arama-kapat { position: absolute; top: 20px; right: 20px; width: 44px; height: 44px; border: 0; background: var(--ana); color: #fff; font-size: 26px; display: flex; align-items: center; justify-content: center; }
.arama-katman-form { width: 100%; max-width: 760px; }
.arama-katman-form label { display: block; margin-bottom: 18px; font: 700 26px/1.2 var(--f-baslik); letter-spacing: 2px; text-transform: uppercase; color: #fff; text-align: center; }
.arama-katman-satir { display: flex; border-bottom: 2px solid rgba(255, 255, 255, .4); }
.arama-katman-satir input { flex: 1; min-width: 0; height: 64px; border: 0; background: none; color: #fff; font: 300 26px/1 var(--f-metin); outline: 0; }
.arama-katman-satir input::placeholder { color: rgba(255, 255, 255, .45); }
.arama-katman-satir button { border: 0; background: none; color: #fff; font-size: 30px; width: 56px; }

/* ---------------------------------------------------------------------
   BÖLÜM BAŞLIĞI
   --------------------------------------------------------------------- */
.bolum { padding: 50px 0; }
.bolum + .bolum { padding-top: 0; }
.baslik-kutu { margin-bottom: 25px; }
.baslik-cizgi { border-bottom: 2px solid var(--cizgi-koyu); font-size: 18px; line-height: 1; }
.baslik-cizgi span {
    display: inline-block; margin-bottom: -2px; padding: 0 15px 12px;
    border-bottom: 2px solid var(--ana);
    font: 600 18px/1.2 var(--f-baslik); letter-spacing: 1.5px; text-transform: uppercase; color: var(--baslik);
}
h1.baslik-cizgi span { font-size: 18px; }

/* ---------------------------------------------------------------------
   KARTLAR
   --------------------------------------------------------------------- */
.kart-resim { display: block; overflow: hidden; position: relative; background: #eee; }
.kart-resim img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.kart-dikey:hover .kart-resim img, .kart-kaplama:hover .kart-resim img, .kart-yatay:hover .kart-resim img { transform: scale(1.06); }

.kart-gorsel { position: relative; overflow: hidden; }
.kart-dikey .kart-resim { aspect-ratio: 1.76; }
.kart-dikey.kart-liste .kart-resim { aspect-ratio: 1.5; }
.kart-dikey.kart-ucte .kart-resim { aspect-ratio: 1.8; }

.format-ikon { position: absolute; top: 15px; left: 15px; z-index: 2; color: #fff; font-size: 28px; line-height: 1; pointer-events: none; text-shadow: 0 1px 4px rgba(0, 0, 0, .3); }
.kat-rozet {
    position: absolute; top: 15px; right: 15px; z-index: 2;
    padding: 5px 10px; background: rgba(0, 0, 0, .4); border: 1px solid rgba(255, 255, 255, .25); border-radius: 3px;
    font: 700 9px/1 var(--f-baslik); letter-spacing: 1px; text-transform: uppercase; color: #fff;
}
.kat-rozet:hover { background: var(--ana); color: #fff; }

.kart-serit {
    display: flex; align-items: center; flex-wrap: wrap;
    font: 700 12px/1.2 var(--f-baslik); color: #fff; letter-spacing: .3px;
}
.kart-gorsel .kart-serit { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 10px 13px; background: rgba(0, 0, 0, .3); pointer-events: none; }
.meta-tarih, .meta-yorum { display: inline-flex; align-items: center; gap: 7px; }
.meta-tarih i, .meta-yorum i { font-size: 14px; }
.meta-ayrac { margin: 0 20px; }

.kart-dikey { margin-bottom: 25px; }
.kart-dikey .kart-baslik { margin-top: 18px; font-size: 24px; line-height: 1.3; text-transform: uppercase; letter-spacing: 1px; }
.kart-dikey .kart-baslik a { color: var(--baslik); }
.kart-dikey .kart-baslik a:hover { color: var(--ana); }
.kart-kucuk, .kart-genis { padding-bottom: 25px; border-bottom: 2px solid var(--cizgi); }
.kart-genis .kart-baslik { font-size: 28px; }
.kart-liste .kart-baslik { font-size: 28px; }
.kart-yarim .kart-baslik { font-size: 22px; }
.kart-ucte .kart-baslik { font-size: 18px; margin-top: 15px; }
.kart-ucte .kart-serit { font-size: 11px; }
.kart-ozet { margin: 12px 0 0; }
.kart-devam { color: var(--yazi); }

.kart-kaplama { position: relative; overflow: hidden; background: #222; }
.kart-kaplama .kart-resim { height: 100%; position: absolute; inset: 0; }
.kart-kaplama.kaplama-buyuk { height: 393px; }
.kart-kaplama.kaplama-genis { height: 385px; }
.kart-kaplama.kaplama-serit { height: 293px; }
.kart-kaplama.kaplama-dortlu { height: 219px; }
.kart-kaplama.kaplama-yan { height: 265px; }
.kaplama-alt {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 12px 13px;
    background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, .25));
}
.kaplama-buyuk .kaplama-alt { background: rgba(0, 0, 0, .3); padding: 10px 13px 12px; }
.kart-kaplama .kart-baslik { font-size: 18px; line-height: 1.25; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }
.kaplama-buyuk .kart-baslik, .kaplama-genis .kart-baslik { font-size: 32px; margin-bottom: 14px; }
.kaplama-genis .kaplama-alt { background: rgba(0, 0, 0, .3); padding: 10px 13px 12px; }
.kaplama-dortlu .kaplama-alt { background: rgba(0, 0, 0, .45); padding: 13px; }
.kaplama-dortlu .kart-baslik { margin: 0; font-size: 16px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kaplama-serit .kaplama-alt { background: rgba(0, 0, 0, .35); }
.kaplama-yan .kaplama-alt { background: none; padding: 20px; }
.kaplama-yan::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .55), transparent 60%); pointer-events: none; }
.kart-kaplama .kart-baslik a { color: #fff; }
.kart-kaplama .kart-baslik a:hover { color: #fff; opacity: .85; }

.kart-yatay { display: flex; align-items: flex-start; gap: 20px; padding: 0 0 13px; margin-bottom: 13px; border-bottom: 1px solid var(--cizgi); }
.kart-yatay:last-child { border-bottom: 0; margin-bottom: 0; }
.kart-yatay .kart-resim { flex: 0 0 115px; height: 77px; }
.kart-yatay-bilgi { min-width: 0; flex: 1; padding-top: 8px; }
.kart-yatay .kart-baslik { font-size: 14px; line-height: 1.3; text-transform: uppercase; letter-spacing: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kart-yatay .meta-tarih { margin-top: 10px; font: 400 11px/1 var(--f-baslik); color: #999; }
.kart-yatay .meta-tarih i { color: var(--ana); font-size: 13px; }
.kart-yatay .format-ikon { font-size: 20px; top: 8px; left: 8px; }
.kart-yatay.orta { border-bottom-width: 2px; padding-bottom: 25px; margin-bottom: 25px; gap: 15px; }
.kart-yatay.orta .kart-resim { flex-basis: 160px; height: 107px; }
.kart-yatay.orta .kart-yatay-bilgi { padding-top: 0; }
.kart-yatay.orta .kart-baslik { font-size: 18px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.kart-yatay.orta .meta-tarih { font-size: 12px; }

/* ---------------------------------------------------------------------
   KAYDIRICI
   --------------------------------------------------------------------- */
.kaydir { position: relative; }
.kaydir-pencere { overflow: hidden; }
.kaydir-ray { display: flex; transition: transform .6s ease; will-change: transform; }
.kaydir-oge { flex: 0 0 100%; min-width: 0; }
.kaydir[data-adet="2"] .kaydir-ray { margin: 0 -10px; }
.kaydir[data-adet="2"] .kaydir-oge { padding: 0 10px; }
.kaydir[data-adet="3"] .kaydir-ray { margin: 0 -2px; }
.kaydir[data-adet="3"] .kaydir-oge { padding: 0 2px; }
.kaydir-oklar button {
    width: 30px; height: 30px; border: 1px solid #e6e6e6; background: #fff; color: var(--baslik);
    display: inline-flex; align-items: center; justify-content: center; font-size: 18px; padding: 0;
}
.kaydir-oklar button:hover { background: var(--ana); border-color: var(--ana); color: #fff; }

.kaydir-ok-kenar .kaydir-oklar { position: absolute; inset: 0; pointer-events: none; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; }
.kaydir-ok-kenar .kaydir-oklar button { pointer-events: auto; width: 38px; height: 38px; background: rgba(0, 0, 0, .35); border: 0; color: #fff; opacity: 0; transition: .25s; }
.kaydir-ok-kenar:hover .kaydir-oklar button { opacity: 1; }
.kaydir-ok-kenar .kaydir-oklar button:hover { background: var(--ana); }
.kaydir-ok-kenar .kaydir-noktalar { position: absolute; left: 0; right: 0; bottom: 12px; justify-content: center; pointer-events: auto; }

.kaydir-ok-ust .kaydir-oklar { position: absolute; top: -52px; right: 0; display: flex; gap: 4px; }
.kaydir-ok-alt .kaydir-oklar { display: flex; align-items: center; justify-content: space-between; margin-top: 30px; }
.kaydir-noktalar { display: flex; gap: 12px; align-items: center; }
.kaydir-noktalar button { width: 7px !important; height: 7px !important; border: 0 !important; padding: 0; background: var(--baslik) !important; }
.kaydir-noktalar button.aktif { background: var(--ana) !important; box-shadow: 0 0 0 3px #fff, 0 0 0 4px #e6e6e6; }

/* ---------------------------------------------------------------------
   ANA SAYFA
   --------------------------------------------------------------------- */
/* bölüm zeminleri: gri bölümler kesik çizgiyle ayrılır */
.bolum-gri { background: var(--gri); }
.bolum-gri + .bolum, .bolum + .bolum-gri, .bolum-gri + .bolum-gri { border-top: 1px dashed #dcdcdc; }
.bolum + .bolum.bolum-gri, .bolum-gri + .bolum, .bolum-bant + .bolum, .bolum + .bolum-bant { padding-top: 50px; }

/* manşet şeridi: dört kart arası 4px */
.kaydir[data-adet="4"] .kaydir-ray { margin: 0 -2px; }
.kaydir[data-adet="4"] .kaydir-oge { padding: 0 2px; }

/* popüler + sekmeler */
.populer-izgara { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 540px); gap: 50px; align-items: start; }
.sekme-baslik { position: relative; }
.sekme-dugmeler { position: absolute; right: 0; bottom: 0; display: flex; }
.sekme-dugme {
    margin-bottom: -2px; padding: 0 9px 13px; border: 0; border-bottom: 2px solid transparent; background: none;
    font: 600 15px/1.2 var(--f-baslik); letter-spacing: 1px; text-transform: uppercase; color: var(--baslik);
}
.sekme-dugme:hover { color: var(--ana); }
.sekme-dugme.aktif { border-bottom-color: var(--ana); }
.izgara-sekme { column-gap: 25px; }
/* dar masaüstünde sekme düğmeleri başlığın altına iner */
@media (max-width: 1199px) {
    .sekme-baslik .baslik-cizgi { border-bottom: 0; }
    .sekme-dugmeler { position: static; flex-wrap: wrap; border-bottom: 2px solid var(--cizgi-koyu); margin-top: 14px; }
}
.kart-dikey.kart-sekme { margin-bottom: 25px; padding-bottom: 25px; border-bottom: 1px solid var(--cizgi-koyu); }
.kart-sekme .kart-resim { aspect-ratio: 1.34; }
.kart-sekme .kart-baslik { margin-top: 15px; font-size: 20px; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.kart-sekme .kart-serit { font-size: 11px; padding: 8px 10px; }
.kart-sekme .kat-rozet { top: 10px; right: 10px; }
.kart-sekme .format-ikon { top: 10px; left: 10px; font-size: 24px; }

/* son haberler */
.icerik-duzen { display: grid; grid-template-columns: minmax(0, 1fr) 295px; gap: 50px; align-items: start; }
.icerik-duzen.duzen-genis-yan { grid-template-columns: minmax(0, 1fr) 338px; }
.icerik-duzen.duzen-spor { grid-template-columns: minmax(0, 1fr) 353px; gap: 50px; }
.icerik-duzen.duzen-spor-genis { grid-template-columns: minmax(0, 1fr) 353px; gap: 50px; }
.son-haber-izgara { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: 25px; align-items: start; margin-bottom: 25px; }
.kart-dikey.kart-manset { margin-bottom: 0; }
.kart-manset .kart-resim { aspect-ratio: 1.33; }
.kart-manset .kart-baslik { font-size: 30px; line-height: 1.15; }
.kart-yatay.liste { gap: 12px; padding-bottom: 0; margin-bottom: 20px; border-bottom: 0; }
.kart-yatay.liste .kart-resim { flex-basis: 99px; height: 82px; }
.kart-yatay.liste .kart-yatay-bilgi { padding-top: 2px; }
.kart-yatay.liste .kart-baslik { white-space: normal; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; font-size: 14px; line-height: 1.12; }
.kart-yatay.liste .meta-tarih { margin-top: 8px; }
.bolum-son-haberler .blok-kategori { margin: 25px 0 0; }

/* yan kolondaki küçük liste: koyu ince çizgi, büyük görsel */
.widget-mini .kart-yatay { padding-bottom: 12px; margin-bottom: 12px; border-bottom-color: var(--cizgi-koyu); }
.widget-mini .kart-yatay .kart-resim { flex-basis: 141px; height: 94px; }
.widget-mini .kart-yatay-bilgi { padding-top: 12px; }
.widget-kaydir .kaydir-ok-ust .kaydir-oklar { top: -57px; gap: 2px; }
.widget-kaydir .kaydir-oklar button { width: 27px; height: 27px; border: 0; border-radius: 3px; background: var(--ana); color: #fff; font-size: 16px; }
.widget-kaydir .kaydir-oklar button:hover { background: var(--link); }

/* görselli bant */
.bolum-bant { position: relative; padding: 50px 0; background-color: var(--koyu); background-size: cover; background-position: center; }
.bolum-bant .kaydir[data-adet="3"] .kaydir-ray { margin: 0 -2px; }
.reklam-bant { margin-top: 50px; }
.reklam-bant img { width: 100%; }

/* içerik alanı */
.blok-genis-liste { margin-top: 25px; }
.kart-genis-liste { display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr); gap: 25px; align-items: start; padding-bottom: 25px; margin-bottom: 25px; border-bottom: 1px solid var(--cizgi-koyu); }
.kart-genis-liste:last-child { margin-bottom: 0; }
.kart-genis-liste .kart-resim { aspect-ratio: 1.8; }
.kart-genis-liste:hover .kart-resim img { transform: scale(1.06); }
.kart-genis-liste .kart-baslik { font-size: 28px; line-height: 1.1; text-transform: uppercase; letter-spacing: 1px; }
.kart-genis-liste .kart-baslik a { color: var(--baslik); }
.kart-genis-liste .kart-baslik a:hover { color: var(--ana); }
.kart-genis-liste .meta-tarih { margin: 12px 0 14px; font: 400 12px/1 var(--f-baslik); color: var(--yazi); }
.kart-genis-liste .meta-tarih i { color: var(--ana); }
.kart-genis-liste .kart-ozet { margin: 0; }

/* öne çıkanlar */
.one-cikan-buyuk { margin-bottom: 25px; row-gap: 25px; }
.bolum-one-cikan .kart-ucte .kart-baslik { font-size: 20px; }
.reklam-genis { margin-bottom: 50px; }
.reklam img { width: 100%; }
.reklam-kod { overflow: hidden; }
.blok-kategori { margin-bottom: 25px; }
.izgara-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 25px; }
.izgara-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 25px; }
.izgara-ozetli { margin: 30px 0 20px; }
.izgara-ozetli .kart-dikey { margin-bottom: 25px; }
.izgara-yatay .kart-yatay:last-child { border-bottom: 2px solid var(--cizgi); }
.izgara-yatay .kart-yatay:nth-last-child(-n+2) { border-bottom: 0; }
.blok-one-cikan { margin-top: 25px; }
.blok-one-cikan .kart-dikey { padding-bottom: 25px; border-bottom: 2px solid var(--cizgi); }
.bolum-widget .widget-kutu { overflow: hidden; }

/* ---------------------------------------------------------------------
   YAN KOLON
   --------------------------------------------------------------------- */
.yan-kolon { min-width: 0; }
.widget { margin-bottom: 50px; }
.widget:last-child { margin-bottom: 0; }
.widget-mini .kart-yatay { padding-bottom: 13px; }

.etiket-bulut { display: flex; flex-wrap: wrap; gap: 10px; }
.etiket-bulut a {
    display: inline-block; padding: 10px 25px; border: 1px solid var(--cizgi-koyu);
    font: 700 12px/1.2 var(--f-baslik); letter-spacing: 1px; text-transform: uppercase; color: var(--baslik);
}
.etiket-bulut a:hover { background: var(--ana); border-color: var(--ana); color: #fff; }

.arsiv-liste { list-style: none; margin: -10px 0 0; padding: 0; }
.arsiv-liste li a {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 15px 0; border-bottom: 1px solid #eee;
    font: 800 12px/1.2 var(--f-metin); letter-spacing: 1.5px; text-transform: uppercase; color: var(--baslik);
}
.arsiv-liste li a em { font-style: normal; font-weight: 700; letter-spacing: .5px; color: var(--baslik); }
.arsiv-liste li a:hover, .arsiv-liste li.aktif a, .arsiv-liste li.aktif a em, .arsiv-liste li a:hover em { color: var(--ana); }
.arsiv-tumu { display: inline-flex; align-items: center; gap: 4px; margin-top: 15px; font: 700 12px/1 var(--f-baslik); letter-spacing: 1.5px; text-transform: uppercase; color: var(--ana); }

.arama-kutu { display: flex; }
.arama-kutu input {
    flex: 1; min-width: 0; height: 35px; border: 0; padding: 0 10px; background: var(--cizgi);
    font: 400 14px/1 var(--f-baslik); color: var(--baslik); outline: 0;
}
.arama-kutu input::placeholder { color: #999; }
.arama-kutu button {
    flex: 0 0 auto; min-width: 88px; height: 35px; border: 0; padding: 0 14px; background: var(--ana); color: #fff;
    font: 700 12px/1 var(--f-baslik); letter-spacing: .5px;
}
.arama-kutu button:hover { background: var(--link); }

/* ---------------------------------------------------------------------
   LİSTE SAYFALARI
   --------------------------------------------------------------------- */
.liste-aciklama { margin: -5px 0 30px; }
.bolum-liste .izgara-2 .kart-dikey { margin-bottom: 40px; }
.sayfalama { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.sayfalama a {
    min-width: 38px; height: 38px; padding: 0 10px; border: 2px solid var(--cizgi);
    display: inline-flex; align-items: center; justify-content: center;
    font: 700 14px/1 var(--f-baslik); color: var(--baslik);
}
.sayfalama a:hover, .sayfalama a.aktif { background: var(--ana); border-color: var(--ana); color: #fff; }
.sayfalama a.pasif { opacity: .35; pointer-events: none; }
.bos-durum { padding: 50px 20px; text-align: center; border: 2px solid var(--cizgi); }
.bos-durum > i { font-size: 44px; color: var(--ana); }
.bos-durum p { margin: 10px 0 0; }
.bos-durum-buyuk .dort { display: block; font: 700 110px/1 var(--f-baslik); color: var(--ana); letter-spacing: 4px; }
.bos-durum-buyuk h1 { margin: 10px 0 10px; font-size: 28px; text-transform: uppercase; }
.bos-durum-buyuk .arama-kutu { max-width: 420px; margin: 25px auto; }

/* arşivler sayfası */
.arsiv-yil { margin-bottom: 40px; }
.arsiv-yil-baslik { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-bottom: 12px; margin-bottom: 20px; border-bottom: 2px solid var(--cizgi); font-size: 34px; }
.arsiv-yil-baslik em { font: 700 13px/1 var(--f-baslik); font-style: normal; letter-spacing: 1px; text-transform: uppercase; color: var(--ana); }
.arsiv-aylar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 25px; }
.arsiv-ay { border: 2px solid var(--cizgi); padding: 18px 20px; }
.arsiv-ay-baslik { display: flex; justify-content: space-between; padding-bottom: 12px; margin-bottom: 8px; border-bottom: 1px solid #eee; font: 800 13px/1.2 var(--f-metin); letter-spacing: 1.5px; text-transform: uppercase; }
.arsiv-ay-baslik em { font-style: normal; color: var(--ana); }
.arsiv-ay ul { list-style: none; margin: 0; padding: 0; }
.arsiv-ay li { display: flex; gap: 12px; padding: 6px 0; }
.arsiv-ay li time { flex: 0 0 26px; font: 700 13px/22px var(--f-baslik); color: var(--ana); }
.arsiv-ay li a { font: 500 14px/22px var(--f-baslik); letter-spacing: .5px; color: var(--baslik); }
.arsiv-ay li a:hover { color: var(--ana); }
.arsiv-ay-tumu { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; font: 700 11px/1 var(--f-baslik); letter-spacing: 1.5px; text-transform: uppercase; color: var(--ana); }

/* ---------------------------------------------------------------------
   YAZI DETAY
   --------------------------------------------------------------------- */
.yazi-kapak-alan {
    position: relative; height: 500px; background-color: var(--header); background-size: cover; background-position: center;
    display: flex; align-items: center; justify-content: center; text-align: center;
}
.yazi-kapak-perde { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); }
.yazi-kapak-ic { position: relative; }
.yazi-kapak-ic h1 { font-size: 40px; line-height: 1.2; text-transform: uppercase; color: #fff; letter-spacing: 1px; max-width: 900px; margin: 0 auto; }
.yazi-meta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin-top: 35px; font: 700 13px/1.2 var(--f-baslik); letter-spacing: 1px; text-transform: uppercase; color: #fff; }
.yazi-meta > span:not(.meta-ayrac), .yazi-meta a { display: inline-flex; align-items: center; gap: 9px; color: #fff; }
.yazi-meta a:hover { color: var(--ana); }
.yazi-meta i { font-size: 16px; }
.yazi-meta .meta-ayrac { margin: 0 25px; }

.bolum-yazi { padding-top: 50px; }
.yazi-govde { min-width: 0; }
.yazi-video { position: relative; aspect-ratio: 16 / 9; margin-bottom: 30px; background: #000; }
.yazi-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yazi-galeri { margin-bottom: 30px; }
.yazi-galeri img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.yazi-kapak { margin-bottom: 30px; }
.yazi-kapak img { width: 100%; }

.icerik-metin { color: var(--yazi); word-wrap: break-word; }
.icerik-metin::after { content: ""; display: table; clear: both; }
.icerik-metin p { margin: 0 0 25px; }
.icerik-metin h2, .icerik-metin h3, .icerik-metin h4 { margin: 35px 0 18px; text-transform: uppercase; }
.icerik-metin h2 { font-size: 26px; }
.icerik-metin h3 { font-size: 22px; }
.icerik-metin h4 { font-size: 18px; }
.icerik-metin a { color: var(--link); font-weight: 700; }
.icerik-metin a:hover { color: var(--ana); }
.icerik-metin strong, .icerik-metin b { font-weight: 700; color: #000; }
.icerik-metin ul, .icerik-metin ol { margin: 10px 0 35px; padding-left: 45px; }
.icerik-metin ul { list-style: none; }
.icerik-metin ul li { position: relative; font-weight: 700; color: #000; }
.icerik-metin ul li::before { content: "—"; position: absolute; left: -22px; color: var(--yazi); font-weight: 300; }
.icerik-metin ol li { font-weight: 700; color: #000; }
.icerik-metin img { margin: 10px 0 25px; }
.icerik-metin figure { margin: 0 0 25px; }
.icerik-metin figcaption { font-size: 12px; text-align: center; margin-top: -15px; }
.icerik-metin .resim-ikili { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-bottom: 25px; }
.icerik-metin .resim-ikili img { margin: 0; width: 100%; aspect-ratio: 1.57; object-fit: cover; }
.icerik-metin blockquote {
    position: relative; margin: 10px 0 30px 54px; padding: 0 0 0 90px; min-height: 60px;
    font: 700 14px/24px var(--f-metin); color: #000;
}
.icerik-metin blockquote::before {
    content: "\ee32"; font-family: "boxicons"; font-weight: 400;
    position: absolute; left: 0; top: 2px; width: 60px; height: 60px; background: var(--ana); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 30px;
}
.icerik-metin blockquote p { margin: 0 0 10px; }
.icerik-metin blockquote p:last-child { margin: 0; }
.icerik-metin table { width: 100%; border-collapse: collapse; margin-bottom: 25px; }
.icerik-metin th, .icerik-metin td { border: 1px solid #eee; padding: 8px 12px; text-align: left; }
.icerik-metin iframe { max-width: 100%; }

.yazi-etiketler { margin: 15px 0 45px; font: 400 14px/1.6 var(--f-baslik); }
.yazi-etiketler b { font-weight: 400; color: var(--yazi); margin-right: 4px; }
.yazi-etiketler a { font-weight: 700; color: var(--baslik); }
.yazi-etiketler a:hover { color: var(--ana); }

.paylas { display: flex; align-items: center; gap: 30px; margin-bottom: 40px; }
.paylas::before, .paylas::after { content: ""; flex: 1; border-top: 1px solid #eee; }
.paylas-ic { display: flex; gap: 33px; }
.paylas-ic a { width: 35px; height: 35px; border: 1px solid #eee; display: flex; align-items: center; justify-content: center; color: var(--ana); font-size: 16px; }
.paylas-ic a:hover { background: var(--ana); border-color: var(--ana); color: #fff; }

.yazi-komsu { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid #eee; margin-bottom: 45px; }
.komsu { display: flex; align-items: center; gap: 25px; min-height: 60px; min-width: 0; }
.komsu-sonraki { justify-content: flex-end; text-align: right; border-left: 1px solid #eee; }
.komsu-resim { flex: 0 0 60px; width: 60px; height: 60px; overflow: hidden; }
.komsu-resim img { width: 100%; height: 100%; object-fit: cover; }
.komsu-bilgi { min-width: 0; padding: 4px 0; }
.komsu-bilgi small { display: inline-flex; align-items: center; gap: 6px; font: 400 14px/1.2 var(--f-baslik); color: var(--yazi); letter-spacing: .5px; }
.komsu-bilgi b { display: block; margin-top: 5px; font: 700 14px/1.3 var(--f-baslik); letter-spacing: 1px; text-transform: uppercase; color: var(--baslik); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.komsu:hover b { color: var(--ana); }

.yazar-kutu { display: flex; gap: 25px; padding: 25px; margin-bottom: 45px; border: 2px solid var(--cizgi); }
.yazar-kutu > img, .yazar-kutu > .yorum-avatar { flex: 0 0 90px; width: 90px; height: 90px; border-radius: 50%; object-fit: cover; font-size: 30px; }
.yazar-kutu small { display: block; font: 700 11px/1 var(--f-baslik); letter-spacing: 1.5px; text-transform: uppercase; color: var(--ana); }
.yazar-kutu b { display: block; margin: 6px 0 8px; font: 700 18px/1.2 var(--f-baslik); letter-spacing: 1px; text-transform: uppercase; color: var(--baslik); }
.yazar-kutu p { margin: 0; }

.yazi-ilgili { margin-bottom: 50px; }
.yazi-ilgili .kart-dikey { margin-bottom: 0; }

/* yorumlar */
.yorumlar .baslik-kutu { margin-top: 10px; }
.yorum-liste { list-style: none; margin: 0 0 40px; padding: 0; }
.yorum-liste .yorum-liste { margin: 0 0 0 70px; }
.yorum-kutu { display: flex; gap: 20px; padding: 22px 0; border-bottom: 1px solid #eee; }
.yorum-avatar { flex: 0 0 55px; width: 55px; height: 55px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font: 700 18px/1 var(--f-baslik); letter-spacing: 1px; }
.yorum-icerik { flex: 1; min-width: 0; }
.yorum-ust { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 8px; }
.yorum-ad { font: 700 15px/1.2 var(--f-baslik); letter-spacing: 1px; text-transform: uppercase; color: var(--baslik); }
.yazar-rozet { display: inline-block; margin-left: 6px; padding: 3px 7px; background: var(--ana); color: #fff; font-size: 10px; letter-spacing: 1px; vertical-align: middle; }
.yorum-ust time { font: 400 12px/1 var(--f-baslik); color: #999; }
.yorum-metin { margin-bottom: 6px; }
.yorum-cevapla { display: inline-flex; align-items: center; gap: 4px; font: 700 12px/1 var(--f-baslik); letter-spacing: 1px; text-transform: uppercase; color: var(--ana); }
.yorum-not { margin: -5px 0 20px; font-size: 13px; }
.yorum-cevap-bilgi { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding: 10px 14px; margin-bottom: 15px; background: var(--cizgi); font: 400 14px/1.4 var(--f-baslik); }
.yorum-cevap-bilgi b { color: var(--baslik); }
.yorum-cevap-bilgi a { color: var(--ana); font-weight: 700; }
.yorum-form { display: grid; gap: 15px; }
.yorum-form-satir { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.yorum-form input, .yorum-form textarea {
    width: 100%; border: 0; background: var(--cizgi); padding: 0 14px; height: 44px;
    font: 400 14px/1.5 var(--f-metin); color: var(--baslik); outline: 0; border-radius: 0;
}
.yorum-form textarea { height: auto; padding: 12px 14px; resize: vertical; min-height: 150px; }
.yorum-form input:focus, .yorum-form textarea:focus { box-shadow: inset 0 0 0 1px var(--ana); }
.yorum-form .btn { justify-self: start; }
.yorum-kapali { padding: 15px 0; font-style: italic; }

.uyari { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; margin-bottom: 20px; font: 400 14px/1.5 var(--f-metin); }
.uyari i { font-size: 20px; line-height: 1.1; }
.uyari-basari { background: #eaf5ee; color: #2e7d4f; }
.uyari-hata { background: #fbecec; color: #b03a3a; }

/* iletişim */
.iletisim-bilgi { display: grid; gap: 12px; margin: 0 0 40px; font: 400 15px/1.5 var(--f-baslik); color: var(--baslik); }
.iletisim-bilgi > div { display: flex; gap: 12px; align-items: flex-start; }
.iletisim-bilgi i { color: var(--ana); font-size: 18px; line-height: 1.3; }
.harita { margin-top: 40px; aspect-ratio: 16 / 8; background: var(--cizgi); }
.harita iframe { width: 100%; height: 100%; border: 0; }

/* ---------------------------------------------------------------------
   FOOTER
   --------------------------------------------------------------------- */
.footer { position: relative; background-color: #111; background-size: cover; background-position: center; color: #b7b7b7; }
.footer-perde { position: absolute; inset: 0; background: rgba(0, 0, 0, .9); }
.footer-ust { position: relative; display: grid; grid-template-columns: 360px 362px minmax(0, 1fr); gap: 50px; padding-top: 60px; padding-bottom: 60px; }
.footer-logo { display: inline-block; margin-bottom: 25px; }
.footer-logo img { max-width: 160px; max-height: 70px; width: auto; }
.footer-hakkinda p { margin: 0 0 25px; padding-bottom: 25px; border-bottom: 1px solid rgba(255, 255, 255, .15); }
.footer-hakkinda h4 { margin-bottom: 15px; font-size: 22px; color: #fff; letter-spacing: .5px; }
.footer-bilgi { list-style: none; margin: 0; padding: 0; font: 400 14px/1.8 var(--f-baslik); letter-spacing: .5px; }
.footer-bilgi li { display: flex; gap: 10px; align-items: flex-start; }
.footer-bilgi i { color: var(--ana); font-size: 14px; line-height: 25px; }
.footer-bilgi a { color: #b7b7b7; }
.footer-bilgi a:hover { color: #fff; }
.footer-baslik { margin: 0 0 25px; font: 500 20px/1.2 var(--f-baslik); letter-spacing: 1px; text-transform: uppercase; color: #fff; }
.footer-yazi { display: flex; gap: 20px; align-items: flex-start; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, .15); }
.footer-yazi:last-child { border-bottom: 0; }
.footer-yazi-resim { flex: 0 0 109px; height: 72px; overflow: hidden; }
.footer-yazi-resim img { width: 100%; height: 100%; object-fit: cover; }
.footer-yazi > div { min-width: 0; padding-top: 6px; }
.footer-yazi h5 { font: 700 14px/1.3 var(--f-baslik); letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.footer-yazi h5 a { color: #fff; }
.footer-yazi h5 a:hover { color: var(--ana); }
.footer-yazi .meta-tarih { margin-top: 12px; font: 400 11px/1 var(--f-baslik); color: #999; }
.footer-yazi .meta-tarih i { color: var(--ana); }
.footer-galeri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.footer-galeri a { display: block; aspect-ratio: 1; overflow: hidden; }
.footer-galeri img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s, opacity .3s; }
.footer-galeri a:hover img { transform: scale(1.08); opacity: .8; }

.footer-alt { background: #000; color: #b7b7b7; }
.footer-alt-ic { min-height: 42px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 15px; padding-top: 8px; padding-bottom: 8px; }
.footer-telif { font: 400 12px/1.4 var(--f-baslik); letter-spacing: 1px; }
.footer-sosyal { display: flex; gap: 18px; justify-content: center; }
.footer-sosyal a { color: #b7b7b7; font-size: 14px; }
.footer-sosyal a:hover { color: #fff; }
.footer-menu { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 15px; }
.footer-menu a { font: 700 13px/1.4 var(--f-baslik); letter-spacing: 1px; color: #b7b7b7; }
.footer-menu a:hover { color: #fff; }

.yukari {
    position: fixed; right: 37px; bottom: 40px; z-index: 80; width: 44px; height: 44px; border: 0; padding: 0;
    background: var(--ana); color: #fff; font-size: 24px; display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; transform: translateY(10px); transition: .3s;
}
.yukari.gorunur { opacity: 1; visibility: visible; transform: none; }
.yukari:hover { background: var(--link); }

/* ---------------------------------------------------------------------
   DUYARLI
   --------------------------------------------------------------------- */
@media (max-width: 1199px) {
    .populer-izgara { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 35px; }
    .icerik-duzen, .icerik-duzen.duzen-genis-yan, .icerik-duzen.duzen-spor, .icerik-duzen.duzen-spor-genis { grid-template-columns: minmax(0, 1fr) 300px; gap: 35px; }
    .footer-ust { grid-template-columns: 1fr 1fr 1fr; gap: 35px; }
    .kaplama-buyuk .kart-baslik, .kaplama-genis .kart-baslik { font-size: 26px; }
    .menu-liste > li > a { padding: 0 16px; letter-spacing: 1.5px; }
    .ust-sosyal { gap: 14px; }
    .kart-genis-liste .kart-baslik { font-size: 24px; }
}

@media (max-width: 991px) {
    .menu-liste { display: none; }
    .menu-dugme { display: flex; }
    .ana-menu-ic { justify-content: space-between; }
    .ust-baglanti { display: none; }
    .populer-izgara { grid-template-columns: minmax(0, 1fr); gap: 50px; }
    .icerik-duzen, .icerik-duzen.duzen-genis-yan, .icerik-duzen.duzen-spor, .icerik-duzen.duzen-spor-genis { grid-template-columns: minmax(0, 1fr); gap: 50px; }
    .yan-kolon { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 30px; align-items: start; }
    .yan-kolon .widget { margin-bottom: 40px; }
    .footer-ust { grid-template-columns: 1fr 1fr; }
    .footer-galeri-kolon { grid-column: 1 / -1; }
    .footer-galeri { grid-template-columns: repeat(6, 1fr); }
}

@media (max-width: 767px) {
    body { font-size: 14px; }
    .logo-serit { height: 120px; }
    .logo img { max-width: 220px; max-height: 90px; }
    .ust-tarih, .ust-sosyal { display: none; }
    .ticker { flex: 1; padding-right: 0; }

    .bolum { padding: 35px 0; }
    .bolum + .bolum.bolum-gri, .bolum-gri + .bolum, .bolum-bant + .bolum, .bolum + .bolum-bant { padding-top: 35px; }
    .bolum-bant { padding: 35px 0; }
    .reklam-bant { margin-top: 30px; }
    .kart-kaplama.kaplama-buyuk, .kart-kaplama.kaplama-genis { height: 280px; }
    .kaplama-buyuk .kart-baslik, .kaplama-genis .kart-baslik { font-size: 22px; }
    .kart-dikey .kart-baslik, .kart-genis .kart-baslik, .kart-liste .kart-baslik, .kart-manset .kart-baslik { font-size: 22px; }
    .meta-ayrac { margin: 0 12px; }

    .izgara-2, .izgara-3, .yorum-form-satir, .arsiv-aylar { grid-template-columns: minmax(0, 1fr); }
    .izgara-sekme { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 15px; }
    .kart-sekme .kart-baslik { font-size: 17px; }
    .sekme-baslik .baslik-cizgi { border-bottom: 0; }
    .sekme-dugmeler { position: static; flex-wrap: wrap; border-bottom: 2px solid var(--cizgi-koyu); margin-top: 18px; }
    .sekme-dugme { font-size: 14px; padding: 0 10px 10px; }
    .son-haber-izgara { grid-template-columns: minmax(0, 1fr); }
    .kart-genis-liste { grid-template-columns: minmax(0, 1fr); gap: 15px; }
    .kart-genis-liste .kart-baslik { font-size: 22px; }
    .izgara-yatay .kart-yatay:nth-last-child(2) { border-bottom: 2px solid var(--cizgi); }
    .kart-yatay.orta .kart-resim { flex-basis: 120px; height: 85px; }
    .kart-yatay.orta .kart-baslik { font-size: 16px; }
    .yan-kolon { grid-template-columns: minmax(0, 1fr); }

    .yazi-kapak-alan { height: 340px; }
    .yazi-kapak-ic h1 { font-size: 26px; }
    .yazi-meta { margin-top: 20px; font-size: 11px; gap: 6px 0; }
    .yazi-meta .meta-ayrac { margin: 0 12px; }
    .icerik-metin blockquote { margin-left: 0; padding-left: 75px; }
    .icerik-metin ul, .icerik-metin ol { padding-left: 30px; }
    .icerik-metin .resim-ikili { grid-template-columns: 1fr; gap: 15px; }
    .paylas { gap: 15px; }
    .paylas-ic { gap: 10px; }
    .yazi-komsu { grid-template-columns: minmax(0, 1fr); }
    .komsu-sonraki { border-left: 0; border-top: 1px solid #eee; }
    .komsu { gap: 15px; }
    .yazar-kutu { flex-direction: column; }
    .yorum-liste .yorum-liste { margin-left: 25px; }
    .yorum-avatar { flex-basis: 44px; width: 44px; height: 44px; font-size: 15px; }

    .footer-ust { grid-template-columns: minmax(0, 1fr); padding-top: 45px; padding-bottom: 45px; }
    .footer-galeri { grid-template-columns: repeat(3, 1fr); }
    .footer-alt-ic { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
    .footer-menu { justify-content: center; }
    .yukari { right: 16px; bottom: 16px; width: 40px; height: 40px; }
    .bos-durum-buyuk .dort { font-size: 80px; }
}