@import url("fonts/fonts.css");

:root {
  --kagit: #F3EFE6;
  --murekkep: #1C1A17;
  --gri: #6B655C;
  --cizgi: #CFC8BA;
  --vurgu: #7A2E22;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--kagit); color: var(--murekkep); font-family: 'IBM Plex Sans', sans-serif; font-size: 16px; line-height: 1.6; -webkit-text-size-adjust: 100%; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--vurgu); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 3px; }

.sayfa { max-width: 1120px; margin: 0 auto; padding: 0 56px; }

header { display: flex; justify-content: space-between; align-items: baseline; padding: 28px 0 22px; border-bottom: 1px solid var(--murekkep); font-size: 14px; }
header .ad { font-family: 'Newsreader', serif; font-size: 19px; font-weight: 500; text-decoration: none; }
header nav { display: flex; gap: 28px; color: var(--gri); }
header nav a { text-decoration: none; }
header nav .dil-sec { color: var(--murekkep); font-weight: 500; }

.giris { display: grid; grid-template-columns: 1fr 260px; gap: 64px; padding: 88px 0 80px; border-bottom: 1px solid var(--cizgi); }
.ust { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--gri); margin-bottom: 28px; }
h1 { font-family: 'Newsreader', serif; font-weight: 400; font-size: 86px; line-height: 1; letter-spacing: -.015em; margin-bottom: 36px; }
.cumle { font-family: 'Newsreader', serif; font-size: 28px; line-height: 1.35; max-width: 640px; }
.yer { margin-top: 28px; color: var(--gri); font-size: 14px; }
.foto { align-self: end; }
.foto img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: #D9D3C7; }

section { display: grid; grid-template-columns: 220px 1fr; gap: 64px; padding: 56px 0; border-bottom: 1px solid var(--cizgi); scroll-margin-top: 16px; }
h2 { font-family: 'Newsreader', serif; font-weight: 500; font-size: 22px; }

.satir { display: grid; grid-template-columns: 80px 1fr; gap: 24px; padding: 20px 0; border-top: 1px solid var(--cizgi); }
.satir:first-child { border-top: 0; padding-top: 0; }
.yil { font-size: 14px; color: var(--vurgu); font-weight: 500; padding-top: 4px; }
.satir h3 { font-family: 'Newsreader', serif; font-weight: 500; font-size: 24px; line-height: 1.2; }
.satir p { color: #3D3933; margin-top: 6px; max-width: 560px; }
.satir .bag { font-size: 14px; margin-top: 8px; display: flex; gap: 20px; flex-wrap: wrap; }
.satir .not { font-size: 13px; color: var(--gri); }

.hakkinda p { font-family: 'Newsreader', serif; font-size: 21px; line-height: 1.45; max-width: 660px; }
.hakkinda p + p { margin-top: 18px; }
.hakkinda .yer { font-family: 'IBM Plex Sans', sans-serif; font-size: 14px; margin-top: 24px; }

.iletisim { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.kanal { font-size: 15px; }
.kanal div { padding: 10px 0; border-top: 1px solid var(--cizgi); display: flex; justify-content: space-between; gap: 16px; }
.kanal div:last-child { border-bottom: 1px solid var(--cizgi); }
.kanal a { text-decoration: none; }

form label { display: block; font-size: 13px; color: var(--gri); margin-bottom: 4px; }
form input, form textarea { display: block; width: 100%; border: 0; border-bottom: 1px solid var(--murekkep); background: transparent; font: inherit; color: inherit; padding: 6px 0; margin-bottom: 20px; border-radius: 0; }
form textarea { min-height: 96px; resize: vertical; }
form button { background: var(--murekkep); color: var(--kagit); border: 0; padding: 11px 22px; font: inherit; font-size: 14px; cursor: pointer; }
form button:hover { background: var(--vurgu); }
form small { display: block; color: var(--gri); font-size: 12px; margin-top: 14px; }
.gizli { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

footer { display: flex; justify-content: space-between; padding: 28px 0 40px; font-size: 13px; color: var(--gri); }
footer a { text-decoration: none; }

@media (max-width: 700px) {
  .sayfa { padding: 0 22px; }
  header nav .bolum { display: none; }
  .giris { grid-template-columns: 1fr; gap: 32px; padding: 52px 0 48px; }
  h1 { font-size: 52px; }
  .cumle { font-size: 22px; }
  .foto { width: 160px; align-self: start; }
  section { grid-template-columns: 1fr; gap: 20px; padding: 40px 0; }
  .satir { grid-template-columns: 56px 1fr; gap: 14px; }
  .satir h3 { font-size: 21px; }
  .hakkinda p { font-size: 19px; }
  .iletisim { grid-template-columns: 1fr; gap: 32px; }
  footer { flex-direction: column; gap: 6px; }
}