/* Stokta shared site chrome (footer, cookie consent UI, legal/doc pages).
   Loaded by index.html and the legal pages. Uses tokens.css custom properties. */

/* ─── Footer (shared across all pages) ─────────────────── */
.footer {
  padding: 48px 64px;
  border-top: var(--border-hair);
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px 32px; flex-wrap: wrap;
}
.footer__brand { display: flex; align-items: center; gap: 16px; }
.footer__brand .wordmark { font-size: 18px; }
.footer__brand .tagline {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-grey-60); font-weight: 500;
}
.footer__links { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
.footer__links a,
.footer__consent-link {
  font-size: 13px; color: var(--color-grey-60); font-weight: 500;
  letter-spacing: -0.005em; text-decoration: none;
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  font-family: var(--font-sans); transition: color 200ms ease;
}
.footer__links a:hover,
.footer__consent-link:hover { color: var(--color-primary); }
.footer__links a:focus-visible,
.footer__consent-link:focus-visible {
  outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: 2px;
}
.footer__contact { display: flex; flex-wrap: wrap; gap: 12px 24px; font-size: 13px; color: var(--color-grey-60); font-weight: 500; }
.footer__contact a, .footer__contact span { text-decoration: none; white-space: nowrap; transition: color 200ms ease; }
.footer__contact a:hover { color: var(--color-primary); }
/* Telif satırı marka adını içerir: marka adları hiçbir yerde büyük harfe
   çevrilmez (bağlayıcı kural, ksquare/brand.html) — bu yüzden burada
   `text-transform: uppercase` YOKTUR. Küçük harf + geniş harf aralığı
   satırı yine alt bilgi tonunda tutar. */
.footer__legal {
  font-size: 11px; letter-spacing: 0.16em; text-transform: none;
  color: var(--color-grey-60); font-weight: 500; font-variant-numeric: tabular-nums;
}
/* Çatı şirket satırı + telif satırı alt alta. */
.footer__meta { display: flex; flex-direction: column; gap: 6px; }
/* ksquare kelime markası küçük harf kalır — telif satırındaki uppercase
   kuralı buraya SIZMAMALI (bağlayıcı marka kuralı, ksquare/brand.html). */
.footer__parent {
  font-size: 12px; letter-spacing: -0.005em; text-transform: none;
  color: var(--color-grey-60); font-weight: 500; text-decoration: none;
  transition: color 200ms ease;
}
.footer__parent:hover { color: var(--color-primary); }
.footer__parent:focus-visible {
  outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: 2px;
}
@media (max-width: 960px) {
  .footer { padding: 32px 24px; }
}

/* ─── Cookie consent banner ────────────────────────────── */
.consent {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60;
  max-width: 820px; margin: 0 auto;
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-radius: var(--radius);
  box-shadow: 0 12px 44px -12px rgba(17, 17, 19, 0.5);
  padding: 20px 22px;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
/* [hidden] must beat the display:flex above so the bar truly hides. */
.consent[hidden] { display: none; }
/* Visibility never depends on a transition/opacity (that would risk an invisible
   consent banner if the entrance never ticks); the slide is purely cosmetic. */
@keyframes consent-in { from { transform: translateY(12px); } to { transform: translateY(0); } }
.consent:not([hidden]) { animation: consent-in 260ms cubic-bezier(0.16, 1, 0.3, 1); }
.consent__text { flex: 1 1 320px; font-size: 13px; line-height: 1.55; color: rgba(247, 241, 232, 0.82); }
.consent__text strong { color: var(--color-on-primary); font-weight: 600; }
.consent__text a { color: var(--color-on-primary); text-decoration: underline; text-underline-offset: 2px; }
.consent__actions { display: flex; gap: 10px; flex-shrink: 0; flex-wrap: wrap; }
.consent__btn {
  font-family: var(--font-sans); font-size: 14px; font-weight: 600; letter-spacing: -0.005em;
  padding: 11px 18px; border-radius: var(--radius); cursor: pointer; line-height: 1;
  border: 1px solid transparent; transition: background-color 150ms ease, border-color 150ms ease;
}
.consent__btn:focus-visible { outline: 2px solid var(--color-on-primary); outline-offset: 2px; }
.consent__btn--accept { background: var(--color-on-primary); color: var(--color-primary); }
.consent__btn--accept:hover { background: #ffffff; }
.consent__btn--reject { background: transparent; color: var(--color-on-primary); border-color: rgba(247, 241, 232, 0.30); }
.consent__btn--reject:hover { border-color: rgba(247, 241, 232, 0.65); background: rgba(247, 241, 232, 0.06); }
.consent__btn--manage { background: transparent; color: rgba(247, 241, 232, 0.85); border-color: transparent; text-decoration: underline; text-underline-offset: 3px; padding-left: 10px; padding-right: 10px; }
.consent__btn--manage:hover { color: var(--color-on-primary); }
@media (max-width: 600px) {
  .consent { left: 12px; right: 12px; bottom: 12px; padding: 16px 18px; gap: 14px; }
  .consent__actions { width: 100%; }
  .consent__btn--accept, .consent__btn--reject { flex: 1; }
  .consent__btn--manage { order: 3; width: 100%; }
}

/* ─── Cookie preferences modal ─────────────────────────── */
.cm-overlay {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(17, 17, 19, 0.45);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.cm-overlay[hidden] { display: none; }
.cm {
  background: var(--color-surface);
  border: var(--border-hair); border-radius: var(--radius);
  box-shadow: 0 24px 64px -16px rgba(17, 17, 19, 0.4);
  width: 100%; max-width: 560px; max-height: calc(100vh - 40px); overflow: auto;
  padding: 28px;
}
.cm__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.cm__title {
  margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.018em; color: var(--color-primary);
}
.cm__close {
  background: none; border: 0; cursor: pointer; line-height: 1;
  font-size: 26px; color: var(--color-grey-60); padding: 0 4px; margin: -4px -4px 0 0;
}
.cm__close:hover { color: var(--color-primary); }
.cm__close:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 2px; }
.cm__desc { margin: 12px 0 20px; font-size: 14px; line-height: 1.55; color: var(--color-grey-60); }
.cm__group { display: flex; flex-direction: column; gap: 1px; background: var(--color-hair); border: var(--border-hair); border-radius: var(--radius); overflow: hidden; }
.cm__row { background: var(--color-surface); padding: 18px 20px; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.cm__name { font-size: 14px; font-weight: 600; color: var(--color-primary); }
.cm__note { margin-top: 6px; font-size: 12.5px; line-height: 1.5; color: var(--color-grey-60); max-width: 360px; }
.cm__switch { position: relative; flex-shrink: 0; display: inline-flex; }
.cm__switch input { position: absolute; opacity: 0; width: 44px; height: 24px; margin: 0; cursor: pointer; }
.cm__track {
  width: 44px; height: 24px; border-radius: 999px; background: var(--color-grey-20);
  position: relative; transition: background-color 150ms ease;
}
.cm__track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; transition: transform 150ms ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.cm__switch input:checked + .cm__track { background: var(--color-primary); }
.cm__switch input:checked + .cm__track::after { transform: translateX(20px); }
.cm__switch input:disabled + .cm__track { background: var(--color-accent); opacity: 0.7; }
.cm__switch input:focus-visible + .cm__track { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.cm__foot { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.cm__btn { flex: 1 1 auto; }
/* Inside the light modal the dark-surface button colors must be re-themed. */
.cm .consent__btn--reject { color: var(--color-primary); border-color: var(--color-grey-20); }
.cm .consent__btn--reject:hover { border-color: var(--color-primary); background: var(--color-surface-alt); }
.cm .consent__btn--accept { background: var(--color-primary); color: var(--color-on-primary); }
.cm .consent__btn--accept:hover { background: var(--color-primary-hover); }
.cm__legal { margin: 16px 0 0; font-size: 12px; color: var(--color-grey-60); }
.cm__legal a { color: var(--color-grey-60); text-underline-offset: 2px; }
.cm__legal a:hover { color: var(--color-primary); }

/* ─── Document / legal page chrome ─────────────────────── */
.doc-body { background: var(--color-surface-alt); }
.doc-shell { max-width: 1280px; margin: 0 auto; background: var(--color-surface); border-left: var(--border-hair); border-right: var(--border-hair); }
.doc-nav {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 64px;
  background: rgba(247, 241, 232, 0.88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: var(--border-hair);
}
.doc-nav__brand { text-decoration: none; display: inline-flex; align-items: center; }
.doc-nav__brand .wordmark { font-size: 22px; }
.doc-nav__back { text-decoration: none; font-size: 13px; font-weight: 500; color: var(--color-grey-60); letter-spacing: -0.005em; transition: color 200ms ease; }
.doc-nav__back:hover { color: var(--color-primary); }

.doc { max-width: 820px; padding: 72px 64px 96px; }
.doc__eyebrow {
  font-family: var(--font-sans); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; font-weight: var(--fw-eyebrow); color: var(--color-primary); margin: 0 0 16px;
}
.doc h1 {
  margin: 0 0 8px; font-size: 40px; line-height: 1.1; letter-spacing: -0.028em;
  font-weight: 800; color: var(--color-primary);
}
.doc__updated { margin: 0 0 32px; font-size: 13px; color: var(--color-grey-60); font-variant-numeric: tabular-nums; }
.doc h2 {
  margin: 48px 0 14px; font-size: 24px; line-height: 1.2; letter-spacing: -0.018em;
  font-weight: 600; color: var(--color-primary);
  padding-top: 24px; border-top: var(--border-hair);
}
.doc h3 { margin: 28px 0 8px; font-size: 17px; font-weight: 600; color: var(--color-primary); letter-spacing: -0.01em; }
.doc p, .doc li { font-size: 16px; line-height: 1.65; color: var(--color-text); }
.doc p { margin: 0 0 16px; }
.doc a { color: var(--color-primary); text-underline-offset: 2px; }
.doc ul, .doc ol { margin: 0 0 16px; padding-left: 22px; }
.doc li { margin: 0 0 8px; }
.doc strong { font-weight: 600; color: var(--color-primary); }
.doc address { font-style: normal; }
.doc__todo {
  background: rgba(205, 203, 198, 0.24); border: 1px dashed var(--color-grey-20);
  color: var(--color-grey-60); border-radius: 4px; padding: 2px 7px;
  font-size: 13px; font-weight: 600; font-family: var(--font-sans);
}

/* Visible "not legal advice / template" warning box */
.legal-note {
  background: var(--color-danger-bg);
  border: 1px solid var(--color-danger-border);
  color: var(--color-danger-text);
  border-radius: var(--radius);
  padding: 18px 20px; margin: 0 0 36px;
  font-size: 14px; line-height: 1.55;
}
.legal-note strong { color: var(--color-danger-text); }

/* Cookie table */
.cookie-table-wrap { overflow-x: auto; margin: 0 0 16px; border: var(--border-hair); border-radius: var(--radius); }
.cookie-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 680px; }
.cookie-table th, .cookie-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--color-hair); vertical-align: top; }
.cookie-table thead th {
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-grey-60); font-weight: 600; background: var(--color-surface-alt);
}
.cookie-table tbody tr:last-child td { border-bottom: none; }
.cookie-table code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; color: var(--color-primary); }
.cookie-table .dur { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cookie-cat { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.cookie-cat--req { background: rgba(205, 203, 198, 0.30); color: var(--color-grey-60); }
.cookie-cat--analytics { background: rgba(17, 17, 19, 0.08); color: var(--color-primary); }

@media (max-width: 960px) {
  .doc-nav { padding: 14px 24px; }
  .doc { padding: 48px 24px 64px; }
  .doc h1 { font-size: 32px; }
}

/* Güvenli ödeme rozetleri — iyzico başvuru kriterleri (27.08.2026):
   Visa + Mastercard (sade SVG) + resmî "iyzico ile Öde" logosu. */
.footer__payments { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.footer__payments-label { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-grey-20); }
.pay-badge { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 8px; background: #fff; border: var(--border-hair); }
.pay-badge__svg, .pay-badge__img { height: 18px; width: auto; display: block; }