:root{
  --bg-0:#0b0f1f;
  --bg-1:#05060b;

  --txt:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.70);
  --muted2:rgba(255,255,255,.55);
  --muted3:rgba(255,255,255,.38);

  --line:rgba(255,255,255,.12);
  --glass:rgba(255,255,255,.065);
  --glass2:rgba(255,255,255,.115);

  --shadow:0 18px 60px rgba(0,0,0,.45);
  --glow:0 0 0 1px rgba(255,255,255,.10),
         0 0 42px rgba(99,102,241,.25),
         0 0 110px rgba(34,211,238,.12);

  --radius:20px;

  --mx:50%;
  --my:22%;

  --px:0px;
  --py:0px;

  --gRx:0deg;
  --gRy:0deg;
  --gRz:0deg;

  --accentA:rgb(99 102 241);
  --accentB:rgb(34 211 238);
  --accentC:rgb(236 72 153);

  --navbg:rgba(0,0,0,.38);
}

html[data-theme="light"]{
  --bg-0:#f7f8ff;
  --bg-1:#ffffff;

  --txt:rgba(10,14,28,.94);
  --muted:rgba(10,14,28,.72);
  --muted2:rgba(10,14,28,.56);
  --muted3:rgba(10,14,28,.38);

  --line:rgba(10,14,28,.14);
  --glass:rgba(255,255,255,.62);
  --glass2:rgba(255,255,255,.82);

  --shadow:0 18px 60px rgba(15,18,30,.16);
  --glow:0 0 0 1px rgba(10,14,28,.12),
         0 0 44px rgba(99,102,241,.18),
         0 0 110px rgba(34,211,238,.10);

  --navbg:rgba(255,255,255,.62);
}

body{
  color:var(--txt);
  background:
    radial-gradient(1200px 700px at var(--mx) var(--my), rgba(99,102,241,.22), transparent 60%),
    radial-gradient(1000px 650px at 18% 84%, rgba(34,211,238,.17), transparent 60%),
    radial-gradient(900px 540px at 82% 14%, rgba(236,72,153,.12), transparent 55%),
    linear-gradient(180deg, var(--bg-0), var(--bg-1));
  background-attachment: fixed;
}

.t-strong{color:var(--txt);}
.t-muted{color:var(--muted);}
.t-muted2{color:var(--muted2);}

.btn{color: var(--txt);}

.nav{
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--line);
  background: var(--navbg);
  backdrop-filter: blur(18px);
}

.nav-pill{
  height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.02);
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
  transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease, color 150ms ease;
}
.nav-pill:hover{transform: translateY(-1px); box-shadow: var(--glow); color: var(--txt); background: rgba(255,255,255,.04);}

.nav-emoji{
  height: 36px;
  width: 44px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.02);
  color: var(--txt);
  font-size: 16px;
  line-height: 1;
  transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
}
.nav-emoji:hover{transform: translateY(-1px); box-shadow: var(--glow); background: rgba(255,255,255,.05);}

.brand-mark{
  display:inline-block;
  width:38px;
  height:38px;
  border-radius:14px;
  border: 1px solid var(--line);
  background:
    radial-gradient(12px 12px at 30% 30%, rgba(255,255,255,.26), transparent 60%),
    linear-gradient(135deg, rgba(99,102,241,.35), rgba(34,211,238,.18));
  box-shadow: var(--glow);
}

.nav-link{
  color: var(--muted2);
  transition: color 160ms ease;
}
.nav-link:hover{color: var(--txt);}

.kicker{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--muted2);
}

.grad{
  background: linear-gradient(90deg, rgba(99,102,241,1), rgba(34,211,238,1), rgba(236,72,153,1));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.bg-grid{
  position:absolute;
  inset:0;
  opacity:.12;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(circle at 50% 40%, rgba(0,0,0,.90), rgba(0,0,0,.25) 65%, transparent 88%);
}

html[data-theme="light"] .bg-grid{
  opacity:.10;
  background-image:
    linear-gradient(to right, rgba(10,14,28,.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10,14,28,.10) 1px, transparent 1px);
}

.bg-vignette{
  position:absolute;
  inset:-20vh;
  background: radial-gradient(closest-side, transparent 55%, rgba(0,0,0,.58) 120%);
  opacity:.26;
}
html[data-theme="light"] .bg-vignette{opacity:.20;}

.noise{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

#spotlight{
  pointer-events:none;
  background:
    radial-gradient(800px 520px at var(--mx) var(--my), rgba(255,255,255,.11), transparent 62%),
    radial-gradient(1000px 720px at calc(var(--mx) + 6%) calc(var(--my) + 8%), rgba(34,211,238,.12), transparent 70%);
  opacity: .95;
}
html[data-theme="light"] #spotlight{
  background:
    radial-gradient(800px 520px at var(--mx) var(--my), rgba(10,14,28,.08), transparent 62%),
    radial-gradient(1000px 720px at calc(var(--mx) + 6%) calc(var(--my) + 8%), rgba(34,211,238,.10), transparent 70%);
}

.orb{
  position:absolute;
  width: 900px;
  height: 900px;
  border-radius: 999px;
  filter: blur(22px);
  opacity: .48;
  transform: translate3d(0,0,0);
  animation: float 14s ease-in-out infinite;
}
.orb-a{left:-320px; top:-380px; background: radial-gradient(circle, rgba(99,102,241,.45), transparent 60%);}
.orb-b{right:-360px; top:-260px; background: radial-gradient(circle, rgba(34,211,238,.36), transparent 62%); animation-duration: 16s;}
.orb-c{left:20%; bottom:-480px; background: radial-gradient(circle, rgba(236,72,153,.30), transparent 64%); animation-duration: 18s;}

@keyframes float{
  0%,100%{transform: translate3d(0,0,0) scale(1);}
  50%{transform: translate3d(0,-18px,0) scale(1.03);}
}

/* Full-page </> glyph */
.bg-glyph{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  z-index: 1;
  opacity: .95;
  transform: translate3d(var(--px), var(--py), 0);
  will-change: transform;
  mix-blend-mode: screen;
  pointer-events: none;
}
.bg-glyph::before,
.bg-glyph::after{
  content: "</>";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-weight: 800;
  letter-spacing: -.06em;
  font-size: min(86vw, 1120px);
  line-height: 0.9;
  color: rgba(34,211,238,.10);
  transform:
    perspective(1200px)
    rotateX(calc(56deg + var(--gRx)))
    rotateY(var(--gRy))
    rotateZ(calc(-14deg + var(--gRz)))
    translate3d(0,0,-160px);
  filter: blur(18px);
  opacity: .64;
}
.bg-glyph::after{
  color: rgba(99,102,241,.08);
  transform:
    perspective(1200px)
    rotateX(calc(56deg + var(--gRx)))
    rotateY(var(--gRy))
    rotateZ(calc(-14deg + var(--gRz)))
    translate3d(0,0,-220px);
  filter: blur(38px);
  opacity: .70;
}
.bg-glyph span{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-weight: 800;
  letter-spacing: -.06em;
  font-size: min(82vw, 1080px);
  line-height: 0.9;
  color: transparent;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,0) 0px,
      rgba(255,255,255,0) 12px,
      rgba(255,255,255,.10) 13px,
      rgba(255,255,255,0) 16px
    ),
    radial-gradient(closest-side, rgba(34,211,238,.18), transparent 68%);
  background-size: 100% 240%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 1px rgba(255,255,255,.26);
  filter:
    drop-shadow(0 0 22px rgba(34,211,238,.22))
    drop-shadow(0 0 64px rgba(99,102,241,.18));
  transform:
    perspective(1200px)
    rotateX(calc(56deg + var(--gRx)))
    rotateY(var(--gRy))
    rotateZ(calc(-14deg + var(--gRz)))
    translate3d(0,0,-120px);
  opacity: .92;
  animation: glyphScan 18s linear infinite;
}
html[data-theme="light"] .bg-glyph span{
  background:
    repeating-linear-gradient(
      0deg,
      rgba(10,14,28,0) 0px,
      rgba(10,14,28,0) 12px,
      rgba(10,14,28,.08) 13px,
      rgba(10,14,28,0) 16px
    ),
    radial-gradient(closest-side, rgba(34,211,238,.12), transparent 68%);
  -webkit-text-stroke: 1px rgba(10,14,28,.18);
  opacity: .78;
}
@keyframes glyphScan{
  0%{background-position: 0 0;}
  100%{background-position: 0 -120%;}
}

/* glass */
.glass{
  background: linear-gradient(180deg, var(--glass2), var(--glass));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  position: relative;
}
.glass::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 30%),
    radial-gradient(400px 200px at 20% 0%, rgba(34,211,238,.12), transparent 60%);
  opacity: .55;
  mix-blend-mode: overlay;
}
.glass:hover{box-shadow: var(--shadow), var(--glow);}

/* tilt */
[data-tilt]{
  --rx: 0deg;
  --ry: 0deg;
  --hx: 50%;
  --hy: 30%;
  transform:
    perspective(1100px)
    rotateX(var(--rx))
    rotateY(var(--ry))
    translate3d(0, var(--reveal-y, 0px), 0);
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
[data-tilt].is-tilting{transition: none;}

/* reveal */
.reveal{opacity:0; transform: translateY(14px);}
.reveal.is-in{opacity:1; transform: translateY(0); transition: opacity 520ms ease, transform 520ms cubic-bezier(.2,.9,.2,1);}
[data-tilt].reveal{--reveal-y: 14px;}
[data-tilt].reveal.is-in{--reveal-y: 0px;}

/* CV */
.cv-hero{padding: 26px;}
@media (min-width: 768px){ .cv-hero{padding: 32px;} }

.cv-grid{display:grid; gap: 22px;}
@media (min-width: 900px){ .cv-grid{grid-template-columns: 1.25fr .75fr; align-items:start; gap: 26px;} }

.meta-chip{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
}
.meta-chip.link{color: var(--txt);}
.meta-chip.link:hover{box-shadow: var(--glow);}

.avatar{
  width: 58px;
  height: 58px;
  border-radius: 18px;
  object-fit: cover;
  border: 1px solid var(--line);
  box-shadow: 0 0 0 3px rgba(255,255,255,.04), 0 12px 40px rgba(0,0,0,.28);
}

.skill-cloud{display:flex; flex-wrap:wrap; gap: 10px;}
.skill-badge{
  display:inline-flex;
  align-items:center;
  border-radius: 999px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.02);
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
  transition: transform 150ms ease, box-shadow 150ms ease, color 150ms ease, background 150ms ease;
}
.skill-badge:hover{transform: translateY(-1px); box-shadow: var(--glow); color: var(--txt); background: rgba(255,255,255,.04);}

/* inputs */
.neo-input{
  height: 40px;
  width: min(360px, 72vw);
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,.22);
  color: var(--txt);
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}
.neo-input::placeholder{color: var(--muted3);}
.neo-input:focus{box-shadow: var(--glow);}
html[data-theme="light"] .neo-input{background: rgba(255,255,255,.55);}

/* filters */
.filter-btn{
  height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease, color 150ms ease;
}
.filter-btn:hover{transform: translateY(-1px); box-shadow: var(--glow); color: var(--txt);}
.filter-btn.active{
  background: linear-gradient(135deg, rgba(99,102,241,.28), rgba(34,211,238,.14));
  color: var(--txt);
  box-shadow: var(--shadow), var(--glow);
}

/* tags + stack */
.tag,.stack{
  display:inline-flex;
  align-items:center;
  border-radius: 999px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 650;
}
.tag{background: rgba(255,255,255,.04); color: var(--muted);}
.stack{background: rgba(255,255,255,.02); color: var(--muted2);}

.year{
  font-size: 12px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
  color: var(--muted2);
}

.corner-icon{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
  transform: translateZ(30px);
}

.arrow{opacity:.8; transition: transform 150ms ease;}
.glass:hover .arrow{transform: translate(2px,-2px);}

.card-shine{
  position:absolute;
  inset:-30%;
  background: radial-gradient(circle at var(--hx) var(--hy), rgba(255,255,255,.16), transparent 55%);
  filter: blur(14px);
  opacity: .78;
  transform: translateZ(10px);
  pointer-events:none;
}

.scroll-hint{
  width: 28px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.02);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-top: 10px;
  box-shadow: var(--shadow);
}
.scroll-hint span{
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accentB), var(--accentA));
  animation: scrollDot 1.5s ease-in-out infinite;
}
@keyframes scrollDot{
  0%,100%{transform: translateY(0); opacity: .55;}
  50%{transform: translateY(14px); opacity: 1;}
}

/* Projects layout */
#projectsGrid{grid-auto-flow: dense;}
.project-card{position:relative; cursor:pointer; border-radius: var(--radius);}
@media (min-width: 768px){
  .project-card.is-expanded{grid-column: span 2;}
}
.project-surface{
  position: relative;
  overflow: hidden;
  padding: 20px;
  transition: box-shadow 180ms ease, border-color 180ms ease;
}
@media (min-width: 768px){ .project-surface{padding: 22px;} }

.project-top{display:flex; align-items:flex-start; justify-content:space-between; gap:16px;}

.project-layout{
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 768px){
  .project-card.is-expanded .project-layout{
    grid-template-columns: minmax(340px, .9fr) minmax(0, 1.1fr);
  }
}
.project-preview{min-width: 0;}
.project-detail{
  min-width: 0;
  border-top: 1px solid var(--line);
  padding-top: 16px;

  opacity: 0;
  transform: translateY(-6px);
  max-height: 0;
  overflow: hidden;

  transition:
    opacity 220ms ease,
    transform 220ms ease,
    max-height 520ms cubic-bezier(.2,.9,.2,1);
}
@media (min-width: 768px){
  .project-detail{
    border-top: none;
    padding-top: 0;
    border-left: 1px solid var(--line);
    padding-left: 18px;

    max-width: 0;
    max-height: none;
    opacity: 0;
    transform: translateX(-10px);
    overflow: hidden;

    transition:
      max-width 260ms cubic-bezier(.2,.9,.2,1),
      opacity 220ms ease,
      transform 220ms ease;
  }
}
.project-card.is-expanded .project-detail{
  opacity: 1;
  transform: translateX(0);
}
@media (min-width: 768px){
  .project-card.is-expanded .project-detail{max-width: 1200px;}
}
.project-card.is-expanded .project-detail[data-ready="1"]{
  max-height: 1200px;
  transform: translateY(0);
}
.project-detail-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.expand-close{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  color: var(--txt);
  display:grid;
  place-items:center;
  transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
}
.expand-close:hover{transform: translateY(-1px); box-shadow: var(--glow); background: rgba(255,255,255,.06);}
.detail-subtle{font-size: 12px; color: var(--muted2); font-weight: 700; letter-spacing: .10em; text-transform: uppercase;}

/* gallery */
.neo-gallery{display:grid; gap: 10px;}
.neo-gallery-main{
  border-radius: 18px;
  border: 1px solid var(--line);
  overflow:hidden;
  background: rgba(0,0,0,.16);
  position: relative;
  aspect-ratio: 16 / 10;
}
html[data-theme="light"] .neo-gallery-main{background: rgba(255,255,255,.45);}
.neo-gallery-main img{width:100%; height:100%; object-fit: cover; display:block;}
.neo-gallery-cap{
  position:absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,.35);
  color: var(--txt);
  font-size: 12px;
  backdrop-filter: blur(10px);
}
html[data-theme="light"] .neo-gallery-cap{background: rgba(255,255,255,.62);}
.neo-gallery-thumbs{
  display:flex;
  gap: 10px;
  overflow:auto;
  padding-bottom: 2px;
}
.neo-thumb{
  width: 72px;
  height: 52px;
  border-radius: 14px;
  border: 1px solid var(--line);
  overflow:hidden;
  background: rgba(255,255,255,.02);
  flex: 0 0 auto;
  transition: transform 150ms ease, box-shadow 150ms ease, opacity 150ms ease;
  opacity: .78;
}
.neo-thumb:hover{transform: translateY(-1px); box-shadow: var(--glow); opacity: 1;}
.neo-thumb.active{opacity: 1; box-shadow: var(--shadow), var(--glow);}
.neo-thumb img{width:100%; height:100%; object-fit:cover; display:block;}

/* --- DOMAINS (INLINE RIGHT OPEN) --- */
#domainsGrid{grid-auto-flow: dense;}

.domain-card{position:relative; cursor:pointer; border-radius: var(--radius);}

/* Expanded domain spans full row on desktop grid (3 cols) */
@media (min-width: 768px){
  .domain-card.is-expanded{grid-column: span 3;}
}

.domain-surface{
  position: relative;
  overflow: hidden;
  padding: 20px;
}
@media (min-width: 768px){ .domain-surface{padding: 22px;} }

.domain-layout{
  display:grid;
  gap: 16px;
  grid-template-columns: 1fr;
  align-items:start;
}
@media (min-width: 768px){
  .domain-card.is-expanded .domain-layout{
    grid-template-columns: minmax(360px, .9fr) minmax(0, 1.1fr);
  }
}

.domain-preview{min-width:0;}

.domain-detail{
  min-width: 0;
  border-top: 1px solid var(--line);
  padding-top: 16px;

  opacity: 0;
  transform: translateY(-6px);
  max-height: 0;
  overflow: hidden;

  transition:
    opacity 220ms ease,
    transform 220ms ease,
    max-height 520ms cubic-bezier(.2,.9,.2,1);
}
@media (min-width: 768px){
  .domain-detail{
    border-top: none;
    padding-top: 0;
    border-left: 1px solid var(--line);
    padding-left: 18px;

    max-width: 0;
    max-height: none;
    opacity: 0;
    transform: translateX(-10px);
    overflow: hidden;

    transition:
      max-width 260ms cubic-bezier(.2,.9,.2,1),
      opacity 220ms ease,
      transform 220ms ease;
  }
}
.domain-card.is-expanded .domain-detail{
  opacity: 1;
  transform: translateX(0);
}
@media (min-width: 768px){
  .domain-card.is-expanded .domain-detail{max-width: 1400px;}
}
.domain-card.is-expanded .domain-detail[data-ready="1"]{
  max-height: 1400px;
  transform: translateY(0);
}

.domain-head{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 10px;
}

.domain-title{line-height: 1.15;}
.domain-summary{line-height: 1.45;}

.domain-status{
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
  white-space: nowrap;

  /* net okunurluk */
  color: var(--txt);
  background: rgba(255,255,255,.06);

  /* layout güvenliği */
  flex: 0 0 auto;
  align-self: flex-start;
  line-height: 1.1;
}

.domain-status.is-live{
  background: linear-gradient(135deg, rgba(34,211,238,.22), rgba(34,211,238,.08));
  box-shadow: 0 10px 30px rgba(34,211,238,.10);
}

.domain-status.is-progress{
  background: linear-gradient(135deg, rgba(99,102,241,.24), rgba(236,72,153,.08));
  box-shadow: 0 10px 30px rgba(99,102,241,.10);
}

/* ripple */
.ripple{position: relative; overflow: hidden;}
._r{
  position:absolute;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.35);
  transform: translate(-50%,-50%) scale(1);
  animation: ripple 560ms ease-out forwards;
  pointer-events:none;
  mix-blend-mode: overlay;
}
html[data-theme="light"] ._r{background: rgba(10,14,28,.18);}
@keyframes ripple{
  0%{opacity: .55; transform: translate(-50%,-50%) scale(.2);}
  100%{opacity: 0; transform: translate(-50%,-50%) scale(18);}
}

/* toast */
.toast{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,.52);
  color: var(--txt);
  font-size: 13px;
  font-weight: 650;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
  z-index: 100;
}
html[data-theme="light"] .toast{background: rgba(255,255,255,.72); color: var(--txt);}
.toast.show{opacity: 1; transform: translateX(-50%) translateY(-4px);}

/* motion reduce */
@media (prefers-reduced-motion: reduce){
  .orb{animation:none;}
  .bg-glyph span{animation:none;}
  [data-tilt]{transition:none; transform:none !important;}
}

/* =========================
   AGGRESSIVE TILT + HOTSPOT
   ========================= */

.tilt-surface{
  position: relative;
  transform-style: preserve-3d;
  will-change: transform;
  --hx: 50%;
  --hy: 35%;
}

/* Hover sırasında imleci takip eden glow hotspot */
.tilt-surface::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  opacity: 0;
  transition: opacity 140ms ease;
  mix-blend-mode: screen;
  background:
    radial-gradient(480px 320px at var(--hx) var(--hy), rgba(34,211,238,.22), transparent 62%),
    radial-gradient(620px 380px at var(--hx) var(--hy), rgba(99,102,241,.16), transparent 70%),
    radial-gradient(740px 420px at var(--hx) var(--hy), rgba(236,72,153,.10), transparent 74%);
}

html[data-theme="light"] .tilt-surface::after{
  mix-blend-mode: multiply;
  background:
    radial-gradient(520px 340px at var(--hx) var(--hy), rgba(34,211,238,.14), transparent 64%),
    radial-gradient(660px 400px at var(--hx) var(--hy), rgba(99,102,241,.10), transparent 72%);
}

.tilt-surface.is-tilting::after{ opacity: 1; }

/* Tilt transition daha hızlı (agresif his) */
[data-tilt]{
  transition: transform 120ms ease, box-shadow 140ms ease;
}

/* Hover'da hafif scale */
.tilt-surface.is-tilting{
  box-shadow: var(--shadow), var(--glow);
}