/* Tekrar kullanılan bileşenler: buton, küre, segment, kart, anahtar, çip */

/* ---------- Butonlar ---------- */
.btn {
  --btn-h: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: var(--btn-h);
  padding: 0 26px;
  border-radius: var(--r-pill);
  font-size: 1rem;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s, transform .2s var(--ease-out);
}
.btn:active { transform: scale(.98); }
.btn svg { width: 18px; height: 18px; }
.btn--sm { --btn-h: 42px; padding: 0 18px; font-size: var(--fs-small); }
.btn--block { width: 100%; }

.btn--dark { background: var(--ink); color: var(--on-dark); }
.btn--dark:hover { background: var(--ink-2); }
.btn--dark:disabled { opacity: .6; cursor: progress; }

.btn--outline {
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-soft);
}
.btn--outline:hover { background: var(--surface); }

.btn--light { background: var(--on-dark); color: var(--ink); }
.btn--light:hover { background: #F2EDEC; }

.btn--glass { background: rgba(255, 255, 255, .12); color: var(--on-dark); }
.btn--glass:hover { background: rgba(255, 255, 255, .2); }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--ink);
  transition: background-color .2s, transform .2s var(--ease-out);
}
.icon-btn:hover { background: rgba(21, 15, 23, .06); }
.icon-btn svg { width: 18px; height: 18px; }

/* ---------- Küre (orb) ----------
   Renkler --o1..--o4 ile verilir; varyant sınıfı değişince yumuşakça geçer. */
.orb {
  --blur: 22px;
  --o1: #FFE3B8;
  --o2: var(--akin-orange);
  --o3: var(--akin-ember);
  --o4: var(--akin-orchid);
  position: relative;
  display: block;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  /* overflow + border-radius, GPU'da ayrı katmanda çizilen bulanık ve dönen ::before'u her tarayıcıda daireye kırpmaz:
     Safari ve Chrome'da kürenin köşelerinde kare renk taşması görülür. clip-path kırpmayı o katmana da uygular. */
  clip-path: circle(50%);
  isolation: isolate;
  /* Katmanlar (üstten alta): kaba doku, parlama, kenar gölgesi, renk lekeleri, ana küre */
  background:
    var(--grain-soft) 0 0 / 300px,
    radial-gradient(40% 32% at 30% 22%, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(circle at 50% 50%, rgba(28, 10, 30, 0) 52%, rgba(28, 10, 30, .32) 100%),
    radial-gradient(58% 52% at 30% 24%, var(--o1) 0%, transparent 72%),
    radial-gradient(70% 70% at 78% 84%, var(--o4) 0%, transparent 72%),
    radial-gradient(120% 120% at 38% 32%, var(--o2) 0%, var(--o3) 60%, var(--o4) 100%);
  background-blend-mode: soft-light, screen, multiply, normal, normal, normal;
  transition:
    --o1 .9s var(--ease-in-out), --o2 .9s var(--ease-in-out),
    --o3 .9s var(--ease-in-out), --o4 .9s var(--ease-in-out),
    transform .6s var(--ease-out);
}
.orb::before {
  content: "";
  position: absolute;
  inset: -25%;
  border-radius: 50%;
  background:
    linear-gradient(118deg, transparent 34%, var(--o3) 47%, transparent 60%),
    radial-gradient(38% 38% at 26% 74%, var(--o1) 0%, transparent 70%);
  filter: blur(var(--blur));
  opacity: .7;
  animation: orb-spin 18s linear infinite;
  transition: opacity .6s;
}
.orb::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-image: var(--grain);
  background-size: 160px;
  mix-blend-mode: overlay;
  opacity: .55;
  pointer-events: none;
}
@keyframes orb-spin { to { transform: rotate(1turn); } }

.orb--sm { --blur: 5px; }
.orb--sm::after { opacity: .3; background-size: 120px; }
.orb--inline { display: inline-block; width: 1em; vertical-align: -.14em; margin-inline: .16em; }

.orb--ember   { --o1: #FFD9A3; --o2: #F7642A; --o3: var(--akin-ember); --o4: var(--akin-plum); }
.orb--orchid  { --o1: #FFD6C9; --o2: #EF6B6E; --o3: var(--akin-orchid); --o4: #5A1A4F; }
.orb--plum    { --o1: #F2C3E6; --o2: #B54A8E; --o3: var(--akin-plum); --o4: var(--akin-night); }
.orb--night   { --o1: #FBA65C; --o2: var(--akin-orchid); --o3: #4E1F55; --o4: var(--dark); }
.orb--sunrise { --o1: #FFF2CC; --o2: #FFB24D; --o3: var(--akin-orange); --o4: var(--akin-ember); }
.orb--lilac   { --o1: #F6E4FF; --o2: #C68BD6; --o3: #8E3D8C; --o4: #4A1F5C; }
.orb--rose    { --o1: #FFE2D8; --o2: #F58C7B; --o3: #D24F6B; --o4: var(--akin-plum); }
.orb--muted   { --o1: #FBFAF9; --o2: #EFEBEA; --o3: #E8E3E1; --o4: #DFD9D7; }
.orb--muted::before { opacity: 0; animation-play-state: paused; }

/* ---------- Segment düğmeleri ---------- */
.seg {
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  border-radius: var(--r-pill);
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}
.seg button {
  height: 34px;
  padding: 0 16px;
  border-radius: var(--r-pill);
  font-size: var(--fs-small);
  color: var(--muted);
  white-space: nowrap;
  transition: background-color .25s, color .25s, box-shadow .25s;
}
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--on-dark); }

.seg--lg { padding: 5px; }
.seg--lg button { height: 54px; padding: 0 30px; font-size: 1.125rem; }
.seg--lg button[aria-pressed="true"] {
  background: var(--bg);
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--line), 0 6px 18px -6px rgba(21, 15, 23, .22);
}
@media (max-width: 480px) {
  .seg--lg button { height: 48px; padding: 0 clamp(12px, 4vw, 30px); font-size: clamp(.875rem, 4vw, 1.125rem); }
}

/* ---------- Kart ---------- */
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
}

/* ---------- Çip ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: var(--fs-small);
  color: var(--ink-2);
}
.chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--akin-orange)); }

.tag {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  font-size: .75rem;
  font-weight: 500;
  white-space: nowrap;
  background: var(--surface);
  color: var(--ink-2);
}
.tag--ai { background: rgba(249, 126, 41, .14); color: #9A3F0B; }
.tag--team { background: rgba(129, 28, 98, .1); color: var(--akin-plum); }

/* Noktalı ayraç */
.dotted {
  background-image: radial-gradient(circle, var(--muted-2) .9px, transparent 1.3px);
  background-size: 7px 2px;
  background-repeat: repeat-x;
}

@keyframes blink { 50% { opacity: .25; } }
@keyframes spin { to { transform: rotate(1turn); } }
@keyframes rise-in { from { opacity: 0; transform: translateY(10px); } }