/**
 * ANIMATED BUTTON STYLES
 * tk-button öneki ile özel class isimleri kullanılmıştır
 * Tüm değerler px cinsindendir
 * Proje entegrasyonu için özelleştirildi
 */

/* ============================================
   ANA CONTAINER - Butonun sayfadaki konumu
   Special-form butonu ile aynı konum: bottom: 86px, right: 35px
   ============================================ */
.tk-button-container {
    /* Sağ alt köşede sabitlenmiş - scroll-to-top butonunun üstünde */
    position: fixed;
    right: 35px;
    bottom: 86px; /* Scroll to top (46px) + bottom (20px) + gap (20px) = 86px */
    z-index: 11; /* special-form-trigger ile aynı z-index */
    
    /* Flexbox ile merkezleme */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ============================================
   BUTON WRAPPER - Fare hareketi animasyonu için
   ============================================ */
.tk-button-wrapper {
    position: relative;
    cursor: pointer;
    
    /* Geçiş animasyonları için süre */
    transition-duration: 600ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   BUTON İÇ WRAPPER - İç geçişler için
   ============================================ */
.tk-button-inner-wrapper {
    /* Geçiş animasyonları için süre */
    transition-duration: 600ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dosya SVG'si için özel opacity ayarı - stroke'lar her zaman tam opak */
.tk-button-icon-file path,
.tk-button-icon-file g path {
    /* Stroke opacity her zaman 1 - SVG opacity'sinden bağımsız */
    stroke-opacity: 1 !important;
    fill-opacity: 0 !important;
}

/* ============================================
   BUTON İÇ CONTAINER - Yuvarlak buton yapısı
   ============================================ */
.tk-button-inner {
    /* Pointer events'i kapat - sadece wrapper tıklanabilir */
    pointer-events: none;
    position: relative;
    isolation: isolate;
    
    /* Flexbox ile merkezleme - iç öğeleri tam ortaya al */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Kare aspect ratio - buton yuvarlak olacak */
    aspect-ratio: 1 / 1;
    
    /* Buton boyutu - Mobil: 70px (special-form ile aynı) */
    width: 70px;
    height: 70px;
    
    /* Yuvarlak şekil */
    border-radius: 50%;
    overflow: hidden;
    
    /* Renk geçişleri için */
    transition: background-color 350ms;
    
    /* Performans optimizasyonu */
    will-change: transform;
    transform: translateZ(0);
}

/* ============================================
   BUTON YÜZEYİ - Gradient arka plan ve efektler
   ============================================ */
.tk-button-surface {
    position: relative;
    isolation: isolate;
    
    /* Flexbox ile merkezleme - iç öğeleri tam ortaya al */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Tam boyut */
    width: 100%;
    height: 100%;
    
    /* Yuvarlak şekil */
    border-radius: 50%;
    overflow: hidden;
    
    /* Gölge efekti - varsayılan (#fac25a rengine uyumlu) */
    box-shadow: 0 0 100px 0 rgba(250, 194, 90, 0.3);
    
    /* Geçiş animasyonları */
    transition-duration: 600ms;
}

/* Hover durumunda gölge artışı */
.tk-button-wrapper:hover .tk-button-surface {
    box-shadow: 0 0 125px 0 rgba(250, 194, 90, 0.6);
}

/* Gradient arka plan - ::after pseudo element ile */
.tk-button-surface::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    
    /* Yuvarlak şekil */
    border-radius: 50%;
    
    /* Border */
    border: 1px solid #959595;
    
    /* Gradient arka plan - #fac25a ile uyumlu sarı/turuncu tonları */
    background: linear-gradient(135deg, #ffd78c, #fbb33c, #ffb84d);
    
    /* İç gölge */
    box-shadow: inset 0 4px 12.5px 0 rgb(0 0 0 / 9%);
    
    /* Geçiş animasyonu */
    transition-duration: 300ms;
}



/* ============================================
   İKON CONTAINER - SVG'lerin container'ı
   ============================================ */
.tk-button-icon-container {
    position: relative;
    z-index: 10;
    width: 100%;
    height: 100%;
    
    /* İç öğeleri tam ortaya al */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============================================
   SVG İKONLAR - Genel stiller
   ============================================ */
.tk-button-icon {
    /* Merkeze konumlandır */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    
    /* Başlangıç durumu - görünmez ve küçük */
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.75);
    
    /* Fill rengi */
    fill: #2c3339;
}

/* Kalem ikonu - Butonun %45'i kadar */
.tk-button-icon-pen {
    width: 45%;
    height: 45%;
}

/* El ikonu - Butonun %50'si kadar */
.tk-button-icon-hand {
    width: 50%;
    height: 50%;
}

/* Dosya ikonu - Butonun %50'si kadar */
.tk-button-icon-file {
    width: 50%;
    height: 50%;
}

/* ============================================
   SVG PATH ELEMENTLERİ - Animasyon için
   ============================================ */
.tk-button-svg-path {
    /* Transform origin - animasyonlar için */
    transform-origin: center;
}

/* Kalem path - transform origin merkez */
.tk-button-svg-pen {
    transform-origin: center;
}

/* Çizgi path - soldan scale için */
.tk-button-svg-line {
    transform-origin: left;
    transform: scaleX(var(--tk-button-scale-x, 0));
}

/* El path - alttan rotate için */
.tk-button-svg-hand {
    transform-origin: bottom;
}

/* Dosya path'leri - transform origin merkez */
.tk-button-svg-file-bg,
.tk-button-svg-file-main,
.tk-button-svg-file-detail,
.tk-button-svg-file-body,
.tk-button-svg-file-shadow {
    transform-origin: center;
}

/* Dosya grubu - animasyon için */
.tk-button-svg-file-group {
    transform-origin: center;
}

/* ============================================
   RESPONSIVE AYARLAR - 3 Boyut: Mobil, Tablet, Desktop
   Special-form ile uyumlu
   ============================================ */

/* MOBİL - 768px altı */
@media (max-width: 767px) {
    .tk-button-container {
        right: 10px;
        bottom: 70px; /* Scroll to top (42px) + bottom (20px) + gap (8px) = 70px */
    }
    
    .tk-button-inner {
        width: 60px;
        height: 60px;
    }
    
    /* SVG'ler mobilde biraz daha küçük */
    .tk-button-icon-pen {
        width: 40%;
        height: 40%;
    }
    
    .tk-button-icon-hand,
    .tk-button-icon-file {
        width: 45%;
        height: 45%;
    }
}

/* TABLET - 768px - 1023px */
@media (min-width: 768px) and (max-width: 1023px) {
    .tk-button-container {
        right: 25px;
        bottom: 86px;
    }
    
    .tk-button-inner {
        width: 66px;
        height: 66px;
    }
    
    .tk-button-icon-pen {
        width: 45%;
        height: 45%;
    }
    
    .tk-button-icon-hand,
    .tk-button-icon-file {
        width: 50%;
        height: 50%;
    }
}

/* MASAÜSTÜ - 1024px ve üzeri */
@media (min-width: 1024px) {
    .tk-button-container {
        right: 25px;
        bottom: 80px; /* Special-form ile aynı */
    }
    
    .tk-button-inner {
        width: 70px;
        height: 70px;
    }
    
    .tk-button-icon-pen {
        width: 45%;
        height: 45%;
    }
    
    .tk-button-icon-hand,
    .tk-button-icon-file {
        width: 50%;
        height: 50%;
    }
}

/* Dosya SVG'si için özel ayarlar */
.tk-button-icon-file {
    isolation: isolate;
}

/* Dosya path'leri - transform origin merkez ve çerçeve stili */
.tk-button-svg-file-bg,
.tk-button-svg-file-main,
.tk-button-svg-file-detail,
.tk-button-svg-file-body,
.tk-button-svg-file-shadow {
    transform-origin: center;
    /* İç kısımları şeffaf */
    fill: none !important;
    fill-opacity: 0 !important;
    /* Çerçeve/çizgileri renkli - ince çizgi */
    stroke: #2c3339 !important;
    stroke-width: 1.1px !important;
    stroke-opacity: 1 !important;
    /* SVG rendering için */
    vector-effect: non-scaling-stroke;
}
    footer .accord-content { 
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-flow: column;
    grid-template-rows: repeat(13, auto);
    gap: 8px 32px;
}
.grecaptcha-badge {
  display: none;
}