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

/* 0) Notes
   - Dış zemin: Ivory Bone degrade
   - Kartlar: Deep Moss + Tree Gold vurgu
*/

/* 1) Page Shell */
.advertise-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);
}
.advertise-page .prose,
.advertise-page > section,
.advertise-hero {
  max-width: min(var(--container-max), 75ch);
  margin-inline: auto;
}

/* 2) Hero */
.advertise-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;
}
.advertise-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%);
  filter: blur(18px); opacity:.45; pointer-events:none;
}
.advertise-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;
}
.advertise-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) */
.advertise-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);
}
.advertise-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 */
.advertise-page p,
.advertise-page li{
  color: var(--ivory-bone);
  font-size: clamp(1rem, .25vw + .95rem, 1.125rem);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
}
.advertise-page ul{ padding-left:1.25em; margin:0; }
.advertise-page li{ margin-block:.5em; }
.advertise-page li::marker{ color: var(--tree-gold); }

.advertise-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);
}

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

/* anchor offset */
.advertise-page [aria-labelledby]{ scroll-margin-top: 96px; }

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

/* 6) Focus/A11y */
.advertise-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, .advertise-page, .advertise-page section{
    color:#000 !important; border-color:#000 !important;
  }
  .advertise-hero{ border:0 !important; }
  .advertise-page a{ color:#000 !important; text-decoration: underline !important; }
}