/* ==========================================================================
   TABLE OF CONTENTS
   1. Reset / base
   2. Theme variables (:root) + design palette notes
   3. Shared dark theme — mobile profile components
   4. @media (prefers-reduced-motion: reduce)
   5. Landing components, in page order (+ typography: Inter body / Roboto display)
   6. @media (min-width: 441px) / 541px / 641px
   7. @media (min-width: 1024px) — landing desktop, then profile desktop
   8. @media (max-width: 1023.98px) — landing mobile deltas
   9. Profile scope — shared bits (body.profile, .gp-profile)
  10. @media (max-width: 1331px) — profile panel deltas
   ========================================================================== */

/* --- Reset / base --- */
*, *::before, *::after { box-sizing: border-box; }
/* ==========================================================================
   PALETTE — extracted from misc/design/index_mobile.pdf
   (DeviceRGB fills/strokes; confirmed against a color-accurate render)
   #f7f2e9  page background, off-white beige (render adds paper grain ≈ #f2e8db)
   #005c3e  dark green  — petition/form card surface + headings & footer text
   #80c342  bright green — CTA surfaces (progress bar, "İMZA VER" buttons,
            "imza ver, yola çık!" card) and the GREENPEACE logo
   #df5d3d  red/orange  — decorative dashed path (stroke dash [6] 0),
            progress-bar fill, illustration accents
   #414042  primary text
   #8d8c8e  muted text (captions, "Hedef: 50.000", "%21 tamamlandı…")
   #f2f4f6  surface / input background (Ad Soyad, E-Posta fields)
   #fcf6d9  pale cream tint — panel/strip inside the bright-green CTA card
   #ffffff  white surfaces (social buttons, consent box, step circles)
   #bfc5cb  light border / divider lines
   #000000  line-art outlines (hero art) + Apple logo
   #96a0a9  anti-aliasing artifact (1px) — ignore
   Google sign-in logo brand only (not page palette):
   #4283f2  #e94335  #f9ba05  #34a653
   #0d6efb  "Gizlilik Politikası" link on the landing petition card
   Added for the desktop design (GP_ZirveyeTasi_Desktop.pdf — authored in CMYK,
   sampled from a color-accurate render):
   #90a241  olive  — "SEVİYE 2" level pill
   #a48943  ochre  — "SEVİYE 3" level pill
   #b97040  terracotta — "SEVİYE 4" level pill
   ========================================================================== */
:root {
  --bg: #0f0f12;
  --surface: #17171c;
  --surface-2: #1e1e25;
  --border: #2a2a33;
  --text: #e8e8ee;
  --text-dim: #9a9aa8;
  --accent: #6b7280;
  --accent-glow: rgba(107, 114, 128, 0.25);
  --radius: 14px;
  --radius-sm: 10px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
html, body {
  margin: 0;
  padding: 0;
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
}
/* A non-visible overflow on the root stops <body>'s own overflow from
   propagating to the viewport, so a page can clip its own bleed instead of
   the viewport doing it (which would kill vertical scrolling). */
html { overflow-x: clip; }
body {
  background: var(--bg);
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}
/* Level copy in profile.html (hero, lock hint, invite card): only the block
   matching the user's badge is shown. The :not() form raises specificity so it
   beats the mobile rules further down that set `display: flex` on some of
   these elements, and unlike `display: initial` it leaves the shown block's
   own display value untouched. */
body.profile:not([data-badge="1"]) .pm-level-1,
body.profile:not([data-badge="2"]) .pm-level-2,
body.profile:not([data-badge="3"]) .pm-level-3,
body.profile:not([data-badge="4"]) .pm-level-4,
body.profile:not([data-badge="5"]) .pm-level-5 { display: none; }
/* --- Layout --- */
.shell {
  max-width: 480px;
  margin: 0 auto;
  padding: 32px 20px 48px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.hero { text-align: center; padding: 24px 0 8px; }
.hero__title { margin: 0 0 6px; font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; }
.hero__sub { margin: 0; color: var(--text-dim); font-size: 0.95rem; }
/* --- Cards --- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.card__title { margin: 0; font-size: 1rem; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; }
.card__footer { margin: 0; text-align: center; color: var(--text-dim); font-size: 0.9rem; }
/* --- Form --- */
.form { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font-size: 0.85rem; color: var(--text-dim); }
.field__input {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  color: var(--text);
  font-size: 1rem;
  font-family: inherit;
  outline: none;
  transition: border-color 140ms ease, background 140ms ease;
}
.field__input:focus { border-color: var(--accent); background: #202028; }
.form__error {
  margin: 0;
  color: #f87171;
  font-size: 0.85rem;
  text-align: center;
}
/* --- Buttons --- */
.btn {
  border: none;
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: opacity 140ms ease, background 140ms ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { opacity: 0.85; }
.btn--primary { background: var(--accent); color: white; box-shadow: 0 0 24px var(--accent-glow); }
.btn--ghost { background: transparent; color: var(--text-dim); border: 1px solid var(--border); }
.link {
  background: none;
  border: none;
  color: var(--accent);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* --- Inviter banner --- */
.inviter {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  text-align: center;
}
.inviter__text { margin: 0; font-size: 0.9rem; color: var(--text-dim); }
.inviter__name { color: var(--text); font-weight: 600; }
/* --- Badge --- */
.badge { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 8px 0 4px; }
.badge__ring {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  border: 3px solid var(--accent);
  background: radial-gradient(circle at 50% 30%, var(--surface-2), var(--surface));
  display: grid;
  place-items: center;
  box-shadow: 0 0 32px var(--accent-glow), inset 0 0 20px var(--accent-glow);
  transition: border-color 300ms ease, box-shadow 300ms ease;
}
.badge__tier { font-size: 2.25rem; font-weight: 700; color: var(--accent); transition: color 300ms ease; }
.badge__count { margin: 0; color: var(--text-dim); font-size: 0.95rem; }
.badge__count span { color: var(--text); font-weight: 600; }
.badge__next { margin: 0; color: var(--text-dim); font-size: 0.85rem; }
/* --- Share --- */
.share { display: flex; gap: 8px; }
.share__input {
  flex: 1;
  min-width: 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  color: var(--text-dim);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem;
  outline: none;
}
/* --- Invitees --- */
.invitees { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.invitees__item {
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 0.9rem;
  color: var(--text);
  word-break: break-all;
}
.invitees__empty { color: var(--text-dim); font-size: 0.9rem; padding: 4px 0; }
/* --- Footer --- */
.footer { text-align: center; padding-top: 8px; }
/* --- Scroll reveal --- */
[data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity 420ms ease, transform 420ms cubic-bezier(0.22, 1, 0.36, 1); }
[data-reveal].is-visible { opacity: 1; transform: none; }
/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}
/* ==========================================================================
   LANDING PAGE — index.html only.
   Every rule below is scoped to .landing (the <body> class) so profile.html
   keeps the shared dark theme defined above, untouched.
   ========================================================================== */
.landing,
body.profile {
  --gp-bg: #f4edde;
  --gp-bg-bright: #f9f5ea;
  --gp-green-dark: #27513b;
  --gp-green: #8eac66;
  --gp-red: #c15e46;
  --gp-red-pale: #cd7d61;
  --gp-olive: #90a241;
  --gp-ochre: #a48943;
  --gp-terracotta: #b97040;
  --gp-text: #414042;
  --gp-muted: #8d8c8e;
  --gp-surface: #f2f4f6;
  --gp-cream: #fcf6d9;
  --gp-white: #ffffff;
  --gp-border: #bfc5cb;
  --gp-link: #0d6efb;
}
/* Landing-only presentation: paper fill, ink colour, bleed clipping. The
   palette above is shared with the desktop profile scope; this block is not. */
.landing {
  background: var(--gp-bg) url("/img/back-desktop.jpg") center top / cover no-repeat;
  color: var(--gp-text);
  /* Clip both axes at the page box: route art that hangs past the last section
     no longer extends the page, while the sideways bleed stays as it was. */
  overflow: clip;
  --gp-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --gp-font-display: "Roboto", Arial, sans-serif;
  font-family: var(--gp-font-body);
}
/* Desktop-only blocks stay hidden below 1024px; the single desktop media query
   at the end of this section switches .gp-desktop / .gp-mobile. */
.landing .gp-desktop { display: none !important; }
/* --- Page wrapper --- */
.landing .gp-page {
  max-width: 480px;
  margin: 0 auto;
  padding: 16px 20px 40px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.relative {position: relative; }
/* --- a. Header --- */
.landing .gp-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.landing .gp-brand { display: flex; align-items: center; gap: 8px; }
.landing .gp-brand__logo { display: block; height: 26px; width: auto; }
.landing .gp-login {
  border: 2px solid var(--gp-green);
  background: transparent;
  color: var(--gp-green);
  border-radius: 999px;
  padding: 8px 16px;
  font: inherit;
  font-size: 0.8rem;
  transition: background 140ms ease, color 140ms ease;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
}
.landing .gp-login:hover { background: var(--gp-green); color: var(--gp-green-dark); }
/* --- k. Decorative dashed path (mobile only; the desktop block hides it) --- */
.landing .gp-path {
  height: 76px;
  margin: 4px 0;
  background: url("/img/route-line-1.svg") center / 100% auto no-repeat;
}
.landing .gp-path--flip { transform: scaleX(-1); background-image: url("/img/route-line-5.svg"); transform: scale(2.7) rotate(9deg);}
.landing .gp-path:last-of-type { background-image: url("/img/route-line-3.svg"); transform: scale(2.7) rotate(-11deg); }
.landing .gp-path.demand-path { background-image: url("/img/route-line-3.svg"); transform: scale(2.7) rotate(-11deg);  top: 40px;
  position: relative;
  height: 100px;
} 
.landing .gp-path.last {
  background-image: url("/img/route-line-3.svg");
  transform: scale(-2.7) rotate(-41deg);
  margin-left: calc(-60% + 50vw);
  width: 420px;
  z-index:1
}
/* --- b. Hero --- */
.landing .gp-hero { display: flex; flex-direction: column; gap: 10px; }
.landing .gp-hero__title {
  margin: 24px 0 -6px;
  text-align: center;
  font-size: 2.9rem;
  line-height: 1;
  transform: rotate(-6deg) skew(-6deg);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.landing .gp-dark { color: var(--gp-green-dark); }
/*.landing .gp-bright { color: var(--gp-green); }*/
.landing .gp-hero__sub {
  margin: 0;
  text-align: center;
  font-size: 1.2rem;
  transform: rotate(-6deg) skew(-6deg);
  font-weight: 700;
}
.landing .gp-hero__img { display: block; width: 100%; max-width: 340px; height: auto; margin: 0 auto; }
/* Mobile hero artwork: full-bleed, its natural 1800x642 ratio. */
.landing .gp-hero__art { display: block;
  margin: calc(30px - 10vw) auto 10px;
  background-image: url(/img/hero-image.jpg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position-y: bottom;
  width: 140%;
  height: auto;
  max-width: none;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  height: 33vw;
  background-repeat: repeat;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
/* --- c. Intro --- */
.landing .gp-intro { margin: 0; text-align: center; font-size: 1.05rem; font-weight: 600; line-height: 1.45; }
/* --- d. Petition / signup card --- */
.landing .gp-petition {
  background: transparent;
  color: var(--gp-white);
  border-radius: 20px;
}
.landing .gp-form { display: flex; flex-direction: column; gap: 12px; padding: 24px; background-color: var(--gp-green-dark);border-radius: 0 0 14px 14px;}
.landing .gp-petition__title {
  margin: 0;
  text-align: center;
  font-size: 1.5rem;
  color: var(--gp-green);
  font-weight: 900;
}
.landing .gp-petition__lead { margin: 0; text-align: center; font-size: 1rem; font-weight: 600; }
.landing .gp-asks { margin: 0; padding: 0; list-style: none; text-align: center; }
.landing .gp-asks li { font-size: 0.95rem; line-height: 1.4; }
.landing .gp-oauth {
  position: relative;
  display: block;
  width: 100%;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: #eef2ee;
  border-radius: 10px;
  padding: 13px 46px;
  font: inherit;
  font-family: var(--gp-font-body);
  font-size: 0.95rem;
  font-weight: 400;
  text-align: center;
  cursor: pointer;
  transition: background 140ms ease;
}
.landing .gp-oauth:hover { background: rgba(255, 255, 255, 0.08); }
.landing .gp-oauth__icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  height: 20px;
  width: auto;
}
.landing .gp-oauth__label { display: block; }
.landing .gp-or { display: flex; align-items: center; gap: 10px; margin: 2px 0; font-size: 0.9rem; }
.landing .gp-or::before,
.landing .gp-or::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: 0.4; }
.landing .gp-field { display: flex; flex-direction: column; gap: 4px; }
.landing .gp-name-row { display: flex; flex-direction: column; gap: 10px; }
/* The PDF shows placeholder-only fields; the labels stay in the DOM, visually
   hidden, so every input is still labelled for assistive tech. */
.landing .gp-field__label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  font-weight: 700;
}
.landing .gp-input {
  background: var(--gp-surface);
  border: none;
  border-radius: 10px;
  padding: 13px 14px;
  font: inherit;
  font-size: 1rem;
  color: var(--gp-text);
  outline: none;
  transition: box-shadow 140ms ease;
}
.landing .gp-input::placeholder { color: var(--gp-muted); }
.landing .gp-input:focus { box-shadow: 0 0 0 3px var(--gp-green); }
.landing .gp-consent { display: flex; align-items: flex-start; gap: 10px; }
.landing .gp-consent__box { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--gp-green); }
.landing .gp-consent__text { margin: 0; font-size: 0.82rem; line-height: 1.4; }
.landing .gp-policy {
  color: var(--gp-link);
  text-underline-offset: 2px;
  font-weight: 400;
}
.landing .gp-submit {
  border: none;
  border-radius: 999px;
  background: var(--gp-green);
  color: var(--gp-green-dark);
  padding: 14px 18px;
  font: inherit;
  font-size: 1.15rem;
  cursor: pointer;
  transition: opacity 140ms ease;
  font-weight: 900;
  letter-spacing: 0.02em;
}
.landing .gp-submit:active { opacity: 0.85; }
.landing .gp-error { margin: 0; text-align: center; font-size: 0.85rem; color: #ffd9d2; }
/* --- Login card + inviter banner (landing) --- */
.landing .gp-login-card {
  background: var(--gp-green);
  border: 1px solid var(--gp-border);
  border-radius: 20px;
  padding: 20px 18px;
}
.landing .gp-login-card .gp-submit { 
  margin-top:24px;
  background: var(--gp-green-dark);
  color: var(--gp-green);
}
.landing .gp-login-card__foot { margin: 14px 0 0; text-align: center;}
.landing .gp-login-card__foot button { color: var(--gp-bg); margin: -8px 0 16px; }
.landing .gp-inviter {
  border-radius: 12px;
  padding: 12px 16px;
  text-align: center;
  margin-bottom: -22px;
  padding-bottom: 34px;
  z-index: -1;
  position: relative;
  background-color: transparent;
  transition: none;
}
.landing .gp-inviter__text { margin: 0; font-size: 0.9rem; color: var(--gp-muted); }
.landing .gp-inviter__name { color: var(--gp-text); font-weight: 700; }
.landing .gp-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--gp-green);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.gp-link-muted {
  color: var(--gp-muted);
  line-height: 1.5em;
  font-size: 1.25rem;
  font-weight: 700;
}
.landing .gp-link:hover {
  text-decoration: none;
}
/* --- e. Progress --- */
.landing .gp-progress {
  background: var(--gp-green);
  border: none;
  border-radius: 14px 14px 0 0;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.landing .gp-progress__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.landing .gp-progress__count { margin: 0; color: var(--gp-green-dark); font-size: 0.95rem; }
.landing .gp-progress__count strong { font-size: 1.35rem; }
.landing .gp-progress__goal {
  margin: 0;
  color: var(--gp-bg);
  font-size: 0.95rem;
  font-weight: 700;
}
.landing .gp-progress__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #50754c;
  border-radius: 999px;
  padding: 7px 12px;
}
.landing .gp-progress__point {
  position: absolute;
  width: 19px;
  height: 19px;
  /* Pull back half the box so the marker sits centred on its `left` position. */
  margin-left: -9.5px;
  background: url("/img/progress-ring.svg") center / auto 100% no-repeat;
}
.landing .gp-progress__point.red { background-image: url("/img/progress-point.svg"); }
/* Marker 1..6 sit on the artwork's own circle centres (3.69% .. 96.30% of the
   track), so the rule, the markers and the fill stay in register at any width. */
#gp-progress__point_1 { left: 3.69%; }
#gp-progress__point_2 { left: 21.9%; }
#gp-progress__point_3 { left: 40.73%; }
#gp-progress__point_4 { left: 58.95%; }
#gp-progress__point_5 { left: 78.15%; }
#gp-progress__point_6 { left: 96.3%; }
.landing .gp-progress__home,
.landing .gp-progress__flag { flex: none;   height: 20px; width: auto; margin: -4px 0 0 -6px; }
.landing .gp-progress__track {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 19px;
  background: url("/img/progress-bar-line.svg") center / 100% 100% no-repeat;
}
.landing .gp-progress__fill {
  position: absolute;
  left: 5%;
  top: 50%;
  transform: translateY(-46%);
  width: 0%;
  height: 4px;
  border-radius: 999px;
  background: var(--gp-red);
  transition: 0.4s;
}
.landing .gp-progress__note {
  margin: 0;
  text-align: center;
  color: var(--gp-green-dark);
  font-size: 0.8rem;
  font-weight: 700;
}
/* --- f. Context --- */
.landing .gp-context { text-align: center; order: 4;   font-size: 1.25rem; }
.landing .gp-context__title {
  margin: 0 0 10px;
  color: var(--gp-green-dark);
  font-size: 1.35rem;
  line-height: 1.25;
  font-weight: 700;
  text-align: center;
  margin-top: 24px;
}
.landing .gp-context__body { margin: 0 auto 48px; font-size: 1.35rem; line-height: 1.375; text-align: center; }
/* --- g. Demands --- */
.landing .gp-demands { display: flex; flex-direction: column; gap: 18px; }
.landing .gp-demands__title {
  margin: -12px 0 12px;
  text-align: center;
  color: var(--gp-red);
  font-size: 2.6rem;
  font-weight: 700;
}
.landing .gp-demand { display: flex; flex-direction: column; gap: 12px; }
.landing .gp-demand__title {
  margin: 0;
  text-align: center;
  font-size: 2.5rem;
  font-style: normal;
  line-height: 1.15;
  transform: rotate(-6deg) skew(-6deg);
  font-weight: 900;
  text-transform: uppercase;
}
.landing .gp-demand__title .gp-dark,
.landing .gp-demand__title .gp-bright { display: block; }
.landing .gp-demand__title .gp-bright { transform: skew(-6deg); color: var(--gp-green);}
.landing .gp-demand__media { display: flex; flex-direction: column; gap: 12px; }
/* The illustration runs edge to edge and tucks under the rotated headline. */
.landing .gp-demand__img { display: block; width: calc(100% + 40px); max-width: none; height: auto; margin: -26px 0 0 -20px; }
.landing .gp-demand__body { margin: 0; text-align: center; font-size: 1.35rem; line-height: 1.5; }
.landing .gp-demand__mobile_img { 
  max-width: none;
  width: 100vw;
  margin-left: calc(50% - 50vw); /* Centers it and makes it full width */
  margin-right: calc(50% - 50vw);
  height: 50vw;
  background-repeat: repeat;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-top: calc(80px - 30vw);
 }
.landing .gp-demand:last-child .gp-demand__mobile_img { 
  height: 55vw;
  margin-top: calc(40px - 30vw);
}
/* --- h. Campaign CTA --- */
.landing .gp-campaign {
  background: var(--gp-green);
  border-radius: 20px;
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 8px;
  margin-bottom: 308px;
  height: 570px;
}
.landing .gp-campaign__title {
  margin: 0;
  text-align: center;
  color: var(--gp-bg);
  font-size: 2.4rem;
  font-weight: 900;
}
.landing .gp-campaign__body { margin: 0 0 24px 0; text-align: center; font-size: 1.35rem; line-height: 1.5; color: var(--gp-black); }
.landing .gp-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.landing .gp-step { display: flex; align-items: center; }
.landing .gp-step__pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--gp-cream);
  color: var(--gp-green-dark);
  border-radius: 999px;
  padding: 6px 14px 6px 6px;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0 6px 6px 0;
}
.landing .gp-step__num {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gp-green-dark);
  color: var(--gp-white);
  font-size: 1.15rem;
}
/*.landing .gp-step:not(:last-child)::after { content: "→"; margin: 0 2px 0 6px; color: var(--gp-green-dark); font-weight: 800; }*/
.landing .gp-campaign__img { display: block; width: 100%; max-width: none; height: auto; margin: 0; border-radius: 14px; }
/* --- i. Status --- */
.landing .gp-status { text-align: center; display: flex; flex-direction: column; gap: 6px; }
.landing .gp-status__title {
  margin: 0;
  color: var(--gp-green-dark);
  font-size: 1.85rem;
  line-height: 1.25;
  padding: 0 15px;
  font-weight: 900;
}
.landing .gp-status__level {
  margin: 6px 0 0;
  color: var(--gp-green);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.landing .gp-status__note { margin: 0; color: var(--gp-black); font-size: 1.35rem; height: 64px;}
.landing .gp-dots,
body.profile .gp-dots { display: flex; justify-content: center; gap: 12px; margin: 12px 0 120px; }
.landing .gp-dot,
body.profile .gp-dot { width: 20px; height: 20px; border-radius: 50%; background-color: var(--gp-white); }
.landing .gp-dot--on,
body.profile .gp-dot--on {
  background: radial-gradient(circle at 50% 50%, var(--gp-green) 0 4px, var(--gp-white) 3px);;
}
.landing .gp-status__teaser { display: flex; flex-direction: column; gap: 6px;   margin: 48px 0 -48px; }
.landing .gp-status__sticker { display: block; width: 100%; max-width: none; height: auto; margin: 10px auto 0; border-radius: 12px; }
/* Desktop-only level cards: one illustration per tier. These URLs used to sit
   in inline style attributes in index.html. */
.landing .gp-levels__list > :nth-child(1) .gp-level-card__img { background-image: url("/img/level-1.png"); }
.landing .gp-levels__list > :nth-child(2) .gp-level-card__img { background-image: url("/img/level-2.png"); }
.landing .gp-levels__list > :nth-child(3) .gp-level-card__img { background-image: url("/img/level-3.png"); }
.landing .gp-levels__list > :nth-child(4) .gp-level-card__img { background-image: url("/img/level-4.png"); }
.landing .gp-levels__list > :nth-child(5) .gp-level-card__img { background-image: url("/img/level-5.png"); }
/* --- j. Footer CTA --- */
.landing .gp-footer { text-align: center; display: flex; flex-direction: column; gap: 12px; margin-bottom:-210px; z-index: 3;}
.landing .gp-footer__title {
  margin: 0;
  color: var(--gp-green-dark);
  font-size: 1.6rem;
  font-weight: 900;
}
.landing .gp-cta-btn {
  display: block;
  background: var(--gp-green);
  color: var(--gp-green-dark);
  border-radius: 999px;
  padding: 16px;
  font-size: 1.25rem;
  text-decoration: none;
  transition: opacity 140ms ease;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.landing .gp-cta-btn:active { opacity: 0.85; }
.landing .gp-footer__link { margin: 0; color: var(--gp-muted); font-size: 1.25rem; }
/* ==========================================================================
   TYPOGRAPHY — two Google Fonts families only.
   The PDF embeds Inter-Regular (body copy) plus Roboto-Bold/Black and
   HelveticaNeue-CondensedBlack (display type). Roboto's display role is
   Condensed here, so both Roboto faces map onto "Roboto Condensed"
   (700/900). The PDF embeds no italic faces — every slant is a transform.
   ========================================================================== */
/* Display / condensed type */
.landing .gp-login,
.landing .gp-hero__title,
.landing .gp-hero__sub,
.landing .gp-petition__title,
.landing .gp-submit,
.landing .gp-progress__count,
.landing .gp-progress__count strong,
.landing .gp-progress__goal,
.landing .gp-progress__note,
.landing .gp-context__title,
.landing .gp-demands__title,
.landing .gp-demand__title,
.landing .gp-campaign__title,
.landing .gp-step__pill,
.landing .gp-status__title,
.landing .gp-status__level,
.landing .gp-footer__title,
.landing .gp-cta-btn,
.landing .gp-field__label,
.landing .gp-policy {
  font-family: var(--gp-font-display);
}
.landing .gp-progress__count,
.landing .gp-progress__count strong { font-weight: 900; }
/* Body copy */
.landing .gp-intro,
.landing .gp-petition__lead,
.landing .gp-asks li,
.landing .gp-oauth,
.landing .gp-or,
.landing .gp-input,
.landing .gp-consent__text,
.landing .gp-error,
.landing .gp-link,
.landing .gp-context__body,
.landing .gp-demand__body,
.landing .gp-campaign__body,
.landing .gp-status__note,
.landing .gp-footer__link,
.landing .gp-inviter__text {
  font-family: var(--gp-font-body);
}

.landing #gp-google-signup {
  overflow: hidden;
  width: 100%;
  /*background-color: #202124;*/
  background-color: #1a73e8;
  padding: 2.3px 4px;
  border-radius: 14px;
  transition: 0.2s;
}

.landing #gp-google-signup:hover {
  background-color: #5093eb;
}

body.profile .pm-header button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: 999px;
  padding: 6px 24px;
  font-family: var(--gp-font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 140ms ease;
  margin: 0 2px;
  background: var(--gp-green-dark);
  color: var(--gp-white);
}

@media (max-width: 401px) {
  body.profile .pm-btn--dark {
    flex-grow: 1;
  }
}
@media (min-width: 441px) {
  .landing .gp-hero__title { font-size: 3.6rem; color: var(--gp-green); }
  .landing .gp-hero__sub { font-size: 1.3rem; }
  .landing .gp-name-row { flex-direction: row; gap: 16px; }
  .landing .gp-name-row .gp-field { flex: 1 1 0; min-width: 0; }
}
@media (min-width: 541px) {
  .landing .gp-hero__sub { font-size: 1.6rem; }
}
@media (min-width: 641px) {
  .landing .gp-hero__sub { font-size: 2rem; }
}

.landing .gp-demands__title {
  font-size: 2.5rem;
  letter-spacing: -1px;
  grid-column: 1 / -1;
  margin-bottom: 40px;
  text-align: center;
}
.landing .gp-demand__title {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  align-content: start;
  justify-items: center;
  padding: 46px 26px 0;
  transform: none;
  font-style: normal;
  font-size: 1.7rem;
  text-align: center;
  /*text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45), 0 0 3px rgba(0, 0, 0, 0.35);
  */;
}
.landing .gp-demand__body {
  font-size: 1.2rem;
  font-weight: 700;
  min-width: 150px;
  text-align: left;
  margin: 24px 0 54px;
  padding-right: 16px;
}
/* --- "Ne istiyoruz?" — two demands side by side, title inside the disc --- */
.landing .gp-demands {
  margin-top: 24px;
  display: block;
  position: relative;
}
.landing .gp-demand { flex-direction: row; align-items: center; gap: 22px; padding: 12px 0; }
.landing .gp-demand__media {
  position: relative;
  flex: none;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  /*overflow: hidden;*/
  background: #829677;
  background-repeat: repeat;
  background-image: none;
  background-size: auto;
  background-image: url(/img/demand.png);
  background-size: 220px;
  background-repeat: no-repeat;
  background-position: 20px 30px;
}
.landing .gp-demand__media:nth-of-type(2) { 
  background-color: var(--gp-red-pale); 
  background-image: url(/img/demand2.png);
  background-size: 196px;
  background-position: 36px 50px;
}
.landing .gp-demands__grid { 
  display: grid;
  grid-template-columns: 100%;
}
.landing .gp-demands__grid > * { 
}
.landing .gp-demands__grid #demand-1-img { grid-column: 1; grid-row: 1;}
.landing .gp-demands__grid #demand-1-txt { grid-column: 1; grid-row: 2;}
.landing .gp-demands__grid #demand-2-img { grid-column: 1; grid-row: 3; justify-self: end;}
.landing .gp-demands__grid #demand-2-txt { grid-column: 1; grid-row: 4; text-align: right; padding: 0 0 0 16px;}

.landing .gp-demand__img { 
  max-width: none;
  width: 380px;
  height: 300px;
  margin: 0;
  object-fit: contain;
  top: 2px;
  left: -6px;
  position: relative;
 }
.landing .gp-demand__media:nth-of-type(2) .gp-demand__img { 
  width: 400px;
  top: 70px;
  left: -66px;
}
.landing .gp-demand__title .gp-dark,
.landing .gp-demand__title .gp-bright { display: block; color: var(--gp-bg); transform: rotate(-6deg) skew(-6deg); }
.landing .gp-demand__title .gp-dark { color: #333; }

/* ==========================================================================
   DESKTOP — everything below applies at >= 1024px only.
   The desktop type scale comes first so the layout rules that follow it win
   on equal specificity; the shared per-breakpoint element sizes live up with
   their components in the LANDING section above.
   ========================================================================== */
@media (min-width: 1024px) {
  /* --- desktop layout ---
     One template: .gp-desktop blocks are desktop-only, .gp-mobile blocks are
     mobile-only. Below 1024px the mobile page keeps the mobile markup. --- */
  /* --- visibility switch --- */
  .landing .gp-mobile { display: none !important; }
  .landing .gp-desktop { display: block !important; }
  .landing .gp-demands { display: block !important; }
  /* --- page shell: paper background + 1440px container --- */
  .landing {
    background: var(--gp-bg) url("/img/back-desktop.jpg") center top / cover no-repeat;
  }
  .landing .gp-page {
    position: relative;
    max-width: 1440px;
    padding: 28px 60px 120px;
    gap: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    column-gap: 48px;
  }
  /* --- desktop type scale (design is 1440 pt wide, so 1 pt = 1 px at 1440) --- */
  .landing .gp-brand__logo { height: 34px; }
  .landing .gp-login { font-size: 1.125rem; padding: 12px 28px; }
  /* --- header spans the full width --- */
  .landing .gp-header { grid-column: 1 / -1; margin-bottom: 64px; }
  .landing .gp-login-card { grid-column: 2; }
  .landing .gp-path { display: none; }
  .landing .gp-hero__title {
    order: 1;
    text-align: left;
    font-size: 6.5rem;
    transform: rotate(-6deg) skew(-6deg);
    margin: 0 auto;
  }
  .landing .gp-hero__sub {
    font-size: 2.6rem;
    transform: rotate(-6deg) skew(-6deg);
    order: 2;
    text-align: center;
    margin: 6px auto;
    max-width: 640px;
  }
  /* --- hero / form two-column band --- */
  .landing .gp-hero {
    grid-column: 1;
    grid-row: 2 / 4;
    align-self: start;
    gap: 0;
    margin: 36px 0;
  }
  .landing .gp-hero__img {
    order: 3;
    max-width: none;
    margin: -140px -10%;
    background-image: url(/img/hero-image.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position-y: bottom;
    width: 120%;
    height: 440px;
    min-width: 1050px;
  }
  .landing .gp-intro {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 120px auto 0;
  }
  /* --- paragraphs + sections span both columns --- */
  .landing .gp-intro,
  .landing .gp-inviter,
  .landing .gp-context,
  .landing .gp-demands,
  .landing .gp-campaign,
  .landing .gp-status,
  .landing .gp-footer { grid-column: 1 / -1; }
  .landing .gp-petition__title { font-size: 2.2rem; }
  .landing .gp-petition__lead,
  .landing .gp-asks li { font-size: 1.125rem; margin-bottom: 8px; }
  .landing .gp-oauth { font-size: 1.125rem; padding: 16px 56px; }
  .landing .gp-oauth__icon { left: 20px; height: 24px; }
  .landing .gp-name-row { flex-direction: row; gap: 16px; }
  .landing .gp-name-row .gp-field { flex: 1 1 0; min-width: 0; }
  .landing .gp-input { font-size: 1.125rem; padding: 15px 18px; }
  .landing .gp-consent__text { font-size: 0.875rem; }
  .landing .gp-submit { font-size: 1.6rem; }
  .landing .gp-petition { grid-column: 2; grid-row: 3; align-self: start; border-radius: 20px; z-index: 9999; }
  .landing .gp-progress__count { font-size: 1.25rem; }
  .landing .gp-progress__count strong { font-size: 2.1rem; }
  .landing .gp-progress__goal {
    font-size: 1.125rem;
    color: var(--gp-bg);
  }
  .landing .gp-progress__note {
    font-size: 1rem;
    text-align: center;
    color: var(--gp-green-dark);
    padding: 0 10px;
  }
  .landing .gp-progress { grid-column: 2; grid-row: 2; align-self: start; border-radius: 14px 14px 0 0; background: var(--gp-green); }
  /* --- progress panel inside the form column --- */
  .landing .gp-progress__head { flex-direction: row; align-items: baseline; }
  .landing .gp-context__title { font-size: 1.375rem; margin-top: 18px; }
  .landing .gp-context__body { font-size: 1.375rem; }
  .landing .gp-context { margin-top: 28px; order: 4; }
  .landing .gp-context__title,
  .landing .gp-context__body { max-width: 750px; margin-left: auto; margin-right: auto; }
  .landing .gp-campaign__title {
    font-size: 2.75rem;
    text-align: left;
    margin-bottom: 20px;
  }
  .landing .gp-campaign__body {
    font-size: 1.25rem;
    text-align: left;
    margin: 0 54px 34px 0;
    font-weight: 700;
    color: #333;
  }
  .landing .gp-step__pill { font-size: 1.125rem; }
  /* --- campaign card: text left, artwork right --- */
  .landing .gp-campaign {
    margin-top: 64px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    column-gap: 44px;
    align-items: center;
    padding: 40px 54px 24px 72px;
    position:relative;
    height: unset;
    margin-bottom: 2px;
  }
  .landing .gp-campaign__column {  grid-column: 1; }
  .landing .gp-steps { justify-content: flex-start; }
  .landing .gp-campaign__img {
    grid-column: 2;
    align-self: flex-start;
    width: 100%;
    max-width: 340px;
    margin: 0px 0 -92px 0;
    border-radius: 16px;
    z-index: 99;
  }
  .landing .gp-status__title { font-size: 2.5rem; }
  .landing .gp-status__level { font-size: 1.5rem; }
  .landing .gp-status__note { font-size: 1.125rem; }
  /* --- status / level route --- */
  .landing .gp-status { margin-top: 64px; }
  .landing .gp-status__title:first-of-type { font-size: 1.4rem;   max-width: 480px; margin: 42px auto 0; font-weight: 400;}
  .landing .gp-status__title:last-of-type { font-size: 2.4rem; color: var(--gp-red); }
  .landing .gp-levels { margin-top: 26px; z-index: 1; }
  .landing .gp-levels__route { 
    position: relative; 
    height: 48px;
    margin: 0 96px -14px;
    background-image: url(/img/level-green-route.svg);
    background-size: calc(100% - 24px);
    background-position: center;
    background-repeat: no-repeat; 
  }
  .landing .gp-levels__line { display: block; width: 100%; height: 100%; }
  .landing .gp-levels__mark {
    position: relative;
    top: -7%;
    width: 48px;
    height: 48px;
    transform: translate(-50%, -50%);
    left: 10%;
  }
  .landing .gp-levels__mark--check { filter: none; }
  .landing .gp-levels__mark:nth-of-type(2) { left: 0; }
  .landing .gp-levels__mark:nth-of-type(3) { left: 25%; }
  .landing .gp-levels__mark:nth-of-type(4) { left: 50%; }
  .landing .gp-levels__mark:nth-of-type(5) { left: 75%; }
  .landing .gp-levels__mark:nth-of-type(6) { left: 100%; }
  .landing .gp-levels__list { list-style: none; margin: 0; padding: 0; display: flex; gap: 14px; align-items: stretch; }
  .landing .gp-level-card {
    flex: 1 1 0;
    min-width: 0;
    background: var(--gp-bg-bright);
    border-radius: 16px;
    padding: 14px 12px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
  }
  .landing .gp-level-card__pill {
    margin: 0;
    border-radius: 999px;
    padding: 5px 16px;
    background: var(--gp-green);
    color: var(--gp-white);
    font-family: var(--gp-font-display);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
  }
  .landing .gp-level-card__pill--2 { background: var(--gp-olive); }
  .landing .gp-level-card__pill--3 { background: var(--gp-ochre); }
  .landing .gp-level-card__pill--4 { background: var(--gp-terracotta); }
  .landing .gp-level-card__pill--5 { background: var(--gp-red); }
  .landing .gp-level-card__title {
    margin: 0;
    font-family: var(--gp-font-display);
    font-weight: 900;
    text-transform: uppercase;
    font-size: 1.2rem;
    line-height: 1.1;
    color: var(--gp-green-dark);
    height: 40px;
  }
  .landing .gp-level-card__img {
    width: 100%;
    max-width: 250px;
    height: 120px;
    margin: 0 0 -6px 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center; 
  }
  .landing .gp-level-card__body { margin: auto 0 0; font-size: 1.1rem; line-height: 1.35; font-weight:400;}
  .landing .gp-footer__title { font-size: 2.1rem; line-height:1.2em; }
  .landing .gp-cta-btn {
    font-size: 1.5rem;
    min-width: 340px;
    margin: 0 auto;
  }
  .landing .gp-footer__link { font-size: 1.125rem; }
  /* --- footer --- */
  .landing .gp-footer { margin-top: 64px; padding-bottom: 0; gap: 14px; }
  .landing .gp-footerbar {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: -20px;
    padding: 48px 0 120px;
    font-size: 1rem;
    color: var(--gp-muted);
  }
  .landing .gp-footerbar__copy { margin: 0; }
  .landing .gp-footerbar__logo { height: 26px; width: auto;   position: absolute; left: 50%; transform: translateX(-50%);}
  .landing .gp-footerbar__links { margin: 0; display: flex; gap: 20px; }
  .landing .gp-footerbar__links a { color: var(--gp-text); text-decoration: underline; }
  .landing .gp-footerbar__links a:hover { text-decoration: none; }
  /* --- decorative route art (replaces the CSS dashed .gp-path) ---
     Painted behind every section: the markup sits first inside .gp-page.
     Kept in the empty side gutters so dashes never cross running text. --- */
  .landing .gp-route { position: absolute; pointer-events: none; }
  .landing .gp-route--1 { top: 150px; left: -150px; width: 660px; transform: scale(1.25) rotate(-30deg); }
  .landing .gp-route--2 {   top: -42px; left: 487px; width: 329px; transform: scale(5) rotate(-11deg); }
  .landing .gp-route--3 {   top: 65px; left: calc(100% - 400px); width: 330px; position: absolute; transform: scale(2.4) rotate(20deg); }
  .landing .gp-route--4 {   bottom: 266px; left: 70px; width: auto; height: 420px; transform: scale(3) rotate(-30deg); }
  .landing .gp-route--5 { bottom: 153px; right: 10px; width: 430px; transform: scale(1.7) rotate(-25deg); }
  /* --- page: paper background, 1440px container --- */
  body.profile {
    background: var(--gp-bg) url("/img/back-desktop.jpg") center top / cover no-repeat;
    color: var(--gp-text);
    font-family: var(--gp-font-body);
    overflow: clip;
  }
  body.profile .profile-mobile { display: none !important; }
  body.profile .gp-profile {
    display: block;
    position: relative;
    max-width: 1440px;
    margin: 0 auto;
    padding: 28px 60px 0;
  }
  /* Content paints above the decorative route art. */
  body.profile .gp-profile > header,
  body.profile .gp-profile > section,
  body.profile .gp-profile > div,
  body.profile .gp-profile > footer { position: relative; z-index: 1; }
  body.profile .gp-profile > footer { margin-bottom: 30px;  z-index: 0;}
  body.profile #pf-share-btn img { height: 56px;}
  body.profile #pf-share-btn {     color: var(--gp-white);
    font-size: 1.5rem;
        max-height: 64px;
    margin: 12px 0;
    grid-row: 1; grid-column: 4;
    padding: 0px 24px; }
  body.profile .gp-profile__tier {
    display: inline-block;
    margin: 0 0 20px;
    padding: 9px 28px;
    border-radius: 999px;
    background: var(--gp-green);
    color: var(--gp-white);
    font-family: var(--gp-font-display);
    font-size: 1.625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
  }
  body.profile .gp-profile__headline {
    margin: 0 0 22px;
    font-family: var(--gp-font-display);
    font-size: clamp(3.6rem, 6.2vw, 4.8rem);
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--gp-green-dark);
  }
  body.profile .gp-profile__lead { margin: 0 0 26px; max-width: 620px; font-size: 1.25rem; line-height: 1.5;   margin-left: 16px;}
  body.profile .gp-profile__lead-title { display: block; margin-bottom: 6px; color: var(--gp-green); font-size: 1.5rem; font-weight: 700; }
  body.profile .gp-profile__lock {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0;
    padding: 16px 26px;
    border-radius: 14px;
    background: var(--gp-bg-bright);
    color: var(--gp-green-dark);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.4;
  }
  body.profile .gp-profile__lock img { flex: none;  height: 56px;
  width: auto;
  margin-left: -9px; }
  /* --- c. Green status bar (full bleed) --- */
  body.profile .gp-profile__statusbar {
    display: flex;
    align-items: center;
    gap: 48px;
    margin: 0 calc(50% - 50vw);
    padding: 26px calc(50vw - 50%);
    background: var(--gp-green);
  }
  body.profile .gp-profile__corner { flex: 0 0 240px; width: 240px; height: auto; align-self: flex-end; }
  /* --- decorative dashed route art --- */
  body.profile .gp-profile__route { position: absolute; z-index: 0; pointer-events: none; }
  body.profile .gp-profile__route--a { top: 366px;
    left: 790px;
    width: 520px;
    transform: scale(2) rotate(20deg); }
  body.profile .gp-profile__route--b {     top: -170px;
    left: 20px;
    width: 460px;
    transform: scale(2.7) rotate(50deg);
  }
  body.profile .gp-profile__route--c {   bottom: 516px;
  left: calc(50% + 120px);
  width: 470px;
  transform: scale(2.2) rotate(-66deg); }
  /* --- a. Header --- */
  body.profile .gp-profile__header { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 44px; }
  body.profile .gp-profile__logo { height: 34px; width: auto; }
  body.profile .gp-profile__logout {
    border: 0;
    background: none;
    padding: 0;
    color: var(--gp-muted);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
  }
  /* --- buttons --- */
  body.profile .gp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    border-radius: 999px;
    padding: 6px 24px;
    font-family: var(--gp-font-display);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 140ms ease;
    margin: 0 2px;
  }
  body.profile .gp-btn:hover { opacity: 0.88; }
  body.profile .gp-btn img { display: block; height: 40px; width: auto; margin:  0 0px 0 -15px; }
  body.profile .gp-btn--dark { background: var(--gp-green-dark); color: var(--gp-white); }
  body.profile .gp-btn--green { background: var(--gp-green); color: var(--gp-green-dark); }
  body.profile .gp-btn--light { background: var(--gp-green); color: var(--gp-white); }
  body.profile .gp-btn--light span { font-size: 1.375rem; line-height: 1; }
  body.profile .gp-btn--outline { border: 2px solid var(--gp-green); background: transparent; color: var(--gp-green-dark); padding: 12px 24px; }
  body.profile .gp-btnrow { display: grid; grid-template-columns: 50% 50%; gap: 12px; margin-top: auto; justify-content:center;}
  body.profile .gp-btnrow > * { padding: 6px 32px; }
  body.profile .gp-profile__goal .gp-btn { flex: none; }
  body.profile .gp-panel--dark .gp-btn { align-self: flex-start; margin-top: 10px; padding: 16px 30px; width: 100%; max-height: 56px;}
  /* --- b. Hero --- */
  body.profile .gp-profile__hero { display: flex; align-items: center; gap: 48px; margin: 0 0 56px; }
  body.profile .gp-profile__hero-copy { flex: 1 1 0; min-width: 0; }
  body.profile .gp-profile__hero-art { position: relative;
    flex: 0 0 44%;
    height: 420px;
    left: 9%;
    top: 30px;}
  body.profile .gp-profile__hero-art::before {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    left: 20px;
    top: 11px;
    border-radius: 50%;
    background: var(--gp-red-pale);
  }
  /* level-1.png is a disc crop with an opaque paper matte, so it is shown
     inside a circle: the matte then reads as the disc interior. */
  body.profile .gp-profile__hero-art img {
    position: relative;
    left: -54px;
    top: 10px;
    width: 420px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    object-fit: contain;
    min-width: 430px;
  }
  body.profile .gp-statusbar__cell { display: flex; align-items: center; gap: 16px; margin: 0;     flex-grow: 3;}
  body.profile .gp-statusbar__icon { flex: none; width: 62px; height: 62px; padding: 13px; border-radius: 50%; background: var(--gp-white); }
  body.profile .gp-statusbar__stack { display: flex; flex-direction: column; gap: 2px; }
  body.profile .gp-statusbar__strong { font-family: var(--gp-font-display); font-size: 1.5rem; font-weight: 700; color: var(--gp-green-dark); line-height: 1.5rem; }
  body.profile .gp-statusbar__dim { font-size: 1.25rem; color: var(--gp-white); }
  body.profile .gp-statusbar__cell--progress { flex: 1 1 0; min-width: 0; margin-left: auto;     flex-grow: 42; }
  body.profile .gp-statusbar__track { display: block; min-width: 140px; height: 22px; border-radius: 999px; background: var(--gp-white); overflow: hidden;     max-width: 360px; }
  body.profile .gp-statusbar__fill { display: block; width: 0; height: 64%; border-radius: 999px; background: var(--gp-green); transition: width 400ms ease;     transform: translate(4px,28%); }
  body.profile .gp-statusbar__note { flex: none;  font-size: 1.25rem;
    color: var(--gp-white);
    line-break: nowrap;
    line-height: 1.25rem;
    margin-top: 6px;}
  body.profile .gp-statusbar__flex { flex: 1 1 0;     margin: 8px 0 -8px; }
  body.profile .gp-statusbar__separator {     width: 2px;
    height: 60px;
    background: var(--gp-bg); }
  /* --- d. Level route: five discs + markers + tier pills --- */
  body.profile .gp-profile__levels { display: flex; align-items: flex-start; gap: 24px; margin: 56px 0; 
    background-repeat: no-repeat;
    background-position: right 20px top 20px;
    background-size: 240px;
    background-image: url(/img/ekip.svg);
    width: 100vw;
    margin-left: calc(50% - 50vw); /* Centers it and makes it full width */
    margin-right: calc(50% - 50vw);
  }
  body.profile .gp-profile__levels > .gp-levels {
    flex: 1 1 0;
    min-width: 0;
    position: relative;
    list-style: none;
    margin: 0 auto;
    padding: 0 100px;
    display: flex;
    align-items: flex-start;
    gap: 18px;
    max-width: 1420px;
  }
  body.profile .gp-levels__route {
    position: absolute;
    left: 0;
    right: 280px;
    bottom: 32px;
    height: 60px;
    background: url("/img/level-green-route.svg") center / calc(100% - 24px) 100% no-repeat;
    margin: 0 14%;
    width: 72%;
    opacity: 0.3;
  }
  body.profile .gp-levels__item { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
  body.profile .gp-levels__disc {
    width: 100%;
    max-width: 200px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background-color: #dfdacd;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }
  body.profile .gp-levels__disc--1 { background-image: url("/img/level-1-dark.png"); }
  body.profile .gp-levels__disc--2 { background-image: url("/img/level-2-dark.png"); }
  body.profile .gp-levels__disc--3 { background-image: url("/img/level-3-dark.png"); }
  body.profile .gp-levels__disc--4 { background-image: url("/img/level-4-dark.png"); }
  body.profile .gp-levels__disc--5 { background-image: url("/img/level-5-dark.png"); }
  body.profile .gp-levels__item--done  .gp-levels__disc--1 { background-image: url("/img/level-1.png"); }
  body.profile .gp-levels__item--done  .gp-levels__disc--2 { background-image: url("/img/level-2.png"); }
  body.profile .gp-levels__item--done  .gp-levels__disc--3 { background-image: url("/img/level-3.png"); }
  body.profile .gp-levels__item--done  .gp-levels__disc--4 { background-image: url("/img/level-4.png"); }
  body.profile .gp-levels__item--done  .gp-levels__disc--5 { background-image: url("/img/level-5.png"); }
  /*body.profile .gp-levels__item:not(.gp-levels__item--done) .gp-levels__disc { filter: grayscale(1) opacity(0.55); }*/
  body.profile .gp-levels__mark { width: 34px; height: 34px; }
  body.profile .gp-levels__pill {
    margin: 0;
    padding: 6px 18px;
    border-radius: 999px;
    background: var(--gp-green);
    color: var(--gp-white);
    font-family: var(--gp-font-display);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.04em;
  }
  body.profile .gp-levels__pill--2 { background: var(--gp-olive); }
  body.profile .gp-levels__pill--3 { background: var(--gp-ochre); }
  body.profile .gp-levels__pill--4 { background: var(--gp-terracotta); }
  body.profile .gp-levels__pill--5 { background: var(--gp-red); }
  /* --- e. Invite card + friends card --- */
  body.profile .gp-profile__cards { display: flex; align-items: stretch; gap: 32px; z-index: 9 !important; }
  body.profile .gp-card {
    flex: 1 1 0;
    min-width: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 32px 34px;
    border-radius: 20px;
    background: var(--gp-bg-bright);
  }
  body.profile .gp-card--friends { overflow: hidden; }
  body.profile .gp-card__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0;
    font-family: var(--gp-font-display);
    font-size: 1.625rem;
    font-weight: 700;
    color: var(--gp-green-dark);
  }
  body.profile .gp-card__title--alt { color: var(--gp-green); }
  body.profile .gp-card__title-icon { height: 42px; width: auto; }
  body.profile .gp-card__body { margin: 0; max-width: 20rem; font-size: 1.125rem; line-height: 1.5; }
  body.profile .gp-fieldrow {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 6px 6px 22px;
    border-radius: 16px;
    background: var(--gp-white);
  }
  body.profile .gp-fieldrow__input {
    flex: 1 1 0;
    min-width: 0;
    padding: 10px 0;
    border: 0;
    background: transparent;
    color: var(--gp-green-dark);
    font-family: var(--gp-font-body);
    font-size: 1.25rem;
    outline: none;
    font-weight: 900;
  }
  body.profile .gp-fieldrow__copy {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
  }
  body.profile .gp-fieldrow__copy img { height: 48px; width: auto; }
  body.profile .gp-friends { position: relative; display: flex; flex-wrap: wrap; gap: 10px; max-width: 52%; list-style: none; margin: 0; padding: 0; }
  body.profile .gp-friends__item {
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--gp-green);
    color: var(--gp-white);
    font-size: 1rem;
    font-weight: 600;
  }
  body.profile .gp-friends__empty { font-size: 1rem; color: var(--gp-muted); }
  body.profile .gp-card__icon { position: absolute; left: 34px; bottom: -2px; width: 78px; height: auto; }
  body.profile .gp-card__art { position: absolute;    right: 20px;
    text-align: -30px;
    width: 220px;
    height: 220px;
    bottom: 80px;
  }
  body.profile .gp-card__art::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--gp-red-pale); }
  body.profile .gp-card__art img { position: relative; width: 100%; height: 130%; object-fit: contain; }
  /* --- f. Next-goal banner --- */
  body.profile .gp-profile__goal {
    display: grid;
    grid-template-columns: 72px 280px calc(40% - 171px) calc(52% - 171px);
    gap: 28px;
    margin: 56px 0;
    padding: 26px 34px;
    border-radius: 20px;
    background: var(--gp-bg-bright);
  }
  body.profile .gp-profile__goal-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: var(--gp-green);
    grid-row: 1;
    grid-column: 1;
  }
  body.profile .gp-profile__goal-icon img { height: 70px; width: auto; grid-row: 1; grid-column: 2;}
  body.profile .gp-profile__goal-text { display: flex; flex-direction: column; margin: 12px 0; min-width: 240px; }
  body.profile .gp-profile__goal-kicker { font-size: 1.375rem;
    color: var(--gp-green);
    font-weight: 900; }
  body.profile .gp-profile__goal-title { font-family: var(--gp-font-display); font-size: 1.625rem; font-weight: 700; color: var(--gp-green-dark); }
  body.profile .gp-profile__goal-note { display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; margin: 16px 0; font-size: 1.25rem;     text-align: right; grid-row: 1; grid-column: 3;}
  body.profile .gp-profile__goal-note strong { font-weight: 700; }
  /* --- g. Campaign panels --- */
  body.profile .gp-profile__campaign { display: flex; align-items: flex-start; gap: 32px; margin-bottom: 72px; }
  body.profile .gp-panel {
    flex: 1 1 0;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 44px 46px;
    border-radius: 20px;
    overflow: hidden; flex-grow: 4;
  }
  body.profile .gp-panel--dark { justify-content: baseline; background: var(--gp-green-dark); color: var(--gp-white);
    min-width: 540px;
    min-height: 350px;
    }
  body.profile .gp-panel__title { margin: 0; font-family: var(--gp-font-display); font-size: 2.75rem; font-weight: 900; color: var(--gp-green);     text-indent: 12px; min-width: 540px;
  }
  body.profile .gp-panel__body { margin: 0; font-size: 1.375rem;     text-indent: 12px;
        line-height: 0.7em;
    margin-bottom: 16px;
  }
  body.profile .gp-panel__watermark { position: absolute; left: 11%; bottom: 20px; width: 78%; opacity: 0.14; pointer-events: none; }
  body.profile .gp-panel--cream { flex-direction: row; align-items: flex-start; gap: 30px; padding: 32px 0 40px 46px; background: var(--gp-bg-bright); flex-grow: 6; }
  body.profile .gp-panel__copy { flex: 1 1 0; min-width: 0; margin: 0; font-size: 1.375rem; line-height: 1.45; }
  body.profile .gp-panel__copy strong { display: block; margin-top: 14px; color: var(--gp-green-dark); font-size: 1.5rem; font-weight: 700; }
  body.profile .gp-panel__art { flex: 0 0 300px; width: 100%; height: auto; border-radius: 16px 0 0 16px; object-fit: cover;     margin-right: 32px; min-width: 0;}
  /* --- h. Footer --- */
  body.profile .gp-profile__landscape { display: block; width: calc(100% + 120px); max-width: none; margin: 0 -60px; height: auto;  
    max-width: 480px;
    margin: 120px auto -90px;}
  body.profile .gp-profile__footerbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 28px 0 26px;
    font-size: 1rem;
    color: var(--gp-muted);
    max-height: 78px;
  }
  body.profile .gp-profile__copy { margin: 0; }
  body.profile .gp-profile__footerlogo { position: absolute; left: 50%; height: 26px; width: auto; transform: translateX(-50%);     bottom: 110px; }
  body.profile .gp-profile__links { display: flex; align-items: center; gap: 20px; margin: 0; }
  body.profile .gp-profile__links a { color: var(--gp-text); text-decoration: underline; }
  body.profile .gp-profile__links a:hover { text-decoration: none; }

  .landing .gp-demands__title {
    text-align: left;
  }
  .landing .gp-demands__grid { 
    display: grid;
    grid-template-columns: 336px calc(50% - 360px) 336px calc(50% - 360px);
    gap: 12px;
  }
  .landing .gp-demands__grid #demand-1-img { grid-column: 1; grid-row: 1}
  .landing .gp-demands__grid #demand-1-txt { grid-column: 2; grid-row: 1; margin: 48px 0 0; padding: 0 12px 0 0;}
  .landing .gp-demands__grid #demand-2-img { grid-column: 3; grid-row: 1; justify-self: start;}
  .landing .gp-demands__grid #demand-2-txt { grid-column: 4; grid-row: 1; margin: 48px 0 0; text-align: left; padding: 0 12px 0 0;}
@media (max-width: 1359.98px) {
  body.profile .gp-profile__copy {
    max-width: 25%;
  }
  body.profile .gp-profile__links {
    justify-content: flex-end;
    max-width: 25%;
    flex-wrap: wrap;
  }
  .landing .gp-demands__grid { 
    display: grid;
    grid-template-columns: calc(50% - 24px) calc(50% - 24px) !important;
    align-content: center;
    gap: 48px;
  }
  .landing .gp-demand__body { margin: -24px 0 48px; }

  .landing .gp-demands__grid #demand-1-img { grid-column: 1; grid-row: 1}
  .landing .gp-demands__grid #demand-1-txt { grid-column: 1; grid-row: 2; margin: -6px 0px 36px; padding: 0 24px; }
  .landing .gp-demands__grid #demand-2-img { grid-column: 2; grid-row: 1; justify-self: start;}
  .landing .gp-demands__grid #demand-2-txt { grid-column: 2; grid-row: 2; margin: -6px 0px 36px; text-align: left; padding: 0 36px 0 0;}

  body.profile .gp-btnrow { grid-template-columns: 50% 50%;}
  body.profile .gp-btnrow > *:first-child { grid-column: 1;  }
  body.profile .gp-btnrow > *:last-child { grid-column: 2;  }
}
@media (max-width: 1279.98px) {
  body.profile .gp-profile__goal {
    grid-template-columns: 72px 312px calc(100% - 440px);
  }
  body.profile #pf-share-btn {
    grid-row: 1;
    grid-column-start: 3;
    grid-column-end: 4;
  }
  body.profile .gp-profile__goal-note  {
    grid-row: 2;
    grid-column-start: 3;
    grid-column-end: 4;
    text-align: center;
    gap: 0;
    margin: -24px 0 0px;
  }
}
}
/* ==========================================================================
   MOBILE (below 1024px)
   Only the differences the desktop block does not already own live here: the
   hero art holder and the campaign headline colour. The petition form uses the
   shared rules, so it renders exactly like the desktop one.
   ========================================================================== */
@media (max-width: 1023.98px) {
  /* The desktop hero art is painted by .gp-hero__img; mobile uses .gp-hero__art. */
  .landing .gp-hero__img { display: none; }
  .landing .gp-campaign__title {color: var(--gp-bg); margin: 14px 0px; }
}
/* Wide phones up: Ad and Soyad sit in one row. The desktop block repeats the
   same two declarations, so nothing changes at 1024px and above. */
/* ==========================================================================
   PROFILE — desktop profile layout
   (misc/design/profile_desktop_export/GP_ZirveyeTasi_Desktop_Profil.pdf)
   Scoped to body.profile, so the landing page and the shared dark theme stay
   untouched. Below 1024px none of this applies: the mobile profile keeps the
   dark theme and the markup inside <main>. The --gp-* palette is declared once
   at the top of the LANDING section and shared here.
   ========================================================================== */
body.profile {
  --gp-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --gp-font-display: "Roboto", Arial, sans-serif;
}
body.profile .my-donation-widget { width: 100% !important; display: none;   margin: 18px auto 56px;}
/* Desktop-only blocks stay hidden below the breakpoint. */
.gp-profile { display: none; }
@media (max-width: 1331px) {
  body.profile .gp-panel--cream { flex-direction: column; align-items: center; gap: 30px; padding: 32px 0 40px 46px; background: var(--gp-bg-bright); flex-grow: 6;  
    overflow: visible; }
}

/* ==========================================================================
   MOBILE PROFILE — appended; below 1024px only
   (misc/design/profile_mobile.pdf, 390pt wide). Everything is scoped to
   body.profile inside the mobile query, so the landing page, the shared dark
   theme and the desktop profile are untouched. Only --gp-* values are used.
   ========================================================================== */
@media (max-width: 1023.98px) {
  /* --- page: paper background + full-width column --- */
  body.profile {
    background: var(--gp-bg) url("/img/back-desktop.jpg") center top / cover no-repeat;
    color: var(--gp-text);
    font-family: var(--gp-font-body);
    overflow: clip;
  }
  body.profile .shell {
    position: relative;
    display: block;
    max-width: 480px;
    margin: 0 auto;
    padding: 0 0 40px;
  }
  /* Content paints above the dashed route art. */
  body.profile .shell > :not(.pm-route) { position: relative; z-index: 1; }

  body.profile .gp-profile__footerlogo { position:absolute; width: 30%; left: 50%; top: 32px; transform: translateX(-50%);}

  /* --- decorative dashed route art --- */
  body.profile .pm-route { position: absolute; z-index: 0; pointer-events: none; }
  body.profile .pm-route--a { top: 10px;
    left: 30px !important;
    width: 300px;
    transform: scale(4) rotate(-12deg); }
  body.profile .pm-route--b { top: -40px;
    left: 0px;
    width: 320px;
    transform: scale(3.6) rotate(-4deg); }
  body.profile .pm-route--c {top: -70px;
    left: 70px;
    width: 330px;
    transform: scale(3.6) rotate(4deg);}

  /* --- a. Header --- */
  body.profile .pm-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px 6px; }
  body.profile .pm-header__logo { height: 26px; width: auto; }
  body.profile .pm-header__user {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 2px solid var(--gp-green);
    border-radius: 50%;
  }
  body.profile .pm-header__user img { width: 24px; height: auto; }

  /* --- b. Hero --- */
  body.profile .pm-hero { padding: 10px 20px 0; }
  body.profile .pm-hero__tier {
    display: inline-block;
    margin: 0 0 12px;
    padding: 6px 18px;
    border-radius: 999px;
    background: var(--gp-green);
    color: var(--gp-white);
    font-family: var(--gp-font-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
  }
  body.profile .pm-hero__title {
    margin: 0 0 12px;
    font-family: var(--gp-font-display);
    font-size: 2rem;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: var(--gp-green-dark);
  }
  body.profile .pm-hero__lead { margin: 0; font-size: 1.05rem; line-height: 1.45; }
  body.profile .pm-hero__lead strong { display: block; margin-bottom: 2px; color: var(--gp-green); font-size: 1.15rem; }
  /* level-1.png carries an opaque paper matte, so it is shown in a disc
     (same treatment as the desktop hero) instead of a visible rectangle. */
  body.profile .pm-hero__art { position: relative; height: 252px; margin-top: 10px; }
  body.profile .pm-hero__art::before {
    content: "";
    position: absolute;
    top: 0;
    left: calc(50% + 24px);
    width: 226px;
    height: 226px;
    margin-left: -150px;
    border-radius: 50%;
    background: var(--gp-red-pale);
  }
  body.profile .pm-hero__art img {
    position: absolute;
    left: 32px;
    bottom: -64px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    object-fit: contain;
  }

  /* --- c. Next-tier hint --- */
  body.profile .pm-lock {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 18px 20px 0;
    padding: 14px 16px;
    border-radius: 22px;
    background: var(--gp-bg-bright);
    color: var(--gp-green-dark);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.4;
  }
  body.profile .pm-lock img {
    flex: none;
    width: 42px;
    height: 42px;
    padding: 9px;
    border-radius: 50%;
    background: var(--gp-green);
  }

  /* --- d. Green band --- */
  body.profile .pm-band { margin-top: 22px; background: var(--gp-green); color: var(--gp-white);     width: 100vw;
    padding: 0 calc(50vw - 50%);
    margin: 22px calc(-50vw + 50%); }
  body.profile .pm-band__row { display: flex; align-items: center; gap: 14px; margin: 0; padding: 8px 22px; }
  body.profile .pm-band__row--step { padding-top: 12px; }
  body.profile .pm-band__separator { height: 1px; width:calc(100% - 160px); margin-left: 80px;  background: var(--gp-white); }
  body.profile .pm-band__icon { flex: none; width: 44px; height: 44px; padding: 11px; border-radius: 50%; background: var(--gp-white); }
  body.profile .pm-band__stack { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; min-width: 0; }
  body.profile .pm-band__name { font-family: var(--gp-font-display); font-size: 1.25rem; font-weight: 700; color: var(--gp-green-dark); }
  body.profile .pm-band__level { font-size: 0.9rem; }
  body.profile .pm-band__email { display:none; flex-basis: 100%; font-size: 0.8rem; opacity: 0.75; overflow-wrap: anywhere; }
  body.profile .pm-band__count { font-family: var(--gp-font-display); font-size: 1.4rem; font-weight: 700; color: var(--gp-green-dark); }
  body.profile .pm-band__dim { font-size: 0.9rem; }
  body.profile .pm-band__track { flex: 1 1 0; min-width: 0; max-width: calc(100% - 114px);height: 17px; border-radius: 999px; background: var(--gp-white); overflow: hidden; }
  body.profile .pm-band__fill {     display: block;
    width: 0;
    height: 64%;
    border-radius: 999px;
    background: var(--gp-green);
    transition: width 400ms ease;
    transform: translate(3px,28%); }
  body.profile .pm-band__note {margin: -18px 80px;
    padding: 0 0 16px; color: var(--white); font-size: 1rem; font-weight: 700; }

  /* --- e. Level card + step dots --- */
  body.profile .pm-level {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 42px 20px;
    padding: 20px 18px 18px;
    border-radius: 24px;
    background: var(--gp-bg-bright);
  }
  body.profile .pm-level__art { display: block; width: 100%; }
  body.profile .pm-level__art img { display: block; width: 100%; max-width: 300px; height: auto; margin: 0 auto; }
  body.profile .pm-level__mark { width: 38px; height: 38px; margin-top: -34px; z-index: 999; }
  body.profile .pm-level__pill {
    margin: 0;
    padding: 6px 18px;
    border-radius: 999px;
    background: var(--gp-green);
    color: var(--gp-white);
    font-family: var(--gp-font-display);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.04em;
  }
  /* Dots use the shared .gp-dots / .gp-dot / .gp-dot--on rules above; the
     active one is driven by the gallery. */

  /* --- f/g. Cards --- */
  body.profile .pm-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 20px;
    padding: 22px 20px;
    border-radius: 24px;
    background: var(--gp-bg-bright);
  }
  body.profile .pm-card.invite {
    margin: 42px 20px 90px;
  }
  body.profile .pm-card__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 0;
    font-family: var(--gp-font-display);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--gp-green-dark);
  }
  body.profile .pm-card__title--alt { color: var(--gp-green); }
  body.profile .pm-card__title-icon { height: 54px; width: auto; margin-right: 10px; }
  body.profile .pm-card__body { margin: 0; font-size: 1rem; line-height: 1.45; }
  body.profile .pm-field {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 4px 4px 16px;
    border-radius: 12px;
    background: var(--gp-white);
  }
  body.profile .pm-field__input {
    flex: 1 1 0;
    min-width: 0;
    padding: 10px 0;
    border: 0;
    background: transparent;
    color: var(--gp-green-dark);
    font-family: var(--gp-font-body);
    font-size: 1.2rem;
    outline: none;
    font-weight: 700;
  }
  body.profile .pm-field__copy {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: white;
    cursor: pointer;
  }
  body.profile .pm-field__copy img { height: 36px; width: auto; }
  body.profile .pm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    border-radius: 999px;
    padding: 16px 12px;
    font-family: var(--gp-font-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-decoration: none;
    cursor: pointer;
    margin: 0 auto;
  }
  body.profile .pm-btn img { display: block; height: 36px; width: auto;     margin: -12px -6px; }
  body.profile .pm-btn--dark { background: var(--gp-green-dark); color: var(--gp-white); }
  body.profile .pm-btn--green { background: var(--gp-green); color: var(--gp-green-dark); flex-grow: 1;}
  body.profile .pm-btn--light { background: var(--gp-green); color: var(--gp-white); }
  body.profile .pm-btn--wide { width: 100%; }
  body.profile .pm-btnrow { display: flex; gap: 12px; }
  body.profile .pm-btnrow .pm-btn { min-width: 50%; }
  body.profile .pm-subbtnrow { display: flex; gap: 12px; flex-wrap: wrap;}
  body.profile .invitees { display: inline; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
  body.profile .invitees__item {
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--gp-green);
    color: var(--gp-white);
    font-size: 0.95rem;
    font-weight: 600;
    display: inline-flex;
    margin: 3px;
  }
  /* The PDF draws the empty state as copy + illustration only. */
  body.profile .invitees__empty { display: none; }
  body.profile .pm-card--friends { overflow: visible; }
  body.profile .pm-card__art { position: relative; height: 210px; margin: 6px -20px -22px; }
  body.profile .pm-card__art::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 30px;
    width: 200px;
    height: 200px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: var(--gp-red-pale);
  }
  body.profile .pm-card__art img { position: relative; display: block; width: 100%; height: 100%; object-fit: contain; }

  /* --- h. Next goal --- */
  body.profile .pm-goal {
    display: grid;
    grid-template-columns: 80px calc(100% - 80px);
    gap: 12px;
    margin: 20px;
    padding: 22px 20px;
    border-radius: 24px;
    background: var(--gp-bg-bright);
  }
  body.profile .pm-goal__icon { display: inline-flex; align-items: center; justify-content: center; grid-row:1; grid-column: 1; width: 64px; height: 64px; border-radius: 50%; background: var(--gp-green); }
  body.profile .pm-goal__icon img { height: 32px; width: auto; }
  body.profile .pm-goal__text { grid-row:1; grid-column: 2 }
  body.profile .pm-goal__note { grid-row:2; grid-column-start: 1; grid-column-end: 3; margin: 0; }
  body.profile .pm-goal__button { grid-row:3; grid-column-start: 1; grid-column-end: 3; margin: 0; }
  body.profile .pm-goal__kicker { color: var(--gp-green); font-size: 0.95rem; font-weight: 700; }
  body.profile .pm-goal__title { font-family: var(--gp-font-display); font-size: 1.15rem; font-weight: 700; color: var(--gp-green-dark); }
  body.profile .pm-goal__note { font-size: 1.2; line-height: 1.4; }
  body.profile .pm-goal__note strong { font-weight: 700; }
  body.profile .pm-goal__note span { color: var(--gp-muted); }
  body.profile .pm-goal .pm-btn--wide { margin-top: 4px; }

  /* --- i. Campaign: grow the movement --- */
  body.profile .pm-campaign {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin: 20px;
    padding: 26px 22px;
    border-radius: 24px;
    background: var(--gp-green-dark);
    color: var(--gp-white);
    overflow: hidden;
    min-height: 260px;
  }
  body.profile .pm-campaign__title { margin: 0; font-family: var(--gp-font-display); font-size: 1.9rem; font-weight: 900; color: var(--gp-green); }
  body.profile .pm-campaign__body { margin: 0; font-size: 1.05rem; }
  body.profile .pm-campaign .pm-btn { margin-top: 6px; position: relative; z-index: 1; padding: 16px 12px; width: 100%;
    font-size: 1.2rem;
    font-weight: 900; }
  body.profile .pm-campaign__watermark { position: absolute; left: 11%; bottom: 18px; width: 72%; opacity: 0.14; pointer-events: none; }

  /* --- j. Campaign: the t-shirt reward --- */
  body.profile .pm-reward {
    display: flex;
    flex-direction: column;
    gap: 18px;
        margin: 120px 20px;
    padding: 0 20px 22px;
    border-radius: 24px;
    background: var(--gp-bg-bright);
  }
  body.profile .pm-reward__art { display: block; width: calc(100% + 40px); max-width: none; margin: 0 -20px; height: auto; padding: 20px;}
  body.profile .pm-reward__copy { margin: 0; font-size: 1.05rem; line-height: 1.45; }
  body.profile .pm-reward__copy strong { display: block; margin-top: 10px; color: var(--gp-green-dark); font-family: var(--gp-font-display); font-size: 1.2rem; font-weight: 700; }

  /* --- k. Footer --- */
  body.profile .pm-footer { margin-top: 8px; }
  body.profile .pm-footer__art { display: block; width: 100%; height: auto; }
  body.profile .pm-footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin: 18px 20px 0; font-size: 0.9rem; }
  body.profile .pm-footer__links a { color: var(--gp-text); text-decoration: underline; }
  body.profile .pm-footer__logout {
    border: 0;
    background: none;
    padding: 0;
    color: var(--gp-muted);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
  }
  body.profile .pm-footer__copy { margin: 10px 20px 0; color: var(--gp-muted); font-size: 0.85rem; text-align: center; }
}

/* ==========================================================================
   DOCS VIEWER — static/docs/index.html (client-side markdown rendering).
   Standalone page: reuses the shared dark theme variables only.
   ========================================================================== */
.docs__shell { max-width: 880px; margin: 0 auto; padding: 28px 20px 80px; }

.docs__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 26px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.docs__brand { color: var(--text); font-size: 1.05rem; font-weight: 700; text-decoration: none; }
.docs__brand:hover { color: var(--text-dim); }
.docs__doc { color: var(--text-dim); font-size: 0.9rem; }

.docs__status { margin: 0; color: var(--text-dim); }
.docs__raw {
  margin: 0;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-size: 0.85rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.docs__content { color: var(--text); font-size: 1rem; line-height: 1.6; }
.docs__content > :first-child { margin-top: 0; }
.docs__content h1,
.docs__content h2,
.docs__content h3,
.docs__content h4 { margin: 2em 0 0.6em; line-height: 1.25; letter-spacing: -0.01em; }
.docs__content h1 { font-size: 1.9rem; }
.docs__content h2 { font-size: 1.4rem; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.docs__content h3 { font-size: 1.15rem; }
.docs__content p,
.docs__content ul,
.docs__content ol { margin: 0 0 1em; }
.docs__content li { margin: 0 0 0.35em; }
.docs__content a { color: var(--text); text-decoration: underline; }
.docs__content a:hover { color: var(--text-dim); }
.docs__content code {
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--surface-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85em;
}
.docs__content pre {
  margin: 0 0 1.2em;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow-x: auto;
}
.docs__content pre code { padding: 0; background: none; font-size: 0.85rem; line-height: 1.5; }
.docs__content blockquote {
  margin: 0 0 1.2em;
  padding: 2px 18px;
  border-left: 3px solid var(--border);
  color: var(--text-dim);
}
.docs__content table { width: 100%; margin: 0 0 1.2em; border-collapse: collapse; font-size: 0.95rem; }
.docs__content th,
.docs__content td { padding: 9px 12px; border: 1px solid var(--border); text-align: left; vertical-align: top; }
.docs__content th { background: var(--surface); font-weight: 600; }
.docs__content hr { margin: 2em 0; border: 0; border-top: 1px solid var(--border); }
.docs__content img { max-width: 100%; height: auto; }

@media (max-width: 640px) {
  .docs__content table { display: block; overflow-x: auto; }
}

/* ==========================================================================
   LEVEL GALLERIES — mobile only (< 1024px)
   One level image (level-1..5.png) per view in the landing status teaser and in
   the profile level card: swiping steps a full slide, never a free scroll.
   Swiper ships from the CDN; before it initialises (or if it never loads) the
   strip is a native scroller with the same one-slide snapping.
   ========================================================================== */
@media (max-width: 1023.98px) {
  /* min-width:0 keeps the strip from stretching its flex parent to the width
     of all five slides. */
  .lvl-gallery {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    /* No scrollbar, in either mode (Swiper or the fallback below). */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .lvl-gallery::-webkit-scrollbar { width: 0; height: 0; display: none; }

  /* Fallback without the library: snap one slide at a time. */
  .lvl-gallery:not(.swiper-initialized) { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
  .lvl-gallery:not(.swiper-initialized) > .swiper-wrapper { display: contents; }
  .lvl-gallery:not(.swiper-initialized) .swiper-slide { flex: 0 0 100%; scroll-snap-align: center; }

  /* Swiper sizes the slides to the strip; centre the artwork inside. */
  .lvl-gallery .swiper-slide { display: flex; align-items: center; justify-content: center; }
  .lvl-gallery img { display: block; width: 74vw; max-width: 100%; height: auto; /*margin: 32px 0 -64px 0;*/ }

  /* Profile: the gallery replaces the single level art in the card. */
  body.profile .pm-level .lvl-gallery { align-self: stretch; width: 100%; }
}

/* ==========================================================================
   DOCKED SUBMIT — desktop landing only (>= 1024px)
   The dock holds the real submit button in the form's flow and, once the button
   has scrolled off-screen, pins it to the bottom of the viewport so the call to
   action follows the visitor down the page. A transparent shield inside the
   button covers it: clicks land on the shield and app.js sends the visitor back
   up to the form instead of submitting it from down there. `left`/`width` are
   measured in app.js so the docked button lines up with the form column at any
   width.
   ========================================================================== */
.landing .gp-submit-dock {
  position: relative;
  display: flex;
  flex-direction: column;
}
.landing .gp-submit-dock-bg {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--gp-green-dark);
  border-radius: 0 0 14px 14px;
}
/* Inside the button, so `inset: 0` covers the pinned button wherever it is. */
.landing .gp-submit-dock__shield { display: none; }

@media (min-width: 1024px) {
  .landing .gp-submit-dock.is-stuck #signup-btn {
    position: fixed;
    top: 18px;
    z-index: 10000;
  }

  /* The panel floats with the button, one layer below it: the button is its
     child, so the panel's background stays behind and only its corners show. */
  .landing .gp-submit-dock.is-stuck .gp-submit-dock-bg {
    position: fixed;
    top: 0;
    height: 101px;
    z-index: 9999;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
  }

  .landing .gp-submit-dock.is-stuck .gp-submit-dock__shield {
    display: block;
    position: absolute;
    inset: 0;
    cursor: pointer;
  }
}

/* ==========================================================================
   TERMS MODAL — the "Kullanım Koşulları" panel, on both pages.
   Built by animations.js:initTermsModal() and opened from any footer link
   marked `data-modal="terms"`. A native <dialog>, so it sits in the top layer
   with its own backdrop and needs no z-index; the --gp-* tokens are declared
   for .landing and body.profile alike, so one panel reads correctly on both.
   ========================================================================== */
.terms {
  padding: 0;
  border: 0;
  background: transparent;
  max-width: none;
  max-height: none;
  overflow: visible;
}
.terms::backdrop { background: rgba(0, 0, 0, 0.55); }
.terms__panel {
  width: min(560px, calc(100vw - 32px));
  max-height: 80vh;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--gp-bg-bright);
  color: var(--gp-text);
  border-radius: 20px;
  padding: 22px 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.terms__title {
  color: var(--gp-white);
  font-size: 1.3rem;
  font-weight: 900;
  background: var(--gp-green);
  padding: 24px;
  margin: -24px -24px 32px;
}
.terms__list {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 1.25rem;
  line-height: 1.5;
}
.terms__close {
  display: block;
  width: 100%;
  margin-top: 20px;
  padding: 13px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--gp-green-dark);
  color: var(--gp-bg-bright);
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}
.terms__close:active { opacity: 0.85; }