/* ASM360 hukuki sayfalar - Tines esintili ortak web sistemi */
/* Fontlar self-host edilir: /assets/fonts.css (DM Sans, Fraunces). */

:root {
  --primary: #6956a8;
  --primary-hover: #4d3e78;
  --primary-soft: #eadff8;
  --ink: #222027;
  --ink-soft: #514e59;
  --ink-muted: #77727f;
  --bg: #fcf9f5;
  --surface: #ffffff;
  --border: #e4e0d9;
  --green: #25a871;
  --green-soft: #d6edd9;
  --orange: #b74d1a;
  --orange-soft: #ffe0cc;
  --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Fraunces', Georgia, serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  background:
    radial-gradient(circle at 90% 0, rgba(234, 223, 248, .9), transparent 34rem),
    var(--bg);
  color: var(--ink);
  line-height: 1.76;
  font-size: 16px;
}
::selection { background: var(--primary-soft); color: #32274b; }
.top { background: #32274b; color: #fff; padding: 22px 0; }
.wrap { max-width: 820px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.top a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 8px 14px;
  margin-left: -14px;
}
.top a:hover { background: rgba(255,255,255,.1); }
.top a:focus-visible { outline: 3px solid #d7c4fa; outline-offset: 3px; }
main {
  background: rgba(255,255,255,.94);
  border: 1px solid var(--border);
  border-radius: 28px;
  margin-top: 44px;
  margin-bottom: 76px;
  padding-top: clamp(36px, 6vw, 64px);
  padding-bottom: clamp(36px, 6vw, 64px);
  box-shadow: 0 22px 70px rgba(50,39,75,.09);
}
h1, h2 { font-family: var(--font-display); font-weight: 500; letter-spacing: -.035em; text-wrap: balance; }
h1 { font-size: clamp(36px, 6vw, 56px); line-height: 1.05; max-width: 680px; }
.meta { color: var(--ink-muted); font-size: 13px; margin-top: 16px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.ozet { color: var(--ink-soft); margin-top: 22px; font-size: 19px; line-height: 1.55; max-width: 680px; }
.taslak {
  display: flex;
  gap: 10px;
  background: var(--orange-soft);
  color: var(--orange);
  border-radius: 16px;
  padding: 15px 18px;
  font-size: 14px;
  margin-top: 24px;
}
.guncelleme { color: var(--ink-muted); font-size: 13px; margin-top: 18px; }
h2 { font-size: 26px; line-height: 1.2; margin: 46px 0 14px; color: #32274b; }
p { color: var(--ink-soft); margin-bottom: 13px; text-wrap: pretty; }
ul { margin: 0 0 14px; padding-left: 0; list-style: none; }
li { color: var(--ink-soft); padding-left: 24px; position: relative; margin-bottom: 9px; }
li::before { content: ''; position: absolute; left: 0; top: 11px; width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px var(--green-soft); }
footer { max-width: 820px; margin: 0 auto; padding: 0 24px 48px; color: var(--ink-muted); font-size: 13px; text-align: center; }

@media (max-width: 640px) {
  .wrap { padding-left: 18px; padding-right: 18px; }
  main { margin-top: 18px; margin-bottom: 44px; border-radius: 20px; }
  h2 { font-size: 23px; margin-top: 38px; }
}