/* ==========================================================================
   inner.css — iç sayfalar
   Ortak şablon: koyu ince page-hero → açık gri içerik → footer.
   Hangi anasayfa seçilirse seçilsin iç sayfalar aynı kalır; nötr tutuldu.
   ========================================================================== */

/* ------------------------------------------------------------- SAYFA HERO */
.page-hero {
  position: relative;
  background: var(--black-950);
  padding-top: calc(var(--head-h) + clamp(48px, 7vw, 96px));
  padding-bottom: clamp(48px, 6vw, 84px);
  overflow: hidden;
  border-bottom: 1px solid var(--line-dark);
}
.page-hero__media { position: absolute; inset: 0; z-index: 0; }
.page-hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
  filter: grayscale(.7) contrast(1.08) brightness(.62);
}
.page-hero__veil {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to right, rgba(11,11,12,.92) 0%, rgba(11,11,12,.62) 52%, rgba(11,11,12,.34) 100%),
    linear-gradient(to top, rgba(11,11,12,.8) 0%, transparent 62%);
}
.page-hero__inner { position: relative; z-index: 2; }

.page-hero__title {
  margin-top: 26px;
  font-size: clamp(2.1rem, 4.4vw, 3.9rem);
  line-height: 1.05;
  letter-spacing: -.035em;
  font-weight: 700;
  color: var(--white);
  max-width: 20ch;
}
.page-hero__eyebrow { margin: 26px 0 0; }
.page-hero__eyebrow + .page-hero__title { margin-top: 14px; }
.page-hero__lead {
  margin-top: 22px;
  max-width: 62ch;
  color: var(--gray-400);
  font-size: 1.05em;
}

/* ------------------------------------------------------------ BREADCRUMB */
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.crumbs li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.crumbs li + li::before {
  content: "/";
  color: var(--gray-700);
}
.crumbs a { color: var(--gray-500); transition: color .25s var(--ease); }
.crumbs a:hover { color: var(--white); }
.crumbs [aria-current] { color: var(--gray-300); }

/* --------------------------------------------------------- İÇERİK DÜZENİ */
/**
 * İç sayfa gövdesi. Zemin ve metin rengini .section--light verir — bu sınıf
 * yalnızca "burası iç sayfa içeriği" kancasıdır. İkisi BİRLİKTE yazılmalı:
 *
 *   <section class="section section--light inner-body">
 *
 * Tek başına .inner-body yazılırsa sayfa açık zeminli görünür ama başlıklar
 * beyaz, butonlar koyu varyantta kalır (main.css'teki uzun açıklamaya bakın).
 */
.inner-body { background: var(--gray-100); color: var(--gray-700); }

/* İki kolonlu içerik: solda yapışkan yan menü, sağda metin */
.doc {
  display: grid;
  grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
  gap: clamp(36px, 6vw, 96px);
  align-items: start;
}
.doc__aside { position: sticky; top: calc(var(--head-h) + 32px); }
.doc__aside h2 {
  font-family: var(--font-body);
  font-size: 11px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--gray-600);
  margin-bottom: 18px;
}
.doc__aside li + li { margin-top: 2px; }
.doc__aside a {
  display: block;
  padding: 11px 14px;
  font-size: 14px;
  color: var(--gray-600);
  border-left: 1px solid var(--line-light);
  transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.doc__aside a:hover { color: var(--black-950); border-color: var(--line-light2); }
.doc__aside a.is-active {
  color: var(--black-950);
  border-color: var(--black-950);
  background: var(--white);
  font-weight: 500;
}

.doc__main > * + * { margin-top: clamp(30px, 3.4vw, 48px); }
.doc__main h2 {
  font-size: clamp(1.5rem, 2.2vw, 2.05rem);
  letter-spacing: -.025em;
  color: var(--black-950);
}
.doc__main h3 {
  font-size: clamp(1.1rem, 1.4vw, 1.3rem);
  letter-spacing: -.015em;
  color: var(--black-950);
}
.doc__main p { max-width: 68ch; }
.doc__main h2 + p, .doc__main h3 + p { margin-top: 14px; }

.lede {
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  line-height: 1.5;
  color: var(--black-950);
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -.015em;
  max-width: 56ch;
}

/* ------------------------------------------------------------ KART IZGARA */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 1px;
  background: var(--line-light);
  border: 1px solid var(--line-light);
}
.card {
  background: var(--gray-100);
  padding: clamp(24px, 2.6vw, 36px);
  transition: background .35s var(--ease);
}
.card:hover { background: var(--white); }
.card__no { font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; color: var(--gray-600); }
.card .ico { color: var(--gray-500); margin-bottom: 20px; }
.card h3 { margin-top: 14px; font-size: 1.1rem; letter-spacing: -.015em; color: var(--black-950); }
.card p  { margin-top: 12px; font-size: 14.5px; color: var(--gray-600); line-height: 1.6; }

/* Koyu bölümdeki kart varyantı */
.section--dark .cards, .section--dark2 .cards { background: var(--line-dark); border-color: var(--line-dark); }
.section--dark .card,  .section--dark2 .card  { background: var(--black-950); }
.section--dark .card:hover, .section--dark2 .card:hover { background: var(--black-900); }
.section--dark .card h3, .section--dark2 .card h3 { color: var(--white); }
.section--dark .card p,  .section--dark2 .card p  { color: var(--gray-400); }

/* --------------------------------------------------------- ÖZELLİK LİSTESİ */
.feat { display: grid; gap: 1px; background: var(--line-light); border: 1px solid var(--line-light); }
.feat li { display: flex; gap: 20px; padding: clamp(20px, 2.2vw, 30px); background: var(--gray-100); }
.feat .ico { color: var(--gray-500); margin-top: 2px; }
.feat h3 { font-size: 1.02rem; color: var(--black-950); letter-spacing: -.015em; }
.feat p  { margin-top: 8px; font-size: 14.5px; color: var(--gray-600); line-height: 1.6; }

/* ------------------------------------------------------------ VERİ TABLOSU */
.spec { width: 100%; border-collapse: collapse; border-top: 1px solid var(--line-light); }
.spec th, .spec td {
  text-align: left;
  padding: 16px 20px 16px 0;
  border-bottom: 1px solid var(--line-light);
  vertical-align: top;
  font-size: 14.5px;
}
.spec th {
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--gray-600);
  width: clamp(120px, 22%, 220px);
  white-space: nowrap;
}
.spec td { color: var(--black-950); }
.spec td.mono { font-family: var(--font-mono); }

/* ------------------------------------------------------------- GALERİ */
.gal {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 1px;
  background: var(--line-light);
  border: 1px solid var(--line-light);
}
.gal__item { display: block; position: relative; background: var(--black-950); }
.gal__item .shot { aspect-ratio: 4 / 3; }
.gal__item figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 14px 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--white);
  background: linear-gradient(to top, rgba(11,11,12,.86), transparent);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.gal__item:hover figcaption, .gal__item:focus-visible figcaption { opacity: 1; transform: none; }

/* Filtre çubuğu */
/**
 * Süzgeç şeridi TEK SATIR.
 *
 * 11 proje + "Tümü" 1440px'lik kapta 1356px istiyordu, yani sarıyordu ve iki
 * satıra düşen şerit ızgaranın üstünde dağınık duruyordu. İki şey yapıldı:
 *
 *   1. Yatay dolgu 18 → 13px, aralık 8 → 6px. Gereken genişlik ~1200px'e
 *      indi; masaüstünde artık kayması gerekmiyor.
 *   2. `nowrap` + `overflow-x: auto`. Dar ekranda ya da proje eklendiğinde
 *      şerit ikinci satıra düşmüyor, tek satır olarak kayıyor.
 *
 * Kaydırılabilir olduğu, kenarlardaki solmayla belli ediliyor: `local`
 * gradyanlar zeminle birlikte kayıp uçları örter, `scroll` gradyanlar sabit
 * durup gölgeyi gösterir — yani solma YALNIZCA taşma varken görünür.
 */
.filters {
  display: flex;
  flex-wrap: nowrap;
  gap: 5px;
  margin-bottom: clamp(26px, 3vw, 40px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;              /* şerit kısa, kaydırma çubuğu gürültü yapıyor */
  background:
    linear-gradient(to right, var(--gray-100), rgba(232, 233, 235, 0)) left  / 26px 100% no-repeat local,
    linear-gradient(to left,  var(--gray-100), rgba(232, 233, 235, 0)) right / 26px 100% no-repeat local,
    linear-gradient(to right, rgba(11, 11, 12, .13), rgba(11, 11, 12, 0)) left  / 16px 100% no-repeat scroll,
    linear-gradient(to left,  rgba(11, 11, 12, .13), rgba(11, 11, 12, 0)) right / 16px 100% no-repeat scroll;
}
.filters::-webkit-scrollbar { display: none; }
.filters button {
  flex: none;                          /* daralıp metni kırmasın */
  padding: 10px 13px;
  border: 1px solid var(--line-light2);
  background: var(--gray-100);         /* kenar solmasının altında kalmasın */
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--gray-600);
  transition: color .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}
.filters button:hover { color: var(--black-950); border-color: var(--black-950); }
.filters button[aria-pressed="true"] { background: var(--black-950); border-color: var(--black-950); color: var(--white); }

/* ----------------------------------------------------------- LIGHTBOX */
.lb {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(11, 11, 12, .985);
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 56px);
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.lb.is-open { opacity: 1; }
.lb__img { max-width: 100%; max-height: 82vh; object-fit: contain; }
.lb__cap {
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--gray-400);
  text-align: center;
}
.lb__close, .lb__prev, .lb__next {
  position: absolute;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border: 1px solid var(--line-dark2);
  color: var(--white);
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.lb__close:hover, .lb__prev:hover, .lb__next:hover { background: var(--black-900); border-color: var(--white); }
.lb__close { top: clamp(12px, 3vw, 28px); right: clamp(12px, 3vw, 28px); }
.lb__prev  { left: clamp(8px, 2vw, 28px);  top: 50%; transform: translateY(-50%); }
.lb__next  { right: clamp(8px, 2vw, 28px); top: 50%; transform: translateY(-50%); }
.lb__prev .ico { transform: rotate(180deg); }

/* ------------------------------------------------------------- BOŞ DURUM */
.empty {
  border: 1px solid var(--line-light);
  padding: clamp(40px, 6vw, 88px) clamp(24px, 4vw, 56px);
  text-align: center;
  background: var(--white);
}
.empty .ico { color: var(--gray-400); margin-inline: auto; }
.empty h2 { margin-top: 22px; font-size: clamp(1.3rem, 2vw, 1.8rem); letter-spacing: -.02em; }
.empty p  { margin: 16px auto 0; max-width: 50ch; color: var(--gray-600); }
.empty .btn { margin-top: 32px; }

/* ------------------------------------------------------------------ FORM */
.form { display: grid; gap: 22px; max-width: 720px; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.field { display: grid; gap: 9px; }
.field > label {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--gray-600);
}
.field .req { color: var(--amber-ink); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 15px 16px;
  background: var(--white);
  border: 1px solid var(--line-light);
  border-radius: 0;
  color: var(--black-950);
  font-size: 15px;
  transition: border-color .25s var(--ease);
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--line-light2); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--black-950);
  box-shadow: inset 0 0 0 1px var(--black-950);
}
.field textarea { min-height: 150px; resize: vertical; }
.field select { appearance: none; background-image: none; cursor: pointer; }
.field__hint { font-size: 12px; color: var(--gray-600); }
.field[data-invalid] input, .field[data-invalid] select, .field[data-invalid] textarea { border-color: var(--amber); }
.field__err { font-size: 12.5px; color: var(--amber-ink); }

/* ------------------------------------------------------- ONAY (KVKK) BLOĞU
   Onaylar formun gövdesinden ayrı bir panelde toplanır: hukuki metin ile
   veri alanları görsel olarak karışmasın. Panel beyaz zeminli ve 1px
   çerçeveli — sayfanın geri kalanıyla aynı dil, gölge yok, radius yok. */
.consent {
  border: 1px solid var(--line-light);
  background: var(--white);
  padding: 22px 24px;
  display: grid;
  gap: 20px;
}
.consent__legend {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gray-600);
  padding: 0;
  margin: 0 0 14px;
}
.consent > .field { gap: 8px; }
.consent hr { border: 0; border-top: 1px solid var(--line-light); margin: 0; }

.check { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--gray-600); cursor: pointer; }
.check input { width: 18px; height: 18px; flex: none; margin-top: 2px; accent-color: var(--black-950); }
.check a { color: var(--black-950); text-decoration: underline; text-underline-offset: 3px; }
.check:hover a { text-decoration-thickness: 2px; }

/* Radyolar seçilebilir kutucuk: 26px'lik boşlukla yan yana duran çıplak
   etiketler "Açık Rızam Var Açık Rızam Yok" diye tek satır metin gibi
   okunuyordu — seçim yapılacağı anlaşılmıyordu. */
.radios { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.radios label {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 15px;
  border: 1px solid var(--line-light);
  font-size: 14px; color: var(--gray-700);
  cursor: pointer;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.radios label:hover { border-color: var(--line-light2); background: var(--gray-050); }
.radios input { width: 17px; height: 17px; flex: none; accent-color: var(--black-950); }
.radios label:has(input:checked) { border-color: var(--black-950); background: var(--gray-050); color: var(--black-950); }
.radios label:has(input:focus-visible) { outline: 2px solid var(--black-950); outline-offset: 2px; }

/* ------------------------------------------------------------ DOSYA SEÇME
   Ham <input type="file"> tarayıcının kendi düğmesini basıyordu; ne yazı
   tipi ne kenarlık sayfaya uyuyordu. Girdi görsel olarak gizlenip (erişim
   ağacında kalarak) yerine etiketten kurulmuş bir alan gösteriliyor. */
.file { display: grid; gap: 9px; }
/* .field input kurali (0,1,1) bunu eziyordu: ayni ozgullukte yazilmali,
   yoksa tarayicinin kendi dosya dugmesi de gorunuyor. */
.field .file__input {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.file__drop {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  background: var(--white);
  border: 1px dashed var(--line-light2);
  cursor: pointer;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.file__drop:hover { border-color: var(--black-950); background: var(--gray-050); }
.field .file__input:focus-visible + .file__drop { outline: 2px solid var(--black-950); outline-offset: 2px; }
.file__drop .ico { color: var(--gray-500); flex: none; }
.file__drop:hover .ico { color: var(--black-950); }
.file__texts { display: grid; gap: 3px; min-width: 0; }
.file__name {
  font-size: 14px; color: var(--black-950);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.file__meta { font-size: 12px; color: var(--gray-600); }
.file__clear {
  margin-left: auto; flex: none;
  border: 1px solid var(--line-light); background: none;
  padding: 7px 12px; font-size: 12px; color: var(--gray-600); cursor: pointer;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.file__clear:hover { border-color: var(--black-950); color: var(--black-950); }
.file[data-has-file] .file__drop { border-style: solid; border-color: var(--black-950); }

/* ------------------------------------------------------------ BAŞARI KUTUSU
   display:flex, hidden niteliğinin display:none'unu eziyordu; bu yüzden
   "Mesajınız alındı." kutusu form gönderilmeden de sayfada duruyordu. */
.form__ok {
  border: 1px solid var(--black-950);
  background: var(--white);
  padding: 24px 26px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.form__ok[hidden] { display: none; }
.form__ok .ico { color: var(--black-950); margin-top: 2px; }
.form__ok strong { display: block; color: var(--black-950); font-family: var(--font-display); }
.form__ok p { margin-top: 6px; font-size: 14px; color: var(--gray-600); }

/* Gönderim hatası — sunucu ya da SMTP reddederse. Başarı kutusuyla aynı
   dil, kehribar kenar: kırmızı paletin dışında kalıyor. */
.form__err {
  border: 1px solid var(--amber-ink);
  background: var(--white);
  color: var(--amber-ink);
  padding: 16px 20px;
  font-size: 14.5px;
  line-height: 1.55;
}
.form__err[hidden] { display: none; }

/* Gönderilirken düğme */
.form [type="submit"][aria-busy="true"] { opacity: .6; pointer-events: none; }

/* Bal küpü: botlar doldurur, insan görmez. display:none KULLANILMIYOR —
   bazı botlar gizli alanları atlıyor; ekran dışına itmek daha güvenilir. */
.form__hp {
  position: absolute !important;
  left: -10000px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* -------------------------------------------------------- İLETİŞİM KÜNYE */
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(36px, 5vw, 80px); align-items: start; }
.contact__card { border: 1px solid var(--line-light); background: var(--white); }
.contact__row { display: flex; gap: 18px; padding: 24px 26px; border-bottom: 1px solid var(--line-light); }
.contact__row:last-child { border-bottom: 0; }
.contact__row .ico { color: var(--gray-500); margin-top: 2px; }
.contact__row dt { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--gray-600); }
.contact__row dd { margin: 6px 0 0; color: var(--black-950); font-size: 15px; line-height: 1.6; }
.contact__row a:hover { text-decoration: underline; text-underline-offset: 3px; }

.map {
  border: 1px solid var(--line-light);
  aspect-ratio: 16 / 10;
  background: var(--gray-200);
  overflow: hidden;
}
.map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(1) contrast(1.05); }

/* -------------------------------------------------------------- VİDEO */
.video-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--black-950);
  border: 1px solid var(--line-light);
  overflow: hidden;
  cursor: pointer;
  display: block;
  width: 100%;
}
.video-embed img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.4) brightness(.72); transition: filter .5s var(--ease); }
.video-embed:hover img { filter: grayscale(0) brightness(.85); }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-embed__play {
  position: absolute; inset: 0;
  display: grid; place-items: center;
}
.video-embed__play span {
  width: 84px; height: 84px;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(11,11,12,.4);
  backdrop-filter: blur(4px);
  transition: background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.video-embed:hover .video-embed__play span { background: var(--white); border-color: var(--white); transform: scale(1.06); }
.video-embed__play svg { width: 26px; height: 26px; color: var(--white); transition: color .35s var(--ease); margin-left: 3px; }
.video-embed:hover .video-embed__play svg { color: var(--black-950); }

/* ------------------------------------------------------- PROJE DETAYI */
.pdetail { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr); gap: clamp(36px, 5vw, 80px); align-items: start; }
.pdetail__facts { border: 1px solid var(--line-light); background: var(--white); position: sticky; top: calc(var(--head-h) + 32px); }
.pdetail__fact { padding: 20px 24px; border-bottom: 1px solid var(--line-light); }
.pdetail__fact:last-child { border-bottom: 0; }
.pdetail__fact dt { font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--gray-600); }
.pdetail__fact dd { margin: 7px 0 0; color: var(--black-950); font-size: 15px; line-height: 1.5; }
.pdetail__fact dd.mono { font-family: var(--font-mono); }

.progress { display: block; margin-top: 12px; height: 3px; background: var(--gray-200); position: relative; overflow: hidden; }
.progress i { position: absolute; inset: 0 auto 0 0; background: var(--amber); transform-origin: left; }

.works { border-top: 1px solid var(--line-light); }
.work { padding: 24px 0; border-bottom: 1px solid var(--line-light); display: grid; gap: 8px; }
.work h3 { font-size: 1.05rem; letter-spacing: -.015em; }
.work__meta { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13.5px; color: var(--gray-600); }
.work__meta .mono { color: var(--black-950); }

/* --------------------------------------------------------- SAYFA NAVİ */
.pnav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line-light); border: 1px solid var(--line-light); }
.pnav a { background: var(--gray-100); padding: clamp(22px, 2.6vw, 34px); transition: background .3s var(--ease); }
.pnav a:hover { background: var(--white); }
.pnav span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gray-600); }
.pnav strong { display: block; margin-top: 10px; font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; color: var(--black-950); letter-spacing: -.02em; }
.pnav a:last-child { text-align: right; }

/* ----------------------------------------------------------- RESPONSIVE */
@media (max-width: 900px) {
  .doc { grid-template-columns: 1fr; }
  .doc__aside { position: static; }
  .doc__aside ul { display: flex; flex-wrap: wrap; gap: 6px; }
  .doc__aside a { border-left: 0; border: 1px solid var(--line-light); padding: 9px 14px; }
  .contact { grid-template-columns: 1fr; }
  .pdetail { grid-template-columns: 1fr; }
  .pdetail__facts { position: static; }
}

@media (max-width: 620px) {
  .form__row { grid-template-columns: 1fr; }
  .pnav { grid-template-columns: 1fr; }
  .pnav a:last-child { text-align: left; }
}

/* ------------------------------------------------------------------ NOT */
/* Müşteri teyidi bekleyen / bilgilendirici kutu */
.note {
  display: flex;
  gap: 18px;
  padding: 24px 26px;
  border: 1px solid var(--line-light2);
  background: var(--white);
}
.note .ico { color: var(--gray-500); margin-top: 2px; }
.note strong { display: block; font-family: var(--font-display); font-size: 15px; color: var(--black-950); letter-spacing: -.01em; }
.note p { margin-top: 8px; font-size: 14px; color: var(--gray-600); line-height: 1.6; max-width: 62ch; }
.section--dark .note, .section--dark2 .note { background: var(--black-900); border-color: var(--line-dark2); }
.section--dark .note strong, .section--dark2 .note strong { color: var(--white); }
.section--dark .note p, .section--dark2 .note p { color: var(--gray-500); }

/* Koyu bölümdeki galeri ızgarası */
.section--dark .gal, .section--dark2 .gal { background: var(--line-dark); border-color: var(--line-dark); }

/* Metin içi bağlantılar */
.doc__main p a, .prose a {
  color: var(--black-950);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--line-light2);
  transition: text-decoration-color .25s var(--ease);
}
.doc__main p a:hover, .prose a:hover { text-decoration-color: var(--black-950); }
.section--dark .prose a { color: var(--white); text-decoration-color: var(--line-dark2); }
.section--dark .prose a:hover { text-decoration-color: var(--white); }

/* .lb display:grid, [hidden] varsayılanını ezdiği için açıkça kapatılmalı */
.lb[hidden] { display: none; }

/* Sayfa hero'sunun hemen altındaki ilk bölümde üst boşluk kısaltılır —
   hero'nun alt boşluğuyla üst üste binip 250px'lik ölü alan oluşturuyordu. */
.page-hero + .section { padding-top: clamp(44px, 5.5vw, 88px); }

/* Fotoğrafı gelmemiş proje kartı — boş gri kutu yerine sakin bir işaret */
.shot__none {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--black-900);
  color: var(--gray-700);
}
.section--light .shot__none { background: var(--gray-200); color: var(--gray-600); }

/* ─────────────────────────────────────────────────── TASLAK ÖNİZLEME ŞERİDİ
   Yayına alınmamış bir sayfa/proje yalnızca panelde oturumu açık olana
   gösteriliyor. Şerit sayfanın en üstünde ve YAPIŞKAN: kaydırdıkça kaybolsa
   "yayında" sanılabilir. Amber, sitenin tek aksan rengi. */
.preview-bar {
  /* SABİT: kaydırınca kaybolsa sayfa yayında sanılabilir. Yüksekliği
     değişken değil — üst bar bu kadar aşağı itiliyor, ölçü tutmalı. */
  position: fixed; top: 0; left: 0; right: 0; z-index: 1200;
  min-height: var(--preview-h);
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 11px clamp(16px, 4vw, 40px);
  background: var(--amber-ink);
  color: var(--white);
  font-size: 13.5px;
  line-height: 1.4;
}
.preview-bar strong {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; flex: none;
}
.preview-bar span { flex: 1; min-width: 200px; }
.preview-bar a {
  flex: none; color: var(--white);
  border-bottom: 1px solid rgba(255, 255, 255, .5);
  padding-bottom: 1px;
}
.preview-bar a:hover { border-color: var(--white); }

/* Şerit sabit; hem sayfa hem üst bar o kadar aşağıdan başlamalı */
:root { --preview-h: 44px; }
body.is-preview { padding-top: var(--preview-h); }
body.is-preview .site-head { top: var(--preview-h); }
@media (max-width: 620px) { :root { --preview-h: 64px; } }

/* ==================================================== PROJE GRUPLARI
   Projeler önce sektöre (Maden / İnşaat & Taahhüt), sektör içinde duruma
   (Devam Eden / Tamamlanan) ayrılıyor. Eskiden bu ayrım iki sıra süzgeç
   düğmesiyle yapılıyordu; yapıya çevrildi çünkü:
     · bölüm bağlantısı paylaşılabiliyor (#maden),
     · arama motoru başlıkları görüyor,
     · JavaScript kapalıyken de aynı sıra duruyor.                       */

/* Sektöre atlama şeridi — süzgeç değil, çapa bağlantıları */
.pjump {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: clamp(30px, 3.4vw, 46px);
}
.pjump a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 15px;
  border: 1px solid var(--line-light2);
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-600);
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.pjump a:hover { color: var(--black-950); border-color: var(--black-950); }
.pjump__n { font-size: 11px; opacity: .6; }

/* Sektör bloğu */
.pgroup { scroll-margin-top: 96px; }          /* sabit başlığın altında kalmasın */
.pgroup + .pgroup { margin-top: clamp(52px, 6vw, 84px); }

.pgroup__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-light2);
}
.pgroup__title {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--black-950);
}
.pgroup__count { font-size: 12px; color: var(--gray-600); white-space: nowrap; }

/* Durum alt bloğu */
.pgroup__set { margin-top: clamp(26px, 3vw, 38px); }
.pgroup__sub {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gray-600);
}
.pgroup__n { font-size: 11px; opacity: .6; }

/* Devam eden = amber nokta, tamamlanan = boş halka. Rozetle aynı dil. */
.pgroup__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.pgroup__dot--devam { background: var(--amber-ink); }
.pgroup__dot--tamamlanan { border: 1.5px solid var(--gray-400); }

/* Tek durumlu sayfalarda (devam-eden.php, tamamlanan.php) durum başlığı
   bilgi taşımıyor — başlık sayfanın kendisinde zaten yazıyor. */
.pgroups--flat .pgroup__sub { display: none; }
.pgroups--flat .pgroup__set { margin-top: clamp(18px, 2vw, 24px); }

/* Tek sektorlu sayfalarda (maden.php, insaat.php) sektor basligi sayfanin
   kendi basligini tekrar eder — gizleniyor, durum alt basliklari kaliyor. */
.pgroups--onesector .pgroup__head { display: none; }
.pgroups--onesector .pgroup__set:first-child { margin-top: 0; }