/* ============================================================
   v2 temasi — modern galeri duzeni
   Ayarlar :root icinde. Koyu/acik: izleyicinin temasina uyar.
   ============================================================ */
:root{
  --zemin:#f7f7f6;
  --yuzey:#ececeb;          /* resim gelmeden once hucre zemini */
  --metin:#17181a;
  --soluk:#7c7e82;
  --cizgi:#e2e2de;
  --accent:#b23a2b;         /* eserlerdeki kiremit kirmizisi */
  --bar:#f7f7f6f2;
  --buyut-zemin:#0f1011;    /* buyutme ekrani her zaman koyu (galeri karasi) */
  --buyut-metin:#e9e7e4;
  --buyut-soluk:#8b8f94;

  --gosteri:"Bricolage Grotesque","Archivo",system-ui,sans-serif;
  --govde:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
  --kunye:"JetBrains Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;

  --bar-yuk:62px;
  --bosluk:8px;
  --hucre-min:240px;        /* bir hucre bundan kucuk olmaz */
  --kadraj:3.01/4;          /* KADRAJ: butun eserler ayni cercevede gorunur,
                               boylece dikey uzun bir eser digerlerinin
                               yaninda zayif durmuyor.
                               yatay cerceve istersen  4/3.01
                               kirpma hic olmasin      auto     yaz. */
  --kadraj-odak:center 38%; /* kirparken korunacak bolge (ust-orta) */
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --zemin:#0f1011; --yuzey:#191b1d; --metin:#e9e7e4; --soluk:#8b8f94;
    --cizgi:#26292c; --accent:#d9503a; --bar:#0f1011f2;
  }
}
:root[data-theme="dark"]{
  --zemin:#0f1011; --yuzey:#191b1d; --metin:#e9e7e4; --soluk:#8b8f94;
  --cizgi:#26292c; --accent:#d9503a; --bar:#0f1011f2;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--zemin); color:var(--metin);
  font-family:var(--govde); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px}

/* ---------- ust bar ---------- */
.bar{
  position:sticky; top:0; z-index:40; height:var(--bar-yuk);
  display:flex; align-items:center; gap:26px;
  padding:0 clamp(14px,3vw,34px);
  background:var(--bar); backdrop-filter:blur(9px);
  border-bottom:1px solid var(--cizgi);
}
.bar-isim{
  font-family:var(--gosteri); font-weight:700; font-size:17px;
  letter-spacing:-.012em; margin:0; white-space:nowrap;
}
.bar-sekme{display:flex; gap:4px; margin-left:6px}
.sekme{
  position:relative; padding:9px 12px; font-size:11.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--soluk); border-radius:2px;
  transition:color .18s, background .18s;
}
.sekme:hover{color:var(--metin); background:color-mix(in srgb,var(--metin) 5%,transparent)}
.sekme[aria-current="page"]{color:var(--metin)}
.sekme[aria-current="page"]::after{
  content:""; position:absolute; left:12px; right:12px; bottom:2px; height:2px;
  background:var(--accent);
}
.bar-sag{margin-left:auto; display:flex; align-items:center; gap:4px}
.bar-dugme{
  background:none; border:1px solid var(--cizgi); cursor:pointer;
  font:inherit; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--metin); padding:8px 14px; border-radius:2px;
  transition:border-color .18s, background .18s;
}
.bar-dugme:hover{border-color:var(--metin); background:color-mix(in srgb,var(--metin) 4%,transparent)}
.sosyal-grup{display:flex; align-items:center; gap:2px}
.sosyal{
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; color:var(--metin); opacity:.55;
  border-radius:2px; transition:opacity .16s, background .16s;
}
.sosyal:hover{opacity:1; background:color-mix(in srgb,var(--metin) 6%,transparent)}
.sosyal svg{display:block}
.bar-sayi{
  font-family:var(--kunye); font-size:10.5px; letter-spacing:.06em;
  color:var(--soluk); font-variant-numeric:tabular-nums; padding-right:8px;
}

/* ---------- izgara: sabit kadraj ---------- */
.grid{
  display:grid; gap:var(--bosluk);
  grid-template-columns:repeat(auto-fill,minmax(var(--hucre-min),1fr));
  padding:var(--bosluk) clamp(6px,1.6vw,14px) 90px;
  align-items:start;
}
.hucre{
  position:relative; display:block; overflow:hidden;
  background:var(--yuzey); cursor:zoom-in;
  aspect-ratio:var(--kadraj);
}
.grid--oran .hucre{aspect-ratio:auto}   /* --kadraj:auto -> oran JS'ten gelir */
.hucre img{
  width:100%; height:100%; display:block;
  object-fit:cover; object-position:var(--kadraj-odak);
  transition:transform .55s cubic-bezier(.2,.7,.2,1), filter .3s;
}
.grid--oran .hucre img{object-fit:contain}   /* kirpma kapaliysa tamami gorunur */
.hucre:hover img,.hucre:focus-visible img{transform:scale(1.025)}
.hucre-ad{                      /* mouse ustune gelince sag alt kosede */
  position:absolute; inset:auto 0 0 0; padding:30px 12px 10px;
  text-align:right;
  font-family:var(--kunye); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:#fff; background:linear-gradient(transparent,rgba(0,0,0,.74));
  opacity:0; transform:translateY(6px); transition:opacity .22s, transform .22s;
  pointer-events:none; text-shadow:0 1px 3px rgba(0,0,0,.55);
}
.hucre:hover .hucre-ad,.hucre:focus-visible .hucre-ad{opacity:1; transform:none}
.grid-bos{
  width:100%; padding:70px 20px; text-align:center;
  color:var(--soluk); font-family:var(--kunye); font-size:12px; letter-spacing:.08em;
}

/* ---------- buyutme ---------- */
.buyut{
  position:fixed; inset:0; z-index:100; display:none;
  background:var(--buyut-zemin); color:var(--buyut-metin);
}
.buyut.acik{display:grid; grid-template-rows:1fr auto}
.buyut-sahne{
  position:relative; display:flex; align-items:center; justify-content:center;
  padding:34px 76px 8px; min-height:0;
}
.buyut-sahne img{
  max-width:100%; max-height:100%; object-fit:contain; display:block;
  transition:filter .35s ease;
}
.buyut-sahne img.tasla{filter:blur(14px) saturate(1.06)}   /* buyuk hali gelene kadar */
.buyut-alt{
  display:flex; align-items:flex-end; justify-content:flex-end;   /* kunye sagda */
  padding:14px clamp(16px,3vw,34px) 22px;
}
.buyut-kunye{text-align:right; color:#fff}
.buyut-kunye h2{
  font-family:var(--gosteri); font-weight:600; font-size:19px;
  letter-spacing:-.01em; margin:0 0 4px;
}
.buyut-kunye p{
  margin:0; font-family:var(--kunye); font-size:11px; letter-spacing:.07em;
  color:var(--buyut-soluk); text-transform:uppercase;
}
.buyut-sayac{
  margin-top:8px; font-family:var(--kunye); font-size:11px; letter-spacing:.1em;
  color:var(--buyut-soluk); font-variant-numeric:tabular-nums; white-space:nowrap;
}
.buyut-sayac b{color:var(--buyut-metin); font-weight:400}
.ok,.buyut-kapat{
  position:absolute; background:none; border:0; cursor:pointer;
  color:var(--buyut-metin); font-family:var(--kunye); font-size:12px;
  letter-spacing:.08em; padding:14px 16px; opacity:.55; transition:opacity .18s;
}
.ok:hover,.buyut-kapat:hover{opacity:1}
.ok:disabled{opacity:.12; cursor:default}
.ok-sol{left:6px; top:50%; transform:translateY(-50%)}
.ok-sag{right:6px; top:50%; transform:translateY(-50%)}
.buyut-kapat{top:8px; right:10px; font-size:20px; padding:8px 14px}
.buyut-yukleniyor{
  position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
  font-family:var(--kunye); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--buyut-soluk); opacity:0; transition:opacity .2s;
}
.buyut-yukleniyor.gorun{opacity:1}

/* ---------- duz sayfa (gizli portfolyo vb.) ---------- */
.sayfa{max-width:760px; padding:44px clamp(14px,3vw,34px) 90px}
.sayfa h1{
  font-family:var(--gosteri); font-weight:600; font-size:clamp(24px,3.4vw,34px);
  letter-spacing:-.015em; margin:0 0 8px; text-wrap:balance;
}
.sayfa .alt{
  font-family:var(--kunye); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--soluk); margin:0 0 30px;
}
.sayfa p{line-height:1.75; font-size:14.5px; color:var(--metin); margin:0 0 18px}
.sayfa .dugme{
  display:inline-block; border:1px solid var(--cizgi); padding:11px 18px;
  margin:4px 8px 4px 0; font-size:11px; letter-spacing:.11em; text-transform:uppercase;
  transition:border-color .16s, background .16s;
}
.sayfa .dugme:hover{border-color:var(--metin); background:color-mix(in srgb,var(--metin) 5%,transparent)}
.pdf-cerceve{
  width:100%; height:82vh; border:1px solid var(--cizgi);
  margin:24px 0 10px; background:var(--yuzey);
}
@media (max-width:720px){ .pdf-cerceve{height:70vh} }

/* ---------- SHOP: "yakinda" sayfasi ----------
   Secilen eser siyah-beyaza cevrilir; "screen" harmani siyahlari koyu
   zemine gomer, yalniz acik tonlar hayal gibi kalir. */
.shop-sayfa{background:var(--buyut-zemin); color:var(--buyut-metin)}
.shop-sayfa .bar{
  background:#0f1011f2; border-bottom-color:#ffffff14; color:var(--buyut-metin);
}
.shop-sayfa .sekme{color:#8b8f94}
.shop-sayfa .sekme:hover,.shop-sayfa .sekme[aria-current="page"]{color:var(--buyut-metin)}
.shop-sayfa .bar-dugme{color:var(--buyut-metin); border-color:#ffffff26}
.shop-sayfa .bar-dugme:hover{border-color:#ffffff66; background:#ffffff0f}
.shop-sayfa .sosyal{color:var(--buyut-metin)}
.shop{
  position:relative; min-height:calc(100vh - var(--bar-yuk));
  display:grid; place-items:center; overflow:hidden; padding:40px 24px 70px;
}
.shop-arka{
  position:absolute; inset:0; background:no-repeat center/cover;
  filter:grayscale(1) contrast(1.08); opacity:.22; mix-blend-mode:screen;
  pointer-events:none;
}
.shop-arka::after{                      /* kenarlari karanlia dogru soner */
  content:""; position:absolute; inset:0;
  background:radial-gradient(60% 55% at 50% 45%, transparent, #0f1011 78%);
}
.shop-ic{position:relative; text-align:center; max-width:44ch}
.shop-etiket{
  font-family:var(--kunye); font-size:10.5px; letter-spacing:.28em;
  text-transform:uppercase; color:#8b8f94; margin:0 0 14px;
}
.shop-ic h2{
  font-family:var(--gosteri); font-weight:600; font-size:clamp(30px,5vw,52px);
  letter-spacing:-.02em; margin:0 0 16px; text-wrap:balance;
}
.shop-alt{font-size:14.5px; line-height:1.7; color:#b9bcc0; margin:0 0 26px}
.shop .bar-dugme{padding:11px 20px}

/* ---------- telefon ---------- */
@media (max-width:720px){
  :root{--hucre-min:150px; --bosluk:5px; --bar-yuk:56px}
  .bar{gap:10px; padding:0 12px}
  .bar-isim{font-size:15px}
  .sekme{padding:10px 9px; font-size:10.5px}
  .sosyal-grup{display:flex; align-items:center; gap:2px}
.sosyal{
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; color:var(--metin); opacity:.55;
  border-radius:2px; transition:opacity .16s, background .16s;
}
.sosyal:hover{opacity:1; background:color-mix(in srgb,var(--metin) 6%,transparent)}
.sosyal svg{display:block}
.bar-sayi{display:none}
  .bar-dugme{padding:9px 11px}
  .buyut-sahne{padding:16px 12px 4px}
  .ok{bottom:6px; top:auto; transform:none; opacity:.8}
  .ok-sol{left:4px} .ok-sag{right:4px}
  .hucre-ad{opacity:1; transform:none; font-size:9px; padding:20px 8px 7px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important}
  .hucre:hover img{transform:none}
}