/* Ortak bileşenler — ana site ve Şeyler düzenlerinin ikisi de yükler.
   İçerik: ikonlar · sosyal bağlantılar · korumalı e-posta · tam ekran görüntüleyici */

/* ─── İkonlar ─── */
.icon { display: inline-block; vertical-align: -.2em; flex: none; }

/* ─── Sosyal hesaplar: yalnız ikon, yuvarlak dokunma alanı ─── */
.social { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.social li { padding: 0; }
.social a {
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem; border-radius: 999px;
  color: var(--ink-soft, var(--ink)); border: 1px solid var(--rule);
  transition: color .3s ease, border-color .3s ease, background-color .3s ease, transform .3s ease;
}
.social a:hover, .social a:focus-visible {
  color: var(--bg, #fff); background: var(--ink-strong, var(--ink)); border-color: var(--ink-strong, var(--ink));
  transform: translateY(-2px); outline: none;
}

/* ─── Korumalı e-posta ─── */
.mail { display: inline-flex; align-items: center; gap: .35rem; max-width: 100%; vertical-align: baseline; }
.mail__btn {
  display: inline-flex; align-items: center; gap: .45rem;
  font: inherit; line-height: 1.3; color: inherit; cursor: pointer;
  background: none; border: 0; padding: 0; text-align: left;
  border-bottom: 1px dashed color-mix(in srgb, currentColor 40%, transparent);
  transition: color .3s ease, border-color .3s ease;
}
.mail__btn:hover, .mail__btn:focus-visible { color: var(--link, var(--terracotta, #c4553a)); border-bottom-color: currentColor; outline: none; }
.mail__btn.is-error { color: var(--muted); border-bottom-color: transparent; cursor: default; }
.mail[data-busy] .mail__btn { opacity: .6; cursor: progress; }
.mail__addr { color: inherit; text-decoration: none; overflow-wrap: anywhere; transition: color .3s ease; }
.mail__addr:hover { color: var(--link, var(--terracotta, #c4553a)); }
.mail__copy {
  display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; flex: none;
  border-radius: 999px; border: 0; background: none; color: var(--muted); cursor: pointer;
  transition: color .3s ease, background-color .3s ease;
}
.mail__copy:hover, .mail__copy:focus-visible { color: var(--ink-strong, var(--ink)); background: color-mix(in srgb, currentColor 10%, transparent); outline: none; }
.mail__copy.is-done { color: var(--accent, #3a5a40); }
.mail.is-open { animation: mail-in .45s ease both; }
.mail__verify { display: inline-block; margin-left: .5rem; vertical-align: middle; }
@keyframes mail-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mail.is-open { animation: none; } }

/* ─── Tam ekran görüntüleyici ─── */
body.has-lightbox { overflow: hidden; }
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: grid; grid-template-rows: 1fr auto; place-items: center;
  padding: clamp(1rem, 3vw, 2.5rem);
  opacity: 0; visibility: hidden;
  transition: opacity .45s ease, visibility .45s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__backdrop { position: absolute; inset: 0; background: rgba(22,19,16,.9); backdrop-filter: blur(14px) saturate(120%); -webkit-backdrop-filter: blur(14px) saturate(120%); }
.lightbox__figure {
  position: relative; z-index: 2; margin: 0; grid-row: 1;
  display: flex; flex-direction: column; align-items: center; gap: .9rem;
  opacity: 0; transform: translateY(14px) scale(.965);
  transition: opacity .55s var(--ease, cubic-bezier(.2,.7,.2,1)) .06s, transform .55s var(--ease, cubic-bezier(.2,.7,.2,1)) .06s;
}
.lightbox.is-open .lightbox__figure { opacity: 1; transform: none; }
.lightbox__img {
  max-width: min(1100px, 90vw); max-height: 74vh; width: auto; height: auto; object-fit: contain;
  border-radius: 10px; box-shadow: 0 30px 90px rgba(0,0,0,.5);
  transition: opacity .35s ease, transform .5s var(--ease, cubic-bezier(.2,.7,.2,1));
}
.lightbox__img.is-swapping { opacity: 0; transform: scale(.985); }
.lightbox__cap { color: rgba(251,248,241,.84); font-family: var(--font-serif); font-style: italic; font-size: 1.15rem; text-align: center; min-height: 1.3em; }
.lightbox__btn {
  position: absolute; z-index: 3; width: 48px; height: 48px; border-radius: 999px;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(251,248,241,.08); color: var(--paper, #fbf8f1);
  border: 1px solid rgba(251,248,241,.26);
  opacity: 0; transition: opacity .45s ease .18s, background .3s ease, border-color .3s ease, color .3s ease;
}
.lightbox.is-open .lightbox__btn { opacity: 1; }
.lightbox__btn:hover, .lightbox__btn:focus-visible { background: var(--paper, #fbf8f1); border-color: var(--paper, #fbf8f1); color: var(--mark, #1a1714); outline: none; }
.lightbox__close { top: clamp(.75rem, 3vw, 1.75rem); right: clamp(.75rem, 3vw, 1.75rem); }
.lightbox__prev, .lightbox__next { top: 50%; margin-top: -24px; }
.lightbox__prev { left: clamp(.5rem, 2vw, 1.5rem); }
.lightbox__next { right: clamp(.5rem, 2vw, 1.5rem); }
.lightbox__counter {
  position: absolute; z-index: 3; top: clamp(1.2rem, 3vw, 2.2rem); left: clamp(.9rem, 3vw, 1.9rem);
  color: rgba(251,248,241,.8); font-variant-numeric: tabular-nums; letter-spacing: .1em; font-size: .82rem;
}
.lightbox__strip {
  position: relative; z-index: 2; grid-row: 2; display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap;
  margin-top: 1rem; max-width: 92vw;
  opacity: 0; transform: translateY(12px);
  transition: opacity .5s ease .2s, transform .5s var(--ease, cubic-bezier(.2,.7,.2,1)) .2s;
}
.lightbox.is-open .lightbox__strip { opacity: 1; transform: none; }
.lightbox__stripthumb {
  width: 60px; height: 48px; border-radius: 8px; overflow: hidden; padding: 0; cursor: pointer;
  border: 1.5px solid transparent; opacity: .45; background: none;
  transition: opacity .3s ease, border-color .3s ease;
}
.lightbox__stripthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lightbox__stripthumb:hover { opacity: .85; }
.lightbox__stripthumb.is-active { opacity: 1; border-color: var(--mark-accent, #c4553a); }
@media (max-width: 560px) {
  .lightbox__prev, .lightbox__next { width: 42px; height: 42px; top: auto; bottom: 5.2rem; margin-top: 0; }
  .lightbox__stripthumb { width: 46px; height: 38px; }
}