@charset "UTF-8";
/* CSS Document */

/* Genel ayarlar */
*,
*::before,
*::after {
box-sizing: border-box;
}

html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}

body {
margin: 0;
font-family: Arial, sans-serif;
background: #f1f3f5;
color: #222;
line-height: 1.5;
}

/* Üst alan */
.header {
background: #17191d;
color: white;
padding: 24px 15px;
text-align: center;
}

.header h1 {
margin: 0;
font-size: 25px;
line-height: 1.3;
}

.header p {
color: #ccc;
}

/* Ana içerik */
.container {
width: calc(100% - 30px);
max-width: 750px;
margin: 30px auto;
padding: 25px;
background: white;
border-radius: 12px;
box-shadow: 0 4px 18px #00000012;
}

h2 {
margin-top: 0;
color: #20242a;
}

/* Form alanları */
.form-group {
margin-bottom: 17px;
}

label {
display: block;
margin-bottom: 7px;
font-weight: bold;
}

input,
select {
width: 100%;
min-height: 46px;
padding: 13px;
border: 1px solid #d5d8dc;
border-radius: 7px;
font-size: 16px;
background: white;
color: #222;
}

input:focus,
select:focus {
outline: 2px solid #f0a500;
outline-offset: 2px;
border-color: #f0a500;
}

/* Genel butonlar */
button {
width: 100%;
min-height: 48px;
padding: 15px;
border: none;
border-radius: 7px;
background: #f0a500;
color: #17191d;
font-size: 16px;
font-weight: bold;
cursor: pointer;
transition: background .2s ease, opacity .2s ease;
}

button:hover:not(:disabled) {
background: #d99400;
}

button:disabled {
opacity: .5;
cursor: not-allowed;
}

button:focus-visible {
outline: 3px solid #17191d;
outline-offset: 3px;
}

/* Müsait saatler */
.hours {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
width: 100%;
}

.hour {
display: block;
width: 100%;
min-width: 0;
min-height: 44px;
padding: 12px 8px;
background: #e8f5eb;
border: 1px solid #b7dfc0;
border-radius: 7px;
color: #222;
text-align: center;
font-size: 15px;
font-weight: bold;
cursor: pointer;
user-select: none;
transition: background .2s ease, color .2s ease;
}

.hour:hover {
background: #d4edda;
}

.hour:focus-visible {
outline: 3px solid #f0a500;
outline-offset: 3px;
}

.hour.selected {
background: #17191d;
color: white;
border-color: #17191d;
}

.hour.full {
background: #eee;
color: #999;
border-color: #ddd;
cursor: not-allowed;
text-decoration: line-through;
}

/* Bilgilendirme mesajları */
.message {
padding: 13px;
border-radius: 7px;
background: #fff4d8;
margin-bottom: 15px;
}

/* Alt alan */
.footer {
text-align: center;
padding: 20px;
color: #777;
}

/* Mobil uyumluluk */
@media (max-width: 600px) {
.header {
padding: 20px 12px;
}

.header h1 {
font-size: 21px;
}

.container {
width: calc(100% - 24px);
margin: 15px auto;
padding: 18px;
border-radius: 10px;
}

.hours {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}

.hour {
padding: 12px 8px;
}
}

/* Küçük ekranlar */
@media (max-width: 360px) {
.container {
padding: 14px;
}

.header h1 {
font-size: 19px;
}

.hours {
gap: 7px;
}
}

/* Hareket azaltma tercihi */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}

*,
*::before,
*::after {
transition-duration: .01ms !important;
}
}


.whatsapp-button {
display: block;
width: 100%;
padding: 15px;
margin-top: 15px;
border-radius: 9px;
background: #25D366;
color: white;
font-weight: bold;
font-size: 15px;
text-align: center;
text-decoration: none;
}

.whatsapp-button:hover {
background: #1da851;
}