/*!
 * DGR Web — Ortak hareket sistemi (motion-core)
 * Dosyalar: assets/css/front/motion.css, assets/js/front/motion.js
 *
 * - data-fx dekorları (frame, frame-hover, corners, sheen, glow, draw): motion.js öğenin son çocuğu olarak
 *   <dgr-fx class="fx"> ekler. Dekor içeriğin altında (z-index:-1; öğe isolation:isolate), tıklamayı engellemez.
 *   Renk ayarı: --fx-color (varsayılan turuncu), --fx-sheen, --fx-draw-rest öğe üzerinde değiştirilebilir.
 * - data-net tuvalleri (.fx-net), düğme ışık geçişi, alt bilgi / sayfa başlığı / çağrı bandı / kartvizit /
 *   KVKK dokunuşları, SSS ve bildirim cilası.
 * Seviye: motion.js <html>'e fx-lvl-full | fx-lvl-calm | fx-lvl-off ekler (azaltılmış hareket = off).
 * JavaScript yoksa hiçbir içerik gizlenmez; dekorlar zaten eklenmez.
 */

@property --fx-a {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

/* ==========================================================================
   data-fx — kart dekorları
   ========================================================================== */

dgr-fx {
    display: block;
}

.fx-host {
    isolation: isolate;
}

.fx {
    position: absolute;
    inset: calc(var(--fx-bw, 0px) * -1);
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
}

.fx > * {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
}

/* ---- frame: kenarlık boyunca dolaşan kısa, parlak turuncu yay ---- */
.fx-frame,
.fx-frame-hover {
    padding: 1.25px;
    background: conic-gradient(
        from var(--fx-a),
        transparent 0deg 282deg,
        color-mix(in srgb, var(--fx-color, var(--brand)) 22%, transparent) 312deg,
        var(--fx-color, var(--brand)) 344deg,
        var(--fx-tip, color-mix(in srgb, var(--fx-color, var(--brand)) 45%, #fff5e8)) 354deg,
        transparent 360deg
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    animation: fx-spin var(--fx-dur, 9s) linear var(--fx-delay, 0s) infinite paused;
}

.fx-frame {
    opacity: 0.9;
    transition: opacity 0.6s var(--ease);
}

.fx-live > .fx-frame {
    animation-play-state: running;
}

/* frame-hover: yalnızca üzerine gelince / klavye odağında */
.fx-frame-hover {
    opacity: 0;
    animation-duration: calc(var(--fx-dur, 9s) * 0.42);
    transition: opacity 0.45s var(--ease);
}

.fx-host:focus-within > .fx > .fx-frame-hover {
    opacity: 1;
    animation-play-state: running;
}

@media (hover: hover) and (pointer: fine) {
    .fx-host:hover > .fx > .fx-frame-hover {
        opacity: 1;
        animation-play-state: running;
    }
}

/* Sakin seviye: sürekli yay yok, yalnızca üzerine gelince */
.fx-lvl-calm .fx-frame {
    opacity: 0;
    animation-duration: calc(var(--fx-dur, 9s) * 0.42);
}

.fx-lvl-calm .fx-host:focus-within > .fx > .fx-frame {
    opacity: 0.9;
    animation-play-state: running;
}

@media (hover: hover) and (pointer: fine) {
    .fx-lvl-calm .fx-host:hover > .fx > .fx-frame {
        opacity: 0.9;
        animation-play-state: running;
    }
}

@keyframes fx-spin {
    to {
        --fx-a: 360deg;
    }
}

/* ---- corners: hover/odakta beliren ince teknik köşe işaretleri ---- */
.fx-corners {
    inset: -7px;
    border-radius: 0;
}

.fx-clip > .fx > .fx-corners {
    inset: 9px;
}

.fx-corners i {
    position: absolute;
    width: 11px;
    height: 11px;
    border: 0 solid var(--fx-color, var(--brand));
    opacity: 0;
    transition: opacity 0.3s var(--ease), transform 0.5s var(--ease);
}

.fx-corners i:nth-child(1) { top: 0; left: 0; border-width: 1.5px 0 0 1.5px; transform: translate(-6px, -6px); }
.fx-corners i:nth-child(2) { top: 0; right: 0; border-width: 1.5px 1.5px 0 0; transform: translate(6px, -6px); }
.fx-corners i:nth-child(3) { right: 0; bottom: 0; border-width: 0 1.5px 1.5px 0; transform: translate(6px, 6px); }
.fx-corners i:nth-child(4) { bottom: 0; left: 0; border-width: 0 0 1.5px 1.5px; transform: translate(-6px, 6px); }

.fx-corners i:nth-child(2) { transition-delay: 0.04s; }
.fx-corners i:nth-child(3) { transition-delay: 0.08s; }
.fx-corners i:nth-child(4) { transition-delay: 0.12s; }

.fx-host:focus-within > .fx > .fx-corners i {
    opacity: 1;
    transform: none;
}

@media (hover: hover) and (pointer: fine) {
    .fx-host:hover > .fx > .fx-corners i {
        opacity: 1;
        transform: none;
    }
}

/* ---- sheen: üzerine gelince kartın üstünden geçen yumuşak ışık ---- */
.fx-sheen {
    overflow: hidden;
}

.fx-sheen i {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 60%;
    background: linear-gradient(105deg, transparent 15%, var(--fx-sheen, color-mix(in srgb, var(--brand) 9%, transparent)) 50%, transparent 85%);
    transform: translateX(-110%);
}

@media (hover: hover) and (pointer: fine) {
    .fx-host:hover > .fx > .fx-sheen i {
        transform: translateX(175%);
        transition: transform 1.1s var(--ease-io);
    }
}

/* ---- glow: yavaş nefes alan turuncu kenar parıltısı ---- */
.fx-glow {
    /* Net çizgi atımı (bulanık hale yok) */
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--fx-color, var(--brand)) 55%, transparent);
    opacity: 0.3;
    animation: fx-breathe 5.2s ease-in-out var(--fx-glow-delay, 0s) infinite paused;
}

.fx-live > .fx-glow {
    animation-play-state: running;
}

.fx-lvl-calm .fx-glow {
    animation: none;
    opacity: 0.55;
}

@keyframes fx-breathe {
    50% {
        opacity: 0.9;
    }
}

/* ---- draw: görünür alana girince bir kez çizilen kenarlık ---- */
.fx-draw {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.fx-draw rect {
    stroke: var(--fx-color, var(--brand));
    stroke-width: 1.25;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    vector-effect: non-scaling-stroke;
    transition: stroke-dashoffset 1.7s var(--ease-io), stroke 1s ease 1.5s;
}

.fx-drawn > .fx-draw rect {
    stroke: var(--fx-draw-rest, color-mix(in srgb, var(--brand) 14%, var(--line-2)));
    stroke-dashoffset: 0;
}

/* Kapalı / azaltılmış hareket: sürekli dekor yok, çizgi hazır, köşeler hareketsiz */
.fx-lvl-off .fx-frame,
.fx-lvl-off .fx-frame-hover,
.fx-lvl-off .fx-sheen,
.fx-lvl-off .fx-glow {
    display: none;
}

.fx-lvl-off .fx-corners i,
.fx-lvl-off .fx-draw rect {
    transition: none;
}

/* ==========================================================================
   data-net — bölüm arka planı tuvalleri
   ========================================================================== */

.fx-net-host {
    isolation: isolate;
}

.fx-net {
    position: absolute;
    inset: 0;
    z-index: -1;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.4s ease;
    -webkit-mask-image: radial-gradient(ellipse 78% 72% at 50% 50%, #000 35%, transparent 100%);
    mask-image: radial-gradient(ellipse 78% 72% at 50% 50%, #000 35%, transparent 100%);
}

.fx-net.is-on {
    opacity: 1;
}

/* ==========================================================================
   Düğmeler: içinden geçen ışık (birincil düğmenin kendi ışığı zaten var)
   ========================================================================== */

.btn--light {
    --btn-pass: rgb(255 255 255 / 0.22);
}

@media (hover: hover) and (pointer: fine) {
    .btn--ghost::after,
    .btn--light::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: linear-gradient(105deg, transparent 40%, var(--btn-pass, color-mix(in srgb, var(--brand) 13%, transparent)) 50%, transparent 60%) 115% 0 / 260% 100% no-repeat;
        pointer-events: none;
    }

    .btn--ghost:hover::after,
    .btn--light:hover::after {
        background-position: -15% 0;
        transition: background-position 0.95s var(--ease-io);
    }
}

/* Metin bağlantılarının alt çizgisi: ucunda turuncuya dönen ince çizgi */
.u-draw::after {
    background: linear-gradient(90deg, currentColor 0 62%, var(--brand));
}

/* ==========================================================================
   Üst menü: kaydırınca alt kenarda ara sıra geçen ince ışık
   ========================================================================== */

.nav__glint {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 22%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgb(20 20 20 / 0.32), color-mix(in srgb, var(--brand) 70%, transparent), transparent);
    opacity: 0;
    animation: fx-glint 11s var(--ease-io) 1.2s infinite paused;
}

.nav.is-scrolled .nav__glint {
    animation-play-state: running;
}

@keyframes fx-glint {
    0% {
        opacity: 0;
        transform: translateX(0);
    }
    8%,
    32% {
        opacity: 1;
    }
    42%,
    100% {
        opacity: 0;
        transform: translateX(355%);
    }
}

/* ==========================================================================
   İç sayfa başlığı
   ========================================================================== */

/* Başlık: alttan hafifçe yükselerek belirir (net, maskesiz) */
.page-head__title.anim-in {
    animation: fx-title 0.9s var(--ease) 0.05s both;
}

@keyframes fx-title {
    from {
        opacity: 0;
        transform: translate3d(0, 0.14em, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* ==========================================================================
   Çağrı bandı
   ========================================================================== */

.cta-band__box.fx-host {
    --fx-color: #fff;
    --fx-tip: #fff;
    --fx-sheen: rgb(255 255 255 / 0.14);
}

/* ==========================================================================
   Kartvizit (eğim ve parıltı korunur; çerçeve ışığı ve köşe işaretleri eklenir)
   ========================================================================== */

.bizcard.fx-host {
    --fx-tip: color-mix(in srgb, var(--brand) 55%, #fff3e6);
}

/* ==========================================================================
   KVKK: sakin; verinin yolculuğunda ara sıra ilerleyen tek nokta, açılan ayrıntılarda yumuşak giriş
   ========================================================================== */

@media (min-width: 720px) {
    .journey__step:not(:last-child)::before {
        content: "";
        position: absolute;
        top: 24px;
        left: calc(50% + 40px);
        width: calc(100% - 80px + 1.75rem);
        height: 7px;
        background: radial-gradient(circle, var(--brand) 0 2.2px, color-mix(in srgb, var(--brand) 25%, transparent) 2.4px 3.2px, transparent 3.6px) 0 50% / 7px 7px no-repeat;
        opacity: 0;
        pointer-events: none;
        animation: fx-journey 7s var(--ease-io) 1s infinite paused;
    }

    .journey__step:nth-child(2)::before {
        animation-delay: 3.4s;
    }

    .journey.fx-live .journey__step::before {
        animation-play-state: running;
    }

    .fx-lvl-calm .journey__step::before,
    .fx-lvl-off .journey__step::before {
        display: none;
    }
}

@keyframes fx-journey {
    0% {
        opacity: 0;
        background-position: 0 50%;
    }
    5%,
    40% {
        opacity: 1;
    }
    45%,
    100% {
        opacity: 0;
        background-position: 100% 50%;
    }
}

.details__item[open] .details__body,
.faq__item[open]:not(.is-closing) .faq__a-inner {
    animation: fx-open 0.5s var(--ease) both;
}

@keyframes fx-open {
    from {
        opacity: 0;
        transform: translate3d(0, -6px, 0);
    }
}

/* ==========================================================================
   "Kopyalandı" bildirimi: onay işareti çizilerek gelir
   ========================================================================== */

.toast.is-visible .icon path {
    stroke-dasharray: 24;
    animation: fx-check 0.5s var(--ease) 0.12s both;
}

@keyframes fx-check {
    from {
        stroke-dashoffset: 24;
    }
    to {
        stroke-dashoffset: 0;
    }
}

/* ==========================================================================
   Üst menü: giriş, kayan vurgu hapı, logo parıltısı, cam efekti, CTA ışık taraması, sıralı mobil açılış
   ========================================================================== */

/* Giriş (oturumda bir kez): kapsül yukarıdan iner, bağlantılar sırayla belirir */
.fx-lvl-full.fx-nav-in .nav__bar {
    animation: fx-nav-drop 0.9s var(--ease) both;
}

.fx-lvl-full.fx-nav-in .nav__list > li {
    animation: fx-nav-item 0.6s var(--ease) both;
    animation-delay: calc(0.35s + var(--ni, 0) * 0.07s);
}

@keyframes fx-nav-drop {
    from {
        opacity: 0;
        transform: translate3d(0, -22px, 0);
    }
}

@keyframes fx-nav-item {
    from {
        opacity: 0;
        transform: translate3d(0, -6px, 0);
    }
}

.nav__list > li:nth-child(1) { --ni: 0; }
.nav__list > li:nth-child(2) { --ni: 1; }
.nav__list > li:nth-child(3) { --ni: 2; }
.nav__list > li:nth-child(4) { --ni: 3; }
.nav__list > li:nth-child(5) { --ni: 4; }
.nav__list > li:nth-child(6) { --ni: 5; }

/* Logoya ince parıltı geçişi: açılışta bir kez, sonra üzerine gelince */
.nav .logo {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}

.nav .logo::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 40%;
    background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--brand) 26%, transparent), transparent);
    opacity: 0;
    transform: translateX(-120%) skewX(-18deg);
    pointer-events: none;
}

.fx-lvl-full .nav .logo::after {
    animation: fx-logo-glint 1.6s var(--ease-io) 1s 1 both;
}

@media (hover: hover) and (pointer: fine) {
    .nav .logo:hover::after {
        animation: fx-logo-glint 1.1s var(--ease-io) 1 both;
    }
}

@keyframes fx-logo-glint {
    0% {
        opacity: 0;
        transform: translateX(-120%) skewX(-18deg);
    }
    20%,
    70% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateX(340%) skewX(-18deg);
    }
}

/* Kaydırınca: opak beyaz zemin, belirgin ince çizgi */
.nav__bar {
    transition: box-shadow 0.3s, background-color 0.3s, border-color 0.3s;
}

.nav.is-scrolled .nav__bar {
    border-color: color-mix(in srgb, var(--brand) 14%, rgb(20 20 20 / 0.06));
    background: #fff;
}

@media (min-width: 900px) {
    .nav .logo {
        transition: height 0.35s var(--ease);
    }

    .nav.is-scrolled .logo {
        height: 48px;
    }
}

/* Kayan vurgu hapı (motion.js ekler; aktif sayfada durur, üzerine gelinen bağlantıya kayar) */
.nav__pill {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: var(--pw, 0);
    height: var(--ph, 0);
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand) 12%, #fff);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 22%, transparent);
    opacity: 0;
    transform: translate3d(var(--px, 0), var(--py, 0), 0);
    transition: transform 0.45s var(--ease), width 0.45s var(--ease), height 0.45s var(--ease), opacity 0.3s;
    pointer-events: none;
}

.nav__pill.is-on {
    opacity: 1;
}

/* CTA düğmesinde ışık taraması: üzerine gelince ve arada bir */
.nav__link--cta {
    position: relative;
    overflow: hidden;
}

.nav__link--cta::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 45%;
    background: linear-gradient(100deg, transparent, rgb(255 255 255 / 0.28), transparent);
    opacity: 0;
    transform: translateX(-130%) skewX(-18deg);
    pointer-events: none;
}

.fx-lvl-full .nav__link--cta::after {
    animation: fx-cta-sweep 9s var(--ease-io) 3s infinite;
}

.nav__link--cta:hover::after {
    animation: fx-cta-sweep 0.9s var(--ease-io) 1;
}

@keyframes fx-cta-sweep {
    0% {
        opacity: 0;
        transform: translateX(-130%) skewX(-18deg);
    }
    4% {
        opacity: 1;
    }
    12%,
    100% {
        opacity: 0;
        transform: translateX(330%) skewX(-18deg);
    }
}

/* Mobil menü açılışı: bağlantılar sırayla belirir */
@media (max-width: 899px) {
    .fx-lvl-full .nav.is-open .nav__list > li {
        animation: fx-nav-item 0.5s var(--ease) both;
        animation-delay: calc(0.12s + var(--ni, 0) * 0.06s);
    }
}

/* ==========================================================================
   ALEV SİSTEMİ (v8) — sitenin her etkileşimli öğesinde aynı dil
   Kullanım: öğeye data-fx="flame" (ya da .fx-flame sınıfı) ekle; motion.js içine <span class="flame" aria-hidden> koyar
   (7 alev dili + 2 kıvılcım; fitil + alçak alev yatağı CSS'te). Alev, öğenin ALT kenarından yükselir.
   Ayar (öğe üzerinde): --flame-color (varsayılan --brand), --flame-tip (uç rengi, varsayılan #ffd36b),
   --flame-h (yükseklik, varsayılan 12px), --flame-inset (yan boşluk, varsayılan 0.85rem), --flame-bottom (alt boşluk, 1px), --flame-k (genişlik çarpanı).
   Tetik: ince imleçte :hover · klavyede :focus-visible (ve içinde odak: :has(:focus-visible)) · [aria-expanded|selected|pressed="true"] ·
   .is-lit sınıfı (JS; dokunmatikte dokununca ~1.1 sn tek seferlik) · data-flame="on" (sürekli).
   Hareket kapalı/azaltılmış: yalnız statik ince turuncu alt çizgi (fitil). JS yoksa .fx-flame için ince alt çizgi (::after).
   ========================================================================== */

.fx-flame {
    position: relative;
}

.flame {
    --_c: var(--flame-color, var(--brand));
    --_t: var(--flame-tip, #ffd36b);
    position: absolute;
    right: var(--flame-inset, 0.85rem);
    bottom: var(--flame-bottom, 1px);
    left: var(--flame-inset, 0.85rem);
    z-index: 2;
    display: block;
    height: var(--flame-h, 12px);
    pointer-events: none;
    opacity: 0;
    transform: scaleX(0.15);
    transform-origin: 50% 100%;
    transition: opacity 0.3s, transform 0.6s var(--ease);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
}

/* Yeni eklenen alev: kapalı konumdan başlayıp açılması için bir kare bekletilir */
.flame.flame--init {
    opacity: 0 !important;
    transform: scaleX(0.15) !important;
    transition: none !important;
}

/* Fitil: ince, net sıcak çizgi */
.flame::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--_c), color-mix(in srgb, var(--_c) 45%, var(--_t)) 30%, color-mix(in srgb, var(--_c) 80%, var(--_t)) 50%, color-mix(in srgb, var(--_c) 45%, var(--_t)) 70%, var(--_c)) 0 0 / 200% 100%;
    animation: flame-wick 2.2s linear infinite paused;
}

/* Alçak, sürekli alev yatağı */
.flame::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 28%;
    min-height: 3px;
    background: linear-gradient(to top, var(--_c), color-mix(in srgb, color-mix(in srgb, var(--_c) 60%, var(--_t)) 70%, transparent) 55%, transparent);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 4' preserveAspectRatio='none'%3E%3Cpath d='M0 4V2.4C1.5 1.2 2.5 1.2 3 2.2C3.6 0.9 5 0.8 6 2C7 1 8.4 1.2 9 2.2C9.6 1.2 11 1.2 12 2.4V4Z'/%3E%3C/svg%3E") 0 100% / 12px 100% repeat-x;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 4' preserveAspectRatio='none'%3E%3Cpath d='M0 4V2.4C1.5 1.2 2.5 1.2 3 2.2C3.6 0.9 5 0.8 6 2C7 1 8.4 1.2 9 2.2C9.6 1.2 11 1.2 12 2.4V4Z'/%3E%3C/svg%3E") 0 100% / 12px 100% repeat-x;
    animation: flame-bed 0.7s linear infinite paused;
}

/* Yalayan alev dilleri (yükseklik --flame-h'ın yüzdesi) */
.flame i {
    position: absolute;
    bottom: 0;
    left: var(--x);
    width: calc(var(--w) * var(--flame-k, 1));
    height: var(--h);
    margin-left: calc(var(--w) * var(--flame-k, 1) / -2);
    background: linear-gradient(to top, color-mix(in srgb, var(--_c) 92%, #c01800) 0%, color-mix(in srgb, var(--_c) 85%, var(--_t)) 35%, color-mix(in srgb, var(--_c) 55%, var(--_t)) 65%, color-mix(in srgb, color-mix(in srgb, var(--_c) 30%, var(--_t)) 35%, transparent) 100%);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16' preserveAspectRatio='none'%3E%3Cpath d='M5.4 0C5.6 4.4 9.6 7.4 9.6 11.6A4.8 4.4 0 0 1 0.4 11.6C0.4 9 2.4 7.6 3.2 5.2C4.2 6.8 5 5 5.4 0Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16' preserveAspectRatio='none'%3E%3Cpath d='M5.4 0C5.6 4.4 9.6 7.4 9.6 11.6A4.8 4.4 0 0 1 0.4 11.6C0.4 9 2.4 7.6 3.2 5.2C4.2 6.8 5 5 5.4 0Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
    opacity: 0;
    transform-origin: 50% 100%;
    animation: flame-lick var(--d) cubic-bezier(0.4, 0, 0.6, 1) var(--dl) infinite paused;
}

.flame i:nth-child(1) { --x: 12%; --w: 4px; --h: 58%; --d: 1.05s; --dl: -0.2s; }
.flame i:nth-child(2) { --x: 24%; --w: 5px; --h: 75%; --d: 1.25s; --dl: -0.7s; }
.flame i:nth-child(3) { --x: 37%; --w: 5.5px; --h: 83%; --d: 0.9s; --dl: -0.35s; }
.flame i:nth-child(4) { --x: 50%; --w: 6px; --h: 92%; --d: 1.1s; --dl: -0.85s; }
.flame i:nth-child(5) { --x: 63%; --w: 5.5px; --h: 83%; --d: 0.95s; --dl: -0.1s; }
.flame i:nth-child(6) { --x: 76%; --w: 5px; --h: 75%; --d: 1.3s; --dl: -0.6s; }
.flame i:nth-child(7) { --x: 88%; --w: 4px; --h: 58%; --d: 1.15s; --dl: -0.95s; }

/* Kıvılcımlar */
.flame b {
    position: absolute;
    bottom: 25%;
    left: var(--x);
    width: 1.5px;
    height: 1.5px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--_c) 75%, var(--_t));
    opacity: 0;
    animation: flame-ember var(--d) ease-out var(--dl) infinite paused;
}

.flame b:nth-of-type(1) { --x: 42%; --d: 1.9s; --dl: -0.3s; }
.flame b:nth-of-type(2) { --x: 70%; --d: 2.4s; --dl: -1.4s; }

@keyframes flame-bed {
    to {
        -webkit-mask-position: 12px 100%;
        mask-position: 12px 100%;
    }
}

@keyframes flame-lick {
    0% { opacity: 0; transform: scale(0.7, 0.2); }
    18% { opacity: 1; transform: scale(1, 0.8) skewX(-8deg); }
    45% { opacity: 1; transform: scale(0.9, 1.05) skewX(7deg); }
    72% { opacity: 0.7; transform: translateY(-1px) scale(0.7, 0.9) skewX(-6deg); }
    100% { opacity: 0; transform: translateY(-3px) scale(0.4, 0.55) skewX(4deg); }
}

@keyframes flame-ember {
    0% { opacity: 0; transform: translate(0, 0); }
    20% { opacity: 0.9; }
    100% { opacity: 0; transform: translate(2px, -11px); }
}

@keyframes flame-wick {
    to {
        background-position: -200% 0;
    }
}

/* Yanma durumu: klavye odağı, açık/seçili, .is-lit, sürekli */
:is([data-fx~="flame"], .fx-flame):is(:focus-visible, .is-lit, [aria-expanded="true"], [aria-selected="true"], [aria-pressed="true"], [data-flame="on"], :has(:focus-visible)) > .flame {
    opacity: 1;
    transform: none;
}

:is([data-fx~="flame"], .fx-flame):is(:focus-visible, .is-lit, [aria-expanded="true"], [aria-selected="true"], [aria-pressed="true"], [data-flame="on"], :has(:focus-visible)) > .flame :is(i, b),
:is([data-fx~="flame"], .fx-flame):is(:focus-visible, .is-lit, [aria-expanded="true"], [aria-selected="true"], [aria-pressed="true"], [data-flame="on"], :has(:focus-visible)) > .flame::before,
:is([data-fx~="flame"], .fx-flame):is(:focus-visible, .is-lit, [aria-expanded="true"], [aria-selected="true"], [aria-pressed="true"], [data-flame="on"], :has(:focus-visible)) > .flame::after {
    animation-play-state: running;
}

@media (hover: hover) and (pointer: fine) {
    :is([data-fx~="flame"], .fx-flame):hover > .flame {
        opacity: 1;
        transform: none;
    }

    :is([data-fx~="flame"], .fx-flame):hover > .flame :is(i, b),
    :is([data-fx~="flame"], .fx-flame):hover > .flame::before,
    :is([data-fx~="flame"], .fx-flame):hover > .flame::after {
        animation-play-state: running;
    }
}

/* Seçili/açık sekmede alev yanık kalır ama nazik: kıvılcım yok */
:is([data-fx~="flame"], .fx-flame):is([aria-selected="true"], [aria-pressed="true"]) > .flame b {
    display: none;
}

/* Bileşen varyantları */
.btn {
    --flame-inset: 14%;
    --flame-bottom: 0px;
}

.btn--primary,
.btn--primary.btn--lg {
    --flame-color: #ffd36b;
    --flame-tip: #fff3c4;
}

.btn--sm {
    --flame-h: 9px;
}

.field {
    --flame-inset: 0.9rem;
}

/* JS yoksa: ince alt çizgi (yalnız .fx-flame) */
html:not(.fx-js) .fx-flame::after {
    content: "";
    position: absolute;
    right: var(--flame-inset, 0.85rem);
    bottom: 0;
    left: var(--flame-inset, 0.85rem);
    height: 2px;
    background: var(--flame-color, var(--brand));
    transform: scaleX(0);
    transform-origin: 50% 50%;
    transition: transform 0.4s var(--ease);
    pointer-events: none;
}

html:not(.fx-js) .fx-flame:is(:hover, :focus-visible)::after {
    transform: none;
}

/* Hareket kapalı / azaltılmış: yalnız statik ince turuncu çizgi (alev dilleri ve yatak yok) */
.fx-lvl-off .flame i,
.fx-lvl-off .flame b,
.fx-lvl-off .flame::after {
    display: none;
}

.fx-lvl-off .flame {
    height: 2px;
    transition: opacity 0.2s;
    transform: none;
}

.fx-lvl-off .flame::before {
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    .flame i,
    .flame b,
    .flame::after {
        display: none;
    }

    .flame {
        height: 2px;
        transform: none;
    }

    .flame::before {
        animation: none;
    }
}

/* ==========================================================================
   Hareket kapalı / azaltılmış
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .btn--ghost::after,
    .btn--light::after,
    .nav__glint {
        display: none;
    }

    .page-head__title.anim-in {
        animation: none;
    }
}

/* Yönetimden "kapalı" seçildiğinde main.css'teki azaltılmış hareket kuralları burada da uygulanır */
html[data-motion="off"] {
    scroll-behavior: auto;
}

html[data-motion="off"] *,
html[data-motion="off"] *::before,
html[data-motion="off"] *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
}

html[data-motion="off"] .marquee__track {
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
}

html[data-motion="off"] .marquee__group + .marquee__group {
    display: none;
}

html[data-motion="off"] .reveal-ready [data-reveal]:not(.is-in) {
    opacity: 1;
    transform: none;
}

html[data-motion="off"] .btn--ghost::after,
html[data-motion="off"] .btn--light::after,
html[data-motion="off"] .nav__glint {
    display: none;
}

html[data-motion="off"] .page-head__title.anim-in {
    animation: none;
}

@media print {
    .fx,
    .fx-net {
        display: none !important;
    }
}