/* ========================================================= BODRUM ADVENTURE WHY EXPLORE BODRUM ========================================================= */ 
.ba-why-section { position: relative; padding: 110px 0; overflow: hidden; 
    background: linear-gradient( 105deg, rgba(3, 15, 28, .97) 0%, rgba(4, 22, 40, .93) 35%, rgba(5, 27, 48, .72) 68%, rgba(4, 18, 33, .76) 100% ), 
    url('/Sistem/bg2.png'); background-size: cover; background-position: center center; background-repeat: no-repeat; background-attachment: fixed; } /* ========================================================= BACKGROUND ATMOSPHERE ========================================================= */ .ba-why-section::before { content: ""; position: absolute; inset: 0; background: radial-gradient( circle at 80% 35%, rgba(46, 150, 215, .13), transparent 35% ), radial-gradient( circle at 12% 75%, rgba(255,255,255,.045), transparent 30% ); pointer-events: none; } /* ========================================================= BOTTOM FADE ========================================================= */ .ba-why-section::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 260px; background: linear-gradient( to bottom, transparent, rgba(2, 11, 21, .72) ); pointer-events: none; } /* ========================================================= WRAPPER ========================================================= */ .ba-why-wrapper { position: relative; z-index: 2; } /* ========================================================= TOP ========================================================= */ .ba-why-top { max-width: 850px; margin-bottom: 55px; } /* ========================================================= EYEBROW ========================================================= */ .ba-why-eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: 17px; font-size: 11px; font-weight: 700; letter-spacing: 3.5px; text-transform: uppercase; color: rgba(255,255,255,.58); } .ba-why-eyebrow::before { content: ""; width: 45px; height: 1px; background: rgba(255,255,255,.55); } /* ========================================================= MAIN TITLE ========================================================= */ .ba-why-top h2 { margin: 0 0 22px; font-size: clamp(43px, 4vw, 66px); line-height: 1.02; font-weight: 600; letter-spacing: -2.5px; color: #ffffff; text-shadow: 0 7px 30px rgba(0,0,0,.26); } /* ========================================================= INTRO TEXT ========================================================= */ .ba-why-top p { max-width: 790px; margin: 0; font-size: 16px; line-height: 1.85; color: rgba(255,255,255,.70); text-shadow: 0 2px 15px rgba(0,0,0,.25); } /* ========================================================= GRID ========================================================= */ .ba-why-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-bottom: 52px; } /* ========================================================= CARD ========================================================= */ .ba-why-card { position: relative; display: flex; align-items: flex-start; gap: 24px; min-height: 185px; padding: 31px; overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 3px; background: linear-gradient( 145deg, rgba(8, 29, 49, .69), rgba(3, 17, 31, .51) ); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 17px 45px rgba(0,0,0,.18); transition: transform .36s ease, border-color .36s ease, background .36s ease, box-shadow .36s ease; } /* ========================================================= CARD HOVER ========================================================= */ .ba-why-card:hover { transform: translateY(-8px); border-color: rgba(255,255,255,.32); background: linear-gradient( 145deg, rgba(16, 49, 75, .78), rgba(4, 24, 42, .66) ); box-shadow: 0 28px 60px rgba(0,0,0,.32), 0 0 45px rgba(42, 155, 220, .11); } /* ========================================================= MOVING LIGHT ========================================================= */ .ba-why-card::before { content: ""; position: absolute; top: 0; left: -90%; width: 48%; height: 100%; transform: skewX(-22deg); background: linear-gradient( 90deg, transparent, rgba(255,255,255,.13), transparent ); transition: left .75s ease; pointer-events: none; } .ba-why-card:hover::before { left: 140%; } /* ========================================================= CARD GLOW ========================================================= */ .ba-why-card::after { content: ""; position: absolute; width: 160px; height: 160px; right: -100px; bottom: -100px; border-radius: 50%; background: rgba(50, 161, 220, .11); filter: blur(15px); transition: .45s ease; pointer-events: none; } .ba-why-card:hover::after { width: 230px; height: 230px; background: rgba(68, 180, 235, .18); } /* ========================================================= ICON ========================================================= */ .ba-why-icon { position: relative; z-index: 2; flex: 0 0 70px; width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.13); background: rgba(255,255,255,.055); transition: transform .35s ease, background .35s ease, border-color .35s ease; } .ba-why-card:hover .ba-why-icon { transform: translateY(-4px) scale(1.05); background: rgba(255,255,255,.11); border-color: rgba(255,255,255,.25); } .ba-why-icon img { width: 38px; height: 38px; object-fit: contain; filter: brightness(0) invert(1); opacity: .94; transition: transform .35s ease; } .ba-why-card:hover .ba-why-icon img { transform: scale(1.09); } /* ========================================================= CARD CONTENT ========================================================= */ .ba-why-card-content { position: relative; z-index: 2; flex: 1; } /* ========================================================= CARD NUMBER ========================================================= */ .ba-why-number { display: block; margin-bottom: 7px; font-size: 9px; font-weight: 700; letter-spacing: 2.5px; color: rgba(255,255,255,.38); } /* ========================================================= CARD TITLE ========================================================= */ .ba-why-card-content h3 { margin: 0 0 12px; font-size: 22px; line-height: 1.2; font-weight: 500; color: #ffffff; transition: transform .3s ease; } .ba-why-card:hover .ba-why-card-content h3 { transform: translateX(3px); } /* ========================================================= CARD TEXT ========================================================= */ .ba-why-card-content p { margin: 0; font-size: 14px; line-height: 1.75; color: rgba(255,255,255,.63); transition: color .3s ease; } .ba-why-card:hover .ba-why-card-content p { color: rgba(255,255,255,.82); } /* ========================================================= BOTTOM CTA ========================================================= */ .ba-why-bottom { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 30px; padding-top: 35px; border-top: 1px solid rgba(255,255,255,.13); } /* ========================================================= BOTTOM TEXT ========================================================= */ .ba-why-bottom-text { display: flex; flex-direction: column; gap: 5px; } .ba-why-bottom-text span { font-size: 10px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255,255,255,.45); } .ba-why-bottom-text strong { font-size: 22px; font-weight: 500; color: #ffffff; } /* ========================================================= CTA BUTTON ========================================================= */ .ba-why-button { position: relative; min-height: 58px; padding: 0 30px; display: inline-flex; align-items: center; justify-content: center; gap: 15px; overflow: hidden; text-decoration: none; background: #ffffff; color: #081522; border: 1px solid #ffffff; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; box-shadow: 0 12px 30px rgba(0,0,0,.22); transition: background .3s ease, color .3s ease, transform .3s ease, border-color .3s ease, box-shadow .3s ease; } .ba-why-button:hover { background: rgba(255,255,255,.08); color: #ffffff; border-color: rgba(255,255,255,.55); transform: translateY(-4px); box-shadow: 0 18px 38px rgba(0,0,0,.30); } .ba-why-button svg { transition: transform .3s ease; } .ba-why-button:hover svg { transform: translateX(6px); } /* ========================================================= TABLET ========================================================= */ @media (max-width: 991px) { .ba-why-section { padding: 85px 0; background-attachment: scroll; background-position: center center; } .ba-why-grid { grid-template-columns: 1fr; } .ba-why-bottom { align-items: flex-start; flex-direction: column; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .ba-why-section { padding: 70px 0; background-position: 63% center; } .ba-why-top { margin-bottom: 38px; } .ba-why-top h2 { font-size: 38px; letter-spacing: -1.5px; } .ba-why-top p { font-size: 14px; line-height: 1.75; } .ba-why-grid { gap: 16px; margin-bottom: 40px; } .ba-why-card { min-height: auto; padding: 25px 22px; gap: 17px; } .ba-why-icon { flex: 0 0 58px; width: 58px; height: 58px; } .ba-why-icon img { width: 31px; height: 31px; } .ba-why-card-content h3 { font-size: 20px; } .ba-why-card-content p { font-size: 13px; } .ba-why-bottom-text strong { font-size: 19px; } .ba-why-button { width: 100%; } } /* ========================================================= SMALL MOBILE ========================================================= */ 
@media (max-width: 480px) { .ba-why-card { flex-direction: column; } .ba-why-top h2 { font-size: 34px; } }