body {
background-color: #f1f3f5;
font-family: 'Segoe UI', Arial, sans-serif;
}
.header {
background: #ffffff;
color: #fff;
padding: 15px 0;
text-align: left;
position: relative;
height: 100px; /* Header yüksekliğini artırarak logonun üstünde daha fazla boşluk sağladım */
}
.faq-container {
max-width: 900px;
margin: 15px auto 0;
padding: 20px;
background: #ffffff;
border-radius: 15px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
position: relative;
}
.faq-logo {
max-height: 70px;
position: absolute;
top: -90px; /* Logoyu başlığın üstüne yerleştirmek için header yüksekliğine göre ayarladım */
left: 20px; /* Sol kenardan başlığın soluna hizalı */
}
.faq-container h1 {
color: #003087;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
margin-top: 0;
text-align: center;
}
.search-bar {
margin-bottom: 20px;
}
.accordion-button {
font-weight: 600;
font-size: 1.8rem;
color: #004390;
background-image: url('images/banner.png');
background-size: auto;
background-position: center;
border: none;
border-radius: 10px !important;
padding: 15px;
transition: all 0.3s ease;
position: relative;
}
.accordion-button::after {
filter: hue-rotate(200deg) brightness(2) sepia(1) saturate(5);
}
.accordion-button:not(.collapsed) {
color: #004390;
background-image: url('images/banner.png');
box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
}
.accordion-button:focus {
box-shadow: none;
}
.accordion-collapse {
transition: height 0.3s ease;
}
.accordion-body {
display: flex;
align-items: center;
justify-content: space-between;
background-color: #f8f9fa;
padding: 20px;
border-radius: 0 0 10px 10px;
color: #333;
font-size: 1.5rem;
}
.accordion-body p {
margin-bottom: 15px;
}
.accordion-body p:last-child {
margin-bottom: 0;
}
.video-icon {
font-size: 2.5rem;
color: #ffc107;
cursor: pointer;
transition: transform 0.3s ease, color 0.3s ease;
}
.video-icon:hover {
color: #ffca2c;
transform: scale(1.2);
}
.video-popup {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.85);
z-index: 1000;
justify-content: center;
align-items: center;
}
.video-popup-content {
position: relative;
background: #ffffff;
border-radius: 10px;
padding: 0;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
display: flex;
justify-content: center;
align-items: center;
}
.video-popup video {
max-width: 90vw;
max-height: 90vh;
object-fit: contain;
border-radius: 8px;
}
.close-popup {
position: absolute;
top: -30px;
right: -30px;
color: #ffc107;
font-size: 2.5rem;
cursor: pointer;
transition: color 0.3s ease;
}
.close-popup:hover {
color: #ffca2c;
}
.accordion-item {
margin-bottom: 15px;
border: none;
border-radius: 10px;
overflow: hidden;
}
.footer {
background: #003087;
color: #fff;
padding: 20px;
text-align: center;
margin-top: 40px;
}
.footer a {
color: #ffc107;
text-decoration: none;
}
.footer a:hover {
color: #ffca2c;
}
#backToTop {
display: none;
position: fixed;
bottom: 20px;
right: 20px;
background: #007bff;
color: #fff;
border: none;
border-radius: 50%;
width: 50px;
height: 50px;
font-size: 1.5rem;
cursor: pointer;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
transition: opacity 0.3s ease;
}
#backToTop:hover {
background: #0056b3;
}