/* =================================================================== Zeytin Ağacı — Ortak stiller (Akademi + Danışmanlık) Bu dosya her iki sitede de aynıdır. =================================================================== */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Matrix geçişinden gelirken: sayfa boyanmadan KOYU zemin (beyaz/boş flaşı önler). 'deki minik script 'e .za-fx-in ekler; transition.js perdeyi kurunca kaldırır. Perde de koyu (siyah) olduğu için geçiş kesintisiz görünür. */ html.za-fx-in, html.za-fx-in body { background: #000000 !important; } :root { --yesil: #2C5B24; --yesil-acik: #3E7B33; --yesil-orta: #4F8F3A; --turuncu: #E08A3C; --turuncu-koyu: #CC7327; --krem: #FBFAF5; --metin: #2B3A24; --metin-soft: #5a6a50; --kenar: #EEEADD; } html { scroll-behavior: smooth; } body { font-family: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--krem); color: var(--metin); min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; } a { text-decoration: none; color: inherit; } button { font-family: inherit; border: none; cursor: pointer; } img { max-width: 100%; } .font-q { font-family: 'Quicksand', sans-serif; } .mono { font-family: 'JetBrains Mono', monospace; } .wrap { max-width: 1200px; margin: 0 auto; padding: 0 28px; } /* ----- Animasyonlar ----- */ @keyframes zaFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes zaFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .za-fade { animation: zaFade 0.5s ease both; } /* ----- Placeholder (görsel gelene kadar) ----- */ .ph { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #EEF3E6 0%, #E3EDD7 100%); color: #8aa07b; font-family: 'Quicksand', sans-serif; font-weight: 600; font-size: 13px; text-align: center; padding: 14px; line-height: 1.4; border-radius: 14px; } /* ----- Butonlar ----- */ .btn { display: inline-flex; align-items: center; gap: 9px; font-family: 'Quicksand', sans-serif; font-weight: 700; border-radius: 999px; transition: transform .2s, background .2s, box-shadow .2s; } .btn-o { background: var(--turuncu); color: #fff; padding: 15px 28px; font-size: 17px; } .btn-o:hover { background: var(--turuncu-koyu); transform: translateY(-2px); } .btn-g { background: var(--yesil-orta); color: #fff; padding: 14px 26px; font-size: 16px; } .btn-g:hover { background: var(--yesil-acik); transform: translateY(-2px); } .btn-line { background: #fff; border: 1.5px solid #d8e0cd; color: var(--yesil-acik); padding: 15px 28px; font-size: 17px; font-weight: 600; } .btn-line:hover { background: #E7F1DB; border-color: var(--yesil-orta); } /* ----- Kartlar ----- */ .card { background: #fff; border: 1px solid var(--kenar); border-radius: 20px; transition: transform .25s, box-shadow .25s, border-color .25s; } .card-hover:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(43,58,36,0.13); border-color: #cdd9c0; } /* ----- Etiket (badge) ----- */ .badge { display: inline-block; font-family: 'Quicksand', sans-serif; font-weight: 600; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; padding: 7px 16px; border-radius: 999px; } .badge-o { color: var(--turuncu-koyu); background: #FBEEDD; } .badge-g { color: var(--yesil-acik); background: #E7F1DB; } /* ----- Header (ortak iskelet) ----- */ .site-header { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(10px); } .header-inner { max-width: 1200px; margin: 0 auto; padding: 0 28px; height: 74px; display: flex; align-items: center; gap: 24px; } .nav { display: flex; align-items: center; gap: 6px; margin-left: auto; } .nav-link { background: none; padding: 9px 14px; border-radius: 10px; font-family: 'Quicksand', sans-serif; font-weight: 600; font-size: 15px; transition: background .2s, color .2s; } .pill { display: inline-flex; align-items: center; gap: 7px; padding: 10px 18px; border-radius: 999px; font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 14px; transition: transform .2s, background .2s; } /* ----- Hamburger ----- */ .hamburger { display: none; margin-left: auto; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 44px; height: 44px; background: none; border-radius: 10px; } .hamburger span { width: 24px; height: 2.5px; border-radius: 2px; transition: .2s; } .drawer { display: none; } .drawer.open { display: block; } /* ----- Footer ----- */ .site-footer { background: #2C3A24; color: #cdd6c2; margin-top: auto; } .footer-grid { max-width: 1200px; margin: 0 auto; padding: 52px 28px 28px; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; } .footer-grid h4 { font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 15px; color: #fff; } .footer-grid a, .footer-grid button { background: none; color: #cdd6c2; text-align: left; padding: 0; font-size: 15px; font-family: 'Nunito', sans-serif; transition: color .2s; } .footer-grid a:hover, .footer-grid button:hover { color: #fff; } .footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding: 18px 28px; text-align: center; font-size: 13px; color: #8a9680; } /* ----- Grid yardımcıları ----- */ .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } /* ----- Section başlık ----- */ .section-head { text-align: center; max-width: 640px; margin: 0 auto; } .section-head h2 { font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: clamp(28px, 3.2vw, 42px); line-height: 1.12; margin: 14px 0 0; color: var(--metin); } .section-head p { font-size: 17px; line-height: 1.6; color: #6b7a60; margin: 16px 0 0; } /* =================================================================== RESPONSIVE =================================================================== */ @media (max-width: 860px) { .grid4 { grid-template-columns: 1fr 1fr; } .grid3 { grid-template-columns: 1fr; } .hide-mobile { display: none !important; } .nav { display: none !important; } .hamburger { display: inline-flex !important; } /* Drawer header'ın altında, tam genişlik açılır */ .site-header { position: sticky; } .header-inner { row-gap: 10px; } } @media (max-width: 600px) { .grid4, .grid3, .grid2 { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; gap: 28px; } .wrap { padding: 0 18px; } }