/* campaigns.css: campaigns list and detail pages, campaign and venue offer cards, the campaign band
   block (docs/DESIGN-PLAN.md §5.4, §12.3). Tokens only; the brand profile supplies the values. */

/* ---------- Page head band (site.css .page-head) ----------
   Every page opens with the site's navy band: the breadcrumb and the H1 there, the band styles both.
   The list page's two tabs sit in the band's aside: light text on the same dark glass as the header bar
   over the band (legible over its city drawing), the current tab white. */
.page-head-aside .cmp-tabs {
  display: inline-flex;
  gap: 2px;
  max-width: 100%;
  padding: 4px;
  border-radius: var(--r-md);
  background: rgba(14, 19, 32, .5);
  box-shadow: inset 0 0 0 1px var(--on-band-line);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.page-head-aside .cmp-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--tap);
  padding: 0 var(--sp-5);
  border-radius: var(--r-sm);
  color: var(--on-band-muted);
  font-size: .9375rem;
  font-weight: var(--fw-semibold);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.page-head-aside .cmp-tab:hover { background: rgba(255, 255, 255, .08); color: var(--on-band); }
.page-head-aside .cmp-tab[aria-current="page"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(var(--shadow-tint), .24); }
.page-head-aside .cmp-tab .cmp-count { color: var(--on-band-subtle); }
.page-head-aside .cmp-tab[aria-current="page"] .cmp-count { color: var(--muted); }
/* Phones: the pill spans the band, each tab takes half of it and its text may wrap. */
@media (max-width: 767.98px) {
  .page-head-aside .cmp-tabs { display: flex; width: 100%; }
  .page-head-aside .cmp-tab { flex: 1 1 0; min-width: 0; padding: 6px var(--sp-3); line-height: 1.25; white-space: normal; }
}

/* ---------- List (first section under the band) ---------- */
.cmp-list { padding-top: var(--sp-6); }
@media (min-width: 768px) { .cmp-list { padding-top: var(--sp-8); } }
.cmp-count { color: var(--muted); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; }
.cmp-chips { margin-bottom: var(--sp-6); }
.cmp-chips .cluster { --cluster: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.cmp-chips .chip.is-on { background: var(--secondary); border-color: var(--secondary); color: var(--on-band); }
.cmp-chips .chip.is-on .cmp-count { color: var(--on-band-muted); }
.cmp-chips .chip .i { width: 16px; height: 16px; }

/* ---------- Campaign card ---------- */
.cmp-cards { margin: 0; padding: 0; list-style: none; }
.cmp-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.cmp-card-media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-tint); }
.cmp-card-img { width: 100%; height: 100%; object-fit: cover; }
/* No picture while the other cards of the row have one: the illustration keeps the row even. */
.cmp-card-media--art { display: flex; align-items: center; justify-content: center; padding: var(--sp-4); }
.cmp-card-media--art .cmp-illu { width: 62%; max-height: 100%; }
/* One column: no row to keep even, so no filler picture. */
@media (max-width: 767.98px) { .cmp-card-media--art { display: none; } }
.cmp-card-body { display: flex; flex: 1 1 auto; flex-direction: column; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-5); }
@media (min-width: 768px) { .cmp-card-body { padding: var(--sp-6); } }
.cmp-card-title { font-size: var(--fs-h3); line-height: var(--lh-h3); }
.cmp-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin: 0; }
.cmp-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  white-space: nowrap;
}
.cmp-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.cmp-status--active { background: var(--status-available-tint, var(--bg-tint)); color: var(--status-available, var(--live)); }
.cmp-status--upcoming { background: var(--bg-tint); color: var(--ink); }
.cmp-status--ended { background: var(--bg-alt); color: var(--muted); }
.cmp-kind { color: var(--muted); font-size: var(--fs-micro); font-weight: var(--fw-semibold); }
.cmp-benefit { max-width: none; color: var(--ink); font-size: 1.75rem; font-weight: var(--fw-bold); font-stretch: var(--stretch-heading); line-height: 1.15; letter-spacing: var(--ls-heading); font-variant-numeric: tabular-nums lining-nums; }
.cmp-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cmp-tags li { padding: 3px 8px; border-radius: var(--r-xs); background: var(--bg-alt); color: var(--ink-2); font-size: var(--fs-micro); font-weight: var(--fw-semibold); line-height: 1.3; }
.cmp-event { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin: 0; font-size: var(--fs-small); }
.cmp-event-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  background: var(--bg-tint);
  color: var(--ink);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cmp-event-chip .i { width: 16px; height: 16px; }
.cmp-event-chip.is-live { background: var(--status-available-tint, var(--bg-tint)); color: var(--status-available, var(--live)); }
.cmp-countdown { color: var(--ink-2); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; }

/* Code box: mono, dashed ink border, copy button (sits above the card's stretched link). */
.cmp-code {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1) var(--sp-3);
  width: 100%;
  padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4);
  border: var(--bw-strong) dashed var(--ink);
  border-radius: var(--r-sm);
  background: var(--surface);
}
.cmp-code-label { flex-basis: 100%; color: var(--muted); font-size: var(--fs-micro); font-weight: var(--fw-semibold); }
.cmp-code-value { color: var(--ink); font-family: var(--font-mono); font-size: 1.125rem; font-weight: var(--fw-bold); letter-spacing: .04em; user-select: all; overflow-wrap: anywhere; }
.cmp-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--chip-h);
  margin-left: auto;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.cmp-copy:hover { background: var(--bg-alt); border-color: var(--ink); }
.cmp-copy .i { width: 16px; height: 16px; }
.cmp-copy.is-done { border-color: var(--status-available, var(--live)); color: var(--status-available, var(--live)); }
.cmp-code--big { padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-5); }
.cmp-code--big .cmp-code-value { font-size: 1.5rem; }

.cmp-more { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: var(--sp-1); color: var(--ink); font-weight: var(--fw-semibold); }
.cmp-more .i { transition: transform var(--dur-2) var(--ease); }
.cmp-card:hover .cmp-more .i { transform: translateX(3px); }
.cmp-card--ended { opacity: .7; transition: opacity var(--dur-1) var(--ease); }
.cmp-card--ended:hover, .cmp-card--ended:focus-within { opacity: 1; }
.cmp-card--ended .cmp-card-img { filter: grayscale(.5); }

/* One or two cards: horizontal cards, picture on the left (5/12). */
@media (min-width: 1024px) {
  .cmp-card--few { flex-direction: row; }
  .cmp-card--few .cmp-card-media { flex: 0 0 41.667%; aspect-ratio: auto; min-height: 280px; }
  .cmp-card--few .cmp-card-body { padding: var(--sp-8); }
  .cmp-cards--few { --cols-lg: 1 !important; }
}
@media (min-width: 1600px) {
  .cmp-cards--few:has(> .cmp-card:nth-child(2)) { --cols-xl: 2 !important; --cols-2xl: 2 !important; }
  .cmp-cards--few:not(:has(> .cmp-card:nth-child(2))) { --cols-xl: 1 !important; --cols-2xl: 1 !important; }
  .cmp-cards--few:has(> .cmp-card:nth-child(2)) .cmp-card--few .cmp-card-media { flex-basis: 45%; }
}

/* ---------- Venue offer card ---------- */
.vo-cards { margin: 0; padding: 0; list-style: none; }
.vo-card { display: flex; flex-direction: column; gap: var(--sp-4); }
.vo-side, .vo-main { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); min-width: 0; }
.vo-main { flex: 1 1 auto; }
/* One or two offers: venue on the left (4/12), the offer on the right. */
@media (min-width: 1024px) {
  .vo-cards--few { --cols-lg: 1 !important; }
  .vo-card--few { display: grid; grid-template-columns: minmax(220px, 4fr) minmax(0, 8fr); align-items: start; gap: var(--sp-8); padding: var(--sp-8); }
  .vo-card--few .vo-main { padding-left: var(--sp-8); border-left: 1px solid var(--line); }
  .vo-card--few .vo-title { font-size: 1.5rem; }
}
@media (min-width: 1600px) {
  .vo-cards--few:has(> .vo-card:nth-child(2)) { --cols-xl: 2 !important; --cols-2xl: 2 !important; }
  .vo-cards--few:not(:has(> .vo-card:nth-child(2))) { --cols-xl: 1 !important; --cols-2xl: 1 !important; }
}
.vo-logo-wrap { display: flex; align-items: center; height: 56px; margin-bottom: var(--sp-1); }
.vo-logo { width: auto; max-width: 160px; height: auto; max-height: 56px; object-fit: contain; }
.vo-venue { font-size: var(--fs-h3); }
.vo-title { color: var(--ink); font-size: 1.25rem; font-weight: var(--fw-bold); line-height: 1.25; }
.vo-offer { color: var(--ink-2); }
.vo-meta { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin: 0; color: var(--muted); font-size: var(--fs-small); }
.vo-meta span { display: inline-flex; align-items: center; gap: 6px; }
.vo-meta .i { width: 16px; height: 16px; }
.vo-meta a { color: var(--ink); font-weight: var(--fw-semibold); }
.vo-terms { width: 100%; margin-top: auto; border-top: 1px solid var(--line); }
.vo-terms summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-height: var(--tap); color: var(--ink); font-size: var(--fs-small); font-weight: var(--fw-semibold); cursor: pointer; list-style: none; }
.vo-terms summary::-webkit-details-marker { display: none; }
.vo-terms summary .i { width: 16px; height: 16px; transition: transform var(--dur-2) var(--ease); }
.vo-terms[open] summary .i { transform: rotate(180deg); }
.vo-terms p { padding-bottom: var(--sp-3); color: var(--ink-2); font-size: var(--fs-small); }

/* ---------- Empty state: illustration left, message and store badges right ---------- */
.cmp-empty { align-items: center; row-gap: var(--sp-8); }
.cmp-empty-art { display: flex; justify-content: center; }
.cmp-empty-text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-6); }
.cmp-empty-msg { max-width: 40ch; color: var(--ink); font-size: var(--fs-intro); font-weight: var(--fw-medium); line-height: 1.5; }
.cmp-badges img { height: 44px; }
.cmp-illu { width: 100%; max-width: 480px; height: auto; }
.fill--center .cmp-empty { padding-block: var(--sp-8); }

/* ---------- Detail (picture and summary: the first section under the band) ---------- */
.cmp-top { padding-top: var(--sp-6); }
@media (min-width: 768px) { .cmp-top { padding-top: var(--sp-8); } }
.cmp-top-grid { align-items: start; row-gap: var(--sp-6); }
.cmp-media { overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--r-lg); background: var(--bg-tint); }
.cmp-media-img { width: 100%; height: 100%; object-fit: cover; }
.cmp-media-art { display: grid; height: 100%; place-items: center; padding: var(--sp-6); }
.cmp-media-art .cmp-illu { max-width: 420px; }
.is-ended .cmp-media-img { filter: grayscale(.6); }
.cmp-side { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-5); }
.cmp-detail-meta { margin: 0; }
.cmp-benefit-box { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-5) var(--sp-6); border-radius: var(--r-md); background: var(--bg-tint); }
.cmp-benefit--big { font-size: clamp(2rem, 1.55rem + 1.8vw, 2.75rem); }
.cmp-summary { color: var(--ink-2); }
.cmp-event-box { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.cmp-event-box .btn .i { width: 20px; height: 20px; }
.cmp-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); margin: 0; padding: var(--sp-4) 0; border-block: 1px solid var(--line); }
.cmp-facts div { min-width: 0; }
.cmp-facts dt { color: var(--muted); font-size: var(--fs-micro); font-weight: var(--fw-semibold); }
.cmp-facts dd { margin: 2px 0 0; color: var(--ink); font-size: var(--fs-small); font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.cmp-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.cmp-actions:empty { display: none; }
.cmp-ended { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--r-md); background: var(--stale-tint); color: var(--stale); }
.cmp-ended p { margin: 0; color: var(--ink); }
.cmp-ended a { color: var(--ink); font-weight: var(--fw-semibold); }
.cmp-ended .i { flex: none; margin-top: 2px; }

.cmp-content .grid { align-items: start; row-gap: var(--sp-8); }
.cmp-main { display: flex; flex-direction: column; gap: var(--sp-10); min-width: 0; }
.cmp-sec h2 { margin-bottom: var(--sp-4); font-size: clamp(1.5rem, 1.3rem + .8vw, 1.875rem); }
.cmp-rich { color: var(--ink-2); }
.cmp-rich > * + * { margin-top: var(--sp-4); }
.cmp-rich :is(h2, h3, h4) { margin-top: var(--sp-8); }
.cmp-rich :is(ul, ol) { padding-left: 1.25em; }
.cmp-rich li + li { margin-top: var(--sp-2); }
.cmp-rich a { color: var(--ink); font-weight: var(--fw-semibold); }
.cmp-rich img { border-radius: var(--r-md); }
.cmp-steps { display: grid; gap: var(--sp-4); margin: 0; padding: 0; list-style: none; }
.cmp-steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.cmp-step-num { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 50%; background: var(--secondary); color: var(--on-band); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.cmp-steps p { padding-top: 8px; color: var(--ink); }
.cmp-stations-count { color: var(--ink); font-weight: var(--fw-semibold); }
.cmp-stations { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-3) var(--sp-6); margin: var(--sp-4) 0; padding: 0; list-style: none; }
.cmp-stations li { display: flex; align-items: flex-start; gap: var(--sp-2); }
.cmp-stations li > span { display: flex; flex-direction: column; min-width: 0; }
.cmp-stations .i { margin-top: 3px; color: var(--muted); }
.cmp-stations a { color: var(--ink); font-weight: var(--fw-semibold); }
.cmp-station-place, .cmp-muted { color: var(--muted); font-size: var(--fs-small); }
.cmp-legal { max-width: var(--measure); color: var(--muted); font-size: var(--fs-small); }
.cmp-sec .acc { margin-top: var(--sp-2); }

.cmp-aside { display: flex; flex-direction: column; gap: var(--sp-5); }
@media (min-width: 1024px) {
  .cmp-aside { position: sticky; top: calc(var(--topbar-h-compact) + var(--header-h-compact) + var(--sp-6)); }
}
.cmp-support { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
.cmp-support-title { color: var(--on-band); font-weight: var(--fw-semibold); }
.cmp-support-text { color: var(--on-band-muted); font-size: var(--fs-small); }
.cmp-support-phone { color: var(--on-band); font-size: var(--fs-phone); font-weight: var(--fw-bold); line-height: 1.1; letter-spacing: -.01em; text-decoration: none; }
.cmp-support-mail { display: inline-flex; align-items: center; gap: 8px; color: var(--on-band-muted); text-decoration: none; overflow-wrap: anywhere; }
.cmp-support-mail:hover { color: var(--on-band); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 767.98px) {
  .cmp-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cmp-actions .btn { flex: 1 1 auto; }
}

/* ---------- campaigns.band block (inside a page) ---------- */
.cmp-bandblock { padding-block: var(--sp-8); }
.cmp-bandblock--tint { background: var(--accent-tint); }
.cmp-bandblock--light { background: var(--bg); }
.cmp-bandblock--gray { background: var(--bg-alt); }
.cmp-bandblock-in { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-8); }
.cmp-bandblock-text { display: flex; flex: 1 1 320px; flex-direction: column; gap: var(--sp-2); }
.cmp-bandblock-title { font-size: var(--fs-h3); line-height: var(--lh-h3); }
.cmp-bandblock-benefit { color: var(--ink); font-weight: var(--fw-bold); }
.cmp-bandblock .cmp-code { width: auto; }
.cmp-mark { display: inline-flex; flex-direction: column; gap: 1px; align-self: center; }
.cmp-mark i { display: block; width: 16px; height: 3px; border-radius: 1px; background: var(--accent); }

/* ---------- Toast ("Kod kopyalandı") ---------- */
.cmp-toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--sp-6) + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-toast);
  max-width: calc(100vw - 2 * var(--gutter));
  padding: 12px 18px;
  border-radius: var(--r-sm);
  background: var(--band);
  color: var(--on-band);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  box-shadow: var(--shadow-2);
  transform: translateX(-50%);
}
@media (prefers-reduced-motion: no-preference) {
  .cmp-toast { animation: cmp-toast-in var(--dur-2) var(--ease); }
  @keyframes cmp-toast-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
}

/* ---------- Block rows: one row per screen width (SSR marks the extra cards) ---------- */
@media (max-width: 767.98px) { .cv-sm-hide { display: none !important; } }
@media (min-width: 768px) and (max-width: 1023.98px) { .cv-md-hide { display: none !important; } }
@media (min-width: 1024px) and (max-width: 1599.98px) { .cv-lg-hide { display: none !important; } }
@media (min-width: 1600px) and (max-width: 1919.98px) { .cv-xl-hide { display: none !important; } }
@media (min-width: 1920px) { .cv-2xl-hide { display: none !important; } }