/* ===========================================================================
   Cobanov Instagram Unfollowers - shared foundation

   Design read: developer-tool landing for a privacy-cautious consumer
   audience, minimal dark-tech language, native CSS.
   Dials: DESIGN_VARIANCE 7 / MOTION_INTENSITY 5 / VISUAL_DENSITY 3.

   Shape lock: containers 14px, inputs 10px, interactive elements are pills.
   Colour lock: one accent (#e56192, 72% saturation) on every surface.
   Theme lock: dark end to end. No section inverts.
   =========================================================================== */

:root {
  color-scheme: dark;

  /* Warm off-black rather than pure #000, which flattens depth. */
  --bg: #141210;
  --surface: #1c1a17;
  --surface-2: #262320;
  --ink: #f5f2ed;
  --muted: #a09a90;
  --line: rgba(245, 242, 237, 0.09);
  --line-strong: rgba(245, 242, 237, 0.18);

  /* One accent, locked. Instagram's own gradient stops land at 3.0-3.9:1 on
     this background, so the readable accent is that pink pulled down to 72%
     saturation and up to 5.75:1. */
  --accent: #e56192;
  --accent-hover: #ef7ba6;
  --accent-quiet: rgba(229, 97, 146, 0.14);
  --on-accent: #141210;

  --code-bg: #0d0b0a;
  --code-muted: #8f887d;
  --code-line: #6b655c;
  /* Syntax palette, all verified on --code-bg: 6.0:1 and up. */
  --tok-kw: #e56192;
  --tok-str: #7fc98a;
  --tok-num: #e0a458;
  --tok-fn: #f5f2ed;
  --tok-punct: #8f887d;
  --ok: #7fc98a;
  --warn: #d9a441;

  --gutter: clamp(20px, 5vw, 64px);
  --measure: 1240px;
  --prose: 68ch;

  --step--1: 0.8125rem;
  --step-0: 1rem;
  --step-1: 1.125rem;
  --step-2: clamp(1.375rem, 1.1rem + 1.1vw, 1.75rem);
  --step-3: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem);
  --step-4: clamp(2.5rem, 1.2rem + 5.4vw, 4.5rem);

  --radius: 14px;
  --radius-sm: 10px;
  --pill: 999px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --section-y: clamp(48px, 5vw, 76px);

  --z-grain: 60;
  --z-header: 20;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font-family: Geist, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Language switch. Every translated string ships in both languages and CSS
   picks one, so the first paint is already correct and nothing flickers when
   the script runs. No data-lang attribute means English. */
:root:not([data-lang="tr"]) [lang="tr"] {
  display: none !important;
}

:root[data-lang="tr"] [lang="en"] {
  display: none !important;
}

h1,
h2,
h3 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
}

a:hover {
  text-decoration-color: var(--accent);
}

img {
  max-width: 100%;
  height: auto;
}

/* Film grain. Fixed and pointer-events-none so it never repaints on scroll. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.shell {
  width: min(var(--measure), 100% - var(--gutter) * 2);
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 18px;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: 0 0 var(--radius-sm) 0;
  font-weight: 500;
}

.skip-link:focus {
  left: 0;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.masthead {
  position: relative;
  z-index: var(--z-header);
  padding: 20px 0;
}

.masthead-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: var(--step-0);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-decoration: none;
  white-space: nowrap;
}

.wordmark-mark {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  flex: 0 0 auto;
}

.masthead nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-text {
  padding: 8px 12px;
  border-radius: var(--pill);
  color: var(--muted);
  font-size: var(--step--1);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.25s var(--ease), background 0.25s var(--ease);
}

.nav-text:hover {
  color: var(--ink);
  background: var(--surface);
}

.nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--pill);
  color: var(--muted);
  transition: color 0.25s var(--ease), background 0.25s var(--ease);
}

.nav-icon:hover {
  color: var(--ink);
  background: var(--surface);
}

.nav-icon svg {
  width: 16px;
  height: 16px;
  display: block;
}

.lang-toggle {
  min-width: 40px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--pill);
  background: transparent;
  color: var(--ink);
  font: 500 var(--step--1)/1 Geist, ui-sans-serif, sans-serif;
  cursor: pointer;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}

.lang-toggle:hover {
  border-color: var(--line-strong);
  background: var(--surface);
}

/* --------------------------------------------------------------------------
   Buttons. Interactive elements are pills; containers are not.
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid var(--line-strong);
  border-radius: var(--pill);
  background: transparent;
  color: var(--ink);
  font: 500 var(--step--1)/1 Geist, ui-sans-serif, sans-serif;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease),
    transform 0.12s var(--ease);
}

.btn:hover {
  background: var(--surface-2);
  border-color: transparent;
}

.btn:active {
  transform: scale(0.98);
}

.btn svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}

.btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

/* --------------------------------------------------------------------------
   Sections and prose
   -------------------------------------------------------------------------- */

main section {
  padding-block: var(--section-y) calc(var(--section-y) * 1.05);
}

main section + section {
  border-top: 1px solid var(--line);
}

h1 {
  margin: 0;
  font-size: var(--step-4);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.04em;
}

h2 {
  margin: 0;
  font-size: var(--step-3);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

h3 {
  margin: 0;
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -0.015em;
}

.section-intro {
  margin: 16px 0 0;
  max-width: 58ch;
  color: var(--muted);
}


.note {
  margin: 28px 0 0;
  padding: 2px 0 2px 16px;
  border-left: 2px solid var(--warn);
  color: var(--muted);
  font-size: var(--step--1);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.colophon {
  padding: 40px 0 56px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--step--1);
}

.colophon-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: baseline;
  justify-content: space-between;
}

.colophon a {
  color: var(--muted);
  text-decoration: none;
}

.colophon a:hover {
  color: var(--ink);
}

.colophon-links {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.colophon-legal {
  width: 100%;
  margin: 20px 0 0;
}

.footer-social { display: flex; align-items: center; gap: 16px; }
.footer-social a { display: inline-flex; }
.footer-social svg { width: 18px; height: 18px; display: block; }

/* --------------------------------------------------------------------------
   Motion. MOTION_INTENSITY 5: entry reveals and interaction feedback only.
   Driven by IntersectionObserver, never a scroll listener.
   -------------------------------------------------------------------------- */

/* Gated on .js so the content is never hidden when the script does not run.
   Hiding content in CSS and revealing it in JS loses the page if either the
   observer or the script fails. */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
    transition-delay: var(--reveal-delay, 0ms);
  }

  .js .reveal.is-visible {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   Quality floor
   -------------------------------------------------------------------------- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Secim de accent'ten: pembenin %32 alfasi. */
::selection { background: rgba(229, 97, 146, 0.32); }

@media (max-width: 640px) {
  .masthead nav {
    gap: 0;
  }

  .nav-text {
    padding: 8px;
  }
}