/* ============================================================
   Alpekin · Terms Page Styles (Alpine Green · structured)
   - HTML değişikliği yok
   - Yalnız tokens.css değişkenleri
   ============================================================ */


/* =========================================
   0) Notes
   - Tüm renk/ölçü token’lardan gelir
   - Dış zemin: Ivory Bone degrade
   - Kartlar: Deep Moss tonları + Tree Gold vurgu
   ========================================= */


/* =========================================
   1) Page Shell (outer layout)
   ========================================= */

.terms-page {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--ivory-bone) 95%, white) 0%,
      color-mix(in srgb, var(--moon-ash) 85%, white) 100%
    );
  color: var(--dark-soil);
  padding-block: var(--space-10);
  padding-inline: var(--space-4);
}

/* okuma genişliği */
.terms-page .prose,
.terms-page > section,
.terms-hero {
  max-width: min(var(--container-max), 75ch);
  margin-inline: auto;
}


/* =========================================
   2) Hero (banner)
   ========================================= */

.terms-hero {
  background:
    radial-gradient(90rem 38rem at 20% -20%,
      color-mix(in srgb, var(--tree-gold) 10%, transparent), transparent 60%),
    linear-gradient(135deg, var(--alpine-green),
      color-mix(in srgb, var(--tree-gold) 20%, var(--deep-moss)));
  border-radius: var(--radius-xl);
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  box-shadow: var(--elevation-lg);
  padding: clamp(var(--space-7), 4vw, var(--space-10));
  margin-block-end: var(--space-8);
  position: relative;
  overflow: hidden;
}

/* altın “sheen” */
.terms-hero::before {
  content: "";
  position: absolute;
  inset: -25% -10% auto -25%;
  height: 60%;
  transform: rotate(8deg);
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, var(--tree-gold) 22%, transparent) 35%,
    transparent 70%);
  pointer-events: none;
  filter: blur(18px);
  opacity: .45;
}

/* iç vinyet + saç teli çerçeve */
.terms-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--ivory-bone) 16%, transparent),
    inset 0 -24px 40px color-mix(in srgb, black 35%, transparent);
  pointer-events: none;
}

.terms-hero h1 {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: clamp(2rem, 2.4vw + 1.25rem, 3rem);
  letter-spacing: var(--ls-heading-tight);
  color: var(--ivory-bone);
  text-shadow: var(--accent-gold-glow);
  margin: 0 0 var(--space-2);
}

.effective-date {
  margin: 0;
  color: color-mix(in srgb, var(--ivory-bone) 82%, var(--moon-ash));
  opacity: .95;
  font-size: clamp(.95rem, .25vw + .9rem, 1.05rem);
}


/* =========================================
   3) Sections (cards)
   ========================================= */

.terms-page section {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--deep-moss) 48%, black) 0%,
      color-mix(in srgb, var(--deep-moss) 62%, black) 100%
    );
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow:
    var(--elevation-sm),
    inset 0 0 0 1px color-mix(in srgb, var(--ivory-bone) 10%, transparent);
  padding: clamp(var(--space-6), 2vw + 1rem, var(--space-8));
  margin-block: var(--space-8);
  position: relative;
  color: var(--ivory-bone);
  border-top: 3px solid var(--tree-gold);
  backdrop-filter: saturate(115%) blur(.3px);
}

/* bölüm başlıkları */
.terms-page h2 {
  color: var(--ivory-bone);
  font-size: clamp(1.25rem, 1.2vw + 1rem, 1.75rem);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--ls-heading-tight);
  text-shadow: 0 0 8px color-mix(in srgb, var(--tree-gold) 22%, transparent);
  margin: 0 0 var(--space-3);
}


/* =========================================
   4) Body Elements (text, lists, notes, links)
   ========================================= */

.terms-page p,
.terms-page li {
  color: var(--ivory-bone);
  font-size: clamp(1rem, .25vw + .95rem, 1.125rem);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
}

.terms-page ul { padding-left: 1.25em; margin: 0; }
.terms-page li { margin-block: .5em; }
.terms-page li::marker { color: var(--tree-gold); }

.terms-note {
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--tree-gold) 15%, transparent);
  border-left: 3px solid var(--tree-gold);
  color: var(--ivory-bone);
}

/* linkler */
.terms-page a {
  color: var(--tree-gold);
  text-decoration-thickness: 1px;
  transition: color var(--ease-standard);
}
.terms-page a:hover,
.terms-page a:focus-visible {
  color: color-mix(in srgb, var(--tree-gold) 85%, var(--sacred-copper));
  text-decoration: underline;
  outline: none;
}

/* sabit header’a çarpmadan kaydır */
.terms-page [aria-labelledby] { scroll-margin-top: 96px; }


/* =========================================
   5) Responsive
   ========================================= */
@media (max-width: 1024px) {
  .terms-page { padding-block: var(--space-8); }
  .terms-page section { margin-block: var(--space-7); }
}
@media (max-width: 640px) {
  .terms-hero { margin-block-end: var(--space-6); }
  .terms-page section { margin-block: var(--space-5); }
}


/* =========================================
   6) Focus / A11y
   ========================================= */
.terms-page :focus-visible {
  box-shadow: var(--accent-gold-ring);
  outline: none;
}


/* =========================================
   7) Motion & Print
   ========================================= */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

@media print {
  * { box-shadow: none !important; background: #fff !important; }
  body, .terms-page, .terms-page section {
    color: #000 !important;
    border-color: #000 !important;
  }
  .terms-hero { border: 0 !important; }
  .terms-page a { color: #000 !important; text-decoration: underline !important; }
}