@font-face {
    font-family: 'Sequia Grande';
    src: url('../fonts/SequiaGrande-Regular.woff2') format('woff2'),
        url('../fonts/SequiaGrande-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'ChaumontScript-Regular';
    src: url('../fonts/ChaumontScript-Regular.woff2') format('woff2'),
        url('../fonts/ChaumontScript-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'HankenGrotesk-Regular';
    src: url('../fonts/HankenGrotesk-Regular.woff2') format('woff2'),
        url('../fonts/HankenGrotesk-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'HankenGrotesk-Medium';
    src: url('../fonts/HankenGrotesk-Medium.woff2') format('woff2'),
        url('../fonts/HankenGrotesk-Medium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ----- Splide ----- */

.splide__pagination {
  bottom: 1.5em !important;
}
.splide__slide img {
  width: auto;
  height: 75px;
  border-radius: 0em;
}
.splide__progress__bar {
  height: 3px;
  background: #fa7123;
  margin-top: 10px;
}
.splide__toggle, .splide__progress {
  display: none !important; /* Toggle düğmesini gizler */
}

.splide__list li {border: 0px solid red; display: flex; justify-content: center; align-items: center;}
.splide__list .h50 {height: 50px;}
.splide__list .h35 {height: 35px;}

/* ----- Hero Video Background ----- */

    :root {
      /* 100dvh fixes iOS Safari’s address-bar “vh” jump */
      --vh: 100dvh;
    }

    /* Video fills the screen behind your content */
    .video-bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: var(--vh);
      object-fit: cover;     /* crop to fill without squish */
      object-position: center;
      z-index: -1;           /* behind everything */
      background: #000;      /* fallback while buffering */
    }

    /* Respect reduced-motion users */
    @media (prefers-reduced-motion: reduce) {
      .video-bg { display: none; }
      body { background: #000 url('poster.jpg') center/cover no-repeat; }
    }

    .hero-banner-video {
      width: 100%;
      height: 100%;
    }

/* ----- Nav BG Scroll Down ----- */

.nav-bg {background: #4d2792;}
.nav-bg {height: 75px;}
.nav-bg .logo {width: 125px;}
.nav-logo {display: none;}

.nav-logo {position: absolute; bottom: 30px; left: 30px; width: 105px;}  /* mobile logo */
.nav-logo img {width:100%;}

@media screen and (max-width: 480px) {
.logo {width: 115px;}
.nav-bg {height: 50px;}
.nav-bg .logo {width: 100px;}
.nav-bg .header {padding: 0 0 0 30px;}
.nav-logo {display: block;}
}

/* ----- Typewrite Effect ----- */

@keyframes fadeAndScale {
  0%, 100% {
    opacity: 0;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

.typewriter-text {
  white-space: nowrap;
  overflow: hidden;
  border-right: 3px solid #f8e8db; 
  /*font-family: monospace; 
  font-size: 2rem;*/
  width: 10ch;
  color: #f8e8db;
  font-size: 32px;   
  
  /* CHANGE: Changed 'forwards' to 'infinite' and added a delay loop */
  animation: 
    typing 4s steps(10) infinite,
    blink 0.5s step-end infinite alternate;
}

@media screen and (max-width: 480px) {.typewriter-text {font-size: 26px;}}

/* CHANGE: Updated keyframes to hold the full text before looping */
@keyframes typing {
  0%, 100% { width: 0; }
  70%, 90% { width: 10ch; } /* Holds the text fully typed for a moment */
}

@keyframes blink {
  50% { border-color: transparent; }
}

/* ------ Home Services ----- */

.spacer{
  height: 1000px;
  padding: 4  0px;
}

/* each word gets a scroll window */

.word-section{
  /*height:100vh;*/
  height: auto;
  position:relative;
}

/* pinned text */
.word-section h2{
  position:sticky;
  top: 50vh;
  margin:0;
  transform:translateY(-50%);
  font-size:120px;
  line-height:1;
  opacity:0;
  animation:wordScroll linear both;
  animation-timeline:view();
  animation-range:entry 0% exit 100%;
  font-family: 'Sequia Grande';
  color: #f8e8db;
  font-size: 200px;
  font-weight: normal;
  line-height: 150px;  
}

@media screen and (max-width: 480px) {
.word-section h2 {font-size: 70px; line-height: 60px;}
}

@keyframes wordScroll{

/* before hitting 50vh */
0%{
 opacity:0;
 transform: translateY(0); 
}

/* arrives at 50vh */

50%{
 opacity:1;
 transform: translateY(-50%);   
}

/* moves above the line */

65%{
 opacity:0;
 transform: translateY(-150%); 
}

/* fades away */

100%{
 opacity:0;
 transform: translateY(-250%); 
}

}


/* ----- tiles slide ----- */

.blocks-section {
  background: url('../images/shapes-1a.png') no-repeat center center;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 48px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 100px 40px;

  overflow: hidden;

  /* enables scroll animation */
  view-timeline-name: --blocks-scroll;
  view-timeline-axis: block;
}


.blocks {
  display: flex;
  flex-direction: column;
  gap: 48px;

  animation-timeline: --blocks-scroll;
  animation-range: entry 10% cover 100%;
}


.block {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #c18bd6;
  border-radius: 14px;

  transform-origin: center;

  animation-name: scale-block;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-timeline: --blocks-scroll;
  animation-range: entry 10% cover 100%;
}

.block img {width:100%;}

/* Columns 1 and 3 move downward */
.col-1,
.col-3 {
  animation-name: slide-up;
}


/* Columns 2 and 4 move upward */
.col-2,
.col-4 {
  animation-name: slide-down;
}



/* movement */
@keyframes slide-down {

  from {
    transform: translateY(-150px);
  }

  to {
    transform: translateY(100px);
  }

}


@keyframes slide-up {

  from {
    transform: translateY(0px);
  }

  to {
    transform: translateY(-100px);
  }

}


/* scale every block */
@keyframes scale-block {

  0% {
    opacity: 1;
    transform: scale(0.95);
  }

  50% {
    opacity: 1;
    transform: scale(1.0);
  }

  100% {
    opacity: 1;
    transform: scale(0.95);
  }

}


/* mobile */
@media(max-width:768px){

  .blocks-section {
    grid-template-columns: repeat(2,1fr);
    gap:20px;
  }

}

/* ----- img fade ----- */

/* Container forces both images into the exact same space */
.image-container {
  position: relative;
  
}

/* Force both images to overlap perfectly */
.image-container img {
  position: absolute;
  top: 0;
  left: 0%;
  
}

/* Apply the infinite fade animation to the top image */
.img-top {
  animation: crossfade 2s ease-in-out infinite alternate;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);      
}

/* Define the fade keyframes */
@keyframes crossfade {
  0%, 30% {
    opacity: 0; /* Shows the bottom image clearly */
  }
  70%, 100% {
    opacity: 1; /* Completely reveals the top image */
  }
}

/* ----- wave container ----- */

.wave-row {
  display: flex;
  justify-content: center;
  align-items: center;
  /*min-height: 100vh;*/
  /*background: #000;*/  
}

.wave-container {
  position: relative;  
}

/* Base styles shared by both text layers */
.wave-container h2 {
  position: absolute;
  /*top: 50%; left: 50%; */
  left: 50%;
  transform: translate(-50%, 0%);
}

/* Layer 1: Transparent text with a visible stroke */
.wave-container h2:nth-child(1) {
  color: transparent;
  color: #fbe9db;
  -webkit-text-stroke: 0px #3498db;
}

/* Layer 2: Filled text clipped by an animated wave polygon */
.wave-container h2:nth-child(2) {
  color: #fa9344;
  animation: liquid-wave 4s ease-in-out infinite;
}

/* Keyframes shifting the clip-path coordinates to mimic fluid motion */
@keyframes liquid-wave {
  0%, 100% {
    clip-path: polygon(
      0% 45%, 16% 44%, 33% 50%, 54% 60%, 70% 61%, 84% 59%, 100% 52%, 
      100% 100%, 0% 100%
    );
  }
  50% {
    clip-path: polygon(
      0% 60%, 15% 65%, 34% 66%, 51% 62%, 67% 50%, 84% 45%, 100% 46%, 
      100% 100%, 0% 100%
    );
  }
}

/* ----- contact form ----- */

.contact-form-container {
    max-width:1200px;
    margin:auto;
    background:#A16ED2;
    border-radius:40px;
    padding:55px;
    display:grid;
    grid-template-columns:1fr 1.2fr;
    gap:50px;
    align-items:center;
    margin-top: 100px;
}

.contact-left{
    color:#FFF5EA;
}

.contact-left h2{
    font-size:4rem;
    line-height:1.1;
    font-weight:700;
    margin-bottom:40px;
}

.contact-left p{
    font-size: 21px;
    line-height: 28px;
    max-width:420px;
    text-align: left;
}

.contact-form{
    background:#5C31A5;
    padding:35px;
    border-radius:40px;
}

.contact-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}

.field{
    display:flex;
    flex-direction:column;
    margin-bottom:18px;
}

label{
    color:#FFB347;
    font-weight:700;
    margin-bottom:8px;
    font-size:1rem;
}

input,
textarea{
    border:none;
    outline:none;
    border-radius:18px;
    background:#F7E9DA;
    padding:18px;
    font-size:1rem;
    width:100%;
}

textarea{
    height:180px;
    resize:none;
}

button.button-cream {
    background:#F7E9DA;
    color:#5C31A5;
    border:none;
    border-radius:16px;
    padding:16px 40px;
    font-size:1.1rem;
    font-weight:700;
    cursor:pointer;
    transition:.25s;
}

button.button-cream:hover{
    transform:translateY(-2px);
}

button.button-cream:disabled{
    opacity:.6;
    cursor:not-allowed;
    transform:none;
}

.hp-field{
    position:absolute;
    left:-9999px;
    top:-9999px;
    opacity:0;
    height:0;
    width:0;
    overflow:hidden;
}

.field.field-invalid input,
.field.field-invalid textarea{
    box-shadow:0 0 0 2px #e35d1f;
}

.field-error-msg{
    color:#FFD9B3;
    font-size:.85rem;
    margin-top:6px;
}

.contact-form-message{
    display:none;
    margin:16px 0 0;
    padding:12px 16px;
    border-radius:12px;
    font-size:.95rem;
}

.contact-form-message.is-visible{
    display:block;
}

.contact-form-message.is-success{
    background:#e8f8ee;
    color:#1e8e3e;
}

.contact-form-message.is-error{
    background:#fdece2;
    color:#c0392b;
}

@media (max-width:900px){

    .contact-form-container {
        grid-template-columns:1fr;
        padding:35px;
    }    

    .contact-left p{
        margin:auto;
    }

    .contact-left h2{
        font-size:2.8rem;
    }

}

@media (max-width:600px){

    .contact-row{
        grid-template-columns:1fr;
    }

    .contact-form-container {
        border-radius:25px;
        padding:25px;
    }

    .contact-form{
        border-radius:25px;
        padding:25px;
    }

    .contact-left h2{
        font-size:2.2rem;
    }

}