/* ============================
   Global UI — button-64
   - Yapı: <a|button class="button-64"><span class="text">Label</span></a|button>
   - A11y: focus-visible, disabled desteği
   - Variants: -sm / -lg / -block
   - Tema: varsayılan gradient; istersen CSS var ile override et
   ============================ */

:root{
  /* İstersen override edersin */
  --b64-c1: #AF40FF;
  --b64-c2: #5B42F3;
  --b64-c3: #00DDEB;
  --b64-focus: rgba(14,165,233,.45); /* focus halka */
  --b64-inner-dark: rgb(5, 6, 45);
  --b64-inner-darkmode: rgb(8, 12, 28);
}

/* Anchor ve Button birlikte */
.button-64{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 140px;
  padding: 3px;
  border: 0;
  border-radius: 12px;
  box-sizing: border-box;

  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Phantomsans", sans-serif;
  font-weight: 800;
  font-size: 18px;
  line-height: 1;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;

  background-image: linear-gradient(144deg, var(--b64-c1), var(--b64-c2) 50%, var(--b64-c3));
  box-shadow: 0 15px 30px -5px rgba(151, 65, 252, .25);

  transition: filter .25s ease, transform .06s ease, box-shadow .25s ease;
  -webkit-tap-highlight-color: transparent;
}
.button-64 .text{
  display: inline-flex;
  align-items: center;
  gap: .5rem;                 /* ikon vs varsa */
  width: 100%; height: 100%;
  padding: 14px 22px;
  border-radius: 10px;
  background-color: var(--b64-inner-dark);
  color: #fff;
  transition: background-color .3s ease, color .3s ease;
}

/* Hover / Active / Focus */
.button-64:hover{ filter: brightness(1.05); box-shadow: 0 18px 38px -8px rgba(151,65,252,.38); }
.button-64:hover .text{ background: none; }
.button-64:active{ transform: translateY(1px); }

.button-64:focus{ outline: none; }
.button-64:focus-visible{
  outline: 3px solid var(--b64-focus);
  outline-offset: 2px;
}

/* Disabled (hem native hem class) */
.button-64[disabled],
.button-64.is-disabled{
  opacity: .55; cursor: not-allowed; filter: none !important; transform: none !important;
  box-shadow: none !important;
}
.button-64[disabled] .text,
.button-64.is-disabled .text{
  background-color: var(--b64-inner-dark);
}

/* Dark mode iç panel hafif açılsın */
html.dark .button-64 .text{ background-color: var(--b64-inner-darkmode); }

/* Size variants */
.button-64.-sm{ font-size: 16px; min-width: 120px; }
.button-64.-sm .text{ padding: 12px 18px; }

.button-64.-lg{ font-size: 20px; min-width: 196px; }
.button-64.-lg .text{ padding: 16px 24px; }

/* Block (full width) */
.button-64.-block{ display: flex; width: 100%; }

/* Responsive iyileştirme */
@media (min-width: 768px){
  .button-64{ font-size: 20px; min-width: 196px; }
  .button-64 .text{ padding: 16px 24px; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .button-64{ transition: none; }
  .button-64 .text{ transition: none; }
}

/* === button-64 — DARK HOVER FIX ================================== */
/* 1) Tema-bağımlı değişkenler (Tailwind .dark ve data-theme ikisi birden) */
:root{
  --b64-inner-bg: rgb(5, 6, 45);       /* light iç panel */
  --b64-hover-brighten: 1.05;          /* light hover parlaklık */
}
html.dark, html[data-theme="dark"]{
  --b64-inner-bg: rgb(8, 12, 28);      /* dark iç panel */
  --b64-hover-brighten: 1.08;          /* dark’ta hover biraz daha parlak */
}

/* 2) İç panel rengi her durumda değişkenden gelsin */
.button-64 .text{
  background-color: var(--b64-inner-bg) !important;
}

/* 3) Hover — dış gradient parlasın, iç paneli tamamen şeffafla */
.button-64:hover{
  filter: brightness(var(--b64-hover-brighten)) !important;
  box-shadow: 0 18px 38px -8px rgba(151,65,252,.38) !important;
}
.button-64:hover .text{
  background-color: transparent !important;   /* background: none yerine garantili */
}

/* 4) Disabled — iç panel yine tema değişkeninden gelsin */
.button-64[disabled] .text,
.button-64.is-disabled .text{
  background-color: var(--b64-inner-bg) !important;
}

/* 5) (Opsiyonel) Safari’de filter için katman oluştur */
@supports (backdrop-filter: blur(0)){
  .button-64{ transform: translateZ(0); }
}