/* =============================================================================
   Okumalar — Dark Atmosfer (DENEME)
   Referans paleti: espresso zemin · zeytin band · krem kartlar · altın aksan.
   okumalar.css'in --rd-* değişkenlerini override eder; mevcut yapı korunur.
   ============================================================================= */

body.page-okumalar {
    --rd-bg: #FDFDFD;            /* zemin */
    --rd-surface: #FCFAF5;       /* krem kart (biraz parlak, pop) */
    --rd-text: #211f1a;          /* mürekkep (koyu) */
    --rd-text-light: #6d675c;
    --rd-accent: var(--sf-accent, #1F1F1F);        /* altın (site ile uyumlu) */
    --rd-border: rgba(0, 0, 0, 0.07);

    --ok-olive: #565a44;         /* zeytin band (korunuyor) */
    --ok-cream: #efe9dd;         /* koyu hero foto üstü metin (açık kalmalı) */
    --ok-cream-soft: #cfc8b9;

    background: #FDFDFD !important;
    color: #2b2b22;              /* sayfa metni koyu (zemin açık) */
}

/* Editoryal giriş yazısı (Sinema örneği gibi: serif başlık + açıklama) — görünür */
body.page-okumalar .area-intro {
    display: block;
    max-width: 820px;
    margin: clamp(2.4rem, 5vw, 4rem) 0 clamp(1.4rem, 3vw, 2.4rem);
}
body.page-okumalar .area-intro h1 { color: #26221c !important; }
body.page-okumalar .area-intro p { color: #6a655c !important; }

/* ── Sinematik Hero ─────────────────────────────────────────────────────── */
.ok-cine-wrap { max-width: 1280px; margin: 0 auto; padding: 24px 24px 0; }
.ok-cine {
    position: relative;
    min-height: 460px;
    border-radius: 22px;
    overflow: hidden;
    display: flex; flex-direction: column; justify-content: center;
    padding: clamp(30px, 5vw, 66px);
    isolation: isolate;
    color: var(--ok-cream);
}
.ok-cine::before {
    content: ''; position: absolute; inset: 0; z-index: -2;
    background-color: #141210;
    background-image: var(--ok-cine-img, url('/assets/img/jurnal-hero.jpg'));
    background-size: cover; background-position: var(--ok-cine-pos, center);
}
.ok-cine::after {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(90deg,
        rgba(0, 0, 0, 0.92) 0%,
        rgba(0, 0, 0, 0.80) 26%,
        rgba(0, 0, 0, 0.45) 55%,
        rgba(0, 0, 0, 0.12) 78%,
        rgba(0, 0, 0, 0) 100%);
}
.ok-cine-badge {
    display: inline-flex; align-items: center; gap: 9px;
    font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase; color: var(--rd-accent);
    margin-bottom: 22px;
}
.ok-cine h1 {
    font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500;
    font-size: clamp(2.4rem, 5vw, 3.7rem); line-height: 1.08; margin: 0 0 1.1rem;
    color: #ffffff; max-width: 15ch;
}
.ok-cine p {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(1.12rem, 1.8vw, 1.45rem); line-height: 1.55;
    color: rgba(255, 255, 255, 0.94); margin: 0 0 2rem; max-width: 46ch;
}
.ok-cine .ok-cta {
    display: inline-flex; align-items: center; gap: 11px;
    padding: 13px 32px; border: 1px solid rgba(236, 231, 222, 0.5);
    border-radius: 40px; color: var(--ok-cream); text-decoration: none;
    font-family: 'Inter', sans-serif; font-size: 14.5px; font-weight: 500;
    transition: background .25s, color .25s, border-color .25s;
}
.ok-cine .ok-cta:hover { background: var(--ok-cream); color: #17130e; border-color: var(--ok-cream); }
.ok-cine .ok-cta i { transition: transform .25s; }
.ok-cine .ok-cta:hover i { transform: translateX(4px); }

/* ── Zeytin band: Son Okumalar ──────────────────────────────────────────── */
.ok-band {
    background: var(--ok-olive);
    border-radius: 20px;
    padding: clamp(22px, 3vw, 34px);
    margin: 40px 0 56px;
}
.ok-band .rd-section-head { margin-bottom: 20px; border-bottom-color: rgba(244,238,226,.45); }
.ok-band .rd-section-head h3 { color: #f4eee2; }
.ok-band .rd-section-head a { color: #e8e1d2; opacity: .85; }
.ok-band .rd-section-head a:hover { opacity: 1; }

/* ── Başlıklar: alt bölümler açık zemine indiği için KOYU; zeytin band cream ── */
body.page-okumalar .rd-section-head h3 { color: #2b2b22; }
body.page-okumalar .rd-section-head a { color: var(--sf-accent, #1F1F1F); }
body.page-okumalar .ok-band .rd-section-head h3 { color: #f4eee2; }
body.page-okumalar .ok-band .rd-section-head a { color: #e8e1d2; opacity: .85; }

/* Kartlar zaten krem yüzey + koyu metin (değişkenler) — koyu zeminde okunur.
   Küçük iyileştirme: gölge derinleşsin. */
body.page-okumalar .rd-card {
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
    border-color: rgba(0, 0, 0, 0.06);
}

/* JS ile dolan öne çıkan seçki kartı — AÇIK krem panel + koyu metin (boğmasın) */
body.page-okumalar .rd-hero {
    background: none;
    border-radius: 16px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18);
}
body.page-okumalar .rd-hero-content { background: #F4EFE6; }
body.page-okumalar .rd-hero-content::after { background: linear-gradient(to right, #F4EFE6, transparent); }
/* Metin renkleri okumalar.css'in varsayılan koyu tonlarında kalır (krem panelde okunur) */

/* Pagination noktaları cream */
body.page-okumalar .rd-dot { background: rgba(43, 43, 34, 0.2); }
body.page-okumalar .rd-dot.active { background: var(--sf-accent, #1F1F1F); }
body.page-okumalar .rd-page-btn { color: #4a4636; border-color: rgba(43, 43, 34, 0.28); }

@media (max-width: 768px) {
    .ok-cine { min-height: 380px; }
}

/* =============================================================================
   Öne Çıkan Yazılar → yan yana 5 kart · Koleksiyonlar 5'li · tam genişlik
   ============================================================================= */
body.page-okumalar .rd-split { display: block; margin-bottom: 80px; }
body.page-okumalar .rd-split > div { margin-bottom: 54px; }
body.page-okumalar .rd-split > div:last-child { margin-bottom: 0; }

body.page-okumalar #rd-popular-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4rem;
}
body.page-okumalar .rd-list-item {
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    border-bottom: none;
    background: var(--rd-surface);
    border: 1px solid var(--rd-border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.05);
    transition: transform .25s ease, box-shadow .25s ease;
}
body.page-okumalar .rd-list-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.09);
    background: var(--rd-surface);
}
body.page-okumalar .rd-list-num { display: none; }
body.page-okumalar .rd-list-img { width: 100%; height: 132px; margin: 0; border-radius: 0; }
body.page-okumalar .rd-list-content { flex-grow: 0; padding: 13px 15px 2px; }
body.page-okumalar .rd-list-title {
    font-family: 'Cormorant Garamond', Georgia, serif; font-size: 18px; font-weight: 600; margin-bottom: 5px;
}
body.page-okumalar .rd-list-time { padding: 0 15px 14px; }

body.page-okumalar .rd-coll-grid { grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
body.page-okumalar .rd-coll-card { height: auto; }
body.page-okumalar .rd-coll-media { aspect-ratio: 16 / 10; height: auto; max-height: none; }

@media (max-width: 1100px) {
    body.page-okumalar #rd-popular-list { grid-template-columns: repeat(3, 1fr); }
    body.page-okumalar .rd-coll-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
    body.page-okumalar #rd-popular-list,
    body.page-okumalar .rd-coll-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 440px) {
    body.page-okumalar .rd-coll-grid { grid-template-columns: 1fr; }
}

/* =============================================================================
   Footer — koyu #23211E (referans)
   ============================================================================= */
body.page-okumalar .footer-area { background: #000000 !important; color: #cfc8ba !important; }
body.page-okumalar .footer-area a { color: #d8d2c6 !important; }
body.page-okumalar .footer-area a:hover { color: #ffffff !important; }
body.page-okumalar .footer-area h3,
body.page-okumalar .footer-area h4,
body.page-okumalar .footer-area .footer-tittle h4,
body.page-okumalar .footer-area .footer-pera,
body.page-okumalar .footer-area .text-logo,
body.page-okumalar .footer-area .footer-logo a { color: #f4efe6 !important; }

/* =============================================================================
   Öne Çıkan Seçki — Sinema secki tarzı (okumalar versiyonu)
   ============================================================================= */
.ok-secki {
    padding: clamp(1.6rem, 3vw, 3rem) 0 clamp(2.6rem, 5vw, 4.4rem);
    border-bottom: 1px solid var(--line, #e2ddd5);
    margin-bottom: clamp(2rem, 4vw, 3.6rem);
}
.ok-secki-grid {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}
.ok-secki-label {
    display: block;
    font-family: var(--rd-font-sans, 'Inter', sans-serif);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--rd-text-light, #8a7f72);
    margin-bottom: 1.4rem;
}
.ok-secki-title {
    font-family: var(--rd-font-serif, 'EB Garamond', Georgia, serif);
    font-weight: 500;
    color: var(--rd-text, #181814);
    font-size: clamp(2rem, 3.6vw, 3.1rem);
    line-height: 1.04;
    letter-spacing: -0.01em;
    margin: 0 0 0.5rem;
    text-wrap: balance;
}
.ok-secki-author {
    font-family: var(--rd-font-sans, 'Inter', sans-serif);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--rd-text-light, #8a7f72);
    margin: 0 0 1.4rem;
}
.ok-secki-note {
    font-family: var(--rd-font-serif, 'EB Garamond', Georgia, serif);
    font-size: clamp(1.15rem, 1.7vw, 1.42rem);
    line-height: 1.5;
    color: var(--rd-text, #181814);
    max-width: 34ch;
    margin: 0 0 1.9rem;
}
.ok-secki-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--rd-font-sans, 'Inter', sans-serif);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--rd-text, #181814);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
    transition: opacity 0.25s ease;
}
.ok-secki-link:hover { opacity: 0.6; }
.ok-secki-media {
    display: block;
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    background: #23211e;
    text-decoration: none;
}
.ok-secki-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(18,15,11,0.22), transparent 42%);
    pointer-events: none;
}
.ok-secki-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.8s ease;
    filter: saturate(0.95) contrast(1.04) brightness(0.96);
}
.ok-secki-media:hover .ok-secki-img { transform: scale(1.03); }

@media (max-width: 880px) {
    .ok-secki-grid { grid-template-columns: 1fr; }
    .ok-secki-media { order: -1; }
}