.ifk-wa-panel,
.ifk-ml-bant {
--ifk-turuncu: #fa9928;
--ifk-turuncu-koyu: #e8891c;
--ifk-lacivert: #131d33;
box-sizing: border-box;
}
.ifk-wa-panel *,
.ifk-ml-bant * {
box-sizing: border-box;
}
.ifk-ikon {
flex: 0 0 auto;
vertical-align: middle;
} .ifk-uyari {
padding: 12px 16px;
background: #fff4e5;
border-left: 4px solid var(--ifk-turuncu, #fa9928);
color: #7a4a00;
} .ifk-alan {
margin-bottom: 16px;
text-align: left;
}
.ifk-girdi {
position: relative;
display: block;
}
.ifk-girdi .ifk-ikon {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
pointer-events: none;
}
.ifk-girdi input {
width: 100%; font-size: 16px;
line-height: 1.4;
border-radius: 12px;
padding: 14px 16px 14px 44px;
margin: 0;
transition: border-color .25s ease, background-color .25s ease, box-shadow .25s ease;
}
.ifk-girdi input:focus {
outline: 0;
}
.ifk-durum {
min-height: 20px;
margin: 0 0 10px;
font-size: 14px;
line-height: 1.5;
}
.ifk-durum.ifk-basarili {
color: #16a34a;
} .ifk-tuzak {
position: absolute !important;
left: -9999px !important;
top: -9999px !important;
width: 1px;
height: 1px;
overflow: hidden;
} .ifk-wa-buton,
.ifk-ml-buton {
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
width: 100%;
border: 0;
cursor: pointer;
font-weight: 700;
color: #fff;
transition: background-color .25s ease, filter .25s ease;
}
.ifk-wa-buton[disabled],
.ifk-ml-buton[disabled] {
opacity: .7;
cursor: default;
}
.ifk-doner {
animation: ifk-don 1s linear infinite;
}
@keyframes ifk-don {
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: reduce) {
.ifk-doner {
animation: none;
}
} .ifk-wa-panel {
background-color: var(--ifk-lacivert);
border-radius: 20px;
padding: 40px 20px;
margin: 30px 0;
}
.ifk-wa-kart {
background-color: #fff;
max-width: 520px;
margin: 0 auto;
border-radius: 20px;
padding: 32px 30px;
text-align: center;
box-shadow: 0 18px 45px rgba(0, 0, 0, .22);
}
.ifk-wa-rozet {
width: 56px;
height: 56px;
margin: 0 auto 16px;
border-radius: 16px;
background-color: var(--ifk-turuncu);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
}
.ifk-wa-rozet .ifk-ikon {
width: 26px;
height: 26px;
}
.ifk-wa-baslik {
font-size: 24px;
font-weight: 600;
color: #1a1a1a;
line-height: 1.3;
margin: 0 0 6px;
}
.ifk-wa-altbaslik {
font-size: 15px;
color: #8a8a8a;
margin: 0 0 22px;
}
.ifk-wa-kart .ifk-alan label {
display: block;
font-size: 11px;
font-weight: 600;
color: #9a9a9a;
text-transform: uppercase;
letter-spacing: .5px;
margin-bottom: 7px;
}
.ifk-wa-kart .ifk-girdi .ifk-ikon {
color: var(--ifk-lacivert);
}
.ifk-wa-kart .ifk-girdi input {
background-color: #f1f3f5;
border: 1px solid transparent;
color: #1a1a1a;
}
.ifk-wa-kart .ifk-girdi input:focus {
background-color: #fff;
border-color: var(--ifk-turuncu);
box-shadow: 0 0 0 3px rgba(250, 153, 40, .22);
}
.ifk-wa-kart .ifk-durum {
color: #e03131;
text-align: left;
}
.ifk-wa-kart .ifk-gecersiz {
border-color: #e03131 !important;
background-color: #fff !important;
}
.ifk-wa-buton {
border-radius: 14px;
padding: 15px;
font-size: 16px;
background-color: var(--ifk-turuncu);
}
.ifk-wa-buton:hover,
.ifk-wa-buton:focus {
background-color: var(--ifk-turuncu-koyu);
color: #fff;
}
.ifk-wa-guvence {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
margin: 14px 0 0;
font-size: 13px;
color: #9a9a9a;
}
.ifk-wa-guvence .ifk-ikon {
width: 15px;
height: 15px;
color: #28a745;
}
@media (max-width: 600px) {
.ifk-wa-panel {
border-radius: 14px;
padding: 28px 14px;
}
.ifk-wa-kart {
padding: 26px 18px;
border-radius: 16px;
}
.ifk-wa-baslik {
font-size: 21px;
}
} .ifk-ml-bant {
background: linear-gradient(135deg, #16224a 0%, #1e3060 100%);
border-radius: 18px;
padding: 44px 32px;
margin: 30px 0;
}
.ifk-ml-ic {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 36px;
max-width: 1100px;
margin: 0 auto;
}
.ifk-ml-sol,
.ifk-ml-sag {
flex: 1 1 320px;
min-width: 0;
}
.ifk-ml-rozet {
display: inline-flex;
align-items: center;
gap: 7px;
background-color: rgba(250, 153, 40, .14);
border: 1px solid rgba(250, 153, 40, .45);
border-radius: 999px;
padding: 7px 15px;
color: var(--ifk-turuncu);
font-size: 11px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 18px;
}
.ifk-ml-rozet .ifk-ikon {
width: 14px;
height: 14px;
}
.ifk-ml-baslik {
color: #fff;
font-size: 34px;
font-weight: 700;
line-height: 1.2;
margin: 0 0 14px;
}
.ifk-ml-aciklama {
color: #b9c2d6;
font-size: 16px;
line-height: 1.7;
margin: 0 0 20px;
}
.ifk-ml-maddeler {
display: flex;
flex-wrap: wrap;
gap: 10px 24px;
margin: 0;
padding: 0;
list-style: none;
}
.ifk-ml-maddeler li {
display: flex;
align-items: center;
gap: 7px;
color: #cbd5e6;
font-size: 14px;
line-height: 1.4;
margin: 0;
}
.ifk-ml-maddeler .ifk-ikon {
width: 16px;
height: 16px;
color: #22c55e;
}
.ifk-ml-sag .ifk-girdi .ifk-ikon {
color: var(--ifk-turuncu);
}
.ifk-ml-sag .ifk-girdi input {
background-color: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16);
color: #fff;
border-radius: 10px;
}
.ifk-ml-sag .ifk-girdi input::placeholder {
color: #9aa8c4;
opacity: 1;
}
.ifk-ml-sag .ifk-girdi input:focus {
background-color: rgba(255, 255, 255, .1);
border-color: var(--ifk-turuncu);
box-shadow: 0 0 0 3px rgba(250, 153, 40, .2);
}
.ifk-ml-sag .ifk-gecersiz {
border-color: #ff6b6b !important;
background-color: rgba(255, 107, 107, .1) !important;
}
.ifk-ml-buton {
border-radius: 10px;
padding: 15px;
font-size: 16px;
background: linear-gradient(135deg, #f2762a 0%, #e2611c 100%);
box-shadow: 0 10px 26px rgba(226, 97, 28, .32);
}
.ifk-ml-buton:hover,
.ifk-ml-buton:focus {
filter: brightness(1.07);
color: #fff;
}
.ifk-ml-sag .ifk-durum {
margin: 12px 0 0;
color: #ff8a8a;
}
.ifk-ml-sag .ifk-durum.ifk-basarili {
color: #4ade80;
}
@media (max-width: 782px) {
.ifk-ml-bant {
padding: 32px 18px;
border-radius: 14px;
}
.ifk-ml-ic {
gap: 26px;
}
.ifk-ml-baslik {
font-size: 26px;
}
.ifk-ml-aciklama {
font-size: 15px;
}
}