:root { --color-gray-900: #111827; --color-gray-800: #1F2937; --color-gray-700: #374151; --color-gray-100: #F3F4F6; --color-gray-50: #F9FAFB; --color-yellow: #EAB308; --color-yellow-hover: #CA8A04; --color-white: #FFFFFF; --radius-squircle: 24px; --radius-btn: 16px; --spacing-unit: 8px; --shadow-soft: 0 8px 32px rgba(0, 0, 0, 0.08); --shadow-hover: 0 16px 48px rgba(0, 0, 0, 0.12); --font-editorial: ui-condensed, system-ui, -apple-system, sans-serif; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font-editorial); background-color: var(--color-gray-50); color: var(--color-gray-800); line-height: 1.6; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E"); } a { color: inherit; text-decoration: none; } ul { list-style: none; } .btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 24px; border-radius: var(--radius-btn); font-weight: 600; cursor: pointer; transition: all 0.3s ease; border: none; font-family: inherit; font-size: 1rem; } .btn-primary { background-color: var(--color-yellow); color: var(--color-gray-900); box-shadow: var(--shadow-soft); } .btn-primary:hover { background-color: var(--color-yellow-hover); transform: translateY(-2px); box-shadow: var(--shadow-hover); } .site-header { position: sticky; top: 0; background-color: var(--color-gray-800); color: var(--color-white); z-index: 1000; padding: 16px 0; box-shadow: 0 4px 24px rgba(0,0,0,0.15); } .header-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; display: flex; justify-content: space-between; align-items: center; } .brand { display: flex; align-items: center; gap: 12px; font-size: 1.5rem; font-weight: 700; color: var(--color-white); letter-spacing: -0.02em; } .brand svg { width: 32px; height: 32px; color: var(--color-yellow); } .site-nav { display: flex; align-items: center; gap: 32px; } .nav-list { display: flex; gap: 24px; } .nav-list a { font-weight: 500; transition: color 0.2s; color: var(--color-gray-100); } .nav-list a:hover { color: var(--color-yellow); } .burger-menu { display: none; background: none; border: none; color: var(--color-white); cursor: pointer; padding: 8px; } .burger-menu svg { width: 28px; height: 28px; } .nav-sheet-header, .nav-cta-mobile, .nav-overlay { display: none; } .site-footer { background-color: var(--color-gray-900); color: var(--color-gray-100); padding: 64px 24px 32px; margin-top: 64px; } .footer-container { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 32px; margin-bottom: 48px; } .footer-card { background-color: var(--color-gray-800); padding: 32px; border-radius: var(--radius-squircle); box-shadow: var(--shadow-soft); } .footer-brand-name { font-size: 1.5rem; font-weight: 700; margin-bottom: 8px; color: var(--color-white); } .tagline { color: var(--color-gray-100); opacity: 0.8; font-size: 1rem; } .footer-title { font-size: 1.25rem; font-weight: 600; margin-bottom: 24px; color: var(--color-white); border-bottom: 2px solid var(--color-gray-700); padding-bottom: 8px; display: inline-block; border-color: var(--color-yellow); } .footer-links { display: flex; flex-direction: column; gap: 16px; } .footer-links a:hover { color: var(--color-yellow); } .contact-details { display: flex; flex-direction: column; gap: 16px; } .contact-details li { display: flex; align-items: flex-start; gap: 12px; } .contact-details svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; color: var(--color-yellow); } .contact-details a:hover { color: var(--color-yellow); text-decoration: underline; } .footer-bottom { max-width: 1200px; margin: 0 auto; text-align: center; padding-top: 32px; border-top: 1px solid var(--color-gray-800); font-size: 0.875rem; color: #9CA3AF; } .card { background: var(--color-white); border-radius: var(--radius-squircle); padding: 32px; box-shadow: var(--shadow-soft); transition: all 0.3s ease; } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); } .steps-timeline { display: grid; gap: 32px; } .hero, .depo-secenekleri, .safe-store-hakkinda, .nasil-calisir, .sss-section { padding: 64px 24px; max-width: 1200px; margin: 0 auto; } @media (max-width: 768px) { .site-nav { position: fixed; bottom: 0; left: 0; right: 0; background: var(--color-white); color: var(--color-gray-900); flex-direction: column; align-items: flex-start; padding: 32px 24px 48px; border-radius: 32px 32px 0 0; transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); z-index: 2000; box-shadow: 0 -8px 40px rgba(0,0,0,0.2); gap: 0; } .site-nav.is-active { transform: translateY(0); } .nav-overlay { display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 1500; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; backdrop-filter: blur(4px); } .nav-overlay.is-active { opacity: 1; pointer-events: auto; } .nav-sheet-header { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--color-gray-100); } .nav-sheet-title { font-weight: 700; font-size: 1.25rem; color: var(--color-gray-900); } .close-menu { background: none; border: none; color: var(--color-gray-700); cursor: pointer; } .close-menu svg { width: 24px; height: 24px; } .nav-list { flex-direction: column; width: 100%; gap: 0; } .nav-list a { display: block; padding: 16px 0; border-bottom: 1px solid var(--color-gray-50); color: var(--color-gray-800); font-size: 1.1rem; } .nav-cta-mobile { display: block; width: 100%; margin-top: 32px; } .nav-cta-mobile .btn { width: 100%; padding: 16px; font-size: 1.1rem; } .desktop-cta { display: none; } .burger-menu { display: block; } .footer-container { grid-template-columns: 1fr; } }
/* footer extras */
.footer__extras{margin-top:16px;}
.footer__extrasInner{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start;justify-content:space-between;}
.footer__social{display:flex;gap:10px;align-items:center;}
.footer-social{display:inline-flex;gap:8px;align-items:center;text-decoration:none;}
.footer-social__icon{display:block;}
.footer__poemWrap{max-width:520px;}
.footer-poem{opacity:0.9;font-size:0.95em;line-height:1.35;}
/* --- injected by logo step --- */
.brand{display:inline-flex;align-items:center;gap:10px}
.brand-logo{width:28px;height:28px;display:inline-block;flex:0 0 auto}
.brand-logo *{vector-effect:non-scaling-stroke}
/* --- /injected by logo step --- */