/* ===================================================================
   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).
   <head>'deki minik script <html>'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 <html> ü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;
}
/* MARKA BLOGU EZILMESIN.

   Flex ogeleri varsayilan olarak KUCULEBILIR (flex-shrink:1). Menu
   uzadikca (giris yapinca Hesabim, EN, Merkez... ekleniyor) tarayici yer
   acmak icin logo baglantisini de sikistiriyordu: <img> yatayda eziliyor,
   en-boy orani bozuluyordu. height/width:auto bunu ENGELLEMEZ — oran
   ancak oge sikismazsa korunur.

   Cozum: marka baglantisi ve icindeki gorsel hic kuculmez; daralan yer
   menuden kazanilir (menu zaten 1200px altinda hamburger'a doner). */
.header-inner > a:first-child { flex: 0 0 auto; }
.header-inner > a:first-child img { flex: none; max-width: none; }

/* MENU BAGLANTILARI TEK SATIR (menu baglantisi satira kirilmasin).

   Flex ogeleri varsayilan olarak kuculebilir. Menu uzayinca tarayici yer
   acmak icin en uzun baglantiyi daraltiyor ve metin ikiye bolunuyordu
   ("Kurumsal / Danismanlik"). Tek oge iki satir olunca menunun hizasi
   bozuluyor ve o baglanti yamali gorunuyor.

   1500px gibi bol yerde bile oluyordu: sebep dar ekran degil, flex'in
   kuculme izni. Bu yuzden cozum medya sorgusu degil, kuculmeyi kapatmak.

   Menu gercekten sigmadiginda zaten hamburger'e doner (asagidaki
   responsive bolumu); o esik bu kuralla birlikte ayarlanmali. */
.nav-link, .nav .pill { white-space: nowrap; flex: 0 0 auto; }

.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.

   BU SAYIYI YUKSELTMEYIN. Bir ara 1450, sonra 1560 yapildi; 1366 ve 1440
   gibi YAYGIN dizustu ekranlarinda menu hamburger'e dusuyor ve site
   masaustunde mobil gibi gorunuyordu — kullanicinin bildirdigi hata buydu.
   Menuye yeni bir oge eklendiginde cozum esigi buyutmek DEGIL, o ogeyi
   kucultmek ya da menuden cikarmaktir.

   1200: marka + baglantilar + hesap dugmesi bu genislikte tek satira sigar. */
/* DAR MASAUSTU (1201-1440): menu sigmiyorsa OGELERI kucult, esigi degil.

   Menude 62px'lik Merkez gorseli var ve 1366/1440 gibi yaygin ekranlarda
   toplam genislik tasiyordu. Hamburger esigini yukseltmek siteyi bu
   ekranlarda mobil gorunume dusururdu (bir kez yapildi, geri alindi).
   Bunun yerine baglanti dolgusu ve yazi olcusu kisilir; menu tek satir
   kalir, gorsel kucuImez. */
@media (max-width: 1440px) and (min-width: 1201px) {
  .nav { gap: 2px; }
  .nav-link { padding: 9px 9px; font-size: 14px; }
  .nav .pill { padding: 9px 13px; font-size: 13.5px; }
}

@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; }