/* Kurumsal ana site: "Yaşam Vitrini". Fotoğraf öncelikli, ferah ve modern.
   Ana sayfa yaşamı satar, teknik belgeler ayrı sayfada. Renk: taze zemin, derin orman yeşili, gün ışığı sarısı. */

:root {
  --zemin: oklch(0.985 0.004 150);
  --zemin-2: oklch(0.955 0.014 145);
  --murekkep: oklch(0.25 0.04 155);
  --soluk: oklch(0.42 0.035 155);
  --kenar: oklch(0.85 0.02 150);
  --yesil: oklch(0.36 0.075 152);
  --yesil-koyu: oklch(0.27 0.06 152);
  --isik: oklch(0.83 0.15 82);
  --isik-koyu: oklch(0.77 0.15 80);

  --font-baslik: 'Brygada 1918', Georgia, 'Times New Roman', serif;
  --font-metin: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-etiket: 'Barlow Semi Condensed', 'Barlow', system-ui, sans-serif;

  --gutter: clamp(1.25rem, 5vw, 3.5rem);
  --olcu: 90rem;
  --kenar-x: max(var(--gutter), calc((100% - var(--olcu)) / 2));
  --bolum: clamp(4.5rem, 10vw, 9rem);
  --cikis: cubic-bezier(0.16, 1, 0.3, 1);

  --z-icerik: 1;
  --z-ust: 30;
  --z-mobil-cta: 40;
  --z-menu: 50;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 1.5rem; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--zemin); color: var(--murekkep);
  font: 400 1.0625rem/1.65 var(--font-metin);
  padding-bottom: 4.75rem; overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, dl, dd, figure { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--murekkep); box-shadow: 0 0 0 5px var(--isik); outline-offset: 2px; }

.atla { position: absolute; left: 1rem; top: -4rem; z-index: var(--z-menu); background: var(--zemin); color: var(--murekkep); padding: .75rem 1rem; }
.atla:focus { top: 1rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Üst çubuk ---------- */
.ust { z-index: var(--z-ust); display: flex; align-items: center; justify-content: space-between; padding: 1.1rem var(--kenar-x); color: #fff; }
.ust--foto { position: absolute; inset: 0 0 auto 0; }
.ust--dolu { position: sticky; top: 0; background: var(--yesil-koyu); }
.marka { font: 600 1.6rem/1 var(--font-baslik); letter-spacing: .01em; text-decoration: none; display: inline-flex; align-items: center; gap: .4em; }
.marka__ikon { width: 2.05em; height: auto; flex-shrink: 0; }
.marka__on { font: italic 600 1.05em var(--font-baslik); color: var(--isik); }
.marka__arka { font: 700 .92em var(--font-etiket); letter-spacing: .04em; }
.ust--foto .marka__arka { color: #fff; }
.ust--dolu .marka__arka { color: var(--zemin); }
.alt__marka .marka__on { color: var(--isik); }
.alt__marka .marka__arka { color: inherit; }
.menu-masaustu { display: none; gap: 2.25rem; }
.menu-masaustu a, .menu-mobil nav a { font: 500 1.0625rem/1 var(--font-etiket); letter-spacing: .03em; text-decoration: none; padding: .5rem 0; border-bottom: 1.5px solid transparent; transition: border-color .2s; }
.menu-masaustu a:hover { border-color: var(--isik); }
.menu-mobil { position: relative; }
.menu-mobil summary { list-style: none; cursor: pointer; width: 3rem; height: 3rem; display: grid; place-content: center; gap: 7px; }
.menu-mobil summary::-webkit-details-marker { display: none; }
.menu-mobil summary span { display: block; width: 26px; height: 2px; background: currentColor; }
.menu-mobil nav { position: absolute; right: 0; top: calc(100% + .5rem); z-index: var(--z-menu); min-width: 14rem; padding: .5rem 1.5rem 1rem; background: var(--yesil-koyu); display: grid; }
.menu-mobil nav a { padding: .9rem 0; font-size: 1.15rem; }

/* ---------- Düğmeler ve bağlantılar ---------- */
.dugme { display: inline-flex; align-items: center; justify-content: center; min-height: 3.1rem; padding: .8rem 1.7rem; font: 600 1.0625rem/1 var(--font-metin); text-decoration: none; border: 1.5px solid transparent; border-radius: 2px; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.dugme--isik { background: var(--isik); color: oklch(0.2 0.04 155); }
.dugme--isik:hover { background: var(--isik-koyu); }
.dugme--cerceve { border-color: color-mix(in oklch, #fff 75%, transparent); color: #fff; }
.dugme--cerceve:hover { background: #fff; color: var(--murekkep); }
.dugme--cerceve-koyu { border-color: var(--murekkep); color: var(--murekkep); }
.dugme--cerceve-koyu:hover { background: var(--murekkep); color: var(--zemin); }
.dugme--yesil { background: var(--yesil); color: #fff; }
.dugme--yesil:hover { background: var(--yesil-koyu); }
.eylem { display: flex; flex-wrap: wrap; gap: .75rem; }
.baglanti { display: inline-flex; gap: .5rem; align-items: center; width: fit-content; margin-top: 1rem; font: 600 1.0625rem/1.2 var(--font-metin); text-decoration: none; border-bottom: 1.5px solid currentColor; padding-bottom: .15rem; }
.baglanti--acik { color: var(--isik); }

/* ---------- Başlıklar ---------- */
.yasam h2, .mevsimler h2, .secenekler h2, .guven h2, .iletisim h2, .projeler__baslik {
  font: 500 clamp(2.15rem, 1.1rem + 4.2vw, 4.6rem)/1.06 var(--font-baslik);
  letter-spacing: -.01em; text-wrap: balance;
}
.proje h3 { font: 500 clamp(1.7rem, 1rem + 2.6vw, 3rem)/1.08 var(--font-baslik); letter-spacing: -.01em; text-wrap: balance; }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; isolation: isolate; overflow: hidden; background: var(--yesil-koyu); }
.hero__slaytlar { position: absolute; inset: 0; z-index: -2; }
.hero__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; opacity: 0; transform: scale(1.07); transition: opacity 1.6s ease, transform 12s linear; }
.hero__foto.aktif { opacity: 1; transform: scale(1); }
.hero__perde { position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(to top, oklch(0.16 0.04 155 / .85), oklch(0.16 0.04 155 / .4) 45%, transparent 72%),
  linear-gradient(to bottom, oklch(0.16 0.04 155 / .55), transparent 24%); }
.hero__icerik { padding: 7rem var(--kenar-x) clamp(3rem, 7vw, 5.5rem); }
.hero h1 { font: 500 clamp(2.5rem, 1.1rem + 6.4vw, 6rem)/1.02 var(--font-baslik); letter-spacing: -.015em; text-wrap: balance; max-width: 12em; margin-bottom: 1.3rem; }
.hero__alt { max-width: 34rem; font-size: clamp(1.0625rem, 1rem + .5vw, 1.3rem); color: oklch(0.97 0.01 150); margin-bottom: 2rem; text-wrap: pretty; }
.hero__araclar { position: absolute; right: var(--kenar-x); bottom: 1.25rem; display: flex; gap: .5rem; align-items: center; }
.ornek { font: 500 .8125rem/1 var(--font-etiket); letter-spacing: .06em; background: oklch(0.16 0.04 155 / .6); color: #fff; padding: .4rem .6rem; }

/* ---------- Yaşam ---------- */
.yasam { padding: var(--bolum) var(--kenar-x); display: grid; gap: 2.75rem; }
.yasam h2 span { display: block; color: var(--yesil); font-style: italic; font-weight: 400; margin-top: .35rem; }
.yasam__metin p { max-width: 30rem; margin-top: 1.5rem; color: var(--soluk); text-wrap: pretty; }
.mozaik { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
.mozaik img { width: 100%; object-fit: cover; border-radius: 2px; }
.mozaik__a { grid-row: span 2; }
.mozaik__a img { aspect-ratio: 2 / 3; }
.mozaik__b img { aspect-ratio: 4 / 3; }
.mozaik__c img { aspect-ratio: 1 / 1; }
.mozaik figcaption { font: 500 .9375rem/1.35 var(--font-etiket); color: var(--soluk); margin-top: .55rem; }

/* ---------- Mevsimler ---------- */
.mevsimler { padding: var(--bolum) var(--kenar-x); background: var(--zemin-2); }
.mevsimler__liste { display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 19rem); gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1rem; margin-top: 2.25rem; }
.mevsim { position: relative; scroll-snap-align: start; overflow: hidden; }
.mevsim img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; transition: transform .9s var(--cikis); }
.mevsim__yazi { padding-top: .85rem; }
.mevsim h3 { font: 500 1.4rem/1.15 var(--font-baslik); color: var(--murekkep); }
.mevsim p { margin-top: .3rem; font-size: .9375rem; line-height: 1.4; color: var(--soluk); }
.mevsim:hover img { transform: scale(1.04); }

/* ---------- Seçenekler ---------- */
.secenekler { padding: var(--bolum) var(--kenar-x); display: grid; gap: 3.25rem; }
.secenek { display: grid; gap: 1.4rem; }
.secenek__foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 2px; }
.secenek h3 { font: 500 clamp(2rem, 1.2rem + 3vw, 3.4rem)/1.05 var(--font-baslik); letter-spacing: -.01em; }
.secenek p { max-width: 30rem; color: var(--soluk); margin-top: .7rem; text-wrap: pretty; }

/* ---------- Projeler ---------- */
.projeler { padding: 0 var(--kenar-x) var(--bolum); }
.projeler__baslik { margin-bottom: 1.75rem; }
.projeler__liste { display: grid; gap: 1.5rem; }
.proje { position: relative; min-height: min(58svh, 34rem); display: flex; align-items: flex-end; color: #fff; overflow: hidden; border-radius: 2px; isolation: isolate; }
.proje img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 68% 50%; }
.proje__perde { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, oklch(0.16 0.04 155 / .85), oklch(0.16 0.04 155 / .2) 60%, transparent); }
.proje__yazi { padding: clamp(1.5rem, 4vw, 3.25rem); max-width: 36rem; display: grid; gap: 1rem; justify-items: start; }
.rozet { font: 600 .8125rem/1 var(--font-etiket); letter-spacing: .1em; text-transform: uppercase; background: var(--isik); color: oklch(0.2 0.04 155); padding: .4rem .6rem; }
.rozet--koyu { background: transparent; border: 1.5px solid var(--murekkep); color: var(--murekkep); }

/* ---------- Güven bandı ---------- */
.guven { background: var(--yesil-koyu); color: #fff; padding: clamp(3.5rem, 8vw, 6rem) var(--kenar-x); display: grid; gap: 1.1rem; justify-items: start; }
.guven h2 { font-size: clamp(1.9rem, 1.1rem + 3vw, 3.3rem); max-width: 18em; }
.guven p { max-width: 34rem; color: oklch(0.9 0.02 150); }
.guven .baglanti { margin-top: .5rem; }

/* ---------- İletişim ---------- */
.iletisim { padding: var(--bolum) var(--kenar-x); display: grid; gap: 2.5rem; }
.iletisim h2 { font-size: clamp(1.9rem, 1rem + 3vw, 3.4rem); }
.iletisim__metin p { max-width: 30rem; margin: 1.25rem 0 1.75rem; color: var(--soluk); text-wrap: pretty; }
.form { display: grid; gap: .45rem; }
.form label { font: 600 .9375rem/1.3 var(--font-etiket); letter-spacing: .03em; margin-top: .65rem; }
.form label:first-child { margin-top: 0; }
.istege-bagli { font-weight: 500; color: var(--soluk); }
.form input:not([type="checkbox"]), .form select, .form textarea { font: 400 1rem/1.4 var(--font-metin); color: var(--murekkep); width: 100%; padding: .85rem .9rem; background: #fff; border: 1.5px solid color-mix(in oklch, var(--murekkep) 40%, transparent); border-radius: 2px; }
.form [aria-invalid="true"] { border-color: oklch(0.5 0.2 28); }
.onay { display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: start; margin-top: .9rem; }
.onay input { width: 1.25rem; height: 1.25rem; margin-top: .2rem; accent-color: var(--yesil); }
.onay label { margin: 0; font: 400 .9375rem/1.45 var(--font-metin); letter-spacing: 0; }
.form .dugme { justify-self: start; margin-top: 1rem; }
.durum { min-height: 1.5em; font-size: .9375rem; color: var(--soluk); }

/* ---------- Belgeler sayfası ---------- */
.belge-sayfa { padding: 4rem var(--kenar-x) var(--bolum); }
.belge { max-width: 44rem; display: grid; gap: 1.5rem; justify-items: start; }
.belge h1 { font: 500 clamp(2.3rem, 1.2rem + 4.4vw, 4.4rem)/1.05 var(--font-baslik); text-wrap: balance; }
.belge__giris { color: var(--soluk); max-width: 36rem; text-wrap: pretty; }
.belge__kapak { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 2px; }
.aydinlatma-metin { display: grid; gap: 1rem; max-width: 40rem; }
.aydinlatma-metin p { text-wrap: pretty; }
.kunye { width: 100%; border: 1.5px solid var(--murekkep); background: #fff; }
.kunye header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1.5px solid var(--murekkep); background: var(--zemin-2); }
.kunye h2 { font: 600 1.35rem/1.1 var(--font-etiket); letter-spacing: .02em; }
.kunye__satir { display: grid; grid-template-columns: minmax(7.5rem, .8fr) 1.4fr; gap: 1rem; padding: .85rem 1.25rem; border-bottom: 1px dashed var(--kenar); align-items: baseline; }
.kunye__govde { display: grid; gap: 0; }
.kunye__harita { width: 100%; max-height: 22rem; object-fit: cover; object-position: top; display: block; }
@media (min-width: 56rem) {
  .kunye__govde { grid-template-columns: 14rem 1fr; align-items: stretch; }
  .kunye__harita { max-height: none; height: 100%; }
}
.kunye dt { font: 600 .8125rem/1.3 var(--font-etiket); letter-spacing: .1em; text-transform: uppercase; color: var(--soluk); }
.kunye dd { font: 500 1.0625rem/1.4 var(--font-metin); color: var(--murekkep); }
.bos-cizgi { display: inline-block; width: 2.5rem; border-bottom: 1.5px dashed var(--soluk); vertical-align: middle; }
.kunye footer { padding: .9rem 1.25rem; font-size: .9375rem; color: var(--soluk); }

/* ---------- Alt bilgi ve mobil eylem çubuğu ---------- */
.alt { background: var(--yesil-koyu); color: #fff; padding: 3rem var(--kenar-x) 6.5rem; display: grid; gap: .5rem; }
.alt__marka { font: 600 1.7rem/1 var(--font-baslik); margin-bottom: .5rem; }
.alt__not { font-size: .9375rem; color: oklch(0.88 0.02 150); }
.mobil-cta { position: fixed; inset: auto 0 0 0; z-index: var(--z-mobil-cta); display: grid; grid-template-columns: 1.4fr 1fr; gap: .6rem; padding: .65rem var(--gutter) calc(.65rem + env(safe-area-inset-bottom, 0px)); background: var(--yesil-koyu); }

/* ---------- Hareket: site yaşıyormuş hissi ---------- */
.slayt-dur { width: 2.75rem; height: 2.75rem; display: grid; place-content: center; border: 0; background: oklch(0.16 0.04 155 / .6); color: #fff; cursor: pointer; }
.slayt-dur span { width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.slayt-dur[data-durdu] span { width: 0; height: 0; border: 6px solid transparent; border-left: 10px solid currentColor; border-right: 0; }
.kadraj { overflow: hidden; border-radius: 2px; }
.kadraj img { transition: transform 1.1s var(--cikis); }
.kadraj:hover img { transform: scale(1.06); }
.proje img { transition: transform 1.4s var(--cikis); }
.proje:hover img { transform: scale(1.03); }
.baglanti span { transition: transform .3s var(--cikis); }
.baglanti:hover span { transform: translateX(5px); }
.serit { overflow: hidden; padding-bottom: var(--bolum); }
.serit__ray { display: flex; gap: 1rem; width: max-content; animation: kay 75s linear infinite; }
.serit:hover .serit__ray { animation-play-state: paused; }
.serit__oge { flex: none; height: clamp(15rem, 30vw, 24rem); }
.serit__oge .kadraj { height: 100%; }
.serit__oge img { height: 100%; width: auto; max-width: none; object-fit: cover; }
@keyframes kay { to { transform: translateX(calc(-50% - .5rem)); } }
.ani { transition: opacity .9s var(--cikis), transform .9s var(--cikis); }
.ani.gizli { opacity: 0; transform: translateY(26px); }

/* ---------- Telefon ---------- */
@media (max-width: 899px) {
  .hero .eylem { display: none; }
  .hero__foto { object-position: 42% 38%; }
  .hero__icerik { padding-bottom: 6.5rem; }
  .hero__araclar { bottom: 5.75rem; }
}

/* ---------- Geniş ekran ---------- */
@media (min-width: 900px) {
  body { padding-bottom: 0; }
  .mobil-cta, .menu-mobil { display: none; }
  .menu-masaustu { display: flex; }
  .alt { padding-bottom: 3rem; }

  .yasam { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(3rem, 7vw, 7rem); align-items: start; }
  .yasam__metin { position: sticky; top: 3rem; }

  .mevsimler__liste { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); grid-auto-columns: auto; overflow: visible; }

  .secenek { grid-template-columns: 1.2fr .8fr; align-items: center; gap: clamp(2.5rem, 7vw, 6rem); }
  .secenek:nth-of-type(even) .secenek__foto { order: 2; }

  .iletisim { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(3rem, 7vw, 7rem); align-items: start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .serit { overflow-x: auto; }
  .slayt-dur { display: none; }
}