/* BGP: "Benimle Görüşme Planla" bölümü (Holmes'un adı, 2026-11-03). Tek kaynak: bu dosya + araclar/bgp.py (HTML).
   Solda başlık, açıklama ve İletişim'e giden düğme; sağda ana sayfadaki MarketingOS yörüngesinin ortalı, tam daire hâli. */
.kapanis { max-width: var(--w-content); margin: 56px auto; padding: 0 var(--gutter); } /* üst ve alt boşluk eşit: 56px (Holmes, 2026-11-04) */
/* BGP'den önceki bölümün alt boşluğu sıfırlanır: iki boşluk üst üste binip araya fazla mesafe girmesin; aradaki mesafe her sayfada BGP'nin 56px'i */
main > :has(+ .kapanis) { padding-bottom: 0; margin-bottom: 0; }
main > .values:has(+ .kapanis) { padding-bottom: 66px; } /* Hakkımda: ilke kartlarının altındaki ok bölümün dışına taşar */
main > .shelf:has(+ .kapanis) { padding-bottom: var(--space); } /* Ana sayfa: Yolu Aydınlatanlar gri bant; alt boşluk bandın parçası, sıfırlanırsa kartlar banda yapışır (2026-11-04) */
.kp { position: relative; overflow: hidden; isolation: isolate; border-radius: 28px; padding: 64px 56px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 32px; background: #f7f6f4; color: var(--ink); }
.kp h2 { font: 700 clamp(28px, 3.2vw, 40px)/1.15 var(--display); letter-spacing: -.035em; color: var(--ink); }
.kp-hl { display: inline-block; line-height: 1.05; background: #a4f25c; color: var(--ink); border-radius: .28em; padding: .04em .16em .08em; margin: .06em 0; }
.kp p { font-size: 16px; line-height: 1.65; color: var(--ink-2); margin-top: 18px; max-width: 48ch; }
.kp-btn { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 26px; margin-top: 30px; border-radius: 100px; background: var(--navy); color: var(--cream); font: 500 15.5px/1 var(--sans); letter-spacing: -.01em; transition: transform .15s ease, background .15s ease; }
.kp-btn:hover { transform: translateY(-1px); background: #2b3a4f; }
.kp-btn svg { width: 12px; height: 12px; transition: transform .15s ease; }
.kp-btn:hover svg { transform: translateX(3px); }

/* yörünge: ipeksi turuncu çekirdek, iki halka, dönen uydular, nabız; saat yönünde 6 alan */
.kp-os { position: relative; height: 390px; }
.ko { position: absolute; left: 50%; top: 50%; width: 460px; height: 390px; transform: translate(-50%, -50%); }
.ko-r, .ko-s, .ko-p { position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%); }
.ko-r { border: 1px solid rgba(33,45,61,.14); }
.ko-r.r1 { width: 340px; height: 340px; }
.ko-r.r2 { width: 220px; height: 220px; border-color: rgba(232,72,26,.3); }
.ko-s { pointer-events: none; animation: ko-don 28s linear infinite; }
.ko-s::before { content: ""; position: absolute; left: 50%; top: -5px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #e8481a; box-shadow: 0 0 0 5px rgba(232,72,26,.22); }
.ko-s.s1, .ko-s.s2 { width: 340px; height: 340px; }
.ko-s.s2 { animation-delay: -14s; }
.ko-s.s3 { width: 220px; height: 220px; animation-duration: 18s; animation-direction: reverse; }
.ko-s.s3::before { background: #a4f25c; box-shadow: 0 0 0 5px rgba(164,242,92,.18); width: 8px; height: 8px; margin-left: -4px; top: -4px; }
.ko-p { width: 130px; height: 130px; border: 1px solid rgba(232,72,26,.5); animation: ko-nabiz 4.5s ease-out infinite; }
.ko-p.p2 { animation-delay: -2.25s; }
.ko-c { position: absolute; left: 50%; top: 50%; width: 130px; height: 130px; border-radius: 50%; transform: translate(-50%, -50%); border: 1px solid rgba(255,255,255,.18);
  background-image: linear-gradient(118deg, rgba(255,214,170,0) 31%, rgba(255,214,170,.7) 37%, rgba(255,214,170,0) 44%), linear-gradient(58deg, rgba(178,30,30,0) 40%, rgba(178,30,30,.7) 50%, rgba(178,30,30,0) 60%), linear-gradient(100deg, #e2492f 0%, #f39a63 18%, #e35a3d 34%, #c9302a 52%, #ee8a58 72%, #e04a32 100%), radial-gradient(75% 55% at 50% 85%, rgba(150,28,18,.55), transparent 72%);
  background-size: 220% 220%, 220% 220%, 180% 180%, 100% 100%; box-shadow: 0 20px 60px rgba(232,72,26,.35); animation: ko-ipek 18s ease-in-out infinite alternate; }
.ko-l { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; gap: 4px; justify-items: center; text-align: center; color: #fff; }
.ko-l b { font: 700 15px/1 var(--display); letter-spacing: -.02em; }
.ko-l small { font: 500 9.5px/1.25 var(--sans); max-width: 100px; opacity: .9; }
.ko-n { position: absolute; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px 7px 7px; border-radius: 100px; background: #fff; font: 500 12.5px/1 var(--sans); color: var(--ink); white-space: nowrap; box-shadow: 0 8px 22px rgba(33,45,61,.1), inset 0 0 0 1px rgba(33,45,61,.06); animation: ko-sal 6s ease-in-out infinite; }
.ko-n svg { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: #fbe6da; color: #c2552b; }
.k1 { left: 50%; top: calc(50% - 170px); }
.k2 { left: calc(50% + 147px); top: calc(50% - 85px); animation-delay: -1s; }
.k3 { left: calc(50% + 147px); top: calc(50% + 85px); animation-delay: -2s; }
.k4 { left: 50%; top: calc(50% + 170px); animation-delay: -3s; }
.k5 { left: calc(50% - 147px); top: calc(50% + 85px); animation-delay: -4s; }
.k6 { left: calc(50% - 147px); top: calc(50% - 85px); animation-delay: -5s; }
@keyframes ko-don { from { transform: translate(-50%, -50%) rotate(0); } to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes ko-nabiz { from { transform: translate(-50%, -50%) scale(1); opacity: .9; } to { transform: translate(-50%, -50%) scale(2.6); opacity: 0; } }
@keyframes ko-sal { 0%, 100% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, calc(-50% - 6px)); } }
@keyframes ko-ipek { 0% { background-position: 0% 30%, 100% 0%, 0% 50%, 0 0; } 100% { background-position: 100% 70%, 0% 100%, 100% 50%, 0 0; } }
@media (prefers-reduced-motion: reduce) { .ko-s, .ko-p, .ko-n, .ko-c { animation: none; } .ko-p { display: none; } }
@media (max-width: 900px) {
  .kp { grid-template-columns: 1fr; padding: 44px 28px 32px; }
  .kp-os { margin: 8px -28px 0; height: 340px; overflow: hidden; }
  .ko { transform: translate(-50%, -50%) scale(.82); transform-origin: center; }
}
@media (max-width: 560px) { .kapanis { padding-left: 16px; padding-right: 16px; } }