/* Yaren Özkök Tema · Sayfa · v0.1.0 */

.yz-ana { display: block; }

/* ── SAYFA BAŞLIĞI ── */
.yz-sayfa-bas {
  padding: var(--yz-8) 0 var(--yz-7);
  background: var(--yz-zemin);
  border-bottom: 1px solid var(--yz-kenar);
}
.yz-sayfa-bas .yz-p { margin-top: var(--yz-3); }

@media (max-width: 640px) {
  .yz-sayfa-bas { padding: var(--yz-6) 0 var(--yz-5); }
}

/* ── LİSTE ── */
.yz-liste-kap { padding: var(--yz-8) var(--yz-4); }

.yz-liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: var(--yz-5);
}

.yz-kart {
  border: 1px solid var(--yz-kenar);
  border-radius: var(--yz-r-lg);
  background: var(--yz-beyaz);
  overflow: hidden;
  transition: border-color var(--yz-sure) var(--yz-ease), transform var(--yz-sure) var(--yz-ease);
}
.yz-kart:hover { border-color: var(--yz-yesil); transform: translateY(-3px); }

.yz-kart-link { display: block; color: inherit; text-decoration: none; }

.yz-kart-gorsel { aspect-ratio: 16 / 9; background: var(--yz-zemin); overflow: hidden; }
.yz-kart-gorsel img { width: 100%; height: 100%; object-fit: cover; }

.yz-kart-govde { padding: var(--yz-5); }
.yz-kart-govde .yz-h3 { margin: var(--yz-2) 0 var(--yz-3); }

.yz-kart-ozet {
  margin: 0 0 var(--yz-4);
  color: var(--yz-ink-yumusak);
  font-size: .9375rem;
  line-height: 1.65;
}

.yz-kart-tarih { color: var(--yz-ink-yumusak); font-size: .8125rem; }

/* ── BOŞ DURUM ── */
.yz-bos {
  padding: var(--yz-9) var(--yz-4);
  text-align: center;
}
.yz-bos .yz-p { margin: var(--yz-3) auto var(--yz-5); }

/* ── SAYFALAMA ── */
.pagination {
  display: flex;
  justify-content: center;
  margin-top: var(--yz-7);
}
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: var(--yz-2); }
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--yz-3);
  border: 1px solid var(--yz-kenar);
  border-radius: var(--yz-r-sm);
  color: var(--yz-ink-orta);
  font-size: .9375rem;
  text-decoration: none;
  transition: background var(--yz-sure-kisa) var(--yz-ease), border-color var(--yz-sure-kisa) var(--yz-ease);
}
.pagination .page-numbers:hover { background: var(--yz-zemin); border-color: var(--yz-yesil); }
.pagination .page-numbers.current { background: var(--yz-yesil); border-color: var(--yz-yesil); color: #fff; font-weight: 600; }

/* ── SAYFA BAŞLIĞI BANDI ── */
.ysb {
  display: flex;
  align-items: flex-end;
  min-height: 300px;
  margin: 24px 24px 0;
  padding: 0 32px 32px;
  border-radius: 12px;
  background: #F1F7F4;
}
.ysb-ic { width: 100%; max-width: 1313px; margin: 0 auto; }

.ysb-baslik {
  margin: 0;
  color: #1B2E28;
  font-family: var(--yz-font);
  font-size: clamp(30px, 2.9vw, 40px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.033em;
}

.ysb-rozet {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  padding: 6px 14px;
  border-radius: 999px;
  background: #E6F1EC;
  color: #1E4D40;
  font-family: var(--yz-font);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}
.ysb-rozet::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2F6F5E;
}

.ysb-yol { margin-top: 16px; }
.ysb-yol ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: #2F6F5E;
  font-family: var(--yz-font);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
}
.ysb-yol li { display: inline-flex; align-items: center; gap: 10px; }
.ysb-yol li + li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: .6;
}
.ysb-yol a { color: #2F6F5E; text-decoration: none; }
.ysb-yol a:hover { color: #1E4D40; text-decoration: underline; text-underline-offset: 3px; }
.ysb-yol [aria-current] { color: #1B2E28; }

@media (max-width: 900px) {
  .ysb { min-height: 200px; margin: 16px 16px 0; padding: 0 20px 24px; }
}

/* ── UZMANIMIZ ── */
.yuz {
  margin: 0 24px;
  padding: 100px 32px;
}
.yuz-ic { max-width: 1313px; margin: 0 auto; }

.yuz-bas { text-align: center; }
.yuz-ust {
  display: block;
  margin-bottom: 24px;
  color: #355E54;
  font-family: var(--yz-serif);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.yuz-h1 {
  margin: 0;
  color: #1B2E28;
  font-family: var(--yz-font);
  font-size: clamp(28px, 2.9vw, 40px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.033em;
  text-wrap: balance;
}

.yuz-satir {
  display: grid;
  grid-template-columns: minmax(0, 637fr) minmax(0, 652fr);
  gap: 24px;
  margin-top: 64px;
}

.yuz-profil {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  gap: 24px;
  padding: 16px;
  border-radius: 12px;
  background: #E6F1EC;
}

.yuz-gorsel {
  width: 100%;
  aspect-ratio: 605 / 350;
  border-radius: 12px;
  overflow: hidden;
}
.yuz-gorsel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 25%;
}

.yuz-kimlik {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.yuz-ad {
  margin: 0;
  color: #1B2E28;
  font-family: var(--yz-font);
  font-size: clamp(20px, 1.8vw, 24px);
  font-weight: 500;
  line-height: 1.2;
}
.yuz-unvan {
  margin: 0;
  color: #355E54;
  font-family: var(--yz-serif);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.7;
}
.yuz-sosyal {
  display: flex;
  gap: 14px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
.yuz-sosyal a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: #2F6F5E;
  color: #fff;
  transition: background .18s;
}
.yuz-sosyal a:hover { background: #1E4D40; }
.yuz-sosyal a:focus-visible { outline: 2px solid #1E4D40; outline-offset: 2px; }

.yuz-bio {
  padding: 30px;
  border: 1px solid #DDE7E3;
  border-radius: 12px;
  background: #F1F7F4;
}
.yuz-bio p {
  margin: 0 0 14px;
  color: #333;
  font-family: var(--yz-font);
  font-size: 16px;
  line-height: 1.5;
  text-wrap: pretty;
}
.yuz-bio p:last-child { margin-bottom: 0; }

@media (max-width: 1000px) {
  .yuz-satir { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .yuz { margin: 0 16px; padding: 56px 20px; }
  .yuz-satir { margin-top: 40px; }
}

@media (max-width: 560px) {
  .yuz { padding: 44px 4px; }
  .yuz-bio { padding: 22px 20px; }
}

/* ── KENAR KUTULARI ── */
.ykn-kutu {
  padding: 28px 24px;
  border: 1px solid #DDE7E3;
  border-radius: 12px;
  background: #F1F7F4;
}

.ykn-baslik {
  margin: 0 0 16px;
  color: #242424;
  font-family: var(--yz-font);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ykn-baslik--kucuk { color: #2F6F5E; font-size: 13px; }

.ykn-linkler ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ykn-linkler a {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 7px 0;
  color: #2F6F5E;
  font-family: var(--yz-font);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  text-decoration: none;
  transition: color .18s;
}
.ykn-linkler a svg { flex-shrink: 0; margin-top: 1px; transition: transform .18s; }
.ykn-linkler a:hover { color: #1E4D40; }
.ykn-linkler a:hover svg { transform: translateX(3px); }

.ykn-iletisim { border-color: #E6F1EC; background: #E6F1EC; }
.ykn-iletisim-baslik {
  margin: 0 0 12px;
  color: #1B2E28;
  font-family: var(--yz-font);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
}
.ykn-iletisim-metin {
  margin: 0 0 20px;
  color: #333;
  font-family: var(--yz-font);
  font-size: 15px;
  line-height: 1.55;
}
.ykn-iletisim ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ykn-iletisim a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 28px;
  color: #1E4D40;
  font-family: var(--yz-font);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.ykn-iletisim a svg { flex-shrink: 0; color: #2F6F5E; }
.ykn-iletisim a:hover span { text-decoration: underline; text-underline-offset: 3px; }

.ykn-sosyal ul { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ykn-sosyal a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1.5px solid #DDE7E3;
  border-radius: 50%;
  background: #fff;
  color: #2F6F5E;
  transition: background .18s, color .18s, border-color .18s;
}
.ykn-sosyal a:hover { background: #2F6F5E; border-color: #2F6F5E; color: #fff; }

.ykn-linkler a:focus-visible,
.ykn-iletisim a:focus-visible,
.ykn-sosyal a:focus-visible { outline: 2px solid #1E4D40; outline-offset: 2px; border-radius: 6px; }
.ykn-sosyal a:focus-visible { border-radius: 50%; }

@media (prefers-reduced-motion: reduce) {
  .ykn-linkler a, .ykn-linkler a svg, .ykn-sosyal a { transition: none; }
}

/* ── 404 ── */
.y404 {
  margin: 24px 24px 0;
  padding: 96px 32px 104px;
  border-radius: 12px;
  background: #F1F7F4;
}
.y404-ic { max-width: 620px; margin: 0 auto; text-align: center; }
.y404-ikon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #E1EDE7;
  color: #1E4D40;
}
.y404-kod {
  margin: 24px 0 0;
  color: #355E54;
  font-family: var(--yz-serif);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.y404-baslik {
  margin: 12px 0 0;
  color: #1B2E28;
  font-family: var(--yz-font);
  font-size: clamp(30px, 3.2vw, 44px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.03em;
}
.y404-metin {
  max-width: 52ch;
  margin: 18px auto 0;
  color: #3A4F47;
  font-family: var(--yz-font);
  font-size: 16px;
  line-height: 1.65;
}
.y404-ara {
  display: flex;
  gap: 8px;
  max-width: 480px;
  margin: 32px auto 0;
}
.y404-ara input[type="search"] {
  flex: 1;
  min-width: 0;
  height: 50px;
  padding: 0 16px;
  border: 1.5px solid #DDE7E3;
  border-radius: 8px;
  background: #fff;
  color: #1E4D40;
  font-family: var(--yz-font);
  font-size: 16px;
}
.y404-ara input[type="search"]::placeholder { color: #6A837A; }
.y404-ara input[type="search"]:focus { border-color: #2F6F5E; outline: 2px solid rgba(47, 111, 94, .25); outline-offset: 1px; }
.y404-ara button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 50px;
  padding: 0 20px;
  border: 0;
  border-radius: 8px;
  background: #1E4D40;
  color: #fff;
  font-family: var(--yz-font);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.y404-ara button:hover { background: #163A30; }
.y404-ara button:focus-visible { outline: 2px solid #1E4D40; outline-offset: 2px; }

.y404-butonlar { margin-top: 20px; }
.y404-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 12px 28px;
  border-radius: 8px;
  background: #2F6F5E;
  color: #fff;
  font-family: var(--yz-font);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: background .18s;
}
.y404-btn:hover { background: #1E4D40; color: #fff; }
.y404-btn:focus-visible { outline: 2px solid #1E4D40; outline-offset: 3px; }

.y404-linkler ul {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}
.y404-linkler a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 10px;
  border: 1px solid #DDE7E3;
  border-radius: 12px;
  background: #fff;
  color: #1E4D40;
  font-family: var(--yz-font);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .18s, transform .18s;
}
.y404-linkler a svg { color: #2F6F5E; }
.y404-linkler a:hover { border-color: #2F6F5E; transform: translateY(-2px); }
.y404-linkler a:focus-visible { outline: 2px solid #1E4D40; outline-offset: 2px; }

.y404-iletisim {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;
  margin: 32px 0 0;
}
.y404-iletisim a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #2F6F5E;
  font-family: var(--yz-font);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.y404-iletisim a:hover { color: #1E4D40; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 900px) {
  .y404 { margin: 16px 16px 0; padding: 64px 20px 72px; }
}
@media (max-width: 560px) {
  .y404 { padding: 48px 16px 56px; }
  .y404-linkler ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .y404-ara button span { display: none; }
  .y404-ara button { padding: 0 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .y404-btn, .y404-linkler a { transition: none; }
  .y404-linkler a:hover { transform: none; }
}