/* =============================================================================
   Avielon Studio · works.css
   Page-specific styles for the İşler / Work page (Isler.cshtml).
   Loaded after tokens.css + site.css via @@section Styles in the view.
   The design tokens, base reset, type utilities, buttons and chrome all live
   in tokens.css / site.css — this file only adds what this page needs.
============================================================================= */

.section { padding-block: var(--section-y); }

/* --- Page hero --- */
.page-hero { padding-block: clamp(4rem, 8vw, 7rem) clamp(2.5rem, 5vw, 4rem); }
.page-hero .eyebrow { display: flex; align-items: center; gap: .7rem; margin-bottom: 1.4rem; }
.page-hero .eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--color-accent); }
.page-hero h1 { max-width: 20ch; margin-bottom: 1.4rem; }
.page-hero .lead { max-width: 60ch; }

/* --- Filter bar (two-tier: pillar -> sub-service) --- */
.filters-section { padding-block: 0 clamp(1.75rem, 4vw, 2.5rem); }
.filters { border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); padding: clamp(1rem, 2.5vw, 1.4rem); }
.filters-legend { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--color-text-secondary); margin: 0 0 .9rem; }
.filter-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.filter-row.sub-row { margin-top: .9rem; padding-top: .95rem; border-top: 1px dashed var(--color-border); }
.filter-row.sub-row[hidden] { display: none; }
.chip-btn { appearance: none; cursor: pointer; font: inherit; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em; padding: .5rem .9rem; border-radius: 999px; line-height: 1; border: 1px solid var(--color-border); background: var(--color-background); color: var(--color-text-secondary); transition: border-color .2s, color .2s, background-color .2s; }
.chip-btn:hover { border-color: var(--color-text-secondary); color: var(--color-text-primary); }
.chip-btn.is-active { background: var(--color-text-primary); color: var(--color-background); border-color: var(--color-text-primary); }
.chip-btn.sub[hidden] { display: none; }
.filter-count { margin: 1rem 0 0; color: var(--color-text-secondary); font-family: var(--font-mono); font-size: .72rem; letter-spacing: .06em; }
.filter-count b { color: var(--color-text-primary); font-weight: 500; }

/* --- Projects grid (one card per row) --- */
.projects-grid { display: grid; gap: 1.25rem; }

/* shared detail pieces */
.d-label { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--color-text-secondary); }
.d-block { display: grid; gap: .35rem; } .d-block p { margin: 0; color: var(--color-text-secondary); max-width: 72ch; }

/* ---- the datasheet card ---- */
.ds-card { border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface);
  display: grid; gap: 1.5rem; padding: clamp(1.5rem, 3.2vw, 2.25rem); transition: border-color .25s ease; }
.ds-card:hover { border-color: var(--color-text-secondary); }
.ds-card[hidden] { display: none; }
.ds-card.is-featured { background: var(--color-surface-elevated); }

/* left rail: sector -> name/logo -> pills */
.ds-rail { display: grid; gap: 1.1rem; align-content: start; }
.ds-sector { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--color-text-secondary); margin: 0; display: inline-flex; align-items: center; gap: .5rem; }
.ds-sector.flag { color: var(--color-accent); }
.ds-sector.flag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); flex: none; }
.ds-name { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.55rem, 1.3rem + .9vw, 2rem); line-height: 1.06; letter-spacing: -0.015em; color: var(--color-text-primary); margin: 0; }
/* logo alternative — drop <img class="ds-logo" src="…" alt="…"> in place of .ds-name */
.ds-logo { display: block; height: clamp(30px, 4.5vw, 42px); width: auto; max-width: 100%; object-fit: contain; }
.ds-pills { display: flex; flex-wrap: wrap; gap: .4rem; }
.ds-pill { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .05em; color: var(--color-text-secondary); border: 1px solid var(--color-border); border-radius: 999px; padding: .28rem .65rem; line-height: 1.2; }

/* right body: work title + description (+ link or detail) */
.ds-body { display: grid; gap: 1rem; align-content: start; border-top: 1px solid var(--color-border); padding-top: 1.5rem; }
.ds-title { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.3rem, 1.15rem + .55vw, 1.6rem); line-height: 1.22; letter-spacing: -0.01em; color: var(--color-text-primary); margin: 0; max-width: 36ch; }
.ds-desc { margin: 0; color: var(--color-text-secondary); max-width: 66ch; }

.ds-link { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .06em; color: var(--color-accent); display: inline-flex; align-items: center; gap: .4rem; width: fit-content; margin-top: .1rem; transition: gap .2s ease, color .2s ease; }
.ds-link:hover { color: var(--color-accent-hover); gap: .6rem; }

.ds-detail { border-top: 1px solid var(--color-border); margin-top: .1rem; }
.ds-detail > summary { list-style: none; cursor: pointer; user-select: none; padding: .95rem 0 0; display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; color: var(--color-text-secondary); transition: color .2s ease; }
.ds-detail > summary:hover { color: var(--color-text-primary); }
.ds-detail > summary::-webkit-details-marker { display: none; }
.ds-detail > summary::before { content: ""; width: 11px; height: 11px; flex: none;
  background: linear-gradient(currentColor,currentColor) center/11px 1.4px no-repeat, linear-gradient(currentColor,currentColor) center/1.4px 11px no-repeat;
  transition: transform .25s ease; }
.ds-detail[open] > summary::before { transform: rotate(45deg); }
.ds-detail-body { display: grid; gap: 1.05rem; padding: 1.1rem 0 .2rem; }
@media (prefers-reduced-motion: reduce) { .ds-detail > summary::before { transition: none; } }

/* split only at >=1024px; below that, stacked top/bottom */
@media (min-width: 1024px) {
  .ds-card { grid-template-columns: 340px minmax(0, 1fr); column-gap: 0; }
  .ds-rail { padding-right: clamp(1.75rem, 3vw, 2.75rem); }
  .ds-body { border-top: 0; padding-top: 0; border-left: 1px solid var(--color-border); padding-left: clamp(1.75rem, 3vw, 2.75rem); }
}

/* empty state */
.projects-empty { border: 1px dashed var(--color-border); border-radius: var(--radius); padding: clamp(2rem, 5vw, 3rem); text-align: center; color: var(--color-text-secondary); }
.projects-empty[hidden] { display: none; }

/* closing CTA band */
.cta-band { border-top: 1px solid var(--color-border); background: var(--color-surface); }
.cta-band-inner { padding-block: clamp(4rem, 8vw, 7rem); display: grid; gap: 1.5rem; justify-items: start; max-width: 720px; margin: 0; }
.cta-band .t-display { max-width: 16ch; }
.cta-band .lead { max-width: 52ch; }

/* reveal */
.fade { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.fade.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .fade { opacity: 1; transform: none; transition: none; } }