/* ─── ape-ui.css — apechain.com uyarlamalarının ortak UI parçaları (buton, link, pill, tipografi, ızgara) ───
   Ölçüler referansın Tailwind yapılandırmasından: px-container 6.15vw / 2.22vw (≥1024), gutter .5rem / 1.5rem,
   UIBtn inner padding .9375rem 1.5rem + radius 1rem + 2px gradyan çerçeve, UILink 12px mono + alt çizgi animasyonu.
   Manuka ticari → Bebas Neue (--ape-display). */
:root {
    --ape-display: "Bebas Neue", "Anton", Impact, "Arial Narrow", sans-serif;
    --ape-sans: "DM Sans", Inter, system-ui, sans-serif;
    --ape-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --ape-margin: 6.153846vw;
    --ape-gutter: .5rem;
    --ape-cols: 6;
    --ape-col: calc((100vw - 2 * var(--ape-margin) - var(--ape-gutter) * (var(--ape-cols) - 1)) / var(--ape-cols));
    --ape-grad: linear-gradient(135deg, #A281FF 10%, #EB8280 33%, #EBBF9A 66%, #89D0FF 90%);
    --ape-blue: #0054FA;
    --ape-grey: #E2F0FF;
}
@media (min-width: 1024px) {
    :root { --ape-margin: 2.222222vw; --ape-gutter: 1.5rem; --ape-cols: 12; }
}
.ape-container { padding-left: var(--ape-margin); padding-right: var(--ape-margin); }

/* ── Buton (UIBtn): primary = beyaz zemin + gradyan çerçeve + siyah yazı; secondary = mavi radyal + beyaz yazı ── */
.ape-btn {
    position: relative; display: inline-block; border-radius: 1rem; text-decoration: none; color: #000;
    font-family: var(--ape-mono); font-size: .75rem; font-weight: 500; line-height: 1; letter-spacing: .1em; text-transform: uppercase;
    border: 2px solid transparent;
    background: linear-gradient(#fff, #fff) padding-box, var(--ape-grad) border-box;
    transition: color .3s, box-shadow .6s; cursor: pointer; vertical-align: middle; -webkit-font-smoothing: antialiased;
}
.ape-btn::before {
    content: ""; position: absolute; inset: -2px; border-radius: 1rem; opacity: 0;
    background: radial-gradient(90% 120% at 30% 10%, #00A7FA 0%, #0054FA 100%) padding-box, var(--ape-grad) border-box;
    border: 2px solid transparent; transition: opacity .6s cubic-bezier(.45,.03,.52,.96);
}
.ape-btn:hover, .ape-btn:focus-visible { color: #fff; box-shadow: 0 0 24px rgba(255,255,255,.5); }
.ape-btn:hover::before, .ape-btn:focus-visible::before { opacity: 1; }
.ape-btn--secondary { color: #fff; background: radial-gradient(90% 120% at 30% 10%, #00A7FA 0%, #0054FA 100%) padding-box, var(--ape-grad) border-box; }
.ape-btn--secondary:hover { box-shadow: 0 0 24px rgba(0,167,250,.45); }
.ape-btn__inner {
    position: relative; display: inline-flex; width: 100%; align-items: center; justify-content: center;
    gap: .375rem; padding: .9375rem 1.5rem; overflow: hidden; text-align: center; pointer-events: none;
}
.ape-lbl { position: relative; display: inline-block; overflow: hidden; }
.ape-lbl__main, .ape-lbl__clone { display: block; transition: transform .4s cubic-bezier(.76,0,.24,1); }
.ape-lbl__clone { position: absolute; top: 100%; left: 0; width: 100%; height: 100%; }
.ape-btn:hover .ape-lbl__main, .ape-btn:hover .ape-lbl__clone,
.ape-link:hover .ape-lbl__main, .ape-link:hover .ape-lbl__clone { transform: translateY(-100%); }
.ape-btn.is-hidden { display: none; }

/* ── Link (UILink): mono 12px uppercase, alt çizgi soldan çizilir, ok ikonu ── */
.ape-link {
    display: inline-flex; align-items: center; gap: .375rem; color: inherit; text-decoration: none;
    font-family: var(--ape-mono); font-size: .75rem; line-height: 1.12; letter-spacing: .1em; text-transform: uppercase;
}
.ape-link__inner { position: relative; display: inline-block; overflow: hidden; padding-bottom: 1px; }
.ape-link__inner::after {
    content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: currentColor;
    transform: scaleX(0); transform-origin: right; transition: transform .3s;
}
.ape-link:hover .ape-link__inner::after { transform: scaleX(1); transform-origin: left; }
.ape-link__icon { width: .75rem; height: .75rem; flex: none; }

/* ── Pill (UIPill) ── */
.ape-pill {
    display: inline-block; border-radius: .5rem; padding: .3125rem .5rem; background: rgba(255,255,255,.3); color: #fff;
    font-family: var(--ape-mono); font-size: .75rem; font-weight: 500; line-height: 14px; letter-spacing: .1em;
    text-transform: uppercase; white-space: nowrap;
}

/* ── Tipografi ── */
.ape-display { font-family: var(--ape-display); font-weight: 400; text-transform: uppercase; }
.ape-icon { width: 1em; height: 1em; display: inline-block; vertical-align: middle; }
.ape-icon--rocket { width: auto; height: calc(25 / 32 * 1em); }