/* ─────────────────────────────────────────────────────────────
   Psikolog Bilal Egemen Türk — tek sayfa site.
   Sakin kırık beyaz zemin, editoryal serif başlık, ince çizgiler,
   ölçülü yumuşak mavi. Yalnızca inline yazılamayanlar burada.
   ───────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&family=Manrope:wght@400;500;600;700&display=swap');

:root {
  --paper: #fbfaf7;
  --band: #eef2f5;
  --band-2: #f2eee6;
  --ink: #1f2a33;
  --ink-80: color-mix(in srgb, var(--ink) 80%, transparent);
  --ink-62: color-mix(in srgb, var(--ink) 62%, transparent);
  --ink-42: color-mix(in srgb, var(--ink) 42%, transparent);
  --blue: #6d9fc7;
  --blue-deep: #3a6d99;
  --blue-pale: #dde8f0;
  --deep: #1b2a35;
  --rule: color-mix(in srgb, var(--ink) 11%, transparent);
  --rule-soft: color-mix(in srgb, var(--ink) 6%, transparent);

  /* BDT döngüsü renkleri: düşünce · duygu · davranış */
  --n1: #3a6d99;
  --n2: #c07f4a;
  --n3: #3f8b7d;
  /* kadran üzerindeki açık tonlar */
  --s1: #9cc6ea;
  --s2: #e6b27f;
  --s3: #8fc9bb;

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Manrope", system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-padding-top: calc(var(--navh, 88px) + 14px);
  scroll-behavior: smooth;
  overflow-x: hidden;
  max-width: 100%;
}
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: 16.5px; font-weight: 400; line-height: 1.7;
  -webkit-font-smoothing: antialiased; text-wrap: pretty;
  overflow-x: hidden;
  max-width: 100%;
  position: relative;
}
h1, h2, h3 { font-family: var(--serif); font-weight: 500; letter-spacing: -.012em; line-height: 1.14; margin: 0; text-wrap: balance; }
h1 { font-weight: 500; }
h4 { font-family: var(--sans); font-weight: 700; letter-spacing: -.01em; margin: 0; }
p { margin: 0 0 1.1em; }
img { display: block; max-width: 100%; height: auto; }
svg { max-width: 100%; }
a { color: var(--blue-deep); text-underline-offset: 3px; }
a:hover { color: var(--ink); }
:focus { outline: none; }
:focus-visible { outline: 1.5px solid var(--blue-deep); outline-offset: 3px; }
::selection { background: var(--blue-pale); }

.eyebrow {
  font-family: var(--sans); font-size: 11.5px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink-42);
}
.lead { font-size: 19px; line-height: 1.75; color: var(--ink-80); }
.quote { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; }
.num { font-family: var(--serif); font-variant-numeric: tabular-nums; color: var(--blue-deep); }
.rule { height: 1px; background: var(--rule); border: 0; margin: 0; }

/* ── buttons: ölçülü, düz ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; text-decoration: none;
  font-family: var(--sans); font-weight: 600; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase;
  min-height: 54px; padding: 0 30px; border: 1px solid transparent; border-radius: 100px;
  background: transparent; color: var(--ink); box-sizing: border-box; max-width: 100%; text-align: center;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.btn-primary { background: var(--deep); color: #fff; }
.btn-primary:hover { background: var(--blue-deep); color: #fff; }
.btn-secondary { border-color: var(--rule); }
.btn-secondary:hover { border-color: var(--ink); }
.btn-light { background: #fff; color: var(--deep); }
.btn-light:hover { background: var(--blue-pale); }
.btn-outline-light { border-color: color-mix(in srgb, #fff 42%, transparent); color: #fff; }
.btn-outline-light:hover { background: color-mix(in srgb, #fff 12%, transparent); }
.btn-text {
  min-height: 0; padding: 0; border: 0; border-bottom: 1px solid var(--rule);
  border-radius: 0; color: var(--blue-deep); font-size: 12px; letter-spacing: .14em;
}
.btn-text:hover { border-bottom-color: var(--ink); color: var(--ink); }

/* ── fotoğraf çerçevesi ── */
.frame { overflow: hidden; background: var(--band); border-radius: 18px; }
.frame img { width: 100%; height: 100%; object-fit: cover; }

/* sertifika kartları: belge tam görünür, kırpılmaz */
.doc { display: block; background: #fff; border: 1px solid var(--rule-soft); border-radius: 14px;
  aspect-ratio: 1 / 1; padding: 14px; overflow: hidden;
  transition: border-color .45s var(--ease), box-shadow .45s var(--ease), transform .45s var(--ease); }
.doc img { width: 100%; height: 100%; object-fit: contain; object-position: center;
  transition: transform .6s var(--ease); }
.doc:hover { border-color: color-mix(in srgb, var(--blue-deep) 40%, transparent);
  box-shadow: 0 18px 34px -22px color-mix(in srgb, var(--deep) 45%, transparent); transform: translateY(-2px); }
.doc:hover img { transform: scale(1.03); }

/* kenarları sayfaya karışan fotoğraf */
.feather {
  /* Yumuşama kutunun kenarına değmeden tamamlanır. */
  -webkit-mask-image: radial-gradient(48% 48% at 50% 44%, #000 0%, rgba(0,0,0,.97) 40%,
    rgba(0,0,0,.8) 62%, rgba(0,0,0,.48) 78%, rgba(0,0,0,.16) 90%, transparent 100%);
  mask-image: radial-gradient(48% 48% at 50% 44%, #000 0%, rgba(0,0,0,.97) 40%,
    rgba(0,0,0,.8) 62%, rgba(0,0,0,.48) 78%, rgba(0,0,0,.16) 90%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.feather-soft {
  /* Yumuşama, kutunun kenarına DEĞMEDEN tamamlanmalı: bu yüzden yarıçap
     kutunun yarısından küçük (46%) — aksi halde geçiş kenarda kesiliyordu. */
  -webkit-mask-image: radial-gradient(46% 46% at 50% 47%, #000 0%, rgba(0,0,0,.96) 34%,
    rgba(0,0,0,.72) 56%, rgba(0,0,0,.4) 74%, rgba(0,0,0,.14) 88%, transparent 100%);
  mask-image: radial-gradient(46% 46% at 50% 47%, #000 0%, rgba(0,0,0,.96) 34%,
    rgba(0,0,0,.72) 56%, rgba(0,0,0,.4) 74%, rgba(0,0,0,.14) 88%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.feather-soft img { mix-blend-mode: multiply; filter: saturate(.86) contrast(.94); }

/* ── form ── */
.field label { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-42); margin-bottom: 9px; }
.input {
  width: 100%; min-height: 50px; padding: 13px 15px; font: inherit; font-size: 15.5px;
  color: var(--ink); background: #fff; border: 1px solid var(--rule); border-radius: 12px;
  transition: border-color .3s var(--ease);
}
.input::placeholder { color: color-mix(in srgb, var(--ink) 30%, transparent); }
.input:hover { border-color: color-mix(in srgb, var(--ink) 30%, transparent); }
.input:focus-visible { border-color: var(--blue-deep); outline: none; }
textarea.input { min-height: 120px; resize: vertical; border-radius: 16px; }
.radio { display: flex; align-items: center; gap: 11px; cursor: pointer; font-size: 15px; padding: 14px 16px; background: #fff; border: 1px solid var(--rule); border-radius: 100px; transition: border-color .3s var(--ease); position: relative; user-select: none; }
.radio:hover { border-color: color-mix(in srgb, var(--ink) 30%, transparent); }
.radio input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: -1px; pointer-events: none; }
.radio .dot { width: 14px; height: 14px; flex: none; border-radius: 50%; border: 1px solid var(--ink-42); transition: box-shadow .2s, background .2s, border-color .2s; }
.radio[data-checked="true"] .dot,
.radio input:checked + .dot { border-color: var(--blue-deep); background: var(--blue-deep); box-shadow: inset 0 0 0 3px #fff; }
.radio[data-checked="true"],
.radio:has(input:checked) { border-color: var(--blue-deep); }
.radio input:focus-visible + .dot { outline: 1.5px solid var(--blue-deep); outline-offset: 3px; }

/* ── açılır bölümler ── */
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
.u-plus { flex: none; position: relative; width: 13px; height: 13px; }
.u-plus::before, .u-plus::after {
  content: ''; position: absolute; background: var(--blue-deep);
  transition: transform .4s var(--ease), opacity .4s var(--ease);
}
.u-plus::before { left: 0; right: 0; top: 6px; height: 1px; }
.u-plus::after { top: 0; bottom: 0; left: 6px; width: 1px; }
details[open] .u-plus::after { transform: scaleY(0); opacity: 0; }
details summary:hover .u-plus::before, details summary:hover .u-plus::after { background: var(--ink); }

/* sabit başlığın altında kalan boşluk */
main { padding-top: var(--navh, 88px); }

/* ── navigasyon: kaydırınca küçülen başlık + kayan seçim şeridi ── */
.nav-shell { transition: padding .5s var(--ease); }
.nav-brand { transition: font-size .5s var(--ease); }
.nav-brandlink { transition: gap .5s var(--ease); }
.nav-sub { overflow: visible; transition: opacity .4s var(--ease); opacity: 1; }
.nav-links { transition: padding .5s var(--ease); }
header[data-scrolled='true'] .nav-shell { padding-top: 12px !important; }
header[data-scrolled='true'] .nav-brand, header[data-scrolled='true'] .nav-sub { font-size: 18px !important; }
/* kaydırınca: alt etiket ismin soluna geçer, tek satır olur */
header[data-scrolled='true'] .nav-brandlink { flex-direction: row !important; align-items: baseline !important; gap: 9px; }
header[data-scrolled='true'] .nav-sub { order: -1; opacity: 1; }
header[data-scrolled='true'] .nav-links { padding-bottom: 12px !important; }
.nav-ind { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--ink);
  width: 0; opacity: 0; transform: translateX(0);
  transition: transform .55s var(--ease), width .55s var(--ease), opacity .4s var(--ease); }

/* ── navigasyon ── */
.u-navlink { position: relative; }
.u-navlink::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px;
  background: var(--ink); transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease);
}
.u-navlink:hover::after { transform: scaleX(1); }
.u-navlink[data-active='true']::after { display: none; }
[data-scrolled='true'] { border-bottom-color: var(--rule) !important; }

/* görsel çerçevelerinde yumuşak giriş ve hafif büyüme */
.frame img, .frame image-slot { transition: transform 1.4s var(--ease); }
figure:hover > .frame img { transform: scale(1.025); }

/* açık akordeonun içeriği yumuşak açılsın */
details[open] > *:not(summary) { animation: dOpen .5s var(--ease) both; }
@keyframes dOpen { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* sabit WhatsApp düğmesi */
.wa { position: fixed; right: 24px; bottom: 88px; z-index: 80; display: flex; align-items: center; gap: 10px;
  text-decoration: none; transition: transform .45s var(--ease); }
.wa img { width: 54px; height: 54px; border-radius: 16px; display: block;
  box-shadow: 0 16px 32px -14px rgba(11,42,23,.5); transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.wa:hover { transform: translateY(-2px); }
.wa:hover img { transform: scale(1.04); box-shadow: 0 20px 38px -14px rgba(11,42,23,.6); }
.wa .label { max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0;
  font-family: var(--sans); font-size: 12.5px; font-weight: 600; letter-spacing: .06em; color: var(--ink);
  background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(10px);
  border: 1px solid var(--rule-soft); border-radius: 100px; padding: 0; line-height: 34px;
  transition: max-width .5s var(--ease), opacity .4s var(--ease), padding .5s var(--ease); }
.wa:hover .label { max-width: 220px; opacity: 1; padding: 0 16px; }

footer a { word-break: break-all; overflow-wrap: anywhere; }
footer a[href^="mailto:"] { display: block; word-break: break-all; overflow-wrap: anywhere; font-size: 13.5px; }

@media (max-width: 1060px) {
  .u-desk { display: none !important; }
  .u-mob { display: flex !important; }
  header .u-mob { display: flex !important; }
  .wa { display: none !important; }
}
@media (min-width: 1061px) {
  .u-mob { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE DESIGN SYSTEM
   Modern, fluid, editorial layout that stacks cleanly on smaller screens.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Tablet & Medium Screens (max-width: 940px) ── */
@media (max-width: 940px) {
  /* Box & container reset for overflow prevention */
  .u-split > *, .u-cols > *, .row-h > * { min-width: 0; }
  .u-split p, .u-cols p, main h1, main h2, main h3, blockquote.quote {
    max-width: 100% !important;
    overflow-wrap: break-word;
    word-break: normal;
  }

  /* Padding & Spacing */
  .u-pad { padding-left: 24px !important; padding-right: 24px !important; }
  .u-sec { padding-top: 56px !important; padding-bottom: 56px !important; }
  .u-gap { gap: 36px !important; }
  .u-mobpad { padding-bottom: 96px !important; }

  /* Typography scale */
  main { font-size: 15px; }
  main p, main li { font-size: 15px !important; line-height: 1.75 !important; }
  main .lead { font-size: 16.5px !important; line-height: 1.75 !important; }
  h1 { font-size: clamp(34px, 6vw, 56px) !important; }
  h2 { font-size: clamp(26px, 4.5vw, 38px) !important; }
  main h3 { font-size: 18px !important; }
  .eyebrow { font-size: 10px !important; letter-spacing: .18em !important; }
  .num { font-size: 18px !important; }
  blockquote.quote { font-size: 22px !important; line-height: 1.4 !important; }
  .btn { min-height: 48px; font-size: 11.5px; letter-spacing: .12em; padding: 0 22px; }

  /* Layout grids: stack all 2-column and split sections */
  .u-split { grid-template-columns: 1fr !important; gap: 36px !important; }
  .u-sticky { position: static !important; top: auto !important; margin-bottom: 8px; }

  /* Hero section */
  .u-hero-split { grid-template-columns: 1fr !important; gap: 40px !important; }
  .u-hero-img { max-width: 460px; margin: 0 auto; width: 100%; }

  /* Quote section */
  .u-quote { padding: 40px 24px !important; gap: 16px !important; }
  .u-quote-img { min-height: 240px !important; max-height: 360px; }

  /* Hakkımda 3'lü kartlar */
  .u-cols[style*="repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  .u-cols[style*="repeat(3,1fr)"] > div {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
  }

  /* Çalışma Alanları 4-grid -> 2 columns */
  .tiles-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }

  /* Çalışma alanları 2-kolon metin listesi -> 1 column */
  #alanlar .u-cols {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  #alanlar .u-cols > div {
    padding: 18px 0 !important;
  }

  /* Eğitim & Sertifikalar - ilkeler grid -> 1 column */
  #egitim .u-cols {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* Hizmetler (01-07) & Süreç (01-04) row'ları */
  .row-h[style*="64px"],
  .row-h[style*="80px"] {
    display: grid !important;
    grid-template-columns: 36px 1fr !important;
    gap: 8px 14px !important;
    padding: 20px 0 !important;
    align-items: baseline;
  }
  .row-h[style*="64px"] > span.num,
  .row-h[style*="80px"] > span.num {
    grid-row: 1;
    grid-column: 1;
    font-size: 20px !important;
  }
  .row-h[style*="64px"] > div,
  .row-h[style*="80px"] > h3 {
    grid-row: 1;
    grid-column: 2;
  }
  .row-h[style*="64px"] > div h3,
  .row-h[style*="80px"] > h3 {
    font-size: 19px !important;
  }
  .row-h[style*="64px"] > p,
  .row-h[style*="80px"] > p {
    grid-row: 2;
    grid-column: 1 / -1;
    font-size: 14.5px !important;
    line-height: 1.7 !important;
    margin-top: 4px !important;
  }

  /* Yazılar (Blog önizleme) satırları */
  .row-h[style*="1.05fr 1.15fr"] {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 8px 12px !important;
    padding: 20px 0 !important;
  }
  .row-h[style*="1.05fr 1.15fr"] > h3 {
    grid-column: 1;
    grid-row: 1;
    font-size: 18px !important;
  }
  .row-h[style*="1.05fr 1.15fr"] > span.u-arrow {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
  }
  .row-h[style*="1.05fr 1.15fr"] > p {
    grid-column: 1 / -1;
    grid-row: 2;
    font-size: 14px !important;
  }

  /* Section header wraps (Hizmetler, Yazılar) */
  .u-wrap[style*="justify-content:space-between"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }

  /* BDT paneli */
  .u-panel {
    padding: 28px 20px !important;
    border-radius: 20px !important;
  }
  .bdt { max-width: 100%; }

  /* Sertifika kartları */
  .docs-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px 16px !important;
  }
  .doc { padding: 10px; border-radius: 12px; }

  /* İletişim ve Form */
  #iletisim { border-radius: 26px 26px 0 0 !important; }
  .u-form {
    padding: 26px 22px !important;
    border-radius: 18px !important;
  }

  /* Footer */
  footer a {
    word-break: break-all;
    overflow-wrap: anywhere;
  }
  footer .u-split {
    grid-template-columns: 1fr 1fr !important;
    gap: 36px !important;
  }
  footer .u-split > *:first-child {
    grid-column: 1 / -1;
  }
  footer .u-wrap {
    flex-direction: column !important;
    gap: 12px !important;
    align-items: flex-start !important;
  }
}

/* ── 2. Small Mobile Devices (max-width: 660px) ── */
@media (max-width: 660px) {
  html { scroll-padding-top: calc(var(--navh, 72px) + 10px); }

  /* Spacing */
  .u-pad { padding-left: 16px !important; padding-right: 16px !important; }
  .u-sec { padding-top: 42px !important; padding-bottom: 42px !important; }
  .u-gap { gap: 28px !important; }

  /* Typography */
  main { font-size: 14px; }
  main p, main li { font-size: 14px !important; line-height: 1.7 !important; }
  main .lead { font-size: 15px !important; line-height: 1.7 !important; }
  h1 { font-size: clamp(30px, 7.5vw, 44px) !important; line-height: 1.18 !important; }
  h2 { font-size: clamp(23px, 5.8vw, 32px) !important; line-height: 1.22 !important; }
  main h3 { font-size: 16.5px !important; }
  .eyebrow { font-size: 9px !important; letter-spacing: .15em !important; }
  .num { font-size: 16px !important; }
  blockquote.quote { font-size: 19px !important; line-height: 1.38 !important; }
  .btn { min-height: 46px; font-size: 11px; padding: 0 18px; }

  /* Quote image */
  .u-quote { padding: 28px 16px !important; }
  .u-quote-img { min-height: 180px !important; }

  /* Form */
  .u-form { padding: 20px 15px !important; border-radius: 16px !important; }
  .input { min-height: 46px; padding: 11px 13px; font-size: 14px; }
  textarea.input { min-height: 100px; }
  .field label { font-size: 10px; margin-bottom: 6px; }

  /* Radio buttons on mobile */
  fieldset .u-cols {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .radio {
    font-size: 13.5px !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
  }

  /* Alanlar tiles */
  .tiles-grid { gap: 10px !important; }
  .tiles-grid figcaption { font-size: 9.5px !important; }

  /* Sertifikalar */
  .docs-grid { gap: 14px 10px !important; }
  .docs-grid figcaption span:first-child { font-size: 13px !important; }
  .docs-grid figcaption span:last-child { font-size: 11px !important; }

  /* Footer & Contact Grid 1 column on small screens */
  .contact-meta-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .contact-meta-grid a[href^="mailto:"] {
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
    display: block !important;
  }
  footer .u-split {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* SSS accordions */
  details summary {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
    font-size: 17px !important;
  }
  details p {
    font-size: 14px !important;
    padding-bottom: 18px !important;
  }
}

/* ── 3. Extra Small Mobile Devices (max-width: 400px) ── */
@media (max-width: 400px) {
  .u-pad { padding-left: 14px !important; padding-right: 14px !important; }
  .btn { width: 100%; justify-content: center; }
  .u-wrap { gap: 10px !important; }
  h1 { font-size: 28px !important; }
  h2 { font-size: 22px !important; }
  .docs-grid { grid-template-columns: 1fr !important; }
}

/* bant geçişleri: sert kenar yerine yumuşak geçiş */
.band { background: linear-gradient(180deg, var(--paper) 0%, var(--band) 9%, var(--band) 91%, var(--paper) 100%); }
.band-warm { background: linear-gradient(180deg, var(--paper) 0%, var(--band-2) 9%, var(--band-2) 91%, var(--paper) 100%); }

@media print { .u-noprint { display: none !important; } }

/* ═════════════════════════════════════════════════════════════
   BDT döngüsü — sade, yavaş animasyon
   ═════════════════════════════════════════════════════════════ */
/* ═══════ BDT döngüsü — ölçü aleti gibi sakin bir kadran ═══════ */
.bdt { width: 100%; margin: 0 auto; }
.bdt svg { width: 100%; height: auto; overflow: visible; display: block; }

.bdt .ring { fill: none; stroke: color-mix(in srgb, #fff 12%, transparent); stroke-width: 1; }
.bdt .ring-in { stroke: color-mix(in srgb, #fff 6%, transparent); }
.bdt .grid { stroke: color-mix(in srgb, #fff 7%, transparent); stroke-width: 1; }

.bdt .sweep { transform-origin: 200px 200px; animation: sweepSpin 15s linear infinite; }
.bdt .sweep path { fill: none; stroke: url(#bdtSweep); stroke-width: 2; stroke-linecap: round; }

.bdt .tick { stroke: color-mix(in srgb, #fff 26%, transparent); stroke-width: 1; }

.bdt .dot { transform-box: fill-box; transform-origin: center; }
.bdt .glow { fill: none; stroke-width: 1; opacity: 0; transform-box: fill-box; transform-origin: center; }
.bdt .n1 .dot { fill: var(--s1); animation: dotWake 15s ease-out infinite; }
.bdt .n1 .glow { stroke: var(--s1); animation: glowWake 15s ease-out infinite; }
.bdt .n2 .dot { fill: var(--s2); animation: dotWake 15s ease-out 5s infinite; }
.bdt .n2 .glow { stroke: var(--s2); animation: glowWake 15s ease-out 5s infinite; }
.bdt .n3 .dot { fill: var(--s3); animation: dotWake 15s ease-out 10s infinite; }
.bdt .n3 .glow { stroke: var(--s3); animation: glowWake 15s ease-out 10s infinite; }

.bdt .step { font-family: var(--sans); font-size: 9.5px; font-weight: 600; letter-spacing: .26em;
  fill: color-mix(in srgb, #fff 46%, transparent); }
.bdt .name { font-family: var(--serif); font-size: 20px; fill: #fff; }
.bdt .sub { font-family: var(--sans); font-size: 11px; letter-spacing: .04em;
  fill: color-mix(in srgb, #fff 42%, transparent); }
.bdt .center { font-family: var(--sans); font-size: 9.5px; font-weight: 600; letter-spacing: .3em;
  fill: color-mix(in srgb, #fff 30%, transparent); }

@keyframes sweepSpin { to { transform: rotate(360deg); } }
@keyframes dotWake { 0% { transform: scale(2.1); } 6% { transform: scale(1); } 100% { transform: scale(1); } }
@keyframes glowWake { 0% { transform: scale(1); opacity: .8; } 14% { transform: scale(3.4); opacity: 0; } 100% { transform: scale(3.4); opacity: 0; } }

/* dikkat ritmi */
.att { display: flex; align-items: flex-end; gap: 6px; height: 84px; }
.att i { display: block; flex: 1; min-width: 4px; border-radius: 2px; background: var(--blue); opacity: .55; transform-origin: bottom; animation: attBeat 4.2s var(--ease) infinite; }
.att i:nth-child(3n) { background: var(--blue-deep); opacity: .8; }
.att i:nth-child(1) { height: 34%; animation-delay: 0s } .att i:nth-child(2) { height: 62%; animation-delay: .13s }
.att i:nth-child(3) { height: 44%; animation-delay: .26s } .att i:nth-child(4) { height: 86%; animation-delay: .39s }
.att i:nth-child(5) { height: 52%; animation-delay: .52s } .att i:nth-child(6) { height: 70%; animation-delay: .65s }
.att i:nth-child(7) { height: 38%; animation-delay: .78s } .att i:nth-child(8) { height: 96%; animation-delay: .91s }
.att i:nth-child(9) { height: 48%; animation-delay: 1.04s } .att i:nth-child(10) { height: 66%; animation-delay: 1.17s }
.att i:nth-child(11) { height: 30%; animation-delay: 1.3s } .att i:nth-child(12) { height: 78%; animation-delay: 1.43s }
@keyframes attBeat {
  0%, 100% { transform: scaleY(.58); opacity: .45; }
  50% { transform: scaleY(1); opacity: .95; }
}

/* duygunun yükselip yatışması */
.calm { display: flex; align-items: center; gap: 5px; height: 78px; }
.calm i { display: block; flex: 1; min-width: 4px; height: 100%; border-radius: 2px; background: linear-gradient(180deg, var(--blue), color-mix(in srgb, var(--blue) 35%, transparent)); opacity: .55; transform-origin: center; animation: calmDown 8.4s var(--ease) infinite; }
.calm i:nth-child(1) { animation-delay: 0s } .calm i:nth-child(2) { animation-delay: .15s }
.calm i:nth-child(3) { animation-delay: .3s } .calm i:nth-child(4) { animation-delay: .45s }
.calm i:nth-child(5) { animation-delay: .6s } .calm i:nth-child(6) { animation-delay: .75s }
.calm i:nth-child(7) { animation-delay: .9s } .calm i:nth-child(8) { animation-delay: 1.05s }
.calm i:nth-child(9) { animation-delay: 1.2s } .calm i:nth-child(10) { animation-delay: 1.35s }
@keyframes calmDown {
  0% { transform: scaleY(.2); } 22% { transform: scaleY(1); }
  70% { transform: scaleY(.32); } 100% { transform: scaleY(.2); }
}

@media (prefers-reduced-motion: reduce) {
  .bdt .sweep, .bdt .dot, .bdt .glow, .att i, .calm i { animation: none !important; }
}