/* ============================================================
   POLISH LAYER — additive visual refinements layered on top of
   the existing design system. Linked LAST so it composes/overrides.
   Uses existing tokens only (--gold, --shadow, --ease …).
   Reversible: remove the <link> in Base.astro to revert.
   ============================================================ */

/* ---- richer ambient background depth (extra soft glows) ---- */
.bg-field {
  background:
    radial-gradient(1100px 600px at 84% -12%, rgba(232, 89, 12, 0.10), transparent 60%),
    radial-gradient(820px 480px at 4% 2%, rgba(22, 54, 92, 0.06), transparent 55%),
    radial-gradient(760px 540px at 50% 112%, rgba(232, 89, 12, 0.055), transparent 60%),
    linear-gradient(180deg, var(--navy-50, #F4F8FC), var(--slate-50, #F8FAFC) 40%);
}

/* ---- country / city hero: layered glow instead of flat gradient ---- */
.cp-hero {
  background:
    radial-gradient(860px 400px at 90% -22%, rgba(232, 89, 12, 0.11), transparent 62%),
    radial-gradient(520px 320px at 2% 0%, rgba(22, 54, 92, 0.05), transparent 60%),
    linear-gradient(180deg, var(--navy-50, #F4F8FC), transparent 80%);
}

/* ---- gradient accent on key display numbers / hero accent word ---- */
.display .gold-text,
.stat-value,
.cp-fact-v {
  background: linear-gradient(118deg, var(--gold-bright), var(--gold) 52%, var(--gold-deep));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--gold); /* fallback for very old engines */
}

/* ---- buttons: premium top sheen + cohesive ghost hover lift ---- */
.btn-gold { box-shadow: var(--shadow-gold), inset 0 1px 0 rgba(255, 255, 255, 0.28); }
.btn-gold:hover { box-shadow: 0 20px 42px -12px rgba(232, 89, 12, 0.50), inset 0 1px 0 rgba(255, 255, 255, 0.30); }
.btn-ghost { box-shadow: var(--shadow-xs, 0 1px 2px rgba(16, 42, 76, 0.06)); }
.btn-ghost:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm, 0 4px 12px -4px rgba(16, 42, 76, 0.12)); }
.btn-ghost:active { transform: translateY(0) scale(0.99); }

/* ---- cards: deeper elevation on hover ---- */
.card:hover { box-shadow: var(--shadow); }

/* fact cards had no hover state at all */
.cp-fact { transition: transform 0.38s var(--ease), box-shadow 0.38s var(--ease), border-color 0.3s; }
.cp-fact:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--gold-line); }

/* ---- service cards: gradient accent bar that wipes in on hover ---- */
.service-card::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold-bright), var(--gold-deep));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease);
}
.service-card:hover::after { transform: scaleX(1); }

/* ---- tags: subtle interactive accent ---- */
.tag { transition: border-color 0.2s, color 0.2s, background 0.2s; }
.tag:hover { border-color: var(--gold-line); color: var(--gold); background: var(--gold-soft); }

/* ---- crisp, on-brand focus ring (accessibility polish) ---- */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.input:focus-visible,
.select:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ---- eyebrow accent line: a touch longer & brighter ---- */
.eyebrow::before {
  width: 32px;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright), transparent);
}

/* ============================================================
   SERVICE CARDS v2 — editorial ghost number, inverting icon
   tile, visible link affordance, hover corner glow
   ============================================================ */

/* tiny mono "01" → large ghost display number (depth, editorial feel) */
.service-no {
  top: 12px;
  right: 18px;
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--brand);
  opacity: 0.07;
  pointer-events: none;
  transition: opacity 0.35s, color 0.35s;
}
.service-card:hover .service-no { color: var(--gold); opacity: 0.14; }

/* icon tile: soft gradient at rest → full brand gradient + white icon on hover */
.service-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(160deg, #FFF6EF, #FFE7D4);
  border-color: rgba(232, 89, 12, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  transition: transform 0.4s var(--ease), background 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.4s var(--ease);
}
.service-card:hover .service-icon {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold-deep));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 10px 20px -8px rgba(232, 89, 12, 0.5);
}

/* soft corner glow fades in behind content on hover */
.service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(240px 170px at 100% 0%, rgba(232, 89, 12, 0.08), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  pointer-events: none;
}
.service-card:hover::before { opacity: 1; }

/* linked cards are <a> — kill the browser's default blue on the title */
.service-card.linked { color: var(--ink); }
.service-card.linked h3 { color: var(--ink); transition: color 0.25s; }
.service-card.linked:hover h3 { color: var(--gold); }

/* "Detaylı bilgi" was opacity:0 until hover — invisible affordance.
   Always show it on linked cards; arrow slides on hover. */
.service-more {
  opacity: 0.9;
  transform: none;
}
.service-more svg { transition: transform 0.25s var(--ease); }
.service-card.linked:hover .service-more { opacity: 1; }
.service-card.linked:hover .service-more svg { transform: translateX(5px); }

/* group heading: small gold marker + gold-touched rule */
.service-group-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.service-group-label::before {
  content: "";
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold-deep));
}
.service-group-rule {
  background: linear-gradient(90deg, var(--gold-line), var(--line-strong) 35%, transparent);
}