:root{
    --bg0:#070A12;
    --bg1:#0B1020;
    --panel: rgba(255,255,255,.06);
    --panel2: rgba(255,255,255,.09);
    --card: rgba(255,255,255,.07);

    --text:#EAF0FF;
    --muted:#A8B3CF;
    --muted2:#7E89A6;
    --border: rgba(255,255,255,.10);

    --brand:#7CFFCB;
    --brand2:#8AA7FF;
    --warn:#FFC36A;
    --shadow: 0 18px 55px rgba(0,0,0,.55);
    --shadow2: 0 26px 90px rgba(0,0,0,.62);

    --r:18px;
    --r2:14px;
    --ease:cubic-bezier(.22,1,.36,1);

    --tap: 44px;
}

/* ===== Light theme overrides (Beyaz tema) ===== */
html[data-theme="light"]{
    --bg0:#F7F8FC;
    --bg1:#EDEFF7;
    --panel: rgba(15,23,42,.06);
    --panel2: rgba(15,23,42,.08);
    --card: rgba(255,255,255,.85);

    --text:#0F172A;
    --muted:#475569;
    --muted2:#64748B;
    --border: rgba(15,23,42,.12);

    --brand:#0B5FFF;
    --brand2:#00A67E;
    --warn:#B45309;
    --shadow: 0 18px 55px rgba(15, 23, 42, .12);
    --shadow2: 0 26px 90px rgba(15, 23, 42, .18);
}

html[data-theme="light"] body{
    background:
            radial-gradient(900px 520px at 18% 6%, rgba(11,95,255,.16), transparent 55%),
            radial-gradient(820px 520px at 85% 18%, rgba(0,166,126,.12), transparent 58%),
            radial-gradient(700px 420px at 55% 110%, rgba(180,83,9,.08), transparent 60%),
            linear-gradient(180deg, var(--bg0), var(--bg1));
}

html[data-theme="light"] header,
html[data-theme="light"] footer{
    background: rgba(255,255,255,.72);
    border-color: rgba(15,23,42,.10);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
}

html[data-theme="light"] .card{
    background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.86));
    border-color: rgba(15,23,42,.10);
}

html[data-theme="light"] .details{
    border-top-color: rgba(15,23,42,.10);
    background:
            radial-gradient(700px 260px at 12% 0%, rgba(11,95,255,.08), transparent 55%),
            radial-gradient(700px 260px at 92% 100%, rgba(0,166,126,.06), transparent 60%),
            linear-gradient(180deg, rgba(15,23,42,.02), rgba(15,23,42,.01));
}

html[data-theme="light"] .newsLink{
    border-color: rgba(11,95,255,.28);
    background: linear-gradient(180deg, rgba(11,95,255,.12), rgba(0,166,126,.08));
    color: rgba(15,23,42,.95);
}

*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }

body{
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color: var(--text);
    display:flex;
    flex-direction:column;
    overflow:hidden;

    background:
            radial-gradient(900px 520px at 18% 6%, rgba(138,167,255,.22), transparent 55%),
            radial-gradient(820px 520px at 85% 18%, rgba(124,255,203,.18), transparent 58%),
            radial-gradient(700px 420px at 55% 110%, rgba(255,195,106,.10), transparent 60%),
            linear-gradient(180deg, var(--bg0), var(--bg1));
}

header{
    position: sticky;
    top: 0;
    min-height: 72px; /* CLS riskini azaltır */
    z-index: 10;
    background: rgba(9,12,24,.72);
    border-bottom: 1px solid rgba(255,255,255,.10);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    padding: calc(12px + env(safe-area-inset-top)) 16px 12px 16px;
}

.head{
    max-width: 980px;
    margin: 0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 12px;
}

.brand{
    display:flex;
    align-items:center;
    gap: 12px;
    min-width:0;
}

.logo{
    width:30px; height:30px;
    flex:0 0 auto;
    display:block;
    filter:
            drop-shadow(0 10px 22px rgba(0,0,0,.55))
            drop-shadow(0 0 20px rgba(124,255,203,.14));
}

.brandTitle{
    display:flex;
    flex-direction:column;
    min-width:0;
}

.brand h1{
    margin:0;
    font-size: 18px;
    font-weight: 950;
    letter-spacing: .2px;
    line-height: 1.05;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.sub{
    margin:3px 0 0 0;
    font-size: 12px;
    color: var(--muted);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

main{
    flex: 1 1 auto;
    overflow:auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px 0 calc(14px + 86px) 0;
    scroll-behavior: smooth;
}

.wrap{
    width: min(980px, calc(100% - 24px));
    margin: 0 auto;
}

.list{
    display:flex;
    flex-direction:column;
    gap: 12px;
}

.card{
    background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.055));
    border: 1px solid rgba(255,255,255,.10);
    border-radius: var(--r);
    box-shadow: var(--shadow);
    overflow:hidden;
    user-select:none;
    transform: translateZ(0);
    transition: transform 170ms var(--ease), box-shadow 220ms var(--ease), border-color 220ms var(--ease);
    position: relative;
    scroll-margin-top: 88px;
}

.card::before{
    content:"";
    position:absolute;
    left:0; top:0; bottom:0;
    width: 3px;
    background: linear-gradient(180deg, rgba(138,167,255,.0), rgba(138,167,255,.55), rgba(124,255,203,.55), rgba(124,255,203,.0));
    opacity: .35;
    pointer-events:none;
}

.card:hover{
    transform: translateY(-2px);
    box-shadow: var(--shadow2);
    border-color: rgba(138,167,255,.22);
}

.card[data-open="1"]{
    border-color: rgba(124,255,203,.28);
    box-shadow: var(--shadow2);
}
.card[data-open="1"]::before{ opacity: .75; }

.row{
    display:grid;
    grid-template-columns: 84px 1fr auto;
    gap: 12px;
    padding: 12px 12px;
    align-items:center;
    cursor:pointer;
    outline: none;
    min-height: var(--tap);
}

.row:focus-visible{
    outline: 2px solid rgba(138,167,255,.55);
    outline-offset: 3px;
    border-radius: calc(var(--r) - 6px);
}

.thumb{
    width: 84px;
    height: 84px;
    border-radius: var(--r2);
    overflow:hidden;
    border: 1px solid rgba(255,255,255,.10);
    background:
            radial-gradient(110px 80px at 28% 26%, rgba(138,167,255,.30), transparent 60%),
            radial-gradient(120px 90px at 78% 72%, rgba(124,255,203,.22), transparent 62%),
            linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
    box-shadow: 0 14px 35px rgba(0,0,0,.45);
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight: 950;
    letter-spacing: .8px;
    color: rgba(234,240,255,.78);
    position: relative;
}

.thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    user-select:none;
    -webkit-user-drag:none;
    transform: scale(1.03);
    filter: saturate(1.05) contrast(1.05);
}

.thumb::after{
    content:"";
    position:absolute;
    inset:0;
    background:
            radial-gradient(120px 100px at 20% 10%, rgba(255,255,255,.12), transparent 55%),
            linear-gradient(180deg, rgba(0,0,0,.00), rgba(0,0,0,.28));
    pointer-events:none;
}

.title{
    margin:0;
    font-size: 16px;
    line-height: 1.22;
    font-weight: 950;
    letter-spacing: .15px;
    color: var(--text);
    word-break: break-word;
}

.chev{
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
    display:flex;
    align-items:center;
    justify-content:center;
    color: rgba(234,240,255,.85);
    transition: transform 180ms var(--ease), border-color 180ms var(--ease), background 180ms var(--ease);
    flex: 0 0 auto;
    box-shadow: 0 10px 25px rgba(0,0,0,.35);
}

/* Light theme: chevron button + arrow must be dark enough */
html[data-theme="light"] .chev{
    border-color: rgba(15,23,42,.12);
    background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.80));
    color: rgba(15,23,42,.90);
    box-shadow: 0 10px 25px rgba(15,23,42,.12);
}

.chev svg{
    width: 18px;
    height: 18px;
    display:block;
    opacity: .9;
}

.card[data-open="1"] .chev{
    transform: rotate(180deg);
    border-color: rgba(124,255,203,.30);
    background: linear-gradient(180deg, rgba(124,255,203,.18), rgba(138,167,255,.10));
}

html[data-theme="light"] .card[data-open="1"] .chev{
    border-color: rgba(11,95,255,.28);
    background: linear-gradient(180deg, rgba(11,95,255,.12), rgba(0,166,126,.08));
    color: rgba(15,23,42,.92);
}

.details{
    max-height: 0px;
    overflow:hidden;
    opacity: 0;
    transition: max-height 260ms var(--ease), opacity 180ms var(--ease);
    border-top: 1px solid rgba(255,255,255,.10);
    background:
            radial-gradient(700px 260px at 12% 0%, rgba(138,167,255,.12), transparent 55%),
            radial-gradient(700px 260px at 92% 100%, rgba(124,255,203,.10), transparent 60%),
            linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
}

.card[data-open="1"] .details{ opacity: 1; }

.detailsInner{
    padding: 12px 12px 14px 12px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.68;
    word-break: break-word;
}

.detailsInner::first-letter{
    color: rgba(234,240,255,.92);
    font-weight: 800;
}
/* Light theme: first letter should be dark (otherwise it disappears) */
html[data-theme="light"] .detailsInner::first-letter{
    color: rgba(15,23,42,.92);
}

.detailsActions{
    margin-top: 12px;
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.newsLink{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding: 10px 12px;
    border-radius: 999px;
    border: 1px solid rgba(124,255,203,.30);
    background: linear-gradient(180deg, rgba(124,255,203,.16), rgba(138,167,255,.10));
    color: rgba(234,240,255,.96);
    text-decoration:none;
    font-weight: 900;
    font-size: 13px;
    box-shadow: 0 14px 30px rgba(0,0,0,.35);
    transition: transform 140ms var(--ease), filter 160ms var(--ease), border-color 160ms var(--ease);
    min-height: var(--tap);
}

.newsLink:hover{
    filter: brightness(1.06);
    border-color: rgba(138,167,255,.35);
}

.newsLink:active{
    transform: translateY(1px) scale(0.99);
}

footer{
    position: sticky;
    bottom: 0;
    z-index: 10;
    background: rgba(9,12,24,.72);
    border-top: 1px solid rgba(255,255,255,.10);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom)) 16px;
    font-size: 12px;
    color: var(--muted2);
    text-align:center;
}

.status{
    margin: 10px 0 0 0;
    padding: 10px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.05);
    color: var(--muted2);
    font-size: 12px;
    text-align:center;
    user-select:none;
}

#sentinel{
    height: 1px;
    width: 100%;
}

/* ===== Skeleton (LCP iyileştirme) ===== */
.skelCard{ pointer-events:none; }
.skelRow{ cursor: default; }
.skelLine{
    height: 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    position: relative;
    overflow: hidden;
}
.skelLine.lg{ height: 18px; }
.skelLine::after{
    content:"";
    position:absolute;
    inset:0;
    transform: translateX(-60%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
    animation: skelShimmer 1.2s linear infinite;
}
@keyframes skelShimmer{ to{ transform: translateX(60%); } }
.skelThumb{
    width: 84px;
    height: 84px;
    border-radius: var(--r2);
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.06);
    position: relative;
    overflow: hidden;
}
.skelThumb::after{
    content:"";
    position:absolute;
    inset:0;
    transform: translateX(-60%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
    animation: skelShimmer 1.2s linear infinite;
}

/* ===== Ad card styling ===== */
.adCard{ user-select: none; }
.adRow{ padding: 12px; }
.adLabel{
    font-size: 11px;
    color: var(--muted2);
    letter-spacing: .2px;
    margin: 0 0 10px 0;
    display:flex;
    align-items:center;
    gap:8px;
    opacity: .95;
}
.adDot{
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: rgba(255,195,106,.85);
    box-shadow: 0 0 18px rgba(255,195,106,.20);
    flex: 0 0 auto;
}
.adBox{
    border: 1px dashed rgba(255,255,255,.16);
    border-radius: var(--r2);
    padding: 10px;
    background: rgba(255,255,255,.03);
    overflow: hidden;
    /* CLS azaltmak için reklam alanına baştan yer ayır */
    min-height: 280px;
}
/* ===== Header weather pill ===== */
.weather{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding: 8px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.06);
    color: rgba(234,240,255,.92);
    font-weight: 900;
    font-size: 12px;
    line-height: 1;
    box-shadow: 0 12px 28px rgba(0,0,0,.28);
    user-select:none;
    white-space: nowrap;
    max-width: min(420px, 46vw);
    overflow:hidden;
    text-overflow: ellipsis;
}

.wDot{
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: rgba(124,255,203,.85);
    box-shadow: 0 0 18px rgba(124,255,203,.20);
    flex: 0 0 auto;
}

.wText{
    overflow:hidden;
    text-overflow: ellipsis;
}

/* ===== Header FX pill ===== */
.fxBox{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding: 8px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.06);
    color: rgba(234,240,255,.92);
    font-weight: 900;
    font-size: 11px;
    line-height: 1.1;
    box-shadow: 0 12px 28px rgba(0,0,0,.28);
    user-select:none;
    white-space: nowrap;
    max-width: min(420px, 46vw);
    overflow:hidden;
    text-overflow: ellipsis;
}

.fxDot{
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: rgba(138,167,255,.85);
    box-shadow: 0 0 18px rgba(138,167,255,.20);
    flex: 0 0 auto;
}

.fxText{
    display:flex;
    flex-direction: column;
    gap: 2px;
}

.fxLine{
    display:block;
    line-height: 1.1;
}

.weather[data-ok="0"] .wDot{
    background: rgba(255,195,106,.85);
    box-shadow: 0 0 18px rgba(255,195,106,.20);
}

html[data-theme="light"] .weather{
    border-color: rgba(15,23,42,.12);
    background: rgba(255,255,255,.80);
    color: rgba(15,23,42,.92);
    box-shadow: 0 12px 28px rgba(15,23,42,.10);
}

html[data-theme="light"] .wDot{
    background: rgba(11,95,255,.78);
    box-shadow: 0 0 18px rgba(11,95,255,.14);
}

html[data-theme="light"] .fxBox{
    border-color: rgba(15,23,42,.12);
    background: rgba(255,255,255,.80);
    color: rgba(15,23,42,.92);
    box-shadow: 0 12px 28px rgba(15,23,42,.10);
}

html[data-theme="light"] .fxDot{
    background: rgba(124,255,203,.80);
    box-shadow: 0 0 18px rgba(124,255,203,.12);
}
/* ===== Mobile menu (theme picker) ===== */
.headActions{
    display:flex;
    align-items:center;
    gap:10px;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    justify-content:flex-end;
}

.menuBtn{
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.14);
    background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color: rgba(234,240,255,.90);
    box-shadow: 0 12px 28px rgba(0,0,0,.35);
    cursor:pointer;
}
.menuBtn:active{ transform: translateY(1px); }

html[data-theme="light"] .menuBtn{
    border-color: rgba(15,23,42,.12);
    background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.82));
    color: rgba(15,23,42,.92);
    box-shadow: 0 12px 28px rgba(15,23,42,.12);
}

.menuOverlay{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 50;
    display:none;
}

.menuOverlay[data-open="1"]{ display:block; }

.menuPanel{
    position: fixed;
    right: 12px;
    top: calc(10px + env(safe-area-inset-top));
    width: min(360px, calc(100% - 24px));
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(9,12,24,.92);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    box-shadow: 0 26px 90px rgba(0,0,0,.62);
    overflow:hidden;
    transform: translateY(-6px);
    opacity: 0;
    transition: transform 180ms var(--ease), opacity 180ms var(--ease);
}

.menuOverlay[data-open="1"] .menuPanel{
    transform: translateY(0);
    opacity: 1;
}

html[data-theme="light"] .menuPanel{
    background: rgba(255,255,255,.94);
    border-color: rgba(15,23,42,.12);
    box-shadow: 0 26px 90px rgba(15,23,42,.18);
}

.menuHead{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 10px;
    padding: 12px 12px;
    border-bottom: 1px solid rgba(255,255,255,.10);
}

html[data-theme="light"] .menuHead{ border-bottom-color: rgba(15,23,42,.10); }

.menuTitle{
    font-weight: 950;
    letter-spacing: .2px;
}

.menuClose{
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    color: inherit;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
}

html[data-theme="light"] .menuClose{
    border-color: rgba(15,23,42,.12);
    background: rgba(15,23,42,.04);
}

.menuBody{ padding: 12px; }

.menuGroup{
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 16px;
    background: rgba(255,255,255,.05);
    padding: 12px;
}

html[data-theme="light"] .menuGroup{
    border-color: rgba(15,23,42,.10);
    background: rgba(15,23,42,.03);
}

.themeRow{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 12px;
}

.themeHint{ color: var(--muted); font-size: 12px; margin-top: 6px; }

.seg{
    display:inline-flex;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    overflow:hidden;
}

html[data-theme="light"] .seg{ border-color: rgba(15,23,42,.12); }

.segBtn{
    padding: 10px 12px;
    min-height: 40px;
    font-weight: 900;
    font-size: 12px;
    border: 0;
    color: inherit;
    background: transparent;
    cursor:pointer;
}

.segBtn[aria-pressed="true"]{
    background: linear-gradient(180deg, rgba(124,255,203,.18), rgba(138,167,255,.10));
    border-right: 1px solid rgba(255,255,255,.12);
}

html[data-theme="light"] .segBtn[aria-pressed="true"]{
    background: linear-gradient(180deg, rgba(11,95,255,.14), rgba(0,166,126,.08));
    border-right-color: rgba(15,23,42,.10);
}

.segBtn + .segBtn{ border-left: 1px solid rgba(255,255,255,.10); }
html[data-theme="light"] .segBtn + .segBtn{ border-left-color: rgba(15,23,42,.10); }
/* ===== Date pill (title altına düşmeden, sağ üstte kibar) ===== */
.row{
    position: relative; /* date pill için referans */
}

/* tWrap içinde date göstermiyoruz; date bağımsız duracak */
.tWrap{ min-width:0; }

.date{
    top: 10px;
    right: 56px; /* chevron alanına girmesin */
    padding: 6px 10px;
    border-radius: 999px;

    font-size: 12px;
    font-weight: 900;
    letter-spacing: .2px;
    line-height: 1;

    color: rgba(234,240,255,.88);
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 10px 24px rgba(0,0,0,.25);

    white-space: nowrap;
    pointer-events: none; /* tıklamayı engellemesin */
    user-select: none;
    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
}

/* Kart açıkken tarih biraz daha belirgin */
.card[data-open="1"] .date{
    background: rgba(124,255,203,.12);
    border-color: rgba(124,255,203,.22);
}

/* Light theme */
html[data-theme="light"] .date{
    color: rgba(15,23,42,.88);
    background: rgba(255,255,255,.86);
    border-color: rgba(15,23,42,.10);
    box-shadow: 0 10px 24px rgba(15,23,42,.10);
}

html[data-theme="light"] .card[data-open="1"] .date{
    background: rgba(11,95,255,.10);
    border-color: rgba(11,95,255,.18);
}
/* ===== Date inside card header (inline, clean) ===== */
.titleRow{
    display:flex;
    align-items:flex-start;
    gap:10px;
    min-width:0;
}

/* Title should be able to shrink without pushing layout */
.titleRow .title{
    flex: 1 1 auto;
    min-width:0;
}

/* Date pill: inline (NOT absolute) */
.titleRow .date{
    position: static !important;
    top: auto !important;
    right: auto !important;

    display:inline-flex;
    align-items:center;
    white-space:nowrap;

    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .2px;
    line-height: 1;

    color: rgba(234,240,255,.88);
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 10px 24px rgba(0,0,0,.18);

    pointer-events:none;
    user-select:none;
}

.card[data-open="1"] .titleRow .date{
    background: rgba(124,255,203,.12);
    border-color: rgba(124,255,203,.22);
}

html[data-theme="light"] .titleRow .date{
    color: rgba(15,23,42,.88);
    background: rgba(255,255,255,.86);
    border-color: rgba(15,23,42,.10);
    box-shadow: 0 10px 24px rgba(15,23,42,.10);
}

html[data-theme="light"] .card[data-open="1"] .titleRow .date{
    background: rgba(11,95,255,.10);
    border-color: rgba(11,95,255,.18);
}
/* ===== Date inside card header (title line) ===== */
.titleRow{
    display:flex;
    align-items:flex-start;
    gap:10px;
    min-width:0;
}

.titleRow .title{
    flex: 1 1 auto;
    min-width:0;
}

.titleRow .date{
    display:inline-flex;
    align-items:center;
    white-space:nowrap;

    padding: 6px 10px;
    border-radius: 999px;

    font-size: 12px;
    font-weight: 900;
    letter-spacing: .2px;
    line-height: 1;

    color: rgba(234,240,255,.88);
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 10px 24px rgba(0,0,0,.18);

    pointer-events:none;
    user-select:none;
}

.card[data-open="1"] .titleRow .date{
    background: rgba(124,255,203,.12);
    border-color: rgba(124,255,203,.22);
}

html[data-theme="light"] .titleRow .date{
    color: rgba(15,23,42,.88);
    background: rgba(255,255,255,.86);
    border-color: rgba(15,23,42,.10);
    box-shadow: 0 10px 24px rgba(15,23,42,.10);
}

html[data-theme="light"] .card[data-open="1"] .titleRow .date{
    background: rgba(11,95,255,.10);
    border-color: rgba(11,95,255,.18);
}

@media (max-width: 520px){
    .head{ align-items:flex-start; }
    .headActions{
        display:grid;
        grid-template-columns: 1fr auto;
        gap:6px 8px;
        align-items:start;
    }
    .weather{ grid-column: 1; }
    .fxBox{ grid-column: 1; }
    .menuBtn{
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: start;
        justify-self: end;
    }

    .titleRow{ gap:8px; }
    .titleRow .date{ padding: 5px 9px; font-size: 11px; }
}
/* Mobilde yer kazan: biraz küçült */
@media (max-width: 520px){
    .date{
        top: 8px;
        right: 52px;
        padding: 5px 9px;
        font-size: 11px;
    }
}
@media (max-width: 520px){
    .brand h1{ font-size: 16px; }
    .sub{ font-size: 11px; }
    .logo{ width:28px; height:28px; }

    .row{
        grid-template-columns: 74px 1fr auto;
        gap: 10px;
        padding: 10px;
    }
    .thumb{ width:74px; height:74px; }
    .title{ font-size: 15px; line-height: 1.25; }

    .detailsInner{ font-size: 14px; line-height: 1.72; }

    .skelThumb{ width: 74px; height: 74px; }
    .adBox{ min-height: 240px; }
    .weather{ max-width: 54vw; font-size: 11px; padding: 7px 9px; }
    .fxBox{ font-size: 10px; padding: 6px 9px; }
}

@media (prefers-reduced-motion: reduce){
    *{ scroll-behavior:auto !important; }
    .card, .chev, .details, .newsLink{ transition:none !important; }
    .skelLine::after, .skelThumb::after{ animation: none !important; }
}