/* =================================================================== 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. GÜVENLİK AĞI — animasyon: sınıfın kaldırılması transition.js'in yüklenip çalışmasına bağlıydı. Script geç gelir, hata alır ya da hiç çalışmazsa sınıf üzerinde KALIYOR ve sayfa kalıcı olarak SİYAH görünüyordu (oyun sayfasında bütün oyun alanı koyu bir blok olarak kaldı; yenilemek de düzeltmiyordu, çünkü sessionStorage işareti duruyor). Bu yüzden karartma artık kendi kendine sönüyor: 1.2 sn sonra CSS zemini geri veriyor. JS düzgün çalıştığında zaten perde örtüyor, fark edilmez; çalışmadığında sayfa siyah kilitlenmiyor. */ html.za-fx-in, html.za-fx-in body { background: #000000 !important; animation: za-fx-kurtar 0s linear 1.2s forwards; } @keyframes za-fx-kurtar { to { background: var(--krem, #FAF8F2) !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; -webkit-font-smoothing: antialiased; /* TASMAYI GIZLEME, ENGELLE. `overflow-x: hidden` govdeyi bir kaydirma kabina cevirir: icerideki genis bir oge govdeyi goruntu alanindan GENIS yapar, tasan kisim kirpilir ve sagda bos bir serit gorunur — ustelik document.scrollWidth temiz cikar, yani hata olcumde gizlenir. Bunun yerine govde goruntu alanina sabitlenir; boylece tasiran oge varsa gercekten gorunur ve duzeltilebilir. */ width: 100%; max-width: 100%; /* Kirilamayan uzun metin (URL, uzun kelime) satiri tasirmasin. */ overflow-wrap: break-word; } /* Yatay tasmayi html duzeyinde kes: govdede olursa yukaridaki tuzagi geri getirir. Burada kirpma degil, tasmanin kaydirma URETMEMESI amaci. */ html { max-width: 100%; overflow-x: clip; } /* Dar ekranda KLASIK kaydirma cubugu gizlenir. Telefonda cubuk zaten icerigin ustunde yuzer ve yer kaplamaz; ama masaustu tarayicida daraltilmis pencere ve DevTools'un duyarli modu 15px'lik klasik cubuk cizer, sayfa o kadar daralir ve sagda bos bir serit kalir. Kaydirma yine calisir (dokunma, tekerlek, klavye); yalnizca cubugun kendisi cizilmez. */ @media (max-width: 860px) { html { scrollbar-width: none; } html::-webkit-scrollbar { width: 0; height: 0; } } 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 { /* max-width + wrap: "Satın almak için giriş yapın" gibi uzun metinli dugme dar ekranda kutuyu tasiriyor ve SAYFAYI yana kaydiriyordu. inline-flex ogeleri varsayilan olarak kucultulmez; metin sarilir. */ display: inline-flex; align-items: center; gap: 9px; max-width: 100%; text-align: center; 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; } /* ----- Açılır menüler (Eğitimler / Hesabım) ----- */ /* Menü içindeki satırlar: üzerine gelince yumuşak zeytin zemini. */ .menu-pop .menu-row, .menu-pop > div > a { transition: background .15s; } .menu-pop .menu-row:hover, .menu-pop > div > a:hover { background: #F5F7F0; } /* Hesabım başlığı bir buton — hover'da hafifçe belirginleşir. */ .acc-trigger { transition: background .2s, border-color .2s; } .acc-trigger:hover { background: rgba(255, 255, 255, 0.18) !important; border-color: rgba(255, 255, 255, 0.38) !important; } /* ----- 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; } /* Cekmece, yapisik (sticky) baslik icinde durur: sayfa kaydirilsa da o yerinde kalir, bu yuzden icerigi ekrandan uzunsa alt kismi HIC gorunmuyordu. Kendi icinde kayar; yukseklik goruntu alanindan baslik payi dusulerek verilir. */ .drawer.open { display: block; max-height: calc(100svh - 74px); overflow-y: auto; -webkit-overflow-scrolling: touch; } /* Cekmece acikken sabit konumlu sans kurabiyesi dugmesi menunun ustune biniyordu. */ body:has(.drawer.open) .za-fc-btn { display: none !important; } /* ----- 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; } /* ALT BILGI TASMASI: grid sutunlari varsayilan min-width:auto ile icindeki en genis kirilamaz parcaya (e-posta adresi) kadar DARALAMAZ. 320px'te sutun 315px kaliyor, belge 343px'e genisliyor ve sagda bos bir serit olusuyordu — html/body 320 oldugu icin olcumlerde de gorunmuyordu. */ .footer-grid > * { min-width: 0; } .site-footer a, .site-footer p, .site-footer li { overflow-wrap: anywhere; } .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 =================================================================== */ /* Menu 1200px altinda hamburger'e gecer (eskiden 860): marka + yedi baglanti + hesap dugmesi ~1196px ister; daha dar ekranda satira kiriliyordu. */ @media (max-width: 1200px) { .nav { display: none !important; } .hamburger { display: inline-flex !important; } } @media (max-width: 860px) { .grid4 { grid-template-columns: 1fr 1fr; } .grid3 { grid-template-columns: 1fr; } .hide-mobile { display: none !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; } } /* ----- Çok sütunlu yerleşim: mobilde tek sütuna düşer ----- Sütun oranı görünümde --split değişkeniyle verilir (style="--split:1.4fr 1fr"), medya sorgusu yalnızca sütun sayısını düşürür. grid-template-columns SATIR İÇİNDE YAZILMAZ: satır içi stil medya sorgusunu her zaman ezer; ana sayfa hero'su ve detay sayfaları telefonda tam bu yüzden yarım sütuna sıkışıyordu. .split : içerik bölmeleri (metin + görsel, içerik + satın alma kutusu) — 860px altında tek sütun .split-sm : eşit iki alan (form çiftleri, SSS) — tablette iki sütun kalır, 600px altında tek sütun */ .split, .split-sm { display: grid; grid-template-columns: var(--split, 1fr 1fr); } @media (max-width: 860px) { .split { grid-template-columns: 1fr; } } @media (max-width: 600px) { .split-sm { grid-template-columns: 1fr; } } /* ----- Telefonda yana kaydırılan filtre şeridi (blog kategorileri) ----- Masaüstünde ortalanmış, sarılan çipler; 600px altında tek satırda yana kayan şerit — dört satıra sarılıp sayfayı aşağı itmesin. */ .chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; } @media (max-width: 600px) { .chips { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 8px; scrollbar-width: none; } .chips::-webkit-scrollbar { display: none; } .chips > a { flex: none; } } /* ----- Kapak kartları: telefonda YATAY ----- Dikey (2/3) kapak telefonda tek sütunda ~500px yer kaplıyor, iki sütunda ise başlıklar üç satıra kırılıp kartlar farklı boylarda kalıyordu. Dar ekranda kart yatay olur: solda küçük kapak, sağda başlık ve fiyat — liste taranabilir olur, bir ekrana üç dört kitap sığar. */ @media (max-width: 600px) { .grid-kapak { grid-template-columns: 1fr !important; gap: 12px; } .grid-kapak > a { flex-direction: row !important; align-items: stretch; } /* Kapak: sabit dar sütun; oranı korur, metne yer bırakır. */ .grid-kapak > a > img, .grid-kapak > a > .ph { width: 104px; flex: none; height: auto; align-self: stretch; } .grid-kapak > a > div { padding: 14px 16px !important; justify-content: center; } } /* ----- Izgara patlamasi onlemi ----- Grid/flex cocuklari varsayilan olarak min-width:auto'dur: icindeki en genis kirilamaz parca (kupon satiri: input + "Uygula" dugmesi, uzun bir kelime, sabit genislikli bir gorsel) kadar DARALAMAZ. Telefonda sutun bu yuzden ekrandan genis olur, ayni satirdaki metin kesilir ve sayfa yana kayar. min-width:0 ile sutun daralir, icerik kendi icinde sarilir. */ .split > *, .split-sm > *, .grid2 > *, .grid3 > *, .grid4 > * { min-width: 0; }