/* LTS Teknoloji — üç renk teması (koyu / orta / açık), renkler logodan. Tema, yönetim panelindeki Görünüm sayfasından seçilir ve ile uygulanır. */ :root { --lts-zemin: #0b0b0f; --lts-zemin-2: #121218; --lts-kart: #16161d; --lts-kart-kenar: #26262f; --lts-kirmizi: #e02b20; --lts-kirmizi-koyu: #b31f16; --lts-gri: #9aa0a8; --lts-metin: #f2f3f5; --lts-metin-soluk: #c3c7cd; --lts-navbar-bg: rgba(11, 11, 15, .82); --lts-footer-bg: #08080b; --lts-izgara: rgba(255, 255, 255, .035); --lts-hero-glow: rgba(224, 43, 32, .22); --lts-alan-g1: #1a1a22; --lts-alan-g2: #101016; --lts-logo-fon-opaklik: .07; } /* Orta tema: füme gri — koyu değil, sadece "az koyu" */ html[data-tema="orta"] { --lts-zemin: #3b4046; --lts-zemin-2: #43484f; --lts-kart: #4a5057; --lts-kart-kenar: #626871; --lts-gri: #ccd0d5; --lts-metin: #fafbfb; --lts-metin-soluk: #e3e6e9; --lts-navbar-bg: rgba(59, 64, 70, .88); --lts-footer-bg: #32363c; --lts-izgara: rgba(255, 255, 255, .055); --lts-hero-glow: rgba(224, 43, 32, .2); --lts-alan-g1: #4f555d; --lts-alan-g2: #41464d; --lts-logo-fon-opaklik: .10; } /* Füme zeminde kırmızı biraz daha parlak dursun */ html[data-tema="orta"] .hizmet-ikon, html[data-tema="orta"] .btn-lts { filter: saturate(1.08); } html[data-tema="orta"] .lts-footer .alt-cizgi { color: #b3b8bf; } html[data-tema="orta"] .form-control::placeholder { color: #a9aeb5; } /* Açık tema: göz yormayan sıcak açık gri (bembeyaz değil) */ html[data-tema="acik"] { --lts-zemin: #eceae5; --lts-zemin-2: #e2dfd8; --lts-kart: #f6f4f0; --lts-kart-kenar: #d3cfc6; --lts-kirmizi: #c82218; --lts-kirmizi-koyu: #9e1a12; --lts-gri: #5a5f66; --lts-metin: #1c1d21; --lts-metin-soluk: #3c3f45; --lts-navbar-bg: rgba(246, 244, 240, .88); --lts-footer-bg: #e2dfd8; --lts-izgara: rgba(0, 0, 0, .05); --lts-hero-glow: rgba(200, 34, 24, .12); --lts-alan-g1: #faf9f6; --lts-alan-g2: #efece6; --lts-logo-fon-opaklik: .08; } html[data-tema="acik"] .btn-close { filter: none; } html[data-tema="acik"] .marka-logo { box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 4px 14px rgba(200, 34, 24, .12); } html[data-tema="acik"] .lts-footer a:hover, html[data-tema="acik"] .lts-navbar .nav-link:hover { color: #000; } html[data-tema="acik"] .lts-navbar .nav-link.active { color: var(--lts-kirmizi-koyu); } html[data-tema="acik"] .lts-footer h6 { color: #1c1d21; } html[data-tema="acik"] .rozet { color: #9e1a12; background: rgba(200, 34, 24, .08); } html[data-tema="acik"] ::selection { color: #fff; } /* Açık zeminde küçük metinler koyulaşmalı (WCAG AA 4.5:1) */ html[data-tema="acik"] .lts-footer .alt-cizgi { color: #5a5f66; } html[data-tema="acik"] .form-control::placeholder { color: #6b7078; } html { scroll-behavior: smooth; } body { background: var(--lts-zemin); color: var(--lts-metin); font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; min-height: 100vh; display: flex; flex-direction: column; } main { flex: 1 0 auto; } ::selection { background: var(--lts-kirmizi); color: #fff; } a { color: var(--lts-kirmizi); } a:hover { color: #ff5045; } /* ---------------------------------------------------------------- navbar */ .lts-navbar { background: var(--lts-navbar-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--lts-kart-kenar); } .marka-logo { background: #fff; border-radius: 8px; padding: 4px 10px; display: inline-flex; align-items: center; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 4px 18px rgba(224, 43, 32, .18); } .marka-logo img { height: 34px; width: auto; display: block; } .lts-navbar .nav-link { color: var(--lts-metin-soluk); font-weight: 500; padding: .55rem .9rem; border-radius: 8px; transition: color .15s, background .15s; } .lts-navbar .nav-link:hover { color: #fff; background: rgba(255, 255, 255, .06); } .lts-navbar .nav-link.active { color: #fff; background: linear-gradient(160deg, rgba(224, 43, 32, .25), rgba(224, 43, 32, .1)); box-shadow: inset 0 0 0 1px rgba(224, 43, 32, .4); } .lts-navbar .navbar-toggler { border-color: var(--lts-kart-kenar); } .lts-navbar .navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(224, 43, 32, .35); } /* ------------------------------------------------------------------ hero */ .hero { position: relative; padding: 7rem 0 6rem; overflow: hidden; background: radial-gradient(900px 420px at 12% -10%, var(--lts-hero-glow), transparent 60%), radial-gradient(700px 380px at 95% 15%, rgba(120, 130, 150, .14), transparent 60%), var(--lts-zemin); } .hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--lts-izgara) 1px, transparent 1px), linear-gradient(90deg, var(--lts-izgara) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 35%, transparent 75%); pointer-events: none; } .hero .container { position: relative; z-index: 1; } /* Başlık metninin arkasında ortalanmış, bulanık logo filigranı */ .logo-fon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: clamp(280px, 42vw, 640px); height: auto; opacity: var(--lts-logo-fon-opaklik, .07); filter: blur(7px); pointer-events: none; user-select: none; z-index: 0; } .sayfa-baslik .logo-fon { width: clamp(220px, 30vw, 420px); filter: blur(6px); } .yerlesim-sade .logo-fon { filter: blur(5px); opacity: calc(var(--lts-logo-fon-opaklik, .07) * .7); } @media (prefers-reduced-motion: no-preference) { .logo-fon { transition: opacity .4s ease; } } .hero h1 { font-weight: 800; letter-spacing: -.5px; line-height: 1.15; font-size: clamp(2rem, 4.5vw, 3.4rem); } .hero h1 .vurgu { color: var(--lts-kirmizi); } .hero .kurum { color: var(--lts-gri); max-width: 640px; font-size: 1.1rem; } .rozet { display: inline-flex; align-items: center; gap: .5rem; background: rgba(224, 43, 32, .12); border: 1px solid rgba(224, 43, 32, .35); color: #ffb0aa; border-radius: 999px; padding: .35rem 1rem; font-size: .85rem; font-weight: 600; } .rozet.gri { background: rgba(154, 160, 168, .1); border-color: rgba(154, 160, 168, .3); color: var(--lts-metin-soluk); } /* --------------------------------------------------------------- butonlar */ .btn-lts { background: linear-gradient(160deg, var(--lts-kirmizi), var(--lts-kirmizi-koyu)); color: #fff; font-weight: 600; border: 0; border-radius: 10px; padding: .7rem 1.6rem; box-shadow: 0 6px 24px rgba(224, 43, 32, .35); transition: transform .15s, box-shadow .15s; } .btn-lts:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(224, 43, 32, .5); } .btn-lts-dis { background: transparent; color: var(--lts-metin); border: 1px solid var(--lts-kart-kenar); border-radius: 10px; padding: .7rem 1.6rem; font-weight: 600; transition: border-color .15s, background .15s; } .btn-lts-dis:hover { color: #fff; border-color: var(--lts-kirmizi); background: rgba(224, 43, 32, .08); } /* ---------------------------------------------------------------- bölümler */ .bolum { padding: 4.5rem 0; } .bolum-koyu { background: var(--lts-zemin-2); border-block: 1px solid var(--lts-kart-kenar); } .bolum-baslik { font-weight: 800; letter-spacing: -.4px; } .bolum-baslik::after { content: ""; display: block; width: 64px; height: 4px; margin-top: .8rem; border-radius: 4px; background: linear-gradient(90deg, var(--lts-kirmizi), transparent); } .bolum-baslik.ortali { text-align: center; } .bolum-baslik.ortali::after { margin-inline: auto; background: linear-gradient(90deg, transparent, var(--lts-kirmizi), transparent); } .bolum-alt { color: var(--lts-gri); max-width: 720px; } /* -------------------------------------------------------------- hizmet kartı */ .hizmet-kart { background: var(--lts-kart); border: 1px solid var(--lts-kart-kenar); border-radius: 16px; padding: 1.8rem 1.6rem; height: 100%; transition: transform .2s, border-color .2s, box-shadow .2s; } .hizmet-kart:hover { transform: translateY(-6px); border-color: rgba(224, 43, 32, .55); box-shadow: 0 14px 40px rgba(0, 0, 0, .45), 0 0 0 1px rgba(224, 43, 32, .25); } .hizmet-ikon { width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; color: #fff; background: linear-gradient(160deg, var(--lts-kirmizi), var(--lts-kirmizi-koyu)); box-shadow: 0 6px 20px rgba(224, 43, 32, .35); margin-bottom: 1.1rem; } .hizmet-kart h3 { font-size: 1.15rem; font-weight: 700; } .hizmet-kart p { color: var(--lts-gri); font-size: .95rem; margin: 0; } /* ------------------------------------------------------------ alan kartları */ .alan-kart { position: relative; border-radius: 20px; padding: 2.4rem 2rem; height: 100%; border: 1px solid var(--lts-kart-kenar); background: linear-gradient(170deg, var(--lts-alan-g1), var(--lts-alan-g2)); overflow: hidden; transition: transform .2s, border-color .2s; } .alan-kart:hover { transform: translateY(-4px); border-color: rgba(224, 43, 32, .5); } .alan-kart::after { content: ""; position: absolute; right: -60px; top: -60px; width: 190px; height: 190px; border-radius: 50%; background: radial-gradient(circle, rgba(224, 43, 32, .22), transparent 70%); } .alan-kart .ikon-buyuk { font-size: 2.6rem; color: var(--lts-kirmizi); } .alan-kart ul { color: var(--lts-metin-soluk); padding-left: 0; list-style: none; } .alan-kart ul li { padding: .3rem 0; } .alan-kart ul li i { color: var(--lts-kirmizi); margin-right: .5rem; } /* -------------------------------------------------------------------- form */ .form-control, .form-select { background: var(--lts-zemin-2); border: 1px solid var(--lts-kart-kenar); color: var(--lts-metin); border-radius: 10px; padding: .65rem .9rem; } .form-control:focus, .form-select:focus { background: var(--lts-zemin-2); color: var(--lts-metin); border-color: var(--lts-kirmizi); box-shadow: 0 0 0 .2rem rgba(224, 43, 32, .2); } .form-control::placeholder { color: #8a9099; } .form-check-input { background-color: var(--lts-zemin-2); border-color: var(--lts-kart-kenar); } .form-check-input:checked { background-color: var(--lts-kirmizi); border-color: var(--lts-kirmizi); } .form-label { color: var(--lts-metin-soluk); font-weight: 500; } .iletisim-kutu { background: var(--lts-kart); border: 1px solid var(--lts-kart-kenar); border-radius: 16px; padding: 1.4rem 1.5rem; display: flex; gap: 1rem; align-items: flex-start; } .iletisim-kutu i { font-size: 1.4rem; color: var(--lts-kirmizi); } .iletisim-kutu small { color: var(--lts-gri); display: block; } /* ------------------------------------------------------------------ footer */ .lts-footer { background: var(--lts-footer-bg); border-top: 1px solid var(--lts-kart-kenar); padding: 3rem 0 1.5rem; color: var(--lts-gri); font-size: .93rem; } .lts-footer h6 { color: #fff; font-weight: 700; margin-bottom: 1rem; } .lts-footer a { color: var(--lts-gri); text-decoration: none; } .lts-footer a:hover { color: #fff; } .lts-footer .alt-cizgi { border-top: 1px solid var(--lts-kart-kenar); margin-top: 2rem; padding-top: 1.2rem; font-size: .85rem; color: #8a9099; /* küçük metin: WCAG AA (4.5:1) için #5d626b'den açıldı */ } /* -------------------------------------------------------------- çerez bandı */ .cerez-bandi { position: fixed; inset-inline: 0; bottom: 0; z-index: 1080; background: var(--lts-kart); border-top: 1px solid var(--lts-kart-kenar); padding: 1rem 0; box-shadow: 0 -8px 30px rgba(0, 0, 0, .35); } /* ------------------------------------------------------------------- çeşitli */ .sayfa-baslik { position: relative; overflow: hidden; padding: 5.5rem 0 3rem; background: radial-gradient(700px 300px at 15% -20%, var(--lts-hero-glow), transparent 60%), var(--lts-zemin); border-bottom: 1px solid var(--lts-kart-kenar); } .sayfa-baslik .container { position: relative; z-index: 1; } .alinti { border-left: 4px solid var(--lts-kirmizi); background: var(--lts-kart); border-radius: 0 14px 14px 0; padding: 1.4rem 1.6rem; color: var(--lts-metin-soluk); font-style: italic; } .madde-listesi { list-style: none; padding: 0; } .madde-listesi li { padding: .45rem 0; color: var(--lts-metin-soluk); display: flex; gap: .6rem; align-items: baseline; } .madde-listesi li i { color: var(--lts-kirmizi); } .harita-cerceve { border: 1px solid var(--lts-kart-kenar); border-radius: 16px; overflow: hidden; } .harita-cerceve iframe { display: block; width: 100%; height: 340px; border: 0; } .modal-content { background: var(--lts-kart); color: var(--lts-metin); border: 1px solid var(--lts-kart-kenar); } .modal-header, .modal-footer { border-color: var(--lts-kart-kenar); } .btn-close { filter: invert(1) grayscale(100%); } .hata-sayfa { min-height: 60vh; display: flex; align-items: center; } .hata-kod { font-size: clamp(5rem, 14vw, 9rem); font-weight: 900; color: transparent; -webkit-text-stroke: 2px var(--lts-kirmizi); line-height: 1; } /* ============================================================ YERLEŞİM PLANLARI Yönetim paneli > Görünüm'den seçilir; ile uygulanır. klasik = varsayılan (sol hizalı hero, 3'lü hizmet ızgarası) */ /* VİTRİN: ortalanmış vitrin girişi, geniş yatay hizmet kartları */ .yerlesim-vitrin .hero { text-align: center; padding: 8rem 0 6.5rem; } .yerlesim-vitrin .hero .kurum { margin-inline: auto; } .yerlesim-vitrin .hero .d-flex { justify-content: center; } .yerlesim-vitrin .hero > .container > .mb-4 { justify-content: center; } @media (min-width: 992px) { .yerlesim-vitrin #hizmetler .hizmet-sutun { width: 50%; } } .yerlesim-vitrin .hizmet-kart { display: flex; gap: 1.2rem; align-items: flex-start; } .yerlesim-vitrin .hizmet-ikon { margin-bottom: 0; flex-shrink: 0; } .yerlesim-vitrin .bolum-baslik:not(.ortali) { text-align: center; } .yerlesim-vitrin .bolum-baslik:not(.ortali)::after { margin-inline: auto; background: linear-gradient(90deg, transparent, var(--lts-kirmizi), transparent); } /* SADE: kompakt giriş, hizmetler tek sütun liste halinde */ .yerlesim-sade .hero { padding: 3.8rem 0 3rem; } .yerlesim-sade .hero h1 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); } .yerlesim-sade .hero::before { display: none; } .yerlesim-sade .bolum { padding: 3rem 0; } .yerlesim-sade #hizmetler .hizmet-sutun { width: 100%; } .yerlesim-sade .hizmet-kart { display: flex; gap: 1.1rem; align-items: center; padding: 1.1rem 1.3rem; border-radius: 12px; } .yerlesim-sade .hizmet-kart:hover { transform: none; } .yerlesim-sade .hizmet-ikon { margin-bottom: 0; flex-shrink: 0; width: 46px; height: 46px; font-size: 1.25rem; border-radius: 11px; } .yerlesim-sade .hizmet-kart h3 { font-size: 1.05rem; margin-bottom: .15rem; } .yerlesim-sade .sayfa-baslik { padding: 3.5rem 0 2.2rem; } /* ================================================================== BLOG */ .blog-kart { background: var(--lts-kart); border: 1px solid var(--lts-kart-kenar); border-radius: 16px; overflow: hidden; height: 100%; display: flex; flex-direction: column; transition: transform .2s, border-color .2s, box-shadow .2s; } .blog-kart:hover { transform: translateY(-5px); border-color: rgba(224, 43, 32, .5); box-shadow: 0 14px 40px rgba(0, 0, 0, .35); } .blog-kapak { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; display: block; background: var(--lts-zemin-2); } .blog-kapak-bos { aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; font-size: 2.4rem; color: var(--lts-kirmizi); background: radial-gradient(300px 150px at 50% 0%, var(--lts-hero-glow), transparent 70%), var(--lts-zemin-2); } .blog-kart .govde { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; flex: 1; } .blog-kart h2 { font-size: 1.15rem; font-weight: 700; } .blog-kart h2 a { color: var(--lts-metin); text-decoration: none; } .blog-kart h2 a:hover { color: var(--lts-kirmizi); } .blog-kart .ozet { color: var(--lts-gri); font-size: .93rem; flex: 1; } .blog-tarih { color: var(--lts-gri); font-size: .82rem; } .video-cerceve { aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; border: 1px solid var(--lts-kart-kenar); background: #000; } .video-cerceve iframe { width: 100%; height: 100%; border: 0; display: block; } .galeri-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .8rem; } .galeri-izgara a { display: block; border-radius: 10px; overflow: hidden; border: 1px solid var(--lts-kart-kenar); } .galeri-izgara img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform .25s; } .galeri-izgara a:hover img { transform: scale(1.05); } .yazi-icerik { color: var(--lts-metin-soluk); font-size: 1.05rem; line-height: 1.75; white-space: pre-line; } /* ============================================================ SOSYAL MEDYA */ .sosyal-satir { display: flex; gap: .6rem; flex-wrap: wrap; } .sosyal-satir a { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid var(--lts-kart-kenar); color: var(--lts-gri); font-size: 1.05rem; transition: color .15s, border-color .15s, transform .15s; } .sosyal-satir a:hover { color: #fff; border-color: var(--lts-kirmizi); background: var(--lts-kirmizi); transform: translateY(-2px); } .wa-buton { position: fixed; right: 18px; bottom: 18px; z-index: 1070; width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #25d366; color: #fff; font-size: 1.7rem; box-shadow: 0 8px 24px rgba(37, 211, 102, .45); transition: transform .15s; } .wa-buton:hover { color: #fff; transform: scale(1.08); } @media (max-width: 991.98px) { .hero { padding: 4.5rem 0 3.5rem; } .lts-navbar .navbar-collapse { background: var(--lts-zemin-2); border: 1px solid var(--lts-kart-kenar); border-radius: 14px; padding: .8rem; margin-top: .8rem; } }