/**
 * İkramedya — Global buton hover sistemi (circle reveal + glow)
 * Tema: var(--theme-primary), var(--theme-secondary), var(--theme-accent), var(--site-bg)
 */

:root {
    --ik-btn-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --ik-btn-duration: 0.85s;
    --ik-btn-icon-shift: 5px;
    --ik-btn-text-shift: 3px;
    --ik-btn-reveal-scale: 2.8;
    --ik-btn-on-brand: var(--site-bg, #fff);
}

/* ── Temel (circle reveal) ── */
.ik-btn {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ds-control-gap, 0.5rem);
    cursor: pointer;
    text-decoration: none;
    font: inherit;
    border-radius: var(--theme-button-radius, 8px);
    font-weight: var(--theme-button-font-weight, inherit);
    -webkit-tap-highlight-color: transparent;
    transition:
        color var(--ik-btn-duration) var(--ik-btn-ease),
        border-color var(--ik-btn-duration) var(--ik-btn-ease),
        box-shadow var(--ik-btn-duration) var(--ik-btn-ease),
        background-color var(--ik-btn-duration) var(--ik-btn-ease);
}

.ik-btn:focus-visible {
    outline: none;
}

.ik-btn--sm {
    min-height: var(--ds-control-height-sm, 2.5rem);
    padding: 0.5rem 0.95rem;
    font-size: 0.875rem;
    gap: var(--ds-gap-xs, 0.5rem);
}

.ik-btn--md,
.home-btn.ik-btn--primary,
.home-btn.ik-btn--secondary {
    min-height: var(--ds-control-height, var(--theme-button-height, 3rem));
    padding: var(--ds-control-pad-y, 0.8rem) var(--ds-control-pad-x, var(--theme-button-padding-x, 1.25rem));
}

.ik-btn--lg,
.home-btn.ik-btn--lg {
    min-height: var(--ds-control-height-lg, clamp(3.5rem, 5vw, 4rem));
    padding: 0.95rem var(--ds-control-pad-x, 1.5rem);
}

.ik-btn::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 110%;
    aspect-ratio: 1;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: transform var(--ik-btn-duration) var(--ik-btn-ease);
    z-index: 0;
    pointer-events: none;
    background: var(--ik-btn-reveal-bg, var(--theme-primary, #2563eb));
}

.ik-btn:hover::before,
.ik-btn:focus-visible::before {
    transform: translate(-50%, -50%) scale(var(--ik-btn-reveal-scale));
}

.ik-btn__inner {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: inherit;
    transition: transform var(--ik-btn-duration) var(--ik-btn-ease);
}

.ik-btn:hover .ik-btn__inner,
.ik-btn:focus-visible .ik-btn__inner {
    transform: translateX(var(--ik-btn-text-shift));
}

.ik-btn > i,
.ik-btn .ik-btn__inner > i,
.ik-btn > span,
.ik-btn .ik-btn__icon,
.ik-btn svg {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    transition: transform var(--ik-btn-duration) var(--ik-btn-ease);
}

.ik-btn:hover > i.fa-arrow-right,
.ik-btn:focus-visible > i.fa-arrow-right,
.ik-btn:hover .ik-btn__inner > i.fa-arrow-right,
.ik-btn:focus-visible .ik-btn__inner > i.fa-arrow-right,
.ik-btn:hover > i.fa-chevron-right,
.ik-btn:focus-visible > i.fa-chevron-right,
.ik-btn:hover .ik-btn__inner > i.fa-chevron-right,
.ik-btn:focus-visible .ik-btn__inner > i.fa-chevron-right {
    transform: translateX(var(--ik-btn-icon-shift));
}

.ik-btn:hover > i.fa-arrow-left,
.ik-btn:focus-visible > i.fa-arrow-left,
.ik-btn:hover .ik-btn__inner > i.fa-arrow-left,
.ik-btn:focus-visible .ik-btn__inner > i.fa-arrow-left,
.ik-btn:hover > i.fa-chevron-left,
.ik-btn:focus-visible > i.fa-chevron-left,
.ik-btn:hover .ik-btn__inner > i.fa-chevron-left,
.ik-btn:focus-visible .ik-btn__inner > i.fa-chevron-left {
    transform: translateX(calc(-1 * var(--ik-btn-icon-shift)));
}

.ik-btn:hover > i.fa-arrow-up-right-from-square,
.ik-btn:focus-visible > i.fa-arrow-up-right-from-square,
.ik-btn:hover .ik-btn__inner > i.fa-arrow-up-right-from-square,
.ik-btn:focus-visible .ik-btn__inner > i.fa-arrow-up-right-from-square {
    transform: translate(4px, -4px);
}

.ik-btn--icon.home-blog__nav-btn--prev:hover .home-blog__nav-icon,
.ik-btn--icon.home-blog__nav-btn--prev:focus-visible .home-blog__nav-icon {
    transform: translateX(calc(-1 * var(--ik-btn-icon-shift)));
}

.ik-btn--icon.home-blog__nav-btn--next:hover .home-blog__nav-icon,
.ik-btn--icon.home-blog__nav-btn--next:focus-visible .home-blog__nav-icon {
    transform: translateX(var(--ik-btn-icon-shift));
}

/* Kart içi link — üst öğe hover (circle reveal devre dışı) */
a:hover > .ik-btn--link::before,
a:focus-within > .ik-btn--link::before,
.ik-btn--link:hover::before,
.ik-btn--link:focus-visible::before {
    display: none;
}

a:hover > .ik-btn--link i.fa-arrow-right,
a:focus-within > .ik-btn--link i.fa-arrow-right,
.ik-btn--link:hover i.fa-arrow-right,
.ik-btn--link:focus-visible i.fa-arrow-right {
    transform: translateX(var(--ik-btn-icon-shift));
}

.home-btn.ik-btn--primary,
.home-btn.ik-btn--secondary {
    border-radius: var(--theme-button-radius, 8px);
    font-weight: var(--theme-button-font-weight, 500);
    font-size: 0.95rem;
}

/* ── Primary ── */
.ik-btn--primary {
    --ik-btn-reveal-bg: color-mix(in srgb, var(--theme-button-hover-bg, var(--theme-primary, #2563eb)) 92%, var(--site-text, #0f172a));
    border: 1px solid var(--theme-button-border, transparent);
    background: var(--theme-button-bg, var(--theme-primary, #2563eb));
    color: var(--theme-button-color, var(--ik-btn-on-brand));
    box-shadow: var(--theme-button-shadow, none);
}

.ik-btn--primary:hover,
.ik-btn--primary:focus-visible {
    background: var(--theme-button-hover-bg, var(--theme-secondary, var(--theme-primary, #2563eb)));
    color: var(--theme-button-hover-color, var(--ik-btn-on-brand));
    border-color: var(--theme-button-border, transparent);
    box-shadow: var(--theme-button-shadow, none);
}

.ik-btn--primary.is-active::before,
.ik-btn--primary:active::before {
    background: color-mix(in srgb, var(--site-text, #0f172a) 12%, var(--theme-primary, #2563eb));
}

/* ── Secondary ── */
.ik-btn--secondary {
    --ik-btn-reveal-bg: color-mix(in srgb, var(--theme-secondary, var(--theme-primary, #2563eb)) 88%, var(--site-text, #0f172a));
    border: 1px solid color-mix(in srgb, var(--theme-primary, #2563eb) 22%, transparent);
    background: var(--site-bg, #fff);
    color: var(--site-text, #1e293b);
}

.ik-btn--secondary:hover,
.ik-btn--secondary:focus-visible {
    background: var(--ik-btn-reveal-bg, color-mix(in srgb, var(--theme-secondary, var(--theme-primary, #2563eb)) 88%, var(--site-text, #0f172a)));
    color: var(--ik-btn-on-brand);
    border-color: color-mix(in srgb, var(--theme-secondary, var(--theme-primary, #2563eb)) 70%, transparent);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--site-bg, #fff) 35%, transparent),
        0 12px 30px color-mix(in srgb, var(--site-bg, #fff) 18%, transparent),
        var(--theme-card-shadow-hover, 0 10px 28px color-mix(in srgb, var(--theme-text, #0f172a) 10%, transparent));
}

/* ── Outline ── */
.ik-btn--outline {
    --ik-btn-reveal-bg: var(--theme-primary, #2563eb);
    border: 1px solid color-mix(in srgb, var(--theme-primary, #2563eb) 35%, transparent);
    background: var(--site-bg, #fff);
    color: var(--theme-primary, #2563eb);
}

.ik-btn--outline:hover,
.ik-btn--outline:focus-visible {
    background: var(--ik-btn-reveal-bg, var(--theme-primary, #2563eb));
    color: var(--ik-btn-on-brand);
    border-color: var(--theme-primary, #2563eb);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--theme-primary, #2563eb) 38%, transparent),
        var(--theme-card-shadow-hover, 0 12px 32px color-mix(in srgb, var(--theme-text, #0f172a) 10%, transparent));
}

/* ── Ghost ── */
.ik-btn--ghost {
    --ik-btn-reveal-bg: color-mix(in srgb, var(--theme-primary, #2563eb) 14%, var(--site-bg, #fff));
    border: 1px solid color-mix(in srgb, var(--site-text, #0f172a) 10%, transparent);
    background: color-mix(in srgb, var(--site-text, #0f172a) 5%, var(--site-bg, #fff));
    color: var(--site-text, #0f172a);
}

.ik-btn--ghost:hover,
.ik-btn--ghost:focus-visible {
    color: var(--theme-primary, #2563eb);
    border-color: color-mix(in srgb, var(--theme-primary, #2563eb) 28%, transparent);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--theme-primary, #2563eb) 16%, transparent),
        var(--theme-card-shadow, 0 8px 22px color-mix(in srgb, var(--theme-text, #0f172a) 8%, transparent));
}

/* ── Filter / Category — sade hover (circle reveal yok; metin her zaman okunur) ── */
.ik-btn--filter,
.ik-btn--category {
    border: 1px solid transparent;
    background: var(--theme-surface-alt, color-mix(in srgb, var(--theme-text, #0f172a) 5%, var(--site-bg, #fff)));
    color: var(--site-text, #1e293b);
}

.ik-btn--filter::before,
.ik-btn--category::before {
    display: none;
}

.ik-btn--filter:hover,
.ik-btn--filter:focus-visible,
.ik-btn--category:hover,
.ik-btn--category:focus-visible {
    border-color: var(--theme-card-border, color-mix(in srgb, var(--theme-border, #e2e8f0) 70%, var(--theme-text, #0f172a)));
    background: var(--theme-card-bg-hover, var(--theme-surface-alt, color-mix(in srgb, var(--theme-text, #0f172a) 8%, var(--site-bg, #fff))));
    color: var(--site-text, #1e293b);
    box-shadow: var(--theme-card-shadow, 0 4px 14px color-mix(in srgb, var(--theme-text, #0f172a) 6%, transparent));
}

.ik-btn--filter.is-active,
.ik-btn--category.is-active {
    background: var(--theme-primary, #2563eb);
    border-color: var(--theme-primary, #2563eb);
    color: var(--ik-btn-on-brand);
    box-shadow: var(--theme-button-shadow, 0 8px 24px color-mix(in srgb, var(--theme-primary, #2563eb) 24%, transparent));
}

.ik-btn--filter.is-active:hover,
.ik-btn--filter.is-active:focus-visible,
.ik-btn--category.is-active:hover,
.ik-btn--category.is-active:focus-visible {
    background: color-mix(in srgb, var(--theme-primary, #2563eb) 92%, var(--site-text, #0f172a));
    color: var(--ik-btn-on-brand);
    box-shadow: var(--theme-button-shadow, 0 10px 28px color-mix(in srgb, var(--theme-primary, #2563eb) 28%, transparent));
}

.ik-btn--filter:hover .ik-btn__inner,
.ik-btn--filter:focus-visible .ik-btn__inner,
.ik-btn--category:hover .ik-btn__inner,
.ik-btn--category:focus-visible .ik-btn__inner {
    transform: none;
}

/* Kart içi link — büyük tıklanabilir alanlarda kullanılmamalı; circle reveal kapalı */
.ik-btn--link {
    min-height: 0;
    padding: 0;
    border: 1px solid transparent;
    background: transparent;
    border-radius: var(--theme-button-radius, 8px);
    color: var(--theme-primary, #2563eb);
}

.ik-btn--link::before {
    display: none;
}

.ik-btn--link:hover,
.ik-btn--link:focus-visible,
a:hover > .ik-btn--link,
a:focus-within > .ik-btn--link {
    color: var(--theme-primary, #2563eb);
}

.ik-btn--link:hover .ik-btn__inner,
.ik-btn--link:focus-visible .ik-btn__inner,
a:hover > .ik-btn--link .ik-btn__inner,
a:focus-within > .ik-btn--link .ik-btn__inner {
    transform: none;
}

/* ── İkon-only (yuvarlak kontroller) ── */
.ik-btn--icon {
    --ik-btn-reveal-scale: 2.6;
    min-height: 0;
    padding: 0;
}

.ik-btn--icon .ik-btn__inner {
    transform: none;
}

.ik-btn--icon:hover .ik-btn__inner,
.ik-btn--icon:focus-visible .ik-btn__inner {
    transform: none;
}

/* ── CTA (circle reveal YOK — sabit buton, sade hover) ── */
.home-cta__btn::before,
.ik-btn--cta::before {
    display: none !important;
}

.ik-btn--cta::after {
    display: none !important;
}

.ik-btn--cta .ik-btn__inner {
    transform: none;
}

.ik-btn--cta:hover .ik-btn__inner,
.ik-btn--cta:focus-visible .ik-btn__inner {
    transform: none;
}

.ik-btn--cta-primary {
    transition:
        box-shadow 0.35s var(--ik-btn-ease),
        background-color 0.35s var(--ik-btn-ease),
        color 0.35s var(--ik-btn-ease),
        border-color 0.35s var(--ik-btn-ease);
}

.ik-btn--cta-primary:hover,
.ik-btn--cta-primary:focus-visible {
    color: var(--theme-primary, #2563eb);
    background: var(--site-bg, #fff);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--site-bg, #fff) 55%, transparent),
        0 14px 28px color-mix(in srgb, var(--site-text, #0f172a) 14%, transparent);
}

.ik-btn--cta-secondary {
    transition:
        box-shadow 0.35s var(--ik-btn-ease),
        background-color 0.35s var(--ik-btn-ease),
        color 0.35s var(--ik-btn-ease),
        border-color 0.35s var(--ik-btn-ease);
}

.ik-btn--cta-secondary:hover,
.ik-btn--cta-secondary:focus-visible {
    color: var(--site-bg, #fff);
    background: color-mix(in srgb, var(--site-bg, #fff) 14%, transparent);
    border-color: var(--site-bg, #fff);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--site-bg, #fff) 40%, transparent),
        0 10px 24px color-mix(in srgb, var(--site-text, #0f172a) 12%, transparent);
}

/* Header CTA — magnetic modda circle reveal açık */
.header-cta:not(.ik-btn--magnetic)::before {
    display: none;
}

/* Hero — yalnızca magnetic olmayan butonlarda merkez reveal kapalı */
.hero-tpl__btn:not(.ik-btn--magnetic)::before,
.hero-tpl__actions .home-btn:not(.ik-btn--magnetic)::before {
    display: none;
}

/* ── Premium mouse-tracking (ik-btn--magnetic) — circle/glow only, buton sabit ── */
.ik-btn--magnetic {
    --ik-btn-magnetic-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ik-btn-magnetic-scale: 3;
    --ik-btn-magnetic-size: 125%;
    --mouse-x: 50%;
    --mouse-y: 50%;
    transition:
        color var(--ik-btn-duration) var(--ik-btn-ease),
        border-color var(--ik-btn-duration) var(--ik-btn-ease),
        box-shadow 0.45s var(--ik-btn-magnetic-ease),
        background-color var(--ik-btn-duration) var(--ik-btn-ease);
}

.ik-btn--magnetic::before {
    top: var(--mouse-y, 50%);
    left: var(--mouse-x, 50%);
    width: var(--ik-btn-magnetic-size);
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.85s var(--ik-btn-magnetic-ease);
    z-index: 0;
}

.ik-btn--magnetic::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    background: radial-gradient(
        circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
        color-mix(in srgb, var(--ik-btn-glow-color, var(--theme-text, #0f172a)) 18%, transparent) 0%,
        color-mix(in srgb, var(--ik-btn-glow-color, var(--theme-text, #0f172a)) 6%, transparent) 38%,
        transparent 68%
    );
    transition: opacity 0.45s var(--ik-btn-magnetic-ease);
}

.ik-btn--magnetic:hover::before,
.ik-btn--magnetic:focus-visible::before {
    transform: translate(-50%, -50%) scale(0);
}

.ik-btn--magnetic.is-magnetic-active::before {
    transform: translate(-50%, -50%) scale(var(--ik-btn-magnetic-scale));
}

.ik-btn--magnetic.is-magnetic-active::after {
    opacity: 1;
}

.ik-btn--magnetic .ik-btn__inner,
.ik-btn--magnetic > span,
.ik-btn--magnetic > i,
.ik-btn--magnetic .ik-btn__icon {
    position: relative;
    z-index: 2;
}

.ik-btn--magnetic .ik-btn__inner,
.ik-btn--magnetic > i,
.ik-btn--magnetic .ik-btn__inner > i {
    transition: transform 0.85s var(--ik-btn-magnetic-ease);
}

/* Primary + magnetic */
.ik-btn--magnetic.ik-btn--primary {
    --ik-btn-glow-color: var(--theme-primary);
    border-radius: var(--theme-button-radius, 8px);
    background: var(--theme-button-bg, var(--theme-primary, #2563eb));
    color: var(--theme-button-color, var(--ik-btn-on-brand));
    border: 1px solid var(--theme-button-border, transparent);
    box-shadow: var(--theme-button-shadow, none);
}

.ik-btn--magnetic.ik-btn--primary:hover,
.ik-btn--magnetic.ik-btn--primary:focus-visible,
.ik-btn--magnetic.ik-btn--primary.is-magnetic-active {
    background: var(--theme-button-hover-bg, var(--theme-secondary, var(--theme-primary, #2563eb)));
    color: var(--theme-button-hover-color, var(--ik-btn-on-brand));
    border-color: var(--theme-button-border, transparent);
    box-shadow: var(--theme-button-shadow, none);
}

/* Secondary + magnetic */
.ik-btn--magnetic.ik-btn--secondary {
    --ik-btn-glow-color: var(--theme-secondary, var(--theme-primary));
    border-radius: var(--theme-button-radius, 8px);
}

.ik-btn--magnetic.ik-btn--secondary:hover,
.ik-btn--magnetic.ik-btn--secondary:focus-visible,
.ik-btn--magnetic.ik-btn--secondary.is-magnetic-active {
    background: var(--ik-btn-reveal-bg, color-mix(in srgb, var(--theme-secondary, var(--theme-primary, #2563eb)) 88%, var(--site-text, #0f172a)));
    color: var(--ik-btn-on-brand);
    border-color: color-mix(in srgb, var(--theme-secondary, var(--theme-primary, #2563eb)) 70%, transparent);
}

/* Outline + magnetic */
.ik-btn--magnetic.ik-btn--outline {
    --ik-btn-glow-color: var(--theme-primary);
    border-radius: var(--theme-button-radius, 8px);
}

.ik-btn--magnetic.ik-btn--outline:hover,
.ik-btn--magnetic.ik-btn--outline:focus-visible,
.ik-btn--magnetic.ik-btn--outline.is-magnetic-active {
    background: var(--ik-btn-reveal-bg, var(--theme-primary, #2563eb));
    border-color: var(--theme-primary);
    color: var(--ik-btn-on-brand);
}

/* Ghost + magnetic */
.ik-btn--magnetic.ik-btn--ghost {
    --ik-btn-glow-color: var(--theme-primary);
    border-radius: var(--theme-button-radius, 8px);
}

.ik-btn--magnetic.ik-btn--ghost.is-magnetic-active {
    color: var(--theme-primary);
    border-color: color-mix(in srgb, var(--theme-primary) 28%, transparent);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--theme-primary) 16%, transparent),
        var(--theme-card-shadow, 0 8px 22px color-mix(in srgb, var(--theme-text) 8%, transparent));
}

/* Hero magnetic — tema tokenları, outline magnetic ile aynı reveal mantığı */
.hero-tpl__btn.ik-btn--magnetic .ik-btn__inner {
    position: relative;
    z-index: 2;
}

.hero-tpl--fullscreen-video .hero-tpl__btn--primary.ik-btn--magnetic {
    --ik-btn-reveal-bg: var(--theme-button-hover-bg, var(--theme-secondary, var(--theme-primary)));
    --ik-btn-glow-color: var(--theme-primary);
    background: var(--theme-button-bg, var(--theme-primary));
    color: var(--theme-button-color, var(--site-bg));
    border: 1px solid var(--theme-button-border, transparent);
    box-shadow: var(--theme-button-shadow, none);
}

.hero-tpl--fullscreen-video .hero-tpl__btn--primary.ik-btn--magnetic:hover,
.hero-tpl--fullscreen-video .hero-tpl__btn--primary.ik-btn--magnetic:focus-visible,
.hero-tpl--fullscreen-video .hero-tpl__btn--primary.ik-btn--magnetic.is-magnetic-active {
    background: var(--theme-button-hover-bg, var(--theme-secondary, var(--theme-primary)));
    color: var(--theme-button-hover-color, var(--site-bg));
    border-color: var(--theme-button-border, transparent);
    box-shadow: var(--theme-button-shadow, none);
}

.hero-tpl__btn--glass.ik-btn--ghost.ik-btn--magnetic {
    --ik-btn-reveal-bg: var(--theme-primary);
    --ik-btn-glow-color: var(--theme-primary);
    border: 1px solid color-mix(in srgb, var(--theme-primary) 30%, transparent);
    background: color-mix(in srgb, var(--theme-surface, var(--site-bg)) 8%, transparent);
    color: var(--theme-surface, var(--site-bg));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--theme-surface, var(--site-bg)) 12%, transparent);
}

.hero-tpl__btn--glass.ik-btn--ghost.ik-btn--magnetic:hover,
.hero-tpl__btn--glass.ik-btn--ghost.ik-btn--magnetic:focus-visible {
    color: var(--theme-surface, var(--site-bg));
    border-color: color-mix(in srgb, var(--theme-primary) 38%, transparent);
    background: color-mix(in srgb, var(--theme-surface, var(--site-bg)) 10%, transparent);
}

.hero-tpl__btn--glass.ik-btn--ghost.ik-btn--magnetic.is-magnetic-active {
    color: var(--theme-button-color, var(--site-bg));
    border-color: var(--theme-primary);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--theme-primary) 16%, transparent),
        var(--theme-card-shadow, 0 8px 22px color-mix(in srgb, var(--theme-text) 8%, transparent));
}

/* Header CTA magnetic */
.header-cta.ik-btn--magnetic {
    --ik-btn-glow-color: var(--theme-primary, var(--hdr-primary));
    --ik-btn-reveal-bg: color-mix(in srgb, var(--theme-button-hover-bg, var(--hdr-primary, var(--theme-primary))) 90%, var(--site-text));
    --ik-btn-on-brand: var(--theme-button-hover-color, var(--site-bg));
    border-radius: var(--theme-button-radius, 8px);
    background: var(--theme-button-bg, var(--hdr-primary, var(--theme-primary)));
    color: var(--theme-button-color, #fff);
    border: 1px solid var(--theme-button-border, transparent);
    box-shadow: var(--theme-button-shadow, 0 4px 14px color-mix(in srgb, var(--hdr-primary, var(--theme-primary)) 28%, transparent));
    overflow: hidden;
    isolation: isolate;
}

.header-cta.ik-btn--magnetic:hover,
.header-cta.ik-btn--magnetic:focus-visible,
.header-cta.ik-btn--magnetic.is-magnetic-active {
    color: var(--theme-button-hover-color, var(--site-bg));
    background: var(--theme-button-hover-bg, var(--theme-secondary, var(--hdr-primary, var(--theme-primary))));
    border-color: var(--theme-button-border, transparent);
}

.header-cta.ik-btn--magnetic.is-magnetic-active {
    box-shadow: var(--theme-button-shadow, 0 10px 26px color-mix(in srgb, var(--hdr-primary, var(--theme-primary)) 28%, transparent));
}

@media (prefers-reduced-motion: reduce) {
    .ik-btn--magnetic,
    .ik-btn--magnetic::before,
    .ik-btn--magnetic::after,
    .ik-btn--magnetic .ik-btn__inner,
    .ik-btn--magnetic > i {
        transition-duration: 0.01ms !important;
        animation: none !important;
    }

    .ik-btn--magnetic:hover::before,
    .ik-btn--magnetic.is-magnetic-active::before {
        transform: translate(-50%, -50%) scale(0);
    }

    .ik-btn--magnetic.is-magnetic-active::after {
        opacity: 0;
    }
}

@media (pointer: coarse), (max-width: 767px) {
    .ik-btn--magnetic::before,
    .ik-btn--magnetic::after {
        display: none;
    }

    .ik-btn--outline:hover,
    .ik-btn--outline:focus-visible,
    .ik-btn--outline.is-active,
    .ik-btn--outline:active,
    .ik-btn--outline.is-magnetic-active {
        background: var(--ik-btn-reveal-bg, var(--theme-primary, #2563eb));
        color: var(--ik-btn-on-brand, #fff);
        border-color: var(--theme-primary, #2563eb);
    }

    .ik-btn--secondary:hover,
    .ik-btn--secondary:focus-visible,
    .ik-btn--secondary.is-active,
    .ik-btn--secondary:active,
    .ik-btn--secondary.is-magnetic-active {
        background: var(--ik-btn-reveal-bg, color-mix(in srgb, var(--theme-secondary, var(--theme-primary, #2563eb)) 88%, var(--site-text, #0f172a)));
        color: var(--ik-btn-on-brand, #fff);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ik-btn::before,
    .ik-btn__inner,
    .ik-btn > i,
    .ik-btn .ik-btn__inner > i,
    .ik-btn--cta-primary,
    .ik-btn--cta-secondary {
        transition-duration: 0.01ms !important;
    }

    .ik-btn:hover::before,
    .ik-btn:focus-visible::before,
    a:hover > .ik-btn--link::before,
    a:focus-within > .ik-btn--link::before {
        transform: translate(-50%, -50%) scale(0);
    }

    .ik-btn--outline:hover,
    .ik-btn--outline:focus-visible,
    .ik-btn--outline.is-active,
    .ik-btn--outline:active,
    .ik-btn--outline.is-magnetic-active {
        background: var(--ik-btn-reveal-bg, var(--theme-primary, #2563eb));
        color: var(--ik-btn-on-brand, #fff);
        border-color: var(--theme-primary, #2563eb);
    }

    .ik-btn--secondary:hover,
    .ik-btn--secondary:focus-visible,
    .ik-btn--secondary.is-active,
    .ik-btn--secondary:active,
    .ik-btn--secondary.is-magnetic-active {
        background: var(--ik-btn-reveal-bg, color-mix(in srgb, var(--theme-secondary, var(--theme-primary, #2563eb)) 88%, var(--site-text, #0f172a)));
        color: var(--ik-btn-on-brand, #fff);
    }

    .ik-btn--cta-primary:hover,
    .ik-btn--cta-primary:focus-visible,
    .ik-btn--cta-secondary:hover,
    .ik-btn--cta-secondary:focus-visible {
        transform: none;
    }
}

/* ── Tema buton tokenları (frontend_button_style) ── */
.ik-btn,
.home-btn,
.hero-tpl__btn,
.header-cta,
.home-cta__btn,
.home-services__cta,
.home-projects__action,
.home-projects__filter,
.ikra-form__submit,
.sv-lp-btn,
.ref-circle-btn,
.ikramedya-widget-modal__cta,
.ikramedya-widget-action,
.ikramedya-popup__btn,
.ikramedya-cookie-btn,
.content-filter__link,
.ref-case__tab-btn {
    border-radius: var(--theme-button-radius, 8px);
    font-weight: var(--theme-button-font-weight, 500);
}

.home-btn:not(.home-btn--secondary):not(.home-btn--ghost):not(.home-btn--outline).home-btn--primary,
.header-cta,
.ikra-form__submit,
.sv-lp-btn--fill,
.ref-circle-btn--filled {
    background: var(--theme-button-bg, var(--theme-primary, #2563eb));
    color: var(--theme-button-color, #fff);
    border: 1px solid var(--theme-button-border, transparent);
    box-shadow: var(--theme-button-shadow, none);
}

.home-btn:not(.home-btn--secondary):not(.home-btn--ghost):not(.home-btn--outline).home-btn--primary:hover,
.home-btn:not(.home-btn--secondary):not(.home-btn--ghost):not(.home-btn--outline).home-btn--primary:focus-visible,
.header-cta:hover,
.header-cta:focus-visible,
.ikra-form__submit:hover,
.ikra-form__submit:focus-visible,
.sv-lp-btn--fill:hover,
.sv-lp-btn--fill:focus-visible {
    background: var(--theme-button-hover-bg, var(--theme-secondary, var(--theme-primary, #2563eb)));
    color: var(--theme-button-hover-color, #fff);
    border-color: var(--theme-button-border, transparent);
}

.home-cta__btn {
    min-height: var(--ds-control-height, var(--theme-button-height, 3rem));
    padding-inline: var(--ds-control-pad-x, var(--theme-button-padding-x, 1.65rem));
}

.ikramedya-popup__btn {
    background: var(--theme-button-bg, var(--theme-primary, #2563eb));
    color: var(--theme-button-color, #fff);
    border: 1px solid var(--theme-button-border, transparent);
    box-shadow: var(--theme-button-shadow, none);
}

.ikramedya-popup__btn:hover,
.ikramedya-popup__btn:focus-visible {
    background: var(--theme-button-hover-bg, var(--theme-secondary, var(--theme-primary, #2563eb)));
    color: var(--theme-button-hover-color, #fff);
    filter: none;
}

.ikramedya-cookie-btn--primary {
    background: var(--theme-button-bg, var(--cookie-primary, var(--theme-primary, #2563eb)));
    color: var(--theme-button-color, var(--cookie-btn-text, #fff));
    border: 1px solid var(--theme-button-border, transparent);
    box-shadow: var(--theme-button-shadow, 0 4px 14px color-mix(in srgb, var(--theme-primary, #2563eb) 28%, transparent));
}

/**
 * İkramedya Frontend Design System — Tipografi Standardı
 * Başlıklar tema Başlık Kalınlığı (--theme-heading-weight) ile bağlanır.
 * Yalnızca font-weight. Layout, spacing, font-size ve responsive yapı değiştirilmez.
 */
.hero-tpl__title,
.hero-tpl--fullscreen-video .hero-tpl__title,
.blog-hero__title,
.page-shell--standard .page-hero__title,
.page-shell--legal .page-hero__title,
.page-shell--corporate .page-hero__title,
.corp-showcase__title,
.services-hero__title,
.sv-lp-hero__title,
.refs-hero__title,
.ref-case__title,
.maintenance__title,
.hata-baslik,
.home-section__title,
.home-services__heading,
.home-projects__title,
.home-why__title,
.home-process__title,
.home-blog__heading,
.home-brands__title,
.home-cta__title,
.related-heading,
.blog-sidebar__title,
.services-process__title,
.refs-page__title,
.refs-faq__heading,
.sv-lp-heading,
.corp-showcase__brands-title,
.page-empty__title,
.home-services__card-title,
.home-blog__card-title,
.home-projects__name,
.blog-card__title,
.service-card__title,
.refs-card__title,
.related-slide .content-field h3,
.home-process__step-title,
.home-why__feature-title,
.sv-lp-gain__title,
.sv-lp-flow__label,
.sv-lp-tech__title,
.sv-lp-works__title,
.sv-lp-more__title,
.ref-testimonial__name,
.ref-case__content-title,
.offer-page__title,
.offer-card__title,
.ow__title,
.ow__subheading,
.contact-page__slogan,
.contact-page__form-heading,
.site-footer__menu-title,
.page-shell__title,
.content-card__title,
.content-article__title {
    font-weight: var(--theme-heading-weight, 300);
}

.blog-card__excerpt,
.service-card__text,
.refs-card__desc,
.home-services__text,
.home-services__desc,
.home-section__desc,
.home-cta__desc,
.home-process__desc,
.home-why__text,
.home-brands__desc,
.hero-tpl__desc,
.hero-tpl--fullscreen-video .hero-tpl__desc,
.services-hero__lead,
.sv-lp-hero__lead,
.refs-hero__desc,
.ref-case__desc,
.blog-hero__lead,
.sv-lp-flow__desc,
.sv-lp-flow__lead,
.sv-lp-gain__text,
.sv-lp-tech__text,
.sv-lp-more__text,
.refs-faq__lead,
.page-shell--standard .page-hero__desc,
.page-empty__text {
    font-weight: 400;
}

.blog-card__meta,
.blog-card__meta span,
.blog-article__meta,
.blog-hero .page-breadcrumb,
.page-breadcrumb,
.page-breadcrumb__link,
.page-breadcrumb__current,
.related-slide .slide-meta,
.related-slide .slide-meta span,
.ref-case__meta,
.ref-case__meta-label,
.ref-case__breadcrumb .page-breadcrumb__link,
.ref-case__breadcrumb .page-breadcrumb__current,
.refs-hero__breadcrumb,
.blog-sidebar__post-link time,
.blog-article__reading,
.blog-article__author,
.sv-lp-works__meta,
.sv-lp-works__label,
.home-blog__pill-meta,
.refs-card__tag,
.refs-card__tag-text,
.refs-sidebar__title {
    font-weight: 300;
}

.home-cta__btn,
.home-services__cta,
.blog-cta__btn,
.blog-pagination__btn,
.sv-lp-btn,
.hero-tpl__btn {
    font-weight: 500;
}