/* FlexInbox tanıtım sayfası — ortak stil. index.html ve alt sayfalar bu dosyayı paylaşır. Eskiden index.html içinde satır içiydi; ikinci sayfa gelince kopyalamak yerine dışarı alındı, böylece bir kural değiştiğinde iki sayfa birden değişir. */ html { scroll-behavior: smooth; } body { background: #F4F7FA; } .eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: .82rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .8rem; border-radius: 9999px; background: #E6F0F7; } /* Marka bölümü etiketi: sağlayıcı simgeleri de taşıdığı için biraz daha nefes alır */ .eyebrow-marka { padding: .4rem .95rem .4rem .7rem; } .tight { letter-spacing: -.028em; } /* ── Zemin dokusu: sitenin mevcut "grain" ve ızgara dilini sürdürür ── */ .grain::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.5; z-index:0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E"); } .izgara{ background-image:linear-gradient(rgba(14,23,41,.05) 1px,transparent 1px), linear-gradient(90deg,rgba(14,23,41,.05) 1px,transparent 1px); background-size:56px 56px; mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 40%,transparent 100%); -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 40%,transparent 100%); } /* Yumuşak ışık lekeleri, tek renkli marka tonunda, gökkuşağı gradyan değil */ .leke{ position:absolute; border-radius:9999px; filter:blur(90px); opacity:.30; pointer-events:none; } @keyframes suzul { 0%,100%{ transform:translate3d(0,0,0) scale(1) } 50%{ transform:translate3d(0,-26px,0) scale(1.06) } } .suzul{ animation:suzul 16s ease-in-out infinite; } /* ── Kaydırmayla belirme ── */ .bel{ opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.22,.8,.3,1), transform .7s cubic-bezier(.22,.8,.3,1); transition-delay:var(--gec,0ms); } .bel.gor{ opacity:1; transform:none; } /* YATAY KAYMA YALNIZ GENİŞ EKRANDA. Dar ekranda kapsayıcı zaten 24 px kenar boşluğunda başlıyor; 26 px sola kaydırınca öğe viewport'un DIŞINA çıkıyor ve sayfa yatay kayıyordu (ölçüldü: 390 px'te belge 392 px). Mobilde düz dikey belirme kullanılır. */ @media (min-width: 768px){ .bel-sol{ transform:translateX(-26px) } .bel-sag{ transform:translateX(26px) } } /* Açılışta sıralı giriş */ @keyframes gir { from{ opacity:0; transform:translateY(16px) } to{ opacity:1; transform:none } } .gir{ opacity:0; animation:gir .8s cubic-bezier(.22,.8,.3,1) forwards; animation-delay:var(--gec,0ms); } /* ── VURGU ÇERÇEVESİ: kenarda dönen ışık ────────────────────────────────────────────── Yakınlaştırılmış ekran görüntülerinin etrafında yavaşça dolaşan bir ışık huzmesi. `@property` gerektiren özel-değişken animasyonu yerine sözde-öğenin KENDİSİ döndürülüyor: her tarayıcıda çalışır, kütüphane gerekmez. Kırpma `overflow:hidden` ile yapılır, ortadaki beyaz katman huzmenin yalnız kenarda görünmesini sağlar. */ .isik{ position:relative; border-radius:16px; padding:2px; overflow:hidden; background:#E3EAF1; box-shadow:0 30px 70px -34px rgba(14,23,41,.35); } .isik::before{ content:""; position:absolute; left:50%; top:50%; width:180%; aspect-ratio:1; transform:translate(-50%,-50%); background:conic-gradient(from 0deg, transparent 0 60%, #00619B 76%, #7FC9D6 87%, transparent 95%); animation:donen 6s linear infinite; } .isik > *{ position:relative; display:block; border-radius:14px; overflow:hidden; background:#fff; } .isik img{ display:block; width:100%; height:auto; } @keyframes donen{ to{ transform:translate(-50%,-50%) rotate(360deg) } } /* ── YAKINLAŞTIRMA ÇAĞRISI ──────────────────────────────────────────────────────────── Üç parça: (1) tam ekranda kaynak alanın çerçevesi, (2) oradan büyütmeye giden bağlantı çizgileri, (3) sağa taşan büyütülmüş kesit. Hepsi YÜZDE ile konumlanır; ekran görüntüsü ölçeklendiğinde çerçeve de onunla birlikte kayar. Tarayıcı çubuğu bu görselde YOK: çubuk sabit yükseklikte, görsel ise oransal ölçekleniyor; ikisi bir arada olunca yüzde koordinatları genişliğe göre kayardı. */ .vitrin{ position:relative; } .vitrin-cerceve{ position:relative; border-radius:14px; overflow:hidden; border:1px solid #D9E1EA; box-shadow:0 40px 90px -40px rgba(14,23,41,.38); background:#fff; } .vitrin-cerceve img{ display:block; width:100%; height:auto; } /* SPOT IŞIĞI. Asıl mesele çerçevenin kalınlığı değil, ETRAFININ SÖNMESİ: dev yayılımlı bir gölge, kaynak alanın dışındaki HER ŞEYİ karartır (çerçeve `overflow:hidden` olduğu için taşmaz). Ekranın tamamı aynı parlaklıktayken ince bir çerçeve göze çarpmıyordu; sönük zeminde parlak kalan tek yer olunca göz oraya gidiyor. Aynı tekniği tur sayfasında da kullandık. */ .kaynak{ position:absolute; border-radius:7px; pointer-events:none; outline:2px solid #00619B; outline-offset:0; box-shadow:0 0 0 9999px rgba(14,23,41,.58), 0 0 0 5px rgba(0,97,155,.45); animation:nabiz 2.6s ease-in-out infinite; } @keyframes nabiz{ 0%,100%{ box-shadow:0 0 0 9999px rgba(14,23,41,.58), 0 0 0 5px rgba(0,97,155,.45) } 50% { box-shadow:0 0 0 9999px rgba(14,23,41,.58), 0 0 0 11px rgba(0,97,155,.16) } } .baglanti{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; } .baglanti line{ stroke:#00619B; stroke-width:2; stroke-dasharray:7 5; opacity:.9; vector-effect:non-scaling-stroke; } .buyutme{ position:absolute; z-index:2; } /* Mobilde kaynaktan büyütmeye inen ok (çapraz çizgilerin yerine). */ .mobil-ok{ display:none; } @media (max-width: 640px){ /* MOBİL KENDİ DÜZENİNDE. Masaüstündeki "sağa taşan kesit" dar ekrana sığmaz; taşırmayı zorlamak yatay kaydırma üretir. Bunun yerine dikey bir akış: karartılmış ekran → aşağı ok → tam genişlikte büyütme. KARARTI MOBİLDE DE KALIR. Önce `.kaynak`ı da gizlemiştim ve vurgunun tamamı kayboluyordu; oysa karartı çerçevenin İÇİNDE, taşma üretmiyor. Taşırana (çapraz çizgiler) dokunmak yeterliydi. */ .buyutme{ position:static; margin-top:0; width:100% !important; } .baglanti{ display:none; } /* Dönen huzme dar ve alçak kutuda ani bir parlama gibi görünüyor (kare huzme, kısa kenardan hızla geçiyor). Mobilde sabit marka kenarlığına düşülür: sakin ve okunur. */ .isik::before{ display:none; } .isik{ background:#00619B; padding:2px; } .mobil-ok{ display:flex; align-items:center; justify-content:center; gap:8px; margin:14px 0 12px; color:#00619B; } .mobil-ok span{ height:1px; flex:1; background:linear-gradient(90deg,transparent,#9CC3D8); } .mobil-ok span:last-child{ background:linear-gradient(90deg,#9CC3D8,transparent); } } /* ── SAMİMİ ANLATIM: UI parçaları + el yazısı not ──────────────────────────────────── Tam ekran görüntüsü yerine ürünün TANIDIK parçaları (sesli not, alıntılı yanıt, tik durumları) yeniden çizilir. Ekran görüntüsü değil GERÇEK HTML: her ölçekte keskin, birkaç KB, ve dile göre metni değişebiliyor. */ .elyazisi{ font-family:'Caveat', cursive; font-size:20px; line-height:1.25; color:#00619B; } .parca{ background:#fff; border:1px solid #E3EAF1; border-radius:14px; box-shadow:0 10px 26px -14px rgba(14,23,41,.28); } /* ── SEKMELİ VİTRİN ────────────────────────────────────────────────────────────────── Ziyaretçiyi sayfada tutan etkileşim: üstte sekmeler, altında marka renginde tek kart. JS yoksa ilk sekme açık kalır ve içerik yine okunur (ilerlemeli iyileştirme). */ .sekme{ border:1px solid transparent; } .sekme[aria-selected="true"]{ background:#00619B; color:#fff; border-color:#00619B; } .sekme[aria-selected="false"]{ color:#00619B; } .sekme[aria-selected="false"]:hover{ background:#E6F0F7; } .panel{ display:none; } .panel.acik{ display:grid; animation:panelGel .45s cubic-bezier(.22,.8,.3,1); } @keyframes panelGel{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } } .kolaj img{ border-radius:12px; border:1px solid rgba(255,255,255,.18); box-shadow:0 30px 60px -24px rgba(0,0,0,.55); display:block; } /* Ürün çerçevesi */ .cerceve{ border-radius:14px; overflow:hidden; background:#fff; border:1px solid #D9E1EA; box-shadow:0 40px 90px -40px rgba(14,23,41,.38), 0 2px 6px rgba(14,23,41,.05); } .cubuk{ height:36px; display:flex; align-items:center; gap:6px; padding:0 14px; border-bottom:1px solid #D9E1EA; background:#F7FAFC; } .cubuk i{ width:9px; height:9px; border-radius:50%; background:#C3CCDA; display:block; } .cerceve img{ display:block; width:100%; height:auto; } /* Telefon çerçevesi */ .telefon{ width:266px; border-radius:34px; padding:9px; background:#0E1729; box-shadow:0 40px 80px -34px rgba(14,23,41,.5); } .telefon img{ display:block; width:100%; border-radius:26px; } .cizgili{ border-top:1px solid #D9E1EA; } /* Hareket azaltma tercihi: tüm animasyonlar kapanır, içerik yerinde durur */ @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } .bel{ opacity:1 !important; transform:none !important; transition:none !important } .gir{ opacity:1 !important; animation:none !important } .suzul{ animation:none !important } .isik::before{ animation:none !important } .kaynak{ animation:none !important } .suzulen, .parlak::after{ animation:none !important } } /* SSS: JavaScript yok, tarayıcının kendi
öğesi. Klavyeyle de açılır. */ .sss{ border-bottom:1px solid #D9E1EA; } .sss summary{ cursor:pointer; list-style:none; display:flex; align-items:center; gap:16px; padding:18px 0; font-weight:600; color:#0E1729; } .sss summary::-webkit-details-marker{ display:none; } .sss summary::after{ content:''; margin-left:auto; flex:none; width:9px; height:9px; border-right:2px solid #7C8CA0; border-bottom:2px solid #7C8CA0; transform:rotate(45deg) translateY(-2px); transition:transform .22s ease; } .sss[open] summary::after{ transform:rotate(-135deg) translateY(-2px); } .sss summary:focus-visible{ outline:2px solid #00619B; outline-offset:3px; border-radius:4px; } .sss p{ padding:0 0 20px; max-width:62ch; color:#4A5A6E; line-height:1.75; } /* SOL SEKME (resmî hat bölümü). Yatay sekme üç uzun başlığı taşımıyordu; dikey liste hem sığıyor hem sıralı okunduğunu belli ediyor. Dar ekranda yatay şeride düşer. */ .dsekmeler{ display:flex; flex-direction:column; gap:8px; } .dsekme{ display:flex; gap:12px; align-items:flex-start; text-align:left; width:100%; border:1px solid #D9E1EA; background:#FFFFFF; border-radius:14px; padding:14px 16px; color:#4A5A6E; font-size:15px; transition:border-color .18s, background .18s, color .18s; } .dsekme:hover{ border-color:#9FC2DA; } .dsekme[aria-selected="true"]{ background:#00619B; border-color:#00619B; color:#FFFFFF; } .dsekme:focus-visible{ outline:2px solid #00619B; outline-offset:2px; } .dsekme-no{ flex:none; width:24px; height:24px; border-radius:9999px; display:grid; place-items:center; font-size:12px; font-weight:700; background:#E6F0F7; color:#00619B; } .dsekme[aria-selected="true"] .dsekme-no{ background:rgba(255,255,255,.22); color:#FFFFFF; } .dpanel{ display:none; } .dpanel.acik{ display:block; animation:panelGel .45s cubic-bezier(.22,.8,.3,1); } @media (max-width: 1023px){ .dsekmeler{ flex-direction:row; overflow-x:auto; padding-bottom:4px; } .dsekme{ flex-direction:column; gap:8px; min-width:200px; } } /* Fiyat dönem düğmesi */ .donemBtn[aria-selected="true"]{ background:#00619B; color:#fff; } .donemBtn[aria-selected="false"]{ color:#4A5A6E; } .donemBtn[aria-selected="false"]:hover{ background:#E6F0F7; color:#00619B; } .donemBtn:focus-visible{ outline:2px solid #00619B; outline-offset:2px; } /* ── Süzülme: çizimlerdeki küçük parçalar yerinde durmasın ── */ .suzulen{ animation:suzulUpDown 4.2s ease-in-out infinite; } .suzulen-2{ animation-delay:-1.4s; } .suzulen-3{ animation-delay:-2.8s; } @keyframes suzulUpDown{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-7px) } } /* ── Ana düğme: 3,4 saniyede bir hafif parlama. Dikkat çeker, göz yormaz. ── */ .parlak{ position:relative; overflow:hidden; } .parlak::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.42) 50%,transparent 65%); transform:translateX(-120%); animation:parla 3.4s ease-in-out infinite; } @keyframes parla{ 0%,72%{ transform:translateX(-120%) } 100%{ transform:translateX(120%) } } /* Rapor çiziminde çubuklar görünürken büyür; yükseklik `style` içinde durur, JS yalnız sınıf ekler. JS yoksa çubuklar zaten doğru yükseklikte durur. */ .cubuklar > span{ transition:transform .9s cubic-bezier(.22,.8,.3,1); transform-origin:bottom; } .cubuklar.bekle > span{ transform:scaleY(0.04); } /* ── ÜRÜN BÖLÜMÜ SAHNELERİ ─────────────────────────────────────────────────────────── Beş blok aynı gri kutuydu ve arka arkaya okununca tekdüze görünüyordu. Artık her bloğun kendi zemini ve kendi hareketi var; hareket görününce BİR KEZ oynar, sonsuz döngüye alınan tek şey ses çubuğu ve tik sırası (ikisi de küçük). */ /* Koyu pano: ortadaki blok ritmi kırsın diye mürekkep zeminde */ .koyu-pano{ color:#DDE6F0; } .koyu-pano .parca{ background:#16203a; border-color:rgba(255,255,255,.14); box-shadow:none; color:#DDE6F0; } .koyu-pano .text-marka{ color:#7FC9D6; } .koyu-pano .bg-marka{ background:#2F86C4; } .koyu-pano .border-cizgi{ border-color:rgba(255,255,255,.14); } .koyu-pano .text-soluk{ color:#A9BACD; } .koyu-pano .text-silik{ color:#7C8CA0; } .koyu-pano .elyazisi{ color:#7FC9D6; } .koyu-pano .bg-cizgi{ background:rgba(255,255,255,.16); } .koyu-pano svg[stroke="#00619B"]{ stroke:#7FC9D6; } /* 1) Gelen kutusu: satırlar sırayla iner */ .kademe > div{ opacity:0; transform:translateY(10px); } .sahne.acik .kademe > div{ animation:kademeGel .5s cubic-bezier(.22,.8,.3,1) forwards; } .sahne.acik .kademe > div:nth-child(1){ animation-delay:.05s } .sahne.acik .kademe > div:nth-child(2){ animation-delay:.15s } .sahne.acik .kademe > div:nth-child(3){ animation-delay:.25s } .sahne.acik .kademe > div:nth-child(4){ animation-delay:.35s } .sahne.acik .kademe > div:nth-child(5){ animation-delay:.45s } .sahne.acik .kademe > div:nth-child(6){ animation-delay:.55s } @keyframes kademeGel{ to{ opacity:1; transform:none } } /* 2) Tanıdık özellikler: ses çubuğu dolar, tikler sırayla yanar */ .ses-yol{ position:relative; overflow:hidden; } .ses-dolgu{ position:absolute; inset:0; width:0; border-radius:9999px; background:#00619B; } .sahne.acik .ses-dolgu{ animation:sesCal 4.5s ease-in-out infinite; } @keyframes sesCal{ 0%{ width:0 } 55%{ width:100% } 70%,100%{ width:100% } } .tikler > div > *{ transition:transform .3s ease, box-shadow .3s ease; } .sahne.acik .tikler > div > *:nth-child(1){ animation:tikYan 4.5s ease-in-out infinite; animation-delay:0s } .sahne.acik .tikler > div > *:nth-child(2){ animation:tikYan 4.5s ease-in-out infinite; animation-delay:.5s } .sahne.acik .tikler > div > *:nth-child(3){ animation:tikYan 4.5s ease-in-out infinite; animation-delay:1s } @keyframes tikYan{ 0%,12%{ transform:none; box-shadow:0 10px 26px -14px rgba(14,23,41,.28) } 6%{ transform:translateY(-5px) scale(1.06); box-shadow:0 14px 30px -12px rgba(0,97,155,.55) } 100%{ transform:none } } /* 3) CRM: etiketler sırayla belirir */ .sahne.acik .etiketler > *{ animation:kademeGel .45s cubic-bezier(.22,.8,.3,1) forwards; } .etiketler > *{ opacity:0; transform:translateY(6px); } .sahne.acik .etiketler > *:nth-child(1){ animation-delay:.35s } .sahne.acik .etiketler > *:nth-child(2){ animation-delay:.5s } .sahne.acik .etiketler > *:nth-child(3){ animation-delay:.65s } /* 4) Asistan: kaynak kutuları sırayla yanar, ok akar, cevap yazılıyormuş gibi gelir */ .kaynaklar > span{ opacity:.45; transform:translateY(4px); } .sahne.acik .kaynaklar > span{ animation:kaynakYan .55s ease forwards; } .sahne.acik .kaynaklar > span:nth-child(1){ animation-delay:.1s } .sahne.acik .kaynaklar > span:nth-child(2){ animation-delay:.3s } .sahne.acik .kaynaklar > span:nth-child(3){ animation-delay:.5s } @keyframes kaynakYan{ to{ opacity:1; transform:none } } .sahne.acik .akan-ok path{ stroke-dashoffset:0; animation:okAk 1.6s linear infinite; } @keyframes okAk{ to{ stroke-dashoffset:-18 } } .cevap{ opacity:0; transform:translateY(8px); } .sahne.acik .cevap{ animation:kademeGel .6s cubic-bezier(.22,.8,.3,1) .95s forwards; } @media (prefers-reduced-motion: reduce){ .kademe > div, .etiketler > *, .kaynaklar > span, .cevap{ opacity:1 !important; transform:none !important; animation:none !important } .ses-dolgu{ width:60% !important; animation:none !important } .tikler > div > *, .akan-ok path{ animation:none !important } } /* ── AKIŞ SAHNESİ (tek gelen kutusu) ───────────────────────────────────────────────── Üç katman: arkada ızgara, ortada SVG yollar, önde kutular. Yollar `preserveAspectRatio ="none"` ile esner, böylece sütun genişliği ne olursa olsun uçlar doğru yere oturur. Dar ekranda yollar ve balonlar gizlenir, kutular kartın üstüne yığılır. */ .akis-tuval{ position:relative; display:grid; grid-template-columns:212px 1fr minmax(0,430px); align-items:center; gap:0; min-height:340px; } .akis-yollar{ position:absolute; left:206px; right:424px; top:50%; transform:translateY(-50%); height:272px; } .akis-yollar svg{ display:block; width:100%; height:100%; } .akis-hatlar{ position:relative; z-index:2; display:flex; flex-direction:column; gap:16px; } .hat-kutu{ display:flex; align-items:center; gap:10px; height:56px; background:#fff; border:1px solid #E3EAF1; border-radius:12px; padding:0 12px; box-shadow:0 10px 24px -16px rgba(14,23,41,.35); opacity:0; transform:translateX(-10px); } .sahne.acik .hat-kutu{ animation:hatGel .5s cubic-bezier(.22,.8,.3,1) forwards; animation-delay:var(--gec,0ms); } @keyframes hatGel{ to{ opacity:1; transform:none } } .hat-ikon{ display:grid; place-items:center; width:34px; height:34px; flex:none; border-radius:9999px; background:#F4F7FA; border:1px solid #E3EAF1; } .akis-kart{ position:relative; z-index:2; grid-column:3; } .akis-balon{ position:absolute; z-index:3; max-width:216px; background:#fff; border:1px solid #E3EAF1; border-radius:12px; border-top-left-radius:4px; padding:9px 11px; box-shadow:0 16px 34px -18px rgba(14,23,41,.45); } .akis-balon-1{ left:246px; top:6px; } .akis-balon-2{ left:262px; bottom:10px; } /* Yol akışı: kesikler sağa doğru kayar, "içinden mesaj geçiyor" hissi verir */ .akis-yollar svg path{ stroke-dasharray:9 10; stroke-dashoffset:0; opacity:.75; vector-effect:non-scaling-stroke; } .sahne.acik .akis-yollar svg path{ animation:yolAk 1.9s linear infinite; } .sahne.acik .akis-yollar svg path:nth-child(2){ animation-delay:-.5s } .sahne.acik .akis-yollar svg path:nth-child(3){ animation-delay:-1s } .sahne.acik .akis-yollar svg path:nth-child(4){ animation-delay:-1.4s } @keyframes yolAk{ to{ stroke-dashoffset:-38 } } @media (max-width:1023px){ /* `1fr` otomatik en-küçük genişliği taşır: içerideki hat kutularının min-content'i sütunu 382 px'e itiyordu ve sayfa 390 px'te yatay kayıyordu (ölçüldü 2026-09-04). `minmax(0,…)` sütunu kapsayıcıya kilitler, esnek kutular küçülerek sığar. */ .akis-tuval{ grid-template-columns:minmax(0,1fr); gap:22px; min-height:0; } .akis-yollar, .akis-balon{ display:none; } .akis-hatlar{ flex-direction:row; flex-wrap:wrap; } .hat-kutu{ flex:1 1 46%; } .akis-kart{ grid-column:1; } } @media (prefers-reduced-motion: reduce){ .hat-kutu{ opacity:1 !important; transform:none !important; animation:none !important } .akis-yollar svg path{ animation:none !important } } /* ── CRM KOMPOZİSYONU ──────────────────────────────────────────────────────────────── Kutunun içinde duran bir görsel yerine, düz marka bloğunun ÜSTÜNDEN TAŞAN parçalar. Blok arkada durur ve içinde bilgi yoktur; işi derinlik vermek. Taşma sağa doğru yapılır (sol sütunda olduğu için sayfa kenarına değil, boşluğa taşar). */ .krm-sahne{ position:relative; padding:34px 0 46px 0; } .krm-blok{ position:absolute; left:0; top:0; width:74%; height:78%; border-radius:22px; background:linear-gradient(150deg,#00619B,#004E7D); } .krm-kart{ position:relative; z-index:2; margin-left:12%; width:88%; box-shadow:0 34px 70px -26px rgba(14,23,41,.55); border-radius:14px; } .krm-liste{ position:absolute; z-index:3; left:2%; bottom:0; width:184px; background:#fff; border:1px solid #E3EAF1; border-radius:12px; padding:10px 11px; box-shadow:0 26px 52px -20px rgba(14,23,41,.5); } .krm-secenek{ border-radius:7px; padding:5px 8px; font-size:12px; color:#4A5A6E; } .krm-secili{ background:#E6F0F7; color:#00619B; font-weight:600; } .krm .krm-kart, .krm .krm-liste{ opacity:0; transform:translateY(14px); } .krm.acik .krm-kart{ animation:krmGel .6s cubic-bezier(.22,.8,.3,1) .1s forwards; } .krm.acik .krm-liste{ animation:krmGel .6s cubic-bezier(.22,.8,.3,1) .45s forwards; } @keyframes krmGel{ to{ opacity:1; transform:none } } @media (max-width:640px){ .krm-sahne{ padding:20px 0 0 0; } .krm-blok{ width:100%; height:62%; } .krm-kart{ margin-left:0; width:100%; } .krm-liste{ position:static; width:100%; margin-top:14px; box-shadow:0 16px 34px -20px rgba(14,23,41,.4); } } @media (prefers-reduced-motion: reduce){ .krm .krm-kart, .krm .krm-liste{ opacity:1 !important; transform:none !important; animation:none !important } } /* ── KÖPRÜ SAHNESİ (hat → FlexInbox → CRM) ─────────────────────────────────────────── Beş sütun: kanallar · yol · merkez · yol · CRM. İki SVG ayrı çünkü solda 3, sağda 4 düğüm var ve yükseklikleri farklı; tek SVG'de uçlar kutuların merkezine oturmuyordu. Kutu yüksekliği SABİT (52px) — yoksa yol uçları kayıyor, blok 1'de ölçülen hata. */ .kop-tuval{ position:relative; display:grid; align-items:center; grid-template-columns:186px minmax(60px,1fr) 96px minmax(60px,1fr) 186px; } .kop-kanallar, .kop-crmler{ display:flex; flex-direction:column; gap:14px; position:relative; z-index:2; } .kop-kutu{ display:flex; align-items:center; justify-content:center; gap:9px; height:52px; background:#fff; border:1px solid #E3EAF1; border-radius:12px; padding:0 12px; box-shadow:0 10px 24px -16px rgba(14,23,41,.35); opacity:0; transform:translateY(8px); } .sahne.acik .kop-kutu{ animation:kopGel .5s cubic-bezier(.22,.8,.3,1) forwards; animation-delay:var(--gec,0ms); } @keyframes kopGel{ to{ opacity:1; transform:none } } .kop-ikon{ display:grid; place-items:center; width:32px; height:32px; flex:none; } .kop-crm img{ opacity:.85; } .kop-yol{ position:relative; } .kop-yol-sol{ height:184px; } .kop-yol-sag{ height:250px; } .kop-yol svg{ display:block; width:100%; height:100%; } .kop-yol path{ stroke-dasharray:9 10; opacity:.8; vector-effect:non-scaling-stroke; } .sahne.acik .kop-yol path{ animation:kopAk 1.9s linear infinite; } .sahne.acik .kop-yol-sag path{ animation-delay:-.9s; } @keyframes kopAk{ to{ stroke-dashoffset:-38 } } .kop-merkez{ position:relative; z-index:3; display:grid; place-items:center; height:60px; } .kop-mark{ display:grid; place-items:center; width:60px; height:60px; border-radius:9999px; background:linear-gradient(150deg,#00619B,#004E7D); box-shadow:0 18px 38px -14px rgba(0,97,155,.65); } .kop-nabiz{ position:absolute; top:50%; left:50%; width:60px; height:60px; margin:-30px 0 0 -30px; border-radius:9999px; border:2px solid #00619B; opacity:0; } .sahne.acik .kop-nabiz{ animation:kopNabiz 2.4s ease-out infinite; } @keyframes kopNabiz{ 0%{ transform:scale(1); opacity:.55 } 70%,100%{ transform:scale(1.75); opacity:0 } } @media (max-width:1023px){ .kop-tuval{ grid-template-columns:1fr; gap:18px; } .kop-yol{ display:none; } .kop-kanallar, .kop-crmler{ flex-direction:row; flex-wrap:wrap; } .kop-kutu{ flex:1 1 44%; } .kop-merkez{ margin:2px 0; } } @media (prefers-reduced-motion: reduce){ .kop-kutu{ opacity:1 !important; transform:none !important; animation:none !important } .kop-yol path, .kop-nabiz{ animation:none !important } } /* Kahramandaki dar köprü: yükseklikler aynı (yol verileri onlara bağlı), yalnız yatayda daralır. Kutu genişliği ve merkez düğüm küçülür, yollar aradaki boşluğu doldurur. */ /* GENİŞ EKRANA KİLİTLİ. Bu blok medya sorgusu olmadan yazılmıştı ve `.kopru-dar .kop-tuval` (0,2,0) dar ekran kuralı `.kop-tuval{grid-template-columns:1fr}` (0,1,0) üzerinde kazanıyordu: 390 px'te sahne 514 px kalıyor, sayfa yatay kayıyordu (ölçüldü 2026-09-04). Sarmalandı; dar ekranda artık ortak tek-sütun düzeni geçerli. */ @media (min-width:1024px){ .kopru-dar .kop-tuval{ grid-template-columns:150px minmax(34px,1fr) 74px minmax(34px,1fr) 150px; } .kopru-dar .kop-kutu{ padding:0 9px; gap:7px; } .kopru-dar .kop-mark{ width:50px; height:50px; } .kopru-dar .kop-nabiz{ width:50px; height:50px; margin:-25px 0 0 -25px; } .kopru-dar .kop-merkez{ height:50px; } .kopru-dar .kop-ikon{ width:26px; height:26px; } .kopru-dar .kop-kutu span:not(.kop-ikon){ font-size:12px; } .kopru-dar .kop-crm img{ height:22px; } } /* Fiyat sekmeleri: yatay hap. `.dsekme` dikey kart olduğu için ayrı sınıf. */ .fsekme{ display:inline-flex; align-items:center; gap:8px; border:1px solid #D9E1EA; background:#fff; border-radius:9999px; padding:9px 16px; font-size:14px; font-weight:600; color:#4A5A6E; transition:border-color .18s, background .18s, color .18s; } .fsekme:hover{ border-color:#9FC2DA; } .fsekme[aria-selected="true"]{ background:#00619B; border-color:#00619B; color:#fff; } .fsekme:focus-visible{ outline:2px solid #00619B; outline-offset:2px; } /* ── TEKNİK AYRINTI KATLAMASI ──────────────────────────────────────────────────────── Sayfanın uzunluğunu okuyucuya bırakır: ana vaat açıkta kalır, ayrıntı isteyen açar. Tarayıcının kendi `
` ögesi — JS gerekmez, klavyeyle çalışır, arama motoru içeriği yine okur (display:none DEĞİL, katlanmış içerik indekslenir). DİKKAT: katlı içeriğin İÇİNE `.bel` koyma. IntersectionObserver kapalı `
` içindeki ögeyi hiç görmez, açıldığında `opacity:0` kalırlar. `.bel` DIŞ kapsayıcıda (details'in kendisinde) durur. */ .tekno{ border:1px solid #D9E1EA; border-radius:14px; background:#fff; } .tekno > summary{ cursor:pointer; list-style:none; display:flex; align-items:center; gap:10px; padding:14px 18px; font-size:14px; font-weight:600; color:#00619B; } .tekno > summary::-webkit-details-marker{ display:none; } .tekno > summary::after{ content:''; margin-left:auto; flex:none; width:8px; height:8px; border-right:2px solid #7C8CA0; border-bottom:2px solid #7C8CA0; transform:rotate(45deg) translateY(-2px); transition:transform .22s ease; } .tekno[open] > summary::after{ transform:rotate(-135deg) translateY(-2px); } .tekno > summary:focus-visible{ outline:2px solid #00619B; outline-offset:2px; border-radius:14px; } .tekno-ic{ padding:2px 18px 18px; } .koyu-pano .tekno{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.14); } .koyu-pano .tekno > summary{ color:#7FC9D6; } /* ── MEGA MENÜ ─────────────────────────────────────────────────────────────────────── Masaüstünde hover/focus-within ile açılır (CSS), dokunmatikte betik.js .acik ekler. Panel butonun altına sola hizalı; genişlik satır içi style ile (site-menu.py). MARKA ÖĞELERİ KARE İKON KULLANMAZ: CRM logoları yazı markası ve çok geniş (Bitrix24 5.3:1), 34 piksellik kutuya konunca eziliyordu. Logo kendi genişliğinde, metnin üstünde durur. */ .mega{ position:relative; } .mega-btn{ display:inline-flex; align-items:center; gap:4px; color:inherit; transition:color .15s; } .mega-btn svg{ transition:transform .2s cubic-bezier(.16,1,.3,1); } .mega:hover .mega-btn, .mega:focus-within .mega-btn, .mega.acik .mega-btn, .mega-btn.etkin, .mega-link.etkin{ color:#00619B; } .mega-btn.etkin, .mega-link.etkin{ font-weight:600; } .mega:hover .mega-btn svg, .mega.acik .mega-btn svg{ transform:rotate(180deg); } .mega-link{ transition:color .15s; } .mega-link:hover{ color:#00619B; } .mega-panel{ position:absolute; inset-inline-start:-14px; top:100%; padding-top:12px; visibility:hidden; opacity:0; transform:translateY(10px) scale(.985); transform-origin:28px top; z-index:60; max-width:calc(100vw - 48px); transition:opacity .2s cubic-bezier(.16,1,.3,1), transform .24s cubic-bezier(.16,1,.3,1), visibility .24s; } .mega:hover>.mega-panel, .mega:focus-within>.mega-panel, .mega.acik>.mega-panel{ visibility:visible; opacity:1; transform:translateY(0) scale(1); } .mega-ic{ display:flex; gap:0; background:#fff; border:1px solid rgba(217,225,234,.9); border-radius:20px; padding:16px 10px; box-shadow:0 36px 68px -34px rgba(14,23,41,.42), 0 10px 26px -18px rgba(14,23,41,.16); } .mega-sutun{ flex:1 1 0; min-width:0; padding:0 8px; } .mega-sutun + .mega-sutun{ border-inline-start:1px solid rgba(217,225,234,.65); } .mega-baslik{ font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:#8A9AAD; padding:2px 10px 10px; } .mega-oge{ position:relative; display:flex; gap:11px; align-items:flex-start; padding:9px 10px; border-radius:12px; color:#0E1729; transition:background .15s ease, transform .15s ease; } .mega-oge:hover, .mega-oge:focus-visible{ background:#F1F6FB; outline:none; } .mega-oge:focus-visible{ box-shadow:0 0 0 2px rgba(0,97,155,.35); } .mega-oge.etkin{ background:#EAF2F8; } .mega-oge.etkin b, .mega-oge:hover b{ color:#00619B; } .mega-ikon{ width:36px; height:36px; border-radius:11px; flex:none; display:grid; place-items:center; background:linear-gradient(155deg,#EDF4FA,#DEEAF4); color:#00619B; transition:background .18s ease, color .18s ease, box-shadow .18s ease; } .mega-oge:hover .mega-ikon{ background:linear-gradient(155deg,#00619B,#004E7D); color:#fff; box-shadow:0 6px 14px -6px rgba(0,97,155,.55); } .mega-oge.marka{ flex-direction:column; gap:9px; } .mega-marka{ height:17px; width:auto; max-width:130px; object-fit:contain; object-position:left center; transition:transform .18s ease; } /* OPTİK DENGE: logolar farklı oranlarda; aynı yükseklikte biri kocaman, biri minik görünüyor. */ .marka-zoho{ height:23px; } .marka-bitrix24{ height:16px; } .marka-hubspot{ height:18px; } .marka-gohighlevel{ height:17px; } .mega-oge.marka:hover .mega-marka{ transform:translateY(-1px); } .mega-metin{ min-width:0; } .mega-metin b{ display:flex; align-items:center; gap:5px; font-size:13.5px; font-weight:600; line-height:1.25; transition:color .15s ease; } .mega-metin>span{ display:block; font-size:12px; color:#4A5A6E; line-height:1.45; margin-top:3px; } .mega-ok{ flex:none; opacity:0; transform:translateX(-4px); color:#00619B; transition:opacity .18s ease, transform .18s ease; } .mega-oge:hover .mega-ok, .mega-oge.etkin .mega-ok{ opacity:1; transform:translateX(0); } /* RTL — mantıksal karşılığı OLMAYAN üç özellik. `transform-origin`, `object-position` ve `translateX` fiziksel kalmak zorunda; Arapça'da tersine çevrilir. NOT: panelin kendisi `inset-inline-start` ile konumlanır. Eskiden `left:-14px` idi ve Arapça'da menü EKRANIN DIŞINA taşıyordu (2026-09-07 ekran görüntüsüyle görüldü). */ [dir="rtl"] .mega-panel{ transform-origin:calc(100% - 28px) top; } [dir="rtl"] .mega-marka{ object-position:right center; } [dir="rtl"] .mega-ok{ transform:translateX(4px); } [dir="rtl"] .mega-oge:hover .mega-ok, [dir="rtl"] .mega-oge.etkin .mega-ok{ transform:translateX(0); } .mega-kart{ flex:0 0 216px; margin-inline-start:10px; display:flex; flex-direction:column; gap:7px; padding:18px; border-radius:16px; color:#fff; transition:transform .18s ease, box-shadow .18s ease; background:linear-gradient(155deg,#0E1729 0%,#12395B 58%,#00619B 130%); } .mega-kart:hover{ transform:translateY(-2px); box-shadow:0 18px 32px -18px rgba(0,97,155,.6); } .mega-kart-etiket{ font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.55); } .mega-kart b{ font-size:14.5px; font-weight:600; } .mega-kart>span:not(.mega-kart-etiket){ font-size:12px; line-height:1.5; color:rgba(255,255,255,.78); } .mega-kart em{ font-style:normal; font-size:12px; font-weight:600; margin-top:auto; padding-top:10px; } /* mobil */ /* MOBİL MENÜ YÜKSEKLİĞİ — `vh` MOBİLDE YALAN SÖYLER. `100vh` telefon tarayıcılarında BÜYÜK viewport'tur (adres çubuğu gizliymiş gibi hesaplanır), yani görünen alandan yüksektir. Sonuç: menü ekranın altına taşıyor ama kendi içinde kaydırılacak fazlalık kalmadığı için parmak menüyü değil ARKADAKİ SAYFAYI kaydırıyordu. `dvh` görünen viewport'u verir; `vh` satırı onu desteklemeyen tarayıcılar için yedek olarak ÖNCE gelir (sonraki satır destekleniyorsa ezer). `overscroll-behavior:contain` ise menü sonuna gelindiğinde kaydırmanın sayfaya ZİNCİRLENMESİNİ keser — ikinci belirti buydu. Kesin yükseklik açılışta JS ile yazılır (bkz. betik.js): başlık yüksekliği sabit değil, sihirli sayı tutmuyordu. */ .mobil-menu{ border-top:1px solid rgba(217,225,234,.7); background:#F4F7FA; max-height:calc(100vh - 72px); max-height:calc(100dvh - 72px); overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; } .mobil-menu .mega-baslik{ padding:14px 0 4px; } .mobil-oge{ display:block; padding:9px 0; font-size:15px; color:#0E1729; border-bottom:1px solid rgba(217,225,234,.6); } .mobil-oge.etkin{ color:#00619B; font-weight:600; } #mobilAc .mobil-carpi{ display:none; } #mobilAc[aria-expanded="true"] .mobil-carpi{ display:block; } #mobilAc[aria-expanded="true"] .mobil-cizgi{ display:none; } /* ── ÇEREZ RIZA ŞERİDİ ──────────────────────────────────────────────────────────────── `hidden` özniteliğiyle gizlenir; `display:flex` Tailwind preflight'ının `[hidden]` kuralını ezdiği için gizleme AYRICA yazılır — yoksa şerit her açılışta görünür kalırdı. Konumlandırma mantıksal (`inset-inline`), RTL'de kendiliğinden aynalanır. */ .cerez-kutu{ position:fixed; inset-inline:0; bottom:0; z-index:80; display:flex; justify-content:center; padding:12px; pointer-events:none; } .cerez-kutu[hidden]{ display:none !important; } .cerez-ic{ pointer-events:auto; display:flex; flex-wrap:wrap; align-items:center; gap:14px; width:100%; max-width:56rem; padding:14px 18px; border:1px solid #D9E1EA; border-radius:16px; background:#FFF; box-shadow:0 24px 48px -24px rgba(14,23,41,.35); } .cerez-metin{ flex:1 1 22rem; min-width:0; font-size:13px; line-height:1.55; color:#4A5A6E; margin:0; } .cerez-bag{ color:#00619B; text-decoration:underline; text-underline-offset:2px; } .cerez-dugmeler{ display:flex; gap:8px; flex:0 0 auto; } /* İKİ DÜĞME AYNI BOYUT VE TEK TIK: reddi zorlaştırmak düzenleyicilerin saydığı kusur. */ .cerez-btn{ padding:8px 16px; border-radius:10px; border:1px solid #D9E1EA; background:#FFF; font-size:13px; font-weight:600; color:#0E1729; transition:border-color .15s ease, color .15s ease; } .cerez-btn:hover{ border-color:#00619B; color:#00619B; } .cerez-btn-ana{ background:#00619B; border-color:#00619B; color:#FFF; } .cerez-btn-ana:hover{ background:#004E7D; border-color:#004E7D; color:#FFF; } @media (max-width:640px){ .cerez-dugmeler{ width:100%; } .cerez-btn{ flex:1 1 0; } } /* ── ARAPÇA YAZI TİPİ ───────────────────────────────────────────────────────────────── Inter ve IBM Plex Mono Arap harfi TAŞIMAZ; yığında karşılığı olmayınca tarayıcı sistem fontuna düşer, o da her cihazda yok. Noto Sans Arabic yalnız `ar` sayfalarında yüklenir (bkz. ops/site-ceviri/uygula.py) — bu kurallar diğer dillerde hiç eşleşmez. SIRA ÖNEMLİ: Latin yazı tipi ÖNDE. Tarayıcı harf harf düşer, yani Latin karakterler markanın yazı tipiyle, Arap karakterler Noto ile çizilir; ikisi karışmaz. */ html[lang="ar"] body, html[lang="ar"] .font-sans{ font-family:Inter,'Noto Sans Arabic',system-ui,sans-serif; } html[lang="ar"] .mono, html[lang="ar"] .eyebrow{ font-family:'IBM Plex Mono','Noto Sans Arabic',ui-monospace,monospace; } /* Dil seçicisindeki "العربية" etiketi DİĞER YEDİ DİLİN sayfasında da doğru çizilmeli. O sayfalar tam Arapça yüzü İNDİRMEZ: 'NSA Secici' yalnız o yedi harfi taşıyan ~3 KB'lık ayrı bir ailedir (bkz. yazitipi-indir.py). Ayrı aile adı ŞART — aynı ad kullanılsaydı tarayıcı Arapça olmayan sayfada da tam yüzü indirebilirdi. */ .dil-oge[lang="ar"], .mobil-oge[lang="ar"]{ font-family:Inter,'NSA Secici',system-ui,sans-serif; } .dil-ad:lang(ar){ font-family:Inter,'Noto Sans Arabic','NSA Secici',system-ui,sans-serif; } /* ── DİL SEÇİCİ ─────────────────────────────────────────────────────────────────────── Tarayıcının kendi `
` ögesi: JS gerekmez, klavyeyle açılır, betik hatası dil geçişini kilitleyemez. Konumlandırma MANTIKSAL (`inset-inline-end`) — Arapça'da panel kendiliğinden diğer kenara geçer. */ .dil-menu{ position:relative; } .dil-menu > summary{ list-style:none; cursor:pointer; } .dil-menu > summary::-webkit-details-marker{ display:none; } .dil-dugme{ display:inline-flex; align-items:center; gap:6px; padding:7px 10px; border:1px solid #D9E1EA; border-radius:10px; background:#FFF; font-size:14px; font-weight:500; color:#4A5A6E; transition:border-color .15s ease, color .15s ease; } .dil-dugme:hover{ border-color:#00619B; color:#00619B; } .dil-ok{ transition:transform .2s ease; } .dil-menu[open] .dil-ok{ transform:rotate(180deg); } .dil-panel{ position:absolute; inset-inline-end:0; top:calc(100% + 8px); z-index:60; min-width:172px; padding:6px; border:1px solid #D9E1EA; border-radius:14px; background:#FFF; box-shadow:0 24px 48px -24px rgba(14,23,41,.35); } .dil-oge{ display:block; padding:8px 10px; border-radius:9px; font-size:14px; color:#0E1729; transition:background .15s ease, color .15s ease; } .dil-oge:hover{ background:#F4F7FA; color:#00619B; } /* ── BLOG YAZILARI (.blogdoc) ───────────────────────────────────────────────────────── 2026-07 tasarımından devralınan 120 yazının gövdesi kendi sınıflarını kullanıyor (`prose-rich`, `container`, `hero-grid-bg`, `hl`, `reveal`…). Kurallar eski sayfanın satır-içi