/* ===========================================================================
   adlibilisim.online — tanıtım sayfası
   serkangungor.online ile aynı palet (Agents: metalik grafit + gümüş, buzlu cam),
   hero portal giriş panelinin koyu grafiti. Yalnızca açık tema. Altın YOK.
   =========================================================================== */

:root {
  color-scheme: only light;
  --bg: #f5f5f6;
  --surface: #fafafa;
  --text: #18181b;
  --text-soft: #3f3f46;
  --muted: #71717a;
  --border: #e4e4e7;

  --graphite-1: #4a4e57;
  --graphite-2: #34373e;
  --graphite-3: #23252a;
  --graphite-4: #1b1c20;
  --graphite-grad: linear-gradient(160deg, #4a4e57 0%, #34373e 45%, #23252a 100%);
  --graphite-deep-grad: linear-gradient(160deg, #1b1c20 0%, #121316 45%, #09090b 100%);
  --brushed: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 3px),
             radial-gradient(120% 50% at 0% 0%, rgba(255, 255, 255, 0.16), transparent 60%);
  --brushed-soft: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.012) 0 1px, transparent 1px 3px),
                  radial-gradient(110% 40% at 0% 0%, rgba(255, 255, 255, 0.06), transparent 60%);
  --silver-grad: linear-gradient(180deg, #ffffff 0%, #e4e7ec 45%, #a9b0ba 100%);
  --silver-line: linear-gradient(90deg, #4a4e57, #a9b0ba);
  --ink-accent: #4a4e57;

  --ok: #047857;           /* emerald-700 — açık zeminde okunur */
  --ok-bg: rgba(16, 185, 129, 0.14);
  --ok-on-dark: #6ee7b7;
  --warn: #92400e;
  --warn-bg: rgba(245, 158, 11, 0.1);

  --glass-bg: rgba(255, 255, 255, 0.6);
  --glass-bg-strong: rgba(255, 255, 255, 0.76);
  --glass-border: rgba(24, 24, 27, 0.09);
  --glass-ring: rgba(255, 255, 255, 0.8);
  --glass-shadow: inset 0 1px 0 var(--glass-ring), 0 1px 2px rgba(24, 24, 27, 0.04), 0 12px 32px -14px rgba(24, 24, 27, 0.2);
  --glass-shadow-hover: inset 0 1px 0 var(--glass-ring), 0 22px 44px -16px rgba(24, 24, 27, 0.3), 0 8px 20px -8px rgba(24, 24, 27, 0.16);

  --glass-blur: 22px;
  --shadow-lg: 0 20px 48px rgba(24, 24, 27, 0.16);
  --radius: 16px;
  --radius-lg: 24px;
  --maxw: 1120px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; scrollbar-gutter: stable;
  /* Safari yaylanma alanı koyu: WebKit html + body arka plan RENKLERİNİ bindirir → body'nin açık zemini renk değil görsel */
  background: #121316; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

body {
  margin: 0; padding: 68px 0 0;
  font-family: var(--font); color: var(--text); background: linear-gradient(var(--bg), var(--bg));
  position: relative; z-index: 0;  /* body::before (z-index:-2) body zemininin üstünde kalsın */
  line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(60% 50% at 8% 12%, rgba(148, 163, 184, 0.24), transparent 62%),
    radial-gradient(50% 45% at 94% 6%, rgba(169, 176, 186, 0.2), transparent 62%),
    radial-gradient(55% 50% at 80% 94%, rgba(113, 113, 122, 0.18), transparent 62%),
    radial-gradient(45% 40% at 0% 100%, rgba(56, 189, 248, 0.07), transparent 60%);
}
::selection { background: rgba(74, 78, 87, 0.22); }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
:focus-visible { outline: 2px solid var(--graphite-1); outline-offset: 3px; border-radius: 6px; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.section { padding: 96px 0; }
.section--tint {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(228, 228, 231, 0.32));
  border-top: 1px solid rgba(255, 255, 255, 0.7); border-bottom: 1px solid rgba(24, 24, 27, 0.05);
}
.eyebrow {
  display: inline-block; margin: 0 0 12px;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-accent);
}
.eyebrow::before {
  content: ""; display: inline-block; vertical-align: middle; width: 22px; height: 2px;
  margin: -2px 10px 0 0; border-radius: 2px; background: var(--silver-line);
}
.section-title { font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; margin: 0 0 14px; }
.section-lead { color: var(--muted); max-width: none; margin: 0 0 44px; font-size: 1.02rem; text-align: justify; hyphens: auto; }

/* ---------- Düğmeler ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 46px; padding: 0 22px; border-radius: 12px;
  font: 600 0.95rem/1 var(--font); white-space: nowrap; cursor: pointer;
  border: 1px solid transparent; transition: transform 0.16s, box-shadow 0.16s, background 0.16s, border-color 0.16s;
}
.btn:hover { transform: translateY(-1px); }
.btn--silver {
  color: var(--graphite-4); background: var(--silver-grad); border-color: rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 1px 0 #fff, 0 10px 26px -10px rgba(0, 0, 0, 0.6);
}
.btn--ghost {
  color: #f4f4f5; background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.btn--ghost:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.36); }
.btn--outline {
  color: var(--graphite-3); background: var(--glass-bg-strong); border-color: var(--glass-border); box-shadow: var(--glass-shadow);
}
.btn--outline:hover { box-shadow: var(--glass-shadow-hover); }
.btn--nav {
  min-height: 38px; padding: 0 16px; border-radius: 10px; font-size: 0.86rem;
  color: #f4f4f5; background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.22);
}
.btn--nav:hover { background: rgba(255, 255, 255, 0.14); transform: none; }

/* ---------- Navbar (ana siteyle aynı grafit bar) ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 55;
  background: var(--brushed-soft), linear-gradient(160deg, rgba(56, 59, 66, 0.94) 0%, rgba(39, 41, 47, 0.95) 45%, rgba(25, 26, 30, 0.96) 100%);
  -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 30px -12px rgba(9, 9, 11, 0.45);
}
.nav::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(228, 231, 236, 0.45) 50%, transparent);
}
.nav__inner { position: relative; display: flex; align-items: center; gap: 28px; height: 68px; }
.brand { display: flex; align-items: center; gap: 12px; flex: 0 1 auto; min-width: 0; }
.brand__sgf { height: 64px; width: auto; max-width: none; }
.brand__logo { width: 40px; height: 40px; object-fit: contain; flex: 0 0 auto; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35)); }
.brand__text { display: flex; flex-direction: column; min-width: 0; }
.brand__name, .brand__title { -webkit-background-clip: text; background-clip: text; color: transparent; background-image: var(--silver-grad); white-space: nowrap; }
.brand__name { font-size: 1.28rem; font-weight: 700; line-height: 1.2; letter-spacing: 0.005em; }
.brand__title {
  font-size: 0.585rem; font-weight: 600; line-height: 1.2; letter-spacing: 0.075em;
  margin-top: 2px; padding-top: 3px; border-top: 1px solid rgba(228, 231, 236, 0.28);
}
.nav__links { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav__links a {
  color: #d4d4d8; font-size: 0.9rem; font-weight: 500; padding: 8px 12px; border-radius: 8px;
  transition: color 0.16s, background 0.16s;
}
.nav__links a:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.nav__links .nav__links-portal { display: none; }
.nav__actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.nav__toggle {
  display: none; width: 42px; height: 42px; padding: 0; border-radius: 10px; cursor: pointer;
  background: transparent; border: 1px solid rgba(255, 255, 255, 0.2);
  flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.nav__toggle span { display: block; width: 18px; height: 2px; border-radius: 2px; background: #e4e7ec; transition: transform 0.18s, opacity 0.18s; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Hero (portal giriş panelinin koyu grafiti) ---------- */
.hero {
  position: relative; overflow: hidden; color: #f4f4f5;
  background: var(--brushed), var(--graphite-deep-grad);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.hero__waves { position: absolute; inset: 0; width: 100%; height: 100%; color: rgba(255, 255, 255, 0.09); pointer-events: none; }
.hero__inner {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 56px; align-items: center; padding-top: 88px; padding-bottom: 96px;
}
.hero__badge {
  display: inline-flex; align-items: center; gap: 9px; margin: 0 0 22px; padding: 7px 14px; border-radius: 999px;
  font-size: 0.82rem; font-weight: 600; color: #e4e4e7;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14);
}
.hero__badge .dot { width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.18); }
.hero__title {
  margin: 0 0 20px; font-size: clamp(2.1rem, 4.6vw, 3.4rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.03em;
  background: var(--silver-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__title span { display: block; }
.hero__lead { margin: 0 0 32px; font-size: 1.08rem; color: #c8cacf; text-align: justify; hyphens: auto; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; }
.hero__facts { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 0; padding: 0; list-style: none; font-size: 0.86rem; color: #a1a1aa; }
.hero__facts li { display: inline-flex; align-items: center; gap: 7px; }
.hero__facts svg { color: var(--ok-on-dark); }

/* Örnek tutanak kartı */
.receipt {
  margin: 0; padding: 22px; border-radius: var(--radius-lg); color: var(--text);
  background: rgba(250, 250, 250, 0.96); border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 1px 0 #fff, 0 30px 60px -20px rgba(0, 0, 0, 0.7), 0 0 0 6px rgba(255, 255, 255, 0.04);
  transform: rotate(1.2deg);
}
.receipt__head { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px dashed var(--border); }
.receipt__head strong { display: block; font-size: 0.98rem; }
.receipt__head small { color: var(--muted); font-size: 0.78rem; }
.receipt__head .chip { margin-left: auto; }
.receipt__icon {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; color: #f4f4f5;
  background: var(--brushed), var(--graphite-grad); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.receipt__rows { margin: 0; padding-top: 6px; }
.receipt__rows > div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid #f0f0f2; font-size: 0.86rem; }
.receipt__rows dt { color: var(--muted); }
.receipt__rows dd { margin: 0; font-weight: 600; text-align: right; }
.receipt__hash { flex-direction: column; gap: 6px !important; }
.receipt__hash dd { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; }
.receipt__hash code { font: 500 0.84rem var(--mono); padding: 4px 8px; border-radius: 6px; background: #f4f4f5; color: var(--graphite-3); overflow: hidden; text-overflow: ellipsis; }
.receipt__foot { margin-top: 14px; font-size: 0.8rem; line-height: 1.55; color: var(--muted); }
.receipt__foot b { color: var(--text-soft); }

.chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; white-space: nowrap;
  font-size: 0.74rem; font-weight: 700;
}
.chip--ok { color: var(--ok); background: var(--ok-bg); }
.chip--ok::before { content: "✓"; font-weight: 800; }
.chip--sm { padding: 3px 8px; font-size: 0.7rem; }

/* ---------- Hizmetler ---------- */
.services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.service, .assure__card, .step {
  position: relative; border-radius: var(--radius); background: var(--glass-bg);
  -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow);
  transition: box-shadow 0.2s, transform 0.2s;
}
.service:hover, .assure__card:hover { box-shadow: var(--glass-shadow-hover); transform: translateY(-2px); }
.service { padding: 26px 26px 22px; }
.service__icon, .assure__icon {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; margin-bottom: 16px; color: #f4f4f5;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 8px 18px -8px rgba(24, 24, 27, 0.55);
}
/* Grafit tonları — gümüş/grafit paleti içinde ayrışan dört ton */
.tone-slate { background: var(--brushed), linear-gradient(160deg, #64748b, #334155); }
.tone-steel { background: var(--brushed), linear-gradient(160deg, #5b6573, #2f3640); }
.tone-zinc { background: var(--brushed), linear-gradient(160deg, #71717a, #3f3f46); }
.tone-graphite { background: var(--brushed), var(--graphite-grad); }
.service h3, .assure__card h3, .step h3 { margin: 0 0 12px; font-size: 1.08rem; font-weight: 700; letter-spacing: -0.01em; }
.service ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.service li { position: relative; padding-left: 18px; font-size: 0.92rem; color: var(--muted); }
.service li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 6px; height: 6px; border-radius: 2px; background: var(--graphite-1); }
.service li b { color: var(--text-soft); font-weight: 600; }

.note {
  display: flex; align-items: flex-start; gap: 10px; margin: 28px 0 0; padding: 14px 18px; border-radius: 12px;
  font-size: 0.9rem; color: var(--text-soft); background: rgba(255, 255, 255, 0.55); border: 1px solid var(--glass-border);
}
.note svg { margin-top: 3px; color: var(--graphite-1); }
.note--warn { background: var(--warn-bg); border-color: rgba(245, 158, 11, 0.28); color: var(--warn); }
.note--warn svg { color: var(--warn); }

/* ---------- Süreç ---------- */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.step { padding: 24px 24px 22px; }
.step__no {
  display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 14px; border-radius: 50%;
  font-weight: 800; color: #f4f4f5; background: var(--brushed), var(--graphite-grad);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 0 5px rgba(74, 78, 87, 0.1);
}
.step p { margin: 0; font-size: 0.92rem; color: var(--muted); }

/* ---------- Güvence ---------- */
.assure { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.assure__card { padding: 24px; }
.assure__icon { background: var(--brushed), var(--graphite-grad); }
.assure__card p { margin: 0; font-size: 0.9rem; color: var(--muted); }

/* ---------- Hakkımda ---------- */
.about { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 52px; align-items: start; }
.about__photo { position: relative; padding: 6px; border-radius: 22px; background: rgba(255, 255, 255, 0.7); box-shadow: 0 0 0 2px #c3c8cf, var(--glass-shadow); }
.about__photo img { width: 100%; height: auto; border-radius: 17px; }
.about__role { margin: -6px 0 16px; font-weight: 600; color: var(--ink-accent); }
.about__body > p { color: var(--text-soft); max-width: 720px; }
.creds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 26px 0 28px; padding: 0; list-style: none; }
.creds li {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px;
  background: var(--glass-bg); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow);
}
.creds img { width: 36px; height: 36px; object-fit: contain; border-radius: 50%; background: #fff; padding: 2px; flex: 0 0 auto; }
.creds span { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.creds b { font-size: 0.86rem; font-weight: 600; }
.creds small { font-size: 0.78rem; color: var(--muted); }

/* ---------- Çağrı ---------- */
.section--cta { padding-top: 0; padding-bottom: 88px; }
#hakkimda + .section--cta { padding-top: 88px; }
.cta {
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 32px;
  padding: 40px 44px; border-radius: var(--radius-lg); color: #f4f4f5;
  background: var(--brushed), var(--graphite-grad);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 30px 60px -28px rgba(9, 9, 11, 0.7);
}
.cta h2 { margin: 0 0 8px; font-size: clamp(1.3rem, 2.4vw, 1.65rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; }
.cta p { margin: 0; color: #c8cacf; font-size: 0.95rem; max-width: 560px; }
.cta p a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, 0.4); }
.cta__actions { display: flex; flex-wrap: wrap; gap: 12px; flex: 0 0 auto; }

/* ---------- Footer ---------- */
.footer {
  color: rgba(228, 231, 236, 0.74); font-size: 0.88rem; margin-top: auto;
  background: var(--brushed-soft), var(--graphite-deep-grad); position: relative;
}
.footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(228, 231, 236, 0.4) 50%, transparent); }
.footer__inner { display: flex; align-items: center; justify-content: space-between; gap: 6px 28px; flex-wrap: wrap; padding-top: 30px; padding-bottom: 30px; line-height: 1.65; }
/* Solda telif, sağda yasal bağlantılar (tek satır → serkangungor.online footer'ıyla aynı yükseklik) */
.footer__links { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.footer__links a { color: rgba(228, 231, 236, 0.74); transition: color 0.16s; }
.footer__links a:hover { color: #fff; }

/* ---------- Duyarlı ---------- */
@media (max-width: 1020px) {
  .assure { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .nav__toggle { display: inline-flex; }
  .btn--nav { display: none; }
  .nav__links {
    position: absolute; top: calc(100% + 8px); right: 16px; z-index: 60;
    flex-direction: column; align-items: stretch; gap: 2px; min-width: 220px; padding: 8px; margin: 0;
    background: rgba(255, 255, 255, 0.97); border: 1px solid var(--glass-border); border-radius: 14px;
    box-shadow: inset 0 1px 0 var(--glass-ring), 0 18px 40px -12px rgba(24, 24, 27, 0.35);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity 0.16s, transform 0.16s, visibility 0.16s;
  }
  .nav__links.open { opacity: 1; visibility: visible; transform: none; }
  .nav__links a { color: var(--text-soft); padding: 11px 14px; }
  .nav__links a:hover { color: var(--graphite-3); background: rgba(24, 24, 27, 0.05); }
  .nav__links .nav__links-portal { display: block; margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--glass-border); border-radius: 0 0 8px 8px; font-weight: 600; color: var(--graphite-3); }
  .nav__actions { margin-left: auto; }
  .hero__inner { grid-template-columns: 1fr; gap: 44px; padding-top: 56px; padding-bottom: 64px; }
  .receipt { transform: none; max-width: 520px; }
  .services { grid-template-columns: 1fr; }
  .about { grid-template-columns: 1fr; gap: 28px; }
  .about__photo { width: 180px; }
  .cta { flex-direction: column; align-items: flex-start; padding: 32px 28px; }
}
@media (max-width: 420px) { .brand__sgf { height: 56px; } }
@media (max-width: 640px) {
  .footer__inner { justify-content: center; text-align: center; }
  .footer__links { justify-content: center; }
  .section { padding: 64px 0; }
  .section--cta { padding-bottom: 64px; }
  #hakkimda + .section--cta { padding-top: 64px; }
  .steps, .assure, .creds { grid-template-columns: 1fr; }
  .hero__cta .btn { flex: 1 1 100%; }
  .cta__actions, .cta__actions .btn { width: 100%; }
  .receipt { padding: 18px; }
  .receipt__rows > div { font-size: 0.82rem; }
}

/* 404 sayfası: navbarsız, tam ekran koyu panel */
.hero--404 { min-height: 100vh; display: flex; align-items: center; margin-top: -68px; }
.hero--404 .hero__inner { grid-template-columns: 1fr; }
.hero__sgf { display: inline-block; margin-bottom: 28px; }
.hero__sgf img { height: 70px; width: auto; }

/* ---------- Çerez Yönetim Aracı (cookie-consent.js) — alt banner, cam efekti ---------- */
/* Tercih yapılana kadar sayfa kullanılamaz: banner'ın arkasında tıklamaları
   yutan görünmez/hafif tonlu bir "scrim" var (tam ekran karanlık modal değil,
   banner'ın kendisi hâlâ sayfanın altında bir şerit). body de kaydırılamaz. */
body.cc-lock { overflow: hidden; }

/* Scrim üç class ile kontrol edilir (bkz. cookie-consent.js open()):
   "is-open" görsel koyulaşma, "is-blocking" gerçek tıklama/kaydırma engeli
   (Aydınlatma Metni sayfası DIŞINDA ikisi birden eklenir). Aydınlatma Metni
   sayfasında ise scrim TAM EKRAN açılmaz (sayfa gölgeli/karanlık görünmesin
   diye) — bunun yerine SADECE "is-local": scrim, banner'ın arkasını kaplayan
   dar bir şerde küçülür (yüksekliği JS'te banner'ın gerçek yüksekliğine göre
   ayarlanır) — böylece banner'ın cam efekti, arkasında yine koyu bir zemin
   olduğu için ana sayfadakiyle AYNI görünür, ama üstteki metin/navbar
   etkilenmez. */
.cc-scrim {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(24, 24, 27, 0.22);
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease;
}
.cc-scrim.is-open { opacity: 1; }
.cc-scrim.is-blocking { pointer-events: auto; }
/* Yükseklik JS'ten (.style.height) geliyor; burada sadece üstteki "top: 0"ı
   iptal edip alta yaslıyoruz. */
.cc-scrim.is-local { top: auto; }

/* Gerçek "buzlu cam" (glassmorphism): düşük opaklıklı beyaz + güçlü blur —
   arkadaki sayfa bulanık ama seçilebilir renk lekeleri hâlinde hissedilir,
   düz/opak bir yüzey değil. Üstte ince, açık renkli bir "cam kenarı" var. */
.cc-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
  display: none;
  background: rgba(255, 255, 255, 0.42);
  -webkit-backdrop-filter: saturate(200%) blur(22px);
  backdrop-filter: saturate(200%) blur(22px);
  border-top: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 -16px 40px rgba(24, 24, 27, 0.16);
}
.cc-banner.is-open { display: block; -webkit-animation: cc-slide-up 0.25s ease; animation: cc-slide-up 0.25s ease; }
@keyframes cc-slide-up {
  from { opacity: 0; transform: translateY(100%); }
  to { opacity: 1; transform: none; }
}

/* Tercihleri Yönet ekranı: alt banner'ın DEVAMI değil, ekranın ortasında
   ayrı bir pencere gibi açılan bağımsız bir modal (kullanıcı isteği:
   "sayfanın altında değil ortada, ayrı bir ayar penceresi gibi"). */
.cc-modal {
  position: fixed; top: 50%; left: 50%; z-index: 1001;
  transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 32px)); max-height: 82vh; overflow-y: auto;
  display: none;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: saturate(200%) blur(22px);
  backdrop-filter: saturate(200%) blur(22px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 64px rgba(24, 24, 27, 0.28);
}
.cc-modal.is-open {
  display: block;
  -webkit-animation: cc-pop-in 0.22s cubic-bezier(0.16,1,0.3,1);
  animation: cc-pop-in 0.22s cubic-bezier(0.16,1,0.3,1);
}
@keyframes cc-pop-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.94); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.cc-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 22px 24px;
  max-height: 78vh; overflow-y: auto;
}
.cc-inner--modal { max-width: none; max-height: none; padding: 26px 26px 24px; overflow: visible; }

/* Basit görünüm: solda metin, sağda alt alta sıralı butonlar. .cc-copy ve
   .cc-actions--stack flex-start ile aynı Y'de başlıyor, ama paragrafın
   satır yüksekliği (line-height 1.65) glifin üstünde boşluk bıraktığı için
   "W" harfinin GERÇEK MÜREKKEP (ink) üst pikseli kutunun üstünden aşağıda
   kalıyor — buton kutusunun üst çizgisiyle aynı hizaya gelsin diye .cc-copy
   üst dolgu payı alıyor. 21px değeri DOM kutu metrikleriyle değil, render
   edilmiş piksellerin taranmasıyla (Inter, 0.96rem/1.65) kalibre edildi —
   font/boyut değişirse piksel bazında yeniden ölçülmeli, satır-yüksekliği
   hesabına güvenilmemeli (o hesap ~4px hatalı çıkıyor). */
.cc-layout { display: flex; align-items: flex-start; gap: 32px; }
.cc-copy { flex: 1 1 auto; min-width: 0; padding-top: 21px; }
.cc-actions--stack {
  display: flex; flex-direction: column; gap: 8px;
  flex: 0 0 220px; margin-top: 0;
}
.cc-actions--stack .cc-btn { width: 100%; }

.cc-title { font-size: 1.3rem; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 12px; color: var(--text); }
.cc-intro { color: var(--text-soft); font-size: 0.96rem; line-height: 1.65; margin: 0; text-align: justify; hyphens: auto; }
.cc-link { color: var(--graphite-3); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.cc-link:hover { color: var(--graphite-1); }

.cc-cat { padding: 16px 0; border-top: 1px solid rgba(24, 24, 27, 0.10); }
.cc-cat:first-of-type { border-top: none; padding-top: 0; }
.cc-cat__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.cc-cat__name { font-weight: 700; font-size: 0.96rem; color: var(--text); }
.cc-cat__desc { color: var(--text-soft); font-size: 0.86rem; line-height: 1.55; margin: 8px 0 0; }

.cc-switch { position: relative; display: inline-flex; flex: 0 0 auto; width: 42px; height: 24px; cursor: pointer; }
.cc-switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.cc-switch__track {
  position: absolute; inset: 0; border-radius: 999px; background: rgba(24, 24, 27, 0.18);
  transition: background 0.16s;
}
.cc-switch__thumb {
  position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(24, 24, 27, 0.3); transition: transform 0.16s;
}
.cc-switch input:checked ~ .cc-switch__track { background: var(--graphite-grad); }
.cc-switch input:checked ~ .cc-switch__track .cc-switch__thumb { transform: translateX(18px); }
.cc-switch input:disabled ~ .cc-switch__track { background: var(--graphite-grad); opacity: 0.55; cursor: not-allowed; }
.cc-switch--disabled { cursor: not-allowed; }

.cc-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 28px; }
/* Tercihleri Yönet penceresinin sol alt köşesinde küre logo (düğmeler sağda kalır).
   36px: 40px'lik düğme bandının dikey ortasında; gölge her yöne eşit (aşağı düşen gölge logoyu aşağıda gösteriyordu).
   Efekt: birkaç saniyede bir logonun YALNIZCA kendi şekli üzerinde (mask) soldan sağa ince ışık yansıması. */
.cc-logo { position: relative; display: block; width: 36px; height: 36px; margin-right: auto; align-self: center; flex: 0 0 auto; }
.cc-logo img { display: block; width: 36px; height: 36px; object-fit: contain; filter: drop-shadow(0 0 3px rgba(24, 24, 27, 0.18)); }
.cc-logo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.95) 50%, transparent 62%) no-repeat;
  background-size: 300% 100%; background-position: 130% 0;
  -webkit-mask: url("/img/logo-80.png?v=1") center / contain no-repeat;
          mask: url("/img/logo-80.png?v=1") center / contain no-repeat;
  -webkit-animation: cc-logo-shine 5.5s ease-in-out 1.2s infinite; animation: cc-logo-shine 5.5s ease-in-out 1.2s infinite;
}
@keyframes cc-logo-shine { 0% { background-position: 130% 0; } 22%, 100% { background-position: -30% 0; } }
@-webkit-keyframes cc-logo-shine { 0% { background-position: 130% 0; } 22%, 100% { background-position: -30% 0; } }
@media (prefers-reduced-motion: reduce) { .cc-logo::after { -webkit-animation: none; animation: none; display: none; } }

/* Tek tip, "renksiz" buton stili — Tümünü Kabul Et diğerlerine göre görsel
   olarak öne çıkarılmıyor (kullanıcıyı belirli bir seçime yönlendirmemek için
   bilinçli tercih). Sadece Tercihler ekranındaki "Seçimi Kaydet" (hangi
   seçim yapılırsa yapılsın kaydeden nötr bir onay eylemi) accent renkli. */
.cc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 20px; border-radius: 999px; font-weight: 600; font-size: 0.9rem;
  font-family: var(--font); cursor: pointer; white-space: nowrap;
  background: rgba(255, 255, 255, 0.4); color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: transform 0.16s, background 0.16s, border-color 0.16s, color 0.16s;
}
.cc-btn:hover { background: rgba(255, 255, 255, 0.7); border-color: rgba(255, 255, 255, 0.7); transform: translateY(-1px); }
.cc-btn--primary { background: var(--brushed), var(--graphite-grad); color: #fff; border-color: rgba(255, 255, 255, 0.08); }
.cc-btn--primary:hover { background: var(--brushed), var(--graphite-grad); border-color: rgba(255, 255, 255, 0.22); }

@media (max-width: 760px) {
  .cc-layout { flex-direction: column; gap: 16px; }
  .cc-actions--stack { flex: none; width: 100%; }
  /* Dar ekranda metin butonların ÜSTÜNDE yığılıyor — masaüstündeki yan-yana
     hizalama boşluğuna artık gerek yok. */
  .cc-copy { padding-top: 0; }
}
@media (max-width: 480px) {
  .cc-inner { padding: 18px 18px; }
  .cc-actions { flex-direction: column-reverse; align-items: stretch; }
  .cc-logo { align-self: flex-start; margin: 4px 0 0; }
}
/* Karar verildikten sonra tercihleri yeniden açmak için sol alt köşede
   sabit duran ikon (bkz. cookie-consent.js buildFab()). Banner açıkken
   [hidden] ile gizlenir. z-index banner/scrim'den (999/1000) düşük tutuldu
   — zaten aynı anda ikisi birden görünmüyor, çakışma riski yok. */
.cc-fab {
  position: fixed; left: 20px; bottom: 20px; z-index: 900;
  width: 48px; height: 48px; border-radius: 50%; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--brushed), var(--graphite-grad); color: #eceef1; border: 1px solid rgba(255, 255, 255, 0.1); cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), var(--shadow-lg);
  transition: transform 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}
.cc-fab:hover { color: #fff; transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), var(--shadow-lg), 0 0 0 3px rgba(74, 78, 87, 0.18); }
.cc-fab svg { width: 24px; height: 24px; }
/* display:flex yukarıda [hidden]'ın varsayılan UA kuralını (display:none) eziyordu
   — fab, banner/modal açıkken de görünür kalıyordu. Açıkça geri kazanılıyor. */
.cc-fab[hidden] { display: none; }
@media (max-width: 480px) {
  .cc-fab { left: 14px; bottom: 14px; width: 44px; height: 44px; }
  .cc-fab svg { width: 22px; height: 22px; }
}

/* ---------- Çerez Aydınlatma Metni sayfası (/cerez-aydinlatma-metni) ---------- */
.notice {
  max-width: 760px; margin: 0 auto;
  /* İçerik seçimi kapalı (serkangungor.online'daki sayfayla aynı) */
  -webkit-user-select: none; -moz-user-select: none; user-select: none;
}
.notice h2.section-title { margin-bottom: 6px; }
.notice__back {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 0 24px;
  color: var(--muted); font-size: 0.88rem; font-weight: 600;
}
.notice__back:hover { color: var(--graphite-3); }
.notice__back svg { width: 16px; height: 16px; }
.notice__updated { color: var(--muted); font-size: 0.85rem; margin: 0 0 40px; }
.notice__block { margin: 0 0 36px; }
.notice__block h3 { font-size: 1.08rem; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 12px; color: var(--text); }
.notice__block p { color: var(--text-soft); font-size: 0.96rem; line-height: 1.75; margin: 0 0 14px; text-align: justify; }
.notice__block p:last-child { margin-bottom: 0; }
.notice__block a { color: var(--graphite-3); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.notice__block a:hover { color: var(--graphite-1); }

.notice__table-wrap {
  overflow-x: auto; border: 1px solid var(--glass-border); border-radius: var(--radius);
  background: var(--glass-bg); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--glass-shadow);
}
.notice__table { width: 100%; border-collapse: collapse; font-size: 0.88rem; min-width: 560px; }
.notice__table th, .notice__table td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--border); vertical-align: top; }
.notice__table th { background: rgba(244, 244, 245, 0.7); font-weight: 700; color: var(--text); white-space: nowrap; }
.notice__table td { color: var(--text-soft); }
.notice__table tr:last-child td { border-bottom: none; }
.notice__table td:first-child { font-weight: 600; color: var(--text); white-space: nowrap; }