/* ============================================================================ Lykos — mobil / tablet responsive katman ---------------------------------------------------------------------------- Sayfa duzeni satir ici (inline) style attribute'lariyla yazildigi icin buradaki kurallar attribute selector + !important ile ezer. ONEMLI: Sayfalar React ile render ediliyor ve React style attribute'unu YENIDEN SERILESTIRIYOR. Kaynakta "padding:104px 40px" yazan deger DOM'da "padding: 104px 40px" (iki nokta sonrasi bosluk), "repeat(3,1fr)" ise "repeat(3, 1fr)" olur; "0" degeri "0px" olur. Asagidaki seciciler bu NORMALIZE EDILMIS bicime gore yazilmistir. Yeni kural eklerken degeri once DevTools'ta Elements > style attribute'undan kopyalayin. dc-runtime stillerini sonuna EKLER, yani bu dosyadan SONRA gelir. Cakismayi onlemek icin helmet'in !important kullandigi ozellikler (border-radius, transform, box-shadow, opacity) burada KULLANILMAZ. ========================================================================== */ /* ============================================================================ TIPOGRAFI SISTEMI ---------------------------------------------------------------------------- Eskiden Archivo + Figtree kullaniliyordu; ikisi de Google Fonts'un en cok kullanilan varsayilanlari ve sayfaya "sablondan cikmis" havasi veriyordu. Yerine kurumsal karakterli bir ucleme: - Source Serif 4 : baslik. Metin dizgisi icin tasarlanmis, belge/hukuk otoritesi tasiyan bir serif. Tam Turkce destegi var. - IBM Plex Sans : arayuz ve govde metni. Muhendislik/kurum karakteri. - IBM Plex Mono : kunye verisi (esas no, tarih, tutar). Dosya kaydi hissi. Satir ici style'lar font-family tasidigi icin !important sart. ========================================================================== */ :root { --lykos-display: 'Source Serif 4', 'Iowan Old Style', Georgia, serif; --lykos-ui: 'IBM Plex Sans', system-ui, -apple-system, sans-serif; --lykos-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace; } body, p, li, span, div, label, dt, dd, button, input, select, textarea { font-family: var(--lykos-ui) !important; } h1, h2, h3, [style*="Archivo"] { font-family: var(--lykos-display) !important; font-weight: 600 !important; letter-spacing: -.015em !important; } /* Logo kelimesi serif olmasin — marka isareti sans olarak daha net okunuyor. */ header nav [style*="Archivo"] { font-family: var(--lykos-ui) !important; font-weight: 600 !important; letter-spacing: -.02em !important; } /* Kunye verisi ve sayilar */ .lyk-mono, .lyk-num { font-family: var(--lykos-mono) !important; font-variant-numeric: tabular-nums; } /* ============================================================================ HERO — "cevap karti" ---------------------------------------------------------------------------- Onceki hero ortalanmis yigin + rozet hapi + 14 ucusan kart + 3'lu ok akisi idi; hicbiri bilgi tasimiyordu. Yerine urunun tezini TEK ornekte gosteren bir cevap karti kondu: avukatin kendi dosyasindan gelen soru, atifli cevap, dayandigi belge ve ciktinin dosyaya nasil islendigi. Hero'nun isi ilk saniyede su iki seyi soylemek: 1) yapay zeka SIZIN dosyaniz uzerinde calisiyor (genel sohbet degil), 2) her cevap kaynagiyla geliyor (avukatin "uydurur mu" itirazi). ========================================================================== */ .lyk-ans { border-radius: 6px !important; overflow: hidden; } /* Atif isareti ile kaynak satiri arasindaki bag. Urunun vaadi "dogrulanabilirlik" oldugu icin bunu dekorasyon degil, calisan bir etkilesim olarak gosteriyoruz. JS gerekmiyor. */ .lyk-c { border-bottom: 1px dotted rgba(169, 116, 26, .6); } .lyk-s { border-radius: 4px; transition: background-color .18s ease; } .lyk-s:hover { background: rgba(169, 116, 26, .09); } /* Uc ciktinin ortak dosyadan dallandigini gosteren omurga. Son dalda cizgi yok. */ .lyk-branch:last-child .lyk-spine { display: none; } /* KVKK maskeleme yer tutucusu — iddiayi gorsel olarak kanitlayan detay. */ .lyk-mask { white-space: nowrap; } @media (max-width: 1024px) { .lyk-hero-grid { grid-template-columns: 1fr !important; gap: 48px !important; } .lyk-hero-h1 { font-size: 46px !important; } .lyk-ans { max-width: 560px; } } @media (max-width: 900px) { .lyk-hero [style*="max-width: 1220px"] { padding-top: 44px !important; padding-bottom: 52px !important; } .lyk-hero-grid { grid-template-columns: 1fr !important; gap: 40px !important; } .lyk-hero-h1 { font-size: clamp(32px, 8.4vw, 44px) !important; line-height: 1.05 !important; } /* Masaustunde satiri elle kirdik; dar ekranda text-wrap:balance daha iyi dagitiyor. */ .lyk-hero-h1 br { display: none; } .lyk-hero-lede { font-size: 16.5px !important; } .lyk-proof { gap: 28px !important; } } @media (max-width: 560px) { .lyk-proof { gap: 22px !important; } } /* ============================================================================ iOS KAYDIRMA DUZELTMESI — SILMEYIN ---------------------------------------------------------------------------- dc-runtime (support.js icindeki FULL_PAGE_CSS) her sayfaya sunu enjekte eder: html,body{height:100%;margin:0}#dc-root,#dc-root>.sc-host{height:100%} Bunun iki sonucu var: 1) html/body/#dc-root/.sc-host ekran yuksekliginde (orn. 664px) sabitlenir, icerik ise cok daha uzundur (orn. 13977px). 2) Sayfa sarmalayicisindaki satir ici "overflow-x: hidden", CSS kurali geregi overflow-y'yi "auto" yapar (bir eksen visible degilse digeri auto olur). Boylece asil kaydirilabilir eleman SAYFA degil, ic ice bir kutu olur. Masaustu tarayicilar bunu tolere eder; iOS Safari/Chrome (WebKit) ETMEZ — dokunmatik kaydirma calismaz. Asagidaki kurallar bunu duzeltir. FULL_PAGE_CSS !important kullanmadigi icin bu kurallar onu ezer. ========================================================================== */ html, body { height: auto !important; min-height: 100% !important; } #dc-root, #dc-root > .sc-host { height: auto !important; min-height: 100vh !important; } /* Sarmalayicinin yatay tasmayi kirpmasi sursun ama dikeyde kaydirma kutusu olusturmasin. "clip", "hidden"in aksine diger ekseni auto'ya zorlamaz. */ @supports (overflow: clip) { [style*="overflow-x: hidden"] { overflow-x: clip !important; overflow-y: visible !important; } } /* ============================================================================ SABIT MENU ARKA PLANI (iOS) ---------------------------------------------------------------------------- Header satir ici olarak background:rgba(247,246,243,.85) + backdrop-filter kullaniyor. WebKit'te bulaniklik uygulanmayinca menu yari saydam kaliyor ve arkasindaki metin okunacak kadar geciyor. Prefixli surumu ekliyoruz; backdrop-filter hic desteklenmiyorsa arka plani tamamen opak yapiyoruz. ========================================================================== */ header[style*="backdrop-filter"] { -webkit-backdrop-filter: blur(14px); } @supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) { header[style*="backdrop-filter"] { background: #f7f6f3 !important; } } /* ============================================================================ ETKILESIM DURUMLARI (hover / focus) ---------------------------------------------------------------------------- Bu efektler eskiden satir ici onmouseover="this.style..." handler'lariyla yapiliyordu. dc-runtime React kullandigi icin React bu attribute'lari prop olarak aliyor, degeri string oldugundan listener'a donusturmuyor: efektler HIC calismiyordu ve her hover/focus'ta "React error #231" firlatiyordu. 134 satir ici handler kaldirildi, davranis buraya tasindi. YENI ELEMAN EKLERKEN: satir ici on* handler YAZMAYIN, asagidaki siniflari kullanin. ========================================================================== */ /* Sari birincil buton / CTA */ .lyk-h-cta:hover { background: #ffca57 !important; } /* Acik zeminli kart ve liste ogeleri */ .lyk-h-card:hover { background: #f1efe9 !important; } a.lyk-h-card:hover { transform: translateY(-3px); } /* Beyaz zeminli kart */ .lyk-h-card-white:hover { background: #efede9 !important; } /* Cerceveli ikincil buton */ .lyk-h-outline:hover { border-color: rgba(0, 0, 0, .35) !important; } /* Form alani odak cercevesi */ .lyk-h-field:focus { border-color: #f4b73f !important; } /* WhatsApp sabit butonu */ .lyk-h-fab:hover { transform: translateY(-3px) scale(1.05); } /* Klavye erisilebilirligi: alanlarda outline:none satir ici tanimli oldugu icin gorunur bir odak halkasi yoktu. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid #a9741a !important; outline-offset: 2px !important; } @media (prefers-reduced-motion: reduce) { a.lyk-h-card:hover, .lyk-h-fab:hover { transform: none; } } /* --------------------------------------------------------------------------- TABLET — <= 1024px -------------------------------------------------------------------------- */ @media (max-width: 1024px) { [style*="max-width: 1220px"] { padding-left: 28px !important; padding-right: 28px !important; } [style*="padding: 132px 40px 84px"] { padding-top: 84px !important; padding-bottom: 60px !important; } [style*="padding: 104px 40px"] { padding-top: 76px !important; padding-bottom: 76px !important; } [style*="grid-template-columns: repeat(5, 1fr)"] { grid-template-columns: repeat(3, 1fr) !important; } [style*="grid-template-columns: repeat(4, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; } [style*="grid-template-columns: 5fr 7fr"] { grid-template-columns: 1fr !important; } } /* --------------------------------------------------------------------------- MOBIL — <= 900px : tek kolona in -------------------------------------------------------------------------- */ @media (max-width: 900px) { /* --- 1) Izgaralar tek kolona --- */ [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; } [style*="grid-template-columns: repeat(3, 1fr)"] { grid-template-columns: 1fr !important; } [style*="grid-template-columns: repeat(4, 1fr)"] { grid-template-columns: 1fr !important; } [style*="grid-template-columns: repeat(5, 1fr)"] { grid-template-columns: 1fr !important; } [style*="grid-template-columns: 5fr 7fr"] { grid-template-columns: 1fr !important; } /* footer: 4 kolon -> 2 kolon (link listeleri tek kolonda cok uzuyor) */ [style*="grid-template-columns: 1.6fr 1fr 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; } /* --- 2) Kapsayici yatay padding --- */ [style*="max-width: 1220px"] { padding-left: 20px !important; padding-right: 20px !important; } /* --- 3) Dikey ritmi kis. Tek degerli "padding: 40px" once gelir; cok degerli kaliplar sonra gelip onu ezer (esit ozgulluk, son kural kazanir). --- */ [style*="padding: 40px;"] { padding: 24px !important; } [style*="padding: 36px"] { padding: 24px !important; } [style*="padding: 34px"] { padding: 22px !important; } [style*="padding: 30px"] { padding: 22px !important; } [style*="padding: 28px"] { padding: 20px !important; } [style*="padding: 132px 40px 84px"] { padding: 56px 20px 40px !important; } [style*="padding: 104px 40px"] { padding: 52px 20px !important; } [style*="padding: 88px 40px 72px"] { padding: 48px 20px 40px !important; } [style*="padding: 88px 40px 56px"] { padding: 48px 20px 36px !important; } [style*="padding: 88px 40px"] { padding: 48px 20px !important; } [style*="padding: 72px 40px"] { padding: 44px 20px !important; } [style*="padding: 64px 40px 40px"] { padding: 40px 20px 28px !important; } [style*="padding: 40px 40px 72px"] { padding: 24px 20px 40px !important; } [style*="padding: 40px 40px 0px"] { padding: 20px 20px 0 !important; } [style*="padding: 40px 34px"] { padding: 26px 20px !important; } [style*="padding: 22px 40px"] { padding: 18px 20px !important; } [style*="padding: 22px 0px"] { padding: 16px 0 !important; } [style*="padding: 0px 40px"] { padding-left: 20px !important; padding-right: 20px !important; } /* --- 4) Genis bosluklari kis --- */ [style*="gap: 72px"] { gap: 32px !important; } [style*="gap: 64px"] { gap: 30px !important; } [style*="gap: 48px"] { gap: 26px !important; } [style*="gap: 40px"] { gap: 24px !important; } [style*="gap: 32px"] { gap: 20px !important; } [style*="gap: 28px"] { gap: 18px !important; } [style*="gap: 26px"] { gap: 18px !important; } [style*="gap: 24px"] { gap: 18px !important; } [style*="margin-bottom: 64px"] { margin-bottom: 32px !important; } [style*="margin-bottom: 52px"] { margin-bottom: 28px !important; } [style*="margin-bottom: 44px"] { margin-bottom: 26px !important; } [style*="margin-bottom: 36px"] { margin-bottom: 24px !important; } /* --- 5) Tipografi olcekle --- */ h1 { font-size: clamp(28px, 7.6vw, 42px) !important; line-height: 1.08 !important; } h2 { font-size: clamp(23px, 5.8vw, 31px) !important; line-height: 1.16 !important; } h3 { font-size: clamp(17px, 4.2vw, 20px) !important; line-height: 1.3 !important; } [style*="font-size: 19px"] { font-size: 16.5px !important; } [style*="font-size: 18px"] { font-size: 16px !important; } [style*="font-size: 17px"] { font-size: 15.5px !important; } /* --- 5b) Hero akis seridi (UYAP verisi -> Lykos -> Gercek sonuc): 3 kart x min-width 190px yan yana sigmaz, dikey istifle. --- */ [style*="align-items: stretch"][style*="flex-wrap: nowrap"] { flex-direction: column !important; gap: 10px !important; } [style*="align-items: stretch"][style*="flex-wrap: nowrap"] > div { min-width: 0 !important; } /* dikey istifte ok saga degil asagi baksin */ [style*="align-items: stretch"][style*="flex-wrap: nowrap"] > div[style*="padding: 0px 6px"] { justify-content: center !important; } [style*="align-items: stretch"][style*="flex-wrap: nowrap"] > div[style*="padding: 0px 6px"] svg { transform: rotate(90deg); } /* --- 6) Ekran goruntusu kutulari --- */ [style*="aspect-ratio: 20 / 9"] { aspect-ratio: 16 / 10 !important; } [style*="aspect-ratio: 2560 / 1271"] { aspect-ratio: 16 / 10 !important; } [style*="min-height: 340px"] { min-height: 200px !important; } /* --- 7) Karsilastirma tablosu: yatay kaydirilabilir --- */ div:has(> table) { overflow-x: auto !important; -webkit-overflow-scrolling: touch; } div:has(> table) > table { min-width: 620px !important; } /* --- 8) WhatsApp butonu icerigi kapatmasin --- */ a[aria-label="WhatsApp ile yaz"] { width: 48px !important; height: 48px !important; right: 14px !important; bottom: 14px !important; } a[aria-label="WhatsApp ile yaz"] svg { width: 24px !important; height: 24px !important; } /* --- 9) HEADER / NAV — iki satira sar, linkler yatay kaydirilir. Secicilerde [style] kullanmak ozgullugu yukseltir; boylece yukaridaki [style*="gap: 32px"] / [style*="gap: 34px"] kurallari bunlari ezemez. --- */ header nav[style] { height: auto !important; padding: 10px 20px !important; flex-wrap: wrap !important; gap: 8px 14px !important; } header nav[style] > a[style] svg { width: 32px !important; height: 32px !important; } header nav[style] > a[style] span[style*="font-size: 21px"] { font-size: 18px !important; } /* menu linkleri: 3. sira, tam genislik, yatay kaydirma */ header nav[style] > div[style]:first-of-type { order: 3 !important; width: 100% !important; flex-wrap: nowrap !important; overflow-x: auto !important; gap: 20px !important; padding-bottom: 2px !important; scrollbar-width: none; } header nav[style] > div[style]:first-of-type::-webkit-scrollbar { display: none; } header nav[style] > div[style]:first-of-type > a { white-space: nowrap !important; font-size: 14px !important; } /* Giris + Demo Talep Et */ header nav[style] > div[style]:last-of-type { gap: 12px !important; } header nav[style] > div[style]:last-of-type > a { font-size: 13.5px !important; padding: 9px 14px !important; } /* --- 10) Dokunma hedefi ve okunabilirlik --- */ a, button { -webkit-tap-highlight-color: rgba(244, 183, 63, .25); } /* iOS otomatik zoom'unu engeller. Checkbox/radio haric — onlarin boyutu sabit. */ input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea { font-size: 16px !important; min-height: 44px !important; } button[type="submit"] { min-height: 48px !important; font-size: 16px !important; } } /* --------------------------------------------------------------------------- KUCUK MOBIL — <= 560px -------------------------------------------------------------------------- */ @media (max-width: 560px) { [style*="max-width: 1220px"] { padding-left: 16px !important; padding-right: 16px !important; } [style*="grid-template-columns: 1.6fr 1fr 1fr 1fr"] { grid-template-columns: 1fr !important; } [style*="padding: 40px;"] { padding: 20px !important; } [style*="padding: 36px"] { padding: 20px !important; } [style*="padding: 30px"] { padding: 18px !important; } h1 { font-size: clamp(26px, 8.2vw, 34px) !important; } h2 { font-size: clamp(21px, 6.4vw, 27px) !important; } /* Fiyat kartlarindaki buyuk sayilar tasmasin */ [style*="font-size: 38px"] { font-size: 30px !important; } [style*="font-size: 26px"] { font-size: 22px !important; } }