/* /ekip statik sayfaları: qayralab.com'un koyu teması (renkler canlı siteden alındı). */
:root {
  --zemin: #0b0e19;
  --yuzey: #111627;
  --yuzey-2: #161c30;
  --cizgi: #1d283a;
  --metin: #94a3b8;
  --acik: #e4e4e7;
  --baslik: #ffffff;
  --yesil: #34d399;
  --yesil-koyu: rgba(52, 211, 153, 0.12);
  --sari: #fbbf24;
  --yaricap: 16px;
  --yazi: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--zemin);
  color: var(--metin);
  font: 16px/1.6 var(--yazi);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
a:focus-visible { outline: 2px solid var(--yesil); outline-offset: 3px; border-radius: 6px; }
h1, h2 { color: var(--baslik); letter-spacing: -0.02em; line-height: 1.15; margin: 0; }

.ust {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; padding-top: max(12px, env(safe-area-inset-top));
  background: rgba(11, 14, 25, 0.85);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--cizgi);
}
.marka { color: var(--baslik); font-weight: 800; letter-spacing: 0.22em; text-decoration: none; font-size: 15px; }
.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 8px 16px;
  color: var(--baslik); font-weight: 600; font-size: 14px; text-decoration: none;
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 12px;
}
.dugme:hover { background: rgba(255, 255, 255, 0.14); }
.dugme.birincil { background: var(--yesil); border-color: var(--yesil); color: #05221a; }
.dugme.birincil:hover { filter: brightness(1.08); }

.kap { max-width: 640px; margin: 0 auto; padding: 24px 16px 40px; }
.kap.genis { max-width: 960px; }
.ust-etiket { margin: 0 0 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--yesil); }

/* üye profili */
.profil { text-align: center; padding: 8px 0 28px; }
.avatar {
  width: 136px; height: 136px; margin: 0 auto 18px; border-radius: 50%;
  border: 3px solid var(--yesil); box-shadow: 0 0 0 6px var(--yesil-koyu);
  object-fit: cover; background: var(--yuzey-2);
}
.avatar.harf {
  display: flex; align-items: center; justify-content: center;
  color: var(--baslik); font-size: 44px; font-weight: 700; letter-spacing: 0.02em;
  background: linear-gradient(135deg, #1b2a3f, #0f3b2f);
}
.profil h1 { font-size: clamp(28px, 8vw, 38px); }
.rol { margin: 8px 0 0; color: var(--acik); font-size: 17px; }
.bolum { margin: 4px 0 0; color: var(--metin); font-size: 14px; }
.rozet {
  display: inline-flex; align-items: center; gap: 8px; margin: 16px 0 0;
  padding: 6px 14px; border-radius: 999px; font-size: 14px; font-weight: 600;
  color: var(--sari); background: rgba(251, 191, 36, 0.1); border: 1px solid rgba(251, 191, 36, 0.35);
}
.rozet svg { width: 16px; height: 16px; flex: none; }
.tanitim { margin: 18px auto 0; max-width: 480px; color: var(--acik); }
.profil .dugme { margin-top: 18px; }

/* kartlar */
.kart {
  background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--yaricap);
  overflow: hidden; margin-top: 16px;
}
.kart .ic { padding: 20px; }
.kart h2 { font-size: 20px; margin-bottom: 10px; }
.kart p { margin: 0 0 16px; }
/* yalnız kartın kapak görseli (doğrudan çocuk); içteki avatar/logo görsellerine dokunma */
.kart > img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

.basari { list-style: none; margin: 0; padding: 0; }
.basari li { display: flex; align-items: baseline; gap: 14px; padding: 12px 0; border-top: 1px solid var(--cizgi); }
.basari li:first-child { border-top: 0; padding-top: 0; }
.derece { flex: none; min-width: 2.2em; font-size: 28px; font-weight: 800; color: var(--sari); line-height: 1; }
.basari strong { display: block; color: var(--baslik); font-weight: 600; }

.liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.liste a {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; text-decoration: none;
  border: 1px solid var(--cizgi); border-radius: 12px; background: var(--yuzey-2);
}
.liste a:hover { border-color: rgba(52, 211, 153, 0.5); }
.liste a[aria-current="page"] { border-color: var(--yesil); }
.liste .ad { color: var(--baslik); font-weight: 600; line-height: 1.3; }
.liste small { display: block; color: var(--metin); font-size: 13px; }
.mini { width: 44px; height: 44px; flex: none; border-radius: 50%; object-fit: cover; background: var(--yuzey); }
.mini.harf {
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; color: var(--baslik);
  background: linear-gradient(135deg, #1b2a3f, #0f3b2f);
}

.logolar {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 22px 30px;
}
.logolar img { height: 36px; width: auto; max-width: 100%; opacity: 0.85; }
@media (hover: hover) { .logolar img:hover { opacity: 1; } }

/* Hakkımızda sütunları */
.sutunlar { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 14px; }
.sutunlar h3 { margin: 0 0 4px; color: var(--baslik); font-size: 16px; }
.sutunlar p { margin: 0; font-size: 15px; }
@media (min-width: 900px) { .kap.genis .sutunlar { grid-template-columns: repeat(3, 1fr); } }

/* iletişim formu */
.iletisim { border-color: rgba(52, 211, 153, 0.45); }
.dugme.genis { width: 100%; min-height: 48px; font-size: 16px; }
.ya-da { margin: 14px 0 6px; font-size: 14px; }
.form { display: grid; gap: 12px; }
.form label { display: grid; gap: 6px; color: var(--acik); font-size: 14px; font-weight: 600; }
.form input, .form textarea {
  width: 100%; padding: 11px 12px; border-radius: 10px; font: 16px/1.4 var(--yazi);
  color: var(--baslik); background: var(--zemin); border: 1px solid var(--cizgi);
}
.form input:focus, .form textarea:focus { outline: 2px solid var(--yesil); outline-offset: 1px; border-color: transparent; }
.form .onay { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; color: var(--metin); }
.form .onay input { width: 20px; height: 20px; flex: none; margin-top: 2px; accent-color: var(--yesil); }
.form .onay a { color: var(--acik); }
.form button { min-height: 48px; font-size: 16px; }
.form button:disabled { opacity: 0.6; }
.durum { margin: 0; min-height: 1.4em; color: var(--yesil); font-weight: 600; }
.bal { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* telefonda altta sabit iletişim çağrısı */
.cta-cubuk { display: none; }
@media (max-width: 720px) {
  .cta-cubuk {
    display: flex; align-items: center; justify-content: center;
    position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 20;
    min-height: 50px; border-radius: 14px; text-decoration: none; font-weight: 700;
    color: #05221a; background: var(--yesil); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  }
  body:has(.cta-cubuk) { padding-bottom: 76px; }
}

/* düz metin sayfası (KVKK) */
.kap.metin h1 { font-size: 26px; margin-bottom: 8px; }
.kap.metin h2 { font-size: 18px; margin: 24px 0 6px; }
.kap.metin p { color: var(--acik); }

/* ekip listesi sayfası */
.kapak { border-radius: var(--yaricap); overflow: hidden; border: 1px solid var(--cizgi); }
.kapak img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.giris { padding: 24px 0 8px; }
.giris h1 { font-size: clamp(32px, 9vw, 48px); }
.giris p { margin: 12px 0 0; color: var(--acik); max-width: 620px; }
.cipler { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.cipler .rozet { margin: 0; }
.grup { margin-top: 32px; }
.grup h2 { font-size: 22px; }
.grup > p { margin: 6px 0 14px; }
@media (min-width: 640px) {
  .grup .liste { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .grup .liste { grid-template-columns: repeat(3, 1fr); }
}

.alt {
  border-top: 1px solid var(--cizgi); padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
  text-align: center; font-size: 13px;
}
.alt a { color: var(--acik); }