/* ========================================================================== CORE VARIABLES & THEME ========================================================================== */ :root{ --clr-primary:#00ffae; --clr-primary-soft:rgba(0,255,174,0.15); --clr-danger:#ff6666; --clr-danger-soft:rgba(255,102,102,0.25); --clr-warning:#ffb347; --clr-good:#4ade80; --bg-main:#06080c; --bg-surface:#11161d; --bg-surface-dark:#0b1016; --txt-main:#ffffff; --txt-muted:#b3bccb; --txt-soft:#d7dce5; --txt-label:#7f8b9c; --font-sans:'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --font-mono:Consolas, Monaco, monospace; --radius-sm:12px; --radius-md:20px; --radius-lg:28px; --container-max:1200px; } /* ========================================================================== RESET ========================================================================== */ *, *::before, *::after{ margin:0; padding:0; box-sizing:border-box; } html{ scroll-behavior:smooth; scroll-padding-top:110px; scrollbar-gutter:stable; } body{ background:var(--bg-main); color:var(--txt-main); font-family:var(--font-sans); font-size:16px; line-height:1.5; overflow-x:hidden; overflow-x:clip; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; } img, svg{ display:block; max-width:100%; height:auto; } a{ color:inherit; text-decoration:none; } ul, ol{ list-style:none; } button{ font-family:inherit; cursor:pointer; background:none; border:none; color:inherit; } :focus-visible{ outline:2px solid var(--clr-primary); outline-offset:3px; } .site-bg{ position:fixed; inset:0; background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); background-size:40px 40px; z-index:-1; pointer-events:none; } .skip-link{ position:absolute; top:-60px; left:16px; background:var(--clr-primary); color:#06100d; padding:12px 20px; border-radius:var(--radius-sm); font-weight:800; text-decoration:none; z-index:10000; transition:top 0.25s ease; } .skip-link:focus-visible{ top:16px; } @media(prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; } } /* Scroll-reveal elemanları: varsayılan olarak HER ZAMAN görünür (JS'siz de site çalışır). JS başarıyla yüklenirse öğesine "js" sınıfı eklenir ve o zaman IntersectionObserver ile kademeli beliren animasyon devreye girer. */ .reveal{ opacity:1; transform:none; } html.js .reveal{ opacity:0; transform:translateY(18px); transition:opacity 0.6s ease, transform 0.6s ease; } html.js .reveal.is-visible{ opacity:1; transform:translateY(0); } @media(prefers-reduced-motion: reduce){ html.js .reveal{ opacity:1; transform:none; transition:none; } } /* Sticky header: kaydırıldıkça biraz daha opak/belirgin */ .site-header.is-scrolled{ background:rgba(6,8,12,0.92); box-shadow:0 10px 30px rgba(0,0,0,0.3); } /* ========================================================================== LAYOUT SHELL ========================================================================== */ .section-shell{ width:min(var(--container-max),100%); margin:0 auto; padding-left:6%; padding-right:6%; } .section-block{ padding-top:100px; padding-bottom:100px; } .section-head{ max-width:760px; margin-bottom:50px; } .section-head h2{ font-size:clamp(26px, 4vw, 40px); line-height:1.2; font-weight:800; margin-bottom:16px; letter-spacing:-0.5px; } .section-head p{ color:var(--txt-muted); font-size:17px; line-height:1.8; } .eyebrow{ display:inline-block; padding:9px 16px; border:1px solid rgba(0,255,174,0.25); border-radius:30px; color:var(--clr-primary); font-size:12px; font-weight:700; letter-spacing:0.5px; margin-bottom:22px; text-transform:uppercase; } .eyebrow.danger{ border-color:var(--clr-danger-soft); color:var(--clr-danger); } .btn{ padding:14px 26px; border-radius:var(--radius-sm); text-decoration:none; font-weight:700; font-size:14.5px; line-height:1.35; text-align:center; transition:transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, color 0.25s ease; display:inline-block; } .btn-primary{ background:var(--clr-primary); color:#06100d; box-shadow:0 8px 22px rgba(0,255,174,0.14); } .btn-primary:hover{ transform:translateY(-4px); box-shadow:0 12px 30px rgba(0,255,174,0.24); } .btn-secondary{ border:1px solid rgba(255,255,255,0.15); color:var(--txt-main); } .btn-secondary:hover{ border-color:var(--clr-primary); color:var(--clr-primary); } /* ========================================================================== HEADER & NAV ========================================================================== */ .site-header{ position:sticky; top:0; z-index:999; background:rgba(6,8,12,0.75); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid rgba(255,255,255,0.06); } .nav{ width:min(1360px,100%); margin:0 auto; padding:20px 32px; display:flex; align-items:center; justify-content:space-between; gap:24px; } .brand{ display:flex; align-items:center; gap:12px; flex-shrink:0; } .brand-mark{ position:relative; display:flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:12px; background:linear-gradient(145deg, #131a22, #0b1016); border:1px solid rgba(0,255,174,0.35); box-shadow:inset 0 1px 0 rgba(255,255,255,0.04), 0 4px 14px rgba(0,255,174,0.08); color:var(--clr-primary); font-family:var(--font-mono); font-weight:700; font-size:15px; letter-spacing:0.5px; overflow:hidden; } .brand-mark::after{ content:""; position:absolute; top:-10px; right:-10px; width:22px; height:22px; background:var(--clr-primary); opacity:0.16; border-radius:50%; filter:blur(6px); } .brand-copy{ display:flex; flex-direction:column; line-height:1.25; } .brand-copy strong{ font-size:16px; font-weight:800; color:var(--txt-main); white-space:nowrap; } .brand-copy small{ font-size:11px; color:var(--txt-label); letter-spacing:0.5px; text-transform:uppercase; } .nav-links{ display:flex; gap:32px; flex:1; justify-content:center; } .nav-links a{ color:var(--txt-soft); font-size:15px; font-weight:600; padding-bottom:6px; border-bottom:2px solid transparent; white-space:nowrap; transition:color 0.25s ease, border-color 0.25s ease; } .nav-links a:hover, .nav-links a[aria-current="page"]{ color:var(--clr-primary); border-bottom-color:var(--clr-primary); } .nav-action{ display:inline-block; background:var(--clr-primary); color:#06100d; padding:11px 18px; border-radius:var(--radius-sm); font-weight:700; font-size:13.5px; white-space:nowrap; transition:transform 0.25s ease, box-shadow 0.25s ease; } .nav-action:hover{ transform:translateY(-3px); box-shadow:0 12px 30px rgba(0,255,174,0.25); } /* Hamburger (CSS ile çizilmiş, ikon fontu/karakteri değil) */ .menu-toggle{ display:none; flex-direction:column; justify-content:center; gap:5px; width:40px; height:40px; padding:8px; } .menu-toggle span{ display:block; width:100%; height:2px; background:var(--clr-primary); border-radius:2px; transition:transform 0.25s ease, opacity 0.25s ease; } .menu-toggle[aria-expanded="true"] span:first-child{ transform:translateY(3.5px) rotate(45deg); } .menu-toggle[aria-expanded="true"] span:last-child{ transform:translateY(-3.5px) rotate(-45deg); } @media(max-width:1250px){ .nav{ padding:16px 6%; position:relative; } .menu-toggle{ display:flex; } .nav-links{ position:absolute; top:100%; left:6%; right:6%; display:none; flex-direction:column; gap:0; background:var(--bg-surface-dark); border:1px solid rgba(0,255,174,0.15); border-radius:var(--radius-md); padding:12px; z-index:999; box-shadow:0 20px 50px rgba(0,0,0,0.55); max-height:calc(100dvh - 90px); overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; } .nav-links.is-open{ display:flex; } .nav-links a{ display:block; padding:14px; border-bottom:1px solid rgba(255,255,255,0.05); white-space:normal; } } body.menu-open{ overflow:hidden; } /* ========================================================================== HERO ========================================================================== */ .hero{ min-height:calc(100vh - 83px); display:flex; align-items:center; justify-content:space-between; gap:60px; padding-top:44px; padding-bottom:44px; } .hero-content{ flex:1.05; } .hero h1{ font-size:clamp(30px, 4.2vw, 48px); line-height:1.18; font-weight:800; margin-bottom:18px; letter-spacing:-0.5px; } .hero h1 span{ display:block; color:var(--txt-muted); font-size:0.64em; font-weight:600; opacity:0.85; margin-top:6px; } .hero-lead{ color:var(--txt-muted); font-size:17px; line-height:1.7; max-width:600px; margin-bottom:24px; } .hero-actions{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:20px; } .trust-pills{ display:flex; flex-wrap:wrap; gap:10px; } .trust-pills li{ background:rgba(255,255,255,0.04); border:1px solid rgba(0,255,174,0.14); color:var(--txt-soft); padding:8px 14px; border-radius:30px; font-size:12px; font-weight:600; } .hero-visual{ flex:0.95; display:flex; justify-content:center; } /* --- Audit rapor kutusu (hero içindeki örnek widget) --- */ .audit-window{ width:100%; max-width:420px; background:var(--bg-surface); border:1px solid rgba(0,255,174,0.18); border-radius:var(--radius-md); overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,0.55); } .audit-window-top{ display:flex; justify-content:space-between; align-items:center; padding:12px 20px; background:#161c25; border-bottom:1px solid rgba(255,255,255,0.05); } .audit-window-top span{ color:var(--txt-label); font-size:12px; text-transform:uppercase; letter-spacing:0.5px; } .audit-window-top strong{ color:var(--clr-primary); font-size:12px; letter-spacing:1px; } .score-card{ display:flex; align-items:baseline; gap:8px; padding:16px 20px 6px; } .score-card span{ color:var(--txt-label); font-size:13px; flex:1; } .score-card strong{ font-size:34px; font-weight:800; color:var(--clr-primary); } .score-card small{ color:var(--txt-label); font-size:14px; } .metric-list{ padding:4px 20px; display:flex; flex-direction:column; } .metric-row{ display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid rgba(255,255,255,0.05); font-size:13.5px; } .metric-row span{ color:var(--txt-muted); } .metric-row strong{ color:var(--txt-soft); font-weight:700; } .metric-row.warning strong{ color:var(--clr-warning); } .debt-card{ margin:12px 20px; display:flex; justify-content:space-between; align-items:center; background:rgba(255,102,102,0.08); border:1px solid rgba(255,102,102,0.25); border-radius:14px; padding:10px 16px; } .debt-card span{ color:var(--txt-soft); font-size:13px; } .debt-card strong{ color:var(--clr-danger); font-size:13px; letter-spacing:1px; } .audit-note{ padding:10px 20px 16px; color:var(--txt-label); font-size:11.5px; line-height:1.5; } @media(max-width:900px){ .hero{ min-height:auto; flex-direction:column; text-align:center; padding-top:40px; } .hero-lead{ margin-left:auto; margin-right:auto; } .hero-actions{ justify-content:center; } .trust-pills{ justify-content:center; } } /* ========================================================================== TRUST STRIP ========================================================================== */ .trust-strip{ padding:26px 0; border-top:1px solid rgba(255,255,255,0.05); border-bottom:1px solid rgba(255,255,255,0.05); overflow:hidden; } .strip-track{ width:min(var(--container-max),100%); margin:0 auto; padding:0 6%; display:flex; flex-wrap:wrap; justify-content:center; gap:32px; } .strip-track span{ color:var(--txt-label); font-size:13px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; } /* ========================================================================== COMPARE GRID ========================================================================== */ .compare-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; } .compare-card{ border-radius:var(--radius-md); padding:36px; box-shadow:0 18px 50px rgba(0,0,0,0.28); } .compare-bad{ background:var(--bg-surface); border:1px solid var(--clr-danger-soft); } .compare-good{ background:linear-gradient(145deg, var(--bg-surface), var(--bg-surface-dark)); border:1px solid rgba(0,255,174,0.3); box-shadow:0 24px 70px rgba(0,255,174,0.10); } .compare-label{ display:inline-block; padding:7px 12px; border-radius:30px; font-size:11px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; margin-bottom:16px; } .compare-bad .compare-label{ color:var(--clr-danger); background:rgba(255,102,102,0.08); border:1px solid var(--clr-danger-soft); } .compare-good .compare-label{ color:var(--clr-primary); background:rgba(0,255,174,0.08); border:1px solid rgba(0,255,174,0.25); } .compare-card h3{ font-size:22px; margin-bottom:20px; } .compare-card ul{ display:grid; gap:12px; } .compare-card li{ position:relative; padding-left:22px; color:var(--txt-soft); font-size:14px; line-height:1.65; } .compare-bad li::before{ content:"–"; position:absolute; left:0; color:var(--clr-danger); font-weight:800; } .compare-good li::before{ content:"✓"; position:absolute; left:0; color:var(--clr-primary); font-weight:800; } @media(max-width:900px){ .compare-grid{ grid-template-columns:1fr; } } /* ========================================================================== SIGNAL GRID ========================================================================== */ .signal-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } .signal-card{ background:var(--bg-surface); border:1px solid rgba(0,255,174,0.14); border-radius:var(--radius-md); padding:32px; box-shadow:0 18px 50px rgba(0,0,0,0.28); transition:transform 0.3s ease, border-color 0.3s ease; } .signal-card:hover{ transform:translateY(-5px); border-color:rgba(0,255,174,0.45); } .signal-card strong{ display:block; color:var(--clr-primary); font-size:24px; font-weight:800; margin-bottom:14px; opacity:0.7; } .signal-card h3{ font-size:19px; margin-bottom:12px; } .signal-card p{ color:var(--txt-muted); font-size:15px; line-height:1.7; } @media(max-width:1250px){ .signal-grid{ grid-template-columns:1fr 1fr; } } @media(max-width:600px){ .signal-grid{ grid-template-columns:1fr; } } /* ========================================================================== SERVICE GRID ========================================================================== */ .service-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; max-width:900px; margin-left:auto; margin-right:auto; } .service-card{ display:flex; flex-direction:column; background:linear-gradient(145deg, var(--bg-surface), var(--bg-surface-dark)); border:1px solid rgba(0,255,174,0.12); border-radius:var(--radius-md); padding:32px; box-shadow:0 18px 50px rgba(0,0,0,0.28); transition:transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; scroll-margin-top:120px; } .service-card:hover{ transform:translateY(-4px); border-color:rgba(0,255,174,0.4); box-shadow:0 24px 70px rgba(0,255,174,0.1); } .service-card > span{ display:block; color:var(--clr-primary); font-size:26px; font-weight:900; opacity:0.5; } .service-card h3{ font-size:19px; margin:14px 0 10px; } .service-card p{ color:var(--txt-muted); line-height:1.7; font-size:15px; } @media(max-width:1250px){ .service-grid{ grid-template-columns:1fr 1fr; } } @media(max-width:600px){ .service-grid{ grid-template-columns:1fr; } } /* ========================================================================== AUDIT SECTION (detaylı örnek rapor) ========================================================================== */ .audit-detail{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; } .audit-report{ background:var(--bg-surface); border:1px solid rgba(0,255,174,0.16); border-radius:var(--radius-md); box-shadow:0 24px 70px rgba(0,0,0,0.35); overflow:hidden; } .report-head{ display:flex; justify-content:space-between; align-items:center; padding:18px 24px; background:#161c25; border-bottom:1px solid rgba(255,255,255,0.05); } .report-head span{ color:var(--txt-label); font-size:12px; text-transform:uppercase; letter-spacing:0.5px; } .report-head strong{ color:var(--clr-primary); font-size:12px; letter-spacing:1px; } .report-row{ display:flex; justify-content:space-between; align-items:center; padding:16px 24px; border-bottom:1px solid rgba(255,255,255,0.05); } .report-row span{ color:var(--txt-muted); font-size:14px; } .report-row strong{ color:var(--txt-soft); font-weight:700; } .report-row.danger-row{ background:rgba(255,102,102,0.05); } .report-row.danger-row strong{ color:var(--clr-danger); } .audit-copy h3{ font-size:24px; margin-bottom:20px; } .audit-copy ul{ display:grid; gap:14px; } .audit-copy li{ position:relative; padding-left:24px; color:var(--txt-soft); font-size:15px; line-height:1.7; } .audit-copy li::before{ content:""; position:absolute; left:0; top:8px; width:8px; height:8px; border-radius:50%; background:var(--clr-primary); } @media(max-width:900px){ .audit-detail{ grid-template-columns:1fr; } } /* ========================================================================== AUDIENCE SECTION (kimler için / kimler için değil) ========================================================================== */ .audience-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; } .audience-card{ background:linear-gradient(145deg, var(--bg-surface), var(--bg-surface-dark)); border:1px solid rgba(0,255,174,0.16); border-radius:var(--radius-md); padding:36px; box-shadow:0 18px 50px rgba(0,0,0,0.28); transition:transform 0.25s ease, border-color 0.25s ease; } .audience-card:hover{ transform:translateY(-3px); border-color:rgba(0,255,174,0.32); } .audience-card.muted-card{ background:var(--bg-surface); border-color:rgba(255,255,255,0.08); opacity:0.85; } .audience-card h3{ font-size:20px; margin-bottom:20px; } .audience-card ul{ display:grid; gap:12px; } .audience-card li{ position:relative; padding-left:22px; color:var(--txt-soft); font-size:14px; line-height:1.6; } .audience-card:not(.muted-card) li::before{ content:"✓"; position:absolute; left:0; color:var(--clr-primary); font-weight:800; } .audience-card.muted-card li::before{ content:"–"; position:absolute; left:0; color:var(--txt-label); font-weight:800; } @media(max-width:900px){ .audience-grid{ grid-template-columns:1fr; } } /* ========================================================================== WORKFLOW (Süreç — sıralı liste) ========================================================================== */ .workflow{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; } .workflow li{ background:var(--bg-surface); border:1px solid rgba(0,255,174,0.1); border-radius:var(--radius-md); padding:28px; box-shadow:0 18px 50px rgba(0,0,0,0.28); transition:transform 0.3s ease, border-color 0.3s ease; } .workflow li:hover{ transform:translateY(-4px); border-color:var(--clr-primary); } .workflow strong{ display:block; color:var(--clr-primary); font-size:24px; font-weight:800; margin-bottom:12px; } .workflow h3{ font-size:18px; margin-bottom:10px; } .workflow p{ color:var(--txt-muted); font-size:14px; line-height:1.7; } @media(max-width:1250px){ .workflow{ grid-template-columns:1fr 1fr; } } @media(max-width:600px){ .workflow{ grid-template-columns:1fr; } } /* ========================================================================== DELIVERABLES GRID ========================================================================== */ .deliverables-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; } .deliverables-grid li{ background:rgba(255,255,255,0.03); border:1px solid rgba(0,255,174,0.14); border-radius:14px; padding:16px 18px; color:var(--txt-soft); font-size:14px; font-weight:600; text-align:center; } @media(max-width:900px){ .deliverables-grid{ grid-template-columns:1fr 1fr; } } @media(max-width:500px){ .deliverables-grid{ grid-template-columns:1fr; } } /* ========================================================================== FAQ (native details/summary) ========================================================================== */ .faq-list{ display:flex; flex-direction:column; gap:14px; max-width:820px; } .faq-list details{ background:var(--bg-surface); border:1px solid rgba(0,255,174,0.12); border-radius:var(--radius-md); padding:6px 26px; } .faq-list summary{ padding:18px 0; cursor:pointer; font-weight:700; font-size:16px; color:var(--txt-main); list-style:none; position:relative; padding-right:30px; } .faq-list summary::-webkit-details-marker{ display:none; } .faq-list summary::after{ content:"+"; position:absolute; right:0; top:16px; color:var(--clr-primary); font-size:22px; font-weight:400; transition:transform 0.25s ease; } .faq-list details[open] summary::after{ transform:rotate(45deg); } .faq-list p{ color:var(--txt-muted); font-size:15px; line-height:1.75; padding-bottom:22px; } /* ========================================================================== FINAL CTA ========================================================================== */ .final-cta{ padding-top:60px; padding-bottom:140px; } .final-box{ max-width:900px; margin:auto; text-align:center; padding:60px 40px; border-radius:var(--radius-lg); background:linear-gradient(145deg, rgba(0,255,174,0.08), rgba(0,180,255,0.04), var(--bg-surface-dark)); border:1px solid rgba(0,255,174,0.2); } .final-box h2{ font-size:clamp(24px, 3.5vw, 34px); margin:16px 0 18px; line-height:1.25; } .final-box p{ color:var(--txt-muted); font-size:16px; line-height:1.8; margin-bottom:28px; max-width:640px; margin-left:auto; margin-right:auto; } .final-box .hero-actions{ justify-content:center; margin-bottom:0; } @media(max-width:520px){ .final-box .hero-actions{ flex-direction:column; } .final-box .btn{ width:100%; text-align:center; } } @media(max-width:600px){ .final-box{ padding:40px 24px; } } /* ========================================================================== FOOTER ========================================================================== */ .site-footer{ border-top:1px solid rgba(0,255,174,0.1); padding-top:60px; padding-bottom:30px; } .footer-inner{ display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:40px; align-items:start; } .footer-brand-link{ display:inline-flex; align-items:center; gap:12px; margin-bottom:16px; } .footer-brand p{ color:var(--txt-muted); font-size:14px; line-height:1.7; max-width:420px; } .footer-links{ display:flex; flex-direction:column; gap:12px; } .footer-links h3{ color:var(--txt-main); font-size:14px; font-weight:700; margin-bottom:4px; } .footer-links a{ color:var(--txt-muted); font-size:14px; transition:color 0.2s ease; } .footer-links a:hover{ color:var(--clr-primary); } .copyright{ grid-column:1 / -1; border-top:1px solid rgba(255,255,255,0.05); margin-top:20px; padding-top:20px; color:var(--txt-label); font-size:13px; text-align:center; } @media(max-width:900px){ .footer-inner{ grid-template-columns:1fr; text-align:center; } .footer-brand-link{ justify-content:center; } .footer-brand p{ margin:0 auto; } .footer-links{ align-items:center; } .footer-contact{ align-items:center; } } .footer-contact{ display:flex; flex-direction:column; gap:12px; } .footer-contact h3{ color:var(--txt-main); font-size:14px; font-weight:700; margin-bottom:4px; } .footer-contact a, .footer-contact span{ color:var(--txt-muted); font-size:14px; transition:color 0.2s ease; } .footer-contact a:hover{ color:var(--clr-primary); } /* ========================================================================== WHATSAPP FLOATING BUTTON ========================================================================== */ .whatsapp{ position:fixed; right:26px; bottom:26px; width:56px; height:56px; border-radius:50%; background:#25d366; display:flex; align-items:center; justify-content:center; box-shadow:0 15px 40px rgba(37,211,102,0.35); transition:transform 0.25s ease; z-index:900; color:#ffffff; } .whatsapp svg{ width:28px; height:28px; } .whatsapp:hover{ transform:scale(1.1) translateY(-3px); } @media(max-width:600px){ .whatsapp{ width:50px; height:50px; right:18px; bottom:18px; } .whatsapp svg{ width:24px; height:24px; } } /* ========================================================================== ACCESSIBILITY UTILITY ========================================================================== */ .visually-hidden{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* ========================================================================== SECTION CTA (ana sayfadaki "Tüm Hizmetleri İncele" gibi bağlantılar) ========================================================================== */ .section-cta{ margin-top:40px; text-align:center; } /* ========================================================================== FORMS (contact.html, file-analysis.html) ========================================================================== */ .form-card{ background:var(--bg-surface); border:1px solid rgba(0,255,174,0.12); border-radius:var(--radius-lg); padding:40px; box-shadow:0 18px 50px rgba(0,0,0,0.28); display:flex; flex-direction:column; gap:22px; max-width:800px; } .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:22px; min-width:0; } .form-field{ display:flex; flex-direction:column; gap:8px; min-width:0; } .form-field[hidden]{ display:none; } .form-field label{ color:var(--txt-soft); font-size:14px; font-weight:600; } .form-field label span{ color:var(--clr-danger); } .form-field input[type="text"], .form-field input[type="email"], .form-field input[type="tel"], .form-field select, .form-field textarea{ width:100%; background:var(--bg-surface-dark); border:1px solid rgba(255,255,255,0.1); border-radius:var(--radius-sm); padding:14px 16px; color:var(--txt-main); font-family:inherit; font-size:15px; transition:border-color 0.2s ease; } .form-field input:focus, .form-field select:focus, .form-field textarea:focus{ border-color:var(--clr-primary); outline:none; } .form-field textarea{ resize:vertical; min-height:110px; } .form-field select{ cursor:pointer; } .form-error{ color:var(--clr-danger); font-size:13px; min-height:16px; } .form-note{ color:var(--clr-primary); font-size:14px; min-height:20px; } .form-fieldset{ border:none; padding:0; display:flex; flex-direction:column; gap:12px; } .form-fieldset legend{ color:var(--txt-soft); font-size:14px; font-weight:600; margin-bottom:6px; padding:0; } .form-fieldset legend span{ color:var(--clr-danger); } .radio-row{ display:flex; flex-wrap:wrap; gap:20px; } .radio-option{ display:flex; align-items:center; gap:8px; color:var(--txt-muted); font-size:14px; cursor:pointer; } .radio-option input{ accent-color:var(--clr-primary); width:16px; height:16px; } .file-dropzone{ border:2px dashed rgba(0,255,174,0.25); border-radius:var(--radius-md); padding:36px 20px; text-align:center; cursor:pointer; transition:border-color 0.2s ease, background 0.2s ease; background:rgba(0,255,174,0.02); } .file-dropzone:hover, .file-dropzone:focus-visible{ border-color:var(--clr-primary); background:rgba(0,255,174,0.05); } .file-dropzone.is-dragover{ border-color:var(--clr-primary); background:rgba(0,255,174,0.08); } .file-dropzone p{ color:var(--txt-muted); font-size:14px; margin:0; } .file-list{ display:flex; flex-direction:column; gap:8px; } .file-list-item{ display:flex; align-items:center; justify-content:space-between; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:var(--radius-sm); padding:10px 14px; color:var(--txt-soft); font-size:14px; } .file-remove{ background:none; border:none; color:var(--clr-danger); font-size:14px; cursor:pointer; padding:4px 8px; } .inline-link{ color:var(--clr-primary); text-decoration:underline; text-underline-offset:3px; } /* Basit bilgi kutusu (güvenlik/gizlilik notu için) */ .info-box{ background:linear-gradient(145deg, rgba(0,255,174,0.06), rgba(0,180,255,0.03)); border:1px solid rgba(0,255,174,0.16); border-radius:var(--radius-lg); padding:40px; display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:center; } .info-box p{ color:var(--txt-muted); font-size:16px; line-height:1.85; } @media(max-width:900px){ .info-box{ grid-template-columns:1fr; } } @media(max-width:400px){ .info-box{ padding:24px; } .info-box-title{ font-size:24px; } } @media(max-width:1250px){ .form-card{ padding:26px; } .form-row{ grid-template-columns:1fr; } } /* ========================================================================== FLOW CHAIN (Kod Analiz Süreci — sistem haritalama adımı) ========================================================================== */ .flow-chain{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; justify-content:center; list-style:none; padding:0; margin:0; } .flow-chain li{ background:var(--bg-surface); border:1px solid rgba(0,255,174,0.18); border-radius:30px; padding:10px 18px; color:var(--txt-soft); font-size:14px; font-weight:600; } /* ========================================================================== METER BAR (statik seviye göstergesi — animasyonsuz) ========================================================================== */ .meter-row{ display:grid; grid-template-columns:140px 1fr 70px; align-items:center; gap:16px; margin-bottom:16px; } .meter-row span:first-child{ color:var(--txt-soft); font-size:14px; font-weight:600; } .meter-track{ height:8px; border-radius:4px; background:rgba(255,255,255,0.06); overflow:hidden; } .meter-fill{ height:100%; border-radius:4px; background:var(--clr-primary); } .meter-fill.warning{ background:var(--clr-warning); } .meter-fill.danger{ background:var(--clr-danger); } .meter-row span:last-child{ color:var(--txt-label); font-size:12px; text-align:right; text-transform:uppercase; letter-spacing:0.5px; } /* ========================================================================== STEP MARKER (Kod Analiz Süreci — adım başlıkları) ========================================================================== */ .step-marker{ display:inline-flex; align-items:center; gap:10px; margin-bottom:18px; } .step-marker strong{ display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background:rgba(0,255,174,0.08); border:1px solid rgba(0,255,174,0.25); color:var(--clr-primary); font-size:14px; font-weight:800; } .step-marker span{ color:var(--txt-label); font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase; } .step-block{ max-width:820px; margin:0 auto 90px; } .step-block:last-child{ margin-bottom:0; } .step-lead{ font-size:22px; font-weight:700; line-height:1.4; margin-bottom:24px; } .step-lead em{ color:var(--clr-primary); font-style:normal; } .representative-tag{ display:inline-block; color:var(--txt-label); background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); padding:5px 12px; border-radius:20px; font-size:11px; letter-spacing:0.3px; margin-bottom:14px; } /* ========================================================================== HANGING BADGE (tüm sayfalarda — ücretsiz ön değerlendirme dikkat çekici) ========================================================================== */ .hanging-badge{ position:fixed; top:89px; right:60px; z-index:850; display:flex; flex-direction:column; align-items:center; text-decoration:none; transform-origin:top center; animation:hanging-swing 3.6s ease-in-out infinite; } .hanging-string{ width:2px; height:34px; background:linear-gradient(to bottom, rgba(0,255,174,0.5), rgba(0,255,174,0.15)); } .hanging-card{ display:flex; flex-direction:column; align-items:center; gap:2px; background:var(--bg-surface); border:1px solid rgba(0,255,174,0.3); border-radius:12px; padding:10px 16px 12px; box-shadow:0 15px 35px rgba(0,0,0,0.45); transition:transform 0.2s ease, border-color 0.2s ease; } .hanging-badge:hover .hanging-card{ border-color:rgba(0,255,174,0.55); transform:translateY(-2px); } .hanging-card strong{ color:var(--clr-primary); font-size:13px; font-weight:800; white-space:nowrap; } .hanging-card small{ color:var(--txt-muted); font-size:10.5px; font-weight:600; letter-spacing:0.3px; white-space:nowrap; } @keyframes hanging-swing{ 0%, 100%{ transform:rotate(-4deg); } 50%{ transform:rotate(4deg); } } @media(prefers-reduced-motion: reduce){ .hanging-badge{ animation:none; } } @media(max-width:900px){ .hanging-badge{ top:75px; right:16px; } .hanging-string{ height:24px; } .hanging-card{ padding:8px 12px 10px; } .hanging-card strong{ font-size:11px; } .hanging-card small{ font-size:9px; } } @media(max-width:480px){ .hanging-badge{ display:none; } } /* ========================================================================== CASE CARD (Vaka Analizleri sayfası) ========================================================================== */ .case-list{ display:flex; flex-direction:column; gap:28px; } .case-card{ background:linear-gradient(145deg, var(--bg-surface), var(--bg-surface-dark)); border:1px solid rgba(0,255,174,0.12); border-radius:var(--radius-lg); padding:40px; box-shadow:0 18px 50px rgba(0,0,0,0.28); transition:border-color 0.3s ease; } .case-card:hover{ border-color:rgba(0,255,174,0.3); } .case-tag{ display:inline-block; color:var(--clr-primary); background:rgba(0,255,174,0.07); border:1px solid rgba(0,255,174,0.16); padding:8px 14px; border-radius:30px; font-size:12px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; margin-bottom:18px; } .case-card h2{ font-size:24px; margin-bottom:28px; } .case-grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; } .case-grid-4 h3{ color:var(--clr-primary); font-size:13px; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:10px; } .case-grid-4 p{ color:var(--txt-muted); font-size:14px; line-height:1.7; } @media(max-width:1250px){ .case-grid-4{ grid-template-columns:1fr 1fr; } } @media(max-width:600px){ .case-card{ padding:26px; } .case-grid-4{ grid-template-columns:1fr; } } /* ========================================================================== SERVICE OUTPUT (hizmet kartlarında "Çıktı:" satırı) ========================================================================== */ .service-output{ margin-top:auto; padding-top:14px; border-top:1px solid rgba(0,255,174,0.1); font-size:13px !important; color:var(--txt-label) !important; line-height:1.5 !important; } .service-output strong{ color:var(--clr-primary); font-weight:700; } /* ========================================================================== PROBLEM CARDS (Hizmetler sayfası — "Bu hizmet size uygun mu?") ========================================================================== */ .problem-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } .problem-card{ display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--bg-surface); border:1px solid rgba(0,255,174,0.12); border-radius:14px; padding:18px 20px; color:var(--txt-soft); font-size:14.5px; font-weight:600; line-height:1.55; text-decoration:none; transition:border-color 0.2s ease, transform 0.2s ease; } .problem-card:hover{ border-color:rgba(0,255,174,0.4); transform:translateY(-2px); color:var(--clr-primary); } .problem-card span{ color:var(--clr-primary); font-size:18px; flex-shrink:0; } @media(max-width:900px){ .problem-grid{ grid-template-columns:1fr 1fr; } } @media(max-width:600px){ .problem-grid{ grid-template-columns:1fr; } } /* ========================================================================== EXPERTISE GRID (Hizmetler sayfası — Uzmanlık Alanlarımız) ========================================================================== */ .expertise-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px 32px; max-width:900px; margin:0 auto; } .expertise-grid li{ position:relative; padding-left:26px; color:var(--txt-soft); font-size:15px; line-height:1.6; } .expertise-grid li::before{ content:"✓"; position:absolute; left:0; top:0; color:var(--clr-primary); font-weight:800; } @media(max-width:1250px){ .expertise-grid{ grid-template-columns:1fr; } } .tech-stack-line{ text-align:center; color:var(--txt-label); font-size:13px; letter-spacing:0.3px; margin-top:28px; } /* ========================================================================== PRINCIPLE CARDS (Hakkımızda — Çalışma Prensiplerimiz) ========================================================================== */ .principle-grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:22px; max-width:920px; margin-left:auto; margin-right:auto; } .principle-card:last-child{ grid-column:1 / -1; width:min(100%, 449px); justify-self:center; } .principle-card{ background:var(--bg-surface); border:1px solid rgba(0,255,174,0.12); border-radius:var(--radius-md); padding:28px; box-shadow:0 18px 50px rgba(0,0,0,0.28); } .principle-card h3{ color:var(--clr-primary); font-size:17px; margin-bottom:10px; } .principle-card p{ color:var(--txt-muted); font-size:14.5px; line-height:1.7; } @media(max-width:1000px){ .principle-grid{ grid-template-columns:1fr 1fr; } } @media(max-width:600px){ .principle-grid{ grid-template-columns:1fr; } .principle-card:last-child{ grid-column:auto; width:100%; } } /* ========================================================================== MANIFESTO TEXT (Hakkımızda — ana metin bloğu) ========================================================================== */ .manifesto p{ color:var(--txt-soft); font-size:17px; line-height:1.9; margin-bottom:22px; max-width:760px; } .manifesto p.lead{ color:var(--txt-main); font-size:19px; font-weight:600; } /* ========================================================================== SCROLL CUE — zarif fare-ikonu, hafif hareketli nokta ========================================================================== */ .scroll-cue{ position:fixed; left:50%; bottom:34px; transform:translateX(-50%); z-index:800; display:flex; flex-direction:column; align-items:center; gap:9px; opacity:0.75; pointer-events:none; transition:opacity 0.6s ease, transform 0.5s ease; } .scroll-cue-mouse{ width:24px; height:38px; border:1.5px solid rgba(255,255,255,0.28); border-radius:14px; display:flex; justify-content:center; padding-top:7px; box-sizing:border-box; } .scroll-cue-dot{ width:4px; height:4px; border-radius:50%; background:var(--clr-primary); animation:scroll-cue-dot-move 2s ease-in-out infinite; } .scroll-cue-text{ font-size:10px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--txt-label); } .scroll-cue.is-dimmed{ opacity:0.28; } .scroll-cue.is-hidden{ opacity:0; transform:translateX(-50%) translateY(14px); } @keyframes scroll-cue-dot-move{ 0%{ transform:translateY(0); opacity:1; } 65%{ opacity:0; } 100%{ transform:translateY(13px); opacity:0; } } @media(prefers-reduced-motion:reduce){ .scroll-cue-dot{ animation:none; } } @media(max-width:600px){ .scroll-cue{ bottom:22px; } .scroll-cue-mouse{ width:20px; height:32px; border-radius:12px; padding-top:6px; } .scroll-cue-text{ font-size:9px; } } /* ========================================================================== PAGE HERO (iç sayfa başlıkları — services.html vb.) ========================================================================== */ .page-hero{ max-width:900px; padding-top:70px; padding-bottom:20px; } .page-hero h1{ max-width:840px; font-size:clamp(30px, 4.5vw, 46px); line-height:1.2; font-weight:800; margin-bottom:18px; letter-spacing:-0.5px; } .page-hero > p{ max-width:760px; color:var(--txt-muted); font-size:17px; line-height:1.8; } .compact-section-title{ font-size:22px; } .service-disclaimer{ margin-top:10px; color:var(--txt-label); font-size:12px; line-height:1.5; } .service-card[id]{ scroll-margin-top:110px; } /* ========================================================================== ANALYSIS HERO (analiz-sureci.html) ========================================================================== */ .analysis-hero{ max-width:820px; margin:0 auto; padding-top:80px; padding-bottom:20px; text-align:center; } .analysis-hero h1{ font-size:clamp(30px, 5vw, 50px); line-height:1.2; font-weight:800; margin-bottom:22px; letter-spacing:-0.5px; } .analysis-hero h1 span{ display:block; } @media(max-width:600px){ .analysis-hero h1 span{ display:inline; } } .analysis-hero > p{ max-width:640px; margin:0 auto 32px; color:var(--txt-muted); font-size:17px; line-height:1.8; } .score-method-note{ margin:0; padding:0 20px 18px; color:var(--txt-label); font-size:12px; line-height:1.6; } .full-width-audit{ max-width:100%; margin:24px 0; } /* ========================================================================== DELIVERY CHECKLIST (analiz-sureci.html — güvenlik inceleme kapsamı listesi) ========================================================================== */ .delivery-checklist{ display:grid; gap:12px; } .delivery-checklist li{ position:relative; padding-left:24px; color:var(--txt-soft); font-size:14px; line-height:1.65; } .delivery-checklist li::before{ content:"✓"; position:absolute; left:0; top:0; color:var(--clr-primary); font-weight:800; } .security-checklist{ max-width:540px; margin-top:20px; } .flow-caption{ margin-bottom:16px; color:var(--txt-label); font-size:12px; text-align:center; letter-spacing:0.3px; } .analysis-hero-actions{ justify-content:center; } .analysis-method-intro{ max-width:820px; margin:0 auto; padding-top:20px; padding-bottom:20px; text-align:center; } .analysis-method-intro h2{ font-size:clamp(24px, 3.5vw, 34px); line-height:1.3; font-weight:800; } .analysis-method-intro p{ max-width:600px; margin:14px auto 0; color:var(--txt-muted); font-size:15px; line-height:1.7; } /* ========================================================================== FINAL CTA — dikey (alt alta) buton düzeni varyantı ========================================================================== */ .final-actions-stacked{ flex-direction:column; align-items:center; gap:14px; } /* ========================================================================== HAKKIMIZDA — manifesto sayfası ortak sınıfları ========================================================================== */ .manifesto-section{ padding-top:0; } .section-title-sm{ font-size:28px; } .manifesto-emphasis{ color:var(--txt-main); font-weight:600; } .manifesto-emphasis-lg{ color:var(--txt-main); font-weight:600; font-size:19px; } .secondary-link-visible{ font-size:15px; font-weight:600; color:var(--txt-soft); } .manifesto-hero{ max-width:820px; padding-top:70px; padding-bottom:20px; } .manifesto-hero h1{ font-size:clamp(28px, 4vw, 42px); line-height:1.3; font-weight:800; margin-bottom:24px; letter-spacing:-0.5px; } .manifesto-hero h1 span{ display:block; } @media(max-width:500px){ .manifesto-hero h1 span{ display:inline; } .manifesto-hero h1 span + span::before{ content:" "; } } .info-box-title{ font-size:28px; margin-top:14px; } .services-problem-section{ padding-top:20px; } .section-footnote{ color:var(--txt-muted); font-size:14px; margin-top:28px; text-align:center; max-width:640px; margin-left:auto; margin-right:auto; } /* ========================================================================== 404 SAYFASI ========================================================================== */ .error-page{ min-height:60vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding-top:80px; padding-bottom:80px; } .error-code{ font-family:var(--font-mono); font-size:clamp(60px, 12vw, 120px); font-weight:800; color:var(--clr-primary); opacity:0.85; line-height:1; margin-bottom:8px; } .error-page h1{ font-size:clamp(24px, 3.5vw, 34px); font-weight:800; margin-bottom:14px; } .error-page p{ color:var(--txt-muted); font-size:16px; line-height:1.8; max-width:500px; margin-bottom:32px; } .error-links{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; } @media(max-width:520px){ .error-links{ flex-direction:column; width:100%; } .error-links .btn{ width:100%; text-align:center; } } @media(max-width:480px){ .error-links{ flex-direction:column; width:100%; } .error-links .btn{ width:100%; text-align:center; } } /* ========================================================================== INDEX.HTML — kalan inline stil temizliği için sınıflar ========================================================================== */ .hero-note{ color:var(--txt-label); font-size:13px; margin-bottom:18px; } .symptoms-section{ padding-top:70px; } .full-width-list{ max-width:100%; } .also-label{ text-align:center; color:var(--txt-label); font-size:13px; margin:28px 0 14px; text-transform:uppercase; letter-spacing:0.5px; } .secondary-list{ max-width:640px; margin:0 auto; display:flex; flex-direction:column; gap:10px; } .secondary-list li{ color:var(--txt-label); font-size:14px; line-height:1.6; text-align:center; } .symptoms-closing{ text-align:center; color:var(--txt-muted); font-size:15px; line-height:1.7; max-width:640px; margin:32px auto 0; } .centered-link{ text-align:center; margin-top:24px; } .centered-link-sm{ text-align:center; margin-top:28px; } .compare-note{ color:var(--txt-label); font-size:12.5px; margin-top:16px; padding-top:16px; border-top:1px solid rgba(0,255,174,0.12); line-height:1.6; } .services-preview-note{ color:var(--txt-muted); font-size:14.5px; margin-bottom:16px; } /* ========================================================================== ANALIZ-SURECI.HTML — kalan inline stil temizliği ========================================================================== */ .step-supporting-text{ color:var(--txt-muted); font-size:15px; line-height:1.75; margin-bottom:24px; } .mt-20{ margin-top:20px; } .mt-24{ margin-top:24px; } /* ========================================================================== METER GENİŞLİK SINIFLARI (inline style yerine) ========================================================================== */ .meter-60{ width:60%; } .meter-70{ width:70%; } .meter-80{ width:80%; } /* ========================================================================== FLOW CHAIN —
    semantik yapısı için ok ekleme ========================================================================== */ .flow-chain li:not(:last-child)::after{ content:"→"; display:inline-block; margin-left:10px; color:var(--clr-primary); font-size:16px; font-weight:400; } .trust-pills-left{ justify-content:flex-start; } .form-transparency-note{ color:var(--txt-label); font-size:12px; line-height:1.6; margin-bottom:16px; } /* ========================================================================== FORM — hata/başarı renk ayrımı, yardım metni, disabled durum ========================================================================== */ .form-help{ color:var(--txt-label); font-size:12px; line-height:1.6; margin-top:4px; } .btn:disabled{ cursor:not-allowed; opacity:0.65; transform:none; box-shadow:none; } .form-field input[aria-invalid="true"], .form-field select[aria-invalid="true"], .form-field textarea[aria-invalid="true"]{ border-color:var(--clr-danger); } .form-note.is-error{ color:var(--clr-danger); } .form-note.is-success{ color:var(--clr-good); } .hero-emphasis{ color:var(--clr-primary); } .trust-pills-center{ justify-content:center; margin-top:24px; } .form-note-hint{ color:var(--txt-label); font-size:12px; margin-top:8px; } .danger-text{ color:var(--clr-danger); } .link-row-sm{ margin-top:8px; text-align:center; } .link-row-lg{ text-align:center; margin-top:28px; } /* ========================================================================== KURUCU / TEKNİK SORUMLU BÖLÜMÜ (hakkimizda.html) ========================================================================== */ .founder-card{ background:var(--bg-surface); border:1px solid rgba(0,255,174,0.14); border-radius:var(--radius-md); padding:32px; max-width:640px; margin:0 auto; } .founder-card h3{ font-size:20px; margin-bottom:4px; } .founder-role{ color:var(--clr-primary); font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:0.4px; margin-bottom:16px; } .founder-card p:not(.founder-role){ color:var(--txt-muted); font-size:15px; line-height:1.75; } @media(max-width:600px){ .section-block{ padding-top:64px; padding-bottom:64px; } .manifesto-section{ padding-top:48px; padding-bottom:48px; } } .audit-report .score-method-note{ padding-top:12px; } /* ========================================================================== VAKA-ANALIZLERI.HTML — mobil güvenlik + ilgili hizmet linki ========================================================================== */ .case-card p, .case-card h2, .case-card h3, .case-tag{ overflow-wrap:anywhere; } .case-service-link{ display:inline-flex; margin-top:24px; color:var(--clr-primary); font-size:13px; font-weight:700; text-decoration:underline; text-underline-offset:4px; }