/* ============================================================
   VillaWeb2 — Split Hero + Carousel Theme  v3.0
   Renk Paleti : Derin Lacivert + Teal Vurgu + Beyaz
   Fontlar     : Outfit (sans) + Playfair Display (serif)
   ============================================================ */

/* ?? Variables ??????????????????????????????????????????????? */
:root {
    --bg:            #060e1c;
    --bg-card:       #0c1d33;
    --bg-section:    #081526;
    --bg-alt:        #0e2034;
    --bg-surface:    #10253e;
    --teal:          #00d4b8;
    --teal-dk:       #00b09b;
    --teal-lt:       #5eeee0;
    --teal-glow:     rgba(0,212,184,.14);
    --teal-border:   rgba(0,212,184,.2);
    --text:          #d8eaf8;
    --text-muted:    #7ba0c0;
    --text-dim:      #456580;
    --white:         #ffffff;
    --wa:            #25D366;
    --r-sm:  8px;
    --r-md:  16px;
    --r-lg:  24px;
    --r-xl:  32px;
    --sh-card: 0 12px 52px rgba(0,0,0,.55);
    --sh-teal: 0 6px 28px rgba(0,212,184,.3);
    --tr:    .28s cubic-bezier(.4,0,.2,1);
    --sans:  'Outfit', sans-serif;
    --serif: 'Playfair Display', serif;
    --nav-h: 70px;
}

/* ?? Reset ???????????????????????????????????????????????????? */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--sans);
    background: var(--bg);
    color: var(--text);
    overflow-x: hidden;
    line-height: 1.6;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; padding: 0; }
strong { font-weight: 600; }

/* ?? Progress Bar ????????????????????????????????????????????? */
.w2-progress-bar {
    position: fixed; top: 0; left: 0;
    height: 3px; width: 0;
    background: linear-gradient(90deg, var(--teal), var(--teal-lt));
    z-index: 9999; pointer-events: none;
    transition: width .1s linear;
}

/* ?? WhatsApp Float ??????????????????????????????????????????? */
.w2-wa-float {
    position: fixed; bottom: 28px; right: 28px;
    z-index: 1050;
    width: 58px; height: 58px;
    background: var(--wa); color: #fff; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.65rem;
    box-shadow: 0 4px 24px rgba(37,211,102,.5);
    transition: transform var(--tr), box-shadow var(--tr);
}
.w2-wa-float:hover { transform: scale(1.12); box-shadow: 0 8px 32px rgba(37,211,102,.65); color: #fff; }
.w2-wa-pulse {
    position: absolute; inset: -5px; border-radius: 50%;
    border: 2px solid rgba(37,211,102,.4);
    animation: waPulse 2.2s ease-in-out infinite;
}
@keyframes waPulse { 0%,100%{transform:scale(1);opacity:.7} 60%{transform:scale(1.28);opacity:0} }

/* ?? Navbar ??????????????????????????????????????????????????? */
.w2-navbar {
    position: fixed; top: 0; left: 0; right: 0;
    height: var(--nav-h); z-index: 1000; padding: 0;
    background: transparent;
    transition: background var(--tr), box-shadow var(--tr), height var(--tr);
}
.w2-navbar.w2-navbar--scrolled {
    background: rgba(6,14,28,.97);
    backdrop-filter: blur(14px);
    box-shadow: 0 4px 32px rgba(0,0,0,.5);
    height: 60px;
}
.w2-brand {
    display: flex; align-items: center; gap: 10px;
    font-family: var(--serif); font-size: 1.18rem; font-weight: 700;
    color: var(--white) !important; letter-spacing: .02em;
}
.w2-brand-icon {
    width: 36px; height: 36px;
    background: var(--teal-glow); border: 1.5px solid var(--teal-border);
    border-radius: var(--r-sm);
    display: flex; align-items: center; justify-content: center;
    color: var(--teal); font-size: .95rem; transition: var(--tr);
}
.w2-brand:hover .w2-brand-icon { background: var(--teal); color: var(--bg); }
.w2-nav-link {
    font-size: .8rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
    color: rgba(216,234,248,.72) !important;
    padding: 6px 13px !important; border-radius: var(--r-sm);
    transition: color var(--tr), background var(--tr) !important;
}
.w2-nav-link:hover { color: var(--teal) !important; background: var(--teal-glow); }
.w2-toggler {
    border: 1.5px solid var(--teal-border) !important;
    border-radius: var(--r-sm) !important;
    padding: 7px 9px; background: transparent !important;
    display: flex; flex-direction: column; gap: 5px; cursor: pointer;
}
.w2-toggler span { display: block; width: 22px; height: 2px; background: var(--teal); border-radius: 2px; transition: var(--tr); }
.w2-nav-phone {
    display: flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 500;
    color: var(--text) !important; border: 1px solid var(--teal-border);
    border-radius: var(--r-sm); padding: 7px 14px; transition: var(--tr);
}
.w2-nav-phone:hover { background: var(--teal-glow); border-color: var(--teal); color: var(--teal) !important; }
.w2-nav-phone i { color: var(--teal); }
.w2-btn-wa {
    background: var(--wa) !important; color: #fff !important;
    border: none !important; border-radius: var(--r-sm) !important;
    font-size: .8rem !important; font-weight: 600 !important;
    padding: 8px 18px !important; transition: var(--tr) !important;
}
.w2-btn-wa:hover { filter: brightness(1.12); transform: translateY(-1px); box-shadow: 0 4px 18px rgba(37,211,102,.45); }
@media (max-width:991px) {
    .navbar-collapse {
        background: rgba(6,14,28,.98); border: 1px solid var(--teal-border);
        border-radius: var(--r-md); padding: 16px; margin-top: 8px;
    }
}

/* ?? Global Buttons ??????????????????????????????????????????? */
.w2-btn-primary {
    display: inline-flex; align-items: center;
    background: var(--teal); color: var(--bg) !important;
    font-size: .88rem; font-weight: 700; letter-spacing: .04em;
    padding: 13px 28px; border-radius: var(--r-sm);
    transition: var(--tr); border: none; cursor: pointer;
    box-shadow: var(--sh-teal);
}
.w2-btn-primary:hover { background: var(--teal-lt); transform: translateY(-2px); box-shadow: 0 10px 36px rgba(0,212,184,.45); }
.w2-btn-ghost {
    display: inline-flex; align-items: center;
    background: rgba(255,255,255,.07); color: var(--white) !important;
    border: 1.5px solid rgba(255,255,255,.25);
    font-size: .88rem; font-weight: 600;
    padding: 13px 28px; border-radius: var(--r-sm); transition: var(--tr); cursor: pointer;
}
.w2-btn-ghost:hover { border-color: var(--teal); color: var(--teal) !important; background: var(--teal-glow); transform: translateY(-2px); }
.w2-btn-outline {
    display: inline-flex; align-items: center;
    background: transparent; color: var(--teal) !important;
    border: 1.5px solid var(--teal-border);
    font-size: .88rem; font-weight: 600;
    padding: 13px 28px; border-radius: var(--r-sm); transition: var(--tr); cursor: pointer;
}
.w2-btn-outline:hover { background: var(--teal-glow); border-color: var(--teal); transform: translateY(-2px); }

/* ?? Utilities ???????????????????????????????????????????????? */
.w2-eyebrow {
    display: inline-block; font-size: .73rem; font-weight: 700;
    letter-spacing: .18em; text-transform: uppercase; color: var(--teal);
}
.w2-heading {
    font-family: var(--serif); font-size: clamp(1.9rem, 3.8vw, 3rem);
    font-weight: 700; color: var(--white); line-height: 1.15;
}
.w2-heading em  { color: var(--teal); font-style: italic; }
.w2-body-text   { font-size: .97rem; font-weight: 300; line-height: 1.8; color: var(--text-muted); }
.w2-divider     { width: 44px; height: 3px; background: linear-gradient(90deg,var(--teal),var(--teal-lt)); border-radius: 3px; margin: 14px 0 22px; }
.w2-teal-text   { color: var(--teal) !important; }
.w2--fade       { opacity: 0; transform: translateY(22px); transition: opacity .5s ease, transform .5s ease; }
.w2--visible    { opacity: 1; transform: none; }
.w2-pulse-dot   { width: 8px; height: 8px; background: var(--teal); border-radius: 50%; animation: pDot 1.8s ease-in-out infinite; }
@keyframes pDot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.2;transform:scale(.55)} }

/* ????????????????????????????????????????????????????????????
   HERO — Sol içerik + Sağ slider
???????????????????????????????????????????????????????????? */
.w2-hero {
    min-height: 100svh; display: flex; align-items: center;
    background: var(--bg); position: relative;
    overflow: hidden; padding-top: var(--nav-h);
}

/* Noktalı doku arka plan */
.w2-hero-dots-bg {
    position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(rgba(0,212,184,.08) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: radial-gradient(ellipse 80% 80% at 80% 50%, black 30%, transparent 80%);
}

/* Sol köşeden gelen ışık */
.w2-hero::before {
    content: '';
    position: absolute; top: -200px; left: -200px;
    width: 700px; height: 700px;
    background: radial-gradient(circle, rgba(0,212,184,.07) 0%, transparent 65%);
    pointer-events: none;
}

.w2-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    min-height: calc(100svh - var(--nav-h));
    align-items: center;
}

/* ?? Sol: Metin ?? */
.w2-hero-content {
    padding: 60px 0 60px;
    display: flex; flex-direction: column; justify-content: center;
    max-width: 560px;
}
.w2-hero-tag {
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--teal-glow); border: 1px solid var(--teal-border);
    border-radius: 100px; padding: 7px 18px;
    font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--teal); margin-bottom: 28px; width: fit-content;
}
.w2-hero-title {
    display: flex; flex-direction: column; gap: 2px;
    margin-bottom: 24px;
}
.w2-hero-title-top {
    font-family: var(--sans); font-size: clamp(.9rem, 1.5vw, 1rem);
    font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
    color: var(--text-muted);
}
.w2-hero-title-main {
    font-family: var(--serif); font-size: clamp(2.8rem, 5.5vw, 4.5rem);
    font-weight: 700; color: var(--white); line-height: 1.05;
}
.w2-hero-title-main em { color: var(--teal); font-style: italic; }
.w2-hero-title-brand {
    font-family: var(--serif); font-size: clamp(1.3rem, 2vw, 1.8rem);
    font-weight: 600; color: var(--text-muted);
    font-style: italic;
}
.w2-hero-sub {
    font-size: clamp(.9rem, 1.3vw, 1.05rem); font-weight: 300;
    line-height: 1.78; color: rgba(216,234,248,.72);
    max-width: 480px; margin-bottom: 28px;
}

/* Mini stats bar */
.w2-hero-mini-stats {
    display: flex; align-items: center; gap: 0;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--r-sm);
    width: fit-content;
    margin-bottom: 32px;
    overflow: hidden;
}
.w2-hms-item {
    display: flex; flex-direction: column; align-items: center;
    padding: 12px 22px; gap: 2px;
}
.w2-hms-item strong { font-size: 1.1rem; font-weight: 700; color: var(--teal); line-height: 1; }
.w2-hms-item span   { font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); }
.w2-hms-sep { width: 1px; height: 36px; background: rgba(255,255,255,.1); }

.w2-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 48px; }

.w2-hero-scroll {
    display: inline-flex; align-items: center; gap: 10px;
    color: var(--text-dim); font-size: .75rem; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
    transition: color var(--tr);
}
.w2-hero-scroll i { font-size: 1rem; animation: scrollBounce 2s ease-in-out infinite; }
.w2-hero-scroll:hover { color: var(--teal); }
@keyframes scrollBounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)} }

/* ?? Sağ: Slider ?? */
.w2-hero-slider-wrap {
    position: relative;
    height: calc(100svh - var(--nav-h));
    overflow: hidden;
}

.w2-slider {
    position: relative; width: 100%; height: 100%;
}
.w2-slide {
    position: absolute; inset: 0;
    opacity: 0;
    transition: opacity .9s ease;
}
.w2-slide--active { opacity: 1; }
.w2-slide img {
    width: 100%; height: 100%;
    object-fit: cover;
}

/* Slider navigasyon */
.w2-slider-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 10;
    width: 46px; height: 46px;
    background: rgba(6,14,28,.65); border: 1.5px solid rgba(255,255,255,.18);
    color: #fff; border-radius: 50%; font-size: .9rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: var(--tr); backdrop-filter: blur(8px);
}
.w2-slider-prev { left: 14px; }
.w2-slider-next { right: 14px; }
.w2-slider-arrow:hover { background: var(--teal); border-color: var(--teal); color: var(--bg); transform: translateY(-50%) scale(1.1); }

/* Dots */
.w2-slider-dots {
    position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
    display: flex; gap: 8px; z-index: 10;
}
.w2-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: rgba(255,255,255,.35); border: none; cursor: pointer;
    transition: var(--tr);
}
.w2-dot--active { background: var(--teal); width: 24px; border-radius: 4px; }

/* Slider rozet + fiyat */
.w2-slider-badge {
    position: absolute; top: 20px; left: 20px; z-index: 10;
    background: var(--teal); color: var(--bg);
    font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    border-radius: 100px; padding: 7px 18px;
    box-shadow: var(--sh-teal);
}
.w2-slider-price {
    position: absolute; bottom: 60px; right: 16px; z-index: 10;
    background: rgba(6,14,28,.88);
    border: 1px solid var(--teal-border);
    border-radius: var(--r-md); padding: 14px 20px;
    display: flex; flex-direction: column; align-items: flex-end;
    backdrop-filter: blur(10px);
    box-shadow: var(--sh-card);
}
.w2-sp-from   { font-size: .7rem; color: var(--text-dim); letter-spacing: .06em; }
.w2-sp-amount { font-family: var(--serif); font-size: 1.8rem; font-weight: 700; color: var(--teal); line-height: 1.1; }

/* ????????????????????????????????????????????????????????????
   ADIM ÇİZGİSİ
???????????????????????????????????????????????????????????? */
.w2-steps-section {
    background: var(--bg-alt);
    padding: 100px 0;
}
.w2-steps-header { margin-bottom: 60px; }

.w2-steps-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    position: relative;
}

.w2-step {
    padding: 0 28px;
    position: relative;
    text-align: center;
}
.w2-step + .w2-step { border-left: 1px solid rgba(0,212,184,.12); }

.w2-step-num {
    font-family: var(--serif); font-size: .75rem; font-weight: 700;
    letter-spacing: .14em; color: var(--teal); opacity: .5;
    margin-bottom: 16px;
}
.w2-step-connector {
    position: absolute; top: 56px; left: calc(50% + 26px);
    right: calc(-50% + 26px);
    height: 1px;
    background: linear-gradient(90deg, var(--teal-border), transparent);
    pointer-events: none;
}
.w2-step-connector--hidden { display: none; }

.w2-step-icon {
    width: 64px; height: 64px; border-radius: 50%;
    background: var(--bg-card); border: 1.5px solid var(--teal-border);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; color: var(--teal);
    margin: 0 auto 20px; transition: var(--tr);
    box-shadow: 0 0 0 0 rgba(0,212,184,0);
}
.w2-step:hover .w2-step-icon {
    background: var(--teal); color: var(--bg);
    box-shadow: 0 0 0 8px rgba(0,212,184,.12);
    transform: scale(1.08);
}
.w2-step-title {
    font-family: var(--serif); font-size: 1.1rem; font-weight: 700;
    color: var(--white); margin-bottom: 10px;
}
.w2-step-text { font-size: .855rem; color: var(--text-muted); line-height: 1.65; }

/* ????????????????????????????????????????????????????????????
   HAKKIMIZDA — Görsel şeridi + metin
???????????????????????????????????????????????????????????? */
.w2-about-section { background: var(--bg-section); overflow: hidden; }

.w2-about-img-panel {
    height: 100%; min-height: 560px;
    display: flex; flex-direction: column; position: relative;
}
.w2-aip-img { overflow: hidden; flex: 1; position: relative; }
.w2-aip-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.w2-aip-img:hover img { transform: scale(1.05); }
.w2-aip-img--top { flex: 2; }
.w2-aip-row { display: flex; flex: 1; }
.w2-aip-img--half { flex: 1; }
.w2-aip-img--half + .w2-aip-img--half { border-left: 3px solid var(--bg-section); }
.w2-aip-img--top { border-bottom: 3px solid var(--bg-section); }

.w2-aip-badge {
    position: absolute; top: 20px; right: 20px; z-index: 5;
    background: var(--bg-card); border: 1.5px solid var(--teal-border);
    border-radius: var(--r-md); padding: 12px 16px;
    display: flex; align-items: center; gap: 10px;
    backdrop-filter: blur(8px); box-shadow: var(--sh-card);
}
.w2-aip-badge i { color: var(--teal); font-size: 1.2rem; }
.w2-aip-badge span { font-size: .75rem; font-weight: 700; color: var(--white); line-height: 1.3; }

.w2-about-content {
    padding: 80px 64px;
    display: flex; flex-direction: column; justify-content: center;
}

/* About feat items */
.w2-about-feats { display: flex; flex-direction: column; gap: 0; }
.w2-af-item {
    display: flex; align-items: center; gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(255,255,255,.06);
    transition: var(--tr);
}
.w2-af-item:last-child { border-bottom: none; }
.w2-af-item:hover { padding-left: 6px; }
.w2-af-icon {
    width: 44px; height: 44px; flex-shrink: 0; border-radius: var(--r-sm);
    background: var(--teal-glow); border: 1px solid var(--teal-border);
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; color: var(--teal); transition: var(--tr);
}
.w2-af-item:hover .w2-af-icon { background: var(--teal); color: var(--bg); }
.w2-af-item div:last-child { display: flex; flex-direction: column; gap: 2px; }
.w2-af-item strong { font-size: .92rem; color: var(--white); }
.w2-af-item span   { font-size: .78rem; color: var(--text-muted); }

/* ????????????????????????????????????????????????????????????
   VİLLA CAROUSEL
???????????????????????????????????????????????????????????? */
.w2-villas-section { background: var(--bg-alt); padding: 100px 0; }
.w2-carousel-nav   { display: flex; gap: 10px; }
.w2-cnav-btn {
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--bg-card); border: 1.5px solid var(--teal-border);
    color: var(--teal); font-size: .9rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: var(--tr);
}
.w2-cnav-btn:hover { background: var(--teal); color: var(--bg); border-color: var(--teal); transform: scale(1.08); }

/* Carousel scroll container */
.w2-villas-carousel-wrap {
    position: relative; overflow: hidden;
}
.w2-villas-carousel {
    display: flex; gap: 24px;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    padding: 12px 0 24px;
    padding-left: max(24px, calc((100vw - 1320px)/2 + 24px));
    padding-right: 40px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.w2-villas-carousel::-webkit-scrollbar { display: none; }

/* Kenar silikme efekti */
.w2-carousel-fade-left,
.w2-carousel-fade-right {
    position: absolute; top: 0; bottom: 0; width: 80px;
    pointer-events: none; z-index: 2;
}
.w2-carousel-fade-left  { left: 0; background: linear-gradient(to right,  var(--bg-alt), transparent); }
.w2-carousel-fade-right { right: 0; background: linear-gradient(to left, var(--bg-alt), transparent); }

/* Villa kartı */
.w2-vc {
    flex: 0 0 320px; scroll-snap-align: start;
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: var(--tr);
    display: flex; flex-direction: column;
}
.w2-vc:hover { border-color: var(--teal-border); transform: translateY(-6px); box-shadow: var(--sh-card); }

.w2-vc-img-wrap {
    position: relative; height: 240px; overflow: hidden; flex-shrink: 0;
}
.w2-vc-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.w2-vc:hover .w2-vc-img-wrap img { transform: scale(1.07); }
.w2-vc-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(6,14,28,.85) 0%, rgba(6,14,28,.1) 55%);
}
.w2-vc-top-badges { position: absolute; top: 14px; left: 14px; display: flex; gap: 8px; z-index: 2; }
.w2-vc-badge-pool {
    background: var(--teal); color: var(--bg);
    font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    border-radius: 100px; padding: 5px 12px;
}
.w2-vc-bottom {
    position: absolute; bottom: 16px; left: 16px; right: 16px; z-index: 2;
}
.w2-vc-title { font-family: var(--serif); font-size: 1.15rem; font-weight: 700; color: var(--white); line-height: 1.25; margin-bottom: 4px; }
.w2-vc-loc   { font-size: .78rem; color: rgba(255,255,255,.65); }
.w2-vc-loc i { color: var(--teal); }

.w2-vc-footer { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 14px; flex: 1; justify-content: space-between; }
.w2-vc-specs  { display: flex; flex-wrap: wrap; gap: 12px; }
.w2-vc-specs span { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--text-muted); }
.w2-vc-specs i    { color: var(--teal); font-size: .78rem; }

.w2-vc-price-cta { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.w2-vc-price     { display: flex; align-items: baseline; gap: 4px; }
.w2-vc-price span { font-family: var(--serif); font-size: 1.3rem; font-weight: 700; color: var(--teal); }
.w2-vc-price small { font-size: .75rem; color: var(--text-muted); }
.w2-vc-cta-btn {
    display: flex; align-items: center; gap: 7px;
    background: var(--wa); color: #fff;
    font-size: .82rem; font-weight: 700;
    padding: 9px 18px; border-radius: var(--r-sm);
    transition: var(--tr);
}
.w2-vc-cta-btn:hover { filter: brightness(1.1); transform: translateY(-1px); color: #fff; box-shadow: 0 4px 18px rgba(37,211,102,.4); }

/* ????????????????????????????????????????????????????????????
   GALERİ — Bento Grid
???????????????????????????????????????????????????????????? */
.w2-gallery-section {
    background: var(--bg-section);
    padding: 100px 0;
}

/* Başlık satırı */
.w2-gal-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}
.w2-gal-header-sub {
    font-size: .88rem;
    color: var(--text-dim);
    max-width: 300px;
    text-align: right;
    line-height: 1.5;
}

/* ?? Bento Grid ?? */
.w2-bento {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    grid-template-rows: 260px 260px;
    gap: 10px;
    border-radius: var(--r-lg);
    overflow: hidden;
}

/* Büyük hücre: sol sütun, 2 satır yüksek */
.w2-bento-cell--big {
    grid-column: 1;
    grid-row: 1 / 3;
}

/* Küçük hücreler: 2. ve 3. sütunlara otomatik */
.w2-bento-cell {
    position: relative;
    overflow: hidden;
    cursor: zoom-in;
    background: var(--bg-card);
}
.w2-bento-cell:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: -2px;
}

.w2-bento-cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .55s ease;
}
.w2-bento-cell:hover img {
    transform: scale(1.07);
}

/* Hover overlay */
.w2-bento-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 212, 184, 0);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--tr);
}
.w2-bento-cell:hover .w2-bento-overlay {
    background: rgba(0, 0, 0, .45);
}

/* Zoom ikonu */
.w2-bento-zoom {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    border: 1.5px solid rgba(255,255,255,.35);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; color: #fff;
    opacity: 0;
    transform: scale(.7);
    transition: opacity var(--tr), transform var(--tr);
    backdrop-filter: blur(4px);
}
.w2-bento-cell:hover .w2-bento-zoom {
    opacity: 1;
    transform: scale(1);
}

/* "+N daha fazla" son hücre */
.w2-bento-more {
    font-family: var(--serif);
    font-size: 2.2rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 2px 12px rgba(0,0,0,.5);
    opacity: 0;
    transition: opacity var(--tr);
}
.w2-bento-cell:hover .w2-bento-more {
    opacity: 1;
}
/* Son hücredeki karartma her zaman aktif */
.w2-bento-cell:has(.w2-bento-more) .w2-bento-overlay {
    background: rgba(6,14,28,.55);
}
.w2-bento-cell:has(.w2-bento-more) .w2-bento-more {
    opacity: 1;
}
.w2-bento-cell:has(.w2-bento-more):hover .w2-bento-overlay {
    background: rgba(0,212,184,.3);
}

/* Alt CTA */
.w2-gal-footer {
    margin-top: 28px;
    display: flex;
    justify-content: center;
}
.w2-gal-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .88rem;
    font-weight: 600;
    color: var(--teal);
    border: 1px solid var(--teal-border);
    border-radius: 100px;
    padding: 11px 28px;
    transition: var(--tr);
    background: var(--teal-glow);
}
.w2-gal-cta:hover {
    background: var(--teal);
    color: var(--bg);
    border-color: var(--teal);
    transform: translateY(-2px);
    box-shadow: var(--sh-teal);
}

/* Eski stiller artık kullanılmıyor — temizlendi */
.w2-gal-strip, .w2-gal-main, .w2-gal-right, .w2-gal-thumb, .w2-gal-hover,
.w2-gal-thumb--more, .w2-gal-more-count { display: none !important; }

/* ????????????????????????????????????????????????????????????
   LIGHTBOX — Yenilenmiş
???????????????????????????????????????????????????????????? */
.w2-lightbox {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(0, 0, 0, .96);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 60px 70px 100px;
}
.w2-lightbox.w2-lb--open { display: flex; }

/* Kapat */
.w2-lb-close {
    position: fixed; top: 18px; right: 22px; z-index: 10;
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
    color: #fff; font-size: 1.1rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: var(--tr);
}
.w2-lb-close:hover { background: var(--teal); color: var(--bg); border-color: var(--teal); transform: rotate(90deg); }

/* Ok butonları */
.w2-lb-prev, .w2-lb-next {
    position: fixed; top: 50%; transform: translateY(-50%); z-index: 10;
    width: 52px; height: 52px; border-radius: 50%;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
    color: #fff; font-size: 1rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: var(--tr);
}
.w2-lb-prev { left: 18px; }
.w2-lb-next { right: 18px; }
.w2-lb-prev:hover { background: var(--teal); border-color: var(--teal); color: var(--bg); transform: translateY(-50%) translateX(-2px); }
.w2-lb-next:hover { background: var(--teal); border-color: var(--teal); color: var(--bg); transform: translateY(-50%) translateX(2px); }
.w2-lb-prev[hidden], .w2-lb-next[hidden] { display: none; }

/* Ana görsel */
.w2-lb-img-wrap {
    flex: 1;
    display: flex; align-items: center; justify-content: center;
    max-width: 88vw;
    overflow: hidden;
}
.w2-lb-img-wrap img {
    max-width: 88vw;
    max-height: calc(100vh - 180px);
    object-fit: contain;
    border-radius: var(--r-md);
    box-shadow: 0 0 80px rgba(0,0,0,.7);
    transition: opacity .22s ease;
    display: block;
}

/* Sayaç */
.w2-lb-counter {
    font-size: .78rem; font-weight: 600; letter-spacing: .1em;
    color: var(--text-dim);
    background: rgba(255,255,255,.06);
    padding: 5px 18px; border-radius: 100px;
    margin-top: 14px; flex-shrink: 0;
}

/* Thumbnail şeridi */
.w2-lb-strip {
    display: flex; gap: 8px;
    overflow-x: auto; overflow-y: hidden;
    padding: 10px 16px 0;
    scrollbar-width: none;
    max-width: 90vw;
    flex-shrink: 0;
    -webkit-overflow-scrolling: touch;
}
.w2-lb-strip::-webkit-scrollbar { display: none; }

.w2-lb-thumb {
    width: 68px; height: 50px; flex-shrink: 0;
    object-fit: cover;
    border-radius: var(--r-sm);
    opacity: .4; cursor: pointer;
    border: 2px solid transparent;
    transition: var(--tr);
}
.w2-lb-thumb:hover { opacity: .75; }
.w2-lb-thumb--active {
    opacity: 1;
    border-color: var(--teal);
    box-shadow: 0 0 0 2px rgba(0,212,184,.3);
}

/* ????????????????????????????????????????????????????????????
   KONUM — iki sütun: sol bilgi kartı + sağ harita
???????????????????????????????????????????????????????????? */
.w2-location-section {
    background: var(--bg-alt);
    padding: 100px 0;
}

.w2-location-inner {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 40px;
    align-items: stretch;
}

/* Sol: bilgi kartı */
.w2-loc-card {
    background: var(--bg-card);
    border: 1px solid var(--teal-border);
    border-radius: var(--r-lg);
    padding: 44px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.w2-loc-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 28px;
}
.w2-loc-list li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(0,212,184,.1);
    border-radius: var(--r-sm);
    transition: var(--tr);
}
.w2-loc-list li:hover {
    background: var(--teal-glow);
    border-color: var(--teal-border);
}
.w2-loc-icon {
    width: 38px; height: 38px; flex-shrink: 0;
    border-radius: var(--r-sm);
    background: var(--teal-glow);
    border: 1px solid var(--teal-border);
    display: flex; align-items: center; justify-content: center;
    color: var(--teal); font-size: .9rem;
}
.w2-loc-list li > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.w2-loc-list strong {
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-dim);
    font-weight: 700;
}
.w2-loc-list span {
    font-size: .95rem;
    color: var(--white);
    font-weight: 500;
}

/* Sağ: harita */
.w2-loc-map {
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 1px solid var(--teal-border);
    box-shadow: var(--sh-card);
    min-height: 420px;
    line-height: 0;
}
.w2-loc-map iframe {
    width: 100%;
    height: 100%;
    min-height: 420px;
    display: block;
    border: 0;
    filter: grayscale(.25) brightness(.85) contrast(1.05);
}

/* ????????????????????????????????????????????????????????????
   İLETİŞİM — iki sütun solid
???????????????????????????????????????????????????????????? */
.w2-contact-section {
    background: var(--bg-section);
    padding: 100px 0;
}

.w2-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}

/* Sol: kanal butonları */
.w2-cg-channels {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.w2-channel {
    display: flex; align-items: center; gap: 16px;
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--r-md);
    padding: 18px 20px;
    transition: var(--tr);
    color: var(--text);
}
.w2-channel:hover {
    border-color: var(--teal-border);
    background: var(--bg-surface);
    transform: translateX(6px);
    box-shadow: var(--sh-teal);
    color: var(--white);
}
.w2-channel-wa { border-color: rgba(37,211,102,.25); }
.w2-channel-wa:hover { background: rgba(37,211,102,.08); border-color: var(--wa); }

.w2-ch-icon {
    width: 48px; height: 48px; flex-shrink: 0;
    border-radius: var(--r-sm);
    background: var(--bg-surface);
    border: 1px solid rgba(255,255,255,.08);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; color: var(--teal);
    transition: var(--tr);
}
.w2-channel-wa .w2-ch-icon { color: var(--wa); }
.w2-channel:hover .w2-ch-icon { background: var(--teal); color: var(--bg); border-color: var(--teal); }
.w2-channel-wa:hover .w2-ch-icon { background: var(--wa); border-color: var(--wa); color: #fff; }

.w2-ch-info {
    display: flex; flex-direction: column; gap: 2px; flex: 1;
}
.w2-ch-label {
    font-size: .7rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--text-dim);
}
.w2-ch-val {
    font-size: .92rem; font-weight: 600; color: var(--white);
}
.w2-ch-arrow {
    color: var(--text-dim); font-size: .75rem; transition: var(--tr);
}
.w2-channel:hover .w2-ch-arrow { color: var(--teal); transform: translateX(4px); }

/* Sağ: istatistik kutuları */
.w2-cgs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.w2-cgs-box {
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: var(--r-lg);
    padding: 28px 20px;
    display: flex; flex-direction: column;
    align-items: center; gap: 8px;
    text-align: center;
    transition: var(--tr);
}
.w2-cgs-box:hover {
    border-color: var(--teal-border);
    background: var(--bg-surface);
    transform: translateY(-4px);
    box-shadow: var(--sh-teal);
}
.w2-cgs-box--wide {
    grid-column: span 2;
    flex-direction: row;
    gap: 18px;
    text-align: left;
    align-items: center;
    padding: 22px 28px;
}
.w2-cgs-icon { font-size: 1.5rem; color: var(--teal); }
.w2-cgs-num  {
    font-family: var(--serif);
    font-size: 2rem; font-weight: 700;
    color: var(--white); line-height: 1;
}
.w2-cgs-lbl  {
    font-size: .7rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--text-dim);
}

/* ????????????????????????????????????????????????????????????
   FOOTER
???????????????????????????????????????????????????????????? */
.w2-footer {
    background: var(--bg-section);
    padding: 80px 0 0;
    border-top: 1px solid rgba(0,212,184,.1);
    position: relative;
    overflow: hidden;
}
.w2-footer-top-wave {
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, transparent, var(--teal), transparent);
}
.w2-footer-brand {
    font-family: var(--serif); font-size: 1.4rem; font-weight: 700;
    color: var(--white); display: flex; align-items: center; gap: 12px;
}
.w2-footer-brand i { color: var(--teal); }
.w2-footer-desc {
    font-size: .9rem; line-height: 1.72;
    color: var(--text-muted); max-width: 360px;
}
.w2-footer-title {
    font-size: .73rem; font-weight: 700;
    letter-spacing: .15em; text-transform: uppercase;
    color: var(--teal); margin-bottom: 20px;
}
.w2-footer-social { display: flex; gap: 10px; }
.w2-footer-social a {
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--teal-glow); border: 1px solid var(--teal-border);
    color: var(--teal); display: flex; align-items: center; justify-content: center;
    font-size: .9rem; transition: var(--tr);
}
.w2-footer-social a:hover { background: var(--teal); color: var(--bg); transform: translateY(-3px); }

.w2-footer-links li { margin-bottom: 10px; }
.w2-footer-links a {
    font-size: .88rem; color: var(--text-muted);
    display: flex; align-items: center; gap: 8px; transition: var(--tr);
}
.w2-footer-links a i { color: var(--teal); font-size: .65rem; }
.w2-footer-links a:hover { color: var(--teal); padding-left: 4px; }

.w2-footer-contact li {
    display: flex; align-items: center; gap: 10px;
    font-size: .88rem; color: var(--text-muted); margin-bottom: 12px;
}
.w2-footer-contact li i { color: var(--teal); width: 18px; text-align: center; }
.w2-footer-contact a { color: var(--text-muted); transition: var(--tr); }
.w2-footer-contact a:hover { color: var(--teal); }

.w2-footer-bottom {
    border-top: 1px solid rgba(255,255,255,.07);
    margin-top: 56px; padding: 22px 0;
    display: flex; flex-wrap: wrap;
    justify-content: space-between; align-items: center; gap: 10px;
    font-size: .8rem; color: var(--text-dim);
}

/* ????????????????????????????????????????????????????????????
   RESPONSIVE — Tüm bölümler
???????????????????????????????????????????????????????????? */
@media (max-width: 1199px) {
    .w2-about-content { padding: 60px 44px; }
    .w2-contact-grid  { gap: 40px; }
}

@media (max-width: 991px) {
    /* Hero */
    .w2-hero-grid { grid-template-columns: 1fr; }
    .w2-hero-slider-wrap { height: 52vw; min-height: 300px; }
    .w2-hero-content { padding: 100px 0 40px; max-width: 100%; }

    /* Steps */
    .w2-steps-row { grid-template-columns: 1fr 1fr; }
    .w2-step + .w2-step { border-left: none; border-top: 1px solid rgba(0,212,184,.1); }
    .w2-step { padding: 24px 16px; }
    .w2-step-connector { display: none; }

    /* About */
    .w2-about-img-panel { min-height: 360px; }
    .w2-about-content { padding: 48px 32px; }

    /* Galeri */
    .w2-bento {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 240px 180px 180px;
    }
    .w2-bento-cell--big { grid-column: 1 / 3; grid-row: 1; }
    .w2-gal-header { flex-direction: column; align-items: flex-start; }
    .w2-gal-header-sub { text-align: left; max-width: 100%; }

    /* Konum */
    .w2-location-inner { grid-template-columns: 1fr; }
    .w2-loc-map { min-height: 320px; }
    .w2-loc-map iframe { min-height: 320px; }

    /* İletişim */
    .w2-contact-grid { grid-template-columns: 1fr; gap: 40px; }

    /* Footer */
    .w2-footer-bottom { justify-content: center; text-align: center; }
}

@media (max-width: 767px) {
    .w2-hero-content { padding-top: 90px; }
    .w2-hero-mini-stats { flex-wrap: wrap; }
    .w2-steps-row { grid-template-columns: 1fr; }
    .w2-step + .w2-step { border-top: 1px solid rgba(0,212,184,.1); padding-top: 24px; }
    .w2-villas-carousel { padding-left: 16px; }
    .w2-vc { flex: 0 0 280px; }
    .w2-about-section .col-lg-5,
    .w2-about-section .col-lg-7 { width: 100%; }
    .w2-about-content { padding: 36px 20px; }
    .w2-loc-card { padding: 28px 24px; }
    .w2-cgs-grid { grid-template-columns: 1fr 1fr; }
    .w2-cgs-box--wide { grid-column: span 2; }
    .w2-section { padding: 72px 0; }
}

@media (max-width: 575px) {
    .w2-hero-title-main { font-size: 2.4rem; }
    .w2-bento {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 200px 140px;
    }
    .w2-bento-cell--big { grid-column: 1 / 3; grid-row: 1; }
    .w2-bento-cell:nth-child(4) { display: none; }
    .w2-lb-prev { left: 8px; }
    .w2-lb-next { right: 8px; }
    .w2-lightbox { padding: 56px 10px 90px; }
    .w2-contact-section { padding: 70px 0; }
    .w2-location-section { padding: 70px 0; }
    .w2-cgs-grid { grid-template-columns: 1fr 1fr; }
}