/*
 * FaturaTek — ENTEGRASYON AHTAPOTU (ana sayfa, hero'nun hemen altı).
 *
 * 🔴 Merkezde FaturaTek kartı; ince bağlantı hatları soldaki pazaryerlerine
 *    ve sağdaki yeteneklere uzanıyor. Hatların üzerinde SÜREKLİ akan
 *    noktalar var ve akış FİRMALARDAN FATURATEK'E doğrudur.
 *    (Dosya adı eski ahtapot denemesinden kaldı.)
 * 🔴 Kollar JS ile çiziliyor (index.php içindeki blok): kartların GERÇEK
 *    konumuna göre, pencere boyu değişince yeniden. Sabit koordinat yazma —
 *    kart metni uzayınca kol havada kalır.
 * 🔴 960px altında kollar gizlenir (yer yok): ahtapot üstte, kartlar iki
 *    sütun listeye döner. Aynı içerik iki kez YAZILMAZ, düzen değişir.
 */
.aht{padding:76px 0 84px;background:var(--kagit);overflow:hidden}
.aht-bas{text-align:center;max-width:62ch;margin:0 auto 46px}
.aht-ustlik{display:block;font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--marka)}
.aht-bas h2{margin-top:12px;font-size:clamp(25px,3.2vw,36px);font-weight:780;line-height:1.22;letter-spacing:-.02em}
.aht-bas h2 em{font-style:normal;color:var(--marka)}
.aht-bas p{margin-top:14px;font-size:16.5px;line-height:1.7;color:var(--ikincil)}

/* ── Sahne ── */
.aht-sahne{position:relative;display:grid;grid-template-columns:1fr 300px 1fr;gap:34px;align-items:center}
.aht-kollar{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:visible}
.aht-sutun{position:relative;z-index:1;display:flex;flex-direction:column;gap:10px}
.aht-sutun-bas{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--soluk);margin-bottom:4px}
.aht-sol{align-items:flex-start}
.aht-sag{align-items:flex-end;text-align:right}
.aht-sag .aht-sutun-bas{text-align:right}

/* ── Kart ── */
.aht-kart{display:inline-flex;align-items:center;gap:11px;padding:10px 16px;background:var(--yuzey);
  border:1px solid var(--kenar);border-radius:999px;font-size:14.5px;font-weight:620;color:var(--metin);
  box-shadow:0 1px 2px rgba(24,20,18,.04),0 8px 20px rgba(24,20,18,.05);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;white-space:nowrap}
.aht-kart:hover{transform:translateY(-2px);border-color:var(--marka);box-shadow:0 12px 26px rgba(163,33,31,.12)}
.aht-sag .aht-kart{flex-direction:row-reverse}
.aht-rozet{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;flex:none;
  border-radius:8px;background:var(--koyu);color:#fff;font-size:12px;font-weight:700;letter-spacing:-.02em}
.aht-kart:hover .aht-rozet{background:var(--marka)}
.aht-rozet svg{width:15px;height:15px}
/* 🔴 Marka logoları renkli: koyu rozet zemini onları yutuyor, beyaz kalıyor. */
.aht-rozet-logo{background:var(--yuzey);border:1px solid var(--kenar);padding:3px;width:28px;height:28px}
.aht-kart:hover .aht-rozet-logo{background:var(--yuzey);border-color:var(--marka)}
.aht-rozet-logo img{display:block;width:100%;height:100%;object-fit:contain}
.aht-yakinda{margin-left:6px;padding:2px 7px;border-radius:999px;background:var(--kagit);border:1px solid var(--kenar);
  font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--soluk)}

/* ── Merkez: FaturaTek kartı ── */
.aht-orta{position:relative;z-index:1;display:flex;justify-content:center}
.aht-merkez{display:flex;align-items:center;justify-content:center;padding:30px 34px;background:var(--yuzey);
  border:1px solid var(--kenar);border-radius:22px;
  box-shadow:0 2px 4px rgba(24,20,18,.04),0 26px 54px rgba(24,20,18,.11)}
.aht-merkez img{display:block;width:100%;max-width:196px;height:auto}
/* 🔴 Ahtapot SÜZÜLMÜYOR: kollar JS ile kafanın gerçek konumuna çiziliyor,
   kafa kıpırdayınca kollar kopuk görünüyordu. Hareketi kolların çizilmesi
   veriyor. */

/* 🔴 Hatlar SAYFA AÇILINCA DEĞİL, bölüm ekrana girince çizilir (.ciz).
   Betik IntersectionObserver ile ekliyor — index.php içindeki blok. */
.aht-hat{fill:none;stroke:rgba(163,33,31,.28);stroke-width:1.5;stroke-linecap:round}
/* Akan sipariş noktaları — YÖN: FİRMA → FATURATEK.
   🔴 ÖLÇÜLDÜ (tarayıcıda, tahminle değil): nokta konumu s = -dashoffset,
      yani dashoffset AZALDIKÇA noktalar path'in başından sonuna ilerler.
      Path firma kartında başlayıp merkezde bittiği için keyframe 30 → 0.
      Ters yazarsan noktalar FaturaTek'ten firmalara akar. */
.aht-akis{fill:none;stroke:var(--marka);stroke-width:3.6;stroke-linecap:round;
  stroke-dasharray:3 27;opacity:0;transition:opacity .8s ease .6s}
.aht-kollar.ciz .aht-hat{animation:aht-ciz 1.3s cubic-bezier(.22,.8,.3,1) both}
.aht-kollar.ciz .aht-akis{opacity:.8;animation:aht-akis 2.4s linear infinite}
@keyframes aht-ciz{from{stroke-dashoffset:var(--boy)}to{stroke-dashoffset:0}}
@keyframes aht-akis{from{stroke-dashoffset:30}to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){
  .aht-kollar.ciz .aht-hat{animation:none;stroke-dashoffset:0}
  .aht-akis{transition:none}
  .aht-kollar.ciz .aht-akis{animation:none;opacity:.5}
}

/* ── Dar ekran: kollar yok, iki sütun liste ── */
@media (max-width:960px){
  .aht{padding:56px 0 64px}
  .aht-sahne{grid-template-columns:1fr 1fr;gap:26px}
  .aht-kollar{display:none}
  .aht-orta{grid-column:1 / -1;order:-1;margin-bottom:22px}
  .aht-merkez{padding:22px 26px}
  .aht-merkez img{max-width:168px}
  .aht-sag{align-items:flex-start;text-align:left}
  .aht-sag .aht-sutun-bas{text-align:left}
  .aht-sag .aht-kart{flex-direction:row}
  .aht-kart{white-space:normal;text-align:left}
}
@media (max-width:560px){
  .aht-sahne{grid-template-columns:1fr}
  .aht-kart{width:100%}
  .aht-merkez img{max-width:150px}
}

/* ══ GÜVENCE ŞERİDİ (GİB + QNB eSolutions) ══
 * Entegrasyon bölümünün hemen altı; aynı stil dosyasında duruyor çünkü
 * ikisi de ana sayfaya özel.
 */
.guvence{padding:0 0 84px;background:var(--kagit)}
.guvence-kart{max-width:860px;margin:0 auto;text-align:center;padding:38px 40px;background:var(--yuzey);
  border:1px solid var(--kenar);border-radius:22px;
  box-shadow:0 2px 4px rgba(24,20,18,.04),0 22px 48px rgba(24,20,18,.08)}
.guvence-logolar{display:flex;align-items:center;justify-content:center;gap:26px;flex-wrap:wrap}
.guvence-logo{display:flex;align-items:center;justify-content:center;height:62px}
.guvence-logo img{display:block;width:auto;height:100%;max-width:230px;object-fit:contain}
.guvence-arti{display:flex;align-items:center;justify-content:center;width:30px;height:30px;flex:none;
  border-radius:50%;background:var(--kagit);border:1px solid var(--kenar);color:var(--soluk)}
.guvence-arti svg{width:15px;height:15px}
.guvence-metin{margin-top:24px;font-size:17px;line-height:1.65;color:var(--metin)}
.guvence-metin strong{font-weight:720}
.guvence-alt{margin-top:10px;font-size:14.5px;line-height:1.65;color:var(--soluk);max-width:62ch;margin-inline:auto}
@media (max-width:720px){
  .guvence{padding-bottom:56px}
  .guvence-kart{padding:28px 22px;border-radius:18px}
  .guvence-logo{height:48px}
  .guvence-logolar{gap:18px}
  .guvence-metin{font-size:15.5px}
}

/* ══ SSS: iki sütun (görsel + temas kartı | sorular) ══
 * 🔴 CRO: SSS'ye inen ziyaretçi tereddütlüdür. Soruların yanında telefon ve
 *    WhatsApp dururken, cevabı bulamayan kişi sekmeyi kapatmak yerine
 *    temas kuruyor. Görsel dengeyi de bu sütun kuruyor (sorular tek başına
 *    sayfanın solunda boşluk bırakıyordu).
 */
/* 2026-09-15: sorular SOLDA, görsel + temas kartı SAĞDA (kullanıcı kararı).
   Markup sırası aynı (aside önce); yer değişimi CSS order ile. */
/* Bölüm başlığı kurumsal marka kırmızısında (kullanıcı kararı 2026-09-15). */
#sss > .kap > h2,#rehber > .kap > h2{color:var(--marka)}
.sss-duzen{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:56px;align-items:start;margin-top:36px}
.sss-yan{position:sticky;top:96px;display:flex;flex-direction:column;gap:18px;order:2}
.sss-gorsel{position:relative;display:block;width:100%;border-radius:22px;overflow:hidden;
  box-shadow:0 2px 6px rgba(13,19,34,.08),0 26px 54px rgba(13,19,34,.16)}
.sss-gorsel img{display:block;width:100%;height:auto}
/* Fotoğrafın üstüne hafif koyu-kırmızı geçiş: ikonlar okunur, fotoğraf markaya yaklaşır */
.sss-gorsel::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(19,26,43,.28) 0%,rgba(19,26,43,0) 45%,rgba(19,26,43,.35) 100%)}
.sss-ikonlar{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.sss-temas{background:var(--yuzey);border:1px solid var(--kenar);border-radius:18px;padding:22px 24px;
  box-shadow:0 1px 2px rgba(24,20,18,.04),0 10px 26px rgba(24,20,18,.05)}
.sss-temas h3{font-size:17px;font-weight:720;color:var(--metin);margin:0}
.sss-temas p{margin-top:8px;font-size:14.5px;line-height:1.6;color:var(--ikincil)}
.sss-temas strong{color:var(--metin,#1F2937);font-weight:750}
.sss-temas-dugmeler{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.sss-temas .dugme{height:44px;padding:0 18px;font-size:14.5px;gap:9px;display:inline-flex;align-items:center}
.sss-temas .dugme svg{flex:none}

@media (max-width:1040px){
  .sss-duzen{grid-template-columns:minmax(0,1fr) 300px;gap:36px}
}
@media (max-width:860px){
  /* Dar ekranda görsel öne geçmesin: önce sorular, temas kartı altta. */
  .sss-duzen{grid-template-columns:1fr;gap:28px}
  .sss-yan{position:static;order:2}
  .sss-gorsel{max-width:340px;margin:0 auto}
  .sss-temas{text-align:center}
  .sss-temas-dugmeler{justify-content:center}
}