:root {
    --primary-color: #054959; /* Dark Teal */
    --secondary-color: #f68633; /* Orange */
    --text-light: #ffffff;
    --text-dark: #333333;
    --header-height: 100px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Montserrat', sans-serif;
    background-color: var(--primary-color);
    color: var(--text-light);
    overflow-x: hidden;
    overflow-wrap: break-word;
    word-wrap: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
}

a {
    text-decoration: none;
    color: inherit;
}

button {
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    color: inherit;
}

/* Hero Section */
.hero {
    position: relative;
    width: 100vw;
    height: 100vh;
    min-height: 700px;
    display: flex;
    flex-direction: column;
}

.hero-bg-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
}

.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
}

.hero-slide.active {
    opacity: 1;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    background-image: 
        radial-gradient(rgba(0, 0, 0, 0.6) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.7) 100%);
    background-size: 4px 4px, 100% 100%;
    z-index: -1;
}

/* Header */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    display: flex;
    align-items: center;
    padding: 0 40px;
    z-index: 999;
    background-color: transparent;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.4s ease, backdrop-filter 0.4s ease;
}

.header.scrolled {
    background-color: rgba(5, 73, 89, 0.75); /* SkyVera primary color with transparency */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

.header.hidden {
    transform: translateY(-100%);
}

.header-container {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-img {
    height: 70px;
    width: auto;
    object-fit: contain;
    display: block;
}

/* Navigation */
.nav-links {
    display: flex;
    gap: 24px;
    align-items: center;
}

.nav-link {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: capitalize;
    transition: color 0.3s ease;
    position: relative;
    white-space: nowrap;
    display: flex;
    align-items: center;
}

.nav-link:hover {
    color: var(--secondary-color);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--secondary-color);
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

/* Right Actions */
.header-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s ease;
}

.action-btn:hover {
    color: var(--secondary-color);
}

.language-selector {
    position: relative;
}

.language-current {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.3s ease;
    padding: 10px 0;
}

.language-current:hover {
    color: var(--secondary-color);
}

.language-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: rgba(5, 73, 89, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 12px;
    padding: 8px 0;
    min-width: 140px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.language-selector:hover .language-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.lang-option {
    display: block;
    padding: 10px 20px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.3s ease, color 0.3s ease;
    text-align: center;
}

.lang-option:hover,
.lang-option.active {
    background: rgba(255, 255, 255, 0.1);
    color: var(--secondary-color);
}


.menu-btn {
    margin-left: 10px;
}

/* Hero Content */
.hero-content {
    flex: 1;
    display: flex;
    align-items: flex-end;
    padding: 0 40px 140px;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
}

.hero-text-area {
    max-width: 600px;
    animation: fadeInUp 1s ease-out;
}

.hero-title {
    font-size: 64px;
    font-weight: 500;
    line-height: 1.1;
    margin-bottom: 0;
    letter-spacing: -1px;
}

.primary-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background-color: var(--secondary-color);
    color: var(--text-light);
    padding: 16px 32px;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.primary-btn:hover {
    background-color: #e0772b;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(246, 134, 51, 0.3);
}

/* Bottom Controls */
.hero-bottom {
    position: absolute;
    bottom: 40px;
    left: 0;
    width: 100%;
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bottom-left {
    flex: 1;
}

.slider-controls {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 24px;
}

.slider-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
    transition: all 0.3s ease;
}

.slider-arrow:hover {
    opacity: 1;
    color: var(--secondary-color);
}

.slider-progress {
    display: flex;
    gap: 8px;
    align-items: center;
}

.progress-bar {
    width: 40px;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.3);
    position: relative;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.progress-bar:hover {
    background-color: rgba(255, 255, 255, 0.6);
}

.progress-bar.active {
    background-color: var(--text-light);
}

.contact-btn {
    position: fixed;
    bottom: 40px;
    right: max(40px, calc((100vw - 1600px) / 2));
    z-index: 9999;
    text-decoration: none;
    display: inline-block;
}
html[dir="rtl"] .contact-btn {
    right: auto;
    left: max(40px, calc((100vw - 1600px) / 2));
}

.contact-btn-inner {
    display: flex;
    align-items: stretch;
    background-color: var(--secondary-color);
    color: var(--text-light);
    transition: all 0.3s ease;
}

.contact-btn-inner:hover {
    background-color: #e0772b;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(246, 134, 51, 0.3);
}

.contact-text {
    padding: 16px 24px;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
}

.contact-icon {
    padding: 14px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid rgba(5, 73, 89, 0.1);
}
html[dir="rtl"] .contact-icon {
    border-left: none;
    border-right: 1px solid rgba(5, 73, 89, 0.1);
}
html[dir="rtl"] .contact-icon svg {
    transform: scaleX(-1);
}


/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive adjustments */
@media (max-width: 1600px) {
    .logo-img {
        height: 50px;
    }
    .header {
        padding: 0 20px;
    }
    .header-actions {
        gap: 12px;
    }
    .nav-links {
        gap: 12px;
    }
    .nav-link {
        font-size: 11px;
        letter-spacing: 0px;
    }
    .mega-menu-title {
        font-size: 12px;
    }
}

@media (max-width: 1024px) {
    .nav-links {
        display: none;
    }
    
    .hero-title {
        font-size: 48px;
    }
}

@media (max-width: 768px) {
    .header {
        padding: 0 20px;
    }
    
    .hero-title {
        font-size: 32px;
    }
    
    .hero-content {
        padding: 0 20px 140px;
    }
    
    .hero-bottom {
        padding: 0 20px;
        bottom: 20px;
        flex-direction: column;
        gap: 20px;
    }
    
    .bottom-left {
        display: none;
    }
}

/* ============================================================
   SkyVera — "Biz Kimiz" / Sıcak Serif bölümü
   Hero'nun hemen altına yerleştirilir.
   ============================================================ */
.skyvera-about *, .skyvera-solutions *, .parallax-divider *{ box-sizing:border-box; }
.skyvera-about, .skyvera-solutions, .parallax-divider {
  --sv-accent:var(--secondary-color);
  --sv-accent-deep:#C96A11;
  --sv-ink:#211E19;
  --sv-ink-2:#4A443B;
  --sv-muted:#847B6C;
  --sv-cream:#F3EFE8;
  --sv-hair:#DCD3C4;
  --sv-ff-sans:'Montserrat', sans-serif;
  --sv-ff-serif:"Newsreader", Georgia, serif;
  --sv-maxw:1280px;
  --sv-pad:clamp(24px,5vw,100px);
  --sv-ease:cubic-bezier(.22,.61,.36,1);

  background:var(--sv-cream);
  color:var(--sv-ink);
  font-family:var(--sv-ff-sans);
  -webkit-font-smoothing:antialiased;
}
.skyvera-about img{ max-width:100%; display:block; }

/* yumuşak geçiş: hero'nun koyu altından kreme. (Kaldırıldı) */

.skyvera-about .sv-section{ padding:clamp(64px,9vh,128px) 0; }
.skyvera-about .sv-container{ max-width:var(--sv-maxw); margin:0 auto; padding:0 var(--sv-pad); }

.skyvera-about .sv-eyebrow{
  display:inline-flex; align-items:center; gap:11px; white-space:nowrap;
  font-size:12.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--sv-accent-deep);
}
.skyvera-about .sv-eyebrow .ln{ width:34px; height:2px; background:var(--sv-accent); border-radius:2px; }

.skyvera-about .sv-top{
  display:grid; grid-template-columns:auto 1fr; gap:clamp(28px,4vw,64px);
  align-items:end; margin-bottom:clamp(40px,6vw,72px);
}
.skyvera-about .sv-vside{
  position: relative;
  width: 24px;
  min-height: 280px;
}
.skyvera-about .sv-vside span {
  position: absolute;
  bottom: 0;
  left: 0;
  transform: rotate(-90deg);
  transform-origin: bottom left;
  white-space: nowrap;
  font-size: 12px; 
  font-weight: 700; 
  letter-spacing: .32em; 
  text-transform: uppercase;
  color: var(--sv-muted);
}
.skyvera-about .sv-headline{
  font-family:var(--sv-ff-serif); font-weight:400; line-height:1.0; letter-spacing:-.01em;
  font-size:clamp(40px,5.5vw,88px); margin:18px 0 0;
  color:var(--sv-ink);
}
.skyvera-about .sv-headline .accent{ color:var(--sv-accent-deep); font-style:italic; }

.skyvera-about .sv-grid2{
  display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(40px,6vw,90px); align-items:start;
}
.skyvera-about .sv-copy p{ margin:0 0 20px; }
.skyvera-about .sv-lead, .skyvera-solutions .sv-lead { font-size:clamp(17px,1.3vw,20px); line-height:1.62; color:var(--sv-ink-2); }
.skyvera-about .sv-body, .skyvera-solutions .sv-body { font-size:15.5px; line-height:1.75; color:var(--sv-muted); }

.skyvera-about .sv-btn{
  display:inline-flex; align-items:center; gap:14px; white-space:nowrap;
  font-family:var(--sv-ff-sans); font-size:15px; font-weight:600;
  color:var(--sv-ink); background:transparent; text-decoration:none;
  padding:16px 26px; border-radius:0; margin-top:12px;
  box-shadow:inset 0 0 0 1.5px var(--sv-hair);
  transition:box-shadow .35s var(--sv-ease), color .35s var(--sv-ease);
}
.skyvera-about .sv-btn .arrow{ display:inline-flex; transition:transform .4s var(--sv-ease); }
.skyvera-about .sv-btn:hover{ box-shadow:inset 0 0 0 1.5px var(--sv-accent); color:var(--sv-accent-deep); }
.skyvera-about .sv-btn:hover .arrow{ transform:translateX(5px); }

/* görsel kolaj */
.skyvera-about .sv-collage{ position:relative; min-height:clamp(360px,40vw,560px); }
.skyvera-about .sv-ph{
  position:absolute; overflow:hidden; border-radius:14px; margin:0; isolation:isolate;
  display:flex; align-items:flex-end;
  background:linear-gradient(135deg,#E7E0D3 0%, #DAD1BF 100%);
  box-shadow:0 34px 70px -34px rgba(33,30,25,.5);
}
.skyvera-about .sv-ph::before{
  content:""; position:absolute; inset:0; z-index:0;
  background-image:repeating-linear-gradient(45deg, rgba(255,255,255,.5) 0 2px, transparent 2px 11px);
  opacity:.4;
}
.skyvera-about .sv-ph::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:radial-gradient(420px 320px at var(--mx,70%) var(--my,30%), rgba(229,129,28,.20), transparent 60%);
  opacity:0; transition:opacity .5s var(--sv-ease);
}
.skyvera-about .sv-ph:hover::after{ opacity:1; }

.skyvera-about .sv-ph img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.skyvera-about .c-a{ width:66%; aspect-ratio:3/4; top:0; right:0; z-index:1; }
.skyvera-about .c-b{ width:54%; aspect-ratio:4/3; left:0; top:34%; z-index:2; border:6px solid var(--sv-cream); }
.skyvera-about .c-c{ width:30%; aspect-ratio:1/1; right:8%; bottom:-4%; z-index:3; border:6px solid var(--sv-cream); }

html[dir="rtl"] .skyvera-about .c-a { right: auto; left: 0; }
html[dir="rtl"] .skyvera-about .c-b { left: auto; right: 0; }
html[dir="rtl"] .skyvera-about .c-c { right: auto; left: 8%; }

/* scroll reveal */
.skyvera-about .reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--sv-ease), transform .9s var(--sv-ease); }
.skyvera-about .reveal.in{ opacity:1; transform:none; }
.skyvera-about .reveal.d1{ transition-delay:.08s; }
.skyvera-about .reveal.d2{ transition-delay:.16s; }
.skyvera-about .reveal.d3{ transition-delay:.24s; }


/* ============================================================
   Parallax Divider Section
   ============================================================ */
.parallax-divider {
    position: relative;
    width: 100%;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url('IMG/urunler/sabit.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    text-align: center;
    padding: clamp(40px, 8vw, 80px) clamp(20px, 5vw, 40px);
}

.parallax-divider .pd-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.3);
    background-image: 
        radial-gradient(rgba(0, 0, 0, 0.6) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.7) 100%);
    background-size: 4px 4px, 100% 100%;
    z-index: 1;
}

.parallax-divider .pd-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    padding: 0 20px;
}

.parallax-divider .pd-content h2 {
    font-family: var(--sv-ff-serif);
    font-size: clamp(26px, 6vw, 64px);
    font-weight: 400;
    font-style: italic;
    color: #ffffff;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0;
}

.parallax-divider .reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s var(--sv-ease), transform 1s var(--sv-ease);
}

.parallax-divider .reveal.in {
    opacity: 1;
    transform: none;
}


/* ============================================================
   SkyVera — Çözümlerimiz Section
   ============================================================ */
.skyvera-solutions {
    background: #ffffff;
    color: var(--sv-ink);
    padding-top: clamp(64px, 9vh, 128px);
    padding-bottom: clamp(64px, 9vh, 128px);
}

.skyvera-solutions .sv-container {
    max-width: var(--sv-maxw);
    margin: 0 auto;
    padding: 0 var(--sv-pad);
}

.skyvera-solutions .sv-top {
    display: grid; 
    grid-template-columns: auto 1fr; 
    gap: clamp(28px, 4vw, 64px);
    align-items: end; 
    margin-bottom: clamp(40px, 6vw, 72px);
}

.skyvera-solutions .sv-vside {
    position: relative;
    width: 24px;
    min-height: 200px;
}

.skyvera-solutions .sv-vside span {
    position: absolute;
    bottom: 0;
    left: 0;
    transform: rotate(-90deg);
    transform-origin: bottom left;
    white-space: nowrap;
    font-size: 12px; 
    font-weight: 700; 
    letter-spacing: .32em; 
    text-transform: uppercase;
    color: var(--sv-muted);
}

.skyvera-solutions .sv-eyebrow {
    display: inline-flex; 
    align-items: center; 
    gap: 11px; 
    white-space: nowrap;
    font-size: 12.5px; 
    font-weight: 700; 
    letter-spacing: .2em; 
    text-transform: uppercase;
    color: var(--sv-accent-deep);
}

.skyvera-solutions .sv-eyebrow .ln {
    width: 34px; 
    height: 2px; 
    background: var(--sv-accent); 
    border-radius: 2px;
}

.skyvera-solutions .sv-headline {
    font-family: var(--sv-ff-serif); 
    font-weight: 400; 
    line-height: 1.0; 
    letter-spacing: -.01em;
    font-size: clamp(40px, 5.5vw, 88px); 
    margin: 18px 0 0;
    color: var(--sv-ink);
}

.skyvera-solutions .sv-headline .accent {
    color: var(--sv-accent-deep); 
    font-style: italic;
}

.skyvera-solutions .reveal {
    opacity: 0; 
    transform: translateY(26px); 
    transition: opacity .9s var(--sv-ease), transform .9s var(--sv-ease);
}
.skyvera-solutions .reveal.in {
    opacity: 1; 
    transform: none;
}
.skyvera-solutions .reveal.d1 { transition-delay: .08s; }
.skyvera-solutions .reveal.d2 { transition-delay: .16s; }

.solutions-grid {
    display: flex;
    gap: 30px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 20px 0 40px;
    margin: -20px 0 -40px;
    scrollbar-width: thin;
    scrollbar-color: var(--sv-accent) rgba(0,0,0,0.05);
    cursor: grab;
}
.solutions-grid:active {
    cursor: grabbing;
}

/* Custom Scrollbar for Webkit */
.solutions-grid::-webkit-scrollbar {
    height: 6px;
}
.solutions-grid::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
}
.solutions-grid::-webkit-scrollbar-thumb {
    background: var(--sv-accent);
    border-radius: 4px;
}
.solutions-grid::-webkit-scrollbar-thumb:hover {
    background: #C96A11; /* sv-accent-deep */
}

.solution-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    flex: 0 0 clamp(300px, 40vw, 480px);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: #fff;
    transition: transform 0.4s var(--sv-ease), box-shadow 0.4s var(--sv-ease);
}

.solution-card .sc-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    transition: transform 0.6s var(--sv-ease);
}

.solution-card .sc-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.2) 60%, transparent 100%);
    z-index: 2;
    transition: background-color 0.6s var(--sv-ease);
}

.solution-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 48px rgba(33,30,25, 0.15);
}

.solution-card:hover .sc-bg {
    transform: scale(1.06);
}

.solution-card:hover .sc-overlay {
    background-color: rgba(0,0,0,0.5);
}

.solution-card .sc-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 36px 40px;
    z-index: 4;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.solution-card .sc-title {
    font-family: var(--sv-ff-sans);
    font-size: 26px;
    font-weight: 700;
    margin: 0;
    color: #fff;
}

.solution-card .sc-hover-btn-wrapper {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s var(--sv-ease);
}

.solution-card .sc-hover-btn-wrapper > div {
    overflow: hidden;
}

.solution-card:hover .sc-hover-btn-wrapper {
    grid-template-rows: 1fr;
}

.solution-card .sc-hover-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--sv-accent);
    color: #ffffff;
    padding: 8px 18px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    margin-top: 16px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s var(--sv-ease), transform 0.4s var(--sv-ease);
}

.solution-card:hover .sc-hover-btn {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.1s;
}

@media (max-width: 900px) {
    .skyvera-solutions .sv-top {
        grid-template-columns: 1fr;
    }
    .skyvera-solutions .sv-vside {
        display: none;
    }
    .solutions-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width:900px){
  .skyvera-about .sv-grid2,.skyvera-about .sv-top{ grid-template-columns:1fr; gap:44px; }
  .skyvera-about .sv-vside{ display:none; }
  .skyvera-about .sv-collage{ min-height:440px; }
}
@media (prefers-reduced-motion:reduce){
  .skyvera-about .reveal{ opacity:1; transform:none; transition:none; }
}



/* ============================================================
   SkyVera — Neden SkyVera Section
   ============================================================ */
.skyvera-why *{ box-sizing:border-box; }
.skyvera-why{
  --accent:#E5811C; --accent-deep:#C96A11;
  --teal:#054959; --teal-2:#06596C; --teal-deep:#03323D;
  --ink:#211E19; --ink-2:#4A443B; --muted:#847B6C;
  --cream:#F3EFE8; --hair:#DCD3C4;
  --ff-sans:"Montserrat", system-ui, -apple-system, sans-serif;
  --ff-serif:"Newsreader", Georgia, serif;
  --maxw:1280px; --pad:clamp(24px,5vw,100px);
  --ease:cubic-bezier(.22,.61,.36,1);
  background:var(--cream); color:var(--ink);
  font-family:var(--ff-sans); -webkit-font-smoothing:antialiased;
}
.skyvera-why img{ max-width:100%; display:block; }
.skyvera-why .sv-section{ padding:clamp(64px,9vh,128px) 0; }
.skyvera-why .sv-container{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); }

/* başlık */
.skyvera-why .sv-top{
  display:grid; grid-template-columns:auto 1fr; gap:clamp(28px,4vw,64px);
  align-items:end; margin-bottom:clamp(40px,5vw,72px);
}
.skyvera-why .sv-vside {
    position: relative;
    width: 24px;
    min-height: 200px;
}
.skyvera-why .sv-vside span {
    position: absolute;
    bottom: 0;
    left: 0;
    transform: rotate(-90deg);
    transform-origin: bottom left;
    white-space: nowrap;
    font-size: 12px; 
    font-weight: 700; 
    letter-spacing: .32em; 
    text-transform: uppercase;
    color: var(--muted);
}
.skyvera-why .sv-eyebrow{
  display:inline-flex; align-items:center; gap:11px; white-space:nowrap;
  font-size:12.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent-deep);
}
.skyvera-why .sv-eyebrow .ln{ width:34px; height:2px; background:var(--accent); border-radius:2px; }
.skyvera-why .sv-headline{
  font-family: var(--ff-serif); 
  font-weight: 400; 
  line-height: 1.0; 
  letter-spacing: -.01em;
  font-size: clamp(40px, 5.5vw, 88px); 
  margin: 18px 0 0;
  color: var(--ink);
}
.skyvera-why .sv-headline .accent{ 
  color: var(--accent-deep); 
  font-style: italic;
}

/* yerleşim: serbest görsel + üstüne binen kartlar */
.skyvera-why .sv-stage{
  display:grid; grid-template-columns:repeat(12,1fr); align-items:center;
}

/* serbest montaj görseli (çerçevesiz, beyaz zemine oturur) */
.skyvera-why .sv-photo{
  position:relative; grid-column:1 / 8; grid-row:1; z-index:1; margin:0;
}
.skyvera-why .sv-photo img{
  width:100%; height:auto; display:block;
  filter:drop-shadow(0 30px 50px rgba(33,30,25,.12));
}
.skyvera-why .sv-photo .badge{
  position:absolute; left:4%; top:6%; z-index:3;
  display:inline-flex; align-items:center; gap:9px;
  padding:9px 14px; border-radius:999px;
  background:var(--teal); color:#fff; font-size:12.5px; font-weight:600; letter-spacing:.02em;
  box-shadow:0 12px 28px -12px rgba(5,73,89,.7);
}
.skyvera-why .sv-photo .badge .dot{ width:8px; height:8px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 0 rgba(229,129,28,.6); animation:pulse 2.4s var(--ease) infinite; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(229,129,28,.55);} 70%{ box-shadow:0 0 0 9px rgba(229,129,28,0);} 100%{ box-shadow:0 0 0 0 rgba(229,129,28,0);} }

/* kart ızgarası — görselin sağ (kamyon) tarafına biner */
.skyvera-why .sv-cards{
  grid-column:6 / 13; grid-row:1; z-index:2; align-self:center;
  display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(14px,1.4vw,20px);
}
.skyvera-why .why-card{
  position:relative; overflow:hidden; border-radius:16px;
  background:var(--teal); color:#fff;
  padding:clamp(22px,2vw,30px);
  display:flex; flex-direction:column; gap:12px;
  box-shadow:0 22px 44px -28px rgba(5,73,89,.65);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.skyvera-why .why-card::before{ /* dokulu ışık */
  content:""; position:absolute; right:-30%; top:-40%; width:80%; aspect-ratio:1;
  background:radial-gradient(circle, rgba(255,255,255,.10), transparent 62%);
  transform:scale(.6); opacity:0; transition:transform .7s var(--ease), opacity .7s var(--ease);
}
.skyvera-why .why-card::after{ /* sol accent şerit */
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:var(--accent); transform:scaleY(0); transform-origin:top; transition:transform .6s var(--ease);
}
.skyvera-why .why-card:hover{ transform:translateY(-6px); box-shadow:0 34px 60px -26px rgba(5,73,89,.75); }
.skyvera-why .why-card:hover::before{ transform:scale(1); opacity:1; }
.skyvera-why .why-card:hover::after{ transform:scaleY(1); }

.skyvera-why .wc-ico{
  width:48px; height:48px; border-radius:12px; flex:none;
  display:grid; place-items:center;
  background:rgba(255,255,255,.10); color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  transition:background .5s var(--ease), transform .6s var(--ease);
}
.skyvera-why .wc-ico svg{ width:25px; height:25px; }
.skyvera-why .why-card:hover .wc-ico{ background:var(--accent); color:#1b1206; transform:translateY(-2px) rotate(-4deg); }
.skyvera-why .wc-num{
  position:absolute; right:clamp(18px,1.8vw,26px); top:clamp(18px,1.8vw,26px);
  font-family:var(--ff-serif); font-weight:700; font-style:normal; font-size:30px; line-height:1;
  color:rgba(255,255,255,.16); transition:color .5s var(--ease);
}
html[dir="rtl"] .skyvera-why .wc-num{ right:auto; left:clamp(18px,1.8vw,26px); }
.skyvera-why .why-card:hover .wc-num{ color:rgba(255,255,255,.30); }
.skyvera-why .wc-title{ font-size:clamp(17px,1.35vw,20px); font-weight:700; letter-spacing:-.01em; line-height:1.2; margin:2px 0 0; }
.skyvera-why .wc-desc{ font-size:13.5px; line-height:1.6; color:rgba(255,255,255,.78); margin:0; max-width:32ch; }

/* reveal */
.skyvera-why .reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); transition-delay:calc(var(--i,0)*.09s); }
.skyvera-why .reveal.in{ opacity:1; transform:none; }

@media (max-width:980px){
  .skyvera-why .sv-stage{ display:flex; flex-direction:column; gap:clamp(20px,4vw,36px); }
  .skyvera-why .sv-top{ grid-template-columns:1fr; }
  .skyvera-why .sv-vside{ display:none; }
  .skyvera-why .sv-photo{ grid-column:auto; align-self:center; max-width:560px; width:100%; }
  .skyvera-why .sv-cards{ grid-column:auto; width:100%; }
}
@media (max-width:560px){
  .skyvera-why .sv-cards{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){
  .skyvera-why .reveal{ opacity:1; transform:none; transition:none; }
  .skyvera-why .badge .dot{ animation:none; }
}

/* ============================================================
   SkyVera — İmza Projeler
   ============================================================ */
.skyvera-projects {
  background: #ffffff;
  color: #211E19;
}

.skyvera-projects .sv-section { padding: clamp(64px, 9vh, 128px) 0; }
.skyvera-projects .sv-container { max-width: 1280px; margin: 0 auto; padding: 0 clamp(24px, 5vw, 100px); }

.skyvera-projects .sv-top {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(28px, 4vw, 64px);
  align-items: end; margin-bottom: clamp(40px, 6vw, 72px);
}
.skyvera-projects .sv-top-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    flex-wrap: nowrap;
    gap: 30px;
}
.skyvera-projects .sv-vside {
  position: relative; width: 24px; min-height: 280px;
}
.skyvera-projects .sv-vside span {
  position: absolute; bottom: 0; left: 0;
  transform: rotate(-90deg); transform-origin: bottom left;
  white-space: nowrap; font-size: 12px; font-weight: 700; letter-spacing: .32em; text-transform: uppercase;
  color: #847B6C;
}
.skyvera-projects .sv-eyebrow {
  display: inline-flex; align-items: center; gap: 11px; white-space: nowrap;
  font-size: 12.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--secondary-color);
}
.skyvera-projects .sv-eyebrow .ln { width: 34px; height: 2px; background: var(--secondary-color); border-radius: 2px; }
.skyvera-projects .sv-headline {
  font-family: 'Newsreader', Georgia, serif; font-weight: 400; line-height: 1.0; letter-spacing: -.01em;
  font-size: clamp(40px, 5.5vw, 88px); margin: 24px 0 0; color: #211E19;
}
.skyvera-projects .sv-headline .accent { font-style: italic; color: #C96A11; font-weight: 400; }

.projects-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

.project-card {
    display: block;
    text-decoration: none;
    color: inherit;
}

.project-image {
    position: relative;
    overflow: hidden;
    margin: 0 0 24px 0;
    border-radius: 4px;
    aspect-ratio: 4 / 3;
}

.project-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.project-image::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background: var(--secondary-color);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 2;
}

.project-card:hover .project-image img {
    transform: scale(1.05);
}

.project-card:hover .project-image::after {
    transform: scaleY(1);
}

.project-info h3 {
    font-family: 'Newsreader', Georgia, serif;
    font-size: 28px;
    font-weight: 400;
    margin: 0 0 8px 0;
    transition: color 0.3s ease;
}

.project-card:hover .project-info h3 {
    color: var(--secondary-color);
}

.project-info span {
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #847B6C;
    font-weight: 600;
}

.skyvera-projects .primary-btn {
    border: 1px solid var(--secondary-color);
    background: transparent;
    color: var(--secondary-color);
    padding: 14px 28px;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    transition: all 0.3s ease;
}

.skyvera-projects .primary-btn:hover {
    background: var(--secondary-color);
    color: #fff;
}

.skyvera-projects .reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--i, 0) * 0.1s);
}
.skyvera-projects .reveal.in {
    opacity: 1;
    transform: none;
}

@media (max-width: 980px) {
    .skyvera-projects .sv-top { grid-template-columns: 1fr; }
    .skyvera-projects .sv-vside { display: none; }
    .projects-grid { grid-template-columns: 1fr; }
    .skyvera-projects .sv-top-content { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   Features 3 Column Grid (Kış Bahçesi Teknoloji vb.)
   ============================================================ */
.skyvera-features {
    background-color: #ffffff;
}

.skyvera-features .sv-top {
    margin-bottom: clamp(40px, 6vw, 72px);
}

.features-3-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 40px;
    row-gap: 0;
    margin-top: 40px;
}

.features-2-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 40px;
    row-gap: 0;
    margin-top: 40px;
}

.brand-logos {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 40px;
    margin-bottom: 20px;
}

.brand-logos img {
    height: clamp(60px, 8vw, 100px);
    object-fit: contain;
}

.feature-card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    background: transparent;
}

.feature-card-text {
    display: contents;
}

.feature-card-img {
    position: relative;
    overflow: hidden;
    margin-bottom: 24px;
    aspect-ratio: 4 / 3;
    border-radius: 4px;
}

.feature-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.feature-card-img::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--sv-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 2;
}

.feature-card:hover .feature-card-img img {
    transform: scale(1.05);
}

.feature-card:hover .feature-card-img::after {
    transform: scaleX(1);
}

.feature-card-text h3 {
    font-family: var(--sv-ff-sans);
    font-size: clamp(16px, 2vw, 22px);
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--sv-ink);
    margin-bottom: 16px;
    line-height: 1.4;
    overflow-wrap: break-word;
    word-break: break-word;
}

.feature-card-text p {
    font-family: var(--sv-ff-sans);
    font-size: clamp(15px, 1.5vw, 17px);
    line-height: 1.7;
    color: var(--sv-ink-2);
    margin: 0;
}

.feature-divider {
    width: 100%;
    height: 1px;
    background: rgba(0, 0, 0, 0.08);
    margin: clamp(40px, 6vw, 80px) 0;
}

@media (max-width: 1024px) {
    .features-3-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .feature-card {
        margin-bottom: 40px;
    }
}

@media (max-width: 768px) {
    .features-3-grid {
        grid-template-columns: 1fr;
    }
    .features-2-grid {
        grid-template-columns: 1fr;
    }
    .brand-logos {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
        justify-items: center;
        justify-content: center;
    }
    .brand-logos img {
        height: auto;
        max-height: 80px;
        width: 100%;
        max-width: 140px;
    }
}

/* ============================================================
   SkyVera — Footer
   ============================================================ */
.skyvera-footer {
    background: #054959;
    color: #ffffff;
    border-top: 6px solid var(--secondary-color);
    padding: 160px 0 100px;
    font-family: var(--ff-sans);
}

.skyvera-footer .footer-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 clamp(24px, 5vw, 60px);
}

.footer-top {
    display: flex;
    justify-content: space-between;
    gap: 80px;
    margin-bottom: 120px;
}

.footer-newsletter {
    flex: 0 0 40%;
    max-width: 500px;
}

.footer-newsletter h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 24px 0;
    color: #ffffff;
}

.newsletter-form input[type="email"] {
    width: 100%;
    padding: 16px 20px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0;
    font-size: 14px;
    color: #ffffff;
    margin-bottom: 24px;
    outline: none;
    transition: border-color 0.3s ease;
    box-sizing: border-box;
}

.newsletter-form input[type="email"]:focus {
    border-color: var(--secondary-color);
}

.newsletter-bottom {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.privacy-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    flex: 1;
}

.privacy-checkbox input {
    display: none;
}

.privacy-checkbox .checkmark {
    width: 20px;
    height: 20px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0;
    position: relative;
    flex-shrink: 0;
    margin-top: 2px;
    transition: all 0.3s ease;
}

.privacy-checkbox input:checked ~ .checkmark {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
}

.privacy-checkbox input:checked ~ .checkmark::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.checkbox-text {
    font-size: 12px;
    line-height: 1.5;
    color: #DCD3C4;
}

.subscribe-btn {
    background: var(--secondary-color);
    color: #fff;
    border: none;
    padding: 14px 28px;
    border-radius: 0;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background 0.3s ease;
    white-space: nowrap;
}

.subscribe-btn:hover {
    background: #d67515;
}

.footer-links {
    display: flex;
    justify-content: space-between;
    flex: 1;
    gap: 60px;
}

.link-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.link-column a {
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.3s ease;
}

.link-column a:hover {
    color: var(--secondary-color);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.copyright {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
}

.social-links {
    display: flex;
    gap: 24px;
    margin-top: 24px;
    justify-content: flex-start;
}

.social-links a {
    color: #ffffff;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.social-links a:hover {
    color: var(--secondary-color);
}

@media (max-width: 1024px) {
    .footer-top {
        flex-direction: column;
        gap: 60px;
    }
    .footer-newsletter {
        max-width: 100%;
    }
    .footer-links {
        flex-wrap: wrap;
    }
    .link-column {
        flex: 0 0 calc(50% - 20px);
    }
}

@media (max-width: 600px) {
    .link-column {
        flex: 0 0 100%;
    }
    .newsletter-bottom {
        flex-direction: column;
    }
    .subscribe-btn {
        width: 100%;
        justify-content: center;
    }
    .footer-bottom {
        flex-direction: column-reverse;
        gap: 24px;
        align-items: flex-start;
    }
}

/* ============================================================
   Carport Roof Options Section
   ============================================================ */
.carport-options {
    background-color: #ffffff;
    padding: clamp(64px, 9vh, 128px) 0;
}
.carport-options .sv-intro {
    max-width: 800px;
    margin-bottom: 60px;
    font-size: clamp(16px, 1.2vw, 18px);
    line-height: 1.6;
    color: var(--sv-ink-2);
}
.roof-options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}
.roof-option-card {
    background-color: #fcfcfc;
    border: 1px solid rgba(0,0,0,0.06);
    padding: 40px;
    position: relative;
    overflow: hidden;
    transition: transform 0.4s var(--sv-ease), box-shadow 0.4s var(--sv-ease), border-color 0.4s var(--sv-ease);
}
.roof-option-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 3px;
    background-color: var(--sv-accent-deep);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s var(--sv-ease);
}
.roof-option-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.02);
    background-color: #ffffff;
}
.roof-option-card:hover::before {
    transform: scaleX(1);
}
.roof-option-icon {
    margin-bottom: 24px;
    color: var(--sv-accent-deep);
    opacity: 0.8;
    transition: transform 0.4s var(--sv-ease);
}
.roof-option-card:hover .roof-option-icon {
    transform: scale(1.1);
}
.roof-option-card h3 {
    font-family: var(--sv-ff-serif);
    font-size: 22px;
    font-weight: 400;
    margin: 0 0 16px;
    color: var(--sv-ink);
}
.roof-option-card p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--sv-muted);
    margin: 0;
}
.roof-option-card:hover .roof-option-img {
    transform: scale(1.05) !important;
}

/* ============================================================
   Teknik Özellikler (Editorial Layout)
   ============================================================ */
.tech-specs-list {
    display: flex;
    flex-direction: column;
    gap: clamp(60px, 8vw, 120px);
    margin-top: clamp(60px, 8vw, 100px);
}
.tech-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 6vw, 80px);
    align-items: center;
}
/* Default for LTR languages (Turkish, English, etc.) */
.tech-row.reverse {
    direction: rtl;
}
.tech-row.reverse > * {
    direction: ltr;
}

/* Override for RTL languages (Arabic) */
html[dir="rtl"] .tech-row.reverse {
    direction: ltr;
}
html[dir="rtl"] .tech-row.reverse > * {
    direction: rtl;
}
.tech-img {
    aspect-ratio: 4/3;
    background-color: var(--sv-hair);
    width: 100%;
    position: relative;
    overflow: hidden;
}
.tech-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.8s var(--sv-ease);
}
.tech-img::before {
    content: '';
    position: absolute;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 3px;
    background-color: var(--sv-accent-deep);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.6s var(--sv-ease);
    z-index: 2;
}
.tech-row:hover .tech-img img {
    transform: scale(1.05);
}
.tech-row:hover .tech-img::before {
    transform: scaleX(1);
}
.tech-img::after {
    content: 'Resim Eklenecek';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--sv-muted);
    z-index: 0;
}
.tech-img img {
    position: relative;
    z-index: 1;
}
/* If src is empty or not found, the ::after text will show */
.tech-text h3 {
    font-family: var(--sv-ff-serif);
    font-size: clamp(24px, 2.5vw, 32px);
    color: var(--sv-ink);
    margin-bottom: 20px;
    font-weight: 400;
}
.tech-text p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--sv-ink-2);
}
@media (max-width: 992px) {
    .tech-row, .tech-row.reverse {
        grid-template-columns: 1fr;
        direction: ltr;
    }
}

/* ============================================================
   Detay Kartları (Outdoor Kitchen vb.)
   ============================================================ */
.detail-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(24px, 4vw, 40px);
    margin-top: clamp(40px, 6vw, 80px);
}
.detail-card {
    position: relative;
    background: #ffffff;
    padding: clamp(30px, 4vw, 50px);
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.6s var(--sv-ease), box-shadow 0.6s var(--sv-ease), background-color 0.6s var(--sv-ease);
    border: 1px solid rgba(0,0,0,0.05);
}
.detail-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 30px 60px -20px rgba(0,0,0,0.15);
    background-color: #054959;
}
.detail-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sv-accent-deep);
    margin-bottom: 24px;
    box-shadow: 0 10px 20px -5px rgba(0,0,0,0.08);
    transition: transform 0.6s var(--sv-ease), color 0.6s var(--sv-ease), background 0.6s var(--sv-ease);
}
.detail-card:hover .detail-icon {
    background: var(--sv-accent);
    color: #fff;
    transform: scale(1.1) rotate(5deg);
}
.detail-card h3 {
    font-weight: 600;
    font-size: clamp(22px, 2.2vw, 26px);
    color: var(--sv-ink);
    margin-bottom: 16px;
    transition: color 0.6s var(--sv-ease);
}
.detail-card p {
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--sv-ink-2);
    margin: 0;
    transition: color 0.6s var(--sv-ease);
}
.detail-card:hover h3,
.detail-card:hover p {
    color: #fff;
}
@media (max-width: 768px) {
    .detail-cards-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   Logo Marquee (Kayar Şerit)
   ============================================================ */
.sv-marquee-section {
    padding: clamp(40px, 6vw, 60px) 0;
    background: #ffffff;
    overflow: hidden;
}
.sv-marquee-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: marquee-scroll 30s linear infinite;
}
.sv-marquee-track:hover {
    animation-play-state: paused;
}
.sv-marquee-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 clamp(30px, 4vw, 60px);
    opacity: 0.4;
    transition: opacity 0.3s var(--sv-ease), transform 0.3s var(--sv-ease);
}
.sv-marquee-item:hover {
    opacity: 1;
    transform: scale(1.05);
}
.sv-marquee-item img,
.sv-marquee-item svg {
    height: 100px;
    width: auto;
    max-width: 360px;
    fill: currentColor;
    color: var(--sv-ink);
}
@keyframes marquee-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@media (max-width: 768px) {
    .sv-marquee-item img,
    .sv-marquee-item svg { height: 64px; }
}

/* ============================================================
   Outdoor Value Section Overrides (dis-mekan-mutfak.html)
   ============================================================ */
.outdoor-value-section .sv-headline {
    font-family: var(--sv-ff-sans);
    font-size: clamp(16px, 2vw, 22px); /* Çok daha küçük, zarif bir boyut */
    font-weight: 700;
    letter-spacing: 0.15em; /* Eyebrow gibi geniş harf aralığı */
    text-transform: uppercase; /* Tamamı büyük harf */
    line-height: 1.4;
    margin-bottom: 20px;
    color: var(--sv-ink); /* Siyah */
}

/* Metin aralıklarını (line-height) biraz daraltıyoruz */
.outdoor-value-section .sv-lead {
    line-height: 1.5;
}
.outdoor-value-section .sv-body {
    line-height: 1.6;
}

/* Eşit genişlik ama resimlerin daha "uzun" (taller) olmasını sağlamak için grid'i 1fr 1fr yapıp resim oranını dikey yapıyoruz */
.outdoor-value-section .tech-row {
    grid-template-columns: 1fr 1fr;
    align-items: center; /* Resmi dikey ortala */
}

/* Resim oranını dikey (portrait) yaparak yazıdan çok daha uzun/yüksek olmasını sağlıyoruz */
.outdoor-value-section .tech-img {
    aspect-ratio: 3/4; /* 4/3 yerine 3/4 (Dikey dikdörtgen) */
}

/* Mobil Görünüm Optimizasyonu */
@media (max-width: 992px) {
    .outdoor-value-section .tech-row {
        display: flex;
        flex-direction: column-reverse; /* Resmi üste, yazıyı alta alır */
        gap: 32px; /* Mobilde biraz daha sıkı boşluk */
    }
    .outdoor-value-section .tech-img {
        width: 100%;
        height: auto;
        aspect-ratio: 5/4; /* Mobilde dikey yerine daha dengeli 5/4 oranı */
    }
    .outdoor-value-section .sv-headline {
        margin-top: 10px;
    }
}

/* ============================================================
   FAQ / Accordion Section
   ============================================================ */
.skyvera-faq {
    background: #ffffff;
    color: var(--sv-ink);
}

.sv-accordion-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.sv-accordion-item {
    border-bottom: 1px solid var(--sv-hair);
}

.sv-accordion-header {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    color: var(--sv-ink);
}

.sv-accordion-title {
    font-family: var(--sv-ff-sans);
    font-size: clamp(18px, 1.5vw, 22px);
    font-weight: 500;
}

.sv-accordion-icon {
    position: relative;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.sv-accordion-icon::before,
.sv-accordion-icon::after {
    content: '';
    position: absolute;
    background-color: currentColor;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.4s var(--sv-ease);
}

.sv-accordion-icon::before {
    width: 18px;
    height: 1.5px;
}

.sv-accordion-icon::after {
    width: 1.5px;
    height: 18px;
}

/* Accordion Open State: Rotate the vertical line to make a minus sign */
.sv-accordion-item.active .sv-accordion-icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.sv-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s var(--sv-ease), padding 0.4s var(--sv-ease);
    padding: 0 0 0 40px;
}

.sv-accordion-item.active .sv-accordion-content {
    padding-bottom: 24px;
}

.sv-accordion-content p {
    margin: 0;
    color: var(--sv-ink-2);
    font-size: 16px;
    line-height: 1.6;
}

.sv-accordion-img {
    position: relative;
    width: 100%;
    aspect-ratio: 4/5;
    background-color: var(--sv-hair);
    overflow: hidden;
}

.sv-accordion-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.8s var(--sv-ease);
}

.sv-accordion-img::before {
    content: '';
    position: absolute;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 3px;
    background-color: var(--sv-accent-deep);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.6s var(--sv-ease);
    z-index: 2;
}

.sv-accordion-img:hover img {
    transform: scale(1.05);
}

.sv-accordion-img:hover::before {
    transform: scaleX(1);
}

@media (max-width: 992px) {
    .skyvera-faq .sv-grid2 {
        display: flex;
        flex-direction: column-reverse;
        gap: 40px;
    }
    .sv-accordion-img {
        aspect-ratio: 5/4;
    }
}

/* ============================================================
   System Showcase (Vertical Stacked Layout)
   ============================================================ */
.system-showcase {
    display: flex;
    flex-direction: column;
    margin-top: clamp(60px, 8vw, 100px);
}

.system-card {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.system-card-img {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    background-color: var(--sv-bg-alt);
    aspect-ratio: 16/9;
    position: relative;
}

.system-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.system-card-img::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: var(--sv-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
    z-index: 2;
}

.system-card:hover .system-card-img img {
    transform: scale(1.03);
}

.system-card:hover .system-card-img::after {
    transform: scaleX(1);
}

.system-card-text h3 {
    font-family: var(--sv-ff-sans); /* Fixed to sans based on user feedback */
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 500;
    color: var(--sv-ink);
    margin-bottom: 16px;
    line-height: 1.3;
}

.system-card-text p {
    font-family: var(--sv-ff-sans);
    font-size: clamp(15px, 1.5vw, 17px);
    line-height: 1.7;
    color: var(--sv-ink-2);
}

.system-divider {
    width: 100%;
    height: 1px;
    background-color: rgba(0, 0, 0, 0.1);
    margin: clamp(50px, 8vw, 100px) 0;
}


/* Navigation Dropdown Support for "Glass Systems" */
.nav-item-dropdown {
    position: relative;
    display: flex;
    align-items: center;
}

.nav-item-dropdown.mega-dropdown {
    position: static;
}

/* Base dropdown content (for standard dropdowns if any exist later) */
.nav-dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--primary-color);
    min-width: 220px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    z-index: 100;
    border-radius: 4px;
    overflow: hidden;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.nav-item-dropdown:hover .nav-dropdown-content {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.nav-dropdown-content a {
    color: #fff;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: 0.9rem;
    transition: background-color 0.3s ease, padding-left 0.3s ease;
}

.nav-dropdown-content a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    padding-left: 20px;
    color: var(--secondary-color);
}

/* MEGA MENU SPECIFIC STYLES */
.mega-dropdown .nav-dropdown-content {
    width: 100%;
    left: 0;
    top: 100%;
    transform: translateY(10px);
    padding: 40px 24px;
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

/* Hover bridge to keep dropdown open when mouse moves between link and menu */
.nav-item-dropdown > .nav-link::before {
    content: '';
    position: absolute;
    top: 100%;
    left: -20px;
    right: -20px;
    height: 60px;
    background: transparent;
}

.mega-dropdown:hover .nav-dropdown-content {
    transform: translateY(0);
}

.mega-menu-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    max-width: 1000px;
    margin: 0 auto;
}

.mega-menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    color: var(--primary-color);
    padding: 0 !important;
}

.mega-menu-item:hover {
    background-color: transparent !important;
    padding-left: 0 !important;
}

.mega-menu-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 0;
    overflow: hidden;
    margin-bottom: 24px;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.mega-menu-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.mega-menu-item:hover .mega-menu-img {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.mega-menu-item:hover .mega-menu-img img {
    transform: scale(1.05);
}

.mega-menu-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--primary-color);
    transition: color 0.3s ease;
    margin-top: 16px;
}

.mega-menu-item:hover .mega-menu-title {
    color: var(--secondary-color);
}

@media (max-width: 768px) {
    .mega-dropdown .nav-dropdown-content {
        width: 100%;
        position: static;
        transform: none !important;
        padding: 15px;
    }
    .mega-menu-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .mega-menu-img {
        width: 140px;
        height: 140px;
    }
}


/* Interactive Pergola Parts Diagram */
.pergola-parts-container {
    width: 100%;
    margin-top: 60px;
    display: flex;
    justify-content: center;
}

.pergola-parts-wrapper {
    position: relative;
    width: 100%;
}

.pergola-parts-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0;
}

.sv-hotspot {
    position: absolute;
    width: 40px;
    height: 40px;
    transform: translate(-50%, -50%);
    cursor: pointer;
    z-index: 10;
}

.sv-hotspot-dot {
    width: 30px;
    height: 30px;
    background-color: var(--secondary-color);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 0 rgba(246, 134, 51, 0.7);
    animation: pulse-orange 2s infinite;
    transition: transform 0.3s ease;
}

.sv-hotspot:hover .sv-hotspot-dot {
    transform: translate(-50%, -50%) scale(1.2);
    animation: none;
    box-shadow: 0 0 0 10px rgba(246, 134, 51, 0.3);
}

.sv-hotspot:hover {
    z-index: 50;
}

@keyframes pulse-orange {
    0% {
        transform: translate(-50%, -50%) scale(0.95);
        box-shadow: 0 0 0 0 rgba(246, 134, 51, 0.7);
    }
    70% {
        transform: translate(-50%, -50%) scale(1);
        box-shadow: 0 0 0 12px rgba(246, 134, 51, 0);
    }
    100% {
        transform: translate(-50%, -50%) scale(0.95);
        box-shadow: 0 0 0 0 rgba(246, 134, 51, 0);
    }
}

.sv-hotspot-tooltip {
    position: absolute;
    width: 320px;
    background-color: var(--primary-color);
    color: var(--text-light);
    border-radius: 8px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    box-shadow: 0 15px 35px rgba(0,0,0,0.4);
    z-index: 20;
    pointer-events: none;
    overflow: hidden;
    transform: scale(0.95);
    transform-origin: center;
    /* Default centering if JS not active */
    top: 50%;
    left: 50%;
    margin-top: -150px;
    margin-left: -160px;
}

.sv-hotspot-tooltip::after {
    display: none;
}

.sv-hotspot:hover .sv-hotspot-tooltip {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.sv-hotspot-img {
    width: 100%;
    height: auto;
    display: block;
    border-bottom: 2px solid var(--secondary-color);
}

.sv-hotspot-content {
    padding: 20px;
}

.sv-hotspot-content h4 {
    color: var(--text-light);
    font-size: 18px;
    margin-bottom: 12px;
    font-weight: 600;
}

.sv-hotspot-content p {
    color: rgba(255,255,255,0.85);
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 768px) {
    .sv-hotspot-tooltip {
    position: absolute;
    width: 320px;
    background-color: var(--primary-color);
    color: var(--text-light);
    border-radius: 8px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    box-shadow: 0 15px 35px rgba(0,0,0,0.4);
    z-index: 20;
    pointer-events: none;
    overflow: hidden;
    transform: scale(0.95);
    transform-origin: center;
    /* Default centering if JS not active */
    top: 50%;
    left: 50%;
    margin-top: -150px;
    margin-left: -160px;
    }
}

@media (max-width: 768px) {
    .sv-hotspot-dot {
        width: 18px;
        height: 18px;
    }
}


/* Mobile Modal Styles */
.sv-mobile-modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.7);
    z-index: 999999;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    padding: 20px;
}
.sv-mobile-modal-overlay.active {
    opacity: 1;
}
.sv-mobile-modal-content {
    background-color: var(--primary-color);
    color: var(--text-light);
    width: 100%;
    max-width: 400px;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    transform: translateY(20px);
    transition: transform 0.3s ease;
    box-shadow: 0 15px 35px rgba(0,0,0,0.5);
}
.sv-mobile-modal-overlay.active .sv-mobile-modal-content {
    transform: translateY(0);
}
.sv-modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 28px;
    color: #fff;
    background: rgba(0,0,0,0.4);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}
.sv-modal-close:hover {
    background: rgba(0,0,0,0.6);
}
@media (max-width: 768px) {
    .sv-hotspot-tooltip {
        display: none !important; /* Hide original tooltip on mobile */
    }
}

/* Fullscreen Menu Overlay */
.fullscreen-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
}

.fullscreen-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

.fm-close-btn {
    position: absolute;
    top: 2rem;
    right: 2rem;
    background: none;
    border: none;
    color: var(--text-dark, #1a2f24);
    cursor: pointer;
    z-index: 10000;
    padding: 0.5rem;
    transition: transform 0.3s ease;
}

.fm-close-btn:hover {
    transform: rotate(90deg);
}

.fm-content-container {
    width: 100%;
    max-width: 1200px;
    padding: 4rem 2rem;
    margin: auto;
}

.fm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 3rem;
    justify-items: center;
}

.fm-product-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    width: 100%;
    max-width: 250px;
    transition: transform 0.3s ease;
}

.fm-product-card:hover {
    transform: translateY(-5px);
}

.fm-img-wrapper {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 1.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    position: relative;
}

.fm-img-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.05);
    transition: background 0.3s ease;
}

.fm-product-card:hover .fm-img-wrapper::after {
    background: rgba(0,0,0,0);
}

.fm-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.fm-product-card:hover .fm-img-wrapper img {
    transform: scale(1.05);
}

.fm-product-title {
    color: var(--text-dark, #1a2f24);
    font-size: 1.1rem;
    font-weight: 600;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
}

@media (max-width: 768px) {
    .fm-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    .fm-close-btn {
        top: 1rem;
        right: 1rem;
    }
    .fm-product-title {
        font-size: 0.9rem;
    }
    .fm-content-container {
        padding: 5rem 1rem 2rem;
    }
}


/* ============================================================
   Contact Form Styles
   ============================================================ */
.contact-form-container {
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.form-label {
    font-size: 14px;
    color: var(--sv-muted);
    margin-bottom: 4px;
}

.radio-options {
    display: flex;
    gap: 32px;
}

.radio-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    color: var(--sv-ink);
}

.radio-label input {
    display: none;
}

.radio-custom {
    width: 20px;
    height: 20px;
    border: 1.5px solid #a0aab2;
    border-radius: 50%;
    position: relative;
    transition: all 0.2s ease;
}

.radio-label input:checked + .radio-custom {
    border-color: #054959;
    background-color: #054959;
    box-shadow: inset 0 0 0 4px #ffffff;
}

.form-input {
    width: 100%;
    padding: 16px 20px;
    font-family: inherit;
    font-size: 15px;
    color: var(--sv-ink);
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    outline: none;
    transition: border-color 0.3s ease;
}

.form-input::placeholder {
    color: #9ca3af;
}

.form-input:focus {
    border-color: #3b82f6; /* Blue border on focus as in screenshot */
}

.select-input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='14' height='8' viewBox='0 0 14 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L7 7L13 1' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 20px center;
}

.select-input:invalid {
    color: #9ca3af;
}

textarea.form-input {
    resize: vertical;
    min-height: 120px;
}

.checkbox-group {
    margin-top: 16px;
}

.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    cursor: pointer;
}

.checkbox-label input {
    display: none;
}

.checkbox-custom {
    width: 20px;
    height: 20px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    flex-shrink: 0;
    margin-top: 2px;
    position: relative;
    transition: all 0.2s ease;
    background-color: #ffffff;
}

.checkbox-label input:checked + .checkbox-custom {
    background-color: #054959;
    border-color: #054959;
}

.checkbox-label input:checked + .checkbox-custom::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.checkbox-text {
    font-size: 14px;
    line-height: 1.6;
    color: var(--sv-ink);
    font-weight: 500;
}

.form-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 24px;
    gap: 20px;
}

.recaptcha-text {
    font-size: 12px;
    color: #6b7280;
    max-width: 300px;
    line-height: 1.5;
}

.recaptcha-text a {
    color: #6b7280;
    text-decoration: underline;
}

.submit-btn {
    background-color: var(--primary-color);
    color: #ffffff;
    font-weight: 600;
    font-size: 15px;
    padding: 16px 32px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.submit-btn:hover {
    background-color: #043a47;
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .form-footer {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .submit-btn {
        width: 100%;
        justify-content: space-between;
    }
}

/* Email link styles */
.email-link {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.3s ease, text-decoration 0.3s ease;
}

.email-link:hover {
    color: var(--secondary-color);
    text-decoration: underline;
}

/* ============================================================
   Cookie Consent Banner
   ============================================================ */
.cookie-banner {
    position: fixed;
    bottom: -100%;
    left: 0;
    width: 100%;
    background-color: var(--sv-ink, #211E19);
    color: var(--sv-cream, #F9F8F6);
    padding: 20px;
    z-index: 9999;
    transition: bottom 0.5s ease-in-out;
    box-shadow: 0 -5px 20px rgba(0,0,0,0.2);
    font-family: var(--sv-ff-sans, 'Montserrat', sans-serif);
}

.cookie-banner.show {
    bottom: 0;
}

.cookie-content {
    max-width: var(--sv-maxw, 1400px);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.cookie-content p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    flex: 1;
    min-width: 300px;
}

.cookie-buttons {
    display: flex;
    gap: 15px;
}

.cookie-btn {
    padding: 10px 24px;
    border: none;
    cursor: pointer;
    font-family: var(--sv-ff-sans, 'Montserrat', sans-serif);
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.accept-btn {
    background-color: var(--sv-accent, #C96A11);
    color: #fff;
}

.accept-btn:hover {
    background-color: var(--sv-accent-deep, #A9550E);
}

.decline-btn {
    background-color: transparent;
    color: var(--sv-cream, #F9F8F6);
    border: 1px solid var(--sv-muted, #847B6C);
}

.decline-btn:hover {
    background-color: rgba(255,255,255,0.1);
}

@media (max-width: 768px) {
    .cookie-content {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
    .cookie-buttons {
        justify-content: center;
    }
}