/* ─────────────────────────────────────────────────────────────
   Beats Digital — editoryal katman
   Tailwind CDN'in üstüne biner. Sayfa yapısı, rotalar, metinler ve dil sistemi değişmez.
   Renkler: Ink #0A0A0A · Bone #F5F1EA · Signal #FF2D1A · Slate #3D3D3D · Mist #D6D2CB
   Yazı: Fraunces Italic (başlık) · Inter (gövde) · JetBrains Mono (etiket)
   Hareket: 80ms ritim, yumuşak easing, prefers-reduced-motion desteği
   ───────────────────────────────────────────────────────────── */
:root {
  --ink: #0A0A0A; --bone: #F5F1EA; --signal: #FF2D1A; --slate: #3D3D3D; --mist: #D6D2CB; --cream: #FAF7F2;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --beat: 80ms;
}

/* ── Başlık ölçekleri ── */
.ed-h1 {
  font-family: 'Fraunces', Georgia, serif; font-weight: 900; font-style: italic;
  font-size: clamp(58px, 13.2vw, 188px); line-height: 0.86; letter-spacing: -0.045em;
}
.ed-h2 {
  font-family: 'Fraunces', Georgia, serif; font-weight: 800; font-style: italic;
  font-size: clamp(38px, 6.2vw, 92px); line-height: 0.96; letter-spacing: -0.03em;
}
.ed-h3 {
  font-family: 'Fraunces', Georgia, serif; font-weight: 800; font-style: italic;
  font-size: var(--t, clamp(32px, 4.2vw, 60px)); line-height: 1; letter-spacing: -0.025em;
}
.ed-num {
  font-family: 'Fraunces', Georgia, serif; font-weight: 900; font-style: italic;
  font-size: clamp(76px, 10vw, 168px); line-height: 0.78; letter-spacing: -0.05em; color: var(--mist);
  transition: color 240ms var(--ease-out);
}

/* ── Hero ── */
.ed-hero { background: var(--bone); }
.ed-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(10,10,10,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10,10,10,0.05) 1px, transparent 1px);
  background-size: 96px 96px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
}
.ed-bolt {
  pointer-events: none; user-select: none; -webkit-user-drag: none;
  aspect-ratio: 900 / 1040; height: auto;
}
.ed-bolt-hero {
  position: absolute; z-index: 3;
  right: -35px; top: 46%; width: min(66vw, 780px);
  transform: translateY(-52%) rotate(-2.5deg);
}
@media (min-width: 1500px) { .ed-bolt-hero { right: 5px; } }
@media (max-width: 767px) {
  .ed-bolt-hero { position: relative; right: auto; top: auto; width: 84%; margin: 8px -6% 0 auto; transform: none; display: block; }
}

/* Giriş ritmi: her öğe bir öncekinden 80ms sonra */
@keyframes ed-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes ed-bolt-in { from { opacity: 0; transform: translateY(-48%) rotate(-6deg) scale(.96); } to { opacity: 1; transform: translateY(-52%) rotate(-2.5deg); } }
.ed-in { opacity: 0; animation: ed-in 700ms var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * var(--beat)); }
.ed-bolt-hero { animation: ed-bolt-in 1100ms var(--ease-out) 480ms both; }
@media (max-width: 767px) { .ed-bolt-hero { animation: ed-in 900ms var(--ease-out) 480ms both; } }
@media (prefers-reduced-motion: reduce) {
  .ed-in, .ed-bolt-hero { animation: none !important; opacity: 1 !important; transform: none; }
  .ed-bolt-hero { transform: translateY(-52%) rotate(-2.5deg); }
  @media (max-width: 767px) { .ed-bolt-hero { transform: none; } }
}

/* ── Sistemler (editoryal manifesto) ── */
.ed-sys-list { border-bottom: 1px solid var(--ink); }
.ed-sys {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px;
  padding: 44px 0; border-top: 1px solid var(--ink); color: inherit; text-decoration: none;
}
.ed-sys-fig img { display: block; width: 100%; height: auto; transition: transform 520ms var(--ease-out); }
.ed-sys-fig { max-width: 520px; }
.ed-sys:hover .ed-sys-fig img { transform: translateY(-8px); }
.ed-sys:hover .ed-num { color: var(--signal); }
.ed-sys:hover .ed-h3 { color: var(--ink); }
.ed-go { display: inline-flex; align-items: center; gap: 12px; }
.ed-go .ed-arrow { color: var(--mist); font-size: 22px; transition: color 160ms, transform 240ms var(--ease-out); }
.ed-go .ed-bolt-glyph { width: 20px; height: 20px; opacity: 0; transform: translateX(-8px) scale(.8); transition: opacity 160ms, transform 240ms var(--ease-out); }
.ed-sys:hover .ed-go .ed-arrow { color: var(--signal); transform: translateX(4px); }
.ed-sys:hover .ed-go .ed-bolt-glyph { opacity: 1; transform: none; }
@media (min-width: 900px) {
  .ed-sys { grid-template-columns: 150px minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: center; gap: 48px; padding: 56px 0; }
  .ed-sys--flip { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr) 150px; }
  .ed-sys--flip .ed-sys-fig { order: 1; justify-self: start; }
  .ed-sys--flip .ed-sys-body { order: 2; }
  .ed-sys--flip .ed-sys-num { order: 3; text-align: right; }
  .ed-sys--wide { grid-template-columns: 150px minmax(0, 1fr) minmax(0, 0.6fr); padding: 44px 0; }
}
.ed-tag { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; color: var(--slate); border-bottom: 1px solid var(--ink); padding: 0 0 3px; }

/* ── Sektör satırları ── */
.ed-sec { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 20px; align-items: baseline; padding: 22px 0; border-top: 1px solid var(--mist); text-decoration: none; color: inherit; transition: padding-left 240ms var(--ease-out); }
.ed-sec:last-child { border-bottom: 1px solid var(--mist); }
.ed-sec:hover { padding-left: 12px; }
.ed-sec:hover .ed-sec-t { color: var(--signal); }
.ed-sec-t { font-family: 'Fraunces', Georgia, serif; font-weight: 800; font-style: italic; font-size: clamp(26px, 3vw, 40px); line-height: 1.05; letter-spacing: -0.02em; transition: color 160ms; }

/* ── Editoryal notlar (blog) ── */
.ed-note { position: relative; display: block; text-decoration: none; color: inherit; }
.ed-note::before { content: ''; display: block; width: 44px; height: 3px; background: var(--signal); margin-bottom: 20px; transition: width 320ms var(--ease-out); }
.ed-note:hover::before { width: 96px; }
.ed-note-t { font-family: 'Fraunces', Georgia, serif; font-weight: 800; font-style: italic; letter-spacing: -0.02em; line-height: 1.04; }
.ed-note:hover .ed-note-t { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: var(--signal); }

/* ── Kapanış CTA ── */
.ed-cta { background: var(--ink); color: var(--bone); position: relative; overflow: hidden; }
.ed-cta .ed-h2 { color: var(--bone); }
.ed-cta-btn {
  display: inline-flex; align-items: center; gap: 14px; background: var(--signal); color: var(--bone); border: 2px solid var(--signal);
  padding: 22px 34px; white-space: nowrap; font-family: 'Inter', sans-serif; font-weight: 800; font-size: 17px; letter-spacing: -0.01em;
  transition: background-color 160ms, color 160ms, border-color 160ms, transform 160ms var(--ease-out); text-decoration: none;
}
.ed-cta-btn:hover { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.ed-cta-btn:active { transform: scale(.97); }
.ed-cta-ghost {
  display: block; border: 1px solid #2a2a2a; padding: 18px 22px; text-decoration: none; color: var(--bone);
  transition: border-color 160ms, background-color 160ms, transform 160ms var(--ease-out);
}
.ed-cta-ghost:hover { border-color: var(--bone); background: #111; }
.ed-cta-ghost:active { transform: scale(.98); }

/* ── Hizmetler sayfası: kategori kapakları ── */
.ed-cat { position: relative; }
.ed-cat-fig img { width: 100%; height: auto; display: block; transition: transform 520ms var(--ease-out); }
.ed-cat:hover .ed-cat-fig img { transform: translateY(-8px); }
.ed-cat-num { position: absolute; font-family: 'Fraunces', Georgia, serif; font-weight: 900; font-style: italic; letter-spacing: -0.05em; line-height: .78; pointer-events: none; user-select: none; }

/* ── Case studies ── */
.ed-case-hero-num { font-family: 'Fraunces', Georgia, serif; font-weight: 900; font-style: italic; letter-spacing: -0.05em; line-height: .8; }
.ed-method { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; }

/* ── İletişim ── */
.ed-topic { position: relative; display: block; cursor: pointer; }
.ed-topic input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.ed-topic-card { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 16px; padding: 22px 24px; border: 1px solid var(--mist); background: var(--cream); transition: border-color 160ms, background-color 160ms, color 160ms; }
.ed-topic:hover .ed-topic-card { border-color: var(--ink); }
.ed-topic input:checked + .ed-topic-card { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.ed-topic input:focus-visible + .ed-topic-card { outline: 2px solid var(--signal); outline-offset: 3px; }
.ed-topic-t { font-family: 'Fraunces', Georgia, serif; font-weight: 800; font-style: italic; font-size: 26px; line-height: 1.05; letter-spacing: -0.02em; }
.ed-topic-d { font-size: 14px; line-height: 1.65; opacity: .74; }
.ed-topic-m { opacity: .6; }
.ed-topic-check { width: 14px; height: 14px; border: 1px solid currentColor; margin-top: 6px; position: relative; }
.ed-topic input:checked + .ed-topic-card .ed-topic-check::after { content: ''; position: absolute; inset: 2px; background: var(--signal); }

/* ── Hizmetler: indeks listeleri + sayfa başlığı ── */
.ed-h1--page { font-size: clamp(52px, 10.6vw, 152px); line-height: 0.9; }
.ed-idx { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); column-gap: 40px; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.ed-idx > li { border-bottom: 1px solid var(--mist); }
.ed-idx--wide { grid-template-columns: repeat(auto-fit, minmax(440px, 1fr)); }
.ed-idx--dark { border-top-color: var(--bone); }
.ed-idx--dark > li { border-bottom-color: #2a2a2a; }
@media (max-width: 480px) { .ed-idx, .ed-idx--wide { grid-template-columns: minmax(0, 1fr); } }
.ed-cat-num { top: -0.08em; z-index: 0; }
.ed-cat > .ed-cat-in { position: relative; z-index: 1; }

/* ── Case studies ── */
.ed-dark { background: var(--ink); color: var(--bone); position: relative; overflow: hidden; }
.ed-bolt-case { position: absolute; right: -8.5%; top: 52%; width: 120%; z-index: 4; transform: translateY(-50%) rotate(-2deg); }
@media (max-width: 767px) { .ed-bolt-case { right: -4.4%; width: 100%; } }
.ed-case { position: relative; display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: background-color 240ms var(--ease-out); }
.ed-case--dark { background: var(--ink); color: var(--bone); }
.ed-case:hover .ed-case-img { transform: scale(1.03); }
.ed-case-media { position: relative; overflow: hidden; height: 260px; background: var(--ink); }
.ed-case-img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 700ms var(--ease-out); }
.ed-case-big { font-family: 'Fraunces', Georgia, serif; font-weight: 900; font-style: italic; font-size: clamp(56px, 5.6vw, 84px); line-height: .82; letter-spacing: -0.05em; color: var(--signal); white-space: nowrap; }
.ed-case-t { font-family: 'Fraunces', Georgia, serif; font-weight: 800; font-style: italic; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.08; letter-spacing: -0.02em; }
.ed-method { display: inline-block; border: 1px solid currentColor; padding: 3px 8px; }

/* ── Glyph Portal: ana sayfa hero (kaydırınca "Rhythm" harfinin içine girilir) ──
   Varsayılan (JS yok / reduced-motion / kısa ekran / font gecikmesi) = statik hero. bd-portal.js data-gp-state="on" yaparsa portal düzeni açılır. */
.ed-portal { position: relative; overflow-x: clip; background: var(--bone); border-bottom: 1px solid var(--mist); }
.ed-portal [data-gp-viewport] { position: absolute; inset: 0 auto auto 0; height: 100vh; height: 100svh; width: 0; visibility: hidden; pointer-events: none; }
.ed-portal [data-gp-pin] { position: relative; isolation: isolate; overflow: clip; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-top: 4rem; background: var(--bone); }
.ed-portal [data-gp-art] { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; }
.ed-portal [data-gp-field], .ed-portal [data-gp-choices], .ed-pt-hint { display: none; }
.ed-pt-inner { position: relative; z-index: 10; width: 100%; max-width: 1200px; margin: 0 auto; padding: 5rem 1rem 2rem; }
@media (min-width: 768px) { .ed-pt-inner { padding: 6rem 2.5rem 2rem; } }
.ed-pt-pre, .ed-pt-word, .ed-pt-post { display: block; }
.ed-pt-word { color: var(--signal); }
.ed-pt-lower { display: block; }
.ed-pt-content { max-width: 1200px; margin: 0 auto; padding: 0 1rem 6rem; width: 100%; }
@media (min-width: 768px) { .ed-pt-content { padding-inline: 2.5rem; } }
.ed-pt-metrics { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--mist); }
@media (min-width: 768px) { .ed-pt-metrics { grid-template-columns: repeat(3, 1fr); } }
.ed-pt-metric { padding: 2rem; }
@media (min-width: 768px) { .ed-pt-metric:not(:last-child) { border-right: 1px solid var(--mist); } }
.ed-pt-lab { color: var(--slate); }

/* Açılış: içerik, mod belli olana dek gizli (en fazla ~2,9 sn; JS hiç çalışmazsa güvenlik animasyonu gösterir) */
@keyframes gp-failsafe { to { opacity: 1; } }
.ed-portal[data-gp-state="pending"] .ed-pt-x { opacity: 0; animation: gp-failsafe 0s linear 2.9s forwards; }
.ed-portal:not([data-gp-state="pending"]) .ed-pt-x { opacity: 0; animation: ed-in 700ms var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * var(--beat)); }
@media (prefers-reduced-motion: reduce) { .ed-pt-x { animation: none !important; opacity: 1 !important; } }

/* Portal düzeni */
.ed-portal[data-gp-state="on"] { border-bottom: 0; }
.ed-portal[data-gp-state="on"] [data-gp-pin] { position: sticky; top: 0; height: var(--gp-height, 100svh); min-height: 0; display: block; padding: 0; }
.ed-portal[data-gp-state="on"] [data-gp-field] { display: block; position: absolute; inset: 0; z-index: 1; background: var(--ink); pointer-events: none; overflow: hidden; }
.ed-pt-fieldbg { position: absolute; inset: -8%; transform: scale(var(--gp-field-scale, 1)); background: radial-gradient(52% 64% at 60% 52%, rgba(255,45,26,.62), rgba(255,45,26,0) 72%), radial-gradient(40% 50% at 18% 20%, rgba(255,45,26,.22), rgba(255,45,26,0) 70%), var(--ink); }
.ed-pt-bolt { position: absolute; left: 50%; top: 46%; height: 128%; width: auto; aspect-ratio: 900 / 1040; transform: translate(-50%, -50%) rotate(-2.5deg) scale(var(--gp-field-scale, 1)); pointer-events: none; }
.ed-portal[data-gp-state="on"] [data-gp-choices] { display: block; position: absolute; inset: 0; z-index: 5; visibility: hidden; pointer-events: none; }
.ed-portal[data-gp-choosing="true"][data-gp-state="on"] [data-gp-choices] { visibility: visible; }
.ed-portal [data-gp-choices] button { box-sizing: border-box; position: absolute; border: 0; padding: 0; margin: 0; background: transparent; cursor: pointer; pointer-events: auto; touch-action: pan-y; }
.ed-portal [data-gp-choices] button:disabled { pointer-events: none; }
.ed-portal [data-gp-choices] button:focus-visible { outline: 2px solid var(--signal); outline-offset: 5px; }

.ed-portal[data-gp-state="on"] [data-gp-front] { position: absolute; inset: 0; z-index: 6; opacity: var(--gp-caption, 1); pointer-events: none; }
.ed-portal[data-gp-state="on"] [data-gp-front] a { pointer-events: var(--gp-caption-hit, auto); }
.ed-portal[data-gp-state="on"] [data-gp-front]:focus-within { opacity: 1; }
.ed-portal[data-gp-state="on"] .ed-pt-inner { position: static; padding: 0; max-width: none; margin: 0; }
.ed-portal[data-gp-state="on"] .ed-bolt-hero { display: none; }
.ed-portal[data-gp-state="on"] .ed-pt-eyebrow { position: absolute; top: 5.5rem; left: max(1rem, calc((100% - 1200px) / 2 + 2.5rem)); margin: 0; }
.ed-portal[data-gp-state="on"] .ed-pt-h1 { margin: 0; line-height: 0; font-size: 0; }
.ed-portal[data-gp-state="on"] .ed-pt-pre, .ed-portal[data-gp-state="on"] .ed-pt-post {
  position: absolute; white-space: nowrap; color: var(--ink); font-family: 'Fraunces', Georgia, serif; font-weight: 900; font-style: italic;
  letter-spacing: -0.04em; line-height: .9; font-size: max(30px, calc(var(--gp-word-h, 240px) * .3));
}
.ed-portal[data-gp-state="on"] .ed-pt-pre { left: max(1rem, calc((100% - 1200px) / 2 + 2.5rem)); bottom: calc(100% - var(--gp-word-top, 30%) + .1em); }
.ed-portal[data-gp-state="on"] .ed-pt-post { right: max(1rem, calc((100% - 1200px) / 2 + 2.5rem)); top: calc(var(--gp-word-bottom, 66%) + .04em); }
.ed-portal[data-gp-state="on"] .ed-pt-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ed-portal[data-gp-state="on"] .ed-pt-lower { position: absolute; left: max(1rem, calc((100% - 1200px) / 2 + 2.5rem)); right: max(1rem, calc((100% - 1200px) / 2 + 2.5rem)); bottom: max(2.75rem, 6svh); display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.ed-portal[data-gp-state="on"] .ed-pt-lower > p { margin: 0; max-width: 26rem; }
.ed-portal[data-gp-state="on"] .ed-pt-hint { display: block; position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); color: var(--slate); }
@media (max-width: 767px) { .ed-portal[data-gp-state="on"] .ed-pt-lower > p { font-size: 15px; } }

.ed-portal[data-gp-state="on"] [data-gp-content] { position: relative; z-index: 5; box-sizing: border-box; min-height: var(--gp-height, 100svh); margin-top: calc((var(--gp-length, 2.2) - 1) * var(--gp-height, 100svh)); max-width: none; padding: 0 0 clamp(2rem, 6svh, 5rem); display: grid; align-content: end; opacity: var(--gp-reveal, 0); pointer-events: none; color: var(--bone); }
.ed-portal[data-gp-state="on"][data-gp-entered="true"] [data-gp-content] { pointer-events: auto; }
.ed-portal[data-gp-state="on"] .ed-pt-metrics { width: 100%; max-width: 1200px; margin: 0 auto; padding-inline: 1rem; border-top-color: #2a2a2a; }
@media (min-width: 768px) { .ed-portal[data-gp-state="on"] .ed-pt-metrics { padding-inline: 2.5rem; } }
.ed-portal[data-gp-state="on"] .ed-pt-metric { border-color: #2a2a2a; }
.ed-portal[data-gp-state="on"] .ed-pt-lab { color: var(--mist); }

.ed-pt-cta2 { display: none; }
.ed-portal[data-gp-state="on"] .ed-pt-cta2 { display: inline-flex; justify-self: start; margin: 0 0 clamp(1.5rem, 5svh, 3.5rem) max(1rem, calc((100% - 1200px) / 2 + 2.5rem)); }