/**
 * Omnex Pages — pages/appinfo.css
 * İndirmeler (#/downloads, pages/Downloads.js) + Hakkında (#/about, pages/About.js) — 2026-09-29.
 * Kartların kendisi kitten gelir (ox-app-card / ox-app-logo / ox-release-* → components/appcards.css; ox-entity-hero, ox-kv →
 * companies.css; ox-timeline → components/timeline.css). Burada yalnız iki sayfanın yerleşimi ve küçük parçaları durur.
 * Telefon kuralları yalnız html[data-device].
 */

/* ================= İndirmeler ================= */

.ox-dl-rail, .ox-about-rail { position: sticky; top: var(--ox-space-4); }

/* İndir düğmesindeki boyut: düğme içinde soluk ikinci etiket */
.ox-dl-size {
  padding-left: 8px;
  margin-left: 2px;
  border-left: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  font-weight: var(--ox-weight-medium);
  font-variant-numeric: tabular-nums;
  opacity: .85;
}

.ox-dl-sub {
  margin: var(--ox-space-4) 0 var(--ox-space-2);
  font-size: var(--ox-text-xs);
  font-weight: var(--ox-weight-semibold);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ox-fg-muted);
}

.ox-dl-latest__app, .ox-dl-modal__head { display: flex; align-items: center; gap: var(--ox-space-3); }
.ox-dl-latest__meta { display: grid; flex: 1; gap: 2px; min-width: 0; }
.ox-dl-latest__meta b { font-size: var(--ox-text-sm); font-weight: var(--ox-weight-semibold); color: var(--ox-fg); }
.ox-dl-latest__meta span { font-size: var(--ox-text-xs); color: var(--ox-fg-muted); }
.ox-dl-latest__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--ox-space-2);
  margin-top: var(--ox-space-4);
  padding-top: var(--ox-space-4);
  border-top: 1px solid var(--ox-border);
}

.ox-dl-steps { display: grid; gap: var(--ox-space-4); margin: 0; padding: 0; list-style: none; }
.ox-dl-steps > li { display: flex; align-items: flex-start; gap: var(--ox-space-3); font-size: var(--ox-text-sm); color: var(--ox-fg); }
.ox-dl-steps > li > span:last-child { display: grid; gap: 2px; min-width: 0; }
.ox-dl-steps__n {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--ox-radius-full);
  background: var(--ox-primary-subtle);
  color: var(--ox-accent);
  font-size: var(--ox-text-xs);
  font-weight: var(--ox-weight-bold);
}
.ox-dl-steps__text { font-size: var(--ox-text-xs); line-height: 1.5; color: var(--ox-fg-muted); }
.ox-dl-safe {
  display: flex;
  align-items: flex-start;
  gap: var(--ox-space-2);
  margin: var(--ox-space-4) 0 0;
  padding: var(--ox-space-3);
  border-radius: var(--ox-radius-md);
  background: var(--ox-surface-2);
  font-size: var(--ox-text-xs);
  line-height: 1.5;
  color: var(--ox-fg-muted);
}
.ox-dl-safe .ox-icon { flex-shrink: 0; margin-top: 1px; color: var(--ox-success); }

.ox-dl-modal__head { padding-bottom: var(--ox-space-3); border-bottom: 1px solid var(--ox-border); }
.ox-dl-history { display: grid; margin: 0; padding: 0; list-style: none; }
.ox-dl-history > li {
  display: flex;
  align-items: center;
  gap: var(--ox-space-3);
  padding: 8px 0;
  border-bottom: 1px dashed var(--ox-border);
}
.ox-dl-history > li:last-child { border-bottom: 0; }
.ox-dl-history__ver { min-width: 64px; font-weight: var(--ox-weight-semibold); color: var(--ox-fg); font-variant-numeric: tabular-nums; }
.ox-dl-history__meta { flex: 1; font-size: var(--ox-text-xs); color: var(--ox-fg-muted); }
.ox-dl-hint { margin: var(--ox-space-2) 0 0; font-size: var(--ox-text-xs); }
.ox-dl-sha {
  display: flex;
  align-items: center;
  gap: var(--ox-space-2);
  margin-top: var(--ox-space-2);
  padding: 6px 6px 6px 10px;
  border: 1px solid var(--ox-border);
  border-radius: var(--ox-radius-md);
  background: var(--ox-surface-2);
}
.ox-dl-sha code { flex: 1; min-width: 0; font-family: var(--ox-font-mono); font-size: 11px; color: var(--ox-fg-muted); overflow-wrap: anywhere; }

/* ================= Hakkında ================= */

.ox-about-hero__logo { background: var(--ox-surface); }
.ox-about-hero__logo img { padding: 8px; }
.ox-about-hero__tag { margin: 0; font-size: var(--ox-text-base); line-height: 1.5; color: var(--ox-fg-muted); }

.ox-about-text { display: grid; gap: var(--ox-space-3); }
.ox-about-text p { margin: 0; font-size: var(--ox-text-sm); line-height: 1.7; color: var(--ox-fg); }

/* Geliştirici imzası: metnin altında, ince ayraçla */
.ox-about-sign {
  display: flex;
  align-items: center;
  gap: var(--ox-space-3);
  margin-top: var(--ox-space-5);
  padding-top: var(--ox-space-4);
  border-top: 1px dashed var(--ox-border);
}
.ox-about-sign__avatar { background: var(--ox-primary-subtle); color: var(--ox-accent); font-weight: var(--ox-weight-bold); }
.ox-about-sign__who { display: grid; gap: 1px; }
.ox-about-sign__who b { font-size: var(--ox-text-sm); font-weight: var(--ox-weight-semibold); color: var(--ox-fg); }
.ox-about-sign__who span { font-size: var(--ox-text-xs); color: var(--ox-fg-muted); }

/* Yetenek alanları */
.ox-about-areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--ox-space-4); }
.ox-about-area {
  --_tone: var(--ox-fg-muted);
  --_tone-bg: var(--ox-surface-2);
  display: grid;
  align-content: start;
  gap: var(--ox-space-3);
  min-width: 0;
  padding: var(--ox-space-4);
  border: 1px solid var(--ox-border);
  border-radius: var(--ox-radius-lg);
  background: var(--ox-surface);
}
.ox-about-area--info { --_tone: var(--ox-info); --_tone-bg: var(--ox-info-subtle); }
.ox-about-area--success { --_tone: var(--ox-success); --_tone-bg: var(--ox-success-subtle); }
.ox-about-area--violet { --_tone: var(--ox-violet); --_tone-bg: var(--ox-violet-subtle); }
.ox-about-area--warning { --_tone: var(--ox-warning); --_tone-bg: var(--ox-warning-subtle); }
.ox-about-area--primary { --_tone: var(--ox-accent); --_tone-bg: var(--ox-primary-subtle); }
.ox-about-area__head { display: flex; align-items: center; gap: var(--ox-space-3); }
.ox-about-area__icon {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--ox-radius-md);
  background: var(--_tone-bg);
  color: var(--_tone);
}
.ox-about-area__title { flex: 1; min-width: 0; font-size: var(--ox-text-sm); font-weight: var(--ox-weight-semibold); color: var(--ox-fg); }
.ox-about-area__desc { margin: 0; font-size: var(--ox-text-xs); line-height: 1.55; color: var(--ox-fg-muted); }
.ox-about-area__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ox-about-chip {
  padding: 3px 9px;
  border: 1px solid color-mix(in srgb, var(--_tone) 28%, var(--ox-border));
  border-radius: var(--ox-radius-full);
  background: color-mix(in srgb, var(--_tone-bg) 55%, var(--ox-surface));
  font-size: var(--ox-text-xs);
  color: var(--ox-fg);
  white-space: nowrap;
}

/* Değişiklik geçmişi: kit zaman çizelgesi; gövde kart genişliğini kullanır */
.ox-about-log .ox-timeline__body { max-width: none; margin-top: var(--ox-space-3); }
.ox-about-log .ox-timeline__title { font-size: var(--ox-text-sm); }
.ox-about-log [data-ab="log-rest"] { margin-top: var(--ox-space-6); }
.ox-about-more { display: flex; justify-content: center; margin-top: var(--ox-space-5); }

.ox-about-kv { grid-template-columns: 1fr 1fr; }
.ox-about-apps .ox-card__body { display: grid; gap: var(--ox-space-3); justify-items: start; }
.ox-about-apps .ox-card__body p { margin: 0; font-size: var(--ox-text-sm); }
.ox-about-apps__logos { display: flex; flex-wrap: wrap; gap: var(--ox-space-2); }

.ox-about-foot {
  margin: var(--ox-space-6) 0 0;
  padding-top: var(--ox-space-4);
  border-top: 1px solid var(--ox-border);
  font-size: var(--ox-text-xs);
  text-align: center;
  color: var(--ox-fg-faint);
}

html[data-device="phone"] .ox-dl-rail, html[data-device="phone"] .ox-about-rail { position: static; }
html[data-device="phone"] .ox-about-areas { grid-template-columns: minmax(0, 1fr); }
html[data-device="phone"] .ox-dl-history > li { flex-wrap: wrap; }