@media (max-width:320px) {

}

@media (min-width:321px) {
  .sticky {
    position: fixed !important;
    z-index:999;
    margin-top: 0px;
    -moz-transition: all 0.2s ease-out;  	-o-transition: all 0.2s ease-out;  	-webkit-transition: all 0.2s ease-out;  	-ms-transition: all 0.2s ease-out; background: #fff; box-shadow: 2px 2px 30px rgb(228, 228, 228);
  }

  .sticky .logo{ background: url('/images/logo.webp') no-repeat center left; width: 167px; background-size: 127px; height: 70px; margin-top: 0px;display: block;}
  .logo{ background: url('/images/logo.webp') no-repeat center left; width: 167px; background-size: 127px; height: 70px; display: block;margin-top: 10px; }
}

/* Mobil / tablet üst bar (hamburger) */

  .uk-text-white-hamburger {
    color: #ffffff;
  }

  .sticky .uk-text-white-hamburger {
    color: #3b372e;
  }

  .uk-text-white-hamburger:hover {
    color: #c5c4c0;
  }

  #offcanvas-flip .uk-offcanvas-close {
    color: #fff;
  }


/* Offcanvas (mobil menü) genel tasarım - tüm ekran genişlikleri */
#offcanvas-flip .uk-offcanvas-bar {
  background: linear-gradient(
    to bottom,
    #48433c 0%,
    #3b372e 40%,
    #2c2721 100%
  );
  color: #fff;
}

#offcanvas-flip .uk-nav-primary > li > a {
  color: #f5f2ec;
  padding: 6px 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 17px;
  font-weight: 500;
}

#offcanvas-flip .uk-nav-sub {
  margin-top: 2px;
  padding-left: 0;
  
}

#offcanvas-flip .uk-nav-sub > li > a {
  color: #f0e8d5;
  padding: 4px 10px;
  font-size: 15px;
  text-align: left;
}

#offcanvas-flip .uk-nav-sub > li {
  margin-top: 5px;
  border-left: 2px solid #f0e8d5;
  
}

@media(min-width:640px) {

}
.slogan-1 {font-size: 24px;color: #e3d8b6; font-weight: 600; line-height: 40px; padding-left: 0px; text-shadow:4px 6px 20px rgb(0 0 0 / 68%); padding: 10px; }
@media(min-width:960px) {

.slogan-1 {font-size: 42px;color: #e3d8b6; font-weight: 600; line-height: normal; padding-left: 5px; text-shadow:4px 6px 20px rgb(0 0 0 / 68%); }
}

.hero-slogan-block {
  display: inline-block;
  text-align: center;
}

.hero-slogan-icons {
  gap: 16px;
  justify-content: center;
  margin-top: 16px;
}

.hero-icon-item .hero-icon-image {
  width: 200px;
  height: 140px;
  object-fit: contain;
}
@media (max-width:959px) {
  .hero-icon-item .hero-icon-image {
    width: 150px;
    height: 90px;
  }
}

.hero-icon-label {
  margin-top: 10px;
  font-size: 18px;
  letter-spacing: 0.18em;
  color: #e3d8b6;
}

.hero-icon-divider {
  display: inline-block;
  width: 1px;
  height: 70px;
  background-color: #e3d8b6;
  opacity: 0.7;
}

.hero-icon-link {
  text-decoration: none;
  color: inherit;
}

.hero-icon-link:hover .hero-icon-label {
  color: #d9caa6;
}

/* Scroll-to-video story section */
.story-scroll {
  height: 200vh;
  padding-top: 240px;
}

.story-sticky {
  position: sticky;
  top:40vh;
  transform: translateY(-40%);
}

.story-card {
  position: relative;
  width: 100%;
  background: rgba(120, 108, 101, 0.92);
  border-radius: 14px;
  overflow: hidden;
  transition: border-radius 350ms ease, margin 350ms ease, width 350ms ease;
  height: 280px;
}

.story-card.is-expanded {
  border-radius: 0;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}

.story-card.is-shrink {
  width: 100%;
  margin-left: 0;
  border-radius: 14px;
}

.story-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px;
  color: #fff;
  opacity: var(--storyTextAlpha, 1);
  transform: translateY(var(--storyTextY, 0px));
  transition: opacity 220ms ease, transform 220ms ease;
}

.story-text-inner {
  max-width: auto;
  font-size: 18px;
  line-height: 1.6;
  color: #fff;
}

.story-text-inner p {
  margin: 0 0 14px;
}

.story-text-inner p:last-of-type {
  margin-bottom: 0;
}

.story-strapline {
  margin-top: 20px;
  font-size: 24px;
  font-weight: 600;
  color: #e3d8b6;
}

.story-video {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms ease;
}

.story-video::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(72, 67, 60, 0.35);
  pointer-events: none;
}

.story-card.is-video .story-video {
  opacity: 1;
  pointer-events: auto;
}

.story-card.is-video .story-text {
  opacity: 0;
  transform: translateY(-10px);
}

.story-video-el {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Home features section (after video) */
.home-features {
  padding: 0 0 60px;
}

.home-feature-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #786c65;
  margin-bottom: 10px;
}

.home-feature-icon {
  width: 84px;
  height: 84px;
  object-fit: contain;
  margin: 0 auto 10px;
  display: block;
}
.home-feature-svg {
  overflow: visible;
}

.home-feature-text {
  font-size: 16px;
  line-height: 1.4;
  color: #8b7f78;
  margin: 0 auto;
}

/* Export globe animation (middle home feature) */
.home-feature-middle {
  display: flex;
  align-items: center;
  justify-content: center;
}

.export-globe {
  position: relative;
  width: 100%;
  max-width: 340px;
  aspect-ratio: 1;
  margin: 0 auto;
}

.export-globe-canvas {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: block;
}

.export-globe-rings {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1;
}

.export-globe-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(140, 90, 30, 0.12);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Pin markers on globe */
.export-pin {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
  opacity: 0;
  animation: exportPinAppear 9s ease-in-out infinite;
  pointer-events: none;
}

.export-pin-label {
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(72, 67, 60, 0.88);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(227, 216, 182, 0.3);
  color: #f5f2ec;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.03em;
  white-space: nowrap;
  margin-bottom: 4px;
}

.export-pin-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e3d8b6;
  box-shadow: 0 0 8px rgba(227, 216, 182, 0.6), 0 0 16px rgba(227, 216, 182, 0.2);
}

.export-pin-1 { top: 22%; left: 28%; animation-delay: 0s; }
.export-pin-2 { top: 38%; left: 58%; animation-delay: 3s; }
.export-pin-3 { top: 60%; left: 36%; animation-delay: 6s; }

@keyframes exportPinAppear {
  0% { opacity: 0; transform: translateX(-50%) scale(0.92) translateY(6px); }
  5% { opacity: 1; transform: translateX(-50%) scale(1) translateY(0); }
  28% { opacity: 1; transform: translateX(-50%) scale(1) translateY(0); }
  33.33% { opacity: 0; transform: translateX(-50%) scale(0.92) translateY(-4px); }
  100% { opacity: 0; transform: translateX(-50%) scale(0.92) translateY(-4px); }
}

@media (max-width:959px) {
  .export-globe {
    max-width: 260px;
  }

  .export-pin-label {
    font-size: 11px;
    padding: 4px 10px;
  }

  .export-pin-dot {
    width: 6px;
    height: 6px;
  }
}

@media (max-width:959px) {
  .home-slogan {
    font-size: 26px !important;
    line-height: 1.25 !important;
    padding-left: 0;
    white-space: normal !important;
    overflow: visible;
    word-break: normal;
  }

  .story-sticky {
    top: 30vh;
    transform: translateY(-20%);
  }

  .story-text-inner {
    font-size: 14px;
    line-height: 1.55;
  }

  .story-text {
    padding: 24px 20px !important;
  }

  .story-strapline {
    font-size: 18px !important;
    margin-top: 14px !important;
  }

  .story-scroll {
    padding-top: 200px;
  }
}

@media(min-width:1200px) {
    .sticky {
    position: fixed !important;
    z-index:999;
    margin-top: -40px;
    -moz-transition: all 0.2s ease-out;  	-o-transition: all 0.2s ease-out;  	-webkit-transition: all 0.2s ease-out;  	-ms-transition: all 0.2s ease-out; background: #fff; box-shadow: 2px 2px 30px rgb(228, 228, 228);}
    .sticky .logo{ background: url('/images/logo.webp') no-repeat center left; width: 167px; background-size: 167px; height: 100px; margin-top: 35px;display: block;}
    .logo{ background: url('/images/logo.webp') no-repeat center center; width: 167px; background-size: 167px; height: 100px; display: block;margin-top: 30px; }


  .uk-navbar-nav>li>a{ color: #fff; font-size: 18px; margin: 0 5px 0 5px; font-weight: 500;}
  .uk-navbar-nav>li.uk-active>a{ color: #fff; font-size: 18px;}
  .uk-navbar-dropdown-nav>li>a{ color: #000; font-size: 15px; text-align: left;}

  .sticky .uk-navbar-nav>li>a{ color: #3b372e; font-size: 18px; margin: 0 5px 0 5px; font-weight: 500;}
  .sticky .uk-navbar-nav>li.uk-active>a{ color: #3b372e; font-size: 18px;}
  .sticky .uk-navbar-dropdown-nav>li>a{ color: #3b372e; font-size: 15px;}
  .sticky .uk-navbar-nav>li:hover>a, .uk-navbar-nav>li>a[aria-expanded=true]{ color: #3b372e;}
}

@media(min-width:1400px) {

}

@media(min-width:1600px) {

}

.slide-top-gradient{
position:absolute;
top:0; left:0; right:0;
height:350px;
background: linear-gradient(
    to bottom,
    #48433c 0%,
    rgba(72, 67, 60, 0.87) 25%,
    rgba(72, 67, 60, 0.45) 50%,
    rgba(72, 67, 60, 0) 100%
);
z-index:2;
pointer-events:none;
}
@media (max-width:959px){
  .slide-top-gradient{
    height:90px;
    background: linear-gradient(
      to bottom,
      #48433c 0%,
      rgba(72, 67, 60, 0.6) 50%,
      rgba(72, 67, 60, 0) 100%
    );
  }
}

.home-slogan {
  font-size: 42px;
  color: #786c65;
  font-weight: 600;
  line-height: normal;
  padding-left: 5px;
} 
.home-center-bg {
  min-height:750px; background:url('/images/home-center-bg.webp') no-repeat center top; background-size: contain;
}

/* ── Katkısız susam bitkisi: tohum düşme animasyonları ── */
@keyframes seedDrop1 { 0%,30%{opacity:0;transform:translate(26px,32px) rotate(-25deg)} 32%{opacity:1;transform:translate(26px,32px) rotate(-25deg)} 76%{opacity:1;transform:translate(22px,70px) rotate(-20deg)} 85%{opacity:0;transform:translate(22px,72px) rotate(-20deg)} 100%{opacity:0;transform:translate(26px,32px) rotate(-25deg)} }
@keyframes seedDrop2 { 0%,35%{opacity:0;transform:translate(56px,26px) rotate(20deg)}  37%{opacity:1;transform:translate(56px,26px) rotate(20deg)}  77%{opacity:1;transform:translate(54px,68px) rotate(15deg)}  86%{opacity:0;transform:translate(54px,70px) rotate(15deg)}  100%{opacity:0;transform:translate(56px,26px) rotate(20deg)} }
@keyframes seedDrop3 { 0%,33%{opacity:0;transform:translate(30px,44px) rotate(10deg)}  35%{opacity:1;transform:translate(30px,44px) rotate(10deg)}  77%{opacity:1;transform:translate(27px,72px) rotate(8deg)}   86%{opacity:0;transform:translate(27px,74px) rotate(8deg)}   100%{opacity:0;transform:translate(30px,44px) rotate(10deg)} }
@keyframes seedDrop4 { 0%,37%{opacity:0;transform:translate(58px,36px) rotate(-15deg)} 39%{opacity:1;transform:translate(58px,36px) rotate(-15deg)} 78%{opacity:1;transform:translate(61px,68px) rotate(-12deg)} 87%{opacity:0;transform:translate(61px,70px) rotate(-12deg)} 100%{opacity:0;transform:translate(58px,36px) rotate(-15deg)} }
@keyframes seedDrop5 { 0%,31%{opacity:0;transform:translate(40px,18px) rotate(35deg)}  33%{opacity:1;transform:translate(40px,18px) rotate(35deg)}  76%{opacity:1;transform:translate(38px,72px) rotate(30deg)}  85%{opacity:0;transform:translate(38px,74px) rotate(30deg)}  100%{opacity:0;transform:translate(40px,18px) rotate(35deg)} }
@keyframes seedDrop6 { 0%,36%{opacity:0;transform:translate(44px,22px) rotate(-18deg)} 38%{opacity:1;transform:translate(44px,22px) rotate(-18deg)} 77%{opacity:1;transform:translate(46px,70px) rotate(-14deg)} 86%{opacity:0;transform:translate(46px,72px) rotate(-14deg)} 100%{opacity:0;transform:translate(44px,22px) rotate(-18deg)} }
@keyframes seedDrop7 { 0%,40%{opacity:0;transform:translate(32px,38px) rotate(40deg)}  42%{opacity:1;transform:translate(32px,38px) rotate(40deg)}  79%{opacity:1;transform:translate(29px,68px) rotate(35deg)}  88%{opacity:0;transform:translate(29px,70px) rotate(35deg)}  100%{opacity:0;transform:translate(32px,38px) rotate(40deg)} }
@keyframes seedRest  { 0%,74%,100%{opacity:0} 79%,89%{opacity:0.85} 95%{opacity:0} }
.sd1{animation:seedDrop1 8s 0s ease-in infinite}
.sd2{animation:seedDrop2 8s 0s ease-in infinite}
.sd3{animation:seedDrop3 8s 0s ease-in infinite}
.sd4{animation:seedDrop4 8s 0s ease-in infinite}
.sd5{animation:seedDrop5 8s 0s ease-in infinite}
.sd6{animation:seedDrop6 8s 0s ease-in infinite}
.sd7{animation:seedDrop7 8s 0s ease-in infinite}
.sr {animation:seedRest  8s 0s ease-in infinite}

/* ── Export globe: halka boyutları ── */
.export-globe-ring-1 { width:108%; height:108%; }
.export-globe-ring-2 { width:120%; height:120%; border-color:rgba(255,151,23,0.3); }
.export-globe-ring-3 { width:134%; height:134%; border-color:rgba(140,90,30,0.1); }