/* FerdiSoft & FerdiGiden Proje Teklif Platformu · animasyonlar ve bileşenler (koyu tema)
 * Kodlama: Ferdi Giden | Yazılım Web: www.ferdisoft.com.tr */
:root { --tk-mor: #6366f1; --tk-pembe: #d946ef; --tk-mavi: #38bdf8; --tk-yesil: #10b981; --tk-cam: rgba(15, 18, 38, .62); }
html { scroll-behavior: smooth; }

/* Arka plan küreleri */
.tk-kure { position: absolute; border-radius: 9999px; filter: blur(110px); opacity: .55; animation: tk-yuz 18s ease-in-out infinite alternate; }
.tk-kure-1 { width: 34rem; height: 34rem; left: -12rem; top: -10rem; background: #4f46e5; }
.tk-kure-2 { width: 28rem; height: 28rem; right: -10rem; top: 6rem; background: #c026d3; opacity: .35; animation-delay: -6s; }
.tk-kure-3 { width: 24rem; height: 24rem; left: 35%; bottom: -12rem; background: #0ea5e9; opacity: .3; animation-delay: -12s; }
@keyframes tk-yuz { to { transform: translate3d(3rem, 2rem, 0) scale(1.12); } }

/* Başlık ışıltısı */
.tk-parilti { background: linear-gradient(90deg, #a5b4fc, #f0abfc, #7dd3fc, #a5b4fc); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: tk-kay 8s linear infinite; }
@keyframes tk-kay { to { background-position: 300% 0; } }

/* Kaynak site rozeti */
.tk-rozet { display: inline-flex; align-items: center; gap: .55rem; padding: .5rem 1rem; border-radius: 9999px; font-size: 12px; font-weight: 800; letter-spacing: .08em; color: #c7d2fe;
    background: rgba(99, 102, 241, .12); border: 1px solid rgba(129, 140, 248, .35); box-shadow: 0 0 24px rgba(99, 102, 241, .25); }
.tk-rozet-fs { color: #fed7aa; background: rgba(234, 88, 12, .12); border-color: rgba(251, 146, 60, .4); box-shadow: 0 0 24px rgba(234, 88, 12, .25); }
.tk-rozet-nokta { width: .5rem; height: .5rem; border-radius: 9999px; background: currentColor; box-shadow: 0 0 0 0 currentColor; animation: tk-nabiz 2s infinite; }
@keyframes tk-nabiz { 70% { box-shadow: 0 0 0 .5rem transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* Cam kart */
.tk-cam { position: relative; border-radius: 1.75rem; background: var(--tk-cam); border: 1px solid rgba(255, 255, 255, .08);
    backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .05); }

/* Adım göstergesi */
.tk-adimlar { display: flex; justify-content: center; gap: .5rem; flex-wrap: wrap; }
.tk-adim-isaret { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .9rem .45rem .45rem; border-radius: 9999px; font-size: 13px; font-weight: 700; color: #64748b;
    border: 1px solid rgba(255, 255, 255, .06); background: rgba(255, 255, 255, .02); transition: all .35s ease; }
.tk-adim-no { display: inline-flex; width: 1.6rem; height: 1.6rem; align-items: center; justify-content: center; border-radius: 9999px; background: rgba(255, 255, 255, .06); font-size: 12px; transition: all .35s ease; }
.tk-adim-isaret.is-aktif { color: #fff; border-color: rgba(129, 140, 248, .5); box-shadow: 0 0 22px rgba(99, 102, 241, .35); }
.tk-adim-isaret.is-aktif .tk-adim-no, .tk-adim-isaret.is-tamam .tk-adim-no { background: linear-gradient(135deg, var(--tk-mor), var(--tk-pembe)); color: #fff; }
.tk-adim-isaret.is-tamam { color: #a5b4fc; }

/* Adımlar: JavaScript varken yalnız etkin adım görünür */
.tk-adim { border: 0; margin: 0; padding: 0; min-width: 0; }
.tk-adim + .tk-adim { margin-top: 2.5rem; }
.js .tk-adim + .tk-adim { margin-top: 0; }
.js .tk-adim:not(.is-aktif) { display: none; }
.js .tk-adim.is-aktif { animation: tk-gir .45s cubic-bezier(.2, .8, .2, 1); }
@keyframes tk-gir { from { opacity: 0; transform: translateY(14px); } }
.tk-adim-baslik { font-size: 1.35rem; font-weight: 900; color: #fff; letter-spacing: -.01em; }
.tk-adim-baslik span { margin-right: .5rem; background: linear-gradient(135deg, #a5b4fc, #f0abfc); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tk-adim-alt { margin-top: .35rem; font-size: 14px; color: #64748b; }
.tk-hata { margin-top: 1rem; font-size: 14px; font-weight: 600; color: #fda4af; min-height: 1px; }
.tk-tuzak { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Hizmet kartları: gradient kenar, neon glow, 3B eğim */
.tk-kart { --tk-r: 99, 102, 241; --rx: 0deg; --ry: 0deg; position: relative; display: block; cursor: pointer; border-radius: 1.25rem; padding: 1px; perspective: 800px;
    background: linear-gradient(140deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03)); transition: transform .25s ease, box-shadow .35s ease; }
.tk-kart::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; opacity: 0; transition: opacity .35s ease;
    background: linear-gradient(120deg, rgb(var(--tk-r)), #d946ef, #38bdf8, rgb(var(--tk-r))); background-size: 300% 300%; animation: tk-kay2 6s linear infinite;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
@keyframes tk-kay2 { to { background-position: 300% 0; } }
.tk-kart-ic { position: relative; display: block; height: 100%; border-radius: calc(1.25rem - 1px); padding: 1.35rem; background: rgba(10, 12, 28, .92);
    transform: rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d; transition: transform .2s ease, background .35s ease; }
.tk-kart-ikon { display: inline-flex; width: 3rem; height: 3rem; align-items: center; justify-content: center; border-radius: .9rem; font-size: 1.25rem; color: rgb(var(--tk-r));
    background: rgba(var(--tk-r), .12); border: 1px solid rgba(var(--tk-r), .3); transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease; transform: translateZ(0); }
.tk-kart-tik { position: absolute; top: 1rem; right: 1rem; display: inline-flex; width: 1.6rem; height: 1.6rem; align-items: center; justify-content: center; border-radius: 9999px;
    font-size: 11px; color: #fff; background: rgb(var(--tk-r)); transform: scale(0); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.tk-kart:hover, .tk-kart:focus-within { box-shadow: 0 0 34px -6px rgba(var(--tk-r), .55); }
.tk-kart:hover::before, .tk-kart:focus-within::before, .tk-kart:has(input:checked)::before { opacity: 1; }
.tk-kart:hover .tk-kart-ikon { transform: translateZ(30px) scale(1.15) rotate(-6deg); box-shadow: 0 0 22px rgba(var(--tk-r), .55); }
.tk-kart:has(input:checked) { box-shadow: 0 0 40px -4px rgba(var(--tk-r), .6); }
.tk-kart:has(input:checked) .tk-kart-ic { background: rgba(var(--tk-r), .1); }
.tk-kart:has(input:checked) .tk-kart-tik { transform: scale(1); }
.tk-kart:has(input:focus-visible) { outline: 2px solid rgb(var(--tk-r)); outline-offset: 3px; }
.tk-renk-indigo { --tk-r: 129, 140, 248; } .tk-renk-emerald { --tk-r: 52, 211, 153; } .tk-renk-sky { --tk-r: 56, 189, 248; }
.tk-renk-fuchsia { --tk-r: 232, 121, 249; } .tk-renk-amber { --tk-r: 251, 191, 36; } .tk-renk-rose { --tk-r: 251, 113, 133; }

/* Bütçe */
.tk-butce-deger { font-size: clamp(1.8rem, 1.2rem + 2.5vw, 2.8rem); font-weight: 900; color: #fff; text-shadow: 0 0 30px rgba(129, 140, 248, .55); transition: transform .25s ease; }
.tk-butce-deger.is-zipla { animation: tk-zipla .35s ease; }
@keyframes tk-zipla { 50% { transform: scale(1.08); } }
.tk-kaydirici { --dolu: 50%; width: 100%; height: .5rem; border-radius: 9999px; appearance: none; -webkit-appearance: none; cursor: pointer; outline: none;
    background: linear-gradient(90deg, var(--tk-mor), var(--tk-pembe) var(--dolu), rgba(255, 255, 255, .08) var(--dolu)); }
.tk-kaydirici::-webkit-slider-thumb { -webkit-appearance: none; width: 1.6rem; height: 1.6rem; border-radius: 9999px; background: #fff; border: 4px solid var(--tk-pembe); box-shadow: 0 0 0 6px rgba(217, 70, 239, .2), 0 0 24px rgba(217, 70, 239, .7); transition: transform .2s ease; }
.tk-kaydirici::-moz-range-thumb { width: 1.25rem; height: 1.25rem; border-radius: 9999px; background: #fff; border: 4px solid var(--tk-pembe); box-shadow: 0 0 24px rgba(217, 70, 239, .7); }
.tk-kaydirici:active::-webkit-slider-thumb { transform: scale(1.2); }
.tk-kaydirici:focus-visible { box-shadow: 0 0 0 3px rgba(129, 140, 248, .5); }
.tk-butce-dugme span { display: inline-block; cursor: pointer; padding: .55rem 1rem; border-radius: 9999px; font-size: 13px; font-weight: 700; color: #94a3b8;
    border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .03); transition: all .25s ease; }
.tk-butce-dugme:hover span { color: #fff; border-color: rgba(129, 140, 248, .45); transform: translateY(-2px); }
.tk-butce-dugme input:checked + span { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--tk-mor), var(--tk-pembe)); box-shadow: 0 0 22px rgba(217, 70, 239, .45); }
.tk-butce-dugme input:focus-visible + span { outline: 2px solid #a5b4fc; outline-offset: 2px; }

/* Yüzen etiketli alanlar */
.tk-alan { position: relative; }
.tk-alan input, .tk-alan textarea { width: 100%; border-radius: 1rem; padding: 1.45rem 2.75rem .55rem 1rem; font-size: 15px; color: #fff; background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .09); outline: none; transition: border-color .25s ease, box-shadow .25s ease, background .25s ease; resize: vertical; }
.tk-alan label { position: absolute; left: 1rem; top: 1.05rem; font-size: 15px; color: #64748b; pointer-events: none; transform-origin: left top; transition: all .2s ease; }
.tk-alan > i { position: absolute; right: 1rem; top: 1.15rem; color: #475569; transition: color .25s ease; }
.tk-alan input:hover, .tk-alan textarea:hover { border-color: rgba(129, 140, 248, .35); }
.tk-alan input:focus, .tk-alan textarea:focus { border-color: rgba(129, 140, 248, .8); background: rgba(99, 102, 241, .07); box-shadow: 0 0 0 4px rgba(99, 102, 241, .15), 0 0 26px rgba(99, 102, 241, .25); }
.tk-alan input:focus ~ i, .tk-alan textarea:focus ~ i { color: #a5b4fc; }
.tk-alan input:focus + label, .tk-alan input:not(:placeholder-shown) + label,
.tk-alan textarea:focus + label, .tk-alan textarea:not(:placeholder-shown) + label { top: .5rem; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: #a5b4fc; }
.tk-alan.is-hatali input, .tk-alan.is-hatali textarea { border-color: rgba(251, 113, 133, .7); box-shadow: 0 0 0 4px rgba(244, 63, 94, .12); animation: tk-salla .35s ease; }
@keyframes tk-salla { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.tk-sayac { position: absolute; right: 1rem; bottom: .65rem; font-size: 11px; color: #475569; }
.tk-yukle { display: flex; flex-direction: column; align-items: center; gap: .35rem; cursor: pointer; padding: 1.5rem; border-radius: 1rem; text-align: center;
    border: 1.5px dashed rgba(129, 140, 248, .35); background: rgba(99, 102, 241, .04); transition: all .25s ease; }
.tk-yukle:hover, .tk-yukle.is-surukle { border-color: rgba(129, 140, 248, .8); background: rgba(99, 102, 241, .1); box-shadow: 0 0 26px rgba(99, 102, 241, .25); }
.tk-yukle:focus-within { outline: 2px solid #a5b4fc; outline-offset: 2px; }

/* Özet */
.tk-ozet { border-radius: 1rem; padding: 1rem 1.1rem; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .06); }
.tk-ozet dt { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #64748b; }
.tk-ozet dd { margin-top: .35rem; font-size: 14px; font-weight: 600; color: #e2e8f0; word-break: break-word; }

/* Düğmeler: ripple, nabız, yükleniyor */
.tk-dugme, .tk-dugme-ikincil { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: .85rem 1.5rem;
    border-radius: .9rem; font-size: 15px; font-weight: 800; transition: transform .2s ease, box-shadow .3s ease, opacity .2s ease; }
.tk-dugme { color: #fff; background: linear-gradient(135deg, var(--tk-mor), var(--tk-pembe)); box-shadow: 0 10px 30px -10px rgba(217, 70, 239, .7); }
.tk-dugme:hover { transform: translateY(-2px); box-shadow: 0 14px 40px -10px rgba(217, 70, 239, .9); }
.tk-dugme:active { transform: translateY(0) scale(.98); }
.tk-dugme:focus-visible, .tk-dugme-ikincil:focus-visible { outline: 2px solid #c7d2fe; outline-offset: 3px; }
.tk-dugme-ikincil { color: #cbd5e1; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); }
.tk-dugme-ikincil:hover { color: #fff; border-color: rgba(129, 140, 248, .45); }
.tk-dugme[hidden], .tk-dugme-ikincil[hidden] { display: none; }
.tk-dalga { position: absolute; border-radius: 9999px; background: rgba(255, 255, 255, .45); transform: scale(0); animation: tk-dalga .6s ease-out forwards; pointer-events: none; }
@keyframes tk-dalga { to { transform: scale(4); opacity: 0; } }
.js .tk-gonder:not(.is-hazir) { display: none; }
.js [data-tk-ileri]:not(.is-hazir) { display: none; }
html:not(.js) [data-tk-ileri], html:not(.js) [data-tk-geri], html:not(.js) [data-tk-adim-yazi] { display: none; }
.tk-gonder.is-hazir { animation: tk-parla 2.4s ease-in-out infinite; }
@keyframes tk-parla { 50% { box-shadow: 0 0 0 6px rgba(217, 70, 239, .15), 0 14px 44px -8px rgba(217, 70, 239, .95); } }
.tk-donen { display: none; width: 1.2rem; height: 1.2rem; border-radius: 9999px; border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: tk-don .7s linear infinite; }
@keyframes tk-don { to { transform: rotate(360deg); } }
.tk-gonder.is-gonderiliyor { pointer-events: none; animation: none; opacity: .9; }
.tk-gonder.is-gonderiliyor .tk-gonder-yazi { display: none; }
.tk-gonder.is-gonderiliyor .tk-donen { display: inline-block; }

/* Başarı: çizilen onay işareti + konfeti */
.tk-basari { animation: tk-gir .5s cubic-bezier(.2, .8, .2, 1); }
.tk-tik { width: 5.5rem; height: 5.5rem; filter: drop-shadow(0 0 18px rgba(16, 185, 129, .6)); }
.tk-tik circle { stroke: #10b981; stroke-width: 3; stroke-dasharray: 151; stroke-dashoffset: 151; animation: tk-ciz .6s ease forwards; }
.tk-tik path { stroke: #34d399; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: tk-ciz .4s .5s ease forwards; }
@keyframes tk-ciz { to { stroke-dashoffset: 0; } }
.tk-konfeti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 60; }

@media (prefers-reduced-motion: reduce) {
    .tk-kure, .tk-parilti, .tk-kart::before, .tk-rozet-nokta, .tk-gonder.is-hazir { animation: none; }
    .tk-kart-ic, .tk-kart-ikon, .js .tk-adim.is-aktif, .tk-basari { transition: none; animation: none; }
    html { scroll-behavior: auto; }
}