:root { --brand-accent: #b38a6d;--brand-accent-text: #ffffff;--text: #f2f2f2;--muted: #d9d9d9;--shadow: 0 20px 60px rgba(0,0,0,.45);--maxw: 1400px;--scrollbar-width: 12px;--section-padding-desktop: 50px 20px;--section-padding-mobile: 50px 16px 60px;--wrap-padding-desktop: 0 100px;--wrap-padding-mobile: 0 30px;--lines-desktop: 80px;--lines-mobile: 28px;} * { box-sizing: border-box;} html, body { height: auto;overflow-x: hidden;} body { margin: 0;font-family: 'Urbanist', sans-serif;color: var(--text);background: radial-gradient(ellipse at center, #1a1a1a 0%, #0d0f10 60%, #000000 100%);position: relative;} body::before { content: '';position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: radial-gradient(circle at 20% 30%, rgba(179, 138, 109, 0.03) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(179, 138, 109, 0.02) 0%, transparent 50%), radial-gradient(circle at 50% 50%, rgba(179, 138, 109, 0.01) 0%, transparent 70%);pointer-events: none;z-index: -1;} ::-webkit-scrollbar { width: 10px;} ::-webkit-scrollbar-track { background: #1a1a1a;} ::-webkit-scrollbar-thumb { background-color: var(--brand-accent);border-radius: 6px;border: 2px solid #1a1a1a;} ::-webkit-scrollbar-thumb:hover { background-color: #a07457;} html { scrollbar-width: thin;scrollbar-color: var(--brand-accent) #1a1a1a;} section { position: relative;background: linear-gradient(135deg, #262626 0%, #1f1f1f 100%);color: var(--text);padding: var(--section-padding-desktop);overflow: hidden;} section:not(.hero) { border-bottom: 1px solid color-mix(in srgb, var(--brand-accent) 65%, transparent);border-top: 1px solid color-mix(in srgb, var(--brand-accent) 65%, transparent);} section::before, section::after { content: "";position: absolute;top: 0;bottom: 0;width: 1px;background: color-mix(in srgb, var(--brand-accent) 65%, transparent);z-index: 3;} section::before { left: var(--lines-desktop);} section::after { right: var(--lines-desktop);} .wrap { max-width: var(--maxw);margin: 0 auto;text-align: center;padding: var(--wrap-padding-desktop);} @media (max-width: 1024px) { :root { --section-padding-desktop: var(--section-padding-mobile);--wrap-padding-desktop: var(--wrap-padding-mobile);--lines-desktop: var(--lines-mobile);} } @media (max-width: 480px) { :root { --section-padding-mobile: 50px 16px 60px;} section::before, section::after { display: none;} .wrap { padding: 0;} } h2 { font-family: 'Cormorant Garamond', serif;font-weight: 500;text-transform: uppercase;letter-spacing: 0.15em;font-size: clamp(25px, 5.6vw, 50px);margin: 0 0 28px;background: linear-gradient(135deg, var(--brand-accent) 0%, #d4a574 50%, #f0c991 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;text-shadow: none;} h3 { font-family: 'Cormorant Garamond', serif;font-weight: 600;text-transform: uppercase;letter-spacing: 0.1em;font-size: 20px;margin: 0 0 15px 0;background: linear-gradient(135deg, var(--brand-accent) 0%, #d4a574 50%, #f0c991 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;} .subtext { max-width: 980px;margin: 0 auto 40px;} .logo { height: 100px;width: auto;margin: 0 0 15px 0;opacity: 0.9;transition: opacity 0.3s ease;} .logo:hover { opacity: 1;} @media (max-width: 1024px) { h2 { text-align: center;font-size: clamp(32px, 7vw, 60px);} } .animate-on-scroll { opacity: 0;transform: translateY(40px);transition: all 1.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);} .animate-on-scroll.animate { opacity: 1;transform: translateY(0);} .animate-slide-left { opacity: 0;transform: translateX(-60px);transition: all 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);} .animate-slide-left.animate { opacity: 1;transform: translateX(0);} .animate-slide-right { opacity: 0;transform: translateX(60px);transition: all 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);} .animate-slide-right.animate { opacity: 1;transform: translateX(0);} @media (max-width: 1024px) { .animate-slide-left { transform: translateX(-40px);transition: all 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);} .animate-slide-right { transform: translateX(40px);transition: all 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);} .animate-on-scroll { transform: translateY(30px);transition: all 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);} } .nav { position: fixed;top: 0;left: 0;right: var(--scrollbar-width);z-index: 9999;display: flex;justify-content: center;padding: 24px 20px;background: transparent;backdrop-filter: none;box-sizing: border-box;transition: all 0.3s ease;} .nav.scrolled { background: linear-gradient(180deg, rgba(0,0,0,.75), rgba(0,0,0,0));backdrop-filter: blur(6px);} .nav-inner { width: 100%;max-width: var(--maxw);display: flex;align-items: center;justify-content: flex-end;gap: 28px;letter-spacing: 2px;} .menu { display: flex;gap: 28px;align-items: center;} .menu a { color: var(--text);text-decoration: none;font-weight: 500;opacity: .95;font-family: 'Urbanist', sans-serif;font-weight: 500;transition: all 0.3s ease;font-size: 18px;transform: translateX(30px);opacity: 0;animation: slideInFromRight 0.6s ease forwards;} .menu a:nth-child(1) { animation-delay: 0.1s;} .menu a:nth-child(2) { animation-delay: 0.2s;} .menu a:nth-child(3) { animation-delay: 0.3s;} .menu a:nth-child(4) { animation-delay: 0.4s;} @keyframes slideInFromRight { to { transform: translateX(0);opacity: 0.95;} } .menu a:hover { color: var(--brand-accent);border-radius: 8px;} .btn { display: inline-flex;align-items: center;gap: .5rem;padding: 12px 18px;border-radius: 10px;background: var(--brand-accent);color: var(--brand-accent-text);text-decoration: none;font-weight: 600;box-shadow: var(--shadow);font-family: 'Urbanist', sans-serif;transition: all 0.3s ease;font-size: 18px;transform: translateX(30px);opacity: 0;animation: slideInFromRight 0.6s ease 0.5s forwards;} .btn:hover { background: transparent;color: var(--brand-accent);outline: 2px solid var(--brand-accent);} .hamburger { display: none;position: relative;width: 28px;height: 22px;cursor: pointer;padding: 4px;background: none;border: none;z-index: 3;} .hamburger span { position: absolute;left: 0;width: 100%;height: 2px;background: var(--text);border-radius: 1px;transition: transform .28s ease, top .28s ease, opacity .2s ease;transform-origin: center;} .hamburger span:nth-child(1) { top: 0;} .hamburger span:nth-child(2) { top: 10px;} .hamburger span:nth-child(3) { top: 20px;} .hamburger.active span:nth-child(1) { top: 10px;transform: rotate(45deg);} .hamburger.active span:nth-child(2) { opacity: 0;transform: scaleX(.8);} .hamburger.active span:nth-child(3) { top: 10px;transform: rotate(-45deg);} @media (max-width: 1024px) { .nav { right: 0;} .hamburger { display: flex;} .nav-inner { justify-content: space-between;} .menu { position: fixed;top: 0;left: -100%;width: 100%;height: 100vh;background: rgba(13, 15, 16, 0.98);backdrop-filter: blur(15px);flex-direction: column;justify-content: center;align-items: center;gap: 40px;transition: left 0.4s ease;z-index: 2;} .menu.active { left: 0;} .menu a { font-size: 28px;opacity: 0;transform: translateY(30px);animation: none;} .menu.active a { animation: fadeInUp 0.4s ease forwards;} .menu.active a:nth-child(1) { animation-delay: 0.1s;} .menu.active a:nth-child(2) { animation-delay: 0.2s;} .menu.active a:nth-child(3) { animation-delay: 0.3s;} .menu.active a:nth-child(4) { animation-delay: 0.4s;} .btn { padding: 10px 16px;font-size: 16px;} } @media (max-width: 480px) { .btn { padding: 8px 14px;font-size: 15px;} } .hero { position: relative;min-height: 100svh;display: flex;flex-direction: column;justify-content: center;align-items: center;isolation: isolate;overflow: hidden;background: transparent;border: none;padding: 0;} .hero::before, .hero::after { display: none;} .hero-video { position: absolute;inset: 0;width: 100%;height: 100%;object-fit: cover;z-index: 0;filter: blur(2px);transition: opacity 0.5s ease;} .js .hero-video { opacity: 0;} .js .hero-video.ready { opacity: 0.7;} .hero::before { content: "";position: absolute;inset: 0;background: linear-gradient(0deg, black 0%, rgba(0, 0, 0, 0.5) 30%, rgba(0, 0, 0, 0.2) 60%, transparent 100%);z-index: 1;display: block;} .hero::after { content: "";position: absolute;left: 0;right: 0;bottom: 0;height: 40%;z-index: 1;background: linear-gradient(0deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.4) 50%, transparent 100%);display: block;} .hero .container { position: relative;z-index: 2;width: 100%;max-width: var(--maxw);margin: 0 auto;padding: 20px;text-align: center;} .hero .intro { color: #fff;} .hero-content { max-width: 800px;margin: 0 auto;padding: 20px;} .hero .intro h1 { font-family: 'Cormorant Garamond', serif;font-weight: 700;line-height: 1.05;font-size: clamp(42px, 6.2vw, 96px);margin: 0 0 20px 0;letter-spacing: .2px;text-shadow: 0 1px 0 rgba(0,0,0,.20), 0 10px 30px rgba(0,0,0,.35);opacity: 0.01;transform: translateX(-50px);animation: fadeInRight 0.8s ease 0.2s forwards;} .hero-subtitle { font-family: 'Cormorant Garamond', serif;font-size: clamp(20px, 3vw, 32px);font-weight: 600;color: var(--brand-accent);margin: 0 0 16px 0;text-shadow: 0 1px 0 rgba(0,0,0,.5);opacity: 0;transform: translateY(20px);animation: fadeInUp 0.8s ease 0.4s forwards;} .hero-description { font-family: 'Urbanist', sans-serif;font-size: clamp(16px, 2vw, 20px);line-height: 1.6;color: #f0f0f0;margin: 0 0 30px 0;text-shadow: 0 1px 0 rgba(0,0,0,.7);opacity: 0;transform: translateY(20px);animation: fadeInUp 0.8s ease 0.6s forwards;} @keyframes fadeInRight { to { opacity: 1;transform: translateX(0);} } @keyframes fadeInLeft { to { opacity: 1;transform: translateX(0);} } @keyframes fadeInUp { to { opacity: 1;transform: translateY(0);} } .hero-btn { display: inline-block;padding: 16px 36px;border-radius: 9999px;background: var(--brand-accent);color: var(--brand-accent-text);text-decoration: none;font-family: 'Urbanist', sans-serif;font-size: 18px;letter-spacing: 1px;transition: all 0.3s ease;box-shadow: 0 12px 40px rgba(0,0,0,.3);text-transform: uppercase;opacity: 0;transform: translateX(50px);animation: fadeInLeft 0.8s ease 0.5s forwards;} .hero-btn:hover { background: transparent;color: var(--brand-accent);outline: 2px solid var(--brand-accent);} @media (max-width: 1024px) { .hero .intro h1 { font-size: clamp(45px, 8vw, 52px);margin-bottom: 16px;} .hero-content { padding: 20px 10px;} .hero-subtitle { font-size: clamp(20px, 4vw, 24px);margin-bottom: 12px;} .hero-description { font-size: clamp(14px, 3vw, 16px);margin-bottom: 24px;} .hero-btn { padding: 16px 32px;font-size: 18px;} } @media (max-width: 480px) { .hero-btn { padding: 14px 28px;font-size: 16px;} } .welcome .cta-btn { display: inline-block;padding: 18px 40px;border-radius: 9999px;background: var(--brand-accent);color: var(--brand-accent-text);text-decoration: none;font-weight: 600;font-size: 18px;transition: all .25s ease;box-shadow: 0 8px 30px rgba(0,0,0,.25);} .welcome .cta-btn:hover { background: transparent;color: var(--brand-accent);outline: 2px solid var(--brand-accent);} .story { display: flex;flex-wrap: wrap;padding: 0;} .story-text { flex: 1 1 50%;padding: 50px 100px;display: flex;align-items: center;z-index: 1;position: relative;} .story-inner { max-width: 600px;} .story-image { flex: 1 1 50%;position: relative;} .story-image img { width: 100%;height: 100%;object-fit: cover;display: block;} .story-image::after { content: "";position: absolute;inset: 0;background: radial-gradient(1200px 70% at 20% 50%, rgba(0,0,0,.25) 0%, rgba(0,0,0,.50) 65%, rgba(0,0,0,.70) 100%);pointer-events: none;z-index: 1;} .story-image-mobile { display: none;} @media (max-width: 1024px) { .story-image-mobile { display: block;position: relative;overflow: hidden;padding: 0;margin: 0 auto;} .story-image-mobile::after { content: "";position: absolute;inset: 0;z-index: 2;pointer-events: none;background: linear-gradient( rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.8) );} .story-image-mobile img { width: 100%;height: auto;display: block;z-index: 1;position: relative;} } .gallery-grid .gallery-item { position: relative;width: 100%;aspect-ratio: 1 / 1 !important;overflow: hidden;} .gallery-grid .gallery-item img { width: 100%;height: 100%;object-fit: cover;object-position: center;} @media (max-width: 1024px) { .story { position: relative;overflow: hidden;background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url("cevapi.webp") center/cover no-repeat;padding: var(--section-padding-mobile);} .story-image { display: none;} .story-text { position: relative;z-index: 2;padding: 0;color: #fff;flex: 1 1 100%;display: block;} .story-inner { max-width: var(--maxw);margin: 0 auto;padding: var(--wrap-padding-mobile);} } .map { width: 100%;max-width: 800px;height: 300px;box-shadow: 0 8px 30px rgba(0,0,0,.25);} @media (max-width: 1024px) { .map { height: 300px;width: 100%;} } @media (max-width: 480px) { .map { height: 300px;width: 100%;} } .menu-container { width: 100%;max-width: 1000px;margin: 0 auto;position: relative;} .menu-pdf { width: 100%;height: 80vh;min-height: 700px;box-shadow: 0 8px 30px rgba(0,0,0,.25);border: none;border-radius: 8px;} .menu-mobile-fallback { display: none;text-align: center;padding: 20px;} .menu-mobile-fallback h3 { margin: 0 0 16px;font-size: 22px;} .menu-mobile-fallback p { margin: 0 0 20px;color: var(--muted);} .menu-download-btn { display: inline-block;padding: 12px 24px;border-radius: 9999px;background: var(--brand-accent);color: var(--brand-accent-text);text-decoration: none;font-family: 'Urbanist', sans-serif;font-size: 16px;transition: all 0.3s ease;} .menu-download-btn:hover { background: transparent;color: var(--brand-accent);outline: 2px solid var(--brand-accent);} @media (max-width: 1024px) { .menu-pdf { height: 70vh;min-height: 600px;} } @media (max-width: 768px) { .menu-pdf { height: 75vh;min-height: 500px;} } @media (max-width: 480px) { .menu-pdf { display: none;} .menu-mobile-fallback { display: block;} } .gallery-grid { display: grid;gap: 20px;max-width: 1200px;margin: 0 auto;grid-template-columns: repeat(3, 1fr);} @media (max-width: 992px) { .gallery-grid { grid-template-columns: repeat(2, 1fr);} } @media (max-width: 600px) { .gallery-grid { grid-template-columns: repeat(1, 1fr);} } .gallery-item { position: relative;overflow: hidden;border-radius: 12px;box-shadow: 0 10px 40px rgba(0,0,0,.3);transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);background: #2a2a2a;} .gallery-item:hover { transform: translateY(-8px);box-shadow: 0 20px 60px rgba(0,0,0,.4);} .gallery-item img { width: 100%;aspect-ratio: 1 / 1;height: auto;object-fit: cover;display: block;border-radius: 12px;transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);} .gallery-item:hover img { transform: scale(1.08);opacity: 1;} .gallery-item::after { content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: linear-gradient( 135deg, rgba(179, 138, 109, 0.1) 0%, rgba(179, 138, 109, 0.05) 50%, transparent 100% );opacity: 0;transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);pointer-events: none;} .gallery-item:hover::after { opacity: 1;} .gallery-item:not(.animate) { transform: translateY(20px) scale(0.95);filter: blur(2px);} .gallery-item.animate { transform: translateY(0) scale(1);filter: blur(0);} @media (max-width: 1024px) { .gallery-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));gap: 16px;} .gallery-item { border-radius: 8px;} .gallery-item img { height: 200px;} } .contact-form { max-width: 600px;margin: 0 auto;} .form-group { margin-bottom: 24px;} .form-group label { display: block;font-family: 'Cormorant Garamond', serif;font-size: 18px;font-weight: 600;color: #f0efec;margin-bottom: 8px;text-transform: uppercase;letter-spacing: 0.1em;} .form-group input, .form-group textarea { width: 100%;padding: 16px;border: 2px solid #444;border-radius: 8px;background: #333;color: #f0f0f0;font-family: 'Urbanist', sans-serif;font-size: 16px;transition: border-color 0.3s ease;} .form-group input:focus, .form-group textarea:focus { outline: none;border-color: var(--brand-accent);} .form-group textarea { resize: vertical;min-height: 120px;} .form-submit-btn { position: relative;min-width: 200px;height: 44px;display: inline-flex;align-items: center;justify-content: center;gap: .6rem;padding: 18px 40px;border-radius: 9999px;background: var(--brand-accent);color: var(--brand-accent-text);border: none;font-family: 'Urbanist', sans-serif;font-size: 18px;letter-spacing: 1px;text-transform: uppercase;cursor: pointer;transition: all 0.3s ease;box-shadow: 0 8px 30px rgba(0,0,0,.25);margin-top: 20px;} .form-submit-btn:hover { background: transparent;color: var(--brand-accent);outline: 2px solid var(--brand-accent);} .form-submit-btn .spinner { width: 18px;height: 18px;border: 2px solid transparent;border-top-color: currentColor;border-right-color: currentColor;border-radius: 50%;display: none;animation: spin .8s linear infinite;} .form-submit-btn.loading .spinner { display: inline-block;} .form-submit-btn.loading .btn-text { opacity: .6;} .form-status { margin-top: 12px;padding: 10px 12px;border-radius: 6px;display: none;font-size: 0.95rem;} .form-status.show { display: block;} .form-status.ok { background: #e8f7ee;color: #1b5e20;border: 1px solid #b6e2c4;} .form-status.err { background: #fdecea;color: #b71c1c;border: 1px solid #f5c6c3;} @keyframes spin { to { transform: rotate(360deg);} } .hp { display: none;} .footer { background: linear-gradient(135deg, #1a1a1a 0%, #0f0f0f 100%);color: var(--text);border-top: 1px solid color-mix(in srgb, var(--brand-accent) 65%, transparent);padding: var(--section-padding-desktop);} .footer .wrap { text-align: left;} .footer-content { display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 40px;margin-bottom: 30px;} .footer h4 { font-family: 'Cormorant Garamond', serif;font-size: 20px;font-weight: 600;color: #f0efec;margin: 0 0 15px 0;text-transform: uppercase;letter-spacing: 0.1em;} .footer-contact p { line-height: 1.6;color: #d0d0d0;margin: 0 0 8px 0;display: flex;align-items: center;gap: 10px;} .footer-icon { width: 20px;height: 20px;opacity: 0.8;flex-shrink: 0;} .footer-contact a { color: var(--brand-accent);text-decoration: none;transition: color 0.3s ease;} .footer-contact a:hover { color: #f0efec;} .footer-bottom { text-align: center;padding-top: 20px;border-top: 1px solid #333;} .footer-bottom p { color: #999;margin: 0;} @media (max-width: 1024px) { .footer .wrap { text-align: center;} .footer-content { gap: 30px;} .footer-info, .footer-contact, .footer-hours { text-align: center;} .footer-contact p { justify-content: center;} } .lb-overlay { position: fixed;inset: 0;background: rgba(0,0,0,0);display: flex;align-items: center;justify-content: center;z-index: 99999;padding: 20px;opacity: 0;visibility: hidden;transition: opacity 0.3s ease, visibility 0.3s ease, background-color 0.3s ease;} .lb-overlay.show { opacity: 1;visibility: visible;background: rgba(0,0,0,.85);} .lb-overlay img { max-width: 90vw;max-height: 90vh;box-shadow: 0 20px 60px rgba(0,0,0,.6);border-radius: 8px;transform: scale(0.8);opacity: 0;transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.3s ease;} .lb-overlay.show img { opacity: 1;transform: scale(1);} .lb-close { position: absolute;top: 20px;right: 20px;background: rgba(0,0,0,0.5);color: #fff;border: 0;font-size: 28px;cursor: pointer;line-height: 1;width: 40px;height: 40px;border-radius: 50%;display: flex;align-items: center;justify-content: center;transition: all 0.3s ease;opacity: 0;transform: scale(0.8);} .lb-overlay.show .lb-close { opacity: 1;transform: scale(1);} .lb-close:hover { background: rgba(0,0,0,0.8);transform: scale(1.1);} .lb-overlay.closing { opacity: 0;background: rgba(0,0,0,0);} .lb-overlay.closing img { transform: scale(0.8);opacity: 0;} .lb-overlay.closing .lb-close { opacity: 0;transform: scale(0.8);} .to-top { position: fixed;right: 16px;bottom: 16px;width: 44px;height: 44px;display: none;align-items: center;justify-content: center;border-radius: 9999px;border: 0;cursor: pointer;background: var(--brand-accent);box-shadow: 0 10px 30px rgba(0,0,0,.35);z-index: 10000;transition: background 0.3s ease, transform 0.2s ease;} .to-top svg { width: 22px;height: 22px;pointer-events: none;} .to-top.show { display: inline-flex;} .to-top:hover { background: transparent;outline: 2px solid var(--brand-accent);transform: translateY(-2px);} .to-top:hover svg { stroke: var(--brand-accent);} .footer-social { margin-top: 15px;display: flex;gap: 10px;} .footer-social a { transition: transform 0.2s ease, opacity 0.2s ease;} .footer-social a:hover { transform: scale(1.1);opacity: 0.8;} @media (max-width: 768px) { .footer-social { justify-content: center;} }