/* ==========================================================================
   UZAK DESTEK — ana sayfa bağlantısı + bandı (2026-10-29)
   --------------------------------------------------------------------------
   NE: İki parça, ikisi de yalnız ana sayfada (body.kt):
     .kt-uzak-cip — kahramandaki iki ana düğmenin altındaki küçük cam bağlantı
                    (includes/sections/uzak-destek-satir.php)
     .kt-uzak     — hizmetlerin altındaki AltunakarDesk lansman bandı: koyu
                    sinematik zemin, tanıtım filmi, üç adım, güven maddeleri
                    (includes/sections/uzak-destek-bant.php)
   NEDEN: Tuna: "ziyaretçinin gözüne sokmamız lazım ama diğer işlerimizi arka
   plana kaldırtmamalıyız" + "daha profesyonel" + "daha üst düzey". Bağlantı
   ana düğmelerden küçük; bant hizmetler ve anatomi bölümlerinden kısa.
   Kahraman ve bant iki temada da koyu kaldığı için beyazlar mevcut
   .kt-kahraman / .hrk-lns kurallarıyla aynı biçimde düz yazıldı.
   GERİ ALMA: index.php $ek_css dizisinden bu dosyayı çıkar (ve iki include
   satırını sil).
   ========================================================================== */

/* -- Kahraman bağlantısı --------------------------------------------------- */
.kt-kahraman .kt-uzak-cip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    margin-top: 18px;
    padding: 6px 16px 6px 6px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 100px;
    background: rgba(255, 255, 255, .06);
    backdrop-filter: blur(12px) saturate(1.1);
    -webkit-backdrop-filter: blur(12px) saturate(1.1);
    color: rgba(255, 255, 255, .82);
    font-size: 14.5px;
    line-height: 1.35;
    text-decoration: none;
    transition: background var(--kt-hiz), border-color var(--kt-hiz), color var(--kt-hiz);
}
.kt-kahraman .kt-uzak-cip b { color: #fff; font-weight: 640; }
.kt-kahraman .kt-uzak-cip:hover {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .38);
    color: #fff;
    text-decoration: none;
}
.kt-uzak-cip-ikon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--kt-aksan-600);
    color: #fff;
    font-size: 13px;
}
.kt-uzak-cip-ok { font-size: 12px; opacity: .8; transition: transform var(--kt-hiz); }
.kt-kahraman .kt-uzak-cip:hover .kt-uzak-cip-ok { transform: translateX(3px); }
/* Kahramanın giriş sırasına katılır (anasayfa-kurumsal.css §05b: başlık
   satırları .10/.24 sn, düğmeler .42 sn) — düğmelerden hemen sonra belirir. */
@media (prefers-reduced-motion: no-preference) {
    .kt-kahraman.tam .kt-uzak-cip {
        opacity: 0;
        transform: translateY(20px);
        animation: kt-kahraman-gir .95s cubic-bezier(.16, 1, .3, 1) .58s forwards;
    }
}

/* -- AltunakarDesk lansman bandı ------------------------------------------
   Oyun sistemleri lansman bandıyla (css/hareket.css .hrk-lns) aynı koyu zemin;
   o bant gibi İKİ TEMADA DA koyu kalır (sinematik film kadrajı). Bu yüzden
   .kt-bolum.koyu kullanılmadı (açık temada açılıyor) ve beyazlar kahraman/
   lansman kurallarındaki gibi düz yazıldı. */
.kt-uzak {
    position: relative;
    padding: var(--kt-bolum-y) 0;
    background: #05070d;
    color: #fff;
    overflow: hidden;
    isolation: isolate;
}
/* Filmin arkasından sızan mavi ışık + üst kenarda hafif aydınlık: koyu blok
   düz bir dikdörtgen gibi durmasın. */
.kt-uzak::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(46% 62% at 76% 52%, rgba(43, 122, 228, .20) 0%, transparent 70%),
        radial-gradient(60% 40% at 50% 0%, rgba(255, 255, 255, .06) 0%, transparent 70%);
}
.kt-uzak a:focus-visible, .kt-uzak button:focus-visible { outline-color: var(--kt-aksan-300); }

.kt-uzak-imza {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: clamp(26px, 3.4vw, 42px);
    padding-bottom: clamp(18px, 2.2vw, 24px);
    border-bottom: 1px solid rgba(255, 255, 255, .10);
    font-size: 14px;
    color: rgba(255, 255, 255, .60);
}
.kt-uzak-simge { width: 34px; height: 34px; border-radius: 9px; flex: 0 0 auto; }
.kt-uzak-imza b { color: #fff; font-weight: 640; margin-right: 10px; letter-spacing: -.01em; font-size: 15px; }

.kt-uzak-izgara {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
    gap: clamp(32px, 4.6vw, 68px);
    align-items: center;
}
/* Başlık kahramanla aynı iki tonlu dil (§05b): ilk satır soluk, ikincisi beyaz. */
.kt-uzak-baslik {
    margin: 0 0 16px;
    font-size: clamp(30px, 3.1vw, 44px);
    font-weight: 640;
    letter-spacing: -.03em;
    line-height: 1.06;
    color: #fff;
}
.kt-uzak-baslik span { display: block; }
.kt-uzak-baslik span:first-child { color: rgba(255, 255, 255, .62); font-weight: 560; }
.kt-uzak-giris {
    margin: 0;
    max-width: 44ch;
    font-size: clamp(16px, 1.25vw, 18px);
    line-height: 1.56;
    color: rgba(255, 255, 255, .66);
    text-wrap: pretty;
}

/* Üç adım: kutusuz, ince çizgilerle ayrılmış tek sıra (gerçek bir sıralama). */
.kt-uzak-adim {
    list-style: none;
    margin: 30px 0 0;
    padding: 18px 0 0;
    border-top: 1px solid rgba(255, 255, 255, .12);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.kt-uzak-adim li {
    padding: 0 16px;
    border-left: 1px solid rgba(255, 255, 255, .12);
    font-size: 14px;
    line-height: 1.45;
    color: rgba(255, 255, 255, .56);
}
.kt-uzak-adim li:first-child { padding-left: 0; border-left: 0; }
.kt-uzak-adim b {
    display: block;
    margin: 6px 0 2px;
    font-size: 15px;
    font-weight: 640;
    letter-spacing: -.01em;
    color: #fff;
}
.kt-uzak-no {
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--kt-aksan-400);
}

.kt-uzak-aksiyon { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.kt-uzak .kt-dugme.hat {
    color: #fff;
    border-color: rgba(255, 255, 255, .3);
    background: rgba(255, 255, 255, .05);
}
.kt-uzak .kt-dugme.hat:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, .55);
    background: rgba(255, 255, 255, .13);
}
.kt-uzak-paket {
    display: inline-block;
    margin-top: 18px;
    font-size: 14px;
    font-weight: 600;
    color: var(--kt-aksan-300);
    text-decoration: none;
}
.kt-uzak-paket i { font-size: 11px; margin-left: 4px; transition: transform var(--kt-hiz); }
.kt-uzak-paket:hover { color: #fff; text-decoration: none; }
.kt-uzak-paket:hover i { transform: translateX(3px); }

/* Film kadrajı: 16:9, ışıklı gölge. Film /uzak-destek'tekiyle aynı dosya. */
.kt-uzak-film {
    position: relative;
    margin: 0;
    aspect-ratio: 16 / 9;
    border-radius: var(--kt-r-l);
    overflow: hidden;
    background: #000;
    box-shadow: 0 40px 110px -34px rgba(43, 122, 228, .55), 0 0 0 1px rgba(255, 255, 255, .10);
}
.kt-uzak-film video { display: block; width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
.kt-uzak-oynat {
    position: absolute;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px 10px 12px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 100px;
    background: rgba(8, 10, 16, .55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #fff;
    font-size: 14.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--kt-hiz), border-color var(--kt-hiz);
}
.kt-uzak-oynat[hidden] { display: none; }
.kt-uzak-oynat i {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--kt-aksan-600);
    font-size: 11px;
    padding-left: 2px;
}
.kt-uzak-oynat small { font-weight: 500; opacity: .7; margin-left: 4px; }
.kt-uzak-oynat:hover { background: rgba(8, 10, 16, .75); border-color: rgba(255, 255, 255, .5); }

/* Güven maddeleri: dört eşit sütun, ince ayraçlarla. */
.kt-uzak-guven {
    list-style: none;
    margin: clamp(40px, 5vw, 64px) 0 0;
    padding: 22px 0 0;
    border-top: 1px solid rgba(255, 255, 255, .10);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}
.kt-uzak-guven li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 13.5px;
    line-height: 1.45;
    color: rgba(255, 255, 255, .56);
}
.kt-uzak-guven i { margin-top: 3px; font-size: 14px; color: var(--kt-aksan-300); flex: 0 0 auto; width: 16px; text-align: center; }
.kt-uzak-guven b { display: block; font-size: 14.5px; font-weight: 640; color: #fff; }

@media (max-width: 980px) {
    .kt-uzak-izgara { grid-template-columns: 1fr; }
    .kt-uzak-film { order: -1; }
    .kt-uzak-guven { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
}
@media (max-width: 640px) {
    .kt-uzak-imza span { font-size: 13px; }
    .kt-uzak-imza b { display: block; margin: 0 0 2px; }
    .kt-uzak-adim { grid-template-columns: 1fr; padding-top: 6px; }
    .kt-uzak-adim li { padding: 12px 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .12);
        display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 8px; }
    .kt-uzak-adim li:first-child { border-top: 0; }
    .kt-uzak-adim .kt-uzak-no { grid-row: span 2; padding-top: 1px; }
    .kt-uzak-adim b { margin-top: 0; }
    .kt-uzak-aksiyon .kt-dugme { flex: 1 1 100%; }
    .kt-uzak-film { border-radius: var(--kt-r-m); }
    .kt-uzak-oynat { bottom: 14px; font-size: 13.5px; }
    .kt-uzak-guven { grid-template-columns: 1fr; }
    .kt-kahraman .kt-uzak-cip { font-size: 13.5px; }
}