/* Nurli Kelajak IT Academy — standalone design system.
   Deliberately not shared with landing.css/main.css (school brand) so the
   two products never visually blend into each other. */

:root {
  --a-bg: #070b14;
  --a-bg-soft: #0c1322;
  --a-surface: #101a2c;
  --a-surface-2: #16223a;
  --a-border: rgba(148, 163, 184, 0.14);
  --a-border-strong: rgba(148, 163, 184, 0.28);
  --a-text: #e7ecf7;
  --a-text-muted: #93a1bd;
  --a-text-faint: #64738f;
  --a-accent: #6366f1;
  --a-accent-2: #22d3ee;
  --a-accent-3: #a855f7;
  --a-gradient: linear-gradient(120deg, #6366f1 0%, #8b5cf6 45%, #22d3ee 100%);
  --a-gradient-btn: linear-gradient(120deg, #4f46e5 0%, #7c3aed 100%);
  --a-success: #34d399;
  --a-warning: #fbbf24;
  --a-danger: #f87171;
  --a-radius-sm: 0.5rem;
  --a-radius: 0.9rem;
  --a-radius-lg: 1.4rem;
  --a-shadow: 0 20px 50px -20px rgba(2, 6, 23, 0.7);
  --a-font: "Space Grotesk", "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --a-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
}

/* Themed scrollbars everywhere on this site — the page itself and any
   scrollable panel — instead of the browser's default opaque bar. */
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.35) transparent;
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background-color: rgba(148, 163, 184, 0.3);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background-color: rgba(148, 163, 184, 0.55);
}
::-webkit-scrollbar-corner {
  background: transparent;
}

.a-body {
  margin: 0;
  background: radial-gradient(circle at 15% -10%, rgba(99, 102, 241, 0.25), transparent 45%),
              radial-gradient(circle at 85% 0%, rgba(34, 211, 238, 0.15), transparent 40%),
              var(--a-bg);
  color: var(--a-text);
  font-family: var(--a-font);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.a-body * { box-sizing: border-box; }

.a-container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

a { color: inherit; }

.a-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--a-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--a-accent-2);
  background: rgba(34, 211, 238, 0.08);
  border: 1px solid rgba(34, 211, 238, 0.25);
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
}

/* ---------------------------------------------------------------- header */
.a-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--a-border);
  flex-wrap: nowrap;
}
/* The blur lives on a pseudo-element, not on .a-header itself: backdrop-filter
   on a real ancestor makes it a containing block for position:fixed
   descendants (like the mobile nav drawer below), which would trap that
   "fixed" overlay inside the header's own short box instead of the viewport. */
.a-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(7, 11, 20, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.a-dash-actions { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; justify-content: flex-end; }
/* The public header's hamburger-menu breakpoint hides bare .a-lang-switch —
   the dashboard header has no hamburger, so keep it visible there. */
.a-dash-actions .a-lang-switch { display: flex !important; }

.a-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--a-text);
  min-width: 0;
}
.a-brand__name { min-width: 0; overflow: hidden; }
.a-brand__name small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.a-brand__logo {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 0.65rem;
  object-fit: cover;
  flex: none;
}

.a-brand__mark {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 0.65rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--a-gradient);
  font-family: var(--a-font-mono);
  font-weight: 700;
  color: #fff;
  font-size: 0.95rem;
  flex: none;
}

.a-brand__name { display: flex; flex-direction: column; line-height: 1.15; }
.a-brand__name small { font-weight: 500; font-size: 0.68rem; color: var(--a-text-muted); letter-spacing: 0.03em; }

.a-header__right { display: flex; align-items: center; gap: 0.75rem; }
.a-nav { display: flex; align-items: center; gap: 1.6rem; }
.a-nav__links { display: flex; gap: 1.35rem; flex-wrap: wrap; }
.a-nav__link { text-decoration: none; color: var(--a-text-muted); font-size: 0.92rem; font-weight: 500; transition: color 0.15s ease; }
.a-nav__link:hover, .a-nav__link--active { color: var(--a-text); }

.a-nav__actions { display: flex; align-items: center; gap: 0.6rem; }

.a-menu-toggle {
  display: none;
  background: none;
  border: 1px solid var(--a-border-strong);
  border-radius: 0.5rem;
  color: var(--a-text);
  width: 2.3rem;
  height: 2.3rem;
  align-items: center;
  justify-content: center;
}
.a-menu-toggle svg { width: 1.2rem; height: 1.2rem; }

.a-lang-switch { display: flex; gap: 0.25rem; background: var(--a-surface); border: 1px solid var(--a-border); border-radius: 999px; padding: 0.2rem; }
.a-lang-switch button {
  border: none;
  background: transparent;
  color: var(--a-text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.3rem 0.55rem;
  border-radius: 999px;
  cursor: pointer;
}
.a-lang-switch button.is-active { background: var(--a-gradient-btn); color: #fff; }

/* ----------------------------------------------------------------- btns */
.a-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  height: 2.6rem;
  padding: 0 1.25rem;
  border-radius: var(--a-radius-sm);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.a-btn--primary { background: var(--a-gradient-btn); color: #fff; box-shadow: 0 10px 30px -12px rgba(99, 102, 241, 0.55); }
.a-btn--primary:hover { filter: brightness(1.12); transform: translateY(-1px); }
.a-btn--outline { background: rgba(255, 255, 255, 0.03); border-color: var(--a-border-strong); color: var(--a-text); }
.a-btn--outline:hover { border-color: var(--a-accent-2); color: var(--a-accent-2); }
.a-btn--ghost { background: transparent; color: var(--a-text-muted); }
.a-btn--ghost:hover { color: var(--a-text); }
.a-btn--sm { height: 2.1rem; padding: 0 0.9rem; font-size: 0.8rem; }
.a-btn--block { width: 100%; }
.a-btn--danger { background: rgba(248, 113, 113, 0.12); color: var(--a-danger); border-color: rgba(248, 113, 113, 0.35); }

/* ----------------------------------------------------------------- hero */
.a-hero { padding: 4.5rem 0 3.5rem; }
.a-hero__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 3rem; align-items: center; }
.a-hero h1 { font-size: clamp(2.1rem, 4vw, 3.4rem); line-height: 1.08; margin: 1rem 0 1rem; letter-spacing: -0.02em; }
.a-hero h1 .a-grad-text {
  background: var(--a-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.a-hero p.a-lead { color: var(--a-text-muted); font-size: 1.05rem; max-width: 46ch; margin-bottom: 1.75rem; }
.a-hero__actions { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 1.75rem; }
.a-hero__stats { display: flex; gap: 1.75rem; flex-wrap: wrap; }
.a-hero__stat strong { display: block; font-size: 1.4rem; font-family: var(--a-font-mono); background: var(--a-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.a-hero__stat span { font-size: 0.78rem; color: var(--a-text-muted); }

.a-sister-banner { background: var(--a-surface); border-top: 1px solid var(--a-border); border-bottom: 1px solid var(--a-border); padding: 0.9rem 0; }
.a-sister-banner__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.a-sister-banner__inner p { margin: 0; font-size: 0.88rem; color: var(--a-text-muted); }
.a-sister-banner__inner strong { color: var(--a-text); }
.a-sister-banner__inner .a-btn { flex: none; white-space: nowrap; }

.a-hero__panel {
  background: linear-gradient(160deg, var(--a-surface), var(--a-surface-2));
  border: 1px solid var(--a-border);
  border-radius: var(--a-radius-lg);
  padding: 1.6rem;
  box-shadow: var(--a-shadow);
  font-family: var(--a-font-mono);
  font-size: 0.85rem;
}
.a-hero__panel .a-dot-row { display: flex; gap: 0.4rem; margin-bottom: 1rem; }
.a-hero__panel .a-dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--a-border-strong); }
.a-hero__panel .a-dot:nth-child(1) { background: #f87171; }
.a-hero__panel .a-dot:nth-child(2) { background: #fbbf24; }
.a-hero__panel .a-dot:nth-child(3) { background: #34d399; }
.a-hero__panel pre { margin: 0; white-space: pre-wrap; color: var(--a-text-muted); }
.a-hero__panel .a-tok-kw { color: #c084fc; }
.a-hero__panel .a-tok-str { color: #34d399; }
.a-hero__panel .a-tok-fn { color: #60a5fa; }
.a-hero__panel .a-tok-cm { color: var(--a-text-faint); }

/* -------------------------------------------------------------- sections */
.a-section { padding: 3.5rem 0; }
.a-section--alt { background: var(--a-bg-soft); border-top: 1px solid var(--a-border); border-bottom: 1px solid var(--a-border); }
.a-section__head { max-width: 640px; margin-bottom: 2.2rem; }
.a-section__head h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 0.6rem 0 0.6rem; letter-spacing: -0.01em; }
.a-section__head p { color: var(--a-text-muted); margin: 0; }
.a-section__foot { margin-top: 2rem; text-align: center; }

/* ---------------------------------------------------------------- cards */
.a-grid { display: grid; gap: 1.25rem; }
.a-grid--3 { grid-template-columns: repeat(3, 1fr); }
.a-grid--2 { grid-template-columns: repeat(2, 1fr); }
.a-grid--lead { grid-template-columns: 1.35fr 1fr; }

.a-card {
  background: var(--a-surface);
  border: 1px solid var(--a-border);
  border-radius: var(--a-radius);
  padding: 1.5rem;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.a-card:hover { border-color: var(--a-border-strong); }

.a-course-card { display: flex; flex-direction: column; gap: 0.85rem; text-decoration: none; color: var(--a-text); overflow: hidden; }
.a-course-card:hover { transform: translateY(-3px); border-color: rgba(99, 102, 241, 0.5); box-shadow: 0 18px 40px -22px rgba(99, 102, 241, 0.5); }
.a-course-card__img {
  width: calc(100% + 3rem);
  margin: -1.5rem -1.5rem 0;
  height: 160px;
  object-fit: cover;
  background: var(--a-surface-2);
  border-bottom: 1px solid var(--a-border);
}
.a-course-card__img--ph {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--a-font-mono);
  font-size: 2.2rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  background: var(--a-gradient);
  letter-spacing: 0.02em;
}
.a-course-card__title { font-size: 1.15rem; font-weight: 700; margin: 0; }
.a-course-card__desc { color: var(--a-text-muted); font-size: 0.9rem; margin: 0; flex: 1; }
.a-course-card__meta { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.76rem; }
.a-tabs { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.a-badge {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-family: var(--a-font-mono); font-size: 0.72rem;
  padding: 0.25rem 0.55rem; border-radius: 999px;
  background: rgba(148, 163, 184, 0.1); color: var(--a-text-muted);
  border: 1px solid var(--a-border);
}
.a-badge svg { width: 0.85rem; height: 0.85rem; flex: none; }
.a-badge--accent { background: rgba(99, 102, 241, 0.14); color: #a5b4fc; border-color: rgba(99, 102, 241, 0.35); }
.a-badge--success { background: rgba(52, 211, 153, 0.12); color: var(--a-success); border-color: rgba(52, 211, 153, 0.3); }
.a-badge--warning { background: rgba(251, 191, 36, 0.12); color: var(--a-warning); border-color: rgba(251, 191, 36, 0.3); }
.a-badge--danger { background: rgba(248, 113, 113, 0.12); color: var(--a-danger); border-color: rgba(248, 113, 113, 0.3); }
.a-badge--cyan { background: rgba(34, 211, 238, 0.1); color: var(--a-accent-2); border-color: rgba(34, 211, 238, 0.3); }
.a-course-card__price { font-family: var(--a-font-mono); font-weight: 700; color: var(--a-accent-2); font-size: 1.05rem; }

.a-project-card img { width: 100%; height: 150px; object-fit: cover; border-radius: var(--a-radius-sm); margin-bottom: 0.9rem; background: var(--a-surface-2); }
.a-project-card__title { font-weight: 700; margin: 0 0 0.3rem; }
.a-project-card__by { font-size: 0.78rem; color: var(--a-text-faint); margin: 0 0 0.5rem; }
.a-project-card__desc { font-size: 0.88rem; color: var(--a-text-muted); margin: 0 0 0.75rem; }

.a-testimonial { display: flex; flex-direction: column; gap: 1rem; }
.a-testimonial__quote { font-size: 0.95rem; color: var(--a-text); }
.a-testimonial__quote::before { content: "\201C"; color: var(--a-accent-2); font-size: 1.4rem; }
.a-testimonial__person { display: flex; align-items: center; gap: 0.7rem; }
.a-testimonial__avatar { width: 2.4rem; height: 2.4rem; border-radius: 50%; object-fit: cover; background: var(--a-gradient); }
.a-testimonial__name { font-weight: 700; font-size: 0.88rem; }
.a-testimonial__role { font-size: 0.76rem; color: var(--a-text-faint); }

.a-mentor { text-align: center; }
.a-mentor__photo { width: 4.5rem; height: 4.5rem; border-radius: 50%; object-fit: cover; margin: 0 auto 0.8rem; background: var(--a-gradient); }
.a-mentor__name { font-weight: 700; margin: 0; }
.a-mentor__title { font-size: 0.8rem; color: var(--a-accent-2); margin: 0.15rem 0 0.6rem; }
.a-mentor__bio { font-size: 0.84rem; color: var(--a-text-muted); margin: 0; }

/* ------------------------------------------------------------------ faq */
.a-faq { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 0.7rem; }
.a-faq details {
  background: var(--a-surface); border: 1px solid var(--a-border); border-radius: var(--a-radius-sm);
  padding: 0.9rem 1.1rem;
}
.a-faq summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.a-faq summary::-webkit-details-marker { display: none; }
.a-faq summary::after { content: "+"; color: var(--a-accent-2); font-family: var(--a-font-mono); font-size: 1.1rem; }
.a-faq details[open] summary::after { content: "\2212"; }
.a-faq p { color: var(--a-text-muted); margin: 0.7rem 0 0; font-size: 0.9rem; }

/* -------------------------------------------------------------- contact */
.a-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; }
.a-contact__info h3 { margin-top: 0; }
.a-contact__row { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.9rem; color: var(--a-text-muted); font-size: 0.9rem; }
.a-contact__row svg { width: 1.1rem; height: 1.1rem; color: var(--a-accent-2); flex: none; }

/* ---------------------------------------------------------------- forms */
.a-field { margin-bottom: 1.1rem; }
.a-field label { display: block; font-size: 0.82rem; font-weight: 600; margin-bottom: 0.4rem; color: var(--a-text-muted); }
.a-input, textarea.a-input, select.a-input {
  width: 100%;
  background: var(--a-bg-soft);
  border: 1px solid var(--a-border-strong);
  border-radius: var(--a-radius-sm);
  color: var(--a-text);
  padding: 0.65rem 0.85rem;
  font-family: var(--a-font);
  font-size: 0.92rem;
  height: 2.7rem;
}
textarea.a-input { height: auto; resize: vertical; }
.a-input:focus, select.a-input:focus, textarea.a-input:focus { outline: none; border-color: var(--a-accent-2); }
.a-checkbox { width: 1.15rem; height: 1.15rem; accent-color: var(--a-accent); margin-top: 0.3rem; }

.a-pill-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.3rem; }
.a-pill-check {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.5rem 0.95rem; border-radius: 999px;
  border: 1px solid var(--a-border-strong); background: var(--a-bg-soft);
  color: var(--a-text-muted); font-size: 0.84rem; font-weight: 600;
  cursor: pointer; user-select: none; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.a-pill-check input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.a-pill-check:hover { border-color: var(--a-accent-2); color: var(--a-text); }
.a-pill-check:has(input:checked) { background: var(--a-gradient-btn); border-color: transparent; color: #fff; }
.a-pill-check:has(input:focus-visible) { outline: 2px solid var(--a-accent-2); outline-offset: 2px; }
.a-field .errorlist { list-style: none; margin: 0.35rem 0 0; padding: 0; color: var(--a-danger); font-size: 0.78rem; }
.a-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.2rem; }
.a-form-grid--3 { grid-template-columns: 1fr 1fr 1fr; }

.a-split { margin: 0 0 1.1rem; }
.a-split__toggle {
  display: inline-flex; align-items: center; gap: 0.45rem;
  background: transparent; border: 1px dashed var(--a-border-strong);
  color: var(--a-text-muted); border-radius: var(--a-radius-sm);
  padding: 0.5rem 0.9rem; font-size: 0.84rem; font-weight: 600; cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.a-split__toggle svg { width: 0.9rem; height: 0.9rem; }
.a-split__toggle:hover { border-color: var(--a-accent-2); color: var(--a-accent-2); }
.a-split__toggle--on { background: rgba(99, 102, 241, 0.1); border-style: solid; border-color: var(--a-accent); color: var(--a-text); }
#a-split-rows-wrap { margin-top: 0.75rem; padding: 0.9rem; background: var(--a-bg-soft); border: 1px solid var(--a-border); border-radius: var(--a-radius-sm); }
.a-split__row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 0.5rem; margin-bottom: 0.5rem; align-items: center; }
.a-split__row select.a-input, .a-split__row input.a-input { height: 2.4rem; }
.a-split__row .a-btn { height: 2.4rem; width: 2.4rem; padding: 0; font-size: 1.1rem; }
.a-split__footer { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin-top: 0.6rem; flex-wrap: wrap; }
.a-split__total { font-size: 0.82rem; color: var(--a-text-muted); }
.a-split__total b { color: var(--a-accent-2); font-family: var(--a-font-mono); }

@media (max-width: 480px) {
  .a-split__row { grid-template-columns: 1fr 1fr auto; }
}

.a-alert { border-radius: var(--a-radius-sm); padding: 0.75rem 1rem; font-size: 0.88rem; margin-bottom: 1rem; border: 1px solid; }
.a-alert--success { background: rgba(52, 211, 153, 0.1); border-color: rgba(52, 211, 153, 0.3); color: #6ee7b7; }
.a-alert--error { background: rgba(248, 113, 113, 0.1); border-color: rgba(248, 113, 113, 0.3); color: #fca5a5; }
.a-alert--info { background: rgba(99, 102, 241, 0.1); border-color: rgba(99, 102, 241, 0.3); color: #a5b4fc; }

/* --------------------------------------------------------------- footer */
.a-footer { border-top: 1px solid var(--a-border); padding: 2.5rem 0; margin-top: 2rem; }
.a-footer__grid { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem; }
.a-footer__text { color: var(--a-text-faint); font-size: 0.82rem; margin: 0; }
.a-footer__links { display: flex; gap: 1.2rem; }
.a-footer__links a { color: var(--a-text-muted); text-decoration: none; font-size: 0.82rem; }
.a-footer__links a:hover { color: var(--a-accent-2); }

/* --------------------------------------------------------- credentials & charts */
.a-cred-reveal {
  background: linear-gradient(160deg, rgba(52, 211, 153, 0.12), rgba(34, 211, 238, 0.06));
  border: 1px solid rgba(52, 211, 153, 0.35);
  border-radius: var(--a-radius);
  padding: 1.25rem 1.4rem;
  margin-bottom: 1.5rem;
}
.a-cred-reveal__head { display: flex; align-items: center; gap: 0.5rem; color: var(--a-success); margin-bottom: 0.3rem; }
.a-cred-reveal__head svg { width: 1.15rem; height: 1.15rem; }
.a-cred-reveal p { margin: 0 0 0.9rem; color: var(--a-text-muted); font-size: 0.86rem; }
.a-cred-reveal__row { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.5rem; }
.a-cred-reveal__row:last-child { margin-bottom: 0; }
.a-cred-reveal__row span { width: 4rem; flex: none; font-size: 0.78rem; color: var(--a-text-faint); font-weight: 600; }
.a-cred-reveal__row code {
  font-family: var(--a-font-mono); font-size: 0.95rem; font-weight: 700; color: var(--a-text);
  background: var(--a-bg-soft); border: 1px solid var(--a-border); border-radius: var(--a-radius-sm);
  padding: 0.35rem 0.7rem; flex: 1 1 auto; overflow-x: auto; white-space: nowrap;
}

.a-chart-wrap { position: relative; height: 220px; }

.a-mentor-cohort-card { position: relative; display: flex; flex-direction: column; }
.a-mentor-cohort-card h3 a.a-stretched-link { color: var(--a-text); text-decoration: none; }
.a-mentor-cohort-card h3 a.a-stretched-link:hover { color: var(--a-accent-2); }
.a-stretched-link::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.a-mentor-cohort-card .a-btn { position: relative; z-index: 1; }
.a-mentor-cohort-card:hover { border-color: rgba(99, 102, 241, 0.5); box-shadow: 0 18px 40px -22px rgba(99, 102, 241, 0.5); }

/* ------------------------------------------------------------- dashboard */
.a-dash { display: grid; grid-template-columns: 240px 1fr; min-height: calc(100vh - 4.4rem); }
.a-dash__sidebar { border-right: 1px solid var(--a-border); padding: 1.5rem 1rem; background: var(--a-bg-soft); }
.a-dash__sidebar nav { display: flex; flex-direction: column; gap: 0.2rem; }
.a-dash__sidebar a {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.55rem 0.75rem; border-radius: var(--a-radius-sm);
  color: var(--a-text-muted); text-decoration: none; font-size: 0.88rem; font-weight: 500;
}
.a-dash__sidebar a:hover { background: var(--a-surface); color: var(--a-text); }
.a-dash__sidebar a.is-active { background: var(--a-surface-2); color: var(--a-text); border: 1px solid var(--a-border-strong); }
.a-dash__sidebar .a-badge { margin-left: auto; }
.a-dash__sidebar a svg { width: 1.05rem; height: 1.05rem; flex: none; opacity: 0.75; }
.a-dash__sidebar a.is-active svg, .a-dash__sidebar a:hover svg { opacity: 1; }
.a-sidebar-nav__footer { display: none; }

.a-nav-badge {
  margin-left: auto;
  background: #ef4444;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  font-family: var(--a-font-mono);
  border-radius: 999px;
  min-width: 1.25rem;
  height: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.35rem;
  line-height: 1;
}
.a-dash__main { padding: 1.75rem; max-width: 1100px; }
.a-dash__messages { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.25rem; }
.a-dash__messages .a-alert { margin: 0; }
.a-dash__title { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.a-dash__title h1 { font-size: 1.4rem; margin: 0; }

.a-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.75rem; }
.a-kpis--3 { grid-template-columns: repeat(3, 1fr); }
.a-kpi { background: var(--a-surface); border: 1px solid var(--a-border); border-radius: var(--a-radius); padding: 1.1rem 1.25rem; }
.a-kpi span { display: block; font-size: 0.78rem; color: var(--a-text-muted); margin-bottom: 0.4rem; }
.a-kpi strong { font-size: 1.6rem; font-family: var(--a-font-mono); }

.a-panel { background: var(--a-surface); border: 1px solid var(--a-border); border-radius: var(--a-radius); padding: 1.25rem 1.4rem; margin-bottom: 1.5rem; }
.a-panel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; gap: 1rem; flex-wrap: wrap; }
.a-panel__head h2 { font-size: 1.05rem; margin: 0; }

.a-table-wrap { overflow-x: auto; }
.a-table { width: 100%; border-collapse: collapse; min-width: 640px; font-size: 0.87rem; }
.a-table th { text-align: left; color: var(--a-text-faint); font-weight: 600; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.03em; padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--a-border); }
.a-table td { padding: 0.65rem 0.7rem; border-bottom: 1px solid var(--a-border); vertical-align: middle; }
.a-table tr:last-child td { border-bottom: none; }
.a-table tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.012); }
.a-table tbody tr:hover td { background: rgba(99, 102, 241, 0.06); }
.a-td-name a { color: var(--a-text); text-decoration: none; font-weight: 600; }
.a-td-name a:hover { color: var(--a-accent-2); }
.a-td-actions { white-space: nowrap; }
.a-td-nowrap { white-space: nowrap; }
.a-td-metric { display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap; }
.a-td-truncate { display: inline-block; max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.a-td-finance { display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; white-space: nowrap; }
.a-td-finance__paid { font-family: var(--a-font-mono); font-weight: 600; font-size: 0.86rem; }
.a-td-finance .a-badge { white-space: nowrap; }

/* Thin, unobtrusive scrollbar for wide tables that still need horizontal scroll. */
.a-table-wrap { scrollbar-width: thin; scrollbar-color: rgba(148, 163, 184, 0.35) transparent; }
.a-table-wrap::-webkit-scrollbar { height: 8px; }
.a-table-wrap::-webkit-scrollbar-track { background: transparent; }
.a-table-wrap::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.3); border-radius: 999px; }
.a-table-wrap::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, 0.5); }

/* Card layout on narrow screens: thead hides, each row becomes a card with
   label/value pairs driven by the td's data-label (no markup duplication). */
@media (max-width: 760px) {
  .a-table--responsive { min-width: 0; width: 100%; }
  .a-table--responsive thead { display: none; }
  .a-table--responsive, .a-table--responsive tbody { display: block; width: 100%; }
  .a-table--responsive tr {
    display: block; width: 100%; margin-bottom: 0.75rem;
    background: var(--a-surface); border: 1px solid var(--a-border);
    border-radius: var(--a-radius); padding: 0.7rem 0.9rem; box-sizing: border-box;
  }
  .a-table--responsive tr:last-child { margin-bottom: 0; }
  .a-table--responsive td {
    display: flex; align-items: center; justify-content: space-between; gap: 0.9rem;
    padding: 0.45rem 0; border-bottom: 1px dashed var(--a-border); text-align: right;
    background: transparent !important;
  }
  .a-table--responsive td:last-child { border-bottom: none; }
  .a-table--responsive td[data-label]:not([data-label=""])::before {
    content: attr(data-label); flex: none; text-align: left;
    font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.03em; color: var(--a-text-faint);
  }
  .a-table--responsive td.a-td-name { padding-top: 0; }
  .a-table--responsive td.a-td-name a { font-size: 1rem; }
  .a-table--responsive td.a-td-actions { justify-content: flex-end; padding-bottom: 0; }
  .a-table--responsive .a-empty { padding: 1rem 0; }
}

.a-toolbar { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; margin-bottom: 1.25rem; }
.a-toolbar .a-input, .a-toolbar select.a-input { width: auto; min-width: 160px; height: 2.5rem; }

.a-funnel { display: flex; flex-direction: column; gap: 0.6rem; }
.a-funnel__row { display: grid; grid-template-columns: 110px 1fr 40px; align-items: center; gap: 0.7rem; font-size: 0.82rem; }
.a-funnel__bar { height: 0.55rem; border-radius: 999px; background: var(--a-bg-soft); overflow: hidden; }
.a-funnel__bar span { display: block; height: 100%; background: var(--a-gradient); }

.a-empty { color: var(--a-text-faint); font-size: 0.88rem; padding: 1.5rem 0; text-align: center; }

.a-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--a-border);
}
.a-list-row:last-child { border-bottom: none; }
.a-list-row__title { font-weight: 600; color: var(--a-text); text-decoration: none; }
a.a-list-row__title:hover { color: var(--a-accent-2); }
.a-list-row__meta { font-size: 0.78rem; color: var(--a-text-faint); margin-top: 0.15rem; }

.a-progress {
  height: 0.45rem;
  border-radius: 999px;
  background: var(--a-bg-soft);
  overflow: hidden;
  margin-top: 0.5rem;
}
.a-progress span { display: block; height: 100%; background: var(--a-gradient); border-radius: 999px; }
.a-progress--table { width: 80px; margin-top: 0; display: inline-block; vertical-align: middle; margin-right: 0.4rem; }
.a-kpi__hint { display: block; color: var(--a-text-faint); font-size: 0.72rem; margin-top: 0.35rem; }

.a-date-lock {
  display: flex; align-items: center; gap: 0.55rem;
  height: 2.7rem; padding: 0 0.85rem; margin: 0;
  background: var(--a-bg-soft); border: 1px solid var(--a-border-strong); border-radius: var(--a-radius-sm);
  font-family: var(--a-font-mono); font-weight: 700; font-size: 0.92rem; color: var(--a-text);
}
.a-date-lock svg { width: 1.1rem; height: 1.1rem; color: var(--a-accent-2); flex: none; }
.a-date-lock span { font-family: var(--a-font); font-weight: 500; font-size: 0.76rem; color: var(--a-text-faint); margin-left: auto; }

.a-grading-list { display: flex; flex-direction: column; gap: 0.75rem; }
.a-grading-card { border: 1px solid var(--a-border); border-radius: var(--a-radius-sm); padding: 0.9rem 1.1rem; background: var(--a-bg-soft); }
.a-grading-card__student { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.3rem; }
.a-grading-card__submission { font-size: 0.88rem; color: var(--a-text-muted); }
.a-grading-card__form {
  display: grid; grid-template-columns: 9rem 1fr auto; gap: 0.6rem; align-items: end;
  margin-top: 0.7rem; padding-top: 0.7rem; border-top: 1px dashed var(--a-border);
}
.a-grading-card__form label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.74rem; font-weight: 600; color: var(--a-text-faint); }
.a-grading-card__score-input { display: flex; align-items: center; gap: 0.4rem; }
.a-grading-card__score-input input { width: 5rem; }
.a-grading-card__score-input span { font-size: 0.78rem; color: var(--a-text-faint); white-space: nowrap; }

@media (max-width: 640px) {
  .a-grading-card__form { grid-template-columns: 1fr; }
  .a-grading-card__form button { width: 100%; }
}

.a-att-options { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.a-att-option { cursor: pointer; }
.a-att-option input { position: absolute; opacity: 0; pointer-events: none; }
.a-att-option span {
  display: inline-block;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 600;
  border: 1px solid var(--a-border-strong);
  color: var(--a-text-muted);
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.a-att-option input:checked + span { color: #fff; }
.a-att-option--present input:checked + span { background: #059669; border-color: #059669; }
.a-att-option--absent input:checked + span { background: #dc2626; border-color: #dc2626; }
.a-att-option--late input:checked + span { background: #d97706; border-color: #d97706; }
.a-att-option--excused input:checked + span { background: #6366f1; border-color: #6366f1; }

/* ----------------------------------------------------------------- auth */
.a-auth {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 3rem;
  align-items: center;
  max-width: 1160px;
  margin: 0 auto;
  padding: 3.5rem 1.5rem;
  min-height: calc(100vh - 8rem);
}
.a-auth__title { font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1.12; letter-spacing: -0.02em; margin: 1rem 0 0.9rem; }
.a-auth__brand .a-lead { color: var(--a-text-muted); max-width: 42ch; margin-bottom: 1.5rem; }
.a-auth__points { list-style: none; margin: 0 0 1.75rem; padding: 0; display: flex; flex-direction: column; gap: 0.65rem; }
.a-auth__points li { display: flex; align-items: center; gap: 0.6rem; color: var(--a-text-muted); font-size: 0.9rem; }
.a-auth__points svg { width: 1.05rem; height: 1.05rem; color: var(--a-success); flex: none; }
.a-auth__panel { max-width: 420px; }

.a-auth__form { display: flex; justify-content: center; }
.a-auth__card { width: 100%; max-width: 400px; padding: 2rem; text-align: center; }
.a-auth__logo { width: 3rem; height: 3rem; border-radius: 0.85rem; object-fit: cover; margin: 0 auto 1.1rem; }
.a-auth__card h2 { margin: 0 0 0.4rem; font-size: 1.3rem; }
.a-auth__subtitle { color: var(--a-text-muted); font-size: 0.86rem; margin: 0 0 1.5rem; }
.a-auth__card form { text-align: left; }

@media (max-width: 900px) {
  .a-auth { grid-template-columns: 1fr; gap: 2rem; padding: 2.5rem 1.5rem; min-height: 0; }
  .a-auth__brand { text-align: center; }
  .a-auth__points { align-items: center; }
  .a-auth__panel, .a-auth__brand .a-lead { margin-left: auto; margin-right: auto; }
  .a-auth__panel { display: none; }
}

/* ---------------------------------------------------------- course page */
.a-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--a-text-muted);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 1.4rem;
  transition: color 0.15s ease;
}
.a-back-link:hover { color: var(--a-accent-2); }
.a-back-link svg { width: 1rem; height: 1rem; }

.a-course-hero {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 2.5rem;
  align-items: center;
  margin-bottom: 2.5rem;
}
.a-course-hero__title { font-size: clamp(1.8rem, 3.5vw, 2.7rem); letter-spacing: -0.02em; margin: 0 0 0.75rem; line-height: 1.12; }
.a-course-hero .a-lead { color: var(--a-text-muted); font-size: 1.05rem; margin: 0; }
.a-course-hero__img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  border-radius: var(--a-radius-lg);
  border: 1px solid var(--a-border);
  box-shadow: var(--a-shadow);
  background: var(--a-surface-2);
}
.a-course-hero__img--ph {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--a-font-mono);
  font-size: 4rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  background: var(--a-gradient);
}

.a-course-layout {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 1.75rem;
  align-items: start;
}
.a-course-layout--wide-right { grid-template-columns: 1fr 1.3fr; }
.a-course-desc { color: var(--a-text-muted); white-space: pre-line; line-height: 1.75; margin: 0; }

.a-enroll-card { position: sticky; top: 5.5rem; }
.a-enroll-card__label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--a-text-faint);
  margin-bottom: 0.3rem;
}
.a-enroll-card__price {
  font-family: var(--a-font-mono);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--a-accent-2);
  line-height: 1.1;
}
.a-enroll-card__price small { font-size: 0.95rem; color: var(--a-text-muted); font-weight: 600; }
.a-enroll-card__note { color: var(--a-text-faint); font-size: 0.82rem; margin: 0.4rem 0 0; }
.a-enroll-card__divider { height: 1px; background: var(--a-border); margin: 1.25rem 0 1rem; }

.a-cohort-item { padding: 0.8rem 0; border-bottom: 1px solid var(--a-border); }
.a-cohort-item:last-child { border-bottom: none; }
.a-cohort-item strong { display: block; margin-bottom: 0.2rem; }
.a-cohort-item__meta { font-size: 0.8rem; color: var(--a-text-muted); margin-bottom: 0.45rem; }

@media (max-width: 980px) {
  .a-course-hero { grid-template-columns: 1fr; gap: 1.5rem; }
  .a-course-hero__img { height: 200px; order: -1; }
  .a-course-layout { grid-template-columns: 1fr; }
  .a-enroll-card { position: static; }
}

/* ------------------------------------------------------------------ misc */
.a-hidden-mobile { display: initial; }
.a-visible-mobile { display: none; }

.a-btn:focus-visible, .a-input:focus-visible, .a-faq summary:focus-visible {
  outline: 2px solid var(--a-accent-2);
  outline-offset: 2px;
}
.a-eyebrow svg { width: 0.9rem; height: 0.9rem; flex: none; }

@media (max-width: 980px) {
  .a-hero__grid { grid-template-columns: 1fr; }
  .a-hero__panel { order: -1; }
  .a-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .a-contact { grid-template-columns: 1fr; }
  .a-dash { grid-template-columns: 1fr; }
  .a-dash__menu-toggle { display: flex; }
  .a-dash-actions .a-dash__exit-link { display: none; }
  .a-dash__sidebar { border-right: none; border-bottom: none; padding: 0; }
  .a-dash__sidebar nav { display: none; }
  .a-dash__sidebar.is-open::before {
    content: "";
    position: fixed;
    inset: var(--a-header-h, 4.2rem) 0 0 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 49;
  }
  .a-dash__sidebar.is-open nav {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    position: fixed;
    top: var(--a-header-h, 4.2rem);
    left: 0;
    bottom: 0;
    width: 55%;
    max-width: 320px;
    background: var(--a-bg);
    padding: 1.25rem 1rem;
    overflow-y: auto;
    z-index: 50;
    border-top: 1px solid var(--a-border);
    border-right: 1px solid var(--a-border);
    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.35);
  }
  .a-dash__sidebar.is-open nav .a-sidebar-nav__footer {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--a-border);
  }
  .a-kpis { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .a-nav__links, .a-lang-switch, .a-nav__actions .a-btn--outline { display: none; }
  .a-menu-toggle { display: flex; }
  .a-header.is-nav-open::after {
    content: "";
    position: fixed;
    inset: var(--a-header-h, 4.2rem) 0 0 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 49;
  }
  .a-header.is-nav-open .a-nav {
    position: fixed;
    top: var(--a-header-h, 4.2rem);
    left: 0;
    bottom: 0;
    width: 55%;
    max-width: 320px;
    background: var(--a-bg);
    flex-direction: column;
    align-items: stretch;
    padding: 1.5rem;
    overflow-y: auto;
    z-index: 50;
    border-right: 1px solid var(--a-border);
    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.35);
  }
  .a-header.is-nav-open .a-nav__links { display: flex; flex-direction: column; gap: 0.25rem; }
  .a-header.is-nav-open .a-nav__link { padding: 0.6rem 0.25rem; font-size: 1.02rem; border-bottom: 1px solid var(--a-border); }
  .a-header.is-nav-open .a-lang-switch { display: flex; align-self: flex-start; margin-top: 1rem; }
  .a-header.is-nav-open .a-nav__actions { display: flex; flex-direction: column; align-items: stretch; margin-top: 1rem; gap: 0.6rem; }
  .a-header.is-nav-open .a-nav__actions .a-btn--outline { display: inline-flex; }
  .a-header.is-nav-open .a-nav__actions .a-btn { height: 2.8rem; }
  .a-grid--3, .a-grid--2 { grid-template-columns: 1fr; }
  .a-form-grid, .a-form-grid--3 { grid-template-columns: 1fr; }
  .a-kpis { grid-template-columns: 1fr 1fr; gap: 0.7rem; }
  .a-kpi { padding: 0.9rem 1rem; }
  .a-kpi strong { font-size: 1.3rem; }
  .a-hero { padding: 3rem 0 2.5rem; }
  .a-hidden-mobile { display: none; }
  .a-visible-mobile { display: initial; }
}

@media (max-width: 480px) {
  .a-container { padding: 0 1rem; }
  .a-header { padding: 0.8rem 1rem; }
  .a-dash__main { padding: 1.1rem 1rem; }
  .a-panel { padding: 1rem; }
  .a-card { padding: 1.15rem; }
  .a-course-card__img { width: calc(100% + 2.3rem); margin: -1.15rem -1.15rem 0; height: 140px; }
  .a-hero__panel { font-size: 0.74rem; padding: 1.1rem; }
  .a-hero__stats { gap: 1.1rem; }
  .a-hero__actions .a-btn { width: 100%; }
  .a-section { padding: 2.4rem 0; }
  .a-dash__sidebar.is-open nav { padding: 1rem 0.75rem; }
  .a-dash__sidebar a { font-size: 0.82rem; padding: 0.45rem 0.6rem; }
  .a-toolbar .a-input, .a-toolbar select.a-input { min-width: 0; flex: 1 1 45%; }
  .a-dash__title h1 { font-size: 1.15rem; }
  .a-cred-reveal__row { flex-wrap: wrap; }
  .a-cred-reveal__row span { width: auto; }
  .a-cred-reveal__row code { flex-basis: 100%; }
}

/* -------------------------------------------------------- certificate --- */

.a-cert-page { overflow-x: hidden; }

.a-cert-verified {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  background: rgba(52, 211, 153, 0.1);
  border: 1px solid rgba(52, 211, 153, 0.35);
  border-radius: var(--a-radius);
  padding: 1rem 1.2rem;
  margin-bottom: 1.75rem;
  color: var(--a-success);
}
.a-cert-verified svg { width: 1.6rem; height: 1.6rem; flex: none; margin-top: 0.1rem; }
.a-cert-verified strong { display: block; font-size: 1rem; margin-bottom: 0.2rem; }
.a-cert-verified p { margin: 0; color: var(--a-text-muted); font-size: 0.86rem; }
.a-cert-verified > div { min-width: 0; }

/*
 * The certificate itself is a fixed-size "picture": its internal layout
 * never reflows or stacks. Inline script in certificate_verify.html
 * measures the available width and sets CSS `zoom` on .a-cert-card, so on
 * a phone it shrinks uniformly exactly like an <img> would instead of the
 * text rewrapping into a different layout. Unlike `transform: scale()`,
 * `zoom` is accounted for during layout itself, so .a-cert-scale-wrap
 * auto-sizes correctly around it with no manual height bookkeeping (and
 * no risk of that bookkeeping going stale and clipping the card).
 */
.a-cert-scale-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
}

.a-cert-card {
  width: 720px;
  flex: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  background: #fdfaf3;
  border-radius: var(--a-radius-lg);
  padding: 0.5rem;
  box-shadow: var(--a-shadow);
  background-image: linear-gradient(135deg, #f4c14d 0%, #6366f1 50%, #22d3ee 100%);
}
.a-cert-card__border {
  background: #fdfaf3;
  border: 1px solid rgba(15, 23, 42, 0.15);
  border-radius: calc(var(--a-radius-lg) - 0.3rem);
  padding: 2.6rem 3.5rem;
  text-align: center;
  color: #1e2333;
}
.a-cert-card__head { display: flex; align-items: center; justify-content: center; gap: 0.85rem; margin-bottom: 1.5rem; }
.a-cert-card__logo { width: 3.4rem; height: 3.4rem; object-fit: contain; flex: none; }
.a-cert-card__brand { text-align: left; line-height: 1.2; }
.a-cert-card__brand strong { display: block; font-size: 1.35rem; color: #1e2333; }
.a-cert-card__brand span { font-size: 0.82rem; letter-spacing: 0.12em; color: #6b7280; }

.a-cert-card__eyebrow {
  margin: 0 0 1.4rem;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: #8b5cf6;
  font-weight: 600;
}
.a-cert-card__lead { margin: 0 0 0.5rem; font-size: 0.92rem; color: #6b7280; }
.a-cert-card__name {
  font-family: "Playfair Display", "Space Grotesk", serif;
  font-size: 2.6rem;
  font-weight: 700;
  margin: 0 0 1.1rem;
  color: #14172a;
  border-bottom: 2px solid rgba(99, 102, 241, 0.35);
  display: inline-block;
  padding-bottom: 0.5rem;
}
.a-cert-card__body { max-width: 46rem; margin: 0 auto 1.8rem; color: #374151; line-height: 1.7; }

.a-cert-card__meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  border-top: 1px dashed rgba(15, 23, 42, 0.18);
  border-bottom: 1px dashed rgba(15, 23, 42, 0.18);
  padding: 1.1rem 0;
  margin-bottom: 2.4rem;
}
.a-cert-card__meta span { display: block; font-size: 0.68rem; letter-spacing: 0.08em; color: #8b93a7; text-transform: uppercase; }
.a-cert-card__meta strong { display: block; margin-top: 0.25rem; font-size: 0.92rem; color: #1e2333; }

.a-cert-card__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.a-cert-card__sign { flex: 1; font-size: 0.8rem; color: #4b5563; }
.a-cert-card__sign-line { display: block; height: 1px; background: rgba(15, 23, 42, 0.3); margin-bottom: 0.5rem; }
.a-cert-card__sign strong { display: block; color: #1e2333; font-size: 0.86rem; }

/* The stamp overlaps the line + "Direktor" + org name instead of sitting
   cleanly above them — stamped across the printed text, the way a real
   seal is, so it can't be cropped out as a clean, reusable signature. */
.a-cert-card__sign--stamped { position: relative; }
.a-cert-card__stamp {
  position: absolute;
  left: 50%;
  top: -2.6rem;
  transform: translateX(-50%);
  max-width: 175px;
  max-height: 7.6rem;
  object-fit: contain;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 2;
}
.a-cert-card__qr { flex: none; }
.a-cert-card__qr img { width: 84px; height: 84px; display: block; }

.a-cert-actions { display: flex; justify-content: center; gap: 0.75rem; margin: 1.75rem 0; flex-wrap: wrap; }
.a-cert-details p { margin: 0 0 0.5rem; font-size: 0.88rem; overflow-wrap: break-word; }

/* Zero page margin also makes Chrome drop its default header/footer
   (url, date, page number) since there's no margin box left to draw them
   in — the printed certificate then fills the sheet edge to edge, with
   .a-cert-card__border providing its own inset instead of page margin.
   `size: landscape` hints the print dialog to default to that orientation
   (the certificate is meant to be printed on landscape A4). */
@page {
  margin: 0;
  size: landscape;
}

@media print {
  html, body, .a-body, main { height: 100%; }
  .a-header, .a-footer, .a-cert-verified, .a-cert-actions, .a-cert-details { display: none !important; }
  body, .a-body { background: #fff !important; margin: 0 !important; }
  /* The gap to the physical page edge lives here (equal on all 4 sides),
     not on @page — @page margin:0 is what keeps Chrome's header/footer
     text off the page, so the framing has to come from padding instead.
     Centering both axes means leftover space (the design's aspect ratio
     rarely matches the page's exactly) splits evenly top/bottom and
     left/right instead of collecting on one side. */
  .a-section.a-cert-page {
    height: 100%;
    padding: 0.4in !important;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .a-container { max-width: none !important; padding: 0 !important; margin: 0 !important; width: auto; }
  .a-cert-scale-wrap { width: auto; }
  .a-cert-card {
    /* Wider base (not just zoom) so it fills the landscape width without
       also inflating the height proportionally — zoom still enlarges the
       text/padding together for the "bigger words" ask. */
    zoom: 1.25 !important;
    opacity: 1 !important;
    width: 860px !important;
    max-width: none;
    margin: 0 !important;
    padding: 0;
    box-shadow: none;
    background-image: none;
    background: #fff;
  }
  .a-cert-card__border {
    padding: 0.5in 0.65in;
    border: 2px solid #1e2333;
    border-radius: 0;
  }
}