/* ========= BASE ========= */
html { scroll-behavior: smooth; }
body {
font-family:'Inter',sans-serif;
color:#2a2219;
background:#fdfbf6;
overflow-x:clip;
}
.font-serif { font-family:'Playfair Display', serif; }
.font-elegant { font-family:'Cormorant Garamond', serif; letter-spacing:.01em; }
.font-display { font-family:'Oswald', sans-serif; letter-spacing:.02em; }
::selection { background:#d4b376; color:#1f1810; }
/* ========= CUSTOM CURSOR ========= */
.cursor-dot, .cursor-ring {
display:none !important;
position:fixed; top:0; left:0; pointer-events:none; z-index:9999;
border-radius:50%; transition: transform .15s ease, width .3s, height .3s, background .3s;
mix-blend-mode: difference;
}
.cursor-dot { width:6px; height:6px; background:#d4b376; transform: translate(-50%,-50%); }
.cursor-ring { width:36px; height:36px; border:1px solid #d4b376; transform: translate(-50%,-50%); transition: transform .25s ease, width .3s, height .3s, background .3s; }
.cursor-ring.hover { width:60px; height:60px; background:rgba(212,179,118,.15); border-color:#b8914a; }
/* ========= NOISE TEXTURE ========= */
.noise::before {
content:''; position:absolute; inset:0; pointer-events:none; opacity:.05; z-index:1;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* ========= HERO ========= */
.hero-slide { position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition: opacity 2s ease-in-out; }
.hero-slide.active { opacity:1; animation: kenburns 12s ease-out forwards; }
@keyframes kenburns { from{transform:scale(1.04)} to{transform:scale(1.14)} }
.hero-gradient { background: linear-gradient(180deg, rgba(31,24,16,.3) 0%, rgba(31,24,16,.15) 50%, rgba(31,24,16,.55) 100%); }
/* ========= HERO TITLE ANIMATION ========= */
.split-char { display:inline-block; transform: translateY(120%); transition: transform 1.2s cubic-bezier(.2,.8,.2,1); }
.split-char.in { transform: translateY(0); }
.hero-slide-title { overflow:hidden; padding-bottom: 0.15em; }
/* ========= HERO TEXT (slayta göre değişen, sola hizalı) ========= */
.hero-text-stack { display:grid; width:100%; }
.hero-text { grid-area:1/1; opacity:0; transform: translateY(28px); visibility:hidden;
transition: opacity 1s ease, transform 1s ease; pointer-events:none; }
.hero-text.active { opacity:1; transform: translateY(0); visibility:visible; pointer-events:auto; }
/* ========= REVEAL ========= */
.reveal { opacity:0; transform: translateY(40px); transition: opacity 1s cubic-bezier(.2,.8,.2,1), transform 1s cubic-bezier(.2,.8,.2,1); }
.reveal.visible { opacity:1; transform: translateY(0); }
.reveal-delay-1 { transition-delay:.15s; }
.reveal-delay-2 { transition-delay:.3s; }
.reveal-delay-3 { transition-delay:.45s; }
/* ========= ORNAMENT ========= */
.ornament { display:flex; align-items:center; gap:1rem; color:#b8914a; }
.ornament::before, .ornament::after { content:''; flex:1; height:1px; background:currentColor; opacity:.35; }
/* ========= GLITCH ========= */
.glitch {
position:relative;
display:inline-block;
}
.glitch::before, .glitch::after { content:none; }
/* ========= MAGNETIC BUTTON ========= */
.magnetic { transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.btn-primary { position:relative; overflow:hidden; isolation:isolate; }
.btn-primary::before {
content:''; position:absolute; inset:0; background:#7a5b28;
transform: scaleX(0); transform-origin:right;
transition: transform .6s cubic-bezier(.7,0,.3,1);
z-index:-1;
}
.btn-primary:hover::before { transform: scaleX(1); transform-origin:left; }
.btn-primary::after {
content:''; position:absolute; inset:0;
background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
transform: translateX(-100%); transition: transform .8s ease;
}
.btn-primary:hover::after { transform: translateX(100%); }
.btn-outline { position:relative; overflow:hidden; }
.btn-outline::before {
content:''; position:absolute; inset:0; background:#3d3020;
transform: translateY(100%); transition: transform .5s cubic-bezier(.7,0,.3,1);
z-index:-1;
}
.btn-outline:hover::before { transform: translateY(0); }
.btn-outline:hover { color:#fff !important; border-color:#3d3020 !important; }
/* ========= IMAGE REVEAL ========= */
.img-reveal { position:relative; overflow:hidden; }
.img-reveal::after {
content:''; position:absolute; inset:0; background:#d4b376;
transform: translateX(-101%); z-index:2;
}
.img-reveal.visible::after { animation: wipeIn 1.2s cubic-bezier(.7,0,.3,1) forwards; }
@keyframes wipeIn {
0%{transform:translateX(-101%)} 50%{transform:translateX(0)} 100%{transform:translateX(101%)}
}
.img-reveal > * { transform: scale(1.15); opacity:0; transition: transform 1.2s .5s cubic-bezier(.2,.8,.2,1), opacity .5s .5s; }
.img-reveal.visible > * { transform: scale(1); opacity:1; }
/* ========= ROOM CARD 3D ========= */
.room-card {
transform-style: preserve-3d;
transition: transform .6s cubic-bezier(.2,.8,.2,1), box-shadow .6s;
will-change: transform;
cursor: default;
position: relative;
text-decoration: none;
color: inherit;
display: block;
}
.room-card:is(a, [onclick]) { cursor: pointer; }
.room-card:hover { text-decoration: none; color: inherit; }
.room-card:hover { box-shadow: 0 40px 80px -30px rgba(154,118,56,.4); }
.room-card .room-img {
transition: transform 1.4s cubic-bezier(.2,.8,.2,1), filter .5s;
filter: saturate(.9) brightness(.97);
}
.room-card:hover .room-img {
transform: scale(1.12);
filter: saturate(1.15) brightness(1.05);
}
.room-card .card-shine {
position:absolute; inset:0;
background: radial-gradient(600px circle at var(--mx,50%) var(--my,50%), rgba(212,179,118,.25), transparent 40%);
opacity:0; transition: opacity .4s; pointer-events:none; z-index:2;
}
.room-card:hover .card-shine { opacity:1; }
.room-card .card-number {
position:absolute; top:1rem; right:1rem;
font-family:'Playfair Display',serif; font-size:5rem; font-weight:700;
color:#fff; opacity:0; line-height:1;
transition: opacity .5s, transform .6s cubic-bezier(.2,.8,.2,1);
transform: translateY(-20px) rotate(-8deg);
text-shadow: 0 4px 30px rgba(0,0,0,.4);
z-index:3; pointer-events:none;
}
.room-card:hover .card-number { opacity:.5; transform: translateY(0) rotate(0); }
/* ========= IMAGE SLIDER (room hover) ========= */
.room-card .room-img-stack { position:absolute; inset:0; opacity:0; transition: opacity .8s; }
.room-card:hover .room-img-stack { opacity:1; }
/* ========= EXP CARD ========= */
.exp-card {
transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s, border-color .5s;
position:relative; overflow:hidden;
scroll-margin-top: 130px; /* ana sayfadan aktivite kartina tiklayip gelince sabit header altinda kalmasin */
}
.exp-card::before {
content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
background: linear-gradient(90deg, transparent, rgba(212,179,118,.1), transparent);
transition: left .8s;
}
.exp-card:hover::before { left:100%; }
.exp-card:hover {
transform: translateY(-10px) scale(1.02);
box-shadow: 0 30px 60px -20px rgba(154,118,56,.3);
border-color:#d4b376;
}
.exp-card .exp-img { transition: transform 1.2s ease; }
.exp-card:hover .exp-img { transform: scale(1.08); }
/* ========= GALLERY ========= */
.gallery-item { overflow:hidden; position:relative; }
.gallery-item img {
transition: transform 1.2s cubic-bezier(.2,.8,.2,1), filter .5s;
filter: saturate(.95);
}
.gallery-item:hover img { transform: scale(1.1); filter: saturate(1.2) contrast(1.05); }
.gallery-item::after {
content:''; position:absolute; inset:0;
background: linear-gradient(180deg, transparent 50%, rgba(31,24,16,.7) 100%);
opacity:0; transition: opacity .5s;
}
.gallery-item:hover::after { opacity:1; }
.gallery-item .g-caption {
position:absolute; bottom:1rem; left:1rem; right:1rem;
color:#fff; font-family:'Playfair Display',serif; font-size:1.25rem;
opacity:0; transform: translateY(20px);
transition: all .5s cubic-bezier(.2,.8,.2,1) .1s;
z-index:2;
}
.gallery-item:hover .g-caption { opacity:1; transform: translateY(0); }
/* ========= NAVBAR ========= */
.nav-solid {
/* backdrop-filter KALDIRILDI: position:fixed + backdrop-filter iOS Safari'de
hamburger butonunun scroll sonrası dokunmayı almamasına/silik kalmasına yol açıyordu.
Arka plan zaten ~%95 opak krem; tam opak yapıldı, görünüm neredeyse aynı. */
background: rgb(253,251,246);
box-shadow: 0 10px 40px -20px rgba(61,48,32,.15);
}
.nav-solid .nav-link { color:#3d3020 !important; }
.nav-solid .logo-text { color:#3d3020 !important; }
.nav-solid .logo-sub { color:#9a7638 !important; }
.nav-solid .menu-btn { color:#3d3020 !important; }
.nav-solid .search-trigger { color:#3d3020 !important; }
.nav-solid .search-trigger:hover { color:#9a7638 !important; }
/* Hamburger her zaman okunur olsun: şeffaf navbar'da (nav-solid uygulanmasa bile) açık zemin üstünde beyaz ikon silik kalmaz */
.menu-btn { text-shadow: 0 1px 4px rgba(0,0,0,.35); }
.nav-solid .menu-btn { text-shadow: none; }
/* ========= ARAMA OVERLAY ========= */
.search-overlay { position:fixed; inset:0; z-index:9996; display:flex; align-items:flex-start; justify-content:center; }
.search-overlay[data-state="closed"] { opacity:0; visibility:hidden; pointer-events:none; }
.search-overlay[data-state="open"] { opacity:1; visibility:visible; pointer-events:auto; }
.search-overlay { transition: opacity .35s ease, visibility .35s ease; }
.search-backdrop { position:absolute; inset:0; background:rgba(31,24,16,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.search-box {
position:relative; z-index:2; width:min(680px, calc(100vw - 2rem));
margin-top:14vh; background:#fdfbf6;
border:1px solid rgba(154,118,56,.25);
box-shadow:0 40px 90px -30px rgba(31,24,16,.6);
transform: translateY(-24px) scale(.98); opacity:0;
transition: transform .45s cubic-bezier(.16,1,.3,1), opacity .4s;
}
.search-overlay[data-state="open"] .search-box { transform: translateY(0) scale(1); opacity:1; }
.search-field { display:flex; align-items:center; gap:14px; padding:20px 22px; border-bottom:1px solid rgba(154,118,56,.18); }
.search-field-icon { color:#9a7638; font-size:18px; }
#searchInput {
flex:1; border:0; outline:0; background:transparent;
font-family:'Cormorant Garamond',serif; font-size:24px; color:#3d3020;
}
#searchInput::placeholder { color:#b3a07c; }
.search-close { color:#b3a07c; font-size:20px; transition:color .3s; background:transparent; border:0; cursor:pointer; }
.search-close:hover { color:#9a7638; }
.search-results { max-height:min(56vh, 460px); overflow-y:auto; }
.search-hint, .search-empty { padding:26px 22px; color:#b3a07c; font-size:14px; text-align:center; }
.search-loading { padding:26px 22px; color:#9a7638; font-size:14px; text-align:center; }
.search-item {
display:flex; align-items:center; gap:16px; padding:14px 22px;
border-bottom:1px solid rgba(154,118,56,.1);
text-decoration:none; color:#3d3020; transition:background .25s;
}
.search-item:hover { background:#f6edd8; }
.search-thumb {
width:54px; height:54px; flex-shrink:0; object-fit:cover;
background:#efe9dc; border:1px solid rgba(154,118,56,.15);
display:flex; align-items:center; justify-content:center; color:#b8914a; font-size:18px;
}
.search-item-body { flex:1; min-width:0; }
.search-item-type { font-family:'Oswald',sans-serif; font-size:10px; letter-spacing:.25em; text-transform:uppercase; color:#b8914a; }
.search-item-title { font-family:'Playfair Display',serif; font-size:17px; line-height:1.2; margin-top:2px; }
.search-item-desc { font-size:13px; color:#8a7a5c; margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.search-item-arrow { color:#d4b376; font-size:13px; flex-shrink:0; }
.nav-solid .logo-circle { border-color:#9a7638 !important; color:#9a7638 !important; }
.nav-solid .lang-switch { border-color:#d8ccb3 !important; color:#3d3020 !important; }
.nav-solid .lang-switch a:hover { background:#efe9dc !important; }
.nav-solid .lang-switch .active { background:#3d3020 !important; color:#fff !important; }
.brand-logo-shell {
height: 68px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
}
.brand-logo-img {
display:block;
width:auto;
max-width: 220px;
max-height: 64px;
object-fit: contain;
filter: drop-shadow(0 2px 8px rgba(31,24,16,.45));
}
.brand-logo-shell.footer-logo {
height:auto;
}
.nav-solid .brand-logo-img,
footer .brand-logo-img {
filter:none;
}
.loader-logo-img {
max-width: 300px;
max-height: 82px;
width:auto;
height:auto;
display:block;
}
.nav-link { position:relative; }
.nav-link::after {
content:''; position:absolute; bottom:-6px; left:50%; width:0; height:2px;
background: linear-gradient(90deg, transparent, #d4b376, transparent);
transition: all .4s cubic-bezier(.2,.8,.2,1);
}
.nav-link:hover::after, .nav-link.active::after { width:100%; left:0; }
/* ========= SCROLL PROGRESS ========= */
#scrollProg {
position:fixed; top:0; left:0; height:2px; width:0%;
background: linear-gradient(90deg, #d4b376, #9a7638);
z-index:9998; transition: width .1s; pointer-events:none;
}
/* ========= MARQUEE ========= */
.marquee-track { animation: marquee 45s linear infinite; }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }
/* ========= BLOB BG ========= */
.blob {
position:absolute; border-radius:50%;
filter: blur(80px); opacity:.3; pointer-events:none;
animation: blobFloat 20s ease-in-out infinite;
}
@keyframes blobFloat {
0%,100% { transform: translate(0,0) scale(1); }
33% { transform: translate(50px,-30px) scale(1.1); }
66% { transform: translate(-30px,40px) scale(.95); }
}
/* ========= FLOATY ========= */
@keyframes floaty { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-10px) rotate(2deg)} }
.floaty { animation: floaty 5s ease-in-out infinite; }
/* ========= SPIN SLOW ========= */
@keyframes spinSlow { to { transform: rotate(360deg); } }
.spin-slow { animation: spinSlow 20s linear infinite; }
/* ========= PULSE RING ========= */
@keyframes pulseRing {
0% { box-shadow: 0 0 0 0 rgba(212,179,118,.6); }
70% { box-shadow: 0 0 0 20px rgba(212,179,118,0); }
100% { box-shadow: 0 0 0 0 rgba(212,179,118,0); }
}
.pulse-ring { animation: pulseRing 2s infinite; }
/* ========= TYPEWRITER ========= */
.typewriter { border-right: 2px solid #d4b376; animation: blink 1s step-end infinite; display:inline-block; }
@keyframes blink { 50%{border-color:transparent} }
/* ========= GRADIENT TEXT ========= */
.gradient-text {
background: linear-gradient(120deg, #b8914a 0%, #d4b376 30%, #7a5b28 60%, #d4b376 100%);
background-size: 200% 200%;
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
animation: gradShift 6s ease-in-out infinite;
}
@keyframes gradShift {
0%,100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
/* ========= HOVER LIFT ========= */
.hover-lift { transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s; }
.hover-lift:hover { transform: translateY(-6px); box-shadow: 0 20px 40px -15px rgba(154,118,56,.25); }
/* ========= QUOTE MARK ========= */
.quote-mark { font-family:'Playfair Display',serif; font-size:9rem; line-height:.4; color:#d4b376; opacity:.4; }
/* ========= TESTIMONIAL ========= */
.t-track { transition: transform .8s cubic-bezier(.2,.8,.2,1); }
/* ========= MODAL ========= */
.modal-backdrop { backdrop-filter: blur(10px); }
.modal-content { transform: scale(.9) translateY(30px); opacity:0; transition: all .5s cubic-bezier(.2,.8,.2,1); }
.modal-open .modal-content { transform: scale(1) translateY(0); opacity:1; }
/* ========= FIELDS ========= */
.field-light { background: transparent; border:1px solid #efe0bb; color:#3d3020; transition: all .3s; }
.field-light:focus { outline:none; border-color:#9a7638; background: #fdfbf6; box-shadow: 0 0 0 4px rgba(212,179,118,.12); }
.field-light::placeholder { color:#b3a07c; }
/* ========= TRIPADVISOR ICON ========= */
.icon-tripadvisor { display:inline-flex; align-items:center; justify-content:center; }
.icon-tripadvisor svg { width:1em; height:1em; fill:currentColor; }
/* ========= CUSTOM DATE PICKER ========= */
.custom-date-trigger {
position: relative;
display: flex;
align-items: center;
gap: 8px;
width: 100%;
background: #fff;
border: 1px solid rgba(239,224,187,.5);
padding: 12px;
font-family: 'Oswald', sans-serif;
font-size: .875rem;
letter-spacing: .05em;
color: #3d3020;
cursor: pointer;
transition: all .3s;
}
.custom-date-trigger:hover, .custom-date-trigger.active {
border-color: #9a7638;
box-shadow: 0 0 0 4px rgba(212,179,118,.12);
}
.custom-date-trigger .cdt-icon {
margin-left: auto;
opacity: .5;
transition: opacity .3s;
flex-shrink: 0;
}
.custom-date-trigger:hover .cdt-icon { opacity: 1; }
.custom-date-trigger .cdt-icon svg { width:18px; height:18px; stroke:#9a7638; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.custom-calendar {
position: absolute;
top: calc(100% + 8px);
left: 0;
z-index: 100;
background: #fff;
border: 1px solid rgba(239,224,187,.6);
border-radius: 12px;
padding: 16px;
min-width: 280px;
box-shadow: 0 20px 60px -10px rgba(61,48,32,.2);
display: none;
}
.custom-calendar.open { display: block; animation: calSlideIn .25s ease; }
@keyframes calSlideIn { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }
.cal-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.cal-header .cal-month-label {
font-family: 'Oswald', sans-serif;
font-size: .95rem;
letter-spacing: .08em;
color: #3d3020;
font-weight: 600;
}
.cal-header .cal-nav {
width: 30px; height: 30px;
display: flex; align-items: center; justify-content: center;
border: 1px solid rgba(239,224,187,.5);
border-radius: 8px;
background: transparent;
cursor: pointer;
transition: all .2s;
color: #9a7638;
}
.cal-header .cal-nav:hover { background: #fdfbf6; border-color: #9a7638; }
.cal-header .cal-nav svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.cal-weekdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
margin-bottom: 4px;
}
.cal-weekdays span {
text-align: center;
font-size: .7rem;
font-family: 'Oswald', sans-serif;
letter-spacing: .05em;
color: #b3a07c;
padding: 4px 0;
}
.cal-days {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
}
.cal-day {
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
font-size: .82rem;
font-family: 'Oswald', sans-serif;
border-radius: 8px;
cursor: pointer;
transition: all .2s;
color: #3d3020;
border: none;
background: transparent;
}
.cal-day:hover:not(.disabled):not(.empty) { background: rgba(154,118,56,.12); }
.cal-day.today { border: 1.5px solid #9a7638; font-weight: 600; }
.cal-day.selected { background: #9a7638 !important; color: #fff !important; font-weight: 600; }
.cal-day.in-range { background: rgba(154,118,56,.1) !important; border-radius: 0; }
.cal-day.range-start { border-radius: 8px 0 0 8px; }
.cal-day.range-end { border-radius: 0 8px 8px 0; }
.cal-day.disabled { color: #d5cbb8; cursor: default; }
.cal-day.empty { cursor: default; }
.cal-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid rgba(239,224,187,.4);
}
.cal-footer .cal-clear {
font-size: .75rem;
font-family: 'Oswald', sans-serif;
letter-spacing: .05em;
color: #9a7638;
background: none;
border: none;
cursor: pointer;
transition: opacity .2s;
}
.cal-footer .cal-clear:hover { opacity: .7; }
.cal-footer .cal-today-btn {
font-size: .75rem;
font-family: 'Oswald', sans-serif;
letter-spacing: .05em;
color: #b3a07c;
background: none;
border: none;
cursor: pointer;
transition: color .2s;
}
.cal-footer .cal-today-btn:hover { color: #9a7638; }
/* ========= CUSTOM SELECT ========= */
.custom-select-wrap { position: relative; }
.custom-select-trigger {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
background: #fff;
border: 1px solid rgba(239,224,187,.5);
padding: 12px;
font-family: 'Oswald', sans-serif;
font-size: .875rem;
letter-spacing: .05em;
color: #3d3020;
cursor: pointer;
transition: all .3s;
}
.custom-select-trigger:hover, .custom-select-trigger.active {
border-color: #9a7638;
box-shadow: 0 0 0 4px rgba(212,179,118,.12);
}
.custom-select-trigger .cs-arrow {
transition: transform .3s;
flex-shrink: 0;
}
.custom-select-trigger .cs-arrow svg { width:14px; height:14px; stroke:#9a7638; fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.custom-select-trigger.active .cs-arrow { transform: rotate(180deg); }
.custom-select-dropdown {
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
z-index: 100;
background: #fff;
border: 1px solid rgba(239,224,187,.6);
border-radius: 10px;
padding: 6px;
box-shadow: 0 16px 48px -8px rgba(61,48,32,.18);
display: none;
max-height: 220px;
overflow-y: auto;
}
.custom-select-dropdown.open { display: block; animation: calSlideIn .2s ease; }
.custom-select-dropdown .cs-option {
display: block;
width: 100%;
padding: 10px 12px;
font-family: 'Oswald', sans-serif;
font-size: .875rem;
letter-spacing: .03em;
color: #3d3020;
background: transparent;
border: none;
border-radius: 6px;
cursor: pointer;
text-align: left;
transition: all .2s;
}
.custom-select-dropdown .cs-option:hover { background: rgba(154,118,56,.1); }
.custom-select-dropdown .cs-option.selected { background: #9a7638; color: #fff; font-weight: 600; }
/* ========= EYEBROW ========= */
.eyebrow { font-family:'Oswald',sans-serif; font-size:.78rem; letter-spacing:.4em; text-transform:uppercase; color:#9a7638; }
/* ========= COUNTER ========= */
.counter { font-variant-numeric: tabular-nums; }
/* ========= SCROLLBAR ========= */
::-webkit-scrollbar { width:10px; }
::-webkit-scrollbar-track { background:#fbf7ef; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #d4b376, #9a7638); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #7a5b28; }
/* ========= LOADING SCREEN ========= */
#loader {
position:fixed; inset:0; background:#fdfbf6; z-index:10000;
display:flex; align-items:center; justify-content:center; flex-direction:column;
transition: opacity .8s, visibility .8s;
}
#loader.hidden { opacity:0; visibility:hidden; }
.loader-logo {
font-family:'Playfair Display',serif; font-size:3rem; color:#3d3020;
position:relative; overflow:hidden;
}
.loader-logo::after {
content:''; position:absolute; inset:0; background:#fdfbf6;
transform: translateX(-101%); animation: loaderWipe 2s ease-in-out infinite;
}
@keyframes loaderWipe {
0%{transform:translateX(-101%)} 50%{transform:translateX(0)} 100%{transform:translateX(101%)}
}
.loader-bar { width:200px; height:2px; background:#efe0bb; margin-top:2rem; overflow:hidden; }
.loader-bar::after { content:''; display:block; width:50%; height:100%; background:#9a7638; animation: loaderBar 1.5s ease-in-out infinite; }
@keyframes loaderBar { 0%{margin-left:-50%} 100%{margin-left:100%} }
/* ========= PARALLAX TEXT ========= */
.parallax-text {
font-family:'Playfair Display',serif; font-style:italic;
color: rgba(212,179,118,.08); font-size: 14rem; font-weight:700;
position:absolute; white-space:nowrap; pointer-events:none;
user-select:none; z-index:0;
}
/* ========= TILT CARD ========= */
.tilt-card { transform-style: preserve-3d; transition: transform .2s; }
.tilt-card > * { transform: translateZ(30px); }
/* ========= UNDERLINE GROW ========= */
.grow-underline { position:relative; }
.grow-underline::after {
content:''; position:absolute; left:50%; bottom:-4px; width:0; height:1px;
background:currentColor; transition: all .4s cubic-bezier(.2,.8,.2,1);
}
.grow-underline:hover::after { width:100%; left:0; }
/* ========= ROOM DETAIL TABS ========= */
.tab-btn { position:relative; }
.tab-btn.active { color:#9a7638; }
.tab-btn.active::after { content:''; position:absolute; bottom:-2px; left:0; right:0; height:2px; background:#9a7638; }
/* ========= FEATURE NUMBER ========= */
.feat-num {
font-family:'Playfair Display',serif; font-size:8rem; font-weight:700;
line-height:1; color:transparent;
-webkit-text-stroke: 1px #d4b376;
transition: all .5s;
}
.feat-card:hover .feat-num { color:#d4b376; -webkit-text-stroke: 1px transparent; }
/* ========= PAGE HERO (inner pages) ========= */
.page-hero {
position:relative; height: 60vh; min-height: 420px;
overflow:hidden;
}
.page-hero::before {
content:''; position:absolute; inset:0; z-index:1;
background: linear-gradient(180deg, rgba(31,24,16,.25) 0%, rgba(31,24,16,.55) 100%);
}
.page-hero > img {
position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
object-position: center center;
animation: slowZoom 20s ease-out forwards;
}
@keyframes slowZoom { to { transform: scale(1.1); } }
/* Room detail hero: dikey oda görselini kırpmadan göster.
Arka plan blur'lu doldurur, ön plan görselin tamamını ortada gösterir. */
.room-hero .room-hero-bg {
position:absolute; inset:0; width:100%; height:100%;
object-fit:cover; object-position:center;
filter: blur(28px) brightness(.6); transform: scale(1.12);
animation: none; z-index:0;
}
.room-hero .room-hero-main {
position:absolute; inset:0; width:100%; height:100%;
object-fit: contain; object-position: center;
animation: none; z-index:1;
}
.room-hero::before { z-index:2; }
/* ========= ACCORDION ========= */
.acc-content { max-height:0; overflow:hidden; transition: max-height .5s cubic-bezier(.2,.8,.2,1); }
.acc-item.open .acc-content { max-height: 500px; }
.acc-item.open .acc-icon { transform: rotate(45deg); }
.acc-icon { transition: transform .4s; }
/* ========= RIBBON ========= */
.ribbon-badge {
position:absolute; top:1.5rem; right:-2rem;
background:#9a7638; color:#fff; padding: .3rem 2.5rem;
font-family:'Oswald',sans-serif; font-size:.75rem; letter-spacing:.25em;
transform: rotate(35deg);
box-shadow: 0 6px 20px -6px rgba(154,118,56,.5);
}
/* ========= GALLERY LIGHTBOX ========= */
#lightbox {
position:fixed; inset:0; background:rgba(31,24,16,.95);
z-index:9997; display:none; align-items:center; justify-content:center;
padding:2rem;
}
#lightbox.open { display:flex; animation: fadeIn .4s; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
#lightbox img { max-width:90vw; max-height:85vh; object-fit:contain; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
/* ========= MOBILE ========= */
@media (max-width: 768px) {
.parallax-text { font-size: 5rem; }
.feat-num { font-size: 5rem; }
.quote-mark { font-size: 6rem; }
.brand-logo-shell { height: 50px; }
.brand-logo-img {
max-width: 110px;
max-height: 46px;
}
}
@media (max-width: 380px) {
.logo-text { font-size: .95rem !important; }
.logo-sub { letter-spacing: .25em !important; }
.brand-logo-img { max-height: 40px; }
}
/* ========= MEGA MENU ========= */
/* Header'ın kendisi position: fixed → mega-wrap için containing block olur */
.mega-wrap {
position: absolute;
left: 0; right: 0;
top: 100%;
perspective: 2000px;
visibility: hidden;
opacity: 0;
transition: opacity .3s ease;
}
/* Açılma yalnızca .open sınıfıyla (JS hover-intent ile yönetilir) —
eski tam-genişlik görünmez köprü kaldırıldı; navbar altında gezerken kendiliğinden açılmasını engeller. */
.nav-dropdown.open .mega-wrap { visibility: visible; opacity: 1; }
.nav-dropdown.open .nav-chevron { transform: rotate(180deg); }
.mega-backdrop {
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(31,24,16,.4) 0%, rgba(31,24,16,.55) 100%);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.mega-panel {
position: relative;
background: linear-gradient(180deg, #f5ede0 0%, #efe5d3 100%);
border-top: 1px solid rgba(154,118,56,.3);
box-shadow: 0 50px 80px -20px rgba(0,0,0,.4);
transform: translateY(-12px) rotateX(-8deg);
transform-origin: top center;
opacity: 0;
transition: transform .6s cubic-bezier(.16,1,.3,1), opacity .4s;
}
.nav-dropdown.open .mega-panel {
transform: translateY(0) rotateX(0);
opacity: 1;
}
.mega-accent {
height: 2px;
background: linear-gradient(90deg, transparent 0%, #b8914a 30%, #d4b376 50%, #b8914a 70%, transparent 100%);
background-size: 200% 100%;
animation: megaShimmer 3s linear infinite;
}
@keyframes megaShimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.mega-grid {
max-width: 1400px; margin: 0 auto;
display: grid;
grid-template-columns: 1fr 2fr 1.1fr;
gap: 0;
min-height: 460px;
}
@media (max-width: 1199px) {
.mega-grid { grid-template-columns: 1fr 2fr; min-height: auto; }
.mega-feature { display: none; }
}
/* LEFT: Intro */
.mega-intro {
padding: 50px 40px;
background: var(--c-bg-darker, #1f1810);
color: #fff;
position: relative;
overflow: hidden;
}
.mega-intro::before {
content: ''; position: absolute; top: 0; right: 0; width: 100%; height: 100%;
background: radial-gradient(circle at 100% 0%, rgba(212,179,118,.18) 0%, transparent 50%);
pointer-events: none;
}
.mega-eyebrow {
font-family: 'Oswald', sans-serif;
font-size: 11px; letter-spacing: .35em; color: #d4b376;
display: flex; align-items: center; gap: 10px;
margin-bottom: 24px;
}
.mega-dot {
width: 6px; height: 6px; background: #d4b376; border-radius: 50%;
box-shadow: 0 0 12px #d4b376;
animation: megaPulse 2s ease-in-out infinite;
}
@keyframes megaPulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: .5; transform: scale(1.4); }
}
.mega-title {
font-family: 'Playfair Display', serif;
font-size: 38px; line-height: 1.15;
color: #fff; font-weight: 400;
margin-bottom: 20px;
}
.mega-title em { color: #d4b376; font-style: italic; }
.mega-desc {
font-size: 14px; line-height: 1.7;
color: rgba(255,255,255,.65);
margin-bottom: 32px;
max-width: 320px;
}
.mega-viewall {
display: inline-flex; align-items: center; gap: 14px;
font-family: 'Oswald', sans-serif;
font-size: 12px; letter-spacing: .3em; color: #d4b376;
padding: 14px 0;
border-top: 1px solid rgba(212,179,118,.3);
border-bottom: 1px solid rgba(212,179,118,.3);
transition: all .3s;
}
.mega-viewall:hover { color: #fff; letter-spacing: .4em; }
.mega-viewall i { transition: transform .3s; }
.mega-viewall:hover i { transform: translateX(8px); }
/* MIDDLE: Cards grid */
.mega-cards {
padding: 36px 32px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
background: #f5ede0;
}
@media (max-width: 991px) { .mega-cards { grid-template-columns: repeat(2, 1fr); } }
.mega-card {
display: block;
position: relative;
background: #fff;
border: 1px solid rgba(154,118,56,.15);
overflow: hidden;
color: inherit;
text-decoration: none;
cursor: pointer;
transition: all .5s cubic-bezier(.16,1,.3,1);
opacity: 0;
transform: translateY(20px);
}
.mega-card * {
pointer-events: none;
}
.nav-dropdown.open .mega-card {
opacity: 1; transform: translateY(0);
}
.mega-card:hover {
transform: translateY(-6px);
box-shadow: 0 30px 60px -20px rgba(61,48,32,.3);
border-color: #d4b376;
}
.mega-card-img {
position: relative;
height: 130px;
overflow: hidden;
background: #2a2018;
}
.mega-card-img img {
width: 100%; height: 100%; object-fit: cover;
transition: transform 1.2s cubic-bezier(.16,1,.3,1);
}
.mega-card:hover .mega-card-img img { transform: scale(1.15); }
.mega-card-shine {
position: absolute; inset: 0;
background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.4) 50%, transparent 70%);
transform: translateX(-100%);
transition: transform .8s;
}
.mega-card:hover .mega-card-shine { transform: translateX(100%); }
.mega-card-num {
position: absolute; top: 10px; left: 12px;
font-family: 'Playfair Display', serif;
font-size: 14px; font-style: italic;
color: #fff; opacity: .85;
text-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.mega-card-body {
padding: 14px 16px 16px;
display: flex; flex-direction: column; gap: 4px;
}
.mega-card-title {
font-family: 'Playfair Display', serif;
font-size: 16px;
color: var(--c-cave-700, #3d3020);
line-height: 1.2;
}
.mega-card-price {
display: flex; align-items: baseline; gap: 6px;
margin-top: 2px;
}
.mega-price-label {
font-family: 'Oswald', sans-serif;
font-size: 9px; letter-spacing: .2em;
color: #b8914a;
}
.mega-price-val {
font-family: 'Playfair Display', serif;
font-size: 15px; color: #3d3020; font-weight: 600;
}
.mega-card-arrow {
position: absolute; top: 14px; right: 14px;
width: 32px; height: 32px;
background: rgba(255,255,255,.95);
color: #b8914a;
display: flex; align-items: center; justify-content: center;
font-size: 11px;
transform: translateX(40px) rotate(-45deg);
transition: all .4s cubic-bezier(.16,1,.3,1);
}
.mega-card:hover .mega-card-arrow {
transform: translateX(0) rotate(0);
background: #b8914a; color: #fff;
}
/* RIGHT: Featured */
.mega-feature {
position: relative;
background: #2a2018;
color: #fff;
overflow: hidden;
min-height: 460px;
display: flex; flex-direction: column;
justify-content: flex-end;
}
.mega-feature-img {
position: absolute; inset: 0;
overflow: hidden;
}
.mega-feature-img img {
width: 100%; height: 100%; object-fit: cover;
transition: transform 8s ease;
filter: brightness(.5) saturate(.9);
}
.nav-dropdown.open .mega-feature-img img {
transform: scale(1.1);
}
.mega-feature-img::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 0%, rgba(31,24,16,.85) 75%, #1f1810 100%);
}
.mega-feature-info {
position: relative; z-index: 2;
padding: 40px 32px;
}
.mega-feature-tag {
font-family: 'Oswald', sans-serif;
font-size: 10px; letter-spacing: .4em;
color: #d4b376;
display: inline-flex; align-items: center; gap: 8px;
margin-bottom: 14px;
}
.mega-feature-tag::before {
content: ''; width: 20px; height: 1px; background: #d4b376;
}
.mega-feature-title {
font-family: 'Playfair Display', serif;
font-size: 30px; line-height: 1.1;
color: #fff; margin-bottom: 12px;
}
.mega-feature-desc {
font-size: 13px; line-height: 1.6;
color: rgba(255,255,255,.7);
margin-bottom: 20px;
}
.mega-feature-btn {
display: inline-flex; align-items: center; gap: 10px;
font-family: 'Oswald', sans-serif;
font-size: 11px; letter-spacing: .3em;
color: #d4b376;
padding: 12px 0;
border-bottom: 1px solid rgba(212,179,118,.4);
transition: all .3s;
}
.mega-feature-btn:hover { color: #fff; letter-spacing: .4em; }
.mega-feature-btn i { transition: transform .3s; }
.mega-feature-btn:hover i { transform: translateX(6px); }
.mega-feature-deco {
position: absolute; top: 30px; right: 30px;
font-size: 60px; color: #d4b376; opacity: .15;
font-family: serif;
}
/* ========= MOBILE FULLSCREEN MENU ========= */
#mobileMenu { display: none; }
@media (max-width: 1023px) {
#mobileMenu { display: block; }
}
#mobileMenu[data-menu="closed"] { opacity: 0; visibility: hidden; }
#mobileMenu[data-menu="open"] { opacity: 1; visibility: visible; pointer-events: auto; }
#mobileMenu { transition: opacity .4s, visibility .4s; }
.mob-backdrop { transition: transform .8s cubic-bezier(.16,1,.3,1); }
#mobileMenu[data-menu="closed"] .mob-backdrop { transform: scale(1.15); }
#mobileMenu[data-menu="open"] .mob-backdrop { transform: scale(1); }
.mob-scroll { transition: transform .5s; }
#mobileMenu[data-menu="closed"] .mob-scroll { transform: translateY(20px); }
.mob-eyebrow {
opacity: 0; transform: translateY(10px);
transition: all .5s .2s;
}
#mobileMenu[data-menu="open"] .mob-eyebrow { opacity: 1; transform: translateY(0); }
.mob-item {
opacity: 0; transform: translateX(-30px);
transition: opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1);
}
#mobileMenu[data-menu="open"] .mob-item {
opacity: 1; transform: translateX(0);
transition-delay: calc(.15s + var(--i) * 0.06s);
}
.mob-link {
display: flex; align-items: baseline; gap: 16px;
width: 100%;
padding: 18px 0;
border: none;
border-bottom: 1px solid rgba(212,179,118,.18);
background: transparent;
color: #fff;
font-family: 'Playfair Display', serif;
font-size: 28px;
font-weight: 400;
text-align: left;
cursor: pointer;
position: relative;
overflow: hidden;
transition: color .3s;
}
.mob-link::before {
content: ''; position: absolute;
bottom: 0; left: 0; right: 0; height: 1px;
background: #d4b376;
transform: translateX(-101%);
transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.mob-link:active::before,
.mob-link:hover::before { transform: translateX(0); }
.mob-num {
font-family: 'Oswald', sans-serif;
font-size: 11px; letter-spacing: .3em;
color: #b8914a;
flex-shrink: 0;
transition: color .3s;
}
.mob-link:hover .mob-num { color: #d4b376; }
.mob-title {
flex: 1;
font-style: italic;
transition: transform .4s cubic-bezier(.16,1,.3,1), color .3s;
}
.mob-link:hover .mob-title { transform: translateX(8px); color: #d4b376; }
.mob-arrow, .mob-chev {
font-size: 12px; color: rgba(255,255,255,.4);
transition: transform .3s, color .3s;
}
.mob-link:hover .mob-arrow { transform: translateX(4px); color: #d4b376; }
.mob-chev { transition: transform .3s; }
.mob-link[data-mob-toggle] .mob-chev { color: rgba(255,255,255,.4); }
.mob-active .mob-title { color: #d4b376; }
/* Sub-panel (rooms) */
.mob-sub-panel {
position: absolute; inset: 0;
background: linear-gradient(180deg, #2a2018 0%, #1f1810 100%);
transform: translateX(100%);
transition: transform .5s cubic-bezier(.16,1,.3,1);
z-index: 20;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.mob-sub-panel[data-sub="open"] { transform: translateX(0); }
.mob-sub-header {
display: flex; align-items: center; justify-content: space-between;
padding: 20px 24px;
border-bottom: 1px solid rgba(212,179,118,.18);
}
.mob-back {
display: inline-flex; align-items: center; gap: 8px;
background: transparent; border: none; cursor: pointer;
color: #d4b376; font-family: 'Oswald', sans-serif;
font-size: 11px; letter-spacing: .3em;
transition: all .3s;
}
.mob-back:hover { color: #fff; gap: 12px; }
.mob-room-card {
display: flex; align-items: center; gap: 14px;
padding: 12px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(212,179,118,.15);
transition: all .4s cubic-bezier(.16,1,.3,1);
opacity: 0; transform: translateX(20px);
}
.mob-sub-panel[data-sub="open"] .mob-room-card {
opacity: 1; transform: translateX(0);
transition-delay: calc(.2s + var(--j) * 0.05s);
}
.mob-room-card:hover {
background: rgba(255,255,255,.08);
border-color: #d4b376;
transform: translateX(4px);
}
.mob-room-card:active { transform: scale(.98); }
.mob-room-img {
position: relative;
width: 70px; height: 70px;
overflow: hidden;
flex-shrink: 0;
background: #2a2018;
}
.mob-room-img img {
width: 100%; height: 100%; object-fit: cover;
transition: transform .8s cubic-bezier(.16,1,.3,1);
}
.mob-room-card:hover .mob-room-img img { transform: scale(1.15); }
.mob-room-shine {
position: absolute; inset: 0;
background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.3) 50%, transparent 70%);
transform: translateX(-100%);
transition: transform .6s;
}
.mob-room-card:hover .mob-room-shine { transform: translateX(100%); }
.mob-room-num {
position: absolute; top: 4px; left: 6px;
font-family: 'Playfair Display', serif;
font-size: 10px; font-style: italic;
color: #fff; opacity: .9;
}
.mob-room-body { flex: 1; min-width: 0; }
.mob-room-title {
font-family: 'Playfair Display', serif;
font-size: 15px;
color: #fff;
line-height: 1.2;
margin-bottom: 4px;
}
.mob-room-price {
display: flex; align-items: baseline; gap: 5px;
}
.mob-room-price span:last-child {
font-size: 13px; font-weight: 600;
}
.mob-viewall {
display: flex; align-items: center; justify-content: center; gap: 10px;
padding: 14px;
color: #d4b376;
font-family: 'Oswald', sans-serif;
font-size: 11px; letter-spacing: .3em;
border: 1px solid rgba(212,179,118,.3);
transition: all .3s;
margin-top: 16px;
}
.mob-viewall:hover { background: #d4b376; color: #1f1810; letter-spacing: .4em; }
.mob-viewall i { transition: transform .3s; }
.mob-viewall:hover i { transform: translateX(6px); }
.mob-lang {
flex: 1;
padding: 12px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(212,179,118,.15);
color: rgba(255,255,255,.7);
text-align: center;
font-family: 'Playfair Display', serif;
font-size: 14px;
transition: all .3s;
}
.mob-lang:hover { color: #fff; border-color: #d4b376; }
.mob-lang-active {
background: rgba(212,179,118,.15);
border-color: #d4b376;
color: #d4b376;
}
.mob-social {
width: 44px; height: 44px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(212,179,118,.15);
color: rgba(255,255,255,.7);
display: flex; align-items: center; justify-content: center;
transition: all .3s;
}
.mob-social:hover { background: #d4b376; color: #1f1810; border-color: #d4b376; transform: translateY(-2px); }
.mob-cta {
display: flex; align-items: center; justify-content: center; gap: 12px;
padding: 16px;
background: linear-gradient(135deg, #d4b376 0%, #b8914a 100%);
color: #1f1810;
font-family: 'Oswald', sans-serif;
font-size: 12px; letter-spacing: .3em;
font-weight: 600;
transition: all .3s;
box-shadow: 0 10px 30px -10px rgba(212,179,118,.5);
}
.mob-cta:hover { letter-spacing: .4em; box-shadow: 0 15px 40px -10px rgba(212,179,118,.7); }
.mob-cta:active { transform: scale(.98); }
.mob-cta i { transition: transform .3s; }
.mob-cta:hover i { transform: translateX(6px); }
/* Close button rotation */
.mob-close { transition: transform .3s, background .3s, border-color .3s; }
.mob-close:hover { background: rgba(212,179,118,.15); border-color: #d4b376; transform: rotate(90deg); }
.mob-close:active { transform: rotate(90deg) scale(.95); }
/* Top bar slide */
#mobileMenu[data-menu="closed"] > .relative.z-10:first-of-type { transform: translateY(-100%); }
#mobileMenu[data-menu="open"] > .relative.z-10:first-of-type { transform: translateY(0); transition: transform .5s .1s cubic-bezier(.16,1,.3,1); }