/* ════════════════════════════════════════════════════════════════════ TeklifVerisi — TEMA YÜKSELTME (ui-ux-pro-max) Yalnızca GÖRSEL katman. Mevcut HTML/JS/ID/akış DEĞİŞMEZ. Sayfaya tek satırla bağlanır: Geri almak için o satırı silmek yeterli. Class yoksa hiçbir şey yapmaz. ════════════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@600;700;800&family=Inter:wght@400;500;600;700&family=Fraunces:ital,opsz,wght@1,9..144,500&display=swap'); /* ═══ TASARIM BELİRTEÇLERİ — TEK SÖZLÜK ═══════════════════════════ Konsey ölçümü (1 Eylül 2026): depoda 506 farklı hex, 7.072 kullanım; 53 sayfanın 37'sinde hiç CSS değişkeni yok, olan 16 sayfada 7 AYRI sözlük var ve --accent üç sayfada üç farklı renk demek. Görsel dil böyle sürdürülemez. BU BLOK DAVRANIŞ DEĞİŞTİRMEZ: değerler, en çok kullanılan mevcut renklerin kendisi. Yeni kod ham hex yerine bunları kullanır; eski kodun taşınması ayrı iş. --tv- öneki, sayfaların kendi (çakışan) --accent/--border adlarıyla karışmasın diye. Kontrast sözü: her metin belirteci, yanına yazılan zeminde WCAG AA 4.5:1 sağlar (1 Eylül 2026 ölçümü). */ :root{ /* marka */ --tv-lacivert-900:#0B1F45; /* koyu zemin */ --tv-lacivert-800:#142E5E; /* koyu kart */ --tv-mavi-600:#1A4FA0; /* birincil eylem, beyaz üstünde 7.0:1 */ --tv-mavi-400:#5B9BF0; /* vurgu — YALNIZ koyu zeminde metin (5.4:1) */ --tv-mavi-50:#EEF4FD; /* metin */ --tv-metin-900:#1A2C4A; /* ana metin, beyazda 13.97:1 */ --tv-metin-600:#5A6A80; /* ikincil metin, beyazda 5.51:1 */ --tv-koyu-metin-1:#E8EEF8; /* koyu zeminde ana metin */ --tv-koyu-metin-2:#8BA8D4; /* koyu zeminde ikincil, lacivertte 6.67:1 */ /* yüzey ve çizgi */ --tv-yuzey:#FFFFFF; --tv-yuzey-2:#F7F9FC; --tv-cizgi:#D1D9E6; --tv-cizgi-yumusak:#E2E8F0; /* durum — açık zemin üçlüleri (yazı / zemin / kenar) */ --tv-olumlu:#0F7A57; --tv-olumlu-zemin:#F0FDF4; --tv-olumlu-kenar:#86EFAC; --tv-uyari:#854F0B; --tv-uyari-zemin:#FEF3E0; --tv-uyari-kenar:#FDE68A; --tv-hata:#991B1B; --tv-hata-zemin:#FEE2E2; --tv-hata-kenar:#FCA5A5; /* yazı */ --tv-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif; --tv-basli:'Inter Tight','Inter',-apple-system,sans-serif; --tv-serif:'Fraunces',Georgia,'Times New Roman',serif; --tv-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; /* köşe ve gölge */ --tv-r-sm:8px; --tv-r-md:12px; --tv-r-lg:16px; --tv-r-hap:999px; --tv-golge-1:0 1px 2px rgba(11,31,69,0.06); --tv-golge-2:0 6px 18px rgba(11,31,69,0.08); } :root{--tv-ease:cubic-bezier(.22,1,.36,1)} /* — Tipografi: gerçek font eşleşmesi (gövde Inter, başlık Inter Tight) — */ body{font-family:var(--tv-sans)} h1,h2,h3,.hero h1,.logo-text,.hstat-n,.stat-n,.upload-zone h3,.finding h4, .cmp-table th,.btn-main,.hero-btn-p,.btn-pri,.btn-sec,.chat-snd,.baslat-title, .acente-header h2{font-family:'Inter Tight','Inter',sans-serif;letter-spacing:-.01em} /* — NAV: cam efekti — */ .nav{background:rgba(11,31,69,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 1px 0 rgba(91,155,240,.12)} .logo-text{font-size:16px;font-weight:700} /* — HERO: daha iri, editöryel başlık + derinlik — */ .hero{background:radial-gradient(120% 130% at 82% -20%,#163571 0%,#0B1F45 58%)} .hero h1{font-size:clamp(28px,4.6vw,52px);font-weight:800;line-height:1.06;letter-spacing:-.03em} .hero h1 em{font-family:'Fraunces',serif;font-style:italic;font-weight:500;color:#5B9BF0} .hero-badge{border-radius:30px} .hero-btn-p{background:var(--tv-mavi-400);color:#08172f;transition:transform .15s var(--tv-ease),box-shadow .15s var(--tv-ease),background .15s} .hero-btn-p:hover{background:#7eb0f5;transform:translateY(-2px);box-shadow:0 12px 30px rgba(91,155,240,.45)} .hero-btn-s{transition:all .15s var(--tv-ease)}.hero-btn-s:hover{transform:translateY(-2px)} .btn-p{transition:transform .15s var(--tv-ease),box-shadow .15s var(--tv-ease),background .15s} .btn-p:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(26,79,160,.35)} .hstat-n,.stat-n{font-weight:800} /* — Hero giriş animasyonu (yalnızca CSS, statik hero) — */ @keyframes tvUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}} .hero-left>*{animation:tvUp .6s var(--tv-ease) both} .hero-badge{animation-delay:.02s}.hero-left h1{animation-delay:.08s} .hero-proof,.tags,.proof{animation-delay:.16s}.hero-btns,.btns{animation-delay:.24s} .hero-right{animation:tvUp .7s var(--tv-ease) both .2s} /* — STEP BAR: derinlik + aktif parıltı — */ .stepbar{background:linear-gradient(180deg,#0F2952,#0d2348)} .snum.active{box-shadow:0 0 0 4px rgba(91,155,240,.18)} .snum.done{box-shadow:0 0 0 4px rgba(93,202,165,.16)} /* — BUTONLAR: yumuşak gölge + hover yükselme — */ .btn-main,.btn-pri{transition:transform .15s var(--tv-ease),box-shadow .15s var(--tv-ease),background .15s} .btn-main:not(:disabled):hover,.btn-pri:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(26,79,160,.28)} .btn-sec{transition:all .15s var(--tv-ease)}.btn-sec:hover{transform:translateY(-1px)} /* — KARTLAR & GİRİŞ ALANLARI — */ .upload-zone{border-radius:14px;transition:all .18s var(--tv-ease)} .upload-zone:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(26,79,160,.1)} .uslot{border-radius:12px;transition:all .15s var(--tv-ease)}.uslot:hover{transform:translateY(-1px)} .card,.city-card,.kapi,.fcard{transition:transform .16s var(--tv-ease),box-shadow .16s var(--tv-ease),border-color .16s var(--tv-ease)} .card:hover,.city-card:hover,.kapi:hover,.fcard:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(11,31,69,.08)} .field input:focus,.field select:focus,.field textarea:focus,.chat-inp:focus{box-shadow:0 0 0 3px rgba(91,155,240,.18)} .finding{box-shadow:0 1px 2px rgba(11,31,69,.04)} /* — Mobil: hero başlığı okunur kalsın — */ @media(max-width:768px){.hero h1{font-size:clamp(24px,7.5vw,32px)!important}} @media (prefers-reduced-motion: reduce){ .hero-left>*,.hero-right{animation:none} *{transition:none!important} } /* — MENÜ: konsept dili — belirgin linkler, aralarında ince dikey çizgi — (Ana sayfa konseptiyle birebir: 13.5px/600, #D6E2F5, ayraçlar, beyaz hover. Sayfa içi .nl kurallarını özgüllükle ezer; işaretleme değişmez.) */ .nav .nav-links{display:flex;gap:22px;align-items:center;position:static;transform:none;margin:0 auto} .nav .nav-links .nl{font-size:13.5px;font-weight:600;color:#D6E2F5;padding:8px 2px;border-radius:0;background:none;position:relative;transition:color .15s} .nav .nav-links .nl:hover{color:#fff;background:none} .nav .nav-links .nl.on{color:#fff;background:none;box-shadow:inset 0 -2px 0 #5B9BF0} .nav .nav-links .nl+.nl::before{content:'';position:absolute;left:-11px;top:50%;transform:translateY(-50%);width:1px;height:14px;background:rgba(139,168,212,.4)} /* — MOBİL MENÜ: hamburger yerine iki satır — üstte logo+giriş, altta linkler. Konseptte onaylanan davranış; ekran daralırsa link satırı parmakla kayar. */ @media(max-width:768px){ .nav{flex-wrap:wrap;row-gap:2px;padding:10px 16px} .nav .nav-links{display:flex!important;order:5;width:100%;overflow-x:auto;gap:9px;margin:6px 0 0;justify-content:flex-start;scrollbar-width:none} .nav .nav-links::-webkit-scrollbar{display:none} .nav .nav-links .nl{font-size:12.5px;padding:6px 0;white-space:nowrap} .nav .nav-links .nl+.nl::before{left:-5px;height:12px} .nav .nav-mobile-btn{display:none!important} .nav-mobile-menu{display:none!important} } /* — ESKİ BÖLÜM ŞERİDİ (.sdiv) KONSEPT DİLİNE — Mavi çubuklu tam genişlik bant, konseptteki sessiz bölüm etiketine dönüşür: ortalanmış, büyük harfli, çubuksuz. İşaretleme değişmez. */ .sdiv{justify-content:center;padding:34px 16px 4px;background:none} .sdiv .sdiv-line{display:none} .sdiv .sdiv-label{background:none;color:#1A4FA0;font-weight:700;font-size:11px;letter-spacing:.13em;padding:0} /* ── FOOTER ORTAK BAĞLANTILAR — shared.js ekler ─────────────────── */ .tv-foot-baglar{display:flex;gap:14px;flex-wrap:wrap;align-items:center} .tv-foot-baglar a,.foot-links .tv-sosyal{font-size:11px;color:#8BA8D4;text-decoration:none} .tv-foot-baglar a:hover,.foot-links .tv-sosyal:hover{color:#8BBCF5} /* KÜNYE. Telif satırından bir tık soluk: gerekli ama okunması gereken ilk şey değil. Dar ekranda satır satır iniyor. */ /* Toplu işlemden sonraki geri-al şeridi. Masanın başlığının hemen altında: yaptığı işin sonucunu gördüğü yerde dursun. */ .masa-gerial{display:flex;align-items:center;gap:10px;flex-wrap:wrap; font-size:12.5px;color:#DCE7F7;background:rgba(91,155,240,.12); border:1px solid rgba(91,155,240,.3);border-radius:9px;padding:8px 12px;margin:0 0 10px} /* Sütun başlığındaki toplu düğme, kart düğmelerinden daha sessiz: birincil eylem değil, temizlik. */ .msuttoplu{margin-top:8px;font-size:11px;padding:4px 9px;opacity:.75} .msuttoplu:hover{opacity:1} .tv-kunye{font-size:10.5px;line-height:1.7;color:#8BA8D4;margin:10px 0 4px;max-width:78ch} .tv-kunye a{color:var(--tv-koyu-metin-2);text-decoration:none} .tv-kunye a:hover{color:#8BBCF5} footer .tv-sosyal{display:inline-flex;align-items:center;gap:5px} footer .tv-sosyal svg{display:block} /* ── MOBİL DOKUNMA HEDEFLERİ — denetim bulgusu (2026-08-20): menü 26px, footer 12px yükseklikteydi; öneri 44px. Yazı boyutu değil dokunma alanı büyütülüyor ki tasarım bozulmasın. ─────── */ @media(max-width:768px){ /* Dokunma hedefi dikeyde büyür; yatayda ŞİŞMEZ — 13px yan dolgu 390px ekranda "Pazar"ı dışarı itiyordu (menü kaydırılabilir ama görünür ipucu yok, bağlantı fiilen kayboluyordu). */ .nav .nav-links .nl{padding:12px 4px;font-size:13px} footer .foot-links a,footer .tv-foot-baglar a,footer .tv-sosyal{ font-size:12.5px;padding:11px 8px;display:inline-flex;align-items:center} footer .foot-links,footer .tv-foot-baglar{gap:4px} .raf-k .git,.card-arr{display:inline-block;padding:8px 0} } /* ── HERO ORTAK CTA — ana sayfanın beyaz birincil düğme dili. Üç iç sayfanın hero'su aynı düğmeyi kullanır (tutarlılık denetimi bulgusu, 2026-08-20). ─────────────────────────────────────────── */ .hero-cta-b{display:inline-block;background:#fff;color:#0B1F45;font-weight:700;font-size:13.5px; padding:11px 22px;border-radius:10px;text-decoration:none;margin-top:4px; transition:transform .15s,box-shadow .15s} .hero-cta-b:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,.35)} /* Aynı ölçünün açık-zemin varyantları: örnek rapor/sunum sayfalarının CTA'ları hero'dakiyle AYNI boyutta olsun diye tek aileden türer. .mavi = ana eylem (dolgulu), .cizgili = ikincil (kenarlıklı). */ .hero-cta-b.mavi{background:#1A4FA0;color:#fff} .hero-cta-b.mavi:hover{box-shadow:0 10px 28px rgba(26,79,160,.35)} .hero-cta-b.cizgili{background:#fff;color:#1A4FA0;border:1.5px solid #C7D8F2} .hero-cta-b.cizgili:hover{box-shadow:0 10px 28px rgba(26,79,160,.18)} /* Buton çifti: aralık inline stille değil buradan. Geniş ekranda yan yana 10px; dar ekranda alt alta ve SOLDAN HİZALI — inline margin-left mobilde ikinci butonu girintili bırakıyordu. */ .hero-cta-b+.hero-cta-b{margin-left:10px} @media(max-width:520px){ .hero-cta-b{display:block;width:fit-content} .hero-cta-b+.hero-cta-b{margin-left:0;margin-top:10px} /* .hero-btns gibi flex kapsayıcılar dar ekranda dikeye döner; boşluğu gap verdiği için kardeş marjı sıfırlanır (yoksa çift boşluk olur). */ .hero-btns{flex-direction:column;align-items:flex-start} .hero-btns .hero-cta-b+.hero-cta-b{margin-top:0} .alt-cta .hero-cta-b,.ornek-alt .hero-cta-b{margin-left:auto;margin-right:auto} .alt-cta .hero-cta-b+.hero-cta-b,.ornek-alt .hero-cta-b+.hero-cta-b{margin-top:10px} } /* ── FOOTER STANDARDI — ince footer'lı eski sayfalar (hesaplama vb.) karsilastir/risk ile aynı gövdeye çekilir: mavi üst şerit, bağlantı satırı, tam genişlik telif satırı. Standart footer'larda değer zaten aynı olduğundan görünümleri değişmez. ───────────────────── */ footer{border-top:3px solid #1A4FA0!important;padding:18px 28px!important; display:flex!important;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px} footer .footer-logo{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:500;color:#E8EEF8} footer .footer-copy,footer .foot-copy{width:100%;padding-top:10px;margin-top:2px; border-top:.5px solid rgba(255,255,255,.06);font-size:10px;color:#8BA8D4} /* ── ARA BANT ORTAK DİLİ — üst menüdeki ayraç çizgisi bant öğelerinde de kullanılır; bant sola yaslanır (risk adım çubuğu gibi). ────── */ .tab-nav{max-width:none!important;margin:0!important;gap:7px} .tab-nav .tb{position:relative} .tab-nav .tb+.tb::before{content:'';position:absolute;left:-4px;top:50%;transform:translateY(-50%);width:1px;height:14px;background:rgba(139,168,212,.4)}