/* KONUM: CodeAndSystems.Website\wwwroot\css\pages\about.css
   About page: its own styles (moved out of the old about.html, unchanged) and, at the end, the dark theme of the page
   (generated from the light colours of the rules above, then hand-tuned). Loaded after site.css, before theme.css. */

/* ══════════════════════════════════════════════════════════
   ABOUT v2 — hero + company card / story + timeline /
   values / why GateCore / certifications / reviews
   (uses the site.css tokens)
   ══════════════════════════════════════════════════════════ */
:root{ --ab-mono: Consolas,'SF Mono',Menlo,monospace; }

/* ---------- HERO ---------- */
.ab-hero { padding: 110px 0 80px; background: radial-gradient(900px 420px at 10% 0%, #ede9fe 0%, transparent 60%), radial-gradient(700px 400px at 95% 40%, #e0f2fe 0%, transparent 55%), #fff; overflow: hidden; }
.ab-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 60px; align-items: center; }
.ab-hero h1 { font-family: 'Bricolage Grotesque', sans-serif; font-size: clamp(36px, 5vw, 60px); font-weight: 800; line-height: 1.02; letter-spacing: -0.03em; color: var(--text); margin-bottom: 20px; }
.ab-hero h1 em { font-style: normal; background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.ab-lead { font-size: 17px; color: var(--muted); font-weight: 300; line-height: 1.7; max-width: 540px; margin-bottom: 28px; }
.ab-quote { border-left: 3px solid var(--purple-l); padding: 4px 0 4px 18px; font-family: 'Bricolage Grotesque', sans-serif; font-size: 18px; font-weight: 600; line-height: 1.4; color: var(--text); margin-bottom: 28px; }
.ab-quote small { display: block; font-family: Inter, sans-serif; font-size: 12px; font-weight: 400; color: var(--muted2); margin-top: 8px; }
.ab-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* company identity card */
.cc { background: #fff; border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 30px 60px -20px rgba(17,24,39,0.18); overflow: hidden; }
.cc-top { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--border); background: var(--bg2); }
.cc-logo { width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0; display: block; }
.cc-top b { display: block; font-size: 14px; color: var(--text); }
.cc-top span { font-size: 11px; color: var(--muted2); }
.cc-top .ver { margin-left: auto; font-size: 10.5px; font-weight: 600; color: #059669; background: #ecfdf5; padding: 4px 10px; border-radius: 100px; display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.cc-top .ver i { width: 6px; height: 6px; border-radius: 50%; background: #059669; display: block; }
.cc-body { padding: 6px 18px 18px; }
.cc-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px dashed var(--border); font-size: 12.5px; }
.cc-row:last-child { border: none; }
.cc-row span { color: var(--muted2); }
.cc-row b { font-family: var(--ab-mono); font-weight: 600; font-size: 12px; color: var(--text); text-align: right; }
.cc-row b.tp { color: #00b67a; font-family: Inter, sans-serif; }
.cc-row a { color: var(--purple-l); font-weight: 600; font-size: 11.5px; text-decoration: none; }
.cc-foot { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; padding: 0 18px 18px; }
.cc-stat { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; text-align: center; }
.cc-stat b { display: block; font-family: 'Bricolage Grotesque', sans-serif; font-size: 20px; font-weight: 800; color: var(--text); }
.cc-stat span { font-size: 10.5px; color: var(--muted2); }

/* ---------- HIKAYE + ZAMAN CIZELGESI ---------- */
.story { padding: 100px 0; border-top: 1px solid var(--border); }
.story-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: start; }
.story-text { font-size: 14.5px; color: var(--muted); line-height: 1.8; font-weight: 300; display: flex; flex-direction: column; gap: 14px; }
.story-text strong { color: var(--text); font-weight: 600; }
.tline { position: relative; padding-left: 28px; }
.tline::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(180deg, var(--border), var(--purple-l)); }
.tev { position: relative; padding: 0 0 26px; }
.tev:last-child { padding-bottom: 0; }
.tev::before { content: ""; position: absolute; left: -26px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2.5px solid var(--border2); }
.tev.now::before { border-color: var(--purple-l); background: var(--purple-l); box-shadow: 0 0 0 5px var(--purple-xl); }
.tev small { font-family: var(--ab-mono); font-size: 11px; color: var(--purple-l); letter-spacing: 0.08em; display: block; margin-bottom: 4px; }
.tev h3 { font-family: 'Bricolage Grotesque', sans-serif; font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.tev p { font-size: 12.5px; color: var(--muted); font-weight: 300; line-height: 1.6; }
.tev .chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.tev .chips span { font-size: 10.5px; padding: 3px 9px; border-radius: 100px; background: var(--bg2); border: 1px solid var(--border); color: var(--muted); }
.tev .chips span.hi { background: var(--purple-xl); border-color: transparent; color: var(--purple-l); font-weight: 600; }

/* ---------- VALUES ---------- */
.values-sec { padding: 100px 0; background: var(--bg2); border-top: 1px solid var(--border); }
.vals { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-top: 44px; }
.val { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 24px 22px; transition: 0.2s; }
.val:hover { transform: translateY(-3px); box-shadow: 0 14px 34px -14px rgba(17,24,39,0.2); }
.val .ic { width: 42px; height: 42px; border-radius: 12px; background: var(--purple-xl); color: var(--purple-l); display: grid; place-items: center; margin-bottom: 14px; }
.val .ic svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.val h3 { font-family: 'Bricolage Grotesque', sans-serif; font-size: 15.5px; font-weight: 700; color: var(--text); margin-bottom: 7px; }
.val p { font-size: 12.5px; color: var(--muted); font-weight: 300; line-height: 1.65; }

/* ---------- WHY GATECORE ---------- */
.gcwhy { padding: 100px 0; border-top: 1px solid var(--border); }
.gcwhy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.gcwhy-lead { font-size: 15px; color: var(--muted); line-height: 1.8; font-weight: 300; margin-bottom: 22px; }
.gcwhy ul { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.gcwhy li { display: flex; gap: 10px; font-size: 13.5px; color: var(--text); align-items: flex-start; }
.gcwhy li i { width: 18px; height: 18px; border-radius: 50%; background: var(--purple-xl); color: var(--purple-l); display: grid; place-items: center; font-size: 10px; font-weight: 700; font-style: normal; flex-shrink: 0; margin-top: 2px; }
.panel { background: #0f1117; border-radius: 18px; padding: 20px; color: #e5e7eb; box-shadow: 0 30px 60px -20px rgba(17,24,39,0.35); }
.panel-top { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #9ca3af; font-family: var(--ab-mono); margin-bottom: 16px; }
.panel-top i { width: 9px; height: 9px; border-radius: 50%; background: #374151; display: block; }
.panel-top i:nth-child(1){background:#f87171} .panel-top i:nth-child(2){background:#fbbf24} .panel-top i:nth-child(3){background:#34d399}
.pgrid { display: grid; grid-template-columns: repeat(5,1fr); gap: 8px; margin-bottom: 14px; }
.pp { border-radius: 10px; padding: 10px 8px; border: 0.5px solid rgba(255,255,255,0.12); text-align: center; background: rgba(255,255,255,0.03); }
.pp i { display: block; width: 8px; height: 8px; border-radius: 50%; margin: 0 auto 7px; }
.pp b { display: block; font-size: 10px; font-weight: 600; color: #fff; }
.pp span { font-size: 9px; color: #9ca3af; }
.plog { font-family: var(--ab-mono); font-size: 10.5px; line-height: 1.9; color: #9ca3af; border-top: 0.5px solid rgba(255,255,255,0.1); padding-top: 10px; }
.plog em { font-style: normal; color: #2dd4a0; }
.plog b { color: #c4b5fd; font-weight: 500; }
.plog u { text-decoration: none; color: #fbbf24; }

/* ---------- TECHNOLOGY STRIP (marquee) ---------- */
.trusted-section { padding: 26px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg2); overflow: hidden; }
.trusted-inner { display: flex; align-items: center; gap: 32px; }
.trusted-label { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; white-space: nowrap; flex-shrink: 0; }
.mq { overflow: hidden; flex: 1; -webkit-mask-image: linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image: linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.mq-track { display: flex; gap: 14px; width: max-content; animation: abMq 28s linear infinite; }
@keyframes abMq { to { transform: translateX(-50%); } }
.lg { display: flex; align-items: center; gap: 9px; padding: 8px 14px; border: 1px solid var(--border); background: #fff; border-radius: 10px; font-size: 12.5px; font-weight: 600; color: var(--text); white-space: nowrap; }
.lg i { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; color: #fff; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 11px; font-style: normal; }
.lg span { font-size: 10.5px; color: var(--muted2); font-weight: 400; }
@media (prefers-reduced-motion: reduce) { .mq-track { animation: none; } }
/* ---------- REVIEWS ---------- */
.reviews-sec { padding: 100px 0; border-top: 1px solid var(--border); }
.reviews-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.rev-card { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 22px; display: flex; flex-direction: column; transition: border-color 0.2s, box-shadow 0.2s; }
.rev-card:hover { border-color: var(--border2); box-shadow: 0 4px 20px rgba(0,0,0,0.05); }
.rev-card.feat { background: #111827; border-color: #111827; grid-row: span 2; }
.rev-stars { font-size: 12px; color: #00b67a; letter-spacing: 2px; margin-bottom: 10px; }
.rev-title { font-family: 'Bricolage Grotesque', sans-serif; font-size: 14.5px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.rev-card.feat .rev-title { color: #fff; }
.rev-text { font-size: 13px; color: var(--muted2); line-height: 1.7; font-style: italic; font-weight: 300; flex: 1; }
.rev-card.feat .rev-text { font-size: 17px; color: #e5e7eb; font-family: 'Bricolage Grotesque', sans-serif; font-style: normal; font-weight: 500; line-height: 1.5; }
.rev-author { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.rev-av { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: white; font-family: 'Bricolage Grotesque', sans-serif; flex-shrink: 0; }
.rev-name { font-size: 12.5px; font-weight: 600; color: var(--text); }
.rev-card.feat .rev-name { color: #fff; }
.rev-date { font-size: 11px; color: var(--muted); }
.rev-card.feat .rev-date { color: #9ca3af; }

/* ---------- CTA ---------- */
.about-cta { padding: 100px 0; text-align: center; border-top: 1px solid var(--border); background: linear-gradient(180deg,#fff 0%,var(--bg2) 100%); }
.about-cta h2 { font-family: 'Bricolage Grotesque', sans-serif; font-size: clamp(26px,4vw,44px); font-weight: 800; letter-spacing: -0.025em; color: var(--text); margin-bottom: 14px; }
.about-cta p { font-size: 15px; color: var(--muted); font-weight: 300; margin-bottom: 32px; }

/* ══════════════════════════════════════════════════════════
   GATECORE AUTHENTICATOR — FOOTER BADGE BAR
   On every page. Images in /img: gatecore-logo.webp · app-store.svg · google-play.webp
   Both badges sit on the same 646x250 canvas, the visible box is 67% —
   the required clear space is inside the asset, so both get the same height.
   ══════════════════════════════════════════════════════════ */
.gc-appbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 0 0 26px; margin-bottom: 26px; border-bottom: 1px solid var(--border); }
.gc-appbar-ico { width: 44px; height: 44px; border-radius: 22%; flex-shrink: 0; display: block; box-shadow: 0 6px 18px rgba(109,40,217,0.22); }
.gc-appbar-txt { min-width: 220px; }
.gc-appbar-t { font-size: 13.5px; font-weight: 700; color: var(--text); }
.gc-appbar-s { font-size: 11.5px; color: var(--muted); font-weight: 300; margin-top: 3px; line-height: 1.65; }
.gc-appbar-badges { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-left: auto; }
.gc-appbar-badges a { display: inline-flex; align-items: center; transition: transform 0.2s, opacity 0.2s; }
.gc-appbar-badges a:hover { transform: translateY(-2px); opacity: 0.85; }
.gc-appbar-badges img { height: 58px; width: auto; display: block; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 980px) {
  .ab-grid, .story-grid, .gcwhy-grid { grid-template-columns: 1fr; gap: 40px; }
  .vals { grid-template-columns: 1fr 1fr; }
  .reviews-grid { grid-template-columns: 1fr 1fr; }
  .rev-card.feat { grid-row: auto; grid-column: 1 / -1; }
}
@media (max-width: 768px) {
  .ab-hero { padding: 80px 0 48px; }
  .story, .values-sec, .gcwhy, .reviews-sec, .about-cta { padding: 64px 0; }
  .pgrid { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 700px) {
  .gc-appbar { flex-direction: column; align-items: flex-start; gap: 14px; }
  .gc-appbar-badges { margin-left: 0; width: 100%; }
  .gc-appbar-badges a { flex: 1 1 150px; }
  .gc-appbar-badges img { height: 52px; max-width: 100%; }
}
@media (max-width: 560px) {
  .trusted-label { display: none; }
  .vals, .reviews-grid { grid-template-columns: 1fr; }
  .cc-foot { gap: 6px; }
  .cc-stat b { font-size: 17px; }
  .cc-row { font-size: 12px; }
}
@media (max-width: 380px) {
  .gc-appbar-badges img { height: 46px; }
}

/* ================================================================ dark theme */
html[data-theme="dark"] .ab-hero { background: radial-gradient(900px 420px at 10% 0%, color-mix(in srgb, #370bf4 15%, var(--card)) 0%, transparent 60%), radial-gradient(700px 400px at 95% 40%, color-mix(in srgb, #0897f7 15%, var(--card)) 0%, transparent 55%), var(--card); }
html[data-theme="dark"] .cc { background: var(--card); }
html[data-theme="dark"] .cc-top .ver { background: color-mix(in srgb, #18e786 15%, var(--card)); }
html[data-theme="dark"] .tev::before { background: var(--card); }
html[data-theme="dark"] .val { background: var(--card); }
html[data-theme="dark"] .pp { background: rgba(16,23,42,0.03); }
html[data-theme="dark"] .lg { background: var(--card); }
html[data-theme="dark"] .rev-card { background: var(--card); }
html[data-theme="dark"] .about-cta { background: linear-gradient(180deg,var(--card) 0%,var(--bg2) 100%); }
html[data-theme="dark"] .rev-card.feat { background: linear-gradient(135deg, #2e1065, #1e1b4b); border-color: #3b2a7a; }