/* ============================================================
   COMPONENTS — bölüm/bileşen stilleri.
   Önce yeniden kullanılabilir ortak parçalar (tek yerde tanımlı,
   her sayfada sınıf eklenerek "çağrılır"); ardından sayfaya özel bloklar:
   Header · Koleksiyon · Kart · Detay · Etkinlik · Atölye · Hakkımızda ·
   Kafe/Menü · Footer.
   ============================================================ */

/* ---- Yeniden kullanılabilir ortak parçalar (DRY — tek kaynak) ---- */

/* Ortalı başlık bloğu: overline + başlık + lead dikey, ortalanmış.
   Sayfaya özel genişlik/boşluk ilgili sınıfta (.intro, .soon, ...) kalır. */
.section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}

/* Bölüm başlığı tipografisi (h2 ölçeği) */
.section-title {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-regular);
}

/* Kahraman başlık tipografisi (sayfa h1 ölçeği) */
.hero-title {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-regular);
}

/* Soluk, ince, büyük gövde metni (giriş/açıklama paragrafları).
   Genişlik sınırı (max-width) ilgili sınıfta kalır. */
.lead {
  color: var(--color-text-muted);
  font-weight: var(--fw-light);
  font-size: var(--fs-lg);
}

/* Kapak görseli: alanı doldurur, kırpılır, yuvarlatılır.
   En-boy oranı (aspect-ratio) kullanıldığı yerde belirlenir. */
.media-cover {
  width: 100%;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--color-surface-sunken);
}

/* "Satıldı" rozeti — görsel üstünde; konum (top/left) kullanıldığı yerde. */
.badge-sold {
  position: absolute;
  padding: var(--space-1) var(--space-3);
  background-color: var(--color-overlay);
  color: var(--color-sold);
  font-size: var(--fs-overline);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  border-radius: var(--radius-sm);
}

/* ---- Site başlığı + menü ---- */
.site-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-6) var(--space-5);
  padding-inline: var(--container-pad);
}
.site-header__logo {
  width: 140px;
  height: auto;
}
.site-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3) var(--space-6);
}
.site-nav__link {
  font-size: var(--fs-overline);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.site-nav__link:hover {
  color: var(--color-text);
}
.site-nav__link[aria-current="page"] {
  color: var(--color-accent-deep);
  border-bottom-color: var(--color-accent);
}

/* ---- Koleksiyon girişi (anasayfa başlık bloğu) ---- */
/* Ortalama/dikey düzen .section-head'den; tipografi .hero-title/.lead'den gelir. */
.intro {
  max-width: var(--container-narrow);
  margin-inline: auto;
  /* Galeri ferahlığı: başlık bloğu ile eserler arasında daha geniş boşluk */
  padding-block: var(--space-8) var(--space-12);
}
.intro__lead {
  max-width: 50ch;
}

/* Boş durum / geçici not (örn. henüz etkinlik yokken) */
.placeholder-note {
  text-align: center;
  color: var(--color-text-faint);
  font-size: var(--fs-sm);
  padding-block: var(--space-10);
}

/* ---- "Yakında" sayfası (İletişim placeholder vb.) ---- */
.soon {
  padding-block: var(--space-12);
}
.soon__lead {
  max-width: 42ch;
}

/* ---- Ürün ızgarası (grid) — vitrin düzeni ----
   Mobilde 2 sütun, sıkı aralık (tek sütun kartları dev yapıp sayfayı uzatıyordu);
   ≥820px 3 geniş sütun + bol dikey boşluk: eserler nefes alsın. */
.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6) var(--space-3);
}
@media (min-width: 820px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-10) var(--space-8);
  }
}
.grid__item {
  min-width: 0;
}

/* ---- Anasayfa: atölye çağrısı (koleksiyon altı; düzen .section-head, tipografi .section-title/.lead) ---- */
.cta {
  max-width: var(--container-narrow);
  margin: var(--space-16) auto 0;
}
.cta__lead {
  max-width: 50ch;
}
.cta .button {
  margin-top: var(--space-2);
}

/* ---- Ürün kartı — "müze etiketi" görünümü ----
   Keskin köşeli görsel + sola hizalı küçük künye (kategori üstte, overline gibi). */
.card {
  display: flex;
  flex-direction: column;
}
.card__link {
  display: flex;
  flex-direction: column;
  color: inherit;
}
.card__media {
  position: relative;
  /* Kare kutu + cover: her kart aynı boy, fotoğraf kutuyu doldurur. Ürün fotoğrafları
     4:3 yatay çekiliyor; yanlardan %12,5 kırpılır, nesne ortada olduğu için sorun olmaz.
     (Eski 3:4 + contain düzeni yatay fotoğrafın altında ve üstünde koca boşluk bırakıyordu.) */
  aspect-ratio: 1 / 1;
  background-color: var(--color-surface-sunken); /* görsel yüklenene kadar yer tutucu */
  overflow: hidden;
}
.card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform var(--transition-base), filter var(--transition-base);
}
.card:hover .card__img {
  transform: scale(1.03);
  filter: brightness(1.03);
}
.card__badge {
  top: var(--space-3);
  left: var(--space-3);
}
.card__body {
  text-align: left;
  padding-top: var(--space-3);
}
.card__category {
  font-size: var(--fs-overline);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--color-text-faint);
}
.card__title {
  margin-top: var(--space-1);
  font-size: var(--fs-base); /* dar kartta (mobil 2 sütun) taşmasın */
  font-weight: var(--fw-medium);
  transition: color var(--transition-fast);
}
@media (min-width: 820px) {
  .card__title {
    font-size: var(--fs-lg);
  }
}
.card:hover .card__title {
  color: var(--color-accent-deep);
}
.card__price {
  margin-top: var(--space-1);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}
.card__price--muted {
  color: var(--color-text-faint);
}

/* ---- Parça detay sayfası ---- */
.detail {
  padding-top: var(--space-2);
}
.detail__back {
  display: inline-block;
  margin-bottom: var(--space-6);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  transition: color var(--transition-fast);
}
.detail__back:hover {
  color: var(--color-accent-deep);
}
.detail__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}
@media (min-width: 900px) {
  .detail__top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-10);
    align-items: start;
  }
}
.detail__media {
  position: relative;
  /* Şeffaf ürün görseli sayfa zemininde yüzer (kutu yok) */
  background-color: transparent;
  overflow: hidden;
}
.detail__img {
  width: 100%;
  height: auto;
}
.detail__badge {
  top: var(--space-4);
  left: var(--space-4);
}

/* 3D görüntüleyici (detay) */
.model-toggle {
  position: absolute;
  bottom: var(--space-3);
  /* Sol-alt: model-viewer'ın kendi "AR'da Gör" butonu sağ-altta; çakışmayı önler. */
  left: var(--space-3);
  z-index: 2;
  padding: var(--space-2) var(--space-4);
  background-color: var(--color-overlay);
  color: var(--color-accent-deep);
  font-family: var(--font-body);
  font-size: var(--fs-overline);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: color var(--transition-fast);
}
.model-toggle:hover {
  color: var(--color-accent);
}
.model-host {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* 3B arka planı site zeminiyle aynı (kırık beyaz) — bütünlük için */
  background-color: var(--color-bg);
}
/* model-viewer'ın kendi tuvali şeffaf; arka plan host'tan gelsin */
.model-host model-viewer {
  background-color: var(--color-bg);
}
/* 3B model altı not (referans/doku uyarısı) — yalnızca 3B'li ürünlerde */
.model-note {
  margin-top: var(--space-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--color-text-faint);
}

.detail__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
@media (min-width: 900px) {
  .detail__info {
    position: sticky;
    top: var(--space-6);
  }
}
.detail__price {
  font-size: var(--fs-lg);
  color: var(--color-text);
}
.detail__price--sold {
  color: var(--color-sold);
}
.detail__summary {
  line-height: var(--lh-snug);
}
.detail__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-block: var(--space-5);
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}
.detail__note {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}
.detail__more-contact {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-line-strong);
  padding-bottom: 2px;
  transition: color var(--transition-fast);
}
.detail__more-contact:hover {
  color: var(--color-accent-deep);
}
.specs {
  margin-top: var(--space-2);
}
/* Ortalı dar varyant (etkinlik detayında teknik liste) */
.specs--center {
  max-width: var(--container-narrow);
  margin-inline: auto;
}
.specs__row {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: var(--space-4);
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--color-line);
  font-size: var(--fs-sm);
}
.specs__label {
  color: var(--color-text-faint);
}
.specs__value {
  color: var(--color-text);
}
.story {
  max-width: var(--container-narrow);
  margin-inline: auto;
  margin-top: var(--space-12);
  text-align: center;
}
.story__title {
  margin-top: var(--space-1);
  margin-bottom: var(--space-6);
}
.story .prose {
  text-align: left;
}

/* ---- Buton: ghost (çerçeveli) varyant ---- */
.button--ghost {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-line-strong);
}
.button--ghost:hover {
  background: transparent;
  color: var(--color-accent-deep);
  border-color: var(--color-accent);
}

/* ---- Etkinlik takvimi (atölye listesi) ---- */
.events {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--color-line);
}
.events__item {
  border-bottom: 1px solid var(--color-line);
}
.event {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-5);
  align-items: center;
  padding-block: var(--space-5);
  color: inherit;
}
.event:hover .event__title {
  color: var(--color-accent-deep);
}
.event__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 88px;
  padding: var(--space-3) var(--space-2);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  text-align: center;
  line-height: 1.2;
}
.event__weekday {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}
.event__day {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: var(--fw-medium);
}
.event__monthyear {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}
.event__title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-medium);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  transition: color var(--transition-fast);
}
.event__badge {
  font-size: var(--fs-overline);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--color-sold);
  border: 1px solid var(--color-line-strong);
  padding: 0.1rem 0.5rem;
  border-radius: var(--radius-sm);
  font-weight: var(--fw-medium);
}
.event__recur {
  font-size: var(--fs-overline);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-accent-deep);
  background: var(--color-accent-soft);
  padding: 0.1rem 0.5rem;
  border-radius: var(--radius-sm);
  font-weight: var(--fw-medium);
}
.event__location {
  margin-top: var(--space-1);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}
.event__desc {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  font-weight: var(--fw-light);
  max-width: 60ch;
}
.event__cta {
  white-space: nowrap;
}
@media (max-width: 700px) {
  .event {
    grid-template-columns: auto 1fr;
    gap: var(--space-4);
  }
  .event__cta {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

/* ---- Etkinlik detay: fotoğraf + açıklama ---- */
.event-photo {
  max-width: 900px;
  margin: var(--space-10) auto 0;
}
.event-photo img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  background: var(--color-surface-sunken);
}
.event-desc {
  max-width: var(--container-narrow);
  margin: var(--space-8) auto 0;
}

/* ---- Atölye tanıtım bölümü (atölyemiz) ---- */
.about {
  margin-top: var(--space-16);
}
.about__intro {
  max-width: var(--container-narrow);
  margin-inline: auto;
}
.about__lead {
  max-width: 54ch;
}
.about__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8) var(--space-6);
  margin-top: var(--space-8);
}
@media (min-width: 860px) {
  .about__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.about__item img {
  aspect-ratio: 4 / 3; /* görsel stilinin geri kalanı .media-cover'dan */
}
.about__item figcaption h3 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-medium);
  margin-top: var(--space-4);
}
.about__item figcaption p {
  margin-top: var(--space-1);
  color: var(--color-text-muted);
  font-weight: var(--fw-light);
}

/* ---- Atölye: sık sorulanlar (dl; soru başlık yazısıyla, cevap soluk gövde) ---- */
.faq {
  max-width: var(--container-narrow);
  margin: var(--space-16) auto 0;
}
.faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin-top: var(--space-8);
}
.faq__item {
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-line);
}
.faq__item dt {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-medium);
}
.faq__item dd {
  margin: var(--space-2) 0 0;
  color: var(--color-text-muted);
  font-weight: var(--fw-light);
}

/* ---- Hakkımızda: geniş tanıtım görseli (wide) ---- */
.story-hero {
  margin-top: var(--space-8);
}
.story-hero img {
  aspect-ratio: 4 / 3; /* görsel stilinin geri kalanı .media-cover'dan */
}
@media (min-width: 720px) {
  .story-hero img {
    aspect-ratio: 16 / 9; /* masaüstünde geniş bant */
  }
}

/* ---- Kafe / Menü: menü paneli (fotoğraf zeminli geniş dikdörtgen, ortada buton) ----
   Ortalama/dikey düzen .section-head'den; tipografi .hero-title/.lead'den.
   Zemin: assets/kafe/menu-hero.webp; metnin arkasında yumuşak açık örtü (okunurluk). */
.menu-hero {
  position: relative;
  justify-content: center;
  min-height: clamp(300px, 42vw, 560px);
  margin-top: var(--space-8);
  padding: clamp(var(--space-10), 8vw, var(--space-16)) var(--space-6);
  background: var(--color-surface-sunken) url("../kafe/menu-hero.webp") center / cover no-repeat;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.menu-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 42% 55% at 50% 50%, var(--color-overlay-soft) 0%, transparent 100%);
  pointer-events: none;
}
.menu-hero > * {
  position: relative;
}
.menu-hero__button {
  margin-top: var(--space-4);
}

/* ---- Kafe / Menü: kafeden kareler (fotoğraf ızgarası) ----
   Mobilde 2, geniş ekranda 3 sütun; görsel stili .media-cover'dan. */
.kafe-gallery {
  margin-top: var(--space-8);
  padding-bottom: var(--space-16);
}
.kafe-gallery__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 860px) {
  .kafe-gallery__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
  }
}
.kafe-gallery__grid img {
  aspect-ratio: 3 / 4; /* görsel stilinin geri kalanı .media-cover'dan */
  height: auto;
}

/* ---- Hakkımızda: hikâye metni (ortalı paragraflar; renk/boyut .lead'den) ---- */
.story__text {
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 60ch;
}

/* ---- İletişim: bilgiler + form ---- */
.contact {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  margin-top: var(--space-10);
}
@media (min-width: 860px) {
  .contact {
    grid-template-columns: 4fr 6fr;
    gap: var(--space-12);
  }
}
.contact__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.contact__list dt {
  margin-top: var(--space-4);
  color: var(--color-text-faint);
}
.contact__list dt:first-child {
  margin-top: 0;
}
.contact__list dd {
  color: var(--color-text);
  font-weight: var(--fw-light);
}
.contact__list a {
  border-bottom: 1px solid var(--color-accent);
  padding-bottom: 1px;
  transition: color var(--transition-fast);
}
.contact__list a:hover {
  color: var(--color-accent-deep);
}

/* Form — alanlar */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.field__label {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}
.field__opt {
  color: var(--color-text-faint);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-fast);
}
.field textarea {
  resize: vertical;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
  border-color: var(--color-accent);
}
.field__error {
  font-size: var(--fs-sm);
  color: var(--color-danger);
}

/* Bildirim kutuları (form üstü) */
.form-alert {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-4);
  font-size: var(--fs-sm);
}
.form-alert--ok {
  background: var(--color-ok-bg);
  color: var(--color-ok);
}
.form-alert--error {
  background: var(--color-danger-bg);
  color: var(--color-danger-strong);
}

.contact-form__kvkk {
  font-size: var(--fs-sm);
  color: var(--color-text-faint);
}

/* Honeypot — ekranda ve okuyucuda gizli, yalnızca botlar görür */
.contact-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Konum haritası (Google Maps iframe) — tam genişlik, responsive */
.map {
  margin-top: var(--space-10);
  padding-bottom: var(--space-16);
}
.map iframe {
  display: block;
  width: 100%;
  height: clamp(320px, 42vh, 460px);
  border: 0;
  border-radius: var(--radius-sm);
}

/* ---- Site altı (footer) ---- */
.footer {
  margin-top: var(--space-16);
  padding-block: var(--space-12);
  border-top: 1px solid var(--color-line);
  text-align: center;
}
/* .footer__inner düzeni .section-head'den gelir (markup'ta sınıf eklendi). */
.footer__title {
  max-width: 18ch;
}
.footer__lead {
  max-width: 46ch;
  color: var(--color-text-muted);
  font-weight: var(--fw-light);
}
.footer__contacts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-6);
  margin-top: var(--space-4);
}
.footer__contacts a {
  color: var(--color-text);
  border-bottom: 1px solid var(--color-accent);
  padding-bottom: 2px;
  transition: color var(--transition-fast);
}
.footer__contacts a:hover {
  color: var(--color-accent-deep);
}
.footer__address {
  margin-top: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}
.footer__copy {
  margin-top: var(--space-6);
  font-size: var(--fs-sm);
  color: var(--color-text-faint);
}

/* ---- Etkinlik detayı: kayıt formu (dar, ortalı; form stili .contact-form/.field'dan) ---- */
.event-register {
  max-width: 560px;
  margin: var(--space-12) auto 0;
  padding-bottom: var(--space-16);
}
.event-register .contact-form,
.event-register .form-alert,
.event-register .placeholder-note {
  margin-top: var(--space-6);
}
.event-register__lead {
  max-width: 44ch;
}