:root {
  --krem: #f6f1e7;
  --krem-koyu: #ece4d4;
  --cizgi: #ddd3c0;
  --murekkep: #0d0c0b;
  --gri: #5b544b;
  --kirmizi: #e5483d;
  --kirmizi-koyu: #c8392f;
  --kirmizi-acik: #ff7a6e;
  --serif: 'Instrument Serif', 'Times New Roman', serif;
  --sans: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', monospace;
  --yaricap: 22px;
  --kenar: clamp(20px, 5vw, 56px);
  --en: 1120px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--krem);
  color: var(--murekkep);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--kirmizi); outline-offset: 3px; border-radius: 6px; }

.atla {
  position: absolute; left: 12px; top: -60px; z-index: 10;
  background: var(--murekkep); color: var(--krem); padding: 10px 14px; border-radius: 10px; text-decoration: none;
}
.atla:focus { top: 12px; }

/* Üst şerit */
.ust {
  max-width: var(--en); margin: 0 auto; padding: 22px var(--kenar);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.isim { font-family: var(--serif); font-size: 26px; line-height: 1; text-decoration: none; letter-spacing: -0.01em; }
.isim em { font-style: italic; color: var(--kirmizi); }
.isim.kucuk { font-size: 22px; }
.ust-link {
  font-family: var(--mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; padding: 9px 16px; border: 1.5px solid var(--murekkep); border-radius: 99px;
  transition: background .2s ease, color .2s ease;
}
.ust-link:hover { background: var(--murekkep); color: var(--krem); }

/* Giriş */
.giris { max-width: var(--en); margin: 0 auto; padding: clamp(36px, 9vw, 110px) var(--kenar) clamp(48px, 9vw, 120px); }
.etiket {
  display: inline-block; margin: 0 0 26px; font-family: var(--mono); font-size: 12.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--kirmizi); border: 1.5px solid var(--kirmizi); border-radius: 99px; padding: 9px 16px;
}
h1 {
  font-family: var(--serif); font-weight: 400; margin: 0;
  font-size: clamp(54px, 13.5vw, 148px); line-height: .94; letter-spacing: -0.025em; max-width: 11ch;
}
h1 em { font-style: italic; color: var(--kirmizi); }
.kim { margin: 30px 0 0; max-width: 34em; font-size: clamp(18px, 2.2vw, 21px); line-height: 1.5; color: var(--gri); }
.eylemler { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

.dugme {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 14px 24px;
  border-radius: 99px; font-weight: 600; font-size: 16px; text-decoration: none; letter-spacing: .005em;
  transition: transform .18s cubic-bezier(.2,.7,.2,1), background .2s ease, color .2s ease, box-shadow .2s ease;
}
.dugme:active { transform: translateY(1px) scale(.99); }
.birincil { background: var(--kirmizi); color: #fff; box-shadow: 0 10px 24px -14px rgba(200, 57, 47, .9); }
.birincil:hover { background: var(--kirmizi-koyu); }
.ikincil { color: var(--murekkep); box-shadow: inset 0 0 0 1.5px var(--murekkep); }
.ikincil:hover { background: var(--murekkep); color: var(--krem); }

/* Araçlar */
.araclar { max-width: var(--en); margin: 0 auto; padding: 0 var(--kenar) clamp(64px, 10vw, 120px); scroll-margin-top: 16px; }
.bolum-bas { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 26px; }
h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 7vw, 72px); line-height: 1; letter-spacing: -0.02em; margin: 0; }
.bolum-bas p { margin: 0; color: var(--gri); font-size: 16px; }
.arac-listesi { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }

.arac {
  position: relative; overflow: hidden; border-radius: var(--yaricap);
  background: var(--murekkep); color: var(--krem);
  display: grid; grid-template-columns: 1fr; min-height: 520px;
  isolation: isolate;
}
.arac::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(70% 60% at 78% 75%, rgba(229, 72, 61, .30), rgba(229, 72, 61, 0) 70%);
}
.arac-metin { padding: clamp(26px, 5vw, 52px); display: flex; flex-direction: column; align-items: flex-start; gap: 14px; position: relative; z-index: 2; }
.no { font-family: var(--mono); font-size: 13px; letter-spacing: .14em; color: var(--kirmizi-acik); }
.arac h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 5.4vw, 58px); line-height: 1; letter-spacing: -0.015em; margin: 0; max-width: 10ch; }
.arac h3 a { text-decoration: none; }
.arac h3 a::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: var(--yaricap); }
.arac h3 a:focus-visible { outline: none; }
.arac:has(h3 a:focus-visible) { outline: 2px solid var(--kirmizi-acik); outline-offset: 3px; }
.arac p { margin: 0; max-width: 26em; color: #d9d3c8; font-size: 16.5px; }
.arac-ac {
  margin-top: 8px; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 16px;
  background: var(--krem); color: var(--murekkep); padding: 13px 20px; border-radius: 99px;
  transition: background .2s ease, color .2s ease;
}
.arac-ac svg { width: 18px; height: 18px; transition: transform .25s cubic-bezier(.2,.7,.2,1); }
.arac:hover .arac-ac { background: var(--kirmizi); color: #fff; }
.arac:hover .arac-ac svg { transform: translateX(3px); }

.arac-gorsel { position: relative; height: 330px; margin-top: -10px; }
.g { position: absolute; width: 46%; max-width: 230px; bottom: -70px; border-radius: 14px; overflow: hidden;
  box-shadow: 0 28px 60px -20px rgba(0, 0, 0, .7), 0 0 0 1px rgba(246, 241, 231, .08);
  transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.g img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; }
.g1 { left: 6%; transform: rotate(-9deg) translateY(18px); }
.g2 { left: 50%; transform: translateX(-50%) rotate(3deg) translateY(-6px); z-index: 1; }
.g3 { right: 6%; transform: rotate(10deg) translateY(22px); z-index: 2; }
.arac:hover .g1 { transform: rotate(-12deg) translate(-10px, 8px); }
.arac:hover .g2 { transform: translateX(-50%) rotate(2deg) translateY(-18px); }
.arac:hover .g3 { transform: rotate(13deg) translate(10px, 10px); }

.siradaki { margin: 20px 0 0; padding: 18px 20px; border: 1.5px dashed var(--cizgi); border-radius: 16px; color: var(--gri); font-size: 16px; }
.siradaki a { color: var(--murekkep); font-weight: 600; text-underline-offset: 3px; }
.siradaki a:hover { color: var(--kirmizi); }

/* Grup */
.grup {
  max-width: var(--en); margin: 0 auto clamp(56px, 9vw, 110px); padding: clamp(30px, 6vw, 64px) var(--kenar);
  display: grid; gap: 16px; justify-items: start; position: relative;
}
.grup::before, .alt::before {
  content: ""; position: absolute; top: 0; left: var(--kenar); right: var(--kenar); height: 1.5px; background: var(--murekkep);
}
.alt::before { height: 1px; background: var(--cizgi); }
.grup p { margin: 0 0 8px; max-width: 30em; font-size: clamp(18px, 2.2vw, 21px); color: var(--gri); }

/* Alt */
.alt {
  max-width: var(--en); margin: 0 auto; padding: 26px var(--kenar) calc(30px + env(safe-area-inset-bottom));
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; position: relative;
}
.alt nav { display: flex; gap: 22px; }
.alt nav a { font-family: var(--mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.alt nav a:hover { color: var(--kirmizi); }
.telif { margin-left: auto; font-family: var(--mono); font-size: 12.5px; color: var(--gri); }

/* Geniş ekran */
@media (min-width: 820px) {
  .arac { grid-template-columns: 1.05fr 1fr; min-height: 460px; }
  .arac-metin { justify-content: center; }
  .arac-gorsel { height: auto; margin: 0; }
  .g { width: 38%; max-width: 240px; bottom: -60px; }
  .g1 { left: 6%; }
  .g3 { right: 9%; }
}
@media (min-width: 1100px) {
  .arac { min-height: 500px; }
}

/* Girişte görseller yumuşakça yerine oturur */
@media (prefers-reduced-motion: no-preference) {
  .g { animation: otur .9s cubic-bezier(.2,.7,.2,1) both; }
  .g2 { animation-delay: .08s; }
  .g3 { animation-delay: .16s; }
  @keyframes otur { from { opacity: 0; translate: 0 40px; } to { opacity: 1; translate: 0 0; } }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .g, .dugme, .arac-ac, .arac-ac svg { transition: none; }
}

/* Dar telefonlarda etiket tek satırda kalsın */
@media (max-width: 380px) {
  .etiket { font-size: 11.5px; letter-spacing: .1em; padding: 8px 14px; white-space: nowrap; }
}