/* ============================================================================ PaKalite — YENİ GÖRÜNÜM KATMANI · sürüm 5 --------------------------------------------------------------------------- BU DOSYA ÜRETİLİR: tasarim-araclar/stil_uret.py Elle düzenlemeyin; değişiklik orada yapılır, betik yeniden çalıştırılır. stil.css DEĞİŞTİRİLMEZ; bu dosya onun üstüne biner. 0) Palet — sıcak (sarı/krem/turuncu) tonlar tamamen kaldırıldı; her şey üst panelin lacivert–çelik ailesine çekildi 1) Zemin — bir tık açıldı 2) Üst panel — tepede saydam, kayınca alt bilgi laciverti 3) Hero — yeni başlık tipografisi + 3B dişli sahnesi 4) Bölümler — koyu lacivert başlık rozeti, ince ayrım çizgisi 5) Alt bilgi + WhatsApp + Kılavuz düğmesi ========================================================================== */ /* ───────────────────────────────────────────────────────────── 0) PALET — sıcak tonları söndür Bu değişkenler stil.css'te sarı/turuncu/krem üretiyordu (güven şeridi noktaları, şerit zemini, vurgu renkleri). Hepsi çelik maviye çekildi. ───────────────────────────────────────────────────────────── */ :root{ /* Verilen palet (Material Blue 50→900) markaya bağlandı */ --brand:#1e88e5; --brand-d:#1565c0; --brand-soft:#e3f2fd; --accent:#1976d2; --accent-d:#0d47a1; --accent-soft:#e3f2fd; --gold:#7f93ad; --bg:#f7f9fc; --bg2:#eef1f6; --bg3:#e4e9f0; --line:#dde3ec; --line2:#cdd5e1; /* stil.css'teki mürekkep ve gri tonları sıcaktı (#18140f / #4a463d / #8a857a) — sayfaya hafif sarımsı bir kir veriyordu. Soğuk çeliğe alındı. */ --ink:#101725; --ink2:#414a5a; --muted:#7b8598; /* Eşit genişlikli (monospace) yazı sitenin her yerinde etiket olarak kullanılıyordu — terminal görüntüsü veriyordu. Gövde groteskine çevrildi; harf aralığı korunduğu için etiket karakteri kaybolmuyor. */ --mono:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif; } /* Tek istisna: panelde gösterilen firma kodu/şifre. Orada 0-O ve l-I ayrımı okunurluk için gerekli, o yüzden gerçek eşit genişlikli yazı kalıyor. */ .kod-vitrin .kod{font-family:ui-monospace,SFMono-Regular,Consolas,monospace} /* Buton adı gibi kullanılan .kod artık kod değil, arayüz rozeti gibi durur */ .kod{font-family:var(--body);font-weight:600;letter-spacing:0} /* stil.css'te body overflow-x:hidden — bu, kaydırma kabı yarattığı için position:sticky'yi bozuyordu. clip aynı kırpmayı yapar, kap yaratmaz. */ html,body{overflow-x:clip} /* Üst panel sabit olduğu için iç sayfalarda içerik altına kaymasın */ body.ic-sayfa{padding-top:72px} /* ───────────────────────────────────────────────────────────── 1) ZEMİN — bir tık açık ───────────────────────────────────────────────────────────── */ .zemin{ background: radial-gradient(70% 46% at 50% -12%,rgba(255,255,255,.62),transparent 68%), linear-gradient(170deg,#eaf2fd 0%,#dfeafa 18%,#d4e2f4 38%,#cedaeb 56%,#d2dae5 74%, #d9dfe8 90%,#e1e6ed 100%) !important; } /* Kare ızgara kaldırıldı: zemin düz ve sakin bir degrade. */ .zemin-izgara{display:none !important} body{color:#2b323f} .lede{color:#323a49} /* Şerit bölümleri de saydam — zemin sayfa boyunca kesintisiz aksın */ .serit{background:transparent !important;border-color:transparent !important} .guven{padding:34px 0 92px !important} .guven .std::before{background:#5d80a8 !important} .guven .std{color:#5a6577} /* ───────────────────────────────────────────────────────────── 2) ÜST PANEL ───────────────────────────────────────────────────────────── */ #ust-menu{position:fixed;top:0;left:0;right:0;z-index:90} .nav{ background:transparent !important; border-bottom:1px solid transparent !important; box-shadow:none; -webkit-backdrop-filter:none;backdrop-filter:none; transition:background .5s ease,border-color .5s ease,box-shadow .5s ease, backdrop-filter .5s ease} .nav-ic{transition:height .5s ease} .nav-linkler>a,.acilir>button{ color:#3b4350 !important;font-weight:700 !important;position:relative; transition:color .35s ease,background .35s ease,text-shadow .35s ease} .nav-linkler>a.nav-kilavuz{color:#fff !important} .acilir>button svg{opacity:.65;color:currentColor} .nav-linkler>a:not(.nav-kilavuz)::after,.acilir>button::after{ content:"";position:absolute;left:8px;right:8px;bottom:3px;height:2px;border-radius:2px; background:currentColor;transform:scaleX(0);transform-origin:left; transition:transform .22s ease,box-shadow .35s ease} .nav-linkler>a:not(.nav-kilavuz):hover::after,.nav-linkler>a.akt::after, .acilir:hover>button::after,.acilir:focus-within>button::after{transform:scaleX(1)} .nav-linkler>a:not(.nav-kilavuz):hover,.acilir>button:hover,.nav-linkler>a.akt{ color:#101823 !important;background:rgba(40,52,70,.07) !important} .logo{color:#16233c;transition:color .5s ease} .logo img{transition:filter .5s ease} /* Kayınca: alt bilgi ile aynı lacivert palet */ body.kaydi .nav{ background:linear-gradient(180deg,#152238 0%,#0e1626 100%) !important; border-bottom-color:rgba(140,175,255,.16) !important; box-shadow:0 12px 34px -20px rgba(6,12,24,.9); -webkit-backdrop-filter:saturate(150%) blur(12px); backdrop-filter:saturate(150%) blur(12px)} body.kaydi .nav-ic{height:64px} body.kaydi .nav-linkler>a,body.kaydi .acilir>button{color:#9fb0d0 !important} body.kaydi .nav-linkler>a.nav-kilavuz{color:#eaf3ff !important} body.kaydi .nav-linkler>a:not(.nav-kilavuz):hover, body.kaydi .acilir>button:hover, body.kaydi .nav-linkler>a.akt{ color:#ffffff !important;background:rgba(159,176,208,.10) !important; text-shadow:0 0 16px rgba(150,190,255,.75)} body.kaydi .nav-linkler>a:not(.nav-kilavuz)::after, body.kaydi .acilir>button::after{ background:#9dc2ff;box-shadow:0 0 12px rgba(157,194,255,.85)} body.kaydi .logo{color:#fff} body.kaydi .logo img{filter:brightness(0) invert(1);opacity:.95} /* ── Açılır menü panelleri ── Eski hâli düz beyaz bir kutuydu: başlık ve açıklama neredeyse aynı ağırlıkta, ögeler eşit aralıklı, hiçbir yerde hiyerarşi yoktu — şablon hissi buradan geliyordu. Yeni hâli: üstü ışık pahlı çelik cam bir panel; her ögede sola kayan bir vurgu şeridi, sağdan giren ok, ve imleç üstündeyken maviye dönüp hafifçe parlayan başlık. */ .acilir-menu{ min-width:318px; padding:10px !important; border-radius:18px !important; background:linear-gradient(180deg,#ffffff 0%,#f6fafd 100%) !important; border:1px solid rgba(118,148,190,.22) !important; box-shadow:0 30px 64px -30px rgba(14,26,50,.44), 0 4px 14px -6px rgba(14,26,50,.13), inset 0 1px 0 rgba(255,255,255,.95) !important; transform:translateY(10px) scale(.986); transition:opacity .24s cubic-bezier(.2,.8,.3,1), transform .3s cubic-bezier(.2,.8,.3,1),visibility .24s} .acilir:hover .acilir-menu,.acilir:focus-within .acilir-menu{transform:none} .acilir-menu a{ position:relative; gap:13px !important;padding:11px 34px 11px 14px !important; border-radius:12px !important; transition:background .2s ease} /* Sola yaslanan vurgu şeridi — hangi ögede olduğunuz net */ .acilir-menu a::before{ content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px; border-radius:0 3px 3px 0;background:linear-gradient(180deg,#5f9de8,#2f6fc4); transform:scaleY(0);transition:transform .24s cubic-bezier(.2,.8,.3,1)} /* Ok, açıklama satırının ortasına değil BAŞLIK hizasına oturur */ .acilir-menu a::after{ content:"→";position:absolute;right:14px;top:19px; transform:translateX(-7px);font-size:.86rem;color:#2f6fc4;opacity:0; transition:opacity .22s ease,transform .3s cubic-bezier(.2,.8,.3,1)} .acilir-menu a:hover::before,.acilir-menu a:focus-visible::before{transform:scaleY(1)} .acilir-menu a:hover::after,.acilir-menu a:focus-visible::after{ opacity:1;transform:translateX(0)} .acilir-menu a:hover,.acilir-menu a:focus-visible{ background:linear-gradient(90deg,rgba(47,111,196,.10),rgba(47,111,196,.025)) !important} /* Başlık: 700 yerine 600 — daha az kalın, daha oturaklı */ .acilir-menu b{ font-family:var(--body);font-size:.93rem;font-weight:600;letter-spacing:-.012em; color:#15202f;transition:color .2s ease,text-shadow .3s ease} .acilir-menu a:hover b,.acilir-menu a:focus-visible b{ color:#2f6fc4;text-shadow:0 0 16px rgba(47,111,196,.45)} .acilir-menu span{ font-family:var(--body);font-size:.795rem;line-height:1.46;color:#6f7c8f; transition:color .2s ease} .acilir-menu a:hover span{color:#5b6a7f} .acilir-menu .ik{ width:36px;height:36px;border-radius:11px; background:linear-gradient(180deg,#eff4fb,#e2ecf7) !important; border:1px solid rgba(118,148,190,.24); color:#3d6796 !important; transition:background .22s ease,color .22s ease,border-color .22s ease, box-shadow .3s ease,transform .22s ease} .acilir-menu a:hover .ik{ background:linear-gradient(180deg,#4182d3,#2a5fae) !important;color:#fff !important; border-color:rgba(47,111,196,.55); box-shadow:0 8px 18px -8px rgba(47,111,196,.8); transform:translateY(-1px)} /* Kalite Dünyası mega menüsü — dört sütun, açıklamasız */ .acilir.mega .acilir-menu{padding:16px 16px 14px !important;gap:3px} .acilir.mega .acilir-menu a{padding:9px 12px !important} .acilir.mega .acilir-menu a::after{display:none} .acilir.mega .acilir-menu b{font-size:.875rem} .acilir.mega .acilir-menu .ik{width:32px;height:32px;border-radius:9px} .acilir.mega .mega-bas{border-bottom-color:rgba(118,148,190,.22) !important; padding:2px 12px 12px;margin-bottom:6px} .acilir.mega .mega-bas span{font-family:var(--mono);color:#7b8598; letter-spacing:.16em;font-size:.7rem} .acilir.mega .mega-bas a{color:#2f6fc4 !important;background:none !important; padding:0 !important} .acilir.mega .mega-bas a::before,.acilir.mega .mega-bas a::after{display:none} .acilir.mega .mega-bas a:hover{color:#1d4f95 !important; text-shadow:0 0 14px rgba(47,111,196,.4)} .nav.acik{background:linear-gradient(180deg,#152238,#0e1626) !important; -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)} .nav.acik .nav-linkler>a,.nav.acik .acilir>button{color:#9fb0d0 !important} .nav.acik .logo{color:#fff} .nav.acik .logo img{filter:brightness(0) invert(1)} .nav.acik .nav-linkler{border-top-color:rgba(255,255,255,.12) !important} .nav-sag a[href="/giris"]{display:none !important} /* ── Kullanım Kılavuzu düğmesi — yenilendi ── Eski hâli parlak mavi dolgu + atan gölge + süpüren parıltıydı; reklam afişi gibi duruyordu. Yeni hâli: çelik cam bir kapsül, ince ışıklı kenar ve çok yavaş bir yansıma. İkon betikte yenileniyor (açık kılavuz + kıvılcım). */ .nav-linkler>a.nav-kilavuz{ animation:none !important; background:linear-gradient(135deg,rgba(47,95,150,.96),rgba(23,52,92,.96)) !important; border:1px solid rgba(150,195,255,.34); box-shadow:0 8px 22px -12px rgba(18,40,74,.75), inset 0 1px 0 rgba(255,255,255,.20) !important; padding:10px 17px !important;font-size:.96rem !important; transition:box-shadow .35s ease,transform .25s ease,background .35s ease} .nav-linkler>a.nav-kilavuz:hover{ transform:translateY(-1px); box-shadow:0 12px 30px -12px rgba(30,70,130,.8), inset 0 1px 0 rgba(255,255,255,.28) !important} .nav-kilavuz::before{ animation:klvIsilti 7s ease-in-out infinite !important; background:linear-gradient(100deg,transparent,rgba(190,225,255,.32),transparent) !important} @keyframes klvIsilti{0%{left:-120%}60%,100%{left:135%}} .nav-kilavuz .klv-puls{ animation:none !important;width:6px;height:6px; background:#a9d4ff !important;box-shadow:0 0 9px rgba(169,212,255,.95) !important} body.kaydi .nav-linkler>a.nav-kilavuz{ background:linear-gradient(135deg,rgba(60,112,172,.5),rgba(30,58,100,.6)) !important; border-color:rgba(160,200,255,.42)} @media (prefers-reduced-motion:reduce){ .nav-kilavuz::before{animation:none !important} } /* ───────────────────────────────────────────────────────────── 3) HERO ───────────────────────────────────────────────────────────── */ /* Büyük hero payı yalnız ana sayfada; iç sayfalar stil.css'teki kendi paylarını korur (sabit panelin payı body'den geliyor). */ body:not(.ic-sayfa) .hero{padding:168px 0 104px} .hero::before{opacity:.22} /* Başlık tipografisi yenilendi: editoryal serif yerine, sahnedeki metal ve mono etiketlerle aynı dili konuşan sıkı bir grotesk. "Ücretsiz" çelik mavi bir degrade ile dolduruldu. */ .hero h1{ font-family:var(--body);font-weight:800; font-size:clamp(2.2rem,4.4vw,3.4rem); line-height:1.05;letter-spacing:-.033em;color:#111a29; margin-bottom:.42em} /* Ana sayfada başlık iddialı olsun */ body:not(.ic-sayfa) .hero h1{font-size:clamp(2.7rem,5.7vw,4.6rem);line-height:1.02} body:not(.ic-sayfa) .hero h1 .grad{ font-family:var(--body);font-style:normal;font-weight:800;padding-right:.05em; background:linear-gradient(100deg,#2a5a92 0%,#4d86c4 46%,#83b4e0 100%); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent} .hero .lede{max-width:600px;font-size:clamp(1.04rem,1.55vw,1.2rem)} .hero-cta{margin-top:38px} .metal-sar{display:flex;flex-direction:column;align-items:center;gap:18px;--boy:500px} .metal-sahne{position:relative;width:var(--boy);height:var(--boy); max-width:92vw;max-height:92vw;touch-action:none;cursor:grab;isolation:isolate; user-select:none;-webkit-user-select:none} .metal-sahne.tutuluyor{cursor:grabbing} #disliTuval{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1} .metal-sahne::after{content:"";position:absolute;left:50%;bottom:5%;width:50%;height:6%; transform:translateX(-50%);border-radius:50%;z-index:0; background:radial-gradient(ellipse,rgba(22,32,52,.32),transparent 72%);filter:blur(14px)} .metal-yedek{position:absolute;inset:7%;display:none;z-index:1; animation:yedekDon 26s linear infinite} .metal-yedek svg{width:100%;height:100%;display:block; filter:drop-shadow(0 22px 34px rgba(18,28,46,.4))} @keyframes yedekDon{to{transform:rotate(360deg)}} .metal-sahne.yedek-acik .metal-yedek{display:block} .metal-etiketler{position:absolute;inset:0;pointer-events:none;z-index:2;display:none} .metal-sahne.yedek-acik .metal-etiketler{display:block} .met-et{position:absolute;left:0;top:0;will-change:transform;transition:opacity .45s ease} .met-et .ic{display:block;white-space:nowrap;text-align:center;padding:6px 14px; border-radius:999px;background:rgba(16,24,40,.66);border:1px solid rgba(255,255,255,.24)} .met-et .ic b{display:block;font-family:var(--body);font-weight:800;font-size:.84rem;color:#fff} .met-et .ic small{display:block;font-family:var(--mono);font-size:.55rem;letter-spacing:.1em; text-transform:uppercase;color:rgba(226,235,250,.86)} .met-et.etkin .ic{background:#2f5f96;border-color:rgba(255,255,255,.6)} .kup-yazi{background:rgba(255,255,255,.88) !important;border-color:rgba(45,70,110,.2) !important} .kup-yazi b{color:#2f5f96 !important} @media(max-width:900px){.hero{padding-top:132px}.metal-sar{--boy:430px}} @media(max-width:520px){.metal-sar{--boy:340px}} /* ───────────────────────────────────────────────────────────── 4) BÖLÜMLER ───────────────────────────────────────────────────────────── */ /* Bölüm zeminleri de SAYDAM: ana sayfanın tamamı, iç sayfalarla aynı atmosfer katmanının (.zemin) üstünde duruyor. Bölümlerin kendi renkleri (--sc) başlık, işaret ve kartlarda yaşamaya devam ediyor; yalnız zemin tonları kalktı — aralarında basamak oluşturuyorlardı. */ section.blk{position:relative;background:transparent !important; border:0 !important;padding:118px 0 112px} section.blk>.kap{position:relative;z-index:4} /* Üst başlık (eyebrow) — SİTENİN TAMAMINDA aynı. Kapsül rozet kaldırıldı: yuvarlatılmış dolgu kutu yasak listesinde. Yerine kısa bir kural çizgisi ve seyrek harf aralıklı küçük versal — teknik bilgiyi süslemeden duyuran, sayfanın tipografisiyle aynı dili konuşan bir işaret. */ .usta,.hero-rozet{ display:inline-flex;align-items:center;gap:13px; background:none !important;border:0 !important;border-radius:0 !important; padding:0 !important;box-shadow:none !important; font-family:var(--body) !important;font-size:.78rem;font-weight:700; letter-spacing:.22em;text-transform:uppercase; color:#1565c0 !important;margin-bottom:22px} .usta::before,.hero-rozet .puls{content:"";width:28px;height:1px;flex:none; background:currentColor !important;border-radius:0 !important; box-shadow:none !important;animation:none !important} .usta::after{display:none !important} .hero-rozet b{color:#eaf3ff !important;font-weight:700} /* Başlıklar artık silik değil: koyu mürekkep + belirgin ölçek */ /* Başlıklar SİTENİN TAMAMINDA aynı dili konuşur: sıkı grotesk. Vurgulanan tek kelime Fraunces italik kalır — editoryal kontrast noktası korunuyor. */ h2{font-family:var(--body);font-weight:800;letter-spacing:-.032em;line-height:1.06} h2 .grad,h1 .grad{font-family:var(--disp);font-weight:600;font-style:italic; letter-spacing:-.01em;padding-right:.04em} section.blk h2{font-size:clamp(2.3rem,4.6vw,3.4rem);color:#0e1523} /* SİTENİN TÜM BAŞLIKLARI aynı dile alınır. !important gerekli çünkü bazı sayfalarda başlığın yazı tipi satır içi style ile yazılmış; onları tek tek düzenlemek yerine tasarım katmanından bastırıyoruz (metne dokunulmuyor). */ h1,h2,h3,h4,.makale h2,.makale h3,.mak-cta h3,.kv-adim>h3, .panel-bas h1,.kd-bas h1,.kd-kart h3{font-family:var(--body) !important} h1,h2,.kd-bas h1,.panel-bas h1{font-weight:800 !important;letter-spacing:-.03em} h3,h4{font-weight:700 !important;letter-spacing:-.018em} .makale h2,.kv-adim>h3,.kd-bas h1{color:#0e1523} /* Vurgulanan tek kelime serif italik kalır — editoryal kontrast noktası */ h1 .grad,h2 .grad,h3 .grad{font-family:var(--disp) !important;font-weight:600 !important; font-style:italic} /* Rakam, alıntı ve rozetlerde serif kalması doğru: oralarda karakter katıyor (.ist .n, .gauge b, .alinti, .adim::before ...) — dokunulmadı. */ section.blk h3{color:#141d2c;font-weight:700} section.blk .grad{color:var(--sc) !important} section.blk .lede{color:#3a4351} section.blk .kart,section.blk .sektor,section.blk .blog-k{ background:rgba(255,255,255,.95); border-color:color-mix(in srgb,var(--sc) 16%,transparent); box-shadow:0 14px 34px -24px rgba(24,38,66,.6)} section.blk .kart:hover,section.blk .sektor:hover,section.blk .blog-k:hover{ border-color:color-mix(in srgb,var(--sc) 48%,transparent); box-shadow:0 22px 44px -26px rgba(24,38,66,.65)} section.blk .kart>.ik,section.blk .sektor .ik,section.blk .mini-liste .ik{ background:color-mix(in srgb,var(--sc) 11%,#fff) !important;color:var(--sc) !important; border-color:color-mix(in srgb,var(--sc) 20%,transparent) !important} section.blk .btn-hayalet{border-color:color-mix(in srgb,var(--sc) 34%,transparent);color:var(--sc)} section.blk .btn-hayalet:hover{background:color-mix(in srgb,var(--sc) 8%,#fff); border-color:color-mix(in srgb,var(--sc) 58%,transparent)} section.blk .etiket.std{background:color-mix(in srgb,var(--sc) 8%,#fff); border-color:color-mix(in srgb,var(--sc) 22%,transparent);color:var(--sc)} section.blk .git{color:var(--sc)} section.blk .sss details{border-color:color-mix(in srgb,var(--sc) 16%,transparent); background:rgba(255,255,255,.93)} section.blk .sss summary{color:#0e1523} section.blk .blog-k .gorsel{background:linear-gradient(135deg, color-mix(in srgb,var(--sc) 88%,#000),var(--sc2))} /* .cam-kart BİLEREK koyu kalır (içindeki rakamlar stil.css'te beyaz). */ section.blk .cam-kart{ background:linear-gradient(155deg, color-mix(in srgb,var(--sc) 26%,#18243c), color-mix(in srgb,var(--sc) 12%,#0e1626)); border-color:color-mix(in srgb,var(--sc2) 30%,transparent); box-shadow:0 28px 58px -30px rgba(20,32,56,.85)} /* Koyu kartın içinde koyu künye okunmaz — orada açık kapsül kalır */ section.blk .cam-kart .usta{background:rgba(255,255,255,.09) !important; border-color:rgba(255,255,255,.2) !important;font-size:.78rem;padding:8px 16px; margin-bottom:18px;color:#cfe0f8 !important;box-shadow:none} section.blk .cam-kart p{color:#a8b8d4} section.blk .cam-kart .etiket.std{background:rgba(255,255,255,.10);color:#d3e2ff; border-color:rgba(255,255,255,.20)} /* Sekiz bölüm — hepsi soğuk aile; sarı/krem/gül yok */ .blk-neden {--sc:#2c5288;--sc2:#7ba0cd;--ba:#f5f8fd;--bb:#e9f1fa} .blk-moduller {--sc:#236a72;--sc2:#6fa8ad;--ba:#f2f8f9;--bb:#e5f0f2} .blk-bulut {--sc:#3d4a86;--sc2:#8590c4;--ba:#f5f6fc;--bb:#e8ebf7} .blk-rapor {--sc:#345c7c;--sc2:#7ea6c2;--ba:#f4f8fb;--bb:#e7eef5} .blk-adim {--sc:#2b6360;--sc2:#78a7a4;--ba:#f2f8f8;--bb:#e6f0ef} .blk-sektor {--sc:#3b4759;--sc2:#8894a8;--ba:#f5f6f9;--bb:#e8ebf1} .blk-kaynak {--sc:#474d80;--sc2:#8b90bf;--ba:#f5f6fb;--bb:#e8eaf5} .blk-sss {--sc:#2a5b80;--sc2:#7aa3c4;--ba:#f4f8fc;--bb:#e7eff8} /* Başlıkların altındaki dalga deseni kaldırıldı. Bölümler artık yalnız zemin tonu ve boşlukla ayrılıyor; üstlerinde saç teli inceliğinde bir çizgi var. */ section.blk::before{content:"";position:absolute;left:0;right:0;top:0;height:1px; background:linear-gradient(90deg,transparent,rgba(21,101,192,.16) 18%, rgba(21,101,192,.16) 82%,transparent)} section.blk::after{display:none} .alinti{background:rgba(255,255,255,.55);border-radius:26px;padding:44px 40px; color:#222c3d} .alinti span{color:#2c5288} @media(max-width:700px){ section.blk{padding:84px 0 80px} section.blk .usta{font-size:.74rem;padding:8px 16px;letter-spacing:.14em} section.blk::before,section.blk::after{top:-30px;height:32px} .guven{padding:28px 0 64px !important} } /* ───────────────────────────────────────────────────────────── 5) ALT BİLGİ · WHATSAPP ───────────────────────────────────────────────────────────── */ .footer-alt{ font-family:var(--body) !important; letter-spacing:0 !important; font-size:.88rem;line-height:1.6;color:#8494ad; padding:26px 24px 30px; border-top:1px solid rgba(255,255,255,.09); align-items:baseline} .footer-alt a{display:inline !important;padding:0 !important; color:#adc0dc !important;border-bottom:1px solid rgba(173,192,220,.32); transition:color .2s,border-color .2s} .footer-alt a:hover{color:#fff !important;border-bottom-color:#fff} /* Kılavuz gezgin sekmesi (sol kenar) — hero metninin üstüne biniyordu. Aşağı alındı, çelik-lacivert dile çekildi ve yalnız ikon olarak duruyor; yazı imleç üstüne gelince açılıyor. */ .kg-dugme{ top:64% !important;gap:0 !important; background:linear-gradient(180deg,#1d2c46,#0e1626) !important; color:#dae5f4 !important; border:1px solid rgba(150,185,235,.26) !important;border-left:0 !important; box-shadow:0 10px 26px -12px rgba(8,14,26,.75) !important; font-family:var(--body) !important;font-weight:600 !important; padding:13px 12px 13px 10px !important} .kg-dugme::after{animation:none !important} .kg-ik{color:#8ec3ff} .kg-yazi{max-width:0;opacity:0;margin-left:0;overflow:hidden; transition:max-width .32s cubic-bezier(.4,0,.2,1),opacity .25s ease,margin-left .32s ease} .kg-dugme:hover .kg-yazi,.kg-dugme:focus-visible .kg-yazi{ max-width:130px;opacity:1;margin-left:9px} .kg-dugme:hover{padding-right:16px !important; border-color:rgba(160,200,255,.44) !important} /* ════════════════════════════════════════════════════════════════════════ HERO — tam ekran koyu sahne Asimetrik iki panel: solda yazı, sağda elektrik deseni üstünde metal çark. Ortalanmış kutu yok, blob yok, cam efekti yok, glow yığını yok; kontrast yazı ölçeğinden ve koyu/açık ayrımından geliyor. ════════════════════════════════════════════════════════════════════════ */ /* Hero'nun zemini SAYDAM: altta sitenin kendi atmosfer katmani (.zemin) duruyor — iç sayfalarda görünen mavi zeminin ta kendisi. Rengi kopyalamak yerine aynı katmanı kullanıyoruz, böylece ileride o değişirse ana sayfa da kendiliğinden ona uyar. */ body:not(.ic-sayfa) .hero{ position:relative;min-height:100svh;padding:0;overflow:hidden; background:transparent;isolation:isolate} body:not(.ic-sayfa) .hero::before{display:none} /* Yazı ve çark tek bir ortalanmış kapta, aralarında dar bir boşluk: ekranın iki ucuna dağılmıyorlar. */ body:not(.ic-sayfa) .hero-ic{ max-width:1320px;margin:0 auto;padding:0 clamp(20px,4vw,56px); gap:clamp(12px,2vw,36px);min-height:100svh; grid-template-columns:minmax(0,46fr) minmax(0,54fr);align-items:center} /* ── Sol panel ── */ body:not(.ic-sayfa) .hero-ic>div:first-child{ display:flex;flex-direction:column;justify-content:center; padding:clamp(92px,13vh,124px) 0 clamp(30px,5vh,48px); background:none;border-right:0} body:not(.ic-sayfa) .hero h1{ text-transform:uppercase; /* Genislik kadar YUKSEKLIGE de bakar: alcak ekranlarda baslik kucululur, boylece metin + dugmeler ilk ekrana sigar. */ font-size:clamp(2rem,min(4.9vw,7vh),4.3rem); line-height:.94;letter-spacing:-.035em;font-weight:800; color:#0b2138;margin:0 0 clamp(.30em,3.2vh,.48em)} body:not(.ic-sayfa) .hero h1 .grad{ font-family:var(--body) !important;font-style:normal !important; font-weight:800 !important;color:#1565c0 !important; -webkit-text-fill-color:#1565c0;background:none;padding-right:.06em} body:not(.ic-sayfa) .hero .lede{ color:#44586f;font-size:clamp(.88rem,min(1.12vw,1.85vh),1.04rem); line-height:1.68;max-width:48ch;margin:0} body:not(.ic-sayfa) .hero .lede b{color:#10263e;font-weight:600} body:not(.ic-sayfa) .hero-cta{margin-top:clamp(18px,3.6vh,44px);gap:12px} /* ── Sol sütun: açıklama, başlık ve düğmeler yukarıdan sırayla düşer ── Hepsi aynı anda dökülmüyor; yalnız slogandaki kelime daktiloyla yazılıp silinir (tasarim-yeni.js heroSlogan). */ body:not(.ic-sayfa) .hero-ic>div:first-child>.gir{ transform:translateY(-22px); animation:solDus .55s cubic-bezier(.2,.9,.25,1) forwards} body:not(.ic-sayfa) .hero-ic>div:first-child>.lede.gir{animation-delay:.2s} body:not(.ic-sayfa) .hero-ic>div:first-child>h1.gir{animation-delay:.06s} body:not(.ic-sayfa) .hero-ic>div:first-child>.hero-cta.gir{animation-delay:.36s} @keyframes solDus{to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){ body:not(.ic-sayfa) .hero-ic>div:first-child>.gir{animation:none;opacity:1;transform:none}} /* Açıklamanın son cümlesi dönüşümlü yazılır (heroSlogan): PPAP, DÖF/8D, APQP, SPC. Göz yormasın diye koyu mavi ve normal boyda; imleç ince. Yazarken imleç sabit, beklerken yanıp söner. */ body:not(.ic-sayfa) .hero .lede .dk-kelime{color:#1565c0;font-weight:600} body:not(.ic-sayfa) .hero .dk-imlec{display:inline-block;width:2px;height:1.05em; margin-left:2px;vertical-align:-.18em;background:#1e88e5; animation:dkImlec 1.1s steps(1,end) infinite} body:not(.ic-sayfa) .hero .dk-kelime.aktif .dk-imlec{animation:none;opacity:1} @keyframes dkImlec{50%{opacity:0}} /* Düğmeler: keskin köşe, ince kenar, gölge yığını yok */ body:not(.ic-sayfa) .hero .btn{border-radius:4px;padding:clamp(11px,1.9vh,16px) 26px; font-size:.94rem;letter-spacing:.01em;box-shadow:none !important} body:not(.ic-sayfa) .hero .btn-b{ background:linear-gradient(135deg,#1e88e5 0%,#0a74da 100%) !important; color:#ffffff !important;font-weight:700} body:not(.ic-sayfa) .hero .btn-b:hover{ background:linear-gradient(135deg,#1976d2 0%,#0660b8 100%) !important;transform:none} body:not(.ic-sayfa) .hero .btn-b::after{display:none} body:not(.ic-sayfa) .hero .btn-hayalet{ background:transparent !important;color:#1565c0 !important; border:1px solid rgba(21,101,192,.34) !important} body:not(.ic-sayfa) .hero .btn-hayalet:hover{ background:rgba(21,101,192,.07) !important;border-color:#1565c0 !important; color:#0d47a1 !important} /* ── Sağ panel: elektrik deseni + çark ── */ /* Sağ panel de saydam: çark sayfanın kendi zemininde duruyor. */ body:not(.ic-sayfa) .hero-gorsel{ position:relative;background:none;display:flex; align-items:center;justify-content:center; padding:clamp(76px,11vh,96px) 0 clamp(44px,8vh,80px)} .hero-elektrik{position:absolute;inset:0;width:100%;height:100%; display:block;z-index:0;pointer-events:none} /* .metal-sar statik kalır: alt künye (.kup-yazi) panele göre konumlansın. Genişlik yüzdesel olamaz — kap kendisi içerikten ölçüldüğü için çöküyordu. */ body:not(.ic-sayfa) .metal-sar{position:static;gap:0; --boy:clamp(260px,min(40vw,70vh),640px)} body:not(.ic-sayfa) .metal-sahne{position:relative;z-index:1;max-width:100%;max-height:none} body:not(.ic-sayfa) .metal-sahne::after{display:none} /* Alt künye — referanstaki başlık bloğunun karşılığı */ body:not(.ic-sayfa) .kup-yazi{ position:absolute;left:50%;bottom:38px;transform:translateX(-50%);z-index:2; background:transparent !important;border:0 !important;box-shadow:none !important; padding:0;font-family:var(--body);font-size:.78rem;letter-spacing:.22em; text-transform:uppercase;color:#7386a0;white-space:nowrap} body:not(.ic-sayfa) .kup-yazi b{ color:#1565c0 !important;font-weight:700;letter-spacing:.14em} /* Sol panel açık olduğu için üst panel varsayılan koyu yazısıyla okunur. Koyu sağ panelin sol kenarında ince bir ışık dikişi var — iki panelin birleşimi kasıtlı görünsün diye. */ /* İki panel arasında keskin çizgi yok: açık panel koyu panele doğru sönümlenerek giriyor, koyu panel de kenarından içeri gölgeleniyor. Böylece birleşim bir kesik değil, bir derinlik geçişi oluyor. */ body:not(.ic-sayfa) .hero-gorsel::before{display:none} /* Sahne derinden geliyormuş gibi: kenarlarda karanlık, ortada açıklık. Sol kenara AYRICA karartma konmuyor — orası dikişin söndüğü yer. */ body:not(.ic-sayfa) .hero-gorsel::after{display:none} /* Derinliği artık vinyet değil, çarkın altındaki yumuşak gölge veriyor */ body:not(.ic-sayfa) .metal-sahne::before{content:"";position:absolute;z-index:0; left:9%;right:9%;bottom:-4%;height:22%;border-radius:50%;pointer-events:none; background:radial-gradient(50% 50% at 50% 50%, rgba(84,100,124,.28) 0%,rgba(84,100,124,.11) 46%,rgba(84,100,124,0) 100%); filter:blur(8px)} /* Sağ paneldeki çark ve yazılar en üst katmanda dursun */ body:not(.ic-sayfa) .metal-sahne{z-index:4;will-change:transform} body:not(.ic-sayfa) .kup-yazi{z-index:5} @media(max-width:900px){ body:not(.ic-sayfa) .hero-ic{grid-template-columns:1fr;min-height:0} body:not(.ic-sayfa) .hero{min-height:0} body:not(.ic-sayfa) .hero-ic>div:first-child{ padding:112px 0 48px;border-right:0; border-bottom:1px solid rgba(100,181,246,.14);order:2} body:not(.ic-sayfa) .hero-gorsel{order:1;min-height:66svh;padding:88px 0 76px} body:not(.ic-sayfa) .metal-sar{--boy:min(88vw,420px)} } /* ════════════════════════════════════════════════════════════════════════ MODÜLLER: Babtec kart diline uyarlanmış karo ızgara Sıkı karo düzeni (üç sütun, ince aralık, keskin köşe); karonun zemininde izometrik çizgi dokusu, sağ üstte modülün çizimi (modul_gorsel.py), sol altta başlık, tek cümle ve "İncele". Renkler Babtec'in siyahı ve turuncusu değil: sitenin açık zemini, laciverti ve teknoloji mavisi. Kaydırdıkça sıralı beliriş (modulSirasi) ve canlı zemin (modArka) sürüyor. ════════════════════════════════════════════════════════════════════════ */ section.blk.blk-moduller{background:transparent} section.blk.blk-moduller .merkez .usta{color:#1e88e5 !important} .mod-alan{position:relative} #modArka{position:absolute;top:-56px;bottom:-56px;left:50%;width:100vw; transform:translateX(-50%);z-index:0;pointer-events:none} .mod-izgara{position:relative;z-index:1;display:grid;gap:8px;margin-top:52px; grid-template-columns:repeat(3,minmax(0,1fr));perspective:1300px} @media(max-width:1000px){.mod-izgara{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:600px){.mod-izgara{grid-template-columns:1fr}} .mod-kart{position:relative;display:flex;flex-direction:column;justify-content:flex-end; min-height:276px;padding:24px 26px 22px;border-radius:2px;overflow:hidden; isolation:isolate; background:linear-gradient(162deg,#ffffff 0%,#f4f9ff 58%,#e9f3fe 100%) !important; border:1px solid #d4e5f7 !important;box-shadow:none !important; transition:transform .62s cubic-bezier(.16,.9,.24,1),border-color .35s ease, background .45s ease,opacity .5s ease} /* Zemin: izometrik üçgen ağı; yazının durduğu sol alta doğru söner */ .mod-kart::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='41.569' height='24' viewBox='0 0 41.569 24'%3E%3Cpath d='M0 0V24M20.785 0V24M0 0L41.569 24M0 24L41.569 0' fill='none' stroke='%231e88e5' stroke-opacity='.16' stroke-width='.7'/%3E%3C/svg%3E"); background-size:41.569px 24px; -webkit-mask-image:linear-gradient(208deg,#000 0%,rgba(0,0,0,.6) 42%,transparent 80%); mask-image:linear-gradient(208deg,#000 0%,rgba(0,0,0,.6) 42%,transparent 80%)} /* Sağ üstte modülün izometrik çizimi */ .mk-gorsel{position:absolute;top:4px;right:2px;z-index:0;width:58%;max-width:250px;transform-origin:70% 40%; pointer-events:none;transition:transform .55s cubic-bezier(.2,.8,.25,1)} .mk-gorsel svg{display:block;width:100%;height:auto} .mod-kart h3{position:relative;z-index:2;margin:0 0 6px;max-width:90%; font-size:clamp(1.1rem,1.3vw,1.3rem);line-height:1.22;letter-spacing:-.02em; color:#0d2b4d;transition:color .3s ease} .mod-kart>p{position:relative;z-index:2;margin:0;max-width:94%; color:#51617a;font-size:.885rem;line-height:1.5} section.blk .mod-kart .git{position:relative;z-index:2;align-self:flex-start;margin-top:12px; font-size:.9rem;font-weight:700;color:#0d2b4d; transition:color .3s ease,transform .35s ease} /* Hover (Babtec'teki gibi): karonun üstüne SOLDAN SAĞA buğulu açık mavi bir perde kayar. Çizim hafifçe büyüyüp perdenin arkasında kalır; yazılar perdenin üstünde koyulaşıp öne çıkar. */ .mod-kart::after{content:"";position:absolute;top:0;left:-100%;z-index:1; width:100%;height:100%;pointer-events:none;opacity:0; background:linear-gradient(100deg,rgba(210,232,255,.92) 0%,rgba(224,240,254,.86) 58%, rgba(234,245,255,.8) 100%); -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px); transition:left .32s cubic-bezier(.3,.7,.2,1),opacity .32s ease} .mod-kart:hover::after,.mod-kart:focus-visible::after{left:0;opacity:1} .mod-kart:hover,.mod-kart:focus-visible{outline:none;border-color:#64b5f6 !important} .mod-kart:hover .mk-gorsel,.mod-kart:focus-visible .mk-gorsel{transform:scale(1.06)} .mod-kart:hover h3,.mod-kart:focus-visible h3{color:#062a52} .mod-kart:hover>p,.mod-kart:focus-visible>p{color:#26384f} section.blk .mod-kart:hover .git{color:#1565c0;transform:translateX(4px)} /* İKİ AŞAMA: önce karo ve çizimi hafifçe belirir, hemen ardından yazılar yukarıdan düşer. Yalnız betik çalışıyorsa. */ .js-sira .mod-izgara .mod-kart{opacity:0;transform-origin:50% 0; transform:translateY(-26px) rotateX(-11deg) scale(.98)} .js-sira .mod-izgara .mod-kart.acik{opacity:.55;transform:none} .js-sira .mod-izgara .mod-kart.yazili{opacity:1} .js-sira .mod-izgara .mod-kart > :not(.mk-gorsel){opacity:0;transform:translateY(-13px); transition:opacity .42s ease,transform .5s cubic-bezier(.16,.9,.24,1),color .3s ease} .js-sira .mod-izgara .mod-kart.yazili > :not(.mk-gorsel){opacity:1;transform:none} .js-sira .mod-izgara .mod-kart.yazili > h3{transition-delay:.02s} .js-sira .mod-izgara .mod-kart.yazili > p{transition-delay:.09s} .js-sira .mod-izgara .mod-kart.yazili > .git{transition-delay:.16s} .js-sira .mod-izgara .mod-kart.yazili:hover > .git{transform:translateX(4px);transition-delay:0s} @media(prefers-reduced-motion:reduce){ .mod-kart,.mk-gorsel,.mod-kart .git{transition-duration:.15s} .js-sira .mod-izgara .mod-kart, .js-sira .mod-izgara .mod-kart > *{opacity:1;transform:none} } /* ════════════════════════════════════════════════════════════════════════ SIK SORULANLAR: solda sabit başlık, sağda kayan sorular Sayfa kaydıkça sol sütundaki başlık yerinde kalır (ekranda aşağı iner gibi görünür), sağdaki sorular sorular bitene kadar akar. Sorular numaralı, aralarında ince çizgi; kutu, gölge ve yuvarlak köşe yok. ════════════════════════════════════════════════════════════════════════ */ .sss-duzen{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(28px,6vw,96px);align-items:start;margin-top:8px} .sss-sol{align-self:stretch} .sss-yapisan{position:sticky;top:clamp(96px,16vh,150px);text-align:left} .sss-yapisan h2{font-size:clamp(2.1rem,3.6vw,3.2rem);line-height:1.08;margin:.3em 0 0} .sss-yapisan h2 .grad{color:#1e88e5} section.blk .sss.sss-sag{max-width:none;margin:0;display:block;gap:0;counter-reset:soru; border-top:1px solid rgba(27,58,92,.12)} section.blk .sss-sag details{counter-increment:soru;background:transparent !important; border:0 !important;border-bottom:1px solid rgba(27,58,92,.12) !important; border-radius:0 !important;box-shadow:none !important;padding:0 !important} section.blk .sss-sag summary{display:grid;grid-template-columns:3.2em minmax(0,1fr) auto; align-items:baseline;gap:0;padding:26px 4px 26px 0; font-size:clamp(1rem,1.25vw,1.12rem);font-weight:600;color:#0e1f33;transition:color .25s ease} section.blk .sss-sag summary::before{content:counter(soru,decimal-leading-zero); font-size:.78rem;font-weight:600;letter-spacing:.06em;color:#8a98ab; font-variant-numeric:tabular-nums} section.blk .sss-sag summary::after{content:"+";font-family:var(--body);font-weight:300; font-size:1.5rem;line-height:1;color:#7d8ba0;transition:transform .25s ease,color .25s ease} section.blk .sss-sag details[open] summary::after{transform:rotate(45deg);color:#1e88e5} section.blk .sss-sag summary:hover{color:#1565c0} section.blk .sss-sag summary:hover::after{color:#1e88e5} section.blk .sss-sag .cvp{padding:0 2.4em 26px 3.2em;color:#4a5a70;line-height:1.72} @media(max-width:860px){ .sss-duzen{grid-template-columns:1fr;gap:28px} .sss-yapisan{position:static} } /* ════════════════════════════════════════════════════════════════════════ SEKTÖR KAROLARI: modül karolarıyla aynı dil. "İncele" ve perde yok; imleç gelince yalnız kenar maviye döner, görsel hafifçe büyür. ════════════════════════════════════════════════════════════════════════ */ .blk-sektor .grid.g3{gap:8px} section.blk .grid .sektor{position:relative !important;display:flex !important; flex-direction:column;justify-content:flex-end;min-height:276px; padding:24px 26px 22px !important;border-radius:2px !important;overflow:hidden;isolation:isolate; background:linear-gradient(162deg,#ffffff 0%,#f4f9ff 58%,#e9f3fe 100%) !important; border:1px solid #d4e5f7 !important;box-shadow:none !important;transform:none !important; transition:border-color .3s ease !important} section.blk .grid .sektor::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='41.569' height='24' viewBox='0 0 41.569 24'%3E%3Cpath d='M0 0V24M20.785 0V24M0 0L41.569 24M0 24L41.569 0' fill='none' stroke='%231e88e5' stroke-opacity='.16' stroke-width='.7'/%3E%3C/svg%3E");background-size:41.569px 24px; -webkit-mask-image:linear-gradient(208deg,#000 0%,rgba(0,0,0,.6) 42%,transparent 80%); mask-image:linear-gradient(208deg,#000 0%,rgba(0,0,0,.6) 42%,transparent 80%)} section.blk .grid .sektor .ik{display:none !important} section.blk .grid .sektor h3{position:relative;z-index:2;margin:0 0 6px;max-width:90%; font-size:clamp(1.1rem,1.3vw,1.3rem);line-height:1.22;letter-spacing:-.02em;color:#0d2b4d} section.blk .grid .sektor p{position:relative;z-index:2;margin:0;max-width:94%; color:#51617a;font-size:.885rem;line-height:1.5} section.blk .grid .sektor:hover,section.blk .grid .sektor:focus-visible{ border-color:#64b5f6 !important;box-shadow:none !important;transform:none !important;outline:none} section.blk .grid .sektor:hover .mk-gorsel{transform:scale(1.04)} @media(max-width:1000px){.blk-sektor .grid.g3{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:600px){.blk-sektor .grid.g3{grid-template-columns:1fr}} /* ════════════════════════════════════════════════════════════════════════ KAYNAK KARTLARI: editoryal kart. Üstte konuya ait arayüz kesiti ve kategori, altta başlık, özet ve tür; okuma süresi yok. ════════════════════════════════════════════════════════════════════════ */ .blk-kaynak .grid.g3{gap:14px} section.blk .blog-k{display:flex !important;flex-direction:column;overflow:hidden; border-radius:3px !important;background:#ffffff !important;border:1px solid #d4e5f7 !important; box-shadow:none !important;transform:none !important;transition:border-color .3s ease !important} section.blk .blog-k .gorsel{position:relative;height:auto !important;aspect-ratio:16/9; display:flex;align-items:center;justify-content:center;overflow:hidden; background:linear-gradient(160deg,#f6faff 0%,#e7f1fd 100%) !important;border-bottom:1px solid #e1ecf7} section.blk .blog-k .gorsel .kapak{width:74%;height:auto;display:block; transition:transform .5s cubic-bezier(.2,.8,.25,1)} section.blk .blog-k .gorsel .rz{position:absolute;left:14px;top:12px;z-index:1; font-size:.66rem;font-weight:700;letter-spacing:.14em;color:#1565c0 !important; background:rgba(255,255,255,.92) !important;border:1px solid #cfe3f8;padding:4px 8px;border-radius:2px} section.blk .blog-k .ic{padding:20px 22px 22px} section.blk .blog-k h3{font-size:1.08rem;line-height:1.3;color:#0d2b4d;margin:0 0 8px} section.blk .blog-k p{color:#51617a;font-size:.9rem;line-height:1.55;margin:0} section.blk .blog-k .meta{margin-top:14px;font-size:.7rem;font-weight:700;letter-spacing:.12em; text-transform:uppercase;color:#7b8ba0} section.blk .blog-k:hover,section.blk .blog-k:focus-visible{border-color:#64b5f6 !important; box-shadow:none !important;transform:none !important;outline:none} section.blk .blog-k:hover .kapak{transform:scale(1.04)} section.blk .blog-k:hover h3{color:#0b3f78} /* ════════════════════════════════════════════════════════════════════════ BULUT ve RAPOR panelleri: boş kutu yerine ürün ekranı. Canlı panel ölçüleri 2x2 kutucukta, her birinin yanında eğilim çizgisi; rapor panelinin başında PDF rapor önizlemesi, standartlar onaylı etiket. ════════════════════════════════════════════════════════════════════════ */ section.blk .cam-kart{background:#ffffff !important;border:1px solid #d4e5f7 !important; border-radius:3px !important;box-shadow:none !important;padding:22px !important;color:#0d2b4d} section.blk .cam-kart>.usta{color:#1565c0 !important} .blk-bulut .cam-kart>.usta::after{content:"";width:7px;height:7px;border-radius:50%; background:#2fb67c;margin-left:4px} section.blk .cam-kart .gauge{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} section.blk .cam-kart .gauge .satir{display:grid !important;grid-template-columns:minmax(0,1fr) auto; align-items:end;gap:10px 8px;margin:0 !important;padding:14px 14px 12px !important; background:linear-gradient(180deg,#fbfdff,#f1f7fe) !important;border:1px solid #e0ebf6 !important; border-radius:3px} section.blk .cam-kart .gauge .satir span{grid-column:1/-1;color:#5b6b80 !important;font-size:.8rem;line-height:1.3} section.blk .cam-kart .gauge .satir b{color:#0d2b4d !important;font-size:clamp(1.5rem,2.2vw,1.95rem); line-height:1;font-weight:800;letter-spacing:-.02em} section.blk .cam-kart .gauge .satir b[style*="f0a35a"]{color:#d97a1f !important} section.blk .cam-kart .gauge .satir b[style*="7fa6ff"]{color:#1565c0 !important} section.blk .cam-kart .gauge .satir .spark{width:72px;height:20px;display:block} .rapor-gorsel{display:flex;justify-content:center;margin:0 0 18px;padding:14px 10px 4px; background:linear-gradient(160deg,#f7fbff,#e9f2fc);border:1px solid #e0ebf6;border-radius:3px} .rapor-gorsel svg{width:62%;max-width:260px;height:auto;display:block} section.blk .cam-kart .etiket.std{position:relative;background:#f5f9ff !important; border:1px solid #cfe0f2 !important;color:#0d2b4d !important;border-radius:2px !important; font-weight:600;font-size:.8rem;padding:6px 10px 6px 24px !important} section.blk .cam-kart .etiket.std::before{content:"";position:absolute;left:9px;top:50%; width:8px;height:4px;border-left:1.6px solid #1e88e5;border-bottom:1.6px solid #1e88e5; transform:translateY(-70%) rotate(-45deg)} section.blk .cam-kart p{color:#51617a !important} /* Cevabı henüz yazılmamış soru açılınca boş kutu göstermesin */ section.blk .sss-sag .cvp:empty{display:none} /* ════════════════════════════════════════════════════════════════════════ TASARIM İNCELEMESİ DÜZELTMELERİ (2026-09-15) 1) Her başlıkta bir italik serif kelime: şablon izi. Vurgu artık aynı yazı tipinde, yalnız renkle. 2) Bölümler ayrı ayrı renklenmişti (camgöbeği, çivit, arduvaz): tek renk ailesine (lacivert + teknoloji mavisi) indirildi. 3) "Neden PaKalite" kartları: yuvarlak köşe + gölge + ikon kutusu, tipik şablon kartı. Karo diline alındı, ikon çıplak ve küçük. 4) Liste ikonları gri kutu içindeydi; çıplak, ince, mavi. 5) Canlı panel sayıları başlık serif yazı tipindeydi; gövde yazısı, eşit genişlikli rakam. ════════════════════════════════════════════════════════════════════════ */ h1 .grad,h2 .grad,h3 .grad,.grad{font-family:var(--body) !important; font-style:normal !important;font-weight:inherit !important;letter-spacing:inherit !important} section.blk .grad,.sss-yapisan h2 .grad{color:#1e88e5 !important} .blk-neden,.blk-moduller,.blk-bulut,.blk-rapor,.blk-sektor,.blk-kaynak,.blk-sss{ --sc:#1565c0;--sc2:#64b5f6} section.blk .btn-hayalet{color:#0d2b4d !important;border-color:#bcd3ea !important; background:rgba(255,255,255,.7) !important;border-radius:3px !important;box-shadow:none !important} section.blk .btn-hayalet:hover{color:#1565c0 !important;border-color:#64b5f6 !important; background:#ffffff !important;transform:none !important} .blk-neden .grid.g3{gap:8px} section.blk .blk-neden .kart,.blk-neden .grid .kart{border-radius:2px !important;box-shadow:none !important; transform:none !important;padding:28px 26px 26px !important;min-height:210px; background:linear-gradient(162deg,#ffffff 0%,#f4f9ff 58%,#e9f3fe 100%) !important; border:1px solid #d4e5f7 !important;transition:border-color .3s ease !important} .blk-neden .grid .kart:hover{border-color:#64b5f6 !important;box-shadow:none !important;transform:none !important} .blk-neden .grid .kart>.ik{width:auto !important;height:auto !important;background:none !important; border:0 !important;box-shadow:none !important;color:#1e88e5 !important; display:block !important;margin:0 0 22px !important} .blk-neden .grid .kart>.ik svg{width:26px !important;height:26px !important;stroke-width:1.5} .blk-neden .grid .kart h3{color:#0d2b4d;font-size:1.18rem;letter-spacing:-.015em;margin:0 0 8px} .blk-neden .grid .kart p{color:#51617a;font-size:.92rem;line-height:1.6} section.blk .mini-liste .ik{width:auto !important;height:auto !important;background:none !important; border:0 !important;border-radius:0 !important;color:#1e88e5 !important;padding-top:2px} section.blk .mini-liste .ik svg{width:20px !important;height:20px !important;stroke-width:1.6} section.blk .mini-liste li{border-top-color:rgba(27,58,92,.1) !important} section.blk .cam-kart .gauge .satir b{font-family:var(--body) !important; font-variant-numeric:tabular-nums;font-style:normal !important} /* ── /kurulum sayfası: "İndirme başladı" rozeti yerine dönen metal çark ── Okunacak bir cümle yerine, dosya inerken dönen bir çark. Ana sayfadaki dişliyle aynı profil ve aynı çelik tonları. */ .kur-carki{display:block;margin:0 auto 26px;width:clamp(96px,15vw,132px)} .kur-carki svg{width:100%;height:auto;display:block; animation:kurDon 3.6s linear infinite; filter:drop-shadow(0 16px 28px rgba(18,30,52,.35))} @keyframes kurDon{to{transform:rotate(360deg)}} @media(prefers-reduced-motion:reduce){.kur-carki svg{animation-duration:14s}} /* ───────────────────────────────────────────────────────────── 6) KILAVUZ GÖRSELLERİ — numaralı işaretçiler artık etkileşimli Eskiden görselin altında uzun bir numaralı liste vardı; okuyucu görselde gördüğü sayıyı listede aramak zorundaydı. Artık işaretçinin üstüne gelmek (veya klavyeyle odaklanmak) açıklamayı görselin hemen altındaki kutuda gösteriyor. Liste kaldırılmadı — metinleri kutunun içine taşındı. ───────────────────────────────────────────────────────────── */ /* İşaretçiler ekran görüntüsünün üstünde durduğu için turuncu kalıyor: mavi bir nokta, mavi ağırlıklı arayüz görüntüsünde kaybolurdu. Ton biraz koyulaştırılıp sitenin geri kalanıyla barıştırıldı. */ .kv-isaret{cursor:help;background:#d9722f !important; border:2px solid #fff !important;font-family:var(--body) !important; box-shadow:0 2px 8px rgba(16,26,46,.45) !important; transition:transform .2s cubic-bezier(.2,.8,.3,1),box-shadow .25s ease, background .2s ease,opacity .2s ease} .kv-isaret:hover,.kv-isaret:focus-visible,.kv-isaret.etkin{ transform:translate(-108%,-108%) scale(1.3); background:#c15f1d !important;outline:none;z-index:6; box-shadow:0 4px 14px rgba(16,26,46,.5),0 0 0 6px rgba(217,114,47,.24) !important} /* Artık tıklanacak öge işaretçiler; görsele gelince solmasınlar */ .kv-gorsel:hover .kv-isaret{opacity:1} .kv-gorsel:hover .kv-cerceve{opacity:.55} .kv-gorsel .buyut{font-family:var(--body);font-weight:600; background:rgba(14,22,38,.86);border:1px solid rgba(255,255,255,.2)} /* Sol menünün altındaki üç satır için EK işaretçiler — numaralı turuncu dizinin parçası olmadıkları için harfli ve MAVİ. */ .kv-isaret.kv-ek{background:#2f6fc4 !important} .kv-isaret.kv-ek:hover,.kv-isaret.kv-ek:focus-visible,.kv-isaret.kv-ek.etkin{ background:#1f5099 !important; box-shadow:0 4px 14px rgba(16,26,46,.5),0 0 0 6px rgba(47,111,196,.26) !important} .kv-dikkat .kv-isaret.kv-ek{animation-name:kvDikkatMavi} @keyframes kvDikkatMavi{ 0%{box-shadow:0 2px 8px rgba(16,26,46,.45),0 0 0 0 rgba(47,111,196,.6)} 70%{box-shadow:0 2px 8px rgba(16,26,46,.45),0 0 0 12px rgba(47,111,196,0)} 100%{box-shadow:0 2px 8px rgba(16,26,46,.45),0 0 0 0 rgba(47,111,196,0)}} .kv-balon.mavi{border-color:rgba(125,178,255,.44)} .kv-balon.mavi .kv-no{background:#2f6fc4} /* Baloncuğun başındaki numara rozeti */ .kv-no{display:inline-flex;align-items:center;justify-content:center;flex:none; width:23px;height:23px;border-radius:999px;background:#d9722f;color:#fff; font-family:var(--body);font-size:.76rem;font-weight:700; margin-right:9px;vertical-align:-4px} /* Açıklama baloncuğu — işaretçinin tam yanında belirir; görselin dışına taşmamak için kendini sağa/sola, yukarı/aşağı çevirir. Fotoğrafın altında artık hiçbir yazı yok. */ .kv-gorsel{overflow:visible} .kv-balon{position:absolute;z-index:8;width:min(330px,84%); padding:13px 16px;border-radius:13px;pointer-events:none; background:linear-gradient(180deg,rgba(23,37,62,.975),rgba(11,19,34,.985)); border:1px solid rgba(150,185,235,.30); box-shadow:0 24px 48px -20px rgba(6,12,24,.88),inset 0 1px 0 rgba(255,255,255,.10); color:#d3e0f1;font-family:var(--body);font-size:.9rem;line-height:1.56; opacity:0;visibility:hidden;transform:translateY(5px) scale(.986); transition:opacity .18s ease,transform .22s cubic-bezier(.2,.8,.3,1), visibility .18s} .kv-balon.acik{opacity:1;visibility:visible;transform:none} .kv-balon b{color:#ffffff;font-weight:700} .kv-balon .kv-no{transform:translateY(2px)} /* İşaretçiler ilk görünüşte kendini belli etsin — üç kısa halka, sonra sussun */ .kv-dikkat .kv-isaret{animation:kvDikkat 1.05s ease-out 3} @keyframes kvDikkat{ 0%{box-shadow:0 2px 8px rgba(16,26,46,.45),0 0 0 0 rgba(217,114,47,.55)} 70%{box-shadow:0 2px 8px rgba(16,26,46,.45),0 0 0 12px rgba(217,114,47,0)} 100%{box-shadow:0 2px 8px rgba(16,26,46,.45),0 0 0 0 rgba(217,114,47,0)}} @media(prefers-reduced-motion:reduce){.kv-dikkat .kv-isaret{animation:none}} @media(max-width:700px){.kv-balon{width:min(280px,90%);font-size:.85rem}} /* ───────────────────────────────────────────────────────────── 7) İNDİRME PERDESİ — "Uygulamayı İndir"e basınca Metin yerine dönen bir dişli: dosya hazırlanırken ekranda anlamlı bir şey olsun, ama okunacak bir cümle olmasın. ───────────────────────────────────────────────────────────── */ .indir-perde{position:fixed;inset:0;z-index:2000;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:30px;opacity:0; background:radial-gradient(62% 52% at 50% 42%,rgba(26,40,70,.92),rgba(8,14,26,.97)); -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px); transition:opacity .32s ease} .indir-perde.acik{opacity:1} .indir-carki{width:clamp(120px,22vw,168px);height:clamp(120px,22vw,168px); animation:indirDon 3.6s linear infinite; filter:drop-shadow(0 20px 38px rgba(0,0,0,.6))} @keyframes indirDon{to{transform:rotate(360deg)}} @media(prefers-reduced-motion:reduce){.indir-carki{animation-duration:12s}} .indir-kapat{position:absolute;top:22px;right:24px;width:42px;height:42px; border-radius:12px;background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);color:#dbe6f5;font-size:21px; line-height:1;cursor:pointer;transition:background .2s,color .2s} .indir-kapat:hover{background:rgba(255,255,255,.16);color:#fff} .indir-yedek{opacity:0;pointer-events:none;transition:opacity .5s ease; font-family:var(--body);font-size:.92rem;color:#9fb0d0;text-align:center} .indir-yedek.gorunur{opacity:1;pointer-events:auto} .indir-yedek a{color:#a9d4ff;border-bottom:1px solid rgba(169,212,255,.42)} .indir-yedek a:hover{color:#fff;border-bottom-color:#fff} /* WhatsApp destek düğmesi — parlak yeşil kapsül ve atan gölge, sitenin çelik-lacivert diliyle çakışıyordu. Kapsül lacivert oldu; WhatsApp yeşili yalnız logoda kaldı, böylece ne olduğu hâlâ ilk bakışta anlaşılıyor. */ .wa-dugme{ animation:none !important; background:linear-gradient(180deg,#1d2c46,#0e1626) !important; color:#dae5f4 !important; border:1px solid rgba(150,185,235,.26); box-shadow:0 10px 26px -12px rgba(8,14,26,.8), inset 0 1px 0 rgba(255,255,255,.10) !important; font-family:var(--body) !important;font-weight:600 !important; font-size:.9rem !important;padding:11px 18px 11px 13px !important} .wa-dugme:hover{ transform:translateY(-2px); border-color:rgba(160,200,255,.44); box-shadow:0 16px 34px -14px rgba(8,14,26,.9), inset 0 1px 0 rgba(255,255,255,.16) !important} .wa-ikon{color:#3fd07d} .wa-ikon svg{width:24px;height:24px} .wa-balon{background:linear-gradient(180deg,#1b2941,#101a2c) !important; border:1px solid rgba(150,185,235,.22) !important; box-shadow:0 26px 54px -26px rgba(6,12,24,.9) !important; border-radius:16px !important} .wa-balon::after{border-top-color:#101a2c !important} .wa-balon-bas{color:#eaf2ff !important;font-family:var(--body)} .wa-balon-metin{color:#a3b4cd !important} .wa-balon-cta{color:#7fc9a4 !important} .wa-balon-kapat{color:#7f8ea6 !important} .wa-balon-kapat:hover{color:#fff !important} .wa-nokta{background:#3fd07d !important;box-shadow:0 0 0 3px rgba(63,208,125,.18) !important} /* ════════════════════════════════════════════════════════════════════════ MARKA SİSTEMİ (2026-09-15) Renk: ana Muayene Mavisi #1565c0 bağlantı, birincil düğme, işaret nötr Grafit #15202b / Kağıt #f3f4f1 yazı / zemin vurgu Sinyal Turuncusu #b45a0c yalnız uyarı ve kritik işaret Font: başlık Fraunces (dik, 600) · gövde Hanken Grotesk Boşluk: 8 tabanlı ölçek 8/16/24/32/48/64/96 (--s1…--s7); aşağıdaki her dolgu, aralık ve kenar payı bu değişkenlerden gelir. Kapsam: yalnız ana sayfa (body:not(.ic-sayfa)); iç sayfalar etkilenmez. ════════════════════════════════════════════════════════════════════════ */ :root{ --m-ana:#1565c0;--m-ana-koyu:#0f4f99;--m-ana-acik:#e8f1fb; --m-grafit:#15202b;--m-yazi2:#434e5b;--m-soluk:#5c6773;--m-kagit:#f3f4f1; --m-vurgu:#b45a0c; --m-cizgi:rgba(21,32,43,.12);--m-cizgi-ana:rgba(21,101,192,.45); --m-golge:0 24px 40px -32px rgba(21,101,192,.45); --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:48px;--s6:64px;--s7:96px; --f-bas:"Fraunces",Georgia,"Times New Roman",serif; } /* ── Zemin: düz kağıt tonu. Degrade, ızgara, doku yok ── */ body:not(.ic-sayfa){background:var(--m-kagit) !important;color:var(--m-yazi2)} body:not(.ic-sayfa) .zemin{background:var(--m-kagit) !important} body:not(.ic-sayfa) .zemin-izgara{display:none !important} body:not(.ic-sayfa) section.blk::before{background:var(--m-cizgi) !important;opacity:1; top:0 !important;height:1px !important} /* ── Tipografi: tek başlık fontu, gerçek hiyerarşi ── */ body:not(.ic-sayfa) h1,body:not(.ic-sayfa) h2, body:not(.ic-sayfa) section.blk h3,body:not(.ic-sayfa) .sss-yapisan h2{ font-family:var(--f-bas) !important;font-weight:600 !important; font-variation-settings:"opsz" 72;color:var(--m-grafit);text-transform:none !important; word-spacing:.04em} body:not(.ic-sayfa) .hero h1{font-size:clamp(2.75rem,min(5vw,7.4vh),4.5rem) !important; line-height:1.02 !important;letter-spacing:-.022em !important;margin:0 0 var(--s3) !important; color:var(--m-grafit) !important} body:not(.ic-sayfa) section.blk h2,body:not(.ic-sayfa) .sss-yapisan h2{ font-size:clamp(2rem,3.3vw,2.875rem) !important;line-height:1.08 !important; letter-spacing:-.018em !important;margin:0 !important} /* Yan yana bölümlerde (bulut, rapor) başlıkla açıklama arası: ölçekten 16px */ body:not(.ic-sayfa) section.blk .split .metin h2{margin:0 0 var(--s2) !important} body:not(.ic-sayfa) section.blk .split .metin .lede{margin:0 !important} body:not(.ic-sayfa) section.blk .split .metin .mini-liste{margin-top:var(--s3) !important} body:not(.ic-sayfa) section.blk h3{font-size:1.25rem !important;line-height:1.25 !important; letter-spacing:-.01em !important;font-variation-settings:"opsz" 24} /* Vurgu kelimesi yok: renk, yazı tipi, eğiklik tamamen başlığa eşit */ body:not(.ic-sayfa) .grad,body:not(.ic-sayfa) h1 .grad,body:not(.ic-sayfa) h2 .grad, body:not(.ic-sayfa) section.blk .grad,body:not(.ic-sayfa) .sss-yapisan h2 .grad, body:not(.ic-sayfa) .hero h1 .grad{ color:inherit !important;-webkit-text-fill-color:currentColor !important;background:none !important; font:inherit !important;font-style:normal !important;letter-spacing:inherit !important;padding:0 !important} body:not(.ic-sayfa) .usta{color:var(--m-ana) !important;margin-bottom:var(--s2) !important; font-family:var(--body) !important;font-size:.75rem !important;letter-spacing:.16em !important} body:not(.ic-sayfa) .usta::before{width:var(--s3) !important} /* ── Hero ── */ body:not(.ic-sayfa) .hero-ust{display:block;font-size:.8125rem;font-weight:600;letter-spacing:.14em; text-transform:uppercase;color:var(--m-ana);margin:0 0 var(--s2)} body:not(.ic-sayfa) .hero .lede{font-size:clamp(1.0625rem,min(1.28vw,2.2vh),1.25rem) !important; line-height:1.6 !important;color:var(--m-yazi2) !important;max-width:46ch !important;margin:0 !important} body:not(.ic-sayfa) .hero .lede b{color:var(--m-grafit) !important;font-weight:600} body:not(.ic-sayfa) .hero .lede .dk-kelime{color:#5c6773 !important;font-weight:400 !important} body:not(.ic-sayfa) .hero .dk-imlec{background:#8a939d !important;width:1px !important} body:not(.ic-sayfa) .hero-cta{margin-top:var(--s4) !important;gap:var(--s3) !important;align-items:center} body:not(.ic-sayfa) .hero .btn-b{padding:var(--s2) var(--s3) !important;border-radius:2px !important; background:var(--m-ana) !important;box-shadow:none !important} body:not(.ic-sayfa) .hero .btn-b:hover{background:var(--m-ana-koyu) !important;box-shadow:var(--m-golge) !important} /* İkinci eylem kutulu düğme değil, çizgili bağlantı: "başlık+alt+2 düğme" kalıbı kırılır */ body:not(.ic-sayfa) .hero .btn-hayalet{background:none !important;border:0 !important; padding:var(--s1) 0 !important;color:var(--m-grafit) !important;border-radius:0 !important; box-shadow:inset 0 -1px 0 var(--m-cizgi) !important;transition:box-shadow .25s ease,color .25s ease} body:not(.ic-sayfa) .hero .btn-hayalet::after{content:"→";margin-left:var(--s1);display:inline-block; transition:transform .25s ease} body:not(.ic-sayfa) .hero .btn-hayalet:hover{color:var(--m-ana) !important; box-shadow:inset 0 -2px 0 var(--m-ana) !important} body:not(.ic-sayfa) .hero .btn-hayalet:hover::after{transform:translateX(4px)} /* ── Bölüm aralıkları: ölçekten, hiyerarşiye göre ── */ body:not(.ic-sayfa) section.blk{padding:var(--s7) 0 !important} body:not(.ic-sayfa) section.blk.blk-sektor,body:not(.ic-sayfa) section.blk.blk-kaynak{padding:var(--s6) 0 var(--s7) !important} @media(max-width:760px){body:not(.ic-sayfa) section.blk{padding:var(--s6) 0 !important}} /* ── Bölüm başlıkları: ortalanmış blok yerine kırık simetri solda üst etiket + başlık (7 birim), sağda açıklama (5 birim) ── */ body:not(.ic-sayfa) section.blk .merkez:has(>h2){display:grid !important; grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:var(--s5);row-gap:0; text-align:left !important;max-width:none !important;margin:0 !important} body:not(.ic-sayfa) section.blk .merkez:has(>h2)>.usta{grid-column:1;grid-row:1;justify-self:start} body:not(.ic-sayfa) section.blk .merkez:has(>h2)>h2{grid-column:1;grid-row:2} body:not(.ic-sayfa) section.blk .merkez:has(>h2)>.lede{grid-column:2;grid-row:1/3;align-self:end; margin:0 !important;max-width:none !important;font-size:1.0625rem !important;line-height:1.6;color:var(--m-yazi2) !important} body:not(.ic-sayfa) section.blk .merkez:not(:has(>h2)){text-align:left !important} @media(max-width:860px){ body:not(.ic-sayfa) section.blk .merkez:has(>h2){grid-template-columns:1fr;row-gap:var(--s2)} body:not(.ic-sayfa) section.blk .merkez:has(>h2)>.lede{grid-column:1;grid-row:3} } /* ── Kartlar: kenarlık ve gölge markadan türer, hepsinin hover'ı var ── */ body:not(.ic-sayfa) .mod-kart,body:not(.ic-sayfa) section.blk .grid .sektor, body:not(.ic-sayfa) section.blk .blog-k,body:not(.ic-sayfa) section.blk .cam-kart{ background:#ffffff !important;border:1px solid var(--m-cizgi) !important;box-shadow:none !important} body:not(.ic-sayfa) .mod-kart{padding:var(--s3) var(--s3) var(--s3) !important} body:not(.ic-sayfa) .mod-kart:hover,body:not(.ic-sayfa) section.blk .grid .sektor:hover, body:not(.ic-sayfa) section.blk .blog-k:hover{border-color:var(--m-cizgi-ana) !important; box-shadow:var(--m-golge) !important} body:not(.ic-sayfa) .mod-kart>p,body:not(.ic-sayfa) section.blk .grid .sektor p, body:not(.ic-sayfa) section.blk .blog-k p{color:var(--m-soluk) !important} body:not(.ic-sayfa) .mod-izgara{gap:var(--s1) !important;margin-top:var(--s5) !important} body:not(.ic-sayfa) section.blk .mod-kart .git{color:var(--m-grafit) !important} body:not(.ic-sayfa) section.blk .mod-kart:hover .git{color:var(--m-ana) !important} /* ── Sektörler: bir büyük + iki küçük (kırık simetri) ── */ body:not(.ic-sayfa) .blk-sektor .grid.g3{grid-template-columns:minmax(0,7fr) minmax(0,5fr) !important; grid-auto-rows:minmax(248px,auto);gap:var(--s1) !important;margin-top:var(--s5) !important} body:not(.ic-sayfa) .blk-sektor .grid.g3>.sektor:first-child{grid-row:1/3;min-height:0 !important; padding:var(--s4) !important} body:not(.ic-sayfa) .blk-sektor .grid.g3>.sektor:first-child .mk-gorsel{width:74% !important; max-width:420px !important;top:var(--s3) !important;right:var(--s3) !important} body:not(.ic-sayfa) .blk-sektor .grid.g3>.sektor:first-child h3{font-size:1.75rem !important} body:not(.ic-sayfa) .blk-sektor .grid.g3>.sektor:first-child p{font-size:1rem !important;max-width:40ch} body:not(.ic-sayfa) section.blk .grid .sektor{min-height:248px !important;padding:var(--s3) !important} @media(max-width:860px){ body:not(.ic-sayfa) .blk-sektor .grid.g3{grid-template-columns:1fr !important} body:not(.ic-sayfa) .blk-sektor .grid.g3>.sektor:first-child{grid-row:auto;min-height:380px !important; padding:var(--s3) !important} body:not(.ic-sayfa) .blk-sektor .grid.g3>.sektor:first-child .mk-gorsel{width:62% !important; top:var(--s2) !important;right:var(--s2) !important} body:not(.ic-sayfa) .blk-sektor .grid.g3>.sektor:first-child h3{font-size:1.5rem !important} body:not(.ic-sayfa) section.blk .grid .sektor{min-height:264px !important} } /* ── Kaynaklar: ilk yazı yatay öne çıkan, diğer ikisi yan yana ── */ body:not(.ic-sayfa) .blk-kaynak .grid.g3{grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:var(--s2) !important;margin-top:var(--s5) !important} body:not(.ic-sayfa) .blk-kaynak .grid.g3>.blog-k:first-child{grid-column:1/-1;flex-direction:row !important} body:not(.ic-sayfa) .blk-kaynak .grid.g3>.blog-k:first-child .gorsel{flex:0 0 52%;aspect-ratio:auto; min-height:280px;border-bottom:0 !important;border-right:1px solid var(--m-cizgi)} body:not(.ic-sayfa) .blk-kaynak .grid.g3>.blog-k:first-child .ic{align-self:center;padding:var(--s5) !important} body:not(.ic-sayfa) .blk-kaynak .grid.g3>.blog-k:first-child h3{font-size:1.75rem !important} body:not(.ic-sayfa) section.blk .blog-k .ic{padding:var(--s3) !important} body:not(.ic-sayfa) section.blk .blog-k .gorsel{background:var(--m-ana-acik) !important} body:not(.ic-sayfa) section.blk .blog-k .meta{color:var(--m-soluk) !important;margin-top:var(--s2) !important} @media(max-width:760px){ body:not(.ic-sayfa) .blk-kaynak .grid.g3{grid-template-columns:1fr !important} body:not(.ic-sayfa) .blk-kaynak .grid.g3>.blog-k:first-child{flex-direction:column !important} body:not(.ic-sayfa) .blk-kaynak .grid.g3>.blog-k:first-child .gorsel{flex:none;min-height:0;aspect-ratio:16/9; border-right:0;border-bottom:1px solid var(--m-cizgi) !important} body:not(.ic-sayfa) .blk-kaynak .grid.g3>.blog-k:first-child .ic{padding:var(--s3) !important} } /* ── Neden PaKalite: kutu yok; üstte ana renk çizgisiyle üç sütun ── */ body:not(.ic-sayfa) .blk-neden .grid.g3{gap:var(--s4) !important;margin-top:var(--s5) !important} body:not(.ic-sayfa) .blk-neden .grid .kart{background:none !important;border:0 !important; border-top:1px solid var(--m-cizgi) !important;border-radius:0 !important;min-height:0 !important; padding:var(--s3) 0 0 !important;box-shadow:none !important;position:relative} body:not(.ic-sayfa) .blk-neden .grid .kart::before{content:"";position:absolute;left:0;top:-1px; width:var(--s5);height:2px;background:var(--m-ana);transition:width .35s ease} body:not(.ic-sayfa) .blk-neden .grid .kart:hover::before{width:100%} body:not(.ic-sayfa) .blk-neden .grid .kart>.ik{margin:0 0 var(--s2) !important;color:var(--m-ana) !important} body:not(.ic-sayfa) .blk-neden .grid .kart p{color:var(--m-yazi2) !important} /* ── Bulut / rapor panelleri ── */ body:not(.ic-sayfa) section.blk .cam-kart{padding:var(--s3) !important} body:not(.ic-sayfa) .blk-bulut .cam-kart>.usta::after{display:none !important} body:not(.ic-sayfa) section.blk .cam-kart .gauge{gap:var(--s1) !important} body:not(.ic-sayfa) section.blk .cam-kart .gauge .satir{padding:var(--s2) !important;background:#f8f9f7 !important; border-color:var(--m-cizgi) !important} body:not(.ic-sayfa) section.blk .cam-kart .gauge .satir span{color:var(--m-soluk) !important} body:not(.ic-sayfa) section.blk .cam-kart .gauge .satir b[style*="f0a35a"]{color:var(--m-vurgu) !important} body:not(.ic-sayfa) .rapor-gorsel{background:var(--m-ana-acik) !important;border-color:var(--m-cizgi) !important; margin-bottom:var(--s3) !important} body:not(.ic-sayfa) section.blk .cam-kart p{color:var(--m-soluk) !important} body:not(.ic-sayfa) section.blk .mini-liste li{padding:var(--s2) 0 !important;gap:var(--s2) !important} body:not(.ic-sayfa) section.blk .mini-liste span{color:var(--m-soluk) !important} /* ── İkonlar tek aile: hepsi çizgi, aynı kalınlık ── */ body:not(.ic-sayfa) section.blk .ik svg{stroke-width:1.6 !important;fill:none} /* ── Düğmeler ── */ body:not(.ic-sayfa) section.blk .btn-hayalet{color:var(--m-grafit) !important;border:1px solid var(--m-cizgi) !important; background:#ffffff !important;border-radius:2px !important;padding:var(--s2) var(--s3) !important} body:not(.ic-sayfa) section.blk .btn-hayalet:hover{border-color:var(--m-cizgi-ana) !important; color:var(--m-ana) !important;box-shadow:var(--m-golge) !important} body:not(.ic-sayfa) section.blk .merkez:not(:has(>h2)){margin-top:var(--s4) !important} /* ── SSS ── */ body:not(.ic-sayfa) section.blk .sss-sag summary{padding:var(--s3) var(--s1) var(--s3) 0 !important;color:var(--m-grafit) !important} body:not(.ic-sayfa) section.blk .sss-sag summary::before{color:var(--m-soluk) !important} body:not(.ic-sayfa) section.blk .sss-sag summary:hover{color:var(--m-ana) !important} body:not(.ic-sayfa) section.blk .sss.sss-sag,body:not(.ic-sayfa) section.blk .sss-sag details{border-color:var(--m-cizgi) !important} body:not(.ic-sayfa) section.blk .sss-sag .cvp{color:var(--m-yazi2) !important;padding-bottom:var(--s3) !important} body:not(.ic-sayfa) .sss-duzen{column-gap:var(--s7) !important} /* Klavye odağı görünür */ body:not(.ic-sayfa) a:focus-visible,body:not(.ic-sayfa) summary:focus-visible{ outline:2px solid var(--m-ana);outline-offset:3px} /* ════════════════════════════════════════════════════════════════════════ MARKA SİSTEMİ 2. TUR (2026-09-15) Zemin: eski sürümdeki mavi-gri geçiş, bir kademe açık. Kontrast bu zeminin en koyu tonuna (#d3dfee) göre yeniden ölçüldü. ════════════════════════════════════════════════════════════════════════ */ body:not(.ic-sayfa) .zemin{ background: radial-gradient(70% 46% at 50% -12%,rgba(255,255,255,.6),transparent 68%), linear-gradient(170deg,#eef4fd 0%,#e3edfb 18%,#d9e5f6 38%,#d3dfee 56%, #d7dfe9 74%,#dfe5ec 90%,#e8ebf0 100%) !important} body:not(.ic-sayfa) .usta{color:#0f5bb0 !important} /* ── Hero: açıklama bir kademe büyük, dönen cümle ayrı bir gri tonda ── */ body:not(.ic-sayfa) .hero .lede{font-size:clamp(1.125rem,min(1.3vw,2.25vh),1.25rem) !important; color:#37424f !important} body:not(.ic-sayfa) .hero .lede .dk-kelime{color:#4d5f73 !important} body:not(.ic-sayfa) .hero .dk-imlec{background:#4d5f73 !important} /* ── Düğmeler: yeni zemine uyumlu, sol taraftakiler daha canlı ── */ body:not(.ic-sayfa) .hero .btn-b,body:not(.ic-sayfa) .nav-sag .nav-indir{ background:#1976d2 !important;color:#ffffff !important;border:0 !important; box-shadow:0 12px 24px -14px rgba(25,118,210,.7) !important} body:not(.ic-sayfa) .hero .btn-b:hover,body:not(.ic-sayfa) .nav-sag .nav-indir:hover{ background:#1565c0 !important;box-shadow:0 16px 28px -14px rgba(21,101,192,.75) !important} body:not(.ic-sayfa) .hero .btn-hayalet{padding:var(--s2) var(--s3) !important; background:rgba(255,255,255,.78) !important;color:#0f5bb0 !important;border-radius:2px !important; border:1px solid rgba(25,118,210,.45) !important;box-shadow:none !important} body:not(.ic-sayfa) .hero .btn-hayalet:hover{background:#ffffff !important;color:#1565c0 !important; border-color:#1976d2 !important;box-shadow:0 12px 24px -16px rgba(25,118,210,.55) !important} /* Kullanım Kılavuzu: koyu lacivert hap yerine zemine uyan açık hap */ body:not(.ic-sayfa) .nav-linkler>a.nav-kilavuz{background:rgba(255,255,255,.72) !important; color:#0f4f99 !important;border:1px solid rgba(25,118,210,.38) !important;box-shadow:none !important} body:not(.ic-sayfa) .nav-linkler>a.nav-kilavuz:hover{background:#ffffff !important; border-color:#1976d2 !important;color:#1565c0 !important} body:not(.ic-sayfa) .nav-kilavuz .klv-puls{background:#1976d2 !important;box-shadow:none !important} body:not(.ic-sayfa) .nav-kilavuz::before{background:linear-gradient(90deg,transparent,rgba(25,118,210,.12),transparent) !important} body:not(.ic-sayfa).kaydi .nav-linkler>a.nav-kilavuz{background:rgba(255,255,255,.1) !important; color:#eaf3ff !important;border-color:rgba(234,243,255,.35) !important} /* ── Kart görselleri yazı akışının İÇİNDE: kart yazıya göre uzar, hiçbir genişlikte başlık görselin altına girmez ── */ body:not(.ic-sayfa) .mod-kart,body:not(.ic-sayfa) section.blk .grid .sektor{ justify-content:flex-start !important;min-height:0 !important} body:not(.ic-sayfa) .mod-kart .mk-gorsel,body:not(.ic-sayfa) section.blk .grid .sektor .mk-gorsel, body:not(.ic-sayfa) .blk-sektor .grid.g3>.sektor:first-child .mk-gorsel{ position:relative !important;top:auto !important;right:auto !important;z-index:0; align-self:flex-end;width:64% !important;max-width:236px !important; margin:calc(-1 * var(--s1)) calc(-1 * var(--s1)) var(--s2) auto !important} body:not(.ic-sayfa) .mod-kart .git,body:not(.ic-sayfa) section.blk .grid .sektor p:last-child{margin-top:auto} body:not(.ic-sayfa) .mod-kart .git{padding-top:var(--s2)} /* ── Sektörler: üç eşit, orta boy kart (öne çıkan dev kart kalktı) ── */ body:not(.ic-sayfa) .blk-sektor .grid.g3{grid-template-columns:repeat(3,minmax(0,1fr)) !important; grid-auto-rows:auto !important} body:not(.ic-sayfa) .blk-sektor .grid.g3>.sektor:first-child{grid-row:auto !important; min-height:0 !important;padding:var(--s3) !important} body:not(.ic-sayfa) .blk-sektor .grid.g3>.sektor:first-child h3, body:not(.ic-sayfa) section.blk .grid .sektor h3{font-size:1.25rem !important} body:not(.ic-sayfa) .blk-sektor .grid.g3>.sektor:first-child p{font-size:.885rem !important;max-width:none} /* ── Kaynaklar: üç eşit, orta boy kart ── */ body:not(.ic-sayfa) .blk-kaynak .grid.g3{grid-template-columns:repeat(3,minmax(0,1fr)) !important} body:not(.ic-sayfa) .blk-kaynak .grid.g3>.blog-k:first-child{grid-column:auto !important; flex-direction:column !important} body:not(.ic-sayfa) .blk-kaynak .grid.g3>.blog-k:first-child .gorsel, body:not(.ic-sayfa) section.blk .blog-k .gorsel{flex:none !important;min-height:0 !important; aspect-ratio:16/10 !important;border-right:0 !important;border-bottom:1px solid var(--m-cizgi) !important} body:not(.ic-sayfa) .blk-kaynak .grid.g3>.blog-k:first-child .ic{align-self:stretch;padding:var(--s3) !important} body:not(.ic-sayfa) .blk-kaynak .grid.g3>.blog-k:first-child h3, body:not(.ic-sayfa) section.blk .blog-k h3{font-size:1.125rem !important} body:not(.ic-sayfa) section.blk .blog-k .gorsel .kapak{width:68% !important} @media(max-width:1000px){ body:not(.ic-sayfa) .blk-sektor .grid.g3, body:not(.ic-sayfa) .blk-kaynak .grid.g3{grid-template-columns:repeat(2,minmax(0,1fr)) !important} } @media(max-width:640px){ body:not(.ic-sayfa) .blk-sektor .grid.g3, body:not(.ic-sayfa) .blk-kaynak .grid.g3{grid-template-columns:1fr !important} body:not(.ic-sayfa) .mod-kart .mk-gorsel,body:not(.ic-sayfa) section.blk .grid .sektor .mk-gorsel, body:not(.ic-sayfa) .blk-sektor .grid.g3>.sektor:first-child .mk-gorsel{width:58% !important} } /* ════════════════════════════════════════════════════════════════════════ MARKA SİSTEMİ 3. TUR (2026-09-15) Zemin: beyaz taban üzerinde çok hafif mavi, lacivert ve lavanta lekeleri. Düz mor→mavi degrade DEĞİL; köşelerde dağılan yumuşak ışıklar. Bölümler arası: sert çizgi yok, yumuşak açık/ton geçişi. Kontrast: lekelerin en yoğun noktası (#cfd5ee) üzerinde ölçüldü. ════════════════════════════════════════════════════════════════════════ */ body:not(.ic-sayfa) .zemin{ background: radial-gradient(52% 38% at 8% 6%,rgba(214,226,252,.95),transparent 72%), radial-gradient(46% 40% at 96% 18%,rgba(201,196,236,.55),transparent 70%), radial-gradient(60% 46% at 88% 92%,rgba(159,179,220,.32),transparent 72%), radial-gradient(50% 42% at 4% 78%,rgba(222,214,246,.45),transparent 70%), linear-gradient(176deg,#f7f9fe 0%,#eef3fc 28%,#e6ecf8 52%,#e8ebf6 76%,#f1f3fa 100%) !important} /* Bölüm geçişleri: çizgi yerine yumuşak bant. Tek sıradaki bölümler hafif aydınlık, çift sıradakiler hafif lavanta-mavi; kenarları zemine eriyor. */ body:not(.ic-sayfa) section.blk::before{display:none !important} body:not(.ic-sayfa) section.blk{position:relative;isolation:isolate} body:not(.ic-sayfa) section.blk::after{content:"" !important;display:block !important;position:absolute; inset:0;top:0 !important;bottom:0 !important;height:auto !important;z-index:-1;pointer-events:none; background:linear-gradient(180deg,transparent 0%,rgba(255,255,255,.55) 22%, rgba(255,255,255,.55) 78%,transparent 100%)} body:not(.ic-sayfa) section.blk:nth-of-type(even)::after{ background:linear-gradient(180deg,transparent 0%,rgba(214,219,245,.42) 24%, rgba(221,230,250,.42) 76%,transparent 100%)} /* ── Yazı renkleri: lacivert ailesi ── */ body:not(.ic-sayfa) h1,body:not(.ic-sayfa) h2,body:not(.ic-sayfa) section.blk h3, body:not(.ic-sayfa) .sss-yapisan h2,body:not(.ic-sayfa) .hero h1{color:#141d3a !important} body:not(.ic-sayfa) .usta{color:#2f4fb8 !important} body:not(.ic-sayfa) section.blk.blk-moduller .merkez .usta{color:#2f4fb8 !important} body:not(.ic-sayfa) .hero .lede{font-size:clamp(1.1875rem,min(1.38vw,2.4vh),1.3125rem) !important; color:#313b50 !important} body:not(.ic-sayfa) .hero .lede b{color:#141d3a !important} body:not(.ic-sayfa) .hero .lede .dk-kelime{color:#4a5878 !important} body:not(.ic-sayfa) .hero .dk-imlec{background:#4a5878 !important} body:not(.ic-sayfa) section.blk .merkez:has(>h2)>.lede, body:not(.ic-sayfa) section.blk .split .metin .lede{font-size:1.1875rem !important;color:#3d475c !important} body:not(.ic-sayfa) .mod-kart>p,body:not(.ic-sayfa) section.blk .grid .sektor p, body:not(.ic-sayfa) section.blk .blog-k p,body:not(.ic-sayfa) .blk-neden .grid .kart p{ font-size:.9375rem !important;line-height:1.55 !important} body:not(.ic-sayfa) section.blk .mini-liste span{font-size:.9375rem !important} body:not(.ic-sayfa) section.blk .sss-sag .cvp{font-size:1rem !important} /* ── Hero düğmeleri: parlak ve belirgin; köşeleri yumuşak, ikonlu ── */ body:not(.ic-sayfa) .hero .btn-b,body:not(.ic-sayfa) .nav-sag .nav-indir{ position:relative;display:inline-flex !important;align-items:center;gap:10px; border-radius:12px !important;border:0 !important;color:#ffffff !important;font-weight:700 !important; background:linear-gradient(135deg,#1e6fe0 0%,#2a5fd4 48%,#3949ab 100%) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 10px 22px -10px rgba(42,95,212,.75) !important; transition:transform .2s ease,box-shadow .25s ease,filter .25s ease !important} body:not(.ic-sayfa) .hero .btn-b{padding:17px 26px !important;font-size:1rem !important} body:not(.ic-sayfa) .hero .btn-b::before{content:"";width:18px;height:18px;flex:none;background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 10l5 5 5-5M5 20h14'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 10l5 5 5-5M5 20h14'/%3E%3C/svg%3E") center/contain no-repeat} body:not(.ic-sayfa) .hero .btn-b:hover,body:not(.ic-sayfa) .nav-sag .nav-indir:hover{ transform:translateY(-2px) !important;filter:brightness(1.07); box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 16px 28px -12px rgba(42,95,212,.85) !important} body:not(.ic-sayfa) .hero .btn-b:active{transform:translateY(0) !important} /* İkincil: beyaz yüzey, mavi-lavanta degrade çerçeve, lacivert yazı, oklu çip */ body:not(.ic-sayfa) .hero .btn-hayalet{position:relative;display:inline-flex !important;align-items:center; gap:12px;padding:15px 16px 15px 24px !important;border-radius:12px !important;font-weight:700 !important; color:#1c2f78 !important;border:1.5px solid transparent !important; background:linear-gradient(#ffffff,#f6f8ff) padding-box, linear-gradient(135deg,#6f9cf0,#8f86e0) border-box !important; box-shadow:0 8px 20px -14px rgba(57,73,171,.6) !important; transition:transform .2s ease,box-shadow .25s ease !important} body:not(.ic-sayfa) .hero .btn-hayalet::after{content:"→" !important;display:inline-grid;place-items:center; width:28px;height:28px;margin:0 !important;border-radius:8px;font-size:.95rem;color:#ffffff; background:linear-gradient(135deg,#2a5fd4,#3949ab);transition:transform .25s ease} body:not(.ic-sayfa) .hero .btn-hayalet:hover{transform:translateY(-2px) !important;color:#1c2f78 !important; box-shadow:0 14px 26px -14px rgba(57,73,171,.7) !important} body:not(.ic-sayfa) .hero .btn-hayalet:hover::after{transform:translateX(3px)} body:not(.ic-sayfa) .hero-cta{gap:var(--s2) !important} body:not(.ic-sayfa) a.btn:focus-visible{outline:2px solid #2f4fb8;outline-offset:3px} /* Kılavuz hapı yeni zeminde */ body:not(.ic-sayfa) .nav-linkler>a.nav-kilavuz{border-radius:12px !important;color:#1c2f78 !important; border:1.5px solid transparent !important; background:linear-gradient(rgba(255,255,255,.9),rgba(246,248,255,.9)) padding-box, linear-gradient(135deg,#6f9cf0,#8f86e0) border-box !important} body:not(.ic-sayfa) .nav-kilavuz .klv-puls{background:#3949ab !important} /* Bölüm içi düğmeler (Tüm modülleri gör vb.) aynı ikincil dilde */ body:not(.ic-sayfa) section.blk .btn-hayalet{border-radius:12px !important;color:#1c2f78 !important; border:1.5px solid transparent !important; background:linear-gradient(#ffffff,#f6f8ff) padding-box, linear-gradient(135deg,#9bb9f3,#aea6ea) border-box !important} body:not(.ic-sayfa) section.blk .btn-hayalet:hover{transform:translateY(-2px) !important; box-shadow:0 12px 24px -14px rgba(57,73,171,.6) !important;color:#2f4fb8 !important} /* Kart hover kenarı yeni vurguya */ body:not(.ic-sayfa) .mod-kart:hover,body:not(.ic-sayfa) section.blk .grid .sektor:hover, body:not(.ic-sayfa) section.blk .blog-k:hover{border-color:rgba(57,73,171,.42) !important; box-shadow:0 22px 38px -30px rgba(57,73,171,.55) !important} /* ── Logo bir kademe büyük ── */ body:not(.ic-sayfa) .nav .logo img{height:42px !important} body:not(.ic-sayfa) .nav .logo{font-size:1.32rem !important;gap:11px !important} @media(max-width:640px){body:not(.ic-sayfa) .nav .logo img{height:36px !important}} /* ════════════════════════════════════════════════════════════════════════ MARKA SİSTEMİ 4. TUR (2026-09-15) Zemin: ortası ferah beyaz; mavi, lacivert ve lavanta ışıkları yalnız kenarlarda ve yarı yoğunlukta. Bölüm bantları çok hafif. Başlıklar: PaKalite logosunun mavisi (#1f3f66; logo laciverti #183048 ile çelik mavisi #305478 arası). Kart başlıkları lacivert kalır. ════════════════════════════════════════════════════════════════════════ */ body:not(.ic-sayfa) .zemin{ background: radial-gradient(62% 58% at 50% 46%,rgba(255,255,255,.92) 0%,rgba(255,255,255,.55) 45%,transparent 78%), radial-gradient(44% 34% at 4% 4%,rgba(214,226,252,.7),transparent 72%), radial-gradient(40% 36% at 98% 14%,rgba(208,203,240,.38),transparent 70%), radial-gradient(52% 40% at 92% 96%,rgba(170,188,226,.22),transparent 72%), radial-gradient(44% 38% at 2% 84%,rgba(226,219,248,.32),transparent 70%), linear-gradient(176deg,#f8faff 0%,#f3f6fd 30%,#eef2fb 55%,#f0f2fa 78%,#f6f7fc 100%) !important} body:not(.ic-sayfa) section.blk::after{ background:linear-gradient(180deg,transparent 0%,rgba(255,255,255,.35) 25%, rgba(255,255,255,.35) 75%,transparent 100%) !important} body:not(.ic-sayfa) section.blk:nth-of-type(even)::after{ background:linear-gradient(180deg,transparent 0%,rgba(222,227,248,.26) 26%, rgba(226,234,251,.26) 74%,transparent 100%) !important} body:not(.ic-sayfa) .hero h1,body:not(.ic-sayfa) section.blk h2, body:not(.ic-sayfa) .sss-yapisan h2{color:#1f3f66 !important} /* ════════════════════════════════════════════════════════════════════════ MARKA SİSTEMİ 5. TUR (2026-09-15) 1) Canlı nokta alanı (#modArka) yalnız MODÜLLER bölümünde ve bölümün tamamı boyunca; üst ve alt kenarı zemine yumuşakça söner. 2) Yan ışıklar mordan mavi-mor (periwinkle) karışımına çekildi; orta kırık beyaz aynen. ════════════════════════════════════════════════════════════════════════ */ body:not(.ic-sayfa) section.blk.blk-moduller{position:relative} body:not(.ic-sayfa) .blk-moduller>.kap,body:not(.ic-sayfa) .blk-moduller .mod-alan{position:static !important} body:not(.ic-sayfa) .blk-moduller #modArka{top:0 !important;bottom:auto !important;height:100% !important;z-index:0 !important; -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%); mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%)} body:not(.ic-sayfa) .blk-moduller .merkez,body:not(.ic-sayfa) .blk-moduller .mod-izgara{ position:relative !important;z-index:1 !important} body:not(.ic-sayfa) .zemin{ background: radial-gradient(62% 58% at 50% 46%,rgba(255,255,255,.92) 0%,rgba(255,255,255,.55) 45%,transparent 78%), radial-gradient(44% 34% at 4% 4%,rgba(206,222,252,.75),transparent 72%), radial-gradient(40% 36% at 98% 14%,rgba(190,204,246,.46),transparent 70%), radial-gradient(52% 40% at 92% 96%,rgba(166,186,232,.26),transparent 72%), radial-gradient(44% 38% at 2% 84%,rgba(200,212,248,.38),transparent 70%), linear-gradient(176deg,#f8faff 0%,#f3f6fd 30%,#eef2fb 55%,#eff2fb 78%,#f6f8fd 100%) !important} body:not(.ic-sayfa) section.blk:nth-of-type(even)::after{ background:linear-gradient(180deg,transparent 0%,rgba(216,226,250,.26) 26%, rgba(222,232,252,.26) 74%,transparent 100%) !important} /* ════════════════════════════════════════════════════════════════════════ MARKA SİSTEMİ 6. TUR (2026-09-15) ════════════════════════════════════════════════════════════════════════ */ /* Açıklama: kalın/koyu vurgu yok; tamamı okunur açık gri. Dönen cümle ayrı bir mavi-gri tonda (en mavi zemin noktasında 4,9:1 ve 5,9:1). */ body:not(.ic-sayfa) .hero .lede,body:not(.ic-sayfa) .hero .lede b{ color:#556172 !important;font-weight:400 !important} body:not(.ic-sayfa) .hero .lede .dk-kelime{color:#3f5575 !important} body:not(.ic-sayfa) .hero .dk-imlec{background:#3f5575 !important} /* Logo yazısı bir kademe büyük */ body:not(.ic-sayfa) .nav .logo{font-size:1.5rem !important} @media(max-width:640px){body:not(.ic-sayfa) .nav .logo{font-size:1.32rem !important}} /* Zemin: bir tık daha mavi, orta kırık beyaz korunur */ body:not(.ic-sayfa) .zemin{ background: radial-gradient(60% 56% at 50% 46%,rgba(255,255,255,.86) 0%,rgba(255,255,255,.48) 45%,transparent 78%), radial-gradient(46% 36% at 4% 4%,rgba(196,216,252,.8),transparent 72%), radial-gradient(42% 38% at 98% 14%,rgba(184,200,246,.52),transparent 70%), radial-gradient(54% 42% at 92% 96%,rgba(160,184,234,.3),transparent 72%), radial-gradient(46% 40% at 2% 84%,rgba(192,208,248,.42),transparent 70%), linear-gradient(176deg,#f3f7ff 0%,#ebf2fd 30%,#e5edfb 55%,#e7eefb 78%,#f0f5fd 100%) !important} /* Noktalı dalga modüllerin sonuna kadar: kenarlarda yalnız kısa bir sönme */ body:not(.ic-sayfa) .blk-moduller #modArka{ -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 4%,#000 97%,transparent 100%) !important; mask-image:linear-gradient(180deg,transparent 0,#000 4%,#000 97%,transparent 100%) !important} /* Destek düğmesi: sitenin mavi degradesi, beyaz WhatsApp logosu */ body:not(.ic-sayfa) .wa-dugme{border:0 !important;border-radius:12px !important;color:#ffffff !important; background:linear-gradient(135deg,#1e6fe0 0%,#2a5fd4 48%,#3949ab 100%) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 12px 24px -12px rgba(42,95,212,.72) !important; transition:transform .2s ease,box-shadow .25s ease,filter .25s ease !important} body:not(.ic-sayfa) .wa-dugme:hover{transform:translateY(-2px) !important;filter:brightness(1.07); box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 16px 28px -12px rgba(42,95,212,.82) !important} body:not(.ic-sayfa) .wa-ikon,body:not(.ic-sayfa) .wa-etiket{color:#ffffff !important} body:not(.ic-sayfa) .wa-dugme:focus-visible{outline:2px solid #2f4fb8;outline-offset:3px} /* ════════════════════════════════════════════════════════════════════════ ÖZET KARTI BİÇİMİ (2026-09-15) Referans: "Dönüşüm özeti" kartının satır düzeni. Koyu ve düz dikdörtgen değil; açık yüzey, degrade çerçeve, 20px köşe, sol üstte marka çizgisi. Boşluklar 8 tabanlı ölçekten (8/16/24/32). ════════════════════════════════════════════════════════════════════════ */ body:not(.ic-sayfa) section.blk .cam-kart,body.ic-sayfa .cam-kart{position:relative !important;overflow:hidden;border-radius:20px !important; padding:32px 24px 24px !important;color:#313b50 !important;border:1.5px solid transparent !important; background:linear-gradient(180deg,#ffffff 0%,#f7f9ff 100%) padding-box, linear-gradient(140deg,#8fb3f5 0%,#cfd9f7 48%,#a99ee6 100%) border-box !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 24px 48px -34px rgba(42,95,212,.5) !important; transition:box-shadow .3s ease,transform .3s ease} body:not(.ic-sayfa) section.blk .cam-kart::before,body.ic-sayfa .cam-kart::before{content:"" !important;display:block !important;position:absolute;top:0;left:24px; width:56px;height:3px;border-radius:0 0 3px 3px;background:linear-gradient(90deg,#1e6fe0,#8f86e0)} body:not(.ic-sayfa) section.blk .cam-kart:hover,body.ic-sayfa .cam-kart:hover{transform:translateY(-2px); box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 30px 56px -34px rgba(42,95,212,.6) !important} body:not(.ic-sayfa) section.blk .cam-kart .usta,body.ic-sayfa .cam-kart .usta{color:#2f4fb8 !important;margin:0 0 16px !important} body:not(.ic-sayfa) section.blk .cam-kart .usta::before,body.ic-sayfa .cam-kart .usta::before{background:#2f4fb8 !important} body:not(.ic-sayfa) section.blk .cam-kart p,body.ic-sayfa .cam-kart p{color:#556172 !important} /* Satırlar: alt alta, solda açıklama, sağda değer */ body:not(.ic-sayfa) section.blk .cam-kart .gauge,body.ic-sayfa .cam-kart .gauge{display:grid !important;grid-template-columns:1fr !important;gap:8px !important} body:not(.ic-sayfa) section.blk .cam-kart .gauge .satir,body.ic-sayfa .cam-kart .gauge .satir{display:flex !important;align-items:center !important;justify-content:space-between;gap:16px; margin:0 !important;padding:16px !important;border-radius:12px !important;color:#556172 !important; background:linear-gradient(90deg,#f3f7ff 0%,#eef2fc 100%) !important; border:1px solid rgba(57,73,171,.12) !important;transition:border-color .25s ease,background .25s ease} body:not(.ic-sayfa) section.blk .cam-kart .gauge .satir:hover,body.ic-sayfa .cam-kart .gauge .satir:hover{border-color:rgba(57,73,171,.32) !important; background:linear-gradient(90deg,#eef4ff 0%,#e8eefc 100%) !important} body:not(.ic-sayfa) section.blk .cam-kart .gauge .satir span,body.ic-sayfa .cam-kart .gauge .satir span{order:0;flex:1 1 auto;grid-column:auto !important;color:#556172 !important; font-size:.9375rem !important;line-height:1.35} body:not(.ic-sayfa) section.blk .cam-kart .gauge .satir .spark,body.ic-sayfa .cam-kart .gauge .satir .spark{order:1;flex:none;width:64px !important;height:18px !important;opacity:.9} body:not(.ic-sayfa) section.blk .cam-kart .gauge .satir b,body.ic-sayfa .cam-kart .gauge .satir b{order:2;flex:none;font-family:"Fraunces",Georgia,serif !important;font-weight:600 !important; font-style:normal !important;font-size:1.25rem !important;line-height:1 !important; letter-spacing:-.01em;color:#1f3f66 !important} /* Çipler: yuvarlak, beyaz, onay işaretli */ body:not(.ic-sayfa) section.blk .cam-kart .etiket.std,body.ic-sayfa .cam-kart .etiket.std{position:relative;display:inline-flex !important;align-items:center;margin:8px 8px 0 0 !important; padding:8px 12px 8px 26px !important;border-radius:999px !important;background:#ffffff !important; border:1px solid rgba(57,73,171,.22) !important;color:#1c2f78 !important; font-family:var(--body) !important;font-size:.8rem !important;font-weight:600 !important;letter-spacing:0 !important} body:not(.ic-sayfa) section.blk .cam-kart .etiket.std::before,body.ic-sayfa .cam-kart .etiket.std::before{content:"" !important;position:absolute;left:11px;top:50%;width:8px;height:4px; border-left:1.6px solid #1e6fe0;border-bottom:1.6px solid #1e6fe0;transform:translateY(-70%) rotate(-45deg)} /* Kart içindeki görsel alanı (rapor önizlemesi) */ body:not(.ic-sayfa) section.blk .cam-kart .rapor-gorsel{border-radius:12px !important; border:1px solid rgba(57,73,171,.12) !important;margin-bottom:24px !important; background:linear-gradient(160deg,#f3f7ff,#e9eefb) !important} @media(prefers-reduced-motion:reduce){body:not(.ic-sayfa) section.blk .cam-kart,body.ic-sayfa .cam-kart{transition:none}body:not(.ic-sayfa) section.blk .cam-kart:hover,body.ic-sayfa .cam-kart:hover{transform:none}} /* ════════════════════════════════════════════════════════════════════════ İÇ SAYFALAR: MARKA SİSTEMİ (2026-09-15) Renk: başlık #1f3f66 (logo mavisi) · metin #141d3a/#313b50/#556172 ana #1565c0 · etiket #2f4fb8 · vurgu #b45a0c (yalnız uyarı) Font: başlık Fraunces 600 · gövde Hanken Grotesk Boşluk: --s1..--s7 = 8/16/24/32/48/64/96 ════════════════════════════════════════════════════════════════════════ */ /* ── Zemin ve bölüm geçişleri (ana sayfayla aynı) ── */ body.ic-sayfa .zemin{ background: radial-gradient(60% 56% at 50% 46%,rgba(255,255,255,.86) 0%,rgba(255,255,255,.48) 45%,transparent 78%), radial-gradient(46% 36% at 4% 4%,rgba(196,216,252,.8),transparent 72%), radial-gradient(42% 38% at 98% 14%,rgba(184,200,246,.52),transparent 70%), radial-gradient(54% 42% at 92% 96%,rgba(160,184,234,.3),transparent 72%), radial-gradient(46% 40% at 2% 84%,rgba(192,208,248,.42),transparent 70%), linear-gradient(176deg,#f3f7ff 0%,#ebf2fd 30%,#e5edfb 55%,#e7eefb 78%,#f0f5fd 100%) !important} body.ic-sayfa .zemin-izgara,body.ic-sayfa .zemin-grain,body.ic-sayfa .hero-izgara,body.ic-sayfa .hero::before{display:none !important} body.ic-sayfa>section,body.ic-sayfa>main>section{position:relative;isolation:isolate} body.ic-sayfa>section:nth-of-type(even)::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:linear-gradient(180deg,transparent 0%,rgba(255,255,255,.4) 22%,rgba(255,255,255,.4) 78%,transparent 100%)} body.ic-sayfa>section:not(.makale-sar):not(.kd-bas):not(.kd-ilgili):not(.kur-hero):not(.kur-sonra){ padding-top:var(--s7);padding-bottom:var(--s7)} @media(max-width:760px){ body.ic-sayfa>section:not(.makale-sar):not(.kd-bas):not(.kd-ilgili):not(.kur-hero):not(.kur-sonra){ padding-top:var(--s6);padding-bottom:var(--s6)}} body.ic-sayfa .serit{border-color:transparent !important} /* ── Tipografi: tek başlık fontu, logo mavisi, gerçek hiyerarşi ── */ body.ic-sayfa :is(body>section,body>header,body>main,.oturum-sar) :is(h1,h2,h3){font-family:"Fraunces",Georgia,"Times New Roman",serif !important; font-weight:600 !important;text-transform:none !important;font-style:normal} body.ic-sayfa :is(body>section,body>header,body>main,.oturum-sar) :is(h1,h2){color:#1f3f66 !important;letter-spacing:-.02em !important} body.ic-sayfa :is(body>section,body>header,body>main,.oturum-sar) h3{color:#141d3a !important;letter-spacing:-.01em !important} body.ic-sayfa :is(body>section,body>header,body>main,.oturum-sar) h1{font-size:clamp(2.5rem,4.4vw,3.5rem) !important;line-height:1.06 !important;margin:0 0 var(--s3) !important} body.ic-sayfa :is(body>section,body>header,body>main,.oturum-sar) h2{font-size:clamp(1.875rem,3vw,2.5rem) !important;line-height:1.1 !important} body.ic-sayfa :is(body>section,body>header,body>main,.oturum-sar) h3{font-size:1.25rem !important;line-height:1.25 !important} body.ic-sayfa .makale-bas h1{font-size:clamp(2rem,3.2vw,2.75rem) !important} body.ic-sayfa .kd-bas h1{font-size:clamp(2.25rem,3.8vw,3.25rem) !important} body.ic-sayfa .kur-hero h1{font-size:clamp(2rem,3.6vw,2.75rem) !important} body.ic-sayfa .oturum h1{font-size:1.75rem !important} body.ic-sayfa .makale h2,body.ic-sayfa .metin-sayfa h2,body.ic-sayfa .kd-bas~section .dar>h2{ font-size:clamp(1.5rem,2.2vw,1.875rem) !important;margin:var(--s5) 0 var(--s2) !important} body.ic-sayfa :is(.ilgili,.kd-ilgili,.sss,.kv-icindekiler)>h2,body.ic-sayfa .kd-ilgili .dar>h2{font-size:1.5rem !important} body.ic-sayfa .makale h3{margin:var(--s4) 0 var(--s1) !important} body.ic-sayfa .mod-bas h3{font-size:1.5rem !important} body.ic-sayfa .kv-adim>h3{font-size:1.375rem !important;color:#1f3f66 !important} body.ic-sayfa .adim h3,body.ic-sayfa .kutu h3{font-size:1.125rem !important} body.ic-sayfa .kur-ss-body h3{color:#ffffff !important;font-family:var(--body) !important;font-size:1.3rem !important} /* Vurgu kelimesi yok: renk, font, eğiklik başlığa eşit */ body.ic-sayfa .grad{color:inherit !important;-webkit-text-fill-color:currentColor !important;background:none !important; font:inherit !important;font-style:normal !important;letter-spacing:inherit !important;padding:0 !important} body.ic-sayfa .usta{color:#2f4fb8 !important;margin-bottom:var(--s2) !important} body.ic-sayfa .usta::before{width:var(--s3) !important} body.ic-sayfa .lede{color:#3d475c !important} body.ic-sayfa :is(.hero,.kd-bas,.kur-hero,header.merkez,body>section>.dar.merkez) .lede{color:#556172 !important} body.ic-sayfa .makale p,body.ic-sayfa .makale li,body.ic-sayfa .kv-sar p{color:#313b50 !important} body.ic-sayfa .makale>p:first-of-type{color:#141d3a !important} body.ic-sayfa .makale :is(strong,b){color:#141d3a !important} body.ic-sayfa .makale a,body.ic-sayfa .kv-sar a:not(.btn),body.ic-sayfa .kd-bas~section .dar p a{color:#174ea6 !important; text-decoration-color:rgba(23,78,166,.35) !important} body.ic-sayfa .makale a:hover{text-decoration-color:#174ea6 !important} body.ic-sayfa .kirinti ol,body.ic-sayfa .kirinti a,body.ic-sayfa .makale-meta{color:#556172 !important} body.ic-sayfa .kirinti li:last-child span{color:#313b50 !important} body.ic-sayfa .makale-meta svg{color:#2f4fb8 !important} /* ── Ortalanmış bloklar sola ── */ body.ic-sayfa .merkez{text-align:left !important} body.ic-sayfa .merkez .lede{margin-left:0 !important;margin-right:0 !important} body.ic-sayfa .btn-grup,body.ic-sayfa .hero-cta,body.ic-sayfa .kap:has(>a.etiket){justify-content:flex-start !important} /* Tanıtım sayfalarının girişi ana sayfa hizasında (menü kenarıyla aynı çizgi) */ body.ic-sayfa>section>.dar.merkez:has(>h1){max-width:var(--en) !important} body.ic-sayfa>section>.dar.merkez:has(>h1)>:is(h1,.lede,p){max-width:46rem} body.ic-sayfa .kur-hero{text-align:left !important} body.ic-sayfa .kur-hero .kur-carki{margin-left:0 !important} body.ic-sayfa .kur-hero p.kur-lede{margin-left:0 !important} /* Bölüm başlıkları: solda etiket + başlık (7), sağda açıklama (5) */ body.ic-sayfa :is(.kap>.merkez,.kap>.dar,.kap>div:not([class])):has(>h2):has(>.lede):not(:has(>:nth-child(5))){ display:grid !important;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:var(--s5); align-items:end;max-width:none !important;margin:0 0 var(--s5) !important;text-align:left !important} body.ic-sayfa :is(.kap>.merkez,.kap>.dar,.kap>div:not([class])):has(>h2):has(>.lede):not(:has(>:nth-child(5)))>.usta{ grid-column:1;justify-self:start} body.ic-sayfa :is(.kap>.merkez,.kap>.dar,.kap>div:not([class])):has(>h2):has(>.lede):not(:has(>:nth-child(5)))>h2{ grid-column:1;margin:0 !important} body.ic-sayfa :is(.kap>.merkez,.kap>.dar,.kap>div:not([class])):has(>h2):has(>.lede):not(:has(>:nth-child(5)))>.lede{ grid-column:2;grid-row:1/span 2;align-self:end;margin:0 !important;max-width:none !important} @media(max-width:860px){ body.ic-sayfa :is(.kap>.merkez,.kap>.dar,.kap>div:not([class])):has(>h2):has(>.lede):not(:has(>:nth-child(5))){ grid-template-columns:1fr;row-gap:var(--s2)} body.ic-sayfa :is(.kap>.merkez,.kap>.dar,.kap>div:not([class])):has(>h2):has(>.lede):not(:has(>:nth-child(5)))>.lede{ grid-column:1;grid-row:auto}} /* ── Düğmeler (ana sayfanın dili) ── */ body.ic-sayfa .btn{border-radius:12px !important} body.ic-sayfa .btn-b,body.ic-sayfa .btn-beyaz,body.ic-sayfa .nav-sag .nav-indir{border:0 !important;color:#ffffff !important;font-weight:700 !important; background:linear-gradient(135deg,#1e6fe0 0%,#2a5fd4 48%,#3949ab 100%) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 10px 22px -10px rgba(42,95,212,.75) !important; transition:transform .2s ease,box-shadow .25s ease,filter .25s ease !important} body.ic-sayfa .btn-b:hover,body.ic-sayfa .btn-beyaz:hover,body.ic-sayfa .nav-sag .nav-indir:hover{transform:translateY(-2px) !important; filter:brightness(1.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 16px 28px -12px rgba(42,95,212,.85) !important} body.ic-sayfa .btn-b::after{display:none !important} body.ic-sayfa a.btn-b[href="/kurulum"]:not(.nav-indir)::before,body.ic-sayfa a.btn-beyaz[href="/kurulum"]:not(.nav-indir)::before{content:"";width:18px;height:18px; flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 10l5 5 5-5M5 20h14'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 10l5 5 5-5M5 20h14'/%3E%3C/svg%3E") center/contain no-repeat} body.ic-sayfa .btn-hayalet{color:#1c2f78 !important;border:1.5px solid transparent !important; background:linear-gradient(#ffffff,#f6f8ff) padding-box,linear-gradient(135deg,#6f9cf0,#8f86e0) border-box !important; box-shadow:0 8px 20px -14px rgba(57,73,171,.6) !important;transition:transform .2s ease,box-shadow .25s ease !important} body.ic-sayfa .btn-hayalet:hover{transform:translateY(-2px) !important;color:#2f4fb8 !important; box-shadow:0 14px 26px -14px rgba(57,73,171,.7) !important} body.ic-sayfa a.btn:focus-visible,body.ic-sayfa a:focus-visible,body.ic-sayfa summary:focus-visible{outline:2px solid #2f4fb8;outline-offset:3px} /* ── Üst menü, logo, destek düğmesi (ana sayfayla aynı) ── */ body.ic-sayfa .nav .logo img{height:42px !important} body.ic-sayfa .nav .logo{font-size:1.5rem !important;gap:11px !important} @media(max-width:640px){body.ic-sayfa .nav .logo img{height:36px !important}body.ic-sayfa .nav .logo{font-size:1.32rem !important}} body.ic-sayfa .nav-linkler>a.nav-kilavuz{border-radius:12px !important;color:#1c2f78 !important;border:1.5px solid transparent !important; background:linear-gradient(rgba(255,255,255,.9),rgba(246,248,255,.9)) padding-box, linear-gradient(135deg,#6f9cf0,#8f86e0) border-box !important;box-shadow:none !important} body.ic-sayfa .nav-linkler>a.nav-kilavuz:hover{color:#2f4fb8 !important} body.ic-sayfa .nav-kilavuz .klv-puls{background:#3949ab !important;box-shadow:none !important} body.ic-sayfa .nav-kilavuz::before{background:linear-gradient(90deg,transparent,rgba(57,73,171,.12),transparent) !important} body.ic-sayfa.kaydi .nav-linkler>a.nav-kilavuz{background:rgba(255,255,255,.1) !important;color:#eaf3ff !important; border-color:rgba(234,243,255,.35) !important} body.ic-sayfa .wa-dugme{border:0 !important;border-radius:12px !important;color:#ffffff !important; background:linear-gradient(135deg,#1e6fe0 0%,#2a5fd4 48%,#3949ab 100%) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 12px 24px -12px rgba(42,95,212,.72) !important} body.ic-sayfa .wa-dugme:hover{transform:translateY(-2px) !important;filter:brightness(1.07)} body.ic-sayfa .wa-ikon,body.ic-sayfa .wa-etiket{color:#ffffff !important} /* Karşılama balonu: tüm sayfalarda açık renk (koyu yüzey kalmasın) */ body #wa-fab .wa-balon{color:#313b50 !important;border:1.5px solid transparent !important; background:linear-gradient(#ffffff,#f7f9ff) padding-box,linear-gradient(140deg,#8fb3f5,#a99ee6) border-box !important; box-shadow:0 22px 44px -26px rgba(42,95,212,.5) !important} body #wa-fab .wa-balon::after{border-top-color:#f7f9ff !important} body #wa-fab .wa-balon-bas{color:#1f3f66 !important} body #wa-fab .wa-balon-metin{color:#556172 !important} body #wa-fab .wa-balon-cta{color:#1565c0 !important} body #wa-fab .wa-balon-kapat{color:#7d8ba0 !important} body #wa-fab .wa-balon-kapat:hover{color:#1f3f66 !important} /* ── Kartlar: tek yüzey dili; kenar ve gölge markadan ── */ body.ic-sayfa :is(.kart,.kd-kart,.adim,.kutu,.arac,.yazar,.kur-kart,.mod,.plan,.ist .h,.blog-k){ background:#ffffff !important;border:1px solid rgba(21,32,43,.12) !important;border-radius:12px !important; box-shadow:none !important;transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease !important} body.ic-sayfa :is(a.kart,a.kd-kart,a.blog-k,a.sektor):hover{transform:translateY(-2px) !important; border-color:rgba(57,73,171,.42) !important;box-shadow:0 22px 38px -30px rgba(57,73,171,.55) !important} body.ic-sayfa :is(div.kart,.adim,.kutu,.arac,.kur-kart,.mod,.plan,.ist .h):hover{border-color:rgba(57,73,171,.3) !important; transform:none !important;box-shadow:none !important} body.ic-sayfa :is(.kart,.kd-kart)::after{height:2px !important;background:linear-gradient(90deg,#1e6fe0,#8f86e0) !important} body.ic-sayfa :is(.kart,.kd-kart,.adim,.kutu,.plan,.ist .h,.blog-k,.mod) p{color:#556172 !important} /* İkon kutusu yok: çıplak ince çizgi ikon */ body.ic-sayfa :is(.kart .ik,.kd-kart .ik,.mini-liste .ik,.sektor .ik){width:auto !important;height:auto !important; background:none !important;border:0 !important;border-radius:0 !important;box-shadow:none !important; color:#2f4fb8 !important;display:block !important;position:static !important;margin:0 0 var(--s2) !important} body.ic-sayfa :is(.kart .ik,.kd-kart .ik,.sektor .ik) svg{width:24px !important;height:24px !important;stroke-width:1.6} body.ic-sayfa .mini-liste .ik{margin:2px 0 0 !important} body.ic-sayfa .mini-liste .ik svg{width:20px !important;height:20px !important;stroke-width:1.6} body.ic-sayfa .mini-liste li{border-top-color:rgba(21,32,43,.1) !important} body.ic-sayfa .mini-liste b{color:#141d3a !important} body.ic-sayfa .mini-liste span{color:#556172 !important} body.ic-sayfa a.kart .git{color:#2f4fb8 !important} body.ic-sayfa .kd-kart .adet{color:#556172 !important;font-family:var(--body) !important} /* Sektör kartları (koyuydu) */ body.ic-sayfa .sektor{background:#ffffff !important;color:#313b50 !important;border:1px solid rgba(21,32,43,.12) !important; border-radius:12px !important;box-shadow:none !important;min-height:0 !important;justify-content:flex-start !important; padding:var(--s3) !important} body.ic-sayfa .sektor p{color:#556172 !important} /* İstatistik kutuları */ body.ic-sayfa .ist .h{text-align:left !important;padding:var(--s3) !important} body.ic-sayfa .ist .n{font-family:"Fraunces",Georgia,serif !important;color:#1f3f66 !important} body.ic-sayfa .ist .e{font-family:var(--body) !important;color:#556172 !important;font-size:.875rem !important} /* Modül kartları: numara dolu kutu değil, çerçeveli */ body.ic-sayfa .mod{padding:var(--s4) !important} body.ic-sayfa .mod-no{background:transparent !important;border:1.5px solid rgba(57,73,171,.35) !important;color:#2f4fb8 !important; width:44px !important;height:44px !important;border-radius:12px !important;font-size:1.125rem !important} body.ic-sayfa .mod-tanim{color:#141d3a !important} body.ic-sayfa .adim::before{font-family:"Fraunces",Georgia,serif !important;color:#2f4fb8 !important} body.ic-sayfa .etiket{border-radius:999px !important;background:#ffffff !important;border:1px solid rgba(57,73,171,.22) !important; color:#1c2f78 !important;font-family:var(--body) !important;font-weight:600 !important;font-size:.78rem !important; letter-spacing:0 !important;padding:6px 12px !important} body.ic-sayfa .etiket.std{background:#eef3ff !important} body.ic-sayfa a.etiket:hover{border-color:#2f4fb8 !important;color:#2f4fb8 !important} /* Blog kartı kapakları: koyu yerine açık marka yüzeyi */ body.ic-sayfa .blog-k{overflow:hidden} body.ic-sayfa .blog-k .gorsel{height:144px !important;background:linear-gradient(160deg,#f3f7ff,#e3eafb) !important; border-bottom:1px solid rgba(21,32,43,.08)} body.ic-sayfa .blog-k .gorsel::after{opacity:1 !important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='41.569' height='24' viewBox='0 0 41.569 24'%3E%3Cpath d='M0 0V24M20.785 0V24M0 0L41.569 24M0 24L41.569 0' fill='none' stroke='%231e88e5' stroke-opacity='.16' stroke-width='.7'/%3E%3C/svg%3E") !important;background-size:41.569px 24px !important; -webkit-mask-image:linear-gradient(200deg,#000,transparent 85%);mask-image:linear-gradient(200deg,#000,transparent 85%)} body.ic-sayfa .blog-k .gorsel .rz{background:#ffffff !important;color:#1565c0 !important;border:1px solid rgba(57,73,171,.22) !important; border-radius:999px !important;font-family:var(--body) !important;font-weight:700 !important} body.ic-sayfa .blog-k h3{font-size:1.125rem !important} body.ic-sayfa .blog-k .meta{font-family:var(--body) !important;color:#556172 !important} /* ── Alıntılar: ortalı italik yerine sola çizgili ── */ body.ic-sayfa .alinti{text-align:left !important;max-width:46rem !important;margin-left:0 !important;font-style:normal !important; font-family:"Fraunces",Georgia,serif !important;font-weight:500 !important;color:#1f3f66 !important; font-size:clamp(1.375rem,2.2vw,1.75rem) !important;padding-left:var(--s3);border-left:3px solid #8fb3f5} body.ic-sayfa .alinti span{color:inherit !important} body.ic-sayfa .cam-kart .alinti{font-size:1.0625rem !important;margin-top:var(--s3) !important;padding-left:var(--s2)} body.ic-sayfa .cam-kart .bilgi-satir{border-color:rgba(21,32,43,.12) !important} body.ic-sayfa .cam-kart .bilgi-satir b{color:#1f3f66 !important} body.ic-sayfa .cam-kart .bilgi-satir span{color:#556172 !important} /* ── Çağrı kutuları: koyu değil; solda metin, sağda düğmeler ── */ body.ic-sayfa :is(.cta,.mak-cta,.kur-kutu){position:relative;overflow:hidden;text-align:left !important;color:#313b50 !important; border-radius:20px !important;border:1.5px solid transparent !important;padding:var(--s5) !important; background:linear-gradient(135deg,#ffffff 0%,#f1f5ff 58%,#eceefd 100%) padding-box, linear-gradient(140deg,#8fb3f5 0%,#cfd9f7 48%,#a99ee6 100%) border-box !important; box-shadow:0 28px 56px -40px rgba(42,95,212,.55) !important} body.ic-sayfa :is(.cta,.mak-cta)::before,body.ic-sayfa :is(.cta,.mak-cta)::after{display:none !important} body.ic-sayfa :is(.cta,.mak-cta){display:grid !important;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--s5); row-gap:var(--s1);align-items:center} body.ic-sayfa :is(.cta,.mak-cta)>:not(.btn-grup){grid-column:1;margin:0 !important;max-width:none !important} body.ic-sayfa :is(.cta,.mak-cta)>.btn-grup{grid-column:2;grid-row:1/span 3;justify-content:flex-end !important; flex-wrap:wrap;gap:var(--s2) !important} body.ic-sayfa :is(.cta,.mak-cta,.kur-kutu) :is(h2,h3){color:#1f3f66 !important} body.ic-sayfa :is(.cta,.mak-cta,.kur-kutu) p{color:#556172 !important} body.ic-sayfa .mak-cta{padding:var(--s4) !important} @media(max-width:760px){ body.ic-sayfa :is(.cta,.mak-cta){grid-template-columns:1fr;row-gap:var(--s2)} body.ic-sayfa :is(.cta,.mak-cta)>.btn-grup{grid-column:1;grid-row:auto;justify-content:flex-start !important} body.ic-sayfa :is(.cta,.mak-cta,.kur-kutu){padding:var(--s4) var(--s3) !important}} /* ── Makale bileşenleri ── */ body.ic-sayfa .not-kutu{background:rgba(255,255,255,.72) !important;border:1px solid rgba(57,73,171,.14) !important; border-left:3px solid #6f9cf0 !important;border-radius:12px !important} body.ic-sayfa .not-kutu .et{color:#2f4fb8 !important;font-family:var(--body) !important} body.ic-sayfa .not-kutu p{color:#313b50 !important} body.ic-sayfa .not-kutu.denetci{background:linear-gradient(135deg,#f4f5ff,#ecedfd) !important;border-color:rgba(57,73,171,.18) !important; border-left-color:#8f86e0 !important} body.ic-sayfa .not-kutu.denetci .et{color:#3949ab !important} body.ic-sayfa .makale th,body.ic-sayfa .arac-tablo th{background:#eef3ff !important;color:#1f3f66 !important;font-family:var(--body) !important} body.ic-sayfa .makale :is(th,td){border-color:rgba(21,32,43,.12) !important} body.ic-sayfa .makale tbody tr:nth-child(even) td{background:rgba(255,255,255,.5)} body.ic-sayfa .makale blockquote{border-left-color:#8fb3f5 !important;font-style:normal !important;color:#1f3f66 !important} body.ic-sayfa .makale ul li::before{background:#6f9cf0 !important} body.ic-sayfa .makale ol li::before,body.ic-sayfa .kv-yonerge li::before{background:#eef3ff !important;color:#1f3f66 !important; font-family:var(--body) !important} body.ic-sayfa .mak-liste a{border-top-color:rgba(21,32,43,.1) !important;border-radius:8px} body.ic-sayfa .mak-liste a:hover{background:rgba(255,255,255,.6) !important} body.ic-sayfa .mak-liste .no,body.ic-sayfa .mak-liste .ok{color:#2f4fb8 !important;font-family:var(--body) !important} body.ic-sayfa .mak-liste .baslik b{color:#141d3a !important} body.ic-sayfa .mak-liste .baslik span{color:#556172 !important} body.ic-sayfa .yazar{padding:var(--s3) !important} body.ic-sayfa .yazar .av{background:linear-gradient(135deg,#1e6fe0,#3949ab) !important} /* ── SSS: kutu değil, numaralı satır (ana sayfayla aynı) ── */ body.ic-sayfa .sss{counter-reset:soru;gap:0 !important} body.ic-sayfa .sss details{counter-increment:soru;background:transparent !important;border:0 !important; border-bottom:1px solid rgba(21,32,43,.12) !important;border-radius:0 !important;box-shadow:none !important;padding:0 !important} body.ic-sayfa .sss details:first-of-type{border-top:1px solid rgba(21,32,43,.12) !important} body.ic-sayfa .sss summary{display:grid !important;grid-template-columns:3em minmax(0,1fr) auto;align-items:baseline;gap:0; padding:var(--s3) var(--s1) var(--s3) 0 !important;font-family:var(--body) !important;font-weight:600 !important; font-size:1.0625rem !important;color:#141d3a !important} body.ic-sayfa .sss summary::before{content:counter(soru,decimal-leading-zero);font-size:.78rem;font-weight:600;letter-spacing:.06em; color:#556172;font-variant-numeric:tabular-nums} body.ic-sayfa .sss summary::after{content:"+" !important;font-family:var(--body) !important;font-weight:300;font-size:1.5rem; line-height:1;color:#7d8ba0 !important} body.ic-sayfa .sss details[open] summary::after{color:#1e6fe0 !important} body.ic-sayfa .sss summary:hover{color:#1565c0 !important} body.ic-sayfa .sss .cvp{padding:0 var(--s3) var(--s3) 3em !important;color:#313b50 !important} /* ── Kılavuz ── */ body.ic-sayfa .kv-not{background:rgba(255,255,255,.72) !important;border-left-color:#1565c0 !important;border-radius:0 12px 12px 0 !important} body.ic-sayfa .kv-not.uyari{border-left-color:#b45a0c !important} body.ic-sayfa .kv-not.ipucu{border-left-color:#1565c0 !important} body.ic-sayfa .kv-not .et{color:#556172 !important;font-family:var(--body) !important} body.ic-sayfa .kv-icindekiler{background:rgba(255,255,255,.72) !important;border-color:rgba(21,32,43,.12) !important;border-radius:12px !important} body.ic-sayfa .kv-gorsel{border-color:rgba(21,32,43,.12) !important;box-shadow:0 18px 36px -26px rgba(57,73,171,.45) !important} body.ic-sayfa .kv-adim>.yol{color:#556172 !important;font-family:var(--body) !important} /* ── Hesaplayıcılar ── */ body.ic-sayfa .arac{padding:var(--s3) !important} body.ic-sayfa .arac .aciklama,body.ic-sayfa .arac-alan .ipuc{color:#556172 !important} body.ic-sayfa .arac-alan label{color:#556172 !important;font-family:var(--body) !important} body.ic-sayfa :is(.arac-alan,.alan) :is(input,select,textarea){background:#fbfcff !important;border:1px solid rgba(57,73,171,.22) !important; border-radius:10px !important;color:#141d3a !important} body.ic-sayfa :is(.arac-alan,.alan) :is(input,select,textarea):focus{border-color:#2f4fb8 !important; box-shadow:0 0 0 3px rgba(47,79,184,.15) !important;background:#ffffff !important} body.ic-sayfa .arac-sonuc{background:#f3f7ff !important;border:1px solid rgba(57,73,171,.14) !important;border-radius:12px !important} body.ic-sayfa .arac-yorum{background:#ffffff !important;border-left-color:#1e6fe0 !important} /* ── Giriş ── */ body.ic-sayfa .oturum{border-radius:20px !important;border:1.5px solid transparent !important; background:linear-gradient(180deg,#ffffff 0%,#f7f9ff 100%) padding-box, linear-gradient(140deg,#8fb3f5 0%,#cfd9f7 48%,#a99ee6 100%) border-box !important; box-shadow:0 28px 56px -40px rgba(42,95,212,.55) !important;padding:var(--s5) var(--s4) !important} body.ic-sayfa .oturum h1,body.ic-sayfa .oturum .lede,body.ic-sayfa .oturum-alt{text-align:left !important} body.ic-sayfa .oturum .logo{justify-content:flex-start !important} body.ic-sayfa .alan label{color:#556172 !important;font-family:var(--body) !important} body.ic-sayfa .uyari-kutu.bilgi{background:#eef3ff !important;color:#1c2f78 !important;border-color:rgba(57,73,171,.2) !important} /* ── Kurulum ── */ body.ic-sayfa .kur-kart{padding:var(--s4) !important} body.ic-sayfa .kur-kart .kur-alt,body.ic-sayfa .kur-adim .kur-ic span,body.ic-sayfa .kur-manuel,body.ic-sayfa .kur-ss-not{color:#556172 !important} body.ic-sayfa .kur-adim{border-top-color:rgba(21,32,43,.1) !important} body.ic-sayfa .kur-adim .kur-no{background:linear-gradient(135deg,#1e6fe0,#3949ab) !important;font-family:var(--body) !important} body.ic-sayfa .kur-vurgu{background:#eef3ff !important;color:#1c2f78 !important} body.ic-sayfa .kur-neden{background:rgba(255,255,255,.72) !important;border:1px solid rgba(57,73,171,.16) !important;border-radius:12px !important} body.ic-sayfa .kur-kutu{display:flex !important} /* ── Fiyatlar: paket ızgarası (özgün sitede bu sınıfların stili yoktu) ── */ body.ic-sayfa .fiyatlar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s2);align-items:stretch} body.ic-sayfa .plan{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s3) !important} body.ic-sayfa .plan.one{border:1.5px solid transparent !important; background:linear-gradient(180deg,#ffffff 0%,#f5f8ff 100%) padding-box, linear-gradient(140deg,#8fb3f5 0%,#cfd9f7 48%,#a99ee6 100%) border-box !important; box-shadow:0 24px 48px -36px rgba(42,95,212,.55) !important} body.ic-sayfa .plan .ad{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:1.25rem;color:#1f3f66} body.ic-sayfa .plan .fi{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:2.25rem;line-height:1;color:#141d3a} body.ic-sayfa .plan .fi.bedava{color:#1565c0} body.ic-sayfa .plan .fi small{font-family:var(--body);font-weight:500;font-size:.875rem;color:#556172} body.ic-sayfa .plan ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s1);flex:1 1 auto;align-content:start} body.ic-sayfa .plan li{position:relative;padding-left:24px;font-size:.9375rem;color:#313b50;line-height:1.45} body.ic-sayfa .plan li::before{content:"";position:absolute;left:0;top:3px;width:16px;height:16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e6fe0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat} body.ic-sayfa .plan .btn{margin-top:auto;width:100%;justify-content:center} @media(max-width:1280px){body.ic-sayfa .fiyatlar{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:900px){body.ic-sayfa .fiyatlar{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:600px){body.ic-sayfa .fiyatlar{grid-template-columns:1fr}} @media(prefers-reduced-motion:reduce){ body.ic-sayfa :is(.btn,.kart,.kd-kart,.blog-k,.sektor){transition:none !important} body.ic-sayfa :is(a.kart,a.kd-kart,a.blog-k,a.sektor,.btn):hover{transform:none !important}} /* ════════════════════════════════════════════════════════════════════════ İÇ SAYFALAR 2. TUR (2026-09-15) ════════════════════════════════════════════════════════════════════════ */ /* Zemin katmanı olmayan sayfa (fiyatlar.html) aynı arka planı gövdeden alır */ body.ic-sayfa{background: radial-gradient(60% 56% at 50% 46%,rgba(255,255,255,.86) 0%,rgba(255,255,255,.48) 45%,transparent 78%), radial-gradient(46% 36% at 4% 4%,rgba(196,216,252,.8),transparent 72%), radial-gradient(42% 38% at 98% 14%,rgba(184,200,246,.52),transparent 70%), radial-gradient(54% 42% at 92% 96%,rgba(160,184,234,.3),transparent 72%), radial-gradient(46% 40% at 2% 84%,rgba(192,208,248,.42),transparent 70%), linear-gradient(176deg,#f3f7ff 0%,#ebf2fd 30%,#e5edfb 55%,#e7eefb 78%,#f0f5fd 100%) fixed !important} /* 7/5 bölüm başlığı: üst etiket başlığın hemen üstünde kalsın; artan yükseklik etiketin ÜSTÜNE gitsin. Kenar boşluğu kartlarla aynı çizgide. */ body.ic-sayfa :is(.kap>.merkez,.kap>.dar,.kap>div:not([class])):has(>h2):has(>.lede):not(:has(>:nth-child(5))){ grid-template-rows:1fr auto;padding-left:0 !important;padding-right:0 !important} body.ic-sayfa :is(.kap>.merkez,.kap>.dar,.kap>div:not([class])):has(>h2):has(>.lede):not(:has(>:nth-child(5)))>.usta{ grid-row:1;align-self:end} body.ic-sayfa :is(.kap>.merkez,.kap>.dar,.kap>div:not([class])):has(>h2):has(>.lede):not(:has(>:nth-child(5)))>h2{grid-row:2} @media(max-width:860px){ body.ic-sayfa :is(.kap>.merkez,.kap>.dar,.kap>div:not([class])):has(>h2):has(>.lede):not(:has(>:nth-child(5))){ grid-template-rows:none} body.ic-sayfa :is(.kap>.merkez,.kap>.dar,.kap>div:not([class])):has(>h2):has(>.lede):not(:has(>:nth-child(5)))>:is(.usta,h2){ grid-row:auto}} /* SSS listesi başlıkla aynı sol çizgide (ortalanmış dar blok değil) */ body.ic-sayfa .kap>.sss{margin-left:0 !important;margin-right:0 !important;max-width:52rem !important} /* Bilgi merkezi sayfalarında bölümler arası boşluk bir kademe az */ body.ic-sayfa .kd-bas~section:not(.kd-ilgili){padding-top:var(--s6) !important;padding-bottom:var(--s6) !important} /* ════════════════════════════════════════════════════════════════════════ SEKTÖR FOTOĞRAF KARTLARI (2026-09-15) Üstte konuya ait gerçek fotoğraf (16:10), altında başlık ve açıklama. Fotoğrafın rengine dokunulmaz; yalnız alt kenarda hafif lacivert geçiş. ════════════════════════════════════════════════════════════════════════ */ body:not(.ic-sayfa) section.blk .grid .sektor{padding:0 !important;overflow:hidden !important;justify-content:flex-start !important} body:not(.ic-sayfa) section.blk .grid .sektor::before{display:none !important} body:not(.ic-sayfa) .sk-foto{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:#dfe7f5; border-bottom:1px solid rgba(21,32,43,.08)} body:not(.ic-sayfa) .sk-foto img{display:block;width:100%;height:100%;object-fit:cover; transition:transform .7s cubic-bezier(.2,.8,.25,1)} body:not(.ic-sayfa) .sk-foto::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,rgba(15,35,70,0) 58%,rgba(15,35,70,.42) 100%)} body:not(.ic-sayfa) .sektor:hover .sk-foto img,body:not(.ic-sayfa) .sektor:focus-visible .sk-foto img{transform:scale(1.045)} body:not(.ic-sayfa) .sk-kredi{position:absolute;right:8px;bottom:6px;z-index:1;max-width:90%; font-size:.625rem;line-height:1.2;color:rgba(255,255,255,.9);text-shadow:0 1px 2px rgba(0,0,0,.5); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} body:not(.ic-sayfa) section.blk .grid .sektor h3{margin:var(--s3) var(--s3) var(--s1) !important;max-width:none !important} body:not(.ic-sayfa) section.blk .grid .sektor p{margin:0 var(--s3) var(--s3) !important;max-width:none !important} body:not(.ic-sayfa) .sk-kunye{margin:var(--s2) 0 0;font-size:.75rem;line-height:1.5;color:#556172} body:not(.ic-sayfa) .sk-kunye a{color:#174ea6;text-decoration:underline;text-decoration-color:rgba(23,78,166,.3);text-underline-offset:2px} /* ════════════════════════════════════════════════════════════════════════ KAYNAK KARTLARI: teknik görünüm (2026-09-15) Modül karolarından ayrışsın: teknik çizim ızgarası üzerinde veri akışı çizimi, HUD köşe işaretleri, sıra numarası; üzerine gelince tarama çizgisi ve alt ilerleme şeridi. Açık tema, keskin köşe. ════════════════════════════════════════════════════════════════════════ */ body:not(.ic-sayfa) .blk-kaynak .grid.g3{counter-reset:kaynak} body:not(.ic-sayfa) section.blk.blk-kaynak .blog-k{counter-increment:kaynak;position:relative;border-radius:4px !important; background:linear-gradient(180deg,#ffffff 0%,#f8faff 100%) !important; border:1px solid rgba(47,79,184,.18) !important;box-shadow:none !important;overflow:hidden; transition:border-color .3s ease,box-shadow .3s ease,transform .3s ease !important} body:not(.ic-sayfa) section.blk.blk-kaynak .blog-k::before{content:"";position:absolute;inset:8px;z-index:3;pointer-events:none; background: linear-gradient(#2f4fb8,#2f4fb8) left top/16px 1.5px no-repeat, linear-gradient(#2f4fb8,#2f4fb8) left top/1.5px 16px no-repeat, linear-gradient(#2f4fb8,#2f4fb8) right top/16px 1.5px no-repeat, linear-gradient(#2f4fb8,#2f4fb8) right top/1.5px 16px no-repeat, linear-gradient(#2f4fb8,#2f4fb8) left bottom/16px 1.5px no-repeat, linear-gradient(#2f4fb8,#2f4fb8) left bottom/1.5px 16px no-repeat, linear-gradient(#2f4fb8,#2f4fb8) right bottom/16px 1.5px no-repeat, linear-gradient(#2f4fb8,#2f4fb8) right bottom/1.5px 16px no-repeat; opacity:.55;transition:inset .35s ease,opacity .35s ease} body:not(.ic-sayfa) section.blk.blk-kaynak .blog-k::after{content:"";position:absolute;left:0;bottom:0;z-index:3;height:2px;width:0; background:linear-gradient(90deg,#1e6fe0,#8f86e0);transition:width .5s cubic-bezier(.2,.8,.25,1)} body:not(.ic-sayfa) section.blk.blk-kaynak .blog-k:hover,body:not(.ic-sayfa) section.blk.blk-kaynak .blog-k:focus-visible{ transform:translateY(-3px) !important;border-color:rgba(47,79,184,.38) !important; box-shadow:0 22px 40px -30px rgba(42,95,212,.6) !important} body:not(.ic-sayfa) section.blk.blk-kaynak .blog-k:hover::before,body:not(.ic-sayfa) section.blk.blk-kaynak .blog-k:focus-visible::before{inset:4px;opacity:1} body:not(.ic-sayfa) section.blk.blk-kaynak .blog-k:hover::after,body:not(.ic-sayfa) section.blk.blk-kaynak .blog-k:focus-visible::after{width:100%} body:not(.ic-sayfa) section.blk.blk-kaynak .blog-k .gorsel{position:relative;aspect-ratio:32/15 !important;height:auto !important; display:flex;align-items:center;justify-content:center;overflow:hidden; border-bottom:1px dashed rgba(47,79,184,.25) !important; background-color:#f4f7ff !important; background-image: radial-gradient(60% 80% at 50% 50%,rgba(255,255,255,.9),rgba(255,255,255,0) 70%), linear-gradient(rgba(47,79,184,.09) 1px,transparent 1px), linear-gradient(90deg,rgba(47,79,184,.09) 1px,transparent 1px), linear-gradient(rgba(47,79,184,.045) 1px,transparent 1px), linear-gradient(90deg,rgba(47,79,184,.045) 1px,transparent 1px) !important; background-size:100% 100%,64px 64px,64px 64px,16px 16px,16px 16px !important} body:not(.ic-sayfa) section.blk.blk-kaynak .blog-k .gorsel .kapak{width:92% !important;height:auto;position:relative;z-index:1; transform:none !important} body:not(.ic-sayfa) section.blk.blk-kaynak .blog-k .gorsel::before{content:counter(kaynak,decimal-leading-zero);position:absolute; right:var(--s3);top:var(--s2);z-index:2;font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:1.5rem; line-height:1;color:rgba(31,63,102,.28);letter-spacing:.02em} body:not(.ic-sayfa) section.blk.blk-kaynak .blog-k .gorsel::after{content:"";position:absolute;top:0;bottom:0;left:-45%;width:40%;z-index:2; pointer-events:none;background:linear-gradient(90deg,rgba(30,136,229,0),rgba(30,136,229,.16),rgba(30,136,229,0)); transition:left .9s cubic-bezier(.3,.6,.3,1)} body:not(.ic-sayfa) section.blk.blk-kaynak .blog-k:hover .gorsel::after{left:105%} body:not(.ic-sayfa) section.blk.blk-kaynak .blog-k .gorsel .rz{position:absolute;left:var(--s3);top:var(--s2);z-index:2; display:inline-flex;align-items:center;gap:6px;padding:4px 8px !important;border-radius:2px !important; background:#ffffff !important;border:1px solid rgba(47,79,184,.28) !important;color:#2f4fb8 !important; font-family:var(--body) !important;font-size:.625rem !important;font-weight:700 !important;letter-spacing:.16em !important} body:not(.ic-sayfa) section.blk.blk-kaynak .blog-k .gorsel .rz::before{content:"";width:6px;height:6px;background:#1e6fe0} body:not(.ic-sayfa) section.blk.blk-kaynak .blog-k .ic{padding:var(--s3) !important;display:flex;flex-direction:column;flex:1 1 auto} body:not(.ic-sayfa) section.blk.blk-kaynak .blog-k h3{font-size:1.125rem !important;line-height:1.3 !important;margin:0 0 var(--s1) !important; color:#141d3a !important} body:not(.ic-sayfa) section.blk.blk-kaynak .blog-k:hover h3{color:#1f3f66 !important} body:not(.ic-sayfa) section.blk.blk-kaynak .blog-k p{color:#556172 !important;margin:0 0 var(--s2) !important} body:not(.ic-sayfa) section.blk.blk-kaynak .blog-k .meta{display:flex;align-items:center;justify-content:space-between; margin-top:auto !important;padding-top:var(--s2);border-top:1px solid rgba(47,79,184,.12); font-size:.6875rem !important;font-weight:700 !important;letter-spacing:.14em !important;text-transform:uppercase;color:#556172 !important} body:not(.ic-sayfa) section.blk.blk-kaynak .blog-k .meta::after{content:"→";font-size:1rem;letter-spacing:0;color:#2f4fb8; transition:transform .3s ease} body:not(.ic-sayfa) section.blk.blk-kaynak .blog-k:hover .meta::after{transform:translateX(4px)} @media(prefers-reduced-motion:reduce){ body:not(.ic-sayfa) .sk-foto img,body:not(.ic-sayfa) section.blk.blk-kaynak .blog-k,body:not(.ic-sayfa) section.blk.blk-kaynak .blog-k::before, body:not(.ic-sayfa) section.blk.blk-kaynak .blog-k::after,body:not(.ic-sayfa) section.blk.blk-kaynak .blog-k .gorsel::after{transition:none !important} body:not(.ic-sayfa) .sektor:hover .sk-foto img{transform:none} body:not(.ic-sayfa) section.blk.blk-kaynak .blog-k:hover{transform:none !important}} /* ilk kart eşitleme (foto): önceki turdaki :first-child kuralları fotoğraf ve teknik çizim alanını eziyordu; tüm kartlar aynı ölçüye döner */ body:not(.ic-sayfa) .blk-sektor .grid.g3>.sektor:first-child{padding:0 !important} body:not(.ic-sayfa) .blk-kaynak .grid.g3>.blog-k:first-child .gorsel{aspect-ratio:32/15 !important; border-bottom:1px dashed rgba(47,79,184,.25) !important} /* kaynak çizimi etiketin altına: çizim küçülüp alta hizalanır; sol üstteki kategori etiketi ve sağ üstteki sıra numarası çizime binmez */ body:not(.ic-sayfa) section.blk.blk-kaynak .blog-k .gorsel{align-items:flex-end !important;padding:0 0 8px !important} body:not(.ic-sayfa) section.blk.blk-kaynak .blog-k .gorsel .kapak{width:80% !important} /* kaynak üst şerit: kategori etiketi ve sıra numarası çizimin üstünde kendi şeridinde; çizim altında kendi alanında. Hiçbir genişlikte üst üste binmez. */ body:not(.ic-sayfa) section.blk.blk-kaynak .blog-k .gorsel,body:not(.ic-sayfa) .blk-kaynak .grid.g3>.blog-k:first-child .gorsel{display:flex !important;flex-direction:column !important;align-items:center !important;aspect-ratio:auto !important;height:auto !important;min-height:0 !important;padding:12px 16px 12px !important;gap:8px} body:not(.ic-sayfa) section.blk.blk-kaynak .blog-k .gorsel .rz,body:not(.ic-sayfa) .blk-kaynak .grid.g3>.blog-k:first-child .gorsel .rz{position:static !important;order:-1;align-self:flex-start} body:not(.ic-sayfa) section.blk.blk-kaynak .blog-k .gorsel .kapak,body:not(.ic-sayfa) .blk-kaynak .grid.g3>.blog-k:first-child .gorsel .kapak{width:84% !important;max-width:300px} body:not(.ic-sayfa) section.blk.blk-kaynak .blog-k .gorsel::before,body:not(.ic-sayfa) .blk-kaynak .grid.g3>.blog-k:first-child .gorsel::before{top:12px !important;right:16px !important} /* ════════════════════════════════════════════════════════════════════════ BLOG KARTLARI: KONU RENKLERİ (2026-09-15) Kapak konu ailesine göre renkli geçiş + beyaz çizgi motif; kart gövdesi aynı ailenin çok açık tonu. Konu, kategori etiketinden tarayıcıda belirlenir (tasarim-yeni.js blogKartKonu); HTML'e dokunulmaz. Betik çalışmazsa varsayılan mavi kapak ve rehber motifi görünür. ════════════════════════════════════════════════════════════════════════ */ body.ic-sayfa a.blog-k{--k1:#1d4ed8;--k2:#4d8ef0;--k3:#edf3ff;--motif:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 80%22 fill=%22none%22 stroke=%22%23ffffff%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2216%22 cy=%2258%22 r=%228%22/%3E%3Ccircle cx=%2252%22 cy=%2240%22 r=%228%22/%3E%3Ccircle cx=%2288%22 cy=%2222%22 r=%228%22/%3E%3Cpath d=%22M24 54l20-10M60 36l20-10%22/%3E%3Cpath d=%22M88 14V2l16 6-16 6%22/%3E%3Cpath d=%22M12 58l3 3 5-6M48 40l3 3 5-6%22/%3E%3C/svg%3E"); background:#ffffff !important;border:1px solid rgba(31,63,102,.12) !important;border-radius:14px !important; box-shadow:0 12px 26px -22px rgba(31,63,102,.5) !important;overflow:hidden} body.ic-sayfa a.blog-k[data-konu="standart"]{--k1:#1f3f66;--k2:#2f6fbf;--k3:#edf3fb;--motif:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 80%22 fill=%22none%22 stroke=%22%23ffffff%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2260%22 cy=%2234%22 r=%2222%22/%3E%3Ccircle cx=%2260%22 cy=%2234%22 r=%2214%22/%3E%3Cpath d=%22M52 34l6 6 11-12%22/%3E%3Cpath d=%22M48 52l-6 22 12-6 6 10 4-24M72 52l6 22-12-6-6 10-4-24%22/%3E%3C/svg%3E")} body.ic-sayfa a.blog-k[data-konu="qms"]{--k1:#1e5fd0;--k2:#3a62c9;--k3:#edf2ff;--motif:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 80%22 fill=%22none%22 stroke=%22%23ffffff%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%2214%22 y=%2210%22 width=%2292%22 height=%2260%22 rx=%225%22/%3E%3Cpath d=%22M14 22h92%22/%3E%3Ccircle cx=%2221%22 cy=%2216%22 r=%221.6%22/%3E%3Ccircle cx=%2227%22 cy=%2216%22 r=%221.6%22/%3E%3Crect x=%2222%22 y=%2230%22 width=%2224%22 height=%2216%22 rx=%222%22/%3E%3Crect x=%2252%22 y=%2230%22 width=%2224%22 height=%2216%22 rx=%222%22/%3E%3Crect x=%2282%22 y=%2230%22 width=%2216%22 height=%2232%22 rx=%222%22/%3E%3Cpath d=%22M22 58h54M22 64h36%22/%3E%3C/svg%3E")} body.ic-sayfa a.blog-k[data-konu="dokuman"]{--k1:#2563a8;--k2:#4592e0;--k3:#ecf4fd;--motif:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 80%22 fill=%22none%22 stroke=%22%23ffffff%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M18 16h30l10 10v44H18z%22/%3E%3Cpath d=%22M48 16v10h10%22/%3E%3Cpath d=%22M40 8h30l10 10v44%22/%3E%3Cpath d=%22M62 2h26l10 10v42%22/%3E%3Cpath d=%22M25 36h24M25 44h24M25 52h16%22/%3E%3Crect x=%2225%22 y=%2260%22 width=%2214%22 height=%225%22 rx=%222%22/%3E%3C/svg%3E")} body.ic-sayfa a.blog-k[data-konu="denetim"]{--k1:#0f6384;--k2:#1e94bd;--k3:#eaf6fa;--motif:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 80%22 fill=%22none%22 stroke=%22%23ffffff%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%2216%22 y=%2212%22 width=%2252%22 height=%2262%22 rx=%224%22/%3E%3Crect x=%2230%22 y=%227%22 width=%2224%22 height=%229%22 rx=%223%22/%3E%3Cpath d=%22M24 32l4 4 8-8M42 32h18M24 48l4 4 8-8M42 48h18M24 64h36%22/%3E%3Ccircle cx=%2286%22 cy=%2252%22 r=%2215%22/%3E%3Cpath d=%22M97 63l12 12%22/%3E%3C/svg%3E")} body.ic-sayfa a.blog-k[data-konu="tedarik"]{--k1:#0b6f6b;--k2:#1c9c98;--k3:#e9f6f5;--motif:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 80%22 fill=%22none%22 stroke=%22%23ffffff%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2218%22 cy=%2240%22 r=%227%22/%3E%3Ccircle cx=%2258%22 cy=%2216%22 r=%227%22/%3E%3Ccircle cx=%2258%22 cy=%2264%22 r=%227%22/%3E%3Ccircle cx=%22100%22 cy=%2240%22 r=%229%22/%3E%3Ccircle cx=%2258%22 cy=%2240%22 r=%224%22/%3E%3Cpath d=%22M25 38l26-18M25 42l26 18M65 18l28 17M65 62l28-17M22 40h32M62 40h29%22/%3E%3C/svg%3E")} body.ic-sayfa a.blog-k[data-konu="cekirdek"]{--k1:#2f4fb8;--k2:#5677dc;--k3:#eef1fd;--motif:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 80%22 fill=%22none%22 stroke=%22%23ffffff%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%2220%22 y=%228%22 width=%2218%22 height=%2218%22 rx=%223%22/%3E%3Crect x=%2246%22 y=%228%22 width=%2218%22 height=%2218%22 rx=%223%22/%3E%3Crect x=%2272%22 y=%228%22 width=%2218%22 height=%2218%22 rx=%223%22/%3E%3Crect x=%2220%22 y=%2232%22 width=%2218%22 height=%2218%22 rx=%223%22/%3E%3Crect x=%2246%22 y=%2232%22 width=%2218%22 height=%2218%22 rx=%223%22/%3E%3Crect x=%2272%22 y=%2232%22 width=%2218%22 height=%2218%22 rx=%223%22/%3E%3Crect x=%2220%22 y=%2256%22 width=%2218%22 height=%2218%22 rx=%223%22/%3E%3Crect x=%2246%22 y=%2256%22 width=%2218%22 height=%2218%22 rx=%223%22/%3E%3Cpath d=%22M24 17l4 4 7-8M50 17l4 4 7-8M76 17l4 4 7-8M24 41l4 4 7-8M50 41l4 4 7-8M24 65l4 4 7-8%22/%3E%3Cpath d=%22M98 20v40%22/%3E%3C/svg%3E")} body.ic-sayfa a.blog-k[data-konu="olcum"]{--k1:#1459b0;--k2:#2396d4;--k3:#ebf4fc;--motif:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 80%22 fill=%22none%22 stroke=%22%23ffffff%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M10 8v64h104%22/%3E%3Cpath d=%22M10 22h104M10 58h104%22 stroke-dasharray=%224 4%22/%3E%3Cpath d=%22M18 46l12-10 12 6 12-14 12 8 12-4 12 10 12-12%22/%3E%3Ccircle cx=%2230%22 cy=%2236%22 r=%222.5%22/%3E%3Ccircle cx=%2254%22 cy=%2228%22 r=%222.5%22/%3E%3Ccircle cx=%2278%22 cy=%2232%22 r=%222.5%22/%3E%3Ccircle cx=%22102%22 cy=%2230%22 r=%222.5%22/%3E%3C/svg%3E")} body.ic-sayfa a.blog-k[data-konu="rapor"]{--k1:#34469f;--k2:#5a78e6;--k3:#eef0fc;--motif:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 80%22 fill=%22none%22 stroke=%22%23ffffff%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M10 72h104%22/%3E%3Crect x=%2218%22 y=%2244%22 width=%2214%22 height=%2228%22 rx=%222%22/%3E%3Crect x=%2240%22 y=%2230%22 width=%2214%22 height=%2242%22 rx=%222%22/%3E%3Crect x=%2262%22 y=%2238%22 width=%2214%22 height=%2234%22 rx=%222%22/%3E%3Crect x=%2284%22 y=%2218%22 width=%2214%22 height=%2254%22 rx=%222%22/%3E%3Cpath d=%22M14 36l22-14 22 8 22-12 24-10%22/%3E%3Cpath d=%22M96 6l8 2-2 8%22/%3E%3C/svg%3E")} body.ic-sayfa a.blog-k[data-konu="uretim"]{--k1:#155e75;--k2:#2a8db3;--k3:#eaf4f7;--motif:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 80%22 fill=%22none%22 stroke=%22%23ffffff%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M10 40h86%22/%3E%3Cpath d=%22M96 30l18 10-18 10z%22/%3E%3Cpath d=%22M30 40l-12-22M30 40l-12 22M54 40l-12-22M54 40l-12 22M78 40l-12-22M78 40l-12 22%22/%3E%3Ccircle cx=%2218%22 cy=%2218%22 r=%223%22/%3E%3Ccircle cx=%2242%22 cy=%2262%22 r=%223%22/%3E%3C/svg%3E")} body.ic-sayfa a.blog-k[data-konu="rehber"]{--k1:#1d4ed8;--k2:#4d8ef0;--k3:#edf3ff;--motif:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 80%22 fill=%22none%22 stroke=%22%23ffffff%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2216%22 cy=%2258%22 r=%228%22/%3E%3Ccircle cx=%2252%22 cy=%2240%22 r=%228%22/%3E%3Ccircle cx=%2288%22 cy=%2222%22 r=%228%22/%3E%3Cpath d=%22M24 54l20-10M60 36l20-10%22/%3E%3Cpath d=%22M88 14V2l16 6-16 6%22/%3E%3Cpath d=%22M12 58l3 3 5-6M48 40l3 3 5-6%22/%3E%3C/svg%3E")} body.ic-sayfa a.blog-k:hover,body.ic-sayfa a.blog-k:focus-visible{border-color:color-mix(in srgb,var(--k1) 45%,transparent) !important; box-shadow:0 22px 38px -26px color-mix(in srgb,var(--k1) 70%,transparent) !important} body.ic-sayfa a.blog-k .gorsel{position:relative;height:150px !important;overflow:hidden;border-bottom:0 !important; background: radial-gradient(80% 120% at 100% 0%,rgba(255,255,255,.24),transparent 55%), radial-gradient(60% 90% at 0% 100%,rgba(0,0,0,.12),transparent 60%), linear-gradient(135deg,var(--k1) 0%,var(--k2) 100%) !important} body.ic-sayfa a.blog-k .gorsel::after{content:"" !important;position:absolute;inset:0;opacity:1 !important;pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.10) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.10) 1px,transparent 1px) !important; background-size:20px 20px !important; -webkit-mask-image:linear-gradient(200deg,#000 10%,transparent 85%) !important; mask-image:linear-gradient(200deg,#000 10%,transparent 85%) !important} body.ic-sayfa a.blog-k .gorsel::before{content:"";position:absolute;right:18px;bottom:14px;width:132px;height:88px;z-index:1; background:var(--motif) center/contain no-repeat;opacity:.92; transition:transform .5s cubic-bezier(.2,.8,.25,1)} body.ic-sayfa a.blog-k:hover .gorsel::before{transform:translate(-4px,-3px) scale(1.05)} body.ic-sayfa a.blog-k .gorsel .rz{position:absolute !important;left:16px;top:14px;z-index:2;background:#ffffff !important; color:var(--k1) !important;border:0 !important;border-radius:999px !important;padding:5px 11px !important; box-shadow:0 4px 12px -6px rgba(0,0,0,.35) !important;max-width:calc(100% - 170px); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} body.ic-sayfa a.blog-k .ic{background:linear-gradient(180deg,var(--k3) 0%,#ffffff 78%) !important; border-top:3px solid var(--k2)} body.ic-sayfa a.blog-k:hover h3{color:var(--k1) !important} body.ic-sayfa a.blog-k .meta{color:color-mix(in srgb,var(--k1) 70%,#556172) !important} @media(max-width:600px){body.ic-sayfa a.blog-k .gorsel{height:132px !important}body.ic-sayfa a.blog-k .gorsel::before{width:112px;height:74px}} @media(prefers-reduced-motion:reduce){body.ic-sayfa a.blog-k .gorsel::before{transition:none}body.ic-sayfa a.blog-k:hover .gorsel::before{transform:none}}