/* =========================================================
   HERO — 4 slayt + özel "ihracat / uluslararası" slaydı
   ========================================================= */

/* ---- 4 slayt zamanlaması (20 sn döngü, her biri 5 sn) ---- */
.hero-slide-text{ animation:heroFade4 20s infinite !important; }
.hero-slide-text.ts1{ animation-delay:0s !important; }
.hero-slide-text.ts2{ animation-delay:5s !important; }
.hero-slide-text.ts3{ animation-delay:10s !important; }
.hero-slide-text.ts4{ animation-delay:15s !important; }

.hero-visual{ animation:heroFade4 20s infinite !important; }
.hero-visual.v1{ animation-delay:0s !important; }
.hero-visual.v2{ animation-delay:5s !important; }
.hero-visual.v3{ animation-delay:10s !important; }
.hero-visual.v4{ animation-delay:15s !important; }

@keyframes heroFade4{
  0%   { opacity:0; transform:translateY(10px); }
  1.6% { opacity:1; transform:translateY(0); }
  23%  { opacity:1; transform:translateY(0); }
  25%  { opacity:0; transform:translateY(-6px); }
  100% { opacity:0; }
}

.hero-noktalar span::after{ animation:dotFill4 20s infinite !important; }
.hero-noktalar span:nth-child(1)::after{ animation-delay:0s !important; }
.hero-noktalar span:nth-child(2)::after{ animation-delay:5s !important; }
.hero-noktalar span:nth-child(3)::after{ animation-delay:10s !important; }
.hero-noktalar span:nth-child(4)::after{ animation-delay:15s !important; }
@keyframes dotFill4{
  0%{transform:scaleX(0)} 1.6%{transform:scaleX(1)} 23%{transform:scaleX(1)} 25%{transform:scaleX(0)} 100%{transform:scaleX(0)}
}

/* ---- 4. slayt görseli (eski Ar-Ge kolajı) ---- */
.hero-visual.v4{ background-image:url('../img/hero-4-ihracat.jpg'); background-position:center; }

/* =========================================================
   ÖZEL SLAYT: uluslararası / ihracat
   ========================================================= */

/* --- metin tarafı --- */
.hero-slide-text.ts-ihracat .hero-etiket{
  background:linear-gradient(100deg, rgba(58,168,224,.22), rgba(47,190,110,.20));
  border-color:rgba(120,205,255,.42);
  color:#d7f1ff;
}
.hero-slide-text.ts-ihracat .hero-etiket .nokta{
  background:#4fc3f7; box-shadow:0 0 0 4px rgba(79,195,247,.28);
}
.hero-slide-text.ts-ihracat h1 em{
  background:linear-gradient(96deg,#8fe3b0 0%, #59d5e0 46%, #7cc4ff 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-slide-text.ts-ihracat .hero-tag-list span::before{
  background:linear-gradient(135deg,#4fc3f7,#2fbe6e);
}

/* hygenova butonu */
.btn-hygenova{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 26px; border-radius:11px;
  font-weight:800; font-size:14.5px; letter-spacing:.01em; color:#06202c;
  background:linear-gradient(115deg,#7ff0c0 0%, #62dced 48%, #8ec9ff 100%);
  background-size:200% 100%; background-position:0 0;
  box-shadow:0 12px 28px rgba(89,213,224,.38), inset 0 1px 0 rgba(255,255,255,.5);
  transition:background-position .5s, transform .25s, box-shadow .25s;
  position:relative; overflow:hidden;
}
.btn-hygenova svg{ width:17px; height:17px; }
.btn-hygenova .dis{ width:14px; height:14px; opacity:.72; }
.btn-hygenova:hover{
  background-position:100% 0; transform:translateY(-2px); color:#06202c;
  box-shadow:0 18px 36px rgba(89,213,224,.5), inset 0 1px 0 rgba(255,255,255,.6);
}

/* --- görsel tarafı --- */
.hero-visual.v-ihracat{
  background-size:cover; background-position:center;
  overflow:hidden;
}
/* görsel üzerine ince marka kaplaması */
.hero-visual.v-ihracat::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(680px 420px at 78% 14%, rgba(47,190,110,.16), transparent 62%),
    radial-gradient(560px 460px at 16% 88%, rgba(58,140,224,.20), transparent 60%);
}

/* dünya teli */
.ih-kure{
  position:absolute; left:50%; top:47%; transform:translate(-50%,-50%);
  width:min(86%, 430px); aspect-ratio:1; opacity:.30;
  color:#7fd9ff;
  animation:ihDon 34s linear infinite;
}
.ih-kure svg{ width:100%; height:100%; display:block; }
@keyframes ihDon{ from{ transform:translate(-50%,-50%) rotate(0deg);} to{ transform:translate(-50%,-50%) rotate(360deg);} }

/* yörünge halkaları */
.ih-halka{
  position:absolute; left:50%; top:47%; transform:translate(-50%,-50%);
  border-radius:50%; border:1px solid rgba(140,220,255,.16);
  pointer-events:none;
}
.ih-halka.h1{ width:340px; height:340px; }
.ih-halka.h2{ width:470px; height:470px; border-style:dashed; border-color:rgba(140,220,255,.12); }
.ih-halka.h3{ width:610px; height:610px; border-color:rgba(140,220,255,.07); }

/* ürünler */
.ih-urun{
  position:absolute; bottom:0; z-index:3;
  filter:drop-shadow(0 26px 34px rgba(0,0,0,.55));
}
.ih-urun img{ display:block; height:100%; width:auto; }

.ih-urun.luperr{
  left:2%; height:82%;
  animation:ihSuz 7s ease-in-out infinite;
}
.ih-urun.oliva{
  right:8%; height:74%; bottom:4%;
  animation:ihSuz 7s ease-in-out infinite 1.1s;
}
@keyframes ihSuz{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-12px);} }

/* ürün altı ışıma */
.ih-urun::after{
  content:""; position:absolute; left:50%; bottom:-6px; transform:translateX(-50%);
  width:120%; height:44px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(120,220,255,.34), transparent 72%);
  filter:blur(6px); z-index:-1;
}

/* marka etiketi */
.ih-etiket{
  position:absolute; z-index:4;
  display:inline-flex; flex-direction:column; gap:2px;
  padding:9px 14px; border-radius:11px;
  background:rgba(6,25,40,.72);
  border:1px solid rgba(140,220,255,.26);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  box-shadow:0 12px 26px rgba(0,0,0,.36);
}
.ih-etiket b{ font-size:12.5px; font-weight:800; color:#fff; letter-spacing:.04em; line-height:1.2; }
.ih-etiket span{ font-size:10.5px; color:#9fd9f2; letter-spacing:.10em; text-transform:uppercase; font-weight:700; }
.ih-etiket.e1{ left:5%; top:14%; }
.ih-etiket.e2{ right:5%; bottom:16%; }

/* üst köşe: EN rozet */
.ih-en{
  position:absolute; right:20px; top:20px; z-index:5;
  display:inline-flex; align-items:center; gap:9px;
  padding:9px 15px; border-radius:999px;
  background:linear-gradient(110deg, rgba(127,240,192,.94), rgba(142,201,255,.94));
  color:#06202c; font-size:11.5px; font-weight:800; letter-spacing:.10em; text-transform:uppercase;
  box-shadow:0 12px 26px rgba(0,0,0,.30);
}
.ih-en svg{ width:15px; height:15px; }

/* alt bant */
.ih-bant{
  position:absolute; left:0; right:0; bottom:0; z-index:4;
  display:flex; justify-content:center; gap:8px; flex-wrap:wrap;
  padding:12px 14px;
  background:linear-gradient(180deg, transparent, rgba(4,16,27,.86) 55%);
}
.ih-bant span{
  font-size:10.5px; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
  color:#bfe4f5;
  border:1px solid rgba(140,220,255,.22);
  background:rgba(255,255,255,.05);
  padding:6px 12px; border-radius:999px;
}

/* ---- duyarlı ---- */
@media (max-width:900px){
  .ih-etiket{ display:none; }
  .ih-urun.luperr{ height:70%; left:0; }
  .ih-urun.oliva{ height:62%; right:4%; }
  .ih-bant span{ font-size:9.5px; padding:5px 9px; }
}
@media (prefers-reduced-motion:reduce){
  .ih-kure, .ih-urun{ animation:none !important; }
}

/* =========================================================
   JS kontrollü slider: oklar + tıklanabilir noktalar
   ========================================================= */

.hero.js-slider .hero-slide-text,
.hero.js-slider .hero-visual{
  animation:none !important;
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:opacity .55s ease, transform .55s cubic-bezier(.2,.8,.25,1), visibility .55s;
}
.hero.js-slider .hero-slide-text.aktif,
.hero.js-slider .hero-visual.aktif{
  opacity:1; visibility:visible; transform:translateY(0);
}
.hero.js-slider .hero-visual{ transform:scale(1.03); }
.hero.js-slider .hero-visual.aktif{ transform:scale(1); }

/* ---- oklar ---- */
.hero-ok{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:20;
  width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center;
  cursor:pointer; border:1px solid rgba(255,255,255,.26);
  background:rgba(8,26,42,.42);
  color:#fff;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  box-shadow:0 12px 28px rgba(0,0,0,.30);
  transition:background .25s, border-color .25s, transform .25s, box-shadow .25s, opacity .25s;
  opacity:.72;
  padding:0;
}
.hero-ok svg{ width:20px; height:20px; }
.hero-ok:hover{
  opacity:1;
  background:linear-gradient(135deg,#2aa15c,#2fbe6e);
  border-color:transparent;
  box-shadow:0 16px 34px rgba(42,161,92,.40);
  transform:translateY(-50%) scale(1.07);
}
.hero-ok:focus-visible{ outline:3px solid #7ff0c0; outline-offset:3px; opacity:1; }
.hero-ok.sol{ left:14px; }
.hero-ok.sag{ right:14px; }

/* ---- noktalar (buton) ---- */
.hero-noktalar{ align-items:center; }
.hero-noktalar > *{
  width:34px; height:5px; border-radius:5px;
  background:rgba(255,255,255,.26);
  border:0; padding:0; cursor:pointer;
  display:block; overflow:hidden; position:relative;
  transition:width .35s cubic-bezier(.2,.8,.25,1), background .3s;
}
.hero-noktalar > *:hover{ background:rgba(255,255,255,.46); }
.hero-noktalar > *:focus-visible{ outline:2px solid #7ff0c0; outline-offset:3px; }
.hero-noktalar > *.aktif{ width:58px; background:rgba(255,255,255,.34); }

.hero.js-slider .hero-noktalar > *::after{
  animation:none !important;
  transform:scaleX(0);
  background:linear-gradient(90deg,#2fbe6e,#59d5e0);
}
.hero.js-slider .hero-noktalar > *.dolduruyor::after{
  animation:noktaDol 5.5s linear forwards !important;
}
.hero.js-slider .hero-noktalar > *.durdu::after{
  animation-play-state:paused !important;
}
@keyframes noktaDol{ from{ transform:scaleX(0);} to{ transform:scaleX(1);} }

@media (max-width:900px){
  .hero-ok{ width:42px; height:42px; }
  .hero-ok svg{ width:17px; height:17px; }
  .hero-ok.sol{ left:6px; }
  .hero-ok.sag{ right:6px; }
}


/* ==========================================================================
   ===== MOBIL-PRO BASLANGIC =================================================
   Saglam Kimya - Mobil Gorunum Iyilestirmeleri (surum 1.0)
   Bu blogun TAMAMI @media icindedir; sadece dar ekranlarda calisir.
   Masaustu gorunumu etkilenmez. Geri almak icin BASLANGIC-BITIS arasini silin.
   ========================================================================== */

/* --- 1) HERO SLIDER ------------------------------------------------------
   Sorun: .hero-text-stack kutusuna sabit 430px yukseklik verilmis, slayt
   metinleri "absolute" oldugu icin kutuyu buyutemiyor. Mobilde metin tasip
   "Urunleri Kesfedin" butonu alttaki gorselin arkasinda kaliyordu.
   Cozum: Slaytlar ayni grid hucresinde ust uste durur, kutu en uzun slayta
   gore kendiliginden uzar. Fade gecisi aynen korunur.                      */
@media (max-width:1050px){
  .hero-text-stack{ min-height:0; display:grid; }
  .hero-text-stack > .hero-slide-text{
    position:relative; inset:auto; grid-area:1 / 1; width:100%;
  }
  .hero-inner-v3{ gap:28px; }
  .hero-ok{ top:auto; bottom:12px; transform:none; }
  .hero-ok:hover{ transform:none; }
}

@media (max-width:600px){
  .hero{ padding:40px 18px 34px; }
  .hero-slide-text h1{ font-size:clamp(28px,8vw,36px); line-height:1.14; margin-top:12px; }
  .hero-slide-text p{ font-size:15px; margin-top:12px; }
  .hero-cta{ gap:10px; margin-top:22px; }
  .hero-cta > *{ flex:1 1 100%; justify-content:center; text-align:center; }
  .hero-noktalar{ margin-top:24px; justify-content:center; }
  .hero-visual-stack{ min-height:260px; }
}

/* --- 2) MARKALAR ("Bes tescilli markayla...") -----------------------------
   Sorun: Logo kutusu 120px, icindeki gorsel 144px'e buyuyor; kutu overflow
   hidden oldugu icin logolar ustten/alttan kirpiliyordu.                    */
@media (max-width:760px){
  /* Not: max-height = .mb-logo yuksekligi eksi dikey padding.
     Yuzde deger (max-height:100%) bu grid yapisinda cozulmedigi icin px kullanildi. */
  .marka-band-v4 .mb-logo img{
    width:auto; height:auto;
    max-width:100%; max-height:72px;
    object-fit:contain;
  }
}

@media (max-width:600px){
  .marka-band-v4 .mb-baslik{ margin-bottom:28px; }
  .marka-band-v4 .mb-baslik h2{ font-size:26px; }
  .marka-band-v4 .mb-baslik p{ font-size:14.5px; }
  .marka-band-v4 .mb-grid{ gap:12px; }
  .marka-band-v4 .mb-kart{ padding:16px 16px 18px; }
  .marka-band-v4 .mb-logo{ height:94px; padding:10px 14px; }
  .marka-band-v4 .mb-logo img{ max-height:74px; }
}

/* --- 3) SEKTOREL COZUMLER ("Urun degil, cozum ariyorsunuz") ---------------
   Sorun: Telefonda da 2 sutun kaliyordu; kart 131px, ic metin alani 79px.  */
@media (max-width:700px){
  .sektor-grid{ grid-template-columns:1fr; gap:14px; }
  .sektor-kart{ padding:22px 20px; min-height:0; }
  .sektor-kart h3{ font-size:18px; }
  .sektor-kart p{ font-size:14px; }
}

/* --- 4) GENEL: kenar bosluklari ve baslik olculeri ------------------------
   Sorun: Tum section bloklarinda "padding:90px 44px" sabitti; 390px'lik bir
   telefonda icerige sadece 283px kaliyordu.                                 */
@media (max-width:600px){
  section:not(.sk-integrated):not(.ref-section):not(.hero){
    padding-top:56px; padding-bottom:56px;
    padding-left:18px; padding-right:18px;
  }
  .bolum-baslik{ margin-bottom:28px; }
  .bolum-baslik h2{ font-size:26px; line-height:1.2; }
  .bolum-baslik p{ font-size:14.5px; }
  .ust-serit{ padding:8px 18px; }
  header.site{ padding:12px 18px; }
}

/* --- 5) NEDEN SAGLAM KIMYA -----------------------------------------------
   Sorun: Mobilde 480px'lik gorsel metinden once geliyordu.                 */
@media (max-width:700px){
  .kalite-grid{ gap:26px; }
  .kalite-grid > .kalite-gorsel{ order:2; }
  .kalite-grid > *:not(.kalite-gorsel){ order:1; }
  .kalite-gorsel img{ height:300px; }
}

/* --- 6) ALT BILGI (FOOTER) -----------------------------------------------
   Sorun: Telefonda 2 sutun kaliyor, sutunlar 104px/163px genislikteydi.    */
@media (max-width:600px){
  .footer-grid{ grid-template-columns:1fr; gap:26px; }
}

/* --- 7) UST SERIT ---------------------------------------------------------
   Hemen hero altindaki kayan seritte zaten tekrar eden rozet telefonda
   gizlenir, ~40px kazandirir. Istenmezse bu blok silinebilir.              */
@media (max-width:600px){
  .ust-serit .ust-slogan{ display:none; }
}

/* ===== MOBIL-PRO BITIS ==================================================== */


/* ===== BOLUM ARALIKLARI BASLANGIC =====
   Ana sayfadaki bolumler arasindaki dikey bosluk daraltildi.
   Hero ve alt bilgi CTA'si haric tutuldu. */
body.home section:not(.hero):not(.twsk-cta-alan){
  padding-top:64px;
  padding-bottom:64px;
}
@media (max-width:900px){
  body.home section:not(.hero):not(.twsk-cta-alan){
    padding-top:52px;
    padding-bottom:52px;
  }
}
@media (max-width:600px){
  body.home section:not(.hero):not(.twsk-cta-alan){
    padding-top:44px;
    padding-bottom:44px;
  }
}
/* ===== BOLUM ARALIKLARI BITIS ===== */