/* ==========================================================================
   Araştırma — çalışma hatları · araştırma hatları · gerçek Ar-Ge kareleri
   Foundation bileşenlerini (section-head, tag, media-frame, mol-stage, cta-band) kullanır;
   burada yalnızca sayfaya özgü yerleşim var.
   ========================================================================== */

/* 1) Çalışma hatları --------------------------------------------------------
   Mobil/tablet: satırlar (ikon | başlık | metin); ≥1100px: 5 sütun, ince dikey ayraçlar. */
.ar-ws__list {
    list-style: none;
    display: grid;
    border-top: 1px solid var(--t-line);
}
.ar-ws__item {
    position: relative;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 20px;
    row-gap: 6px;
    padding-block: 26px;
    border-bottom: 1px solid var(--t-line);
}
/* Üst çizgi üzerinde kısa gold vurgu (her hattın başlangıcı) */
.ar-ws__item::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 48px;
    height: 1px;
    background: var(--t-gold-line);
}
.ar-ws__top { display: contents; }
.ar-ws__icon {
    grid-row: 1 / span 3;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid var(--t-gold-line);
    border-radius: 50%;
    color: var(--t-strong);
    font-size: 22px;
    transition: background-color .5s var(--ease);
}
.ar-ws__item:hover .ar-ws__icon { background: rgba(198, 164, 106, .12); }
.ar-ws__no {
    grid-column: 2;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .14em;
    color: var(--t-gold);
    font-variant-numeric: tabular-nums;
}
.ar-ws__title {
    grid-column: 2;
    font-size: clamp(23px, 2vw, 28px);
    line-height: 1.12;
}
.ar-ws__text { grid-column: 2; }
.ar-ws__text p { font-size: 14.5px; line-height: 1.6; color: var(--t-muted); max-width: 46ch; }

@media (min-width: 720px) and (max-width: 1099px) {
    .ar-ws__item {
        grid-template-columns: 48px minmax(0, .9fr) minmax(0, 1.1fr);
        column-gap: 28px;
        align-items: start;
    }
    .ar-ws__icon { grid-row: 1 / span 2; }
    .ar-ws__text { grid-column: 3; grid-row: 1 / span 2; padding-top: 4px; }
}

@media (min-width: 1100px) {
    .ar-ws__list {
        grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr));
        row-gap: 56px;
    }
    .ar-ws__item {
        --pad: clamp(20px, 2.2vw, 34px);
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 40px var(--pad) 6px;
        border-bottom: 0;
        border-left: 1px solid var(--t-line);
    }
    .ar-ws__item::before { left: var(--pad); width: 32px; }
    .ar-ws__item:nth-child(5n+1) { border-left: 0; padding-left: 0; }
    .ar-ws__item:nth-child(5n+1)::before { left: 0; }
    .ar-ws__item:nth-child(5n) { padding-right: 0; }
    .ar-ws__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 30px; }
    .ar-ws__icon { width: 52px; height: 52px; font-size: 23px; }
    .ar-ws__title { min-height: 2.24em; }
    .ar-ws__text { margin-top: 14px; }
    .ar-ws__text p { font-size: 14.5px; max-width: none; }
}

/* 2) Araştırma hatları ------------------------------------------------------
   Satır: molekül sanat paneli | kaynak (caps) + serif başlık + metin | aşama etiketi + ok.
   Başlıktaki bağlantı ::after ile tüm satırı kaplar (erişilebilir ad = başlık). */
.ar-rl__list { list-style: none; border-top: 1px solid var(--t-line); }
.ar-line {
    position: relative;
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    grid-template-areas:
        "art body"
        "art meta";
    column-gap: 18px;
    row-gap: 14px;
    align-items: start;
    padding-block: 24px;
    border-bottom: 1px solid var(--t-line);
    transition: background-color .6s var(--ease);
}
.ar-line.is-link:hover { background: rgba(239, 233, 220, .025); }
.ar-line__art {
    grid-area: art;
    aspect-ratio: 1;
    border-radius: var(--radius-sm);
    isolation: isolate;
    background:
        radial-gradient(90% 80% at 72% 18%, rgba(122, 31, 43, .45), transparent 70%),
        var(--c-ink-850);
    background:
        radial-gradient(90% 80% at 72% 18%, color-mix(in srgb, var(--accent) 62%, transparent) 0%, transparent 72%),
        radial-gradient(70% 60% at 8% 100%, color-mix(in srgb, var(--accent) 26%, transparent) 0%, transparent 72%),
        var(--c-ink-850);
    color: var(--c-gold-300);
    --mol-color: var(--c-gold-300);
    --mol-stroke: 1.2px;
    --mol-bond: 10cqi;
}
.ar-line__art::after {
    content: "";
    position: absolute;
    inset: 6px;
    z-index: 1;
    border: 1px solid rgba(220, 194, 143, .16);
    border-radius: 2px;
    pointer-events: none;
    transition: border-color .6s var(--ease);
}
.ar-line__art .molecule { transition: transform 1.4s var(--ease); }
.ar-line__art .fw-visual { width: 70%; color: var(--c-gold-400); opacity: .6; }
@media (min-width: 720px) { .ar-line__art .fw-visual { width: 52%; } }  /* 8:5 panelde kare yörünge taşmasın */
.ar-line.is-link:hover .ar-line__art::after { border-color: rgba(220, 194, 143, .42); }
.ar-line.is-link:hover .ar-line__art .molecule { transform: scale(1.06); }
/* Sıra no kaynak satırının başında: "01 —— NAR ÇEKİRDEĞİ" */
.ar-line__no { display: inline-flex; align-items: center; gap: 12px; margin-right: 12px; letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.ar-line__no::after { content: ""; width: 20px; height: 1px; background: currentColor; opacity: .55; }
.ar-line__no--solo::after { display: none; }
.nw { white-space: nowrap; }
.ar-line__body { grid-area: body; min-width: 0; display: grid; gap: 8px; }
.ar-line__source {
    font-size: 10.5px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--t-gold);
}
.ar-line__title {
    font-size: clamp(22px, 2vw, 29px);
    line-height: 1.15;
    text-wrap: balance;
}
.ar-line__link { color: inherit; transition: color .4s var(--ease); }
.ar-line__link::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.ar-line__link:focus-visible { outline: none; }
.ar-line__link:focus-visible::after { outline: 2px solid var(--c-gold-400); outline-offset: -2px; border-radius: var(--radius-sm); }
.ar-line.is-link:hover .ar-line__link { color: var(--c-gold-300); }
.ar-line__text p { font-size: 14.5px; line-height: 1.6; color: var(--t-muted); max-width: 62ch; }
.ar-line__meta {
    grid-area: meta;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
}
.ar-line__tag { white-space: normal; text-align: left; }
.ar-line__arrow {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-left: auto;
    border: 1px solid var(--t-line);
    border-radius: 50%;
    color: var(--t-strong);
    font-size: 15px;
    transition: background-color .45s var(--ease), border-color .45s var(--ease), color .45s var(--ease), transform .45s var(--ease);
}
.ar-line.is-link:hover .ar-line__arrow { background: var(--c-gold-400); border-color: var(--c-gold-400); color: var(--c-ink-950); transform: rotate(-45deg); }

@media (min-width: 720px) {
    .ar-line { grid-template-columns: 160px minmax(0, 1fr); column-gap: clamp(24px, 3vw, 40px); padding-block: 28px; }
    .ar-line__art { aspect-ratio: 8 / 5; --mol-bond: 8cqi; }
    .ar-line__art::after { inset: 8px; }
}
/* Tablet: ok satırın sağında dikey ortada; etiket metnin altında */
@media (min-width: 720px) and (max-width: 1099px) {
    .ar-line.is-link { padding-right: 72px; }
    .ar-line__arrow { position: absolute; right: 0; top: 50%; margin-top: -20px; }
}
@media (min-width: 1100px) {
    .ar-line {
        grid-template-columns: 208px minmax(0, 1fr) 256px;
        grid-template-areas: "art body meta";
        align-items: center;
        padding-block: 32px;
    }
    .ar-line__body { gap: 10px; }
    .ar-line__meta { align-self: center; }
}

/* 3) Gerçek çalışmalar — iki sütunlu editoryal yayılım ------------------------
   Kareler sırayla sol (A) / sağ (B) sütuna düşer. Kare genişliği = hedef yükseklik × gerçek oran
   (sütunla sınırlı) → dikey kareler uzamaz, yatay kareler sütunu doldurur. Sağ sütun aşağı kaydırılır;
   hizalar dönüşümlü (girintili / yaslı) → fotoğraflar arasında bilinçli boşluk.
   Mobil: tek sütun, gerçek sıra (order), tek sıradaki kareler %80 genişlikte sağa yaslı. */
.ar-ev__spread {
    --h-lg: clamp(420px, 50vw, 720px);
    --h-md: clamp(360px, 42vw, 600px);
    --h-sm: clamp(320px, 36vw, 520px);
    --fig-gap: clamp(64px, 7.5vw, 112px);
    display: flex;
    flex-direction: column;
    gap: clamp(48px, 12vw, 72px);
}
.ar-ev__col { display: contents; }
.ar-ev__fig { width: 100%; }
.ar-ev__fig.is-odd:not(.is-landscape) { width: 80%; margin-left: auto; }
.ar-ev__fig .media-frame__img { aspect-ratio: var(--ar, 4 / 5); }
.ar-ev__fig:hover .media-frame__img img { transform: scale(1.025); }

/* Künye: "—— 01  HAMMADDE / FRAKSİYON" (+ isteğe bağlı kısa not) */
.ar-ev__cap { display: grid; gap: 8px; }
.ar-ev__cap .media-frame__caption { margin-top: 18px; align-items: baseline; color: var(--t-fg); }
.ar-ev__cap .media-frame__caption::before { align-self: center; }
.ar-ev__no { flex: none; color: var(--t-gold); font-variant-numeric: tabular-nums; letter-spacing: .1em; }
.ar-ev__title { min-width: 0; }
.ar-ev__note { padding-left: 36px; max-width: 46ch; font-size: 13.5px; line-height: 1.55; color: var(--t-muted); }

@media (max-width: 719px) {
    /* telefonda çok uzun dikey kareler 4:5'e kırpılır */
    .ar-ev__fig .media-frame__img { aspect-ratio: max(var(--ar, .8), .8); }
    @supports not (aspect-ratio: max(1, 2)) { .ar-ev__fig .media-frame__img { aspect-ratio: 4 / 5; } }
}

@media (min-width: 720px) {
    .ar-ev__spread {
        display: grid;
        grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
        column-gap: clamp(32px, 5vw, 64px);
        align-items: start;
    }
    .ar-ev__col { display: flex; flex-direction: column; gap: var(--fig-gap); min-width: 0; }
    .ar-ev__col--b { padding-top: clamp(96px, 12vw, 176px); }
    .ar-ev__fig,
    .ar-ev__fig.is-odd:not(.is-landscape) { width: min(100%, max(260px, calc(var(--h) * var(--ar)))); margin-left: 0; }
    /* Kareler ortadaki oluğa yaslanır: A1 büyük dikey (sağa yaslı) · A2 sütunu doldurur · B1 orta · B2 küçük */
    .ar-ev__col--a > .ar-ev__fig:nth-child(odd)  { --h: var(--h-lg); margin-left: auto; }
    .ar-ev__col--a > .ar-ev__fig:nth-child(even) { --h: var(--h-md); }
    .ar-ev__col--b > .ar-ev__fig:nth-child(odd)  { --h: var(--h-md); }
    .ar-ev__col--b > .ar-ev__fig:nth-child(even) { --h: var(--h-sm); }
    .ar-ev__spread--single { grid-template-columns: minmax(0, 1fr); }
    .ar-ev__spread--single .ar-ev__col--a > .ar-ev__fig { margin-left: 0; }
}
/* Dar tablet: sütunlar dar → kareler sütunu doldurur (B2 biraz daha küçük), sağ sütun kayması azalır */
@media (min-width: 720px) and (max-width: 959px) {
    .ar-ev__col--b { padding-top: 56px; }
    .ar-ev__col > .ar-ev__fig { width: 100%; }
    .ar-ev__col--b > .ar-ev__fig:nth-child(even) { width: max(260px, 84%); }
}
/* Başlık bölmesiyle aynı ızgara → sağ sütun, üstteki açıklama paragrafıyla aynı hizadan başlar */
@media (min-width: 960px) {
    .ar-ev__spread { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); column-gap: clamp(48px, 7vw, 128px); }
}