/* Tum sayfalarda ortak kurallar. Tek kaynak: burasi. */ *{box-sizing:border-box} .breadcrumb{display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:center; margin-bottom:16px; color:#d8e2ee; font-size:14px; font-weight:700;} .breadcrumb a:hover{color:#fff} .btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:14px 24px; border-radius:14px; font-weight:800; transition:var(--trans); border:1px solid transparent; cursor:pointer; white-space:nowrap;} .btn-dark{background:var(--bg-dark); color:#fff;} .btn-dark:hover{transform:translateY(-2px); background:#18243b;} .btn-outline{background:#fff; color:var(--bg-dark); border-color:#d7dce4;} .btn-outline:hover{background:#f8fafc; transform:translateY(-2px);} .btn-primary{background:linear-gradient(135deg,var(--danger),var(--danger-2)); color:var(--white); box-shadow:0 14px 28px rgba(198,31,54,.22);} .btn-primary:hover{transform:translateY(-2px)} .container{width:min(var(--container), calc(100% - 40px)); margin:0 auto;} .dropdown-menu{position:absolute; top:100%; left:0; min-width:260px; background:#fff; border:1px solid #e8edf4; border-radius:18px; box-shadow:0 18px 40px rgba(2,8,23,.12); padding:12px; display:none;} .dropdown-menu a{position:relative; display:block; padding:12px 14px 12px 32px; border-radius:12px; color:#243041; font-size:14px; font-weight:700;} .dropdown-menu a:hover{background:#f6f8fb; color:var(--danger);} .eyebrow{display:inline-flex; align-items:center; gap:10px; background:#eef4ff; color:var(--primary); border:1px solid #dce7ff; padding:10px 16px; border-radius:999px; font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; margin:0 auto 18px;} .float-call{bottom:86px;background:var(--danger)} .float-wa{bottom:18px;background:#25D366} .float-wa, .float-call{position:fixed; right:18px; z-index:998; width:58px; height:58px; border-radius:999px; display:grid; place-items:center; color:#fff; box-shadow:0 18px 32px rgba(0,0,0,.18); font-size:24px;} .footer{background:#f3f4f6; padding:70px 0 28px; border-top:1px solid #e9edf2; position:relative; overflow:hidden;} .footer::before{content:"VizeBizde"; display:block; text-align:center; white-space:nowrap; font-size:clamp(64px,16vw,260px); font-weight:900; letter-spacing:-.055em; line-height:1; margin:-.15em 0 -.17em; background:linear-gradient(175deg,#ccd4e0 6%,#f3f4f6 82%); -webkit-background-clip:text; background-clip:text; color:transparent; user-select:none; pointer-events:none;} @supports not ((-webkit-background-clip:text) or (background-clip:text)){.footer::before{color:#e3e7ee; background:none;}} @media (max-width:640px){/* Dar ekranda yazi 62px civarinda kaliyor ve gercek logo metniyle orani 2,7x oluyor - masaustundeki 9,6x gibi "doku" hissi vermiyor, marka adi arka arkaya iki kez okunuyor. Gradient baslangicini acarak yaziyi metin olmaktan cikarip yuzeye yaklastiriyoruz. */.footer::before{background:linear-gradient(175deg,#e4e8ef 6%,#f3f4f6 70%); -webkit-background-clip:text; background-clip:text;}} .footer-bottom{margin-top:34px; padding-top:20px; border-top:1px solid #dadfe7; text-align:center; color:#5d6674; font-size:14px;} .footer-bottom-links{display:flex; justify-content:center; flex-wrap:wrap; gap:12px 18px; margin-top:12px;} .footer-bottom-links a:hover{color:var(--danger)} .footer-brand{display:flex; align-items:center; gap:14px; margin-bottom:22px;} .footer-brand .logo-mark{width:58px; height:58px;} .footer-brand span{display:block; margin-top:4px; color:var(--muted); font-size:13px; font-weight:600;} .footer-brand strong{font-size:30px; font-weight:900; color:var(--bg-dark); display:block; line-height:1;} .footer-contact{display:flex; flex-direction:column; gap:14px; margin-top:18px;} .footer-contact div, .footer-contact a{display:flex; align-items:flex-start; gap:10px; color:#374151; font-weight:600;} .footer-contact i{margin-top:5px; color:#6b7280; flex:0 0 auto;} .footer-credit{margin-top:14px; font-size:13px; color:#6b7280; letter-spacing:.02em;} .footer-credit a{color:#0f172a; font-weight:800; position:relative;} .footer-credit a:after{content:""; position:absolute; left:0; bottom:-2px; width:100%; height:1px; background:linear-gradient(90deg, transparent, var(--danger), transparent); opacity:.9;} .footer-links{display:flex; flex-direction:column; gap:10px;} .footer-links a{padding-left:16px; position:relative; display:inline-block; color:#374151; font-weight:600; transition:var(--trans);} .footer-links a:hover{color:var(--danger)} .footer-title{margin:6px 0 18px; font-size:25px; color:var(--bg-dark); font-weight:900;} .footer-top{display:grid; grid-template-columns:1.1fr 1fr 1fr 1fr; gap:42px; align-items:flex-start;} .header{transition:box-shadow .25s ease; position:sticky; top:0; z-index:999; background:rgba(255,255,255,.95); backdrop-filter:blur(10px); border-bottom:1px solid rgba(15,23,42,.08);} .logo{display:flex; align-items:center; gap:14px; min-width:0; flex:0 0 auto; z-index:1002;} .logo-mark{width:58px; height:58px; border-radius:18px; background:linear-gradient(135deg,var(--danger),#8f1224); display:grid; place-items:center; color:#fff; font-size:24px; box-shadow:0 10px 24px rgba(198,31,54,.22); flex:0 0 auto;} .logo-text{display:flex; flex-direction:column; line-height:1.05;} .logo-text span{font-size:13px; color:var(--muted); font-weight:600;} .logo-text strong{font-size:29px; font-weight:900; color:var(--bg-dark); letter-spacing:-.03em;} .menu{display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:10px;} .menu .menu-cta{background:var(--primary); color:#fff;} .menu .menu-cta:hover{background:var(--primary-2); color:#fff;} .menu > a, .dropdown-toggle{position:relative; padding:12px 16px; border-radius:12px; font-size:15px; font-weight:700; color:#243041; display:inline-flex; align-items:center; gap:8px; background:none; border:none; cursor:pointer;} .menu > a:hover, .dropdown-toggle:hover{background:#f3f6fb; color:var(--danger);} .menu-toggle{display:none; width:48px; height:48px; border:none; border-radius:14px; background:#f4f6f9; color:var(--bg-dark); align-items:center; justify-content:center; font-size:21px; cursor:pointer; z-index:1002;} .menu-wrap{display:flex; align-items:center; justify-content:flex-end; flex:1;} .nav{display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:90px; position:relative;} .section-alt{background:var(--bg-soft)} .section-title{margin:0 0 14px; font-size:clamp(28px,4vw,46px); line-height:1.08; font-weight:900; color:var(--bg-dark); letter-spacing:-0.02em; text-align:center;} .socials{display:flex; flex-wrap:wrap; gap:14px; margin-top:24px;} .socials a{width:44px; height:44px; border-radius:14px; display:grid; place-items:center; background:#fff; border:1px solid #e3e7ee; color:#1f2937; font-size:18px; transition:var(--trans);} .socials a:hover{color:var(--danger); border-color:#f0cbd2; transform:translateY(-2px);} .topbar{background:var(--bg-dark); color:#d7e0f0; padding:10px 0; font-size:14px; border-bottom:1px solid rgba(255,255,255,.08);} .topbar i{color:var(--accent)} .topbar-inner{display:flex; align-items:center; justify-content:center; gap:12px; text-align:center; min-height:22px; font-weight:700; letter-spacing:.01em;} .tursab-box{margin-top:24px; background:#fff; border:1px solid #d7dce4; border-radius:16px; padding:14px; max-width:290px;} .tursab-box img{width:100%; border-radius:10px;} :root{--bg:#ffffff; --bg-soft:#f6f8fb; --bg-soft-2:#f2f4f7; --bg-dark:#0f172a; --text:#111827; --muted:#5b6473; --line:#e5e7eb; --primary:#0d3b66; --primary-2:#123f86; --accent:#c79a2b; --danger:#c61f36; --danger-2:#a90e25; --success:#198754; --white:#fff; --shadow:0 14px 40px rgba(2, 8, 23, 0.08); --radius:22px; --container:1440px; --trans:.25s ease; --shadow-soft:0 8px 24px rgba(2, 8, 23, 0.05); --radius-lg:30px; --warning:#f59e0b; --header-h:90px;} a{text-decoration:none;color:inherit} button,input,textarea,select{font:inherit} html{scroll-behavior:smooth} img{max-width:100%;display:block} @media (max-width:640px){.float-call, .float-wa{width:54px; height:54px;}} @media (max-width:640px){.footer-title{font-size:22px;}} @media (max-width:920px){.menu > a, .dropdown-toggle{width:100%; justify-content:space-between;}} /* --- Menu isaretleri: header'da cizgi, footer'da ok --- */ /* Piktogram ikon yerine minimal geometrik isaret secildi: header'daki 7 ust seviye ogenin ucunde zaten acilir menu oku var; bas ikon her ogeyi ikon+metin+ok ucluse cevirip menuyu genisletirdi. Cizgi ::after ile eklendigi icin akisi hic etkilemez ve ayni anda aktif sayfa gostergesidir. */ .menu > a::after, .dropdown-toggle::after{content:""; position:absolute; left:50%; right:50%; bottom:6px; height:3px; border-radius:3px; background:var(--primary); opacity:0; transition:var(--trans);} .menu > a:hover::after, .dropdown-toggle:hover::after, .menu > a:focus-visible::after, .dropdown-toggle:focus-visible::after{left:16px; right:16px; opacity:1;} .menu > a.is-active, .dropdown-toggle.is-active{color:var(--danger);} .menu > a.is-active::after, .dropdown-toggle.is-active::after{left:16px; right:16px; opacity:1; background:var(--danger);} .menu .menu-cta::after{display:none;} .menu .menu-cta.is-active{background:var(--primary-2);} .footer-links a::before{content:"\203A"; position:absolute; left:2px; opacity:1; transition:var(--trans); color:#9aa4b2; font-weight:800;} .footer-links a:hover, .footer-links a:focus-visible{transform:translateX(4px);} .footer-links a:hover::before, .footer-links a:focus-visible::before{color:var(--danger);} .header.is-scrolled{box-shadow:0 6px 24px rgba(2,8,23,.10);} @media (prefers-reduced-motion: reduce){ .menu > a::after, .dropdown-toggle::after, .footer-links a::before{transition:none;} .footer-links a:hover, .footer-links a:focus-visible{transform:none;} } /* Acilir menu ogelerinin basinda kalici isaret. Footer'daki okla ayni aile; 85 ikon sitede surekli gorunur oldugu icin varsayilan ton sakin, vurgu yalnizca etkilesimde geliyor. */ .dropdown-menu a::before{content:"\203A"; position:absolute; left:14px; color:#9aa4b2; font-weight:800; transition:var(--trans);} .dropdown-menu a:hover::before, .dropdown-menu a:focus-visible::before{color:var(--danger);} /* --- Kartin tamami detaya tiklanabilir --- */ /* Islevi assets/js/kart.js yapiyor; buradaki tek is imleci el yapmak, yani tiklanabilirligin gorsel isaretini vermek. Siniflari tools/kart_tiklanabilir.py basiyor. Betik gelmezse kart eskisi gibi davranir (dugme calisir, govde tiklanmaz) - o durumda el imleci yaniltici olmasin diye sinifi da betik degil arac veriyor: ikisi ayni pakette gidiyor. */ .kart-tikla{cursor:pointer;} /* ---- ERISILEBILIRLIK ---- Uc parca da tools/erisilebilirlik_ekle.py ile birlikte gidiyor; isaretleme aractan, gorunum burdan. */ /* Icerige gec (WCAG 2.4.1). Ekran disinda bekliyor, yalnizca klavye odagi gelince iniyor. display:none OLMAZ - odaklanamayan oge sekme sirasina hic girmez, yani baglanti var gorunur ama hicbir ise yaramaz. */ .atla{position:absolute; left:12px; top:-72px; z-index:1300; background:var(--primary); color:#fff; padding:12px 20px; border-radius:0 0 12px 12px; font-weight:800; text-decoration:none; box-shadow:0 8px 24px rgba(2,8,23,.25); transition:top .18s ease;} .atla:focus{top:0;} @media (prefers-reduced-motion:reduce){.atla{transition:none;}} /* Hedef bolume tabindex="-1" veriliyor; Chrome ve Safari'de baglantiya tiklandiktan sonra odak gercekten oraya gecsin diye. Odak halkasi burada bastiriliyor: kullanicinin kendi sekmesiyle gitmedigi, program tarafindan verilen odak. */ [id="icerik"]:focus{outline:none;} /* Form odagi. Sayfa ici