.butonlar {
margin-top: 46px;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.butonlar-sahne {
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(18px, 2.4vh, 34px);
transform-style: preserve-3d;
transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
transition: transform .25s cubic-bezier(.22, 1, .36, 1);
}
.butonlar-sahne--yatay {
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
.buton {
display: block;
position: relative;
--gen: clamp(258px, 29vw, 380px);
--yuk: clamp(86px, 10.2vh, 118px);
width: var(--gen);
height: var(--yuk);
transform-style: preserve-3d;
cursor: pointer;
text-decoration: none;
padding: 0;
border: none;
background: none;
font: inherit;
color: inherit;
text-align: left;
-webkit-appearance: none;
appearance: none;
}
.buton-govde {
position: absolute;
inset: 0;
transform-style: preserve-3d;
--d: 66px;
transform: rotateX(10deg) rotateY(9deg) scaleZ(.18);
transition: transform .38s cubic-bezier(.22, 1, .36, 1);
}
.buton:hover .buton-govde,
.buton:focus-visible .buton-govde {
transform: rotateX(10deg) rotateY(9deg) scaleZ(1) translateZ(18px);
}
.buton-yuz {
position: absolute;
display: block;
box-sizing: border-box;
backface-visibility: hidden;
}
.buton--turuncu {
--g1: #fb923c; --g2: #f97316; --g3: #fdba74; --g4: #ea580c;
--ust: #fdba74; --sol: #f97316; --sag: #9a3412;
--isik: rgba(251, 146, 60, .55);
}
.buton--mavi {
--g1: #60a5fa; --g2: #2563eb; --g3: #93c5fd; --g4: #1d4ed8;
--ust: #93c5fd; --sol: #3b82f6; --sag: #1e3a8a;
--isik: rgba(96, 165, 250, .55);
}
.buton--mor {
--g1: #c084fc; --g2: #9333ea; --g3: #d8b4fe; --g4: #7e22ce;
--ust: #d8b4fe; --sol: #a855f7; --sag: #581c87;
--isik: rgba(192, 132, 252, .55);
}
.buton--kirmizi {
--g1: #f87171; --g2: #dc2626; --g3: #fca5a5; --g4: #b91c1c;
--ust: #fca5a5; --sol: #ef4444; --sag: #7f1d1d;
--isik: rgba(248, 113, 113, .55);
}
.buton-yuz--on {
inset: 0;
transform: translateZ(calc(var(--d) / 2));
background-color: #0b0b0d;
background-image: linear-gradient(148deg, #1d1d21 0%, #101012 62%, #050506 100%);
border: 1px solid rgba(255, 255, 255, .14);
border-radius: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 5px;
padding: 0 clamp(16px, 2.2vw, 24px);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
transition: border-color .3s ease, box-shadow .3s ease;
}
.buton-yuz--ust {
left: 0;
right: 0;
top: 50%;
height: var(--d);
margin-top: calc(var(--d) / -2);
transform: rotateX(90deg) translateZ(calc(var(--yuk) / 2));
background: linear-gradient(180deg, #35353c 0%, #1d1d22 100%);
transition: background .35s ease;
}
.buton-yuz--dip {
left: 0;
right: 0;
top: 50%;
height: var(--d);
margin-top: calc(var(--d) / -2);
transform: rotateX(-90deg) translateZ(calc(var(--yuk) / 2));
background: #000;
}
.buton-yuz--sol,
.buton-yuz--sag {
top: 0;
bottom: 0;
left: 50%;
width: var(--d);
margin-left: calc(var(--d) / -2);
transition: background .35s ease;
}
.buton-yuz--sol {
transform: rotateY(-90deg) translateZ(calc(var(--gen) / 2));
background: linear-gradient(180deg, #28282e 0%, #151519 100%);
}
.buton-yuz--sag {
transform: rotateY(90deg) translateZ(calc(var(--gen) / 2));
background: linear-gradient(180deg, #101013 0%, #060607 100%);
}
.buton:hover .buton-yuz--on,
.buton:focus-visible .buton-yuz--on,
.buton[aria-expanded="true"] .buton-yuz--on {
background-image: linear-gradient(115deg,
var(--g1) 0%, var(--g2) 25%, var(--g3) 50%, var(--g4) 75%, var(--g1) 100%);
background-size: 300% 100%;
border-color: var(--isik);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 26px var(--isik);
animation: butonAkis 4.5s linear infinite;
}
@keyframes butonAkis {
from { background-position: 0% 50%; }
to   { background-position: 300% 50%; }
}
.buton:hover .buton-yuz--ust,
.buton:focus-visible .buton-yuz--ust,
.buton[aria-expanded="true"] .buton-yuz--ust {
background: linear-gradient(180deg, var(--ust) 0%, var(--g2) 100%);
}
.buton:hover .buton-yuz--sol,
.buton:focus-visible .buton-yuz--sol,
.buton[aria-expanded="true"] .buton-yuz--sol {
background: linear-gradient(180deg, var(--sol) 0%, var(--g4) 100%);
}
.buton:hover .buton-yuz--sag,
.buton:focus-visible .buton-yuz--sag,
.buton[aria-expanded="true"] .buton-yuz--sag {
background: linear-gradient(180deg, var(--sag) 0%, #10161f 100%);
}
.buton-baslik {
font-family: var(--font-display);
font-size: clamp(16px, 1.62vw, 23px);
font-weight: 800;
line-height: 1.1;
letter-spacing: -.005em;
color: #f6f6f8;
text-shadow: 0 2px 10px rgba(0, 0, 0, .7);
transition: color .3s ease, text-shadow .3s ease;
}
.buton-alt {
font-family: var(--font-ui);
font-size: clamp(11px, 1vw, 13.5px);
line-height: 1.3;
color: rgba(255, 255, 255, .66);
text-shadow: 0 1px 6px rgba(0, 0, 0, .7);
transition: color .3s ease, text-shadow .3s ease;
}
.buton:hover .buton-baslik,
.buton:focus-visible .buton-baslik,
.buton[aria-expanded="true"] .buton-baslik {
color: #fff;
text-shadow: 0 2px 12px rgba(0, 0, 0, .85), 0 0 3px rgba(0, 0, 0, .6);
}
.buton:hover .buton-alt,
.buton:focus-visible .buton-alt,
.buton[aria-expanded="true"] .buton-alt {
color: rgba(255, 255, 255, .95);
text-shadow: 0 1px 9px rgba(0, 0, 0, .85), 0 0 3px rgba(0, 0, 0, .55);
}
@media (hover: none) {
.butonlar-sahne { transform: none; }
.butonlar { perspective: 900px; }
.buton-yuz--ust,
.buton-yuz--dip,
.buton-yuz--sol,
.buton-yuz--sag { display: none; }
.buton-govde,
.buton:hover .buton-govde,
.buton:focus-visible .buton-govde {
transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
transition: transform .14s ease-out;
}
.buton-yuz--on {
transform: none;
border-radius: 0;
}
.buton-yuz--on {
background-image: linear-gradient(115deg,
var(--g1) 0%, var(--g2) 25%, var(--g3) 50%, var(--g4) 75%, var(--g1) 100%);
background-size: 300% 100%;
border-color: var(--isik);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 26px var(--isik);
animation: butonAkis 4.5s linear infinite;
}
.buton-baslik { color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, .85), 0 0 3px rgba(0, 0, 0, .6); }
.buton-alt { color: rgba(255, 255, 255, .95); text-shadow: 0 1px 9px rgba(0, 0, 0, .85), 0 0 3px rgba(0, 0, 0, .55); }
}
@media (max-width: 640px) {
.butonlar-sahne--yatay { width: 100%; align-items: stretch; }
.buton-grup { width: 100%; }
.buton {
--gen: min(calc(100vw - 44px), 460px);
--yuk: clamp(88px, 21vw, 116px);
}
.buton-baslik { font-size: clamp(17px, 4.6vw, 22px); }
.buton-alt { font-size: clamp(11.5px, 3.1vw, 14px); }
}
@media (prefers-reduced-motion: reduce) {
.butonlar-sahne, .buton-govde, .buton-yuz, .buton-baslik, .buton-alt {
transition-duration: .01ms;
}
.buton:hover .buton-yuz--on,
.buton:focus-visible .buton-yuz--on,
.buton[aria-expanded="true"] .buton-yuz--on {
animation: none;
background-size: 100% 100%;
}
.butonlar-sahne { transform: none; }
}