/* Ana sayfa blokları.

   Renk ailesi hero ile aynı: sıcak siyah, krem, tek sarı aksan. Açık
   bölümler sitenin kendi zeminiyle uyumlu, koyu bantlar hero'yu
   hatırlatıyor ve uzun sayfayı bölümlere ayırıyor.

   Bloklar Elementor'un kutulu kabının içine giriyor; tam genişlik
   gerektirenler (kanıt, teknik, CTA) kaptan taşıp ekranı kaplıyor.     */

.ftk-blok{
  --ftk-sari:#F0B429;
  --ftk-ink:#16150F;
  --ftk-soft:#5B564A;
  --ftk-line:#E6E0D3;
  --ftk-zemin:#FAF8F3;
  --ftk-koyu:#0B0A09;
  --ftk-koyu-ink:#F2EDE3;
  --ftk-koyu-soft:#8F877A;
  --ftk-koyu-line:#241F1A;
  font-family:inherit;
  color:var(--ftk-ink);
  box-sizing:border-box;
}
.ftk-blok *,
.ftk-blok *::before,
.ftk-blok *::after{ box-sizing:inherit; }

/* Kaptan taşıp ekranı kaplayan bantlar.

   flex:0 0 auto şart: Elementor'un konteyneri flexbox ve dar olduğunda
   flex-shrink 100vw'lik kutuyu geri daraltıyor — hero'da tam bu yüzden
   iki yanda şerit kalmıştı. align-self:stretch de dikeyde ortalanıp
   kısalmasını engelliyor. */
.ftk-kanit,
.ftk-teknik,
.ftk-cta{
  width:100vw; max-width:100vw;
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  flex:0 0 auto; align-self:stretch;
}

/* Bölüm başlığı: sola dayalı, tek satır alt açıklama. Ortalanmış başlık
   her sitede aynı görünüyor; sola dayamak sayfaya yön veriyor. */
.ftk-blok-ust{ max-width:640px; margin:0 0 clamp(26px,3.6vw,44px); }
.ftk-blok-ust h2{
  margin:0 0 10px; font-size:clamp(1.6rem,3.4vw,2.6rem); font-weight:700;
  letter-spacing:-.03em; line-height:1.08; color:var(--ftk-ink);
}
.ftk-blok-ust p{
  margin:0; font-size:clamp(.94rem,1.2vw,1.05rem); line-height:1.6;
  color:var(--ftk-soft);
}
.ftk-blok-ust--koyu h2{ color:var(--ftk-koyu-ink); }
.ftk-blok-ust--koyu p{ color:var(--ftk-koyu-soft); }

/* ===== 1. Kanıt şeridi ================================================

   İNCE biçim varsayılan. Önce başlık + açıklama olarak dört kutu hâlinde
   duruyordu; aşağıdaki üç adım şeridi de aynı biçimde (yatay dizilmiş
   kısa başlık + bir satır açıklama) olduğu için sayfa kendini tekrar
   ediyordu. İkisi farklı iş yapıyor: bu şerit GÜVEN veriyor, öteki
   YÖNLENDİRİYOR. Ayrımı biçimle kuruyoruz — bu bir şerit, öteki bir kart.

   Açıklama cümleleri silinmedi, taşındı: dördünün de ayrıntısı zaten
   SSS'de ve teknik bandında daha uzun hâliyle duruyor. Burada yalnızca
   iddia kalıyor.                                                        */

.ftk-kanit{
  background:var(--ftk-zemin);
  border-top:1px solid var(--ftk-line);
  border-bottom:1px solid var(--ftk-line);
}
.ftk-kanit-ic{
  max-width:1320px; margin-inline:auto;
  padding:0 clamp(18px,4vw,40px);
  display:flex; align-items:stretch; flex-wrap:wrap;
}
.ftk-kanit-oge{
  display:flex; align-items:center; gap:9px;
  padding:16px clamp(16px,2.2vw,30px);
  font-size:14px; font-weight:600; letter-spacing:-.01em;
  color:var(--ftk-ink); line-height:1.35;
  border-left:1px solid var(--ftk-line);
}
.ftk-kanit-oge:first-child{ border-left:0; padding-left:0; }
/* Sarı nokta: tek aksan. Her maddeye çizgi çekmek şeridi ağırlaştırıyor. */
.ftk-kanit-oge::before{
  content:""; flex:none; width:6px; height:6px; border-radius:50%;
  background:var(--ftk-sari);
}
.ftk-kanit-oge span{ display:none; }   /* ince biçimde açıklama yok */

/* Geniş biçim: açıklamalı dört kutu. [formatek_kanit bicim="genis"] */
.ftk-kanit--genis .ftk-kanit-ic{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(18px,2.4vw,34px); padding:clamp(24px,3vw,34px) clamp(18px,4vw,40px);
}
.ftk-kanit--genis .ftk-kanit-oge{
  display:block; padding:0 0 0 16px; border-left:2px solid var(--ftk-sari);
  font-size:clamp(.95rem,1.2vw,1.06rem); font-weight:650;
}
.ftk-kanit--genis .ftk-kanit-oge::before{ content:none; }
.ftk-kanit--genis .ftk-kanit-oge span{
  display:block; font-size:13px; font-weight:400; line-height:1.5;
  color:var(--ftk-soft); margin-top:5px;
}

@media (max-width:900px){
  .ftk-kanit-ic{ padding-inline:clamp(14px,4vw,24px); }
  .ftk-kanit-oge{ padding:13px clamp(12px,3vw,20px); font-size:13.5px; }
  .ftk-kanit--genis .ftk-kanit-ic{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:560px){
  /* Dört madde tek satıra sığmıyor: ikişerli iki satır, ayraçlar
     satır başında kalkıyor. */
  .ftk-kanit-oge{ flex:1 1 calc(50% - 1px); padding-inline:12px; }
  .ftk-kanit-oge:nth-child(odd){ border-left:0; padding-left:0; }
  .ftk-kanit-oge:nth-child(n+3){ border-top:1px solid var(--ftk-line); }
  .ftk-kanit--genis .ftk-kanit-ic{ grid-template-columns:1fr; gap:16px; }
}

/* ===== 2. Vitrin ======================================================
   Dört kart, biri geniş. Eşit dört kutu katalog gibi okunuyor; bir
   kartın büyük olması "asıl işimiz bu" diyor — ürünlerin %80'i orada. */

.ftk-vitrin{ padding-block:clamp(48px,6vw,88px); }

.ftk-vitrin-izgara{
  display:grid; gap:clamp(12px,1.4vw,18px);
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.ftk-vitrin-kart{
  position:relative; display:block; overflow:hidden;
  border-radius:18px; text-decoration:none; color:#fff;
  aspect-ratio:4/5; background:#17140F;
  isolation:isolate;
}
.ftk-vitrin-kart--genis{ grid-column:span 2; aspect-ratio:8/5; }

.ftk-vitrin-kart img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
  transition:transform .5s cubic-bezier(.23,1,.32,1);
}
/* Perde: fotoğraflar açık zeminli, üstlerine yazı düz gelince okunmuyor.
   Alttan yukarı koyulaşan tek yönlü geçiş, kutu gölgesinden temiz. */
.ftk-vitrin-perde{
  position:absolute; inset:0;
  background:linear-gradient(to top,
    rgba(11,10,9,.86) 0%, rgba(11,10,9,.55) 34%, rgba(11,10,9,.06) 72%);
  transition:opacity .28s ease;
}

/* Üzerine gelince perde sarıya dönüyor.
   İki ayrı katman kullanıyoruz: siyah perde sönerken sarı olan açılıyor.
   Tek katmanın rengini değiştirmek degrade geçişinde titriyor.
   Sarı zeminde krem yazı okunmaz; yazılar aynı anda koyuya dönüyor. */
.ftk-vitrin-sari{
  position:absolute; inset:0; opacity:0;
  background:linear-gradient(to top,
    rgba(240,180,41,.96) 0%, rgba(240,180,41,.86) 42%, rgba(240,180,41,.55) 100%);
  transition:opacity .28s ease;
}
.ftk-vitrin-yazi{
  position:absolute; left:0; right:0; bottom:0;
  padding:clamp(16px,2vw,26px);
  display:block;
}
.ftk-vitrin-yazi strong{
  display:block; font-size:clamp(1.05rem,1.9vw,1.6rem); font-weight:700;
  letter-spacing:-.025em; line-height:1.1;
}
.ftk-vitrin-yazi small{
  display:block; font-size:13px; color:rgba(242,237,227,.74); margin-top:5px;
}
.ftk-vitrin-yazi em{
  display:inline-block; margin-top:11px; font-style:normal;
  font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ftk-sari);
  border-top:1px solid rgba(240,180,41,.4); padding-top:7px;
}

@media (hover:hover) and (pointer:fine){
  .ftk-vitrin-kart:hover img{ transform:scale(1.045); }
  .ftk-vitrin-kart:hover .ftk-vitrin-sari{ opacity:1; }
  .ftk-vitrin-kart:hover .ftk-vitrin-perde{ opacity:.25; }
  .ftk-vitrin-kart:hover .ftk-vitrin-yazi{ color:#14110B; }
  .ftk-vitrin-kart:hover .ftk-vitrin-yazi small{ color:rgba(20,17,11,.72); }
  .ftk-vitrin-kart:hover .ftk-vitrin-yazi em{
    color:#14110B; border-top-color:rgba(20,17,11,.35);
  }
}
/* Dokunmatikte hover yok: kart odaklanınca da aynı hâle geçiyor. */
.ftk-vitrin-kart:focus-visible .ftk-vitrin-sari{ opacity:1; }
.ftk-vitrin-kart:focus-visible .ftk-vitrin-perde{ opacity:.25; }
.ftk-vitrin-kart:focus-visible .ftk-vitrin-yazi{ color:#14110B; }
.ftk-vitrin-yazi{ transition:color .28s ease; }
.ftk-vitrin-yazi small,
.ftk-vitrin-yazi em{ transition:color .28s ease, border-color .28s ease; }
.ftk-vitrin-kart:focus-visible{ outline:2px solid var(--ftk-sari); outline-offset:3px; }

@media (max-width:860px){
  .ftk-vitrin-izgara{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ftk-vitrin-kart--genis{ grid-column:span 2; aspect-ratio:16/9; }
}
@media (max-width:520px){
  .ftk-vitrin-izgara{ grid-template-columns:1fr; }
  .ftk-vitrin-kart, .ftk-vitrin-kart--genis{ aspect-ratio:4/3; grid-column:auto; }
}

/* ===== 3. Teknik bandı ================================================ */

.ftk-teknik{
  background:var(--ftk-koyu); color:var(--ftk-koyu-ink);
  padding:clamp(52px,7vw,96px) clamp(18px,4vw,40px);
}
.ftk-teknik > *{ max-width:1320px; margin-inline:auto; }

.ftk-teknik-izgara{
  display:grid; gap:clamp(14px,1.6vw,22px);
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.ftk-teknik-kart{
  border:1px solid var(--ftk-koyu-line); border-radius:16px;
  padding:clamp(20px,2.4vw,30px);
  background:linear-gradient(180deg,#141110 0%, #0F0D0B 100%);
}
.ftk-teknik-etiket{
  display:inline-block; font-size:10.5px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ftk-sari);
  margin-bottom:14px;
}
.ftk-teknik-kart strong{
  display:block; font-size:clamp(1.15rem,1.8vw,1.5rem); font-weight:700;
  letter-spacing:-.02em; margin-bottom:9px; color:var(--ftk-koyu-ink);
}
.ftk-teknik-kart p{
  margin:0; font-size:14px; line-height:1.62; color:var(--ftk-koyu-soft);
}

.ftk-teknik-alt{
  margin-top:clamp(26px,3vw,40px);
  padding-top:clamp(22px,2.6vw,32px);
  border-top:1px solid var(--ftk-koyu-line);
  display:flex; align-items:center; justify-content:space-between;
  gap:22px; flex-wrap:wrap;
}
.ftk-teknik-alt p{
  margin:0; max-width:52ch; font-size:14px; line-height:1.6;
  color:var(--ftk-koyu-soft);
}

@media (max-width:860px){
  .ftk-teknik-izgara{ grid-template-columns:1fr; }
}

/* ===== 4. SSS ========================================================= */

.ftk-sss{ padding-block:clamp(48px,6vw,88px); }

/* Geniş ekranda iki sütun: solda başlık, sağda sorular.
   Tek dar sütunda sorular sayfanın solunda kalıp sağı boş bırakıyordu.
   Başlık sola alınınca hem boşluk doluyor hem de okuma yönü doğal:
   "Sık sorulanlar" bir kez okunuyor, gözler sağdaki listede kalıyor. */
@media (min-width:900px){
  .ftk-sss{
    display:grid; grid-template-columns:minmax(0,.34fr) minmax(0,1fr);
    column-gap:clamp(40px,6vw,110px); align-items:start;
  }
  .ftk-sss .ftk-blok-ust{ margin-bottom:0; position:sticky; top:96px; }
  .ftk-sss-liste{ max-width:none; }
}

.ftk-sss-liste{
  max-width:840px;
  border-top:1px solid var(--ftk-line);
}
.ftk-sss-oge{ border-bottom:1px solid var(--ftk-line); }

.ftk-sss-bas{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding:clamp(16px,2vw,22px) 0;
  background:none; border:0; cursor:pointer; text-align:left;
  font:inherit; font-size:clamp(1rem,1.35vw,1.14rem); font-weight:600;
  letter-spacing:-.015em; color:var(--ftk-ink);
}
.ftk-sss-bas:hover{ color:#000; }

/* İşaret artık artı/eksi değil, aşağı bakan bir ok.
   Artı işaretinin yarısı kaybolarak eksiye dönüyordu; yarım kalan çizgi
   "bozuk" görünüyor ve iki durum birbirine yeterince benzemiyordu.
   Ok tek parça: açıkken 180 derece dönüyor, o kadar. */
.ftk-sss-artı{
  position:relative; flex:none; width:18px; height:18px;
  transition:transform .24s cubic-bezier(.23,1,.32,1);
}
.ftk-sss-artı::before{
  content:""; position:absolute; left:3px; top:4px;
  width:9px; height:9px;
  border-right:2px solid var(--ftk-sari);
  border-bottom:2px solid var(--ftk-sari);
  transform:rotate(45deg);
}
.ftk-sss-bas[aria-expanded="true"] .ftk-sss-artı{ transform:rotate(180deg); }
.ftk-sss-bas[aria-expanded="true"]{ color:#000; }

.ftk-sss-govde{ padding:0 0 clamp(18px,2.2vw,26px); max-width:68ch; }
.ftk-sss-govde p{
  margin:0; font-size:15px; line-height:1.68; color:var(--ftk-soft);
}

@media (prefers-reduced-motion:reduce){
  .ftk-sss-artı{ transition:none; }
  .ftk-vitrin-kart img{ transition:none; }
}

/* ===== 5. CTA bandı ===================================================

   Bant SARI, koyu değil. Sitenin footer'ı zaten siyah; koyu bir CTA onun
   hemen üstüne gelince ikisi tek bir siyah kütleye dönüşüyor ve sayfanın
   son eylemi görünmez oluyordu. Sarı hem ayırıyor hem de sayfayı markanın
   kendi rengiyle kapatıyor.

   Sarı üzerinde yazı koyu; birincil düğme de siyah — sarı zeminde sarı
   düğme kaybolurdu.                                                     */

.ftk-cta{
  position:relative; overflow:hidden;
  background:var(--ftk-sari); color:#14110B;
  padding:clamp(50px,6.5vw,92px) clamp(18px,4vw,40px);
}
/* İplik: hero'daki hattın burada bir kez daha geçmesi. Sarı zeminde sarı
   iplik görünmediği için koyu. */
.ftk-cta-iplik{
  position:absolute; left:0; right:0; top:0; height:2px;
  background:repeating-linear-gradient(90deg,
    rgba(20,17,11,.85) 0 10px, transparent 10px 20px);
  opacity:.6;
}
.ftk-cta-ic{
  max-width:1320px; margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(24px,4vw,60px); flex-wrap:wrap;
}
.ftk-cta-yazi{ max-width:36ch; }
.ftk-cta-yazi h2{
  margin:0 0 10px; font-size:clamp(1.5rem,3.4vw,2.5rem); font-weight:700;
  letter-spacing:-.03em; line-height:1.1; color:#14110B;
}
.ftk-cta-yazi p{
  margin:0; font-size:15px; line-height:1.6; color:rgba(20,17,11,.72);
}
.ftk-cta-eylem{ display:flex; gap:12px; flex-wrap:wrap; }

/* Düğmeler: teklif eklentisinin kendi düğme stili yüklü değilse de
   düzgün görünsünler. */
.ftk-blok .ftk-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 26px; border-radius:999px; border:1px solid transparent;
  font:inherit; font-size:14.5px; font-weight:600; cursor:pointer;
  text-decoration:none; transition:.16s;
}
.ftk-blok .ftk-btn-1{
  background:var(--ftk-sari); color:#14110B; border-color:var(--ftk-sari);
  box-shadow:0 10px 24px -12px rgba(240,180,41,.7);
}
.ftk-blok .ftk-btn-1:hover{ background:#E5A81F; border-color:#E5A81F; }
.ftk-blok .ftk-btn-2{
  background:transparent; color:var(--ftk-koyu-ink);
  border-color:rgba(242,237,227,.3);
}
.ftk-blok .ftk-btn-2:hover{ border-color:var(--ftk-koyu-ink); }

/* Sarı bandın üstünde birincil düğme SİYAH: sarı üstüne sarı görünmez.

   !important ve iki sınıflık seçici şart. ftk.css'te birincil düğmeyi
   nerede olursa olsun sarı yapan kapsamsız bir kural var (pencerelerdeki
   düğmeler gri kaldığı için yazılmıştı) ve normal kuralı eziyordu —
   düğme bu yüzden sarı bandın üstünde sarı kalıyordu. */
.ftk-blok.ftk-cta .ftk-btn-1{
  background:#14110B !important; color:#F2EDE3 !important;
  border-color:#14110B !important;
  box-shadow:0 10px 24px -14px rgba(20,17,11,.8);
}
.ftk-blok.ftk-cta .ftk-btn-1:hover{
  background:#000 !important; border-color:#000 !important;
}

/* Sarı bandın üstünde WhatsApp BEYAZ zeminde yeşil yazı. Dolu yeşil,
   sarının yanında iki doymuş renk olarak çarpışıyordu; beyaz ikisini
   ayırıyor ve yeşil yine kendi rengi olarak okunuyor. */
.ftk-blok.ftk-cta .ftk-btn-wa{
  background:#fff !important; color:#1FA855 !important;
  border-color:#fff !important;
  box-shadow:0 10px 24px -16px rgba(20,17,11,.55);
}
.ftk-blok.ftk-cta .ftk-btn-wa:hover{
  background:#F4FBF7 !important; border-color:#F4FBF7 !important;
}

/* Sarı banttaki düğmeler üzerine gelince kalkıyor.
   Bant tek renk ve düz; düğmelerin tepki vermemesi onları "resim" gibi
   gösteriyordu. İki piksellik yükselme + derinleşen gölge, dokunulabilir
   olduklarını söylüyor. Basınca yerine oturuyor. */
.ftk-blok.ftk-cta .ftk-btn{
  transition:transform .18s cubic-bezier(.23,1,.32,1),
             box-shadow .18s ease, background-color .16s ease;
}
.ftk-blok.ftk-cta .ftk-btn:hover{ transform:translateY(-2px); }
.ftk-blok.ftk-cta .ftk-btn:active{ transform:translateY(0); }
.ftk-blok.ftk-cta .ftk-btn-1:hover{
  box-shadow:0 16px 30px -14px rgba(20,17,11,.85);
}
.ftk-blok.ftk-cta .ftk-btn-wa:hover{
  box-shadow:0 16px 30px -16px rgba(20,17,11,.5);
}
.ftk-blok.ftk-cta .ftk-btn-wa svg{
  transition:transform .18s cubic-bezier(.23,1,.32,1);
}
.ftk-blok.ftk-cta .ftk-btn-wa:hover svg{ transform:scale(1.1); }

@media (prefers-reduced-motion:reduce){
  .ftk-blok.ftk-cta .ftk-btn,
  .ftk-blok.ftk-cta .ftk-btn-wa svg{ transition:none; }
  .ftk-blok.ftk-cta .ftk-btn:hover{ transform:none; }
}

/* WhatsApp her yerde kendi yeşili. Marka rengi taşıyan bir kanalı
   sarıya ya da çerçeveye çevirmek tanınırlığı düşürüyor. */
.ftk-blok .ftk-btn-wa{
  background:#1FA855; color:#fff; border-color:#1FA855;
  box-shadow:0 10px 24px -14px rgba(31,168,85,.75);
}
.ftk-blok .ftk-btn-wa:hover{ background:#188C46; border-color:#188C46; }
.ftk-blok .ftk-btn-wa svg{ flex:none; }

@media (max-width:700px){
  .ftk-cta-ic{ flex-direction:column; align-items:flex-start; }
  .ftk-cta-eylem{ width:100%; }
  .ftk-blok .ftk-btn{ flex:1; }
}
@media (prefers-reduced-motion:reduce){
  .ftk-blok .ftk-btn{ transition:none; }
  .ftk-vitrin-perde, .ftk-vitrin-sari, .ftk-vitrin-yazi{ transition:none; }
}