*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    background:#ffffff;
    color:#222;
}

.container{
    width:90%;
    max-width:1400px;
    margin:auto;
}

a{
    text-decoration:none;
}

img{
    width:100%;
    display:block;
}

.section{
    padding:80px 0;
}

.section h2{
    font-size:38px;
    font-weight:700;
    color:#0c1b33;
    text-align:center;
    margin-bottom:50px;
}
.vipButton{

background:#d4af37;

padding:14px 26px;

border-radius:10px;

font-weight:600;

color:#fff;

transition:.3s;

}

.vipButton:hover{

background:#b99320;

color:#fff;

}

.floatingButton{

position:fixed !important;

left:50%;

bottom:25px;

transform:translateX(-50%);

z-index:99999;

}

.floatingButton:hover{

transform:translateX(-50%) translateY(-3px);

}

.contact-box{
    max-width:700px;
    margin:0 auto;
    background:#fff;
    padding:40px;
    border-radius:15px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    text-align:center;
}

.contact-box h3{
    font-size:34px;
    color:#0b2343;
    margin-bottom:10px;
}

.contact-box p{
    font-size:18px;
    line-height:32px;
    color:#444;
}
/*---------------------------------
HOTELS
---------------------------------*/

.hotel-subtitle{

text-align:center;
font-size:18px;
color:#666;
margin-bottom:40px;

}

.hotel-tabs{

display:flex;
justify-content:center;
flex-wrap:wrap;
gap:15px;
margin-bottom:50px;

}

.tab-btn{

background:#fff;
border:2px solid #0b2343;
color:#0b2343;

padding:14px 35px;

font-size:17px;
font-weight:600;

border-radius:10px;

cursor:pointer;

transition:.30s;

}

.tab-btn:hover{

background:#0b2343;
color:#fff;

}

.tab-btn.active{

background:#0b2343;
color:#fff;

}

.hotel-list{

display:none;

}

.hotel-list.active{

display:block;

}
.hotel-card{

display:flex;
align-items:center;

gap:30px;

background:#fff;

border-radius:15px;

padding:20px;

margin-bottom:30px;

transform:translateY(-8px);

box-shadow:0 20px 45px rgba(0,0,0,.18);

transition:.35s;

}

.hotel-card:hover{

transform:translateY(-6px);

box-shadow:0 15px 35px rgba(0,0,0,.15);

}

.hotel-image{

width:340px;

flex-shrink:0;

}

.hotel-image img{

width:100%;

height:230px;

object-fit:cover;

border-radius:12px;

}

.hotel-info{

flex:1;

}

.hotel-info h3{

font-size:28px;

color:#0b2343;

margin-bottom:12px;

line-height:42px;

}

.hotel-location{

display:inline-block;

margin-bottom:15px;

font-weight:600;

color:#777;

}

.hotel-description{

line-height:30px;

color:#555;

font-size:17px;

}

.hotel-price{

width:220px;

text-align:center;

}

.hotel-price small{

display:block;

color:#777;

margin-bottom:10px;

}

.hotel-price h2{

font-size:48px;

font-weight:800;

color:#0b2343;

}

.hotel-price span{

display:block;

margin-bottom:20px;

font-weight:600;

}

.hotelButton{

display:block;

background:#0b2343;

color:#fff;

padding:15px;

border-radius:10px;

font-weight:600;

transition:.3s;

}

.hotelButton:hover{

background:#D4AF37;

color:#fff;

}

/*---------------------------------
POPULAR HOTELS
---------------------------------*/

.hotelSlider{

padding-bottom:50px;

}

.hotelSlider .swiper-slide{

background:#fff;

border-radius:15px;

overflow:hidden;

box-shadow:0 10px 25px rgba(0,0,0,.08);

transition:.35s;

}

.hotelSlider .swiper-slide:hover{

transform:translateY(-8px);

}

.hotelSlider img{

width:100%;

height:250px;

object-fit:cover;

}

.hotelSlider h3{

padding:20px 20px 8px;

font-size:24px;

color:#0b2343;

}

.hotelSlider span{

display:block;

padding:0 20px 20px;

color:#777;

font-weight:500;

}

.hotelSlider a{

text-decoration:none;

}

/*---------------------------------
WHY TRANSFEREX
---------------------------------*/

.whyTransferEx{

background:#f8f9fb;

}

.whyTransferEx h2{

text-align:center;

font-size:42px;

margin-bottom:15px;

color:#0b2343;

}

.whyTransferEx h2 span{

color:#D4AF37;

}

.whySubtitle{

text-align:center;

font-size:18px;

color:#666;

max-width:800px;

margin:0 auto 60px;

}

.whyGrid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

}

.whyCard{

background:#fff;

padding:40px 30px;

border-radius:18px;

text-align:center;

box-shadow:0 10px 30px rgba(0,0,0,.08);

transition:.35s;

}

.whyCard:hover{

transform:translateY(-8px);

box-shadow:0 20px 45px rgba(0,0,0,.15);

}

.whyIcon{

font-size:55px;

margin-bottom:20px;

}

.whyCard h3{

color:#0b2343;

font-size:24px;

margin-bottom:15px;

}

.whyCard p{

color:#666;

line-height:28px;

}

@media(max-width:992px){

.whyGrid{

grid-template-columns:1fr;

}

}

.text-center{
    text-align:center;
}

.text-center .hotelButton{

    display:inline-block;

    width:auto;

    padding:15px 40px;

}
/* ================================
   ANA SAYFA BANNER
================================ */

.hero {
    width: 92%;
    max-width: 1600px;
    margin: 25px auto 0;
    overflow: hidden;
    border-radius: 18px;
    
    /* 2048 x 768 oranı */
    aspect-ratio: 2048 / 768;
}

.heroSlider {
    width: 100%;
    height: 100%;
}

.heroSlider .swiper-slide {
    width: 100%;
    height: 100%;
}

.heroSlider .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}


/* ================================
   TABLET
================================ */

@media (max-width: 992px) {

    .hero {
        width: 94%;
        margin-top: 20px;
        border-radius: 14px;
    }

}


/* ================================
   MOBİL
================================ */

@media (max-width: 768px) {

    .hero {
        width: 94%;
        margin-top: 15px;
        border-radius: 12px;
    }

}


/* ================================
   KÜÇÜK TELEFON
================================ */

@media (max-width: 480px) {

    .hero {
        width: 94%;
        border-radius: 10px;
    }

}