:root {
--neu-yuzey: #eef0f5;
--neu-golge: rgba(150, 158, 180, .55);
--neu-isik: #ffffff;
--neu-yazi: #2b2b33;
}
.contact-input,
.orders-input,
.arama {
width: 100%;
box-sizing: border-box;
font-family: var(--font-ui);
font-size: 15px;
color: var(--neu-yazi);
background-color: transparent;
background-image: linear-gradient(180deg, rgba(20, 20, 25, .105), rgba(20, 20, 25, .035));
border: none;
border-radius: 999px;
padding: 13px 20px;
outline: none;
box-shadow:
inset 0 2px 3px rgba(20, 20, 30, .2),
inset 0 -1px 0 rgba(255, 255, 255, .62),
0 1px 0 rgba(255, 255, 255, .78);
transition: box-shadow .25s ease, color .2s ease;
-webkit-appearance: none;
appearance: none;
}
.contact-input::placeholder,
.orders-input::placeholder,
.arama::placeholder {
color: #9aa0b0;
}
.contact-input:focus,
.orders-input:focus,
.arama:focus {
box-shadow:
inset 0 3px 5px rgba(20, 20, 30, .28),
inset 0 -1px 0 rgba(255, 255, 255, .7),
0 1px 0 rgba(255, 255, 255, .8);
}
.contact-input:focus-visible,
.orders-input:focus-visible,
.arama:focus-visible {
box-shadow:
inset 0 3px 5px rgba(20, 20, 30, .28),
inset 0 -1px 0 rgba(255, 255, 255, .7),
0 0 0 3px rgba(99, 102, 241, .35);
}
.contact-textarea {
min-height: 130px;
resize: vertical;
line-height: 1.55;
border-radius: 22px;
padding: 15px 20px;
}
.orders-kod-input {
text-align: center;
letter-spacing: .28em;
font-family: var(--font-mono);
font-weight: 700;
text-transform: uppercase;
}
.neu-btn,
.contact-submit {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: var(--font-ui);
font-size: 14.5px;
font-weight: 700;
color: #26262e;
background: var(--neu-yuzey);
border: none;
border-radius: 999px;
padding: 13px 26px;
cursor: pointer;
box-shadow:
5px 5px 10px var(--neu-golge),
-5px -5px 10px var(--neu-isik);
transition: box-shadow .2s ease, color .2s ease;
}
.neu-btn:hover,
.contact-submit:hover,
.contact-submit:focus-visible { color: #000; background: var(--neu-yuzey); translate: none; }
.neu-btn:active,
.contact-submit:active {
box-shadow:
inset 5px 5px 10px var(--neu-golge),
inset -5px -5px 10px var(--neu-isik);
}
.neu-btn:disabled,
.contact-submit:disabled {
cursor: default;
opacity: 1;
color: #9aa0b0;
box-shadow:
inset 3px 3px 7px var(--neu-golge),
inset -3px -3px 7px var(--neu-isik);
}
@media (prefers-reduced-motion: reduce) {
.contact-input, .orders-input, .arama, .neu-btn, .contact-submit { transition-duration: .01ms; }
}
:root[data-tema="koyu"] {
--neu-yuzey: #1c1c20;
--neu-golge: rgba(0, 0, 0, .55);
--neu-isik: rgba(255, 255, 255, .07);
--neu-yazi: #f0f0f2;
}
:root[data-tema="koyu"] .contact-input,
:root[data-tema="koyu"] .orders-input,
:root[data-tema="koyu"] .arama {
background-image: linear-gradient(180deg, rgba(0, 0, 0, .46), rgba(0, 0, 0, .22));
box-shadow:
inset 0 2px 3px rgba(0, 0, 0, .75),
inset 0 -1px 0 rgba(255, 255, 255, .075),
0 1px 0 rgba(255, 255, 255, .07);
}
:root[data-tema="koyu"] .contact-input:focus,
:root[data-tema="koyu"] .orders-input:focus,
:root[data-tema="koyu"] .arama:focus {
box-shadow:
inset 0 3px 5px rgba(0, 0, 0, .85),
inset 0 -1px 0 rgba(255, 255, 255, .1),
0 1px 0 rgba(255, 255, 255, .09);
}
:root[data-tema="koyu"] .contact-input:focus-visible,
:root[data-tema="koyu"] .orders-input:focus-visible,
:root[data-tema="koyu"] .arama:focus-visible {
box-shadow:
inset 0 3px 5px rgba(0, 0, 0, .85),
inset 0 -1px 0 rgba(255, 255, 255, .1),
0 0 0 3px rgba(99, 102, 241, .45);
}
:root[data-tema="koyu"] .contact-input::placeholder,
:root[data-tema="koyu"] .orders-input::placeholder,
:root[data-tema="koyu"] .arama::placeholder {
color: #6b6b75;
}
:root[data-tema="koyu"] .neu-btn,
:root[data-tema="koyu"] .contact-submit { color: #d4d4d8; background: var(--neu-yuzey); }
:root[data-tema="koyu"] .neu-btn:hover,
:root[data-tema="koyu"] .contact-submit:hover,
:root[data-tema="koyu"] .contact-submit:focus-visible { color: #fff; background: var(--neu-yuzey); }
:root[data-tema="koyu"] .neu-btn:disabled,
:root[data-tema="koyu"] .contact-submit:disabled { color: #52525b; }