/* Evirgen Mimarlık, demo mimarlık stüdyosu sitesi.
   Tasarım okuması: stüdyo sitesi, proje sahipleri için, sade ve çizgi odaklı dil. Dial: çeşitlilik 8, hareket 5, yoğunluk 3.
   Palet: nötr açık zemin, grafit metin, logodan gelen tek bronz vurgu. Köşeler keskin (yarıçap 0). */
:root {
  --zemin: #f3f3f1;
  --zemin2: #e9eae7;
  --yazi: #17191b;
  --soluk: #565c61;
  --cizgi: #cfd1ce;
  --vurgu: #8c6636;
  --vurgu-koyu: #6f4f27;
  --koyu: #1b1d1f;
  --beyaz: #fbfbfa;
  --font: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--zemin); color: var(--yazi); font-family: var(--font); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
[hidden] { display: none !important; }
h1, h2, h3 { margin: 0 0 .5em; font-weight: 600; letter-spacing: -.02em; line-height: 1.08; }
h1 { font-size: clamp(2.6rem, 6vw, 5rem); padding-bottom: .04em; }
h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); }
h3 { font-size: 1.25rem; letter-spacing: -.01em; }
p { margin: 0 0 1em; max-width: 65ch; }
.kap { width: min(1280px, 100% - 40px); margin-inline: auto; }
:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 3px; }

.demo-serit { background: var(--koyu); color: #d9dad7; font-size: .86rem; text-align: center; padding: 8px 12px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.demo-serit a { color: #d4b184; font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; }

/* Üst menü: tek satır, 72px */
.ust { position: sticky; top: 0; z-index: 30; background: rgba(243,243,241,.94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--cizgi); }
.ust-ic { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 16px; }
.marka { display: flex; align-items: center; gap: 12px; text-decoration: none; line-height: 1; }
.marka img { height: 48px; width: auto; mix-blend-mode: multiply; }
.marka span { display: flex; flex-direction: column; gap: 5px; }
.alt-logo { width: 190px; height: auto; mix-blend-mode: multiply; margin-bottom: 26px; }
.marka b { font-size: 1.45rem; font-weight: 700; letter-spacing: .12em; }
.marka small { font-family: var(--mono); font-size: .66rem; letter-spacing: .38em; color: var(--vurgu); font-weight: 500; }
.gezinme { display: flex; align-items: center; gap: 28px; }
.gezinme a { text-decoration: none; font-size: .92rem; font-weight: 500; }
.gezinme a:not(.dugme):hover { color: var(--vurgu); }
.menu-dugme { display: none; background: none; border: 0; padding: 10px; cursor: pointer; }
.menu-dugme span { display: block; width: 24px; height: 2px; background: var(--yazi); margin: 5px 0; transition: transform .2s, opacity .2s; }
.menu-dugme[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-dugme[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-dugme[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.dugme { display: inline-block; padding: 14px 26px; font: inherit; font-weight: 600; font-size: .92rem; letter-spacing: .01em; text-decoration: none; cursor: pointer; border: 1px solid var(--koyu); background: var(--koyu); color: var(--beyaz); text-align: center; white-space: nowrap; transition: background .2s, color .2s, transform .15s; }
.dugme:hover { background: var(--vurgu); border-color: var(--vurgu); }
.dugme.kucuk { padding: 10px 18px; font-size: .85rem; }
.dugme.tam { width: 100%; }
.dugme-ince { background: transparent; color: var(--yazi); }
.dugme-ince:hover { background: var(--yazi); border-color: var(--yazi); color: var(--beyaz); }
.dugme:active { transform: translateY(1px); }
.dugme[disabled] { opacity: .55; cursor: not-allowed; }

/* Hero: asimetrik */
.hero { padding: clamp(28px, 5vw, 64px) 0 clamp(40px, 6vw, 80px); }
.hero-ic { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(28px, 5vw, 80px); align-items: end; }
.hero-metin { padding-bottom: clamp(0px, 3vw, 40px); }
.hero-metin p { color: var(--soluk); font-size: 1.12rem; max-width: 38ch; margin-bottom: 28px; }
.hero-dugmeler { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-gorsel { margin: 0; }
.hero-cerceve { background: var(--beyaz); border: 1px solid var(--cizgi); aspect-ratio: 4 / 3; overflow: hidden; }
.hero-cerceve img { width: 100%; height: 100%; object-fit: cover; }
.hero-gorsel figcaption { font-family: var(--mono); font-size: .8rem; color: var(--soluk); margin-top: 10px; }

/* Bölümler */
.bolum { padding: clamp(64px, 9vw, 130px) 0; }
.bolum.cizgili { border-top: 1px solid var(--cizgi); }
.bolum-ust { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 40px; }
.bolum-ust h2 { margin: 0; }
.filtre { display: flex; gap: 6px; flex-wrap: wrap; }
.filtre button { font: inherit; font-size: .88rem; font-weight: 500; padding: 8px 16px; background: transparent; border: 1px solid var(--cizgi); color: var(--soluk); cursor: pointer; }
.filtre button:hover { border-color: var(--yazi); color: var(--yazi); }
.filtre button[aria-pressed="true"] { background: var(--koyu); border-color: var(--koyu); color: var(--beyaz); }

/* Proje ızgarası: dengesiz sütunlar */
.proje-izgara { display: grid; grid-template-columns: repeat(12, 1fr); gap: 34px 24px; }
.proje { grid-column: span 4; text-decoration: none; display: block; }
.proje:nth-child(6n+1) { grid-column: span 7; }
.proje:nth-child(6n+2) { grid-column: span 5; margin-top: 70px; }
.proje:nth-child(6n+3), .proje:nth-child(6n+4), .proje:nth-child(6n+5) { grid-column: span 4; }
.proje:nth-child(6n+6) { grid-column: span 12; }
.proje-gorsel { background: var(--beyaz); border: 1px solid var(--cizgi); aspect-ratio: 4 / 3; overflow: hidden; }
.proje:nth-child(6n+6) .proje-gorsel { aspect-ratio: 21 / 9; }
.proje-gorsel img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
.proje:hover .proje-gorsel img { transform: scale(1.04); }
.proje-ad { display: flex; justify-content: space-between; gap: 12px; margin-top: 14px; align-items: baseline; }
.proje-ad h3 { margin: 0; }
.proje-ad span { font-family: var(--mono); font-size: .8rem; color: var(--soluk); white-space: nowrap; }
.proje p { color: var(--soluk); margin: 4px 0 0; font-size: .95rem; }
.bos-sonuc { grid-column: 1 / -1; padding: 40px 0; color: var(--soluk); }

/* Stüdyo */
.studyo { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(32px, 6vw, 100px); align-items: start; }
.studyo-metin { font-size: clamp(1.5rem, 2.8vw, 2.3rem); line-height: 1.25; letter-spacing: -.015em; font-weight: 500; max-width: 24ch; margin: 0; }
.ilke-liste { margin: 0; display: grid; gap: 28px; }
.ilke-liste div { padding-left: 20px; border-left: 2px solid var(--vurgu); }
.ilke-liste dt { font-weight: 600; font-size: 1.1rem; margin-bottom: 2px; }
.ilke-liste dd { margin: 0; color: var(--soluk); max-width: 46ch; }

/* Hizmetler: açılır liste */
.hizmet-liste { border-top: 1px solid var(--cizgi); }
.hizmet-liste details { border-bottom: 1px solid var(--cizgi); }
.hizmet-liste summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 26px 0; font-size: clamp(1.3rem, 2.4vw, 1.9rem); font-weight: 600; letter-spacing: -.015em; }
.hizmet-liste summary::-webkit-details-marker { display: none; }
.hizmet-liste summary::after { content: "+"; font-family: var(--mono); font-weight: 400; font-size: 1.6rem; color: var(--vurgu); transition: transform .25s; }
.hizmet-liste details[open] summary::after { transform: rotate(45deg); }
.hizmet-liste details p { color: var(--soluk); padding: 0 0 28px; margin: 0; max-width: 62ch; }

/* Portal tanıtımı */
.portal-bant { background: var(--koyu); color: var(--beyaz); }
.portal-ic { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 100px); align-items: center; }
.portal-ic h2 { color: var(--beyaz); }
.portal-ic p { color: #b9bbb7; }
.portal-ipucu { font-family: var(--mono); font-size: .85rem; color: #d4b184; border-left: 2px solid #d4b184; padding-left: 14px; }
.portal-form { display: grid; gap: 14px; }
.portal-form label { color: #b9bbb7; }
.portal-form .dugme { background: var(--beyaz); color: var(--koyu); border-color: var(--beyaz); }
.portal-form .dugme:hover { background: #d4b184; border-color: #d4b184; }

/* Formlar */
label { display: grid; gap: 6px; font-size: .85rem; font-weight: 500; color: var(--soluk); }
input, select, textarea { font: inherit; font-size: 1rem; color: var(--yazi); background: var(--beyaz); border: 1px solid #aab0ac; border-radius: 0; padding: 12px; width: 100%; }
input::placeholder, textarea::placeholder { color: #727873; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--vurgu); border-color: var(--vurgu); }
.bal { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-mesaj { margin: 0; min-height: 1.3em; font-size: .92rem; }
.form-mesaj.hata { color: #a3281a; }
.form-mesaj.tamam { color: #1f6a45; font-weight: 500; }
.iletisim { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 100px); align-items: start; }
.iletisim-liste { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 20px; }
.iletisim-liste b { display: block; font-size: .8rem; font-family: var(--mono); font-weight: 500; color: var(--vurgu); letter-spacing: .05em; margin-bottom: 2px; }
.iletisim-liste span, .iletisim-liste a { text-decoration: none; overflow-wrap: anywhere; }
.form-kutu { display: grid; gap: 16px; }
.alan-grup { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.alt { border-top: 1px solid var(--cizgi); padding: 48px 0 32px; font-size: .92rem; color: var(--soluk); }
.alt-ust { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; align-items: start; }
.alt .uyari { max-width: 56ch; margin: 0; }
.alt .uyari strong { color: var(--yazi); }
.alt-linkler { display: flex; gap: 10px; flex-wrap: wrap; }
.alt .teknik { font-family: var(--mono); font-size: .78rem; margin: 24px 0 0; }
.alt .telif { font-size: .8rem; margin: 6px 0 0; }

/* Görünme hareketi: yalnızca opaklık ve konum */
@media (prefers-reduced-motion: no-preference) {
  .goster { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1); }
  .goster.gorundu { opacity: 1; transform: none; }
}

/* Proje sayfası */
.pd-ust { padding: 28px 0 8px; }
.geri-link { text-decoration: none; font-size: .9rem; color: var(--soluk); }
.geri-link:hover { color: var(--vurgu); }
.pd-baslik { padding: 24px 0 36px; display: grid; grid-template-columns: 7fr 5fr; gap: 40px; align-items: end; }
.pd-baslik p { color: var(--soluk); font-size: 1.1rem; margin: 0; }
.kunye { display: grid; grid-template-columns: repeat(5, auto); gap: 0; border-top: 1px solid var(--cizgi); border-bottom: 1px solid var(--cizgi); margin: 0 0 48px; }
.kunye div { padding: 16px 20px 16px 0; }
.kunye div + div { padding-left: 20px; border-left: 1px solid var(--cizgi); }
.kunye dt { font-family: var(--mono); font-size: .72rem; color: var(--soluk); letter-spacing: .06em; text-transform: uppercase; }
.kunye dd { margin: 2px 0 0; font-weight: 600; font-size: 1.1rem; }
.pd-galeri { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; }
.pd-galeri figure { margin: 0; background: var(--beyaz); border: 1px solid var(--cizgi); }
.pd-galeri figure:nth-child(1) { grid-column: span 12; }
.pd-galeri figure:nth-child(n+2) { grid-column: span 6; }
.pd-galeri img { width: 100%; height: auto; }
.pd-govde { display: grid; grid-template-columns: 7fr 5fr; gap: 60px; margin-top: 56px; align-items: start; }
.pd-govde p { font-size: 1.12rem; }
.pd-yan { border-left: 2px solid var(--vurgu); padding-left: 22px; }
.pd-yan p { font-size: .98rem; color: var(--soluk); }
.diger-liste { display: grid; gap: 0; border-top: 1px solid var(--cizgi); margin-top: 24px; }
.diger-liste a { display: grid; grid-template-columns: 120px 1fr auto; gap: 20px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--cizgi); text-decoration: none; }
.diger-liste img { width: 120px; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--cizgi); }
.diger-liste b { font-size: 1.25rem; letter-spacing: -.01em; }
.diger-liste span { font-family: var(--mono); font-size: .82rem; color: var(--soluk); }
.diger-liste a:hover b { color: var(--vurgu); }

@media (max-width: 980px) {
  .hero-ic, .studyo, .portal-ic, .iletisim, .pd-baslik, .pd-govde { grid-template-columns: 1fr; }
  .hero-gorsel { order: -1; }
  .proje, .proje:nth-child(n) { grid-column: span 12; margin-top: 0; }
  .proje:nth-child(n) .proje-gorsel { aspect-ratio: 4 / 3; }
  .kunye { grid-template-columns: repeat(2, 1fr); }
  .kunye div, .kunye div + div { padding: 14px 0; border-left: 0; }
  .pd-galeri figure:nth-child(n) { grid-column: span 12; }
}
@media (max-width: 860px) {
  .menu-dugme { display: block; }
  .gezinme { position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; background: var(--zemin); padding: 6px 20px 20px; border-bottom: 1px solid var(--cizgi); display: none; }
  .gezinme.acik { display: flex; }
  .gezinme a { padding: 14px 0; border-bottom: 1px solid var(--cizgi); }
  .gezinme a.dugme { margin-top: 14px; border-bottom: 1px solid var(--koyu); }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .alan-grup { grid-template-columns: 1fr; }
  .diger-liste a { grid-template-columns: 90px 1fr; }
  .diger-liste span { grid-column: 2; }
  .diger-liste img { width: 90px; }
  .hero-dugmeler .dugme { flex: 1; }
}


/* ---- Tasarım denetimi düzeltmeleri (design-taste-frontend): sayfa tek açık tema, koyu bant yok ---- */
.portal-bant { background: var(--zemin2); color: var(--yazi); }
.portal-ic h2 { color: var(--yazi); }
.portal-ic p { color: var(--soluk); }
.portal-ipucu { color: var(--vurgu-koyu); border-left-color: var(--vurgu); }
.portal-form label { color: var(--soluk); }
.portal-form .dugme { background: var(--koyu); color: var(--beyaz); border-color: var(--koyu); }
.portal-form .dugme:hover { background: var(--vurgu); border-color: var(--vurgu); }