/* =========================================================================
   sille.tr — Bileşenler: butonlar, kartlar, hero, zaman çizelgesi, galeri,
   form, modal, ulaşım kartları
   ========================================================================= */

/* --- Butonlar ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 48px;
  padding: var(--sp-3) var(--sp-6);
  border: 1px solid transparent;
  border-radius: var(--r-full);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.005em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--d-base) var(--e-out),
              color var(--d-base) var(--e-out),
              border-color var(--d-base) var(--e-out),
              transform var(--d-fast) var(--e-soft),
              box-shadow var(--d-base) var(--e-out);
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 1.125rem; height: 1.125rem; flex: none; }

.btn--primary {
  background: var(--c-primary);
  color: #fff;
  box-shadow: 0 6px 18px rgba(124, 74, 45, .22);
}
.btn--primary:hover { background: var(--c-primary-dark); color: #fff; box-shadow: 0 10px 26px rgba(124, 74, 45, .3); }

.btn--accent {
  background: var(--c-accent-fill);
  color: #fff;
  box-shadow: 0 6px 18px rgba(181, 101, 29, .24);
}
.btn--accent:hover { background: var(--c-accent); color: #fff; }

.btn--ghost {
  background: transparent;
  color: var(--c-fg);
  border-color: var(--c-border-strong);
}
.btn--ghost:hover { background: var(--c-bg-alt); border-color: var(--c-fg-muted); color: var(--c-fg); }

.btn--on-dark {
  background: rgba(255,255,255,.1);
  color: #fff;
  border-color: rgba(255,255,255,.4);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.btn--on-dark:hover { background: rgba(255,255,255,.2); color: #fff; }

.btn--sm { min-height: 40px; padding: var(--sp-2) var(--sp-4); font-size: var(--fs-xs); }
.btn--block { width: 100%; }

/* Metin bağlantısı — ok animasyonlu */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 600;
  font-size: var(--fs-sm);
  text-decoration: none;
  color: var(--c-accent);
}
.link-arrow svg {
  width: 1.05rem; height: 1.05rem;
  transition: transform var(--d-base) var(--e-soft);
}
.link-arrow:hover { color: var(--c-primary-dark); }
.link-arrow:hover svg { transform: translateX(4px); }

/* --- Hero ---------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: min(100svh, 60rem);
  display: grid;
  align-items: end;
  overflow: hidden;
  isolation: isolate;
  background: var(--c-bg-deep);
}
.hero__media {
  position: absolute;
  inset: -8% 0 -8% 0;   /* parallax payı */
  z-index: -2;
  will-change: transform;
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom, rgba(42,35,28,.62) 0%, rgba(42,35,28,.20) 34%, rgba(42,35,28,.55) 72%, rgba(42,35,28,.88) 100%);
}
.hero__inner {
  position: relative;
  padding-block: 9rem var(--sp-8);
  color: var(--c-fg-inverse);
}
.hero__title {
  font-size: var(--fs-hero);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: #fff;
  max-width: 16ch;
}
.hero__title em {
  font-style: italic;
  color: var(--c-primary-soft);
}
.hero__sub {
  margin-top: var(--sp-5);
  max-width: 52ch;
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  color: rgba(247,242,234,.9);
}
.hero__actions {
  margin-top: var(--sp-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}
.hero__meta {
  margin-top: var(--sp-8);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5) var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255,255,255,.2);
}
.hero__meta-item { display: flex; flex-direction: column; gap: 2px; }
.hero__meta-value {
  font-family: var(--ff-display);
  font-size: var(--fs-xl);
  color: #fff;
  line-height: 1;
}
.hero__meta-label {
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: rgba(247,242,234,.72);
}

.hero__scroll {
  position: absolute;
  right: var(--gutter);
  bottom: var(--sp-6);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  color: rgba(247,242,234,.8);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  text-decoration: none;
  writing-mode: vertical-rl;
}
.hero__scroll::after {
  content: "";
  width: 1px; height: 3rem;
  background: linear-gradient(to bottom, currentColor, transparent);
  animation: scroll-hint 2.2s var(--e-in-out) infinite;
}
@media (max-width: 720px) { .hero__scroll { display: none; } }

/* Sayfa başlığı (iç sayfalar) */
.page-hero {
  position: relative;
  min-height: 26rem;
  display: grid;
  align-items: end;
  overflow: hidden;
  isolation: isolate;
  background: var(--c-bg-deep);
}
.page-hero__media { position: absolute; inset: -6% 0; z-index: -2; will-change: transform; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(42,35,28,.72) 0%, rgba(42,35,28,.34) 45%, rgba(42,35,28,.82) 100%);
}
.page-hero__inner { padding-block: 8rem var(--sp-7); color: #fff; position: relative; }
.page-hero__title { color: #fff; font-weight: 500; max-width: 18ch; }
.page-hero__sub {
  margin-top: var(--sp-4);
  max-width: 56ch;
  color: rgba(247,242,234,.88);
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
}
.breadcrumb {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  align-items: center;
  font-size: var(--fs-xs);
  color: rgba(247,242,234,.7);
  margin-bottom: var(--sp-4);
  list-style: none; padding: 0;
}
.breadcrumb li { margin: 0; }
.breadcrumb li + li::before { content: "/"; margin-right: var(--sp-2); opacity: .5; }
.breadcrumb a { color: inherit; text-decoration: none; }
.breadcrumb a:hover { color: #fff; text-decoration: underline; }

/* --- İstatistik şeridi --------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
}
@media (max-width: 800px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stat {
  padding: var(--sp-5);
  border-left: 2px solid var(--c-border-strong);
  transition: border-color var(--d-base) var(--e-out);
}
.stat:hover { border-left-color: var(--c-accent-fill); }
.stat__value {
  font-family: var(--ff-display);
  font-size: var(--fs-2xl);
  line-height: 1;
  color: var(--c-primary);
  display: flex;
  align-items: baseline;
  gap: 0.15em;
}
.stat__unit { font-size: 0.45em; color: var(--c-fg-muted); font-family: var(--ff-body); font-weight: 600; }
.stat__label {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--c-fg-muted);
  line-height: var(--lh-snug);
}

/* --- Bento / özellik ızgarası -------------------------------------------- */
.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 15rem;
  gap: var(--sp-4);
}
.bento__item {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  isolation: isolate;
  text-decoration: none;
  color: #fff;
  display: flex;
  align-items: flex-end;
  background: var(--c-bg-deep);
  box-shadow: var(--sh-md);
}
.bento__item--tall { grid-row: span 2; }
.bento__item--wide { grid-column: span 2; }
.bento__item img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--d-slower) var(--e-soft), filter var(--d-slow) var(--e-out);
}
.bento__item::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(35,28,22,.9) 0%, rgba(35,28,22,.42) 45%, rgba(35,28,22,.06) 100%);
  transition: opacity var(--d-slow);
}
.bento__item:hover img { transform: scale(1.07); }
.bento__body { padding: var(--sp-5); position: relative; }
.bento__kicker {
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-primary-soft);
  display: block;
  margin-bottom: var(--sp-2);
}
.bento__title {
  font-family: var(--ff-display);
  font-size: var(--fs-lg);
  color: #fff;
  line-height: var(--lh-snug);
}
.bento__desc {
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  color: rgba(247,242,234,.82);
  line-height: var(--lh-snug);
  max-width: 34ch;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity var(--d-slow) var(--e-out), max-height var(--d-slow) var(--e-out);
}
.bento__item:hover .bento__desc,
.bento__item:focus-visible .bento__desc { opacity: 1; max-height: 6rem; }

@media (max-width: 900px) {
  .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 13rem; }
  .bento__item--wide { grid-column: span 2; }
  .bento__item--tall { grid-row: span 1; }
  .bento__desc { opacity: 1; max-height: 6rem; }
}
@media (max-width: 560px) {
  .bento { grid-template-columns: 1fr; }
  .bento__item--wide { grid-column: span 1; }
}

/* --- Yer kartları (gezilecek yerler) ------------------------------------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-6);
}
.chip {
  appearance: none;
  border: 1px solid var(--c-border-strong);
  background: transparent;
  color: var(--c-fg-muted);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 500;
  min-height: 44px;
  padding: var(--sp-2) var(--sp-5);
  border-radius: var(--r-full);
  cursor: pointer;
  transition: all var(--d-fast) var(--e-out);
}
.chip:hover { border-color: var(--c-fg-muted); color: var(--c-fg); background: var(--c-surface); }
.chip[aria-pressed="true"] {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  gap: var(--sp-5);
}
.place-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  text-align: left;
  font: inherit;
  color: inherit;
  padding: 0;
  cursor: pointer;
  transition: transform var(--d-base) var(--e-soft),
              box-shadow var(--d-base) var(--e-out),
              border-color var(--d-base) var(--e-out);
}
.place-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh-lg);
  border-color: var(--c-border-strong);
}
.place-card.is-hidden { display: none; }
/* <button> içindeki <span>'lar satır içi gelir; aspect-ratio çalışsın diye blok. */
.place-card__media {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--c-bg-alt);
}
.place-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--d-slower) var(--e-soft);
}
.place-card:hover .place-card__media img { transform: scale(1.06); }
.place-card__tag {
  position: absolute;
  top: var(--sp-3); left: var(--sp-3);
  background: var(--c-glass);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--c-primary-dark);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border-radius: var(--r-full);
}
.place-card__body { padding: var(--sp-5); display: flex; flex-direction: column; flex: 1; }
/* Kart bir <button> olduğu için başlık <span>; görünüm başlık gibi, semantik
   başlık ise detay penceresindeki <h3>'te. */
.place-card__title {
  display: block;
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}
.place-card__era {
  display: block;
  font-size: var(--fs-xs);
  color: var(--c-accent);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  margin-top: var(--sp-2);
}
.place-card__text {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--c-fg-muted);
  line-height: var(--lh-normal);
  flex: 1;
}
.place-card__more {
  margin-top: var(--sp-4);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-primary);
}
.place-card__more svg { width: 1rem; height: 1rem; transition: transform var(--d-base) var(--e-soft); }
.place-card:hover .place-card__more svg { transform: translateX(4px); }

/* --- Zaman çizelgesi ----------------------------------------------------- */
.timeline { position: relative; padding-left: 0; list-style: none; margin: 0; }
.timeline::before {
  content: "";
  position: absolute;
  left: 7.5rem;
  top: 0.75rem; bottom: 0.75rem;
  width: 2px;
  background: var(--c-border);
}
.timeline__progress {
  position: absolute;
  left: 7.5rem;
  top: 0.75rem;
  width: 2px;
  height: 0;
  background: linear-gradient(to bottom, var(--c-primary), var(--c-accent-fill));
  transform-origin: top;
}
.timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: var(--sp-6);
  padding-block: var(--sp-5);
  margin: 0;
}
.timeline__era {
  font-family: var(--ff-display);
  font-size: var(--fs-md);
  color: var(--c-primary);
  text-align: right;
  padding-right: var(--sp-5);
  line-height: var(--lh-snug);
  position: relative;
}
.timeline__era::after {
  content: "";
  position: absolute;
  right: -0.4375rem;
  top: 0.45em;
  width: 0.875rem; height: 0.875rem;
  border-radius: 50%;
  background: var(--c-bg);
  border: 2px solid var(--c-border-strong);
  transition: border-color var(--d-base), background var(--d-base), transform var(--d-base) var(--e-soft);
}
.timeline__item.is-active .timeline__era::after {
  border-color: var(--c-accent-fill);
  background: var(--c-accent-fill);
  transform: scale(1.25);
}
.timeline__body { padding-left: var(--sp-2); }
.timeline__title { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.timeline__text { font-size: var(--fs-sm); color: var(--c-fg-muted); line-height: var(--lh-loose); max-width: 58ch; }

@media (max-width: 680px) {
  .timeline::before, .timeline__progress { left: 0.4375rem; }
  .timeline__item { grid-template-columns: 1fr; gap: var(--sp-2); padding-left: var(--sp-6); }
  .timeline__era { text-align: left; padding-right: 0; }
  .timeline__era::after { right: auto; left: -1.5rem; }
}

/* --- Alıntı -------------------------------------------------------------- */
.pullquote {
  border-left: 3px solid var(--c-accent-fill);
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-6);
  margin: var(--sp-7) 0;
  font-family: var(--ff-display);
  font-size: var(--fs-xl);
  font-style: italic;
  line-height: var(--lh-snug);
  color: var(--c-primary-dark);
}
.pullquote cite {
  display: block;
  margin-top: var(--sp-4);
  font-family: var(--ff-body);
  font-style: normal;
  font-size: var(--fs-sm);
  color: var(--c-fg-muted);
  letter-spacing: var(--ls-wide);
}

/* --- Bilgi kartı / özellik listesi --------------------------------------- */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--sp-5);
}
.info-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  transition: transform var(--d-base) var(--e-soft), box-shadow var(--d-base) var(--e-out);
}
.info-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.info-card__icon {
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--c-primary-wash);
  color: var(--c-primary-dark);
  margin-bottom: var(--sp-4);
}
.info-card__icon svg { width: 1.375rem; height: 1.375rem; }
.info-card--green .info-card__icon { background: var(--c-secondary-wash); color: var(--c-secondary); }
.info-card--amber .info-card__icon { background: var(--c-accent-wash); color: var(--c-accent); }
.info-card h3 { font-size: var(--fs-md); font-family: var(--ff-body); font-weight: 650; letter-spacing: 0; }
.info-card p { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--c-fg-muted); line-height: var(--lh-normal); }

/* --- Bölünmüş içerik (metin + görsel) ------------------------------------ */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.split--reverse .split__media { order: -1; }
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
}
.split__media {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-lg);
  aspect-ratio: 4 / 3;
}
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split__media--tall { aspect-ratio: 3 / 4; }
.split__caption {
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--c-fg-muted);
}

/* --- Galeri -------------------------------------------------------------- */
.gallery {
  columns: 3;
  column-gap: var(--sp-4);
}
@media (max-width: 900px) { .gallery { columns: 2; } }
@media (max-width: 540px) { .gallery { columns: 1; } }
.gallery__item {
  break-inside: avoid;
  margin-bottom: var(--sp-4);
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  border-radius: var(--r-md);
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--sh-sm);
  transition: transform var(--d-base) var(--e-soft), box-shadow var(--d-base) var(--e-out);
}
.gallery__item:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
.gallery__item img { width: 100%; height: auto; transition: transform var(--d-slower) var(--e-soft); }
.gallery__item:hover img { transform: scale(1.04); }
.gallery__cap {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--sp-6) var(--sp-4) var(--sp-3);
  background: linear-gradient(to top, rgba(35,28,22,.88), transparent);
  color: #fff;
  font-size: var(--fs-xs);
  text-align: left;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--d-base) var(--e-out), transform var(--d-base) var(--e-out);
}
.gallery__item:hover .gallery__cap,
.gallery__item:focus-visible .gallery__cap { opacity: 1; transform: translateY(0); }
.gallery__item.is-hidden { display: none; }

/* --- Işık kutusu (lightbox) ---------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  background: rgba(24, 19, 15, .94);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: var(--sp-5);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--d-base) var(--e-out), visibility var(--d-base);
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__figure { margin: 0; max-width: min(96vw, 76rem); max-height: 92vh; display: flex; flex-direction: column; }
.lightbox__figure img {
  max-width: 100%;
  max-height: 80vh;
  width: auto;
  object-fit: contain;
  border-radius: var(--r-sm);
  transform: scale(.96);
  transition: transform var(--d-slow) var(--e-soft);
}
.lightbox.is-open .lightbox__figure img { transform: scale(1); }
.lightbox figcaption {
  color: #D7CCBD;
  font-size: var(--fs-sm);
  margin-top: var(--sp-4);
  text-align: center;
  max-width: 60ch;
  margin-inline: auto;
}
.lightbox figcaption small { display: block; margin-top: var(--sp-2); color: #948573; font-size: var(--fs-2xs); }
.lightbox figcaption a { color: #B9A991; }
.lightbox__btn {
  position: absolute;
  appearance: none;
  border: 1px solid rgba(255,255,255,.24);
  background: rgba(255,255,255,.08);
  color: #fff;
  width: 52px; height: 52px;
  border-radius: var(--r-full);
  display: grid; place-items: center;
  cursor: pointer;
  transition: background var(--d-fast);
}
.lightbox__btn:hover { background: rgba(255,255,255,.2); }
.lightbox__btn svg { width: 1.35rem; height: 1.35rem; }
.lightbox__close { top: var(--sp-5); right: var(--sp-5); }
.lightbox__prev { left: var(--sp-4); top: 50%; transform: translateY(-50%); }
.lightbox__next { right: var(--sp-4); top: 50%; transform: translateY(-50%); }
@media (max-width: 640px) {
  .lightbox__prev { left: var(--sp-3); }
  .lightbox__next { right: var(--sp-3); }
}

/* --- Modal (yer detayı) -------------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--sp-4);
  background: var(--c-scrim);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--d-base) var(--e-out), visibility var(--d-base);
}
.modal.is-open { opacity: 1; visibility: visible; }
.modal__panel {
  background: var(--c-surface);
  border-radius: var(--r-lg);
  max-width: 46rem;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: var(--sh-lg);
  transform: translateY(18px) scale(.98);
  transition: transform var(--d-slow) var(--e-soft);
}
.modal.is-open .modal__panel { transform: translateY(0) scale(1); }
.modal__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--c-bg-alt); }
.modal__media img { width: 100%; height: 100%; object-fit: cover; }
.modal__close {
  position: absolute;
  top: var(--sp-3); right: var(--sp-3);
  width: 44px; height: 44px;
  border-radius: var(--r-full);
  border: 0;
  background: var(--c-glass);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--c-fg);
  display: grid; place-items: center;
  cursor: pointer;
  transition: background var(--d-fast);
}
.modal__close:hover { background: #fff; }
.modal__close svg { width: 1.25rem; height: 1.25rem; }
.modal__body { padding: var(--sp-6); }
.modal__body h3 { font-size: var(--fs-2xl); }
.modal__era {
  display: inline-block;
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-accent);
}
.modal__text { margin-top: var(--sp-4); color: var(--c-fg-muted); line-height: var(--lh-loose); }
.modal__facts {
  margin-top: var(--sp-5);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--sp-4);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-border);
}
.modal__fact dt {
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-fg-muted);
  margin-bottom: 2px;
}
.modal__fact dd { margin: 0; font-size: var(--fs-sm); font-weight: 600; }
.modal__actions { margin-top: var(--sp-6); display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* --- Ulaşım -------------------------------------------------------------- */
.route-list { display: grid; gap: var(--sp-4); }
.route {
  display: grid;
  grid-template-columns: 3.5rem 1fr auto;
  gap: var(--sp-5);
  align-items: start;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  transition: border-color var(--d-base), box-shadow var(--d-base), transform var(--d-base) var(--e-soft);
}
.route:hover { border-color: var(--c-border-strong); box-shadow: var(--sh-md); transform: translateY(-2px); }
.route__icon {
  width: 3.5rem; height: 3.5rem;
  border-radius: var(--r-sm);
  display: grid; place-items: center;
  background: var(--c-bg-alt);
  color: var(--c-primary);
}
.route__icon svg { width: 1.5rem; height: 1.5rem; }
.route__title { font-size: var(--fs-md); font-family: var(--ff-body); font-weight: 650; letter-spacing: 0; }
.route__desc { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--c-fg-muted); line-height: var(--lh-normal); }
.route__lines { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.line-badge {
  display: inline-block;
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 0.25rem 0.6rem;
  border-radius: var(--r-xs);
  background: var(--c-primary-wash);
  color: var(--c-primary-dark);
}
.route__meta { text-align: right; }
.route__time {
  font-family: var(--ff-display);
  font-size: var(--fs-lg);
  color: var(--c-primary);
  line-height: 1;
  white-space: nowrap;
}
.route__time-label { font-size: var(--fs-2xs); color: var(--c-fg-muted); text-transform: uppercase; letter-spacing: var(--ls-wide); }
@media (max-width: 640px) {
  .route { grid-template-columns: 3rem 1fr; }
  .route__meta { grid-column: 2; text-align: left; margin-top: var(--sp-2); }
  .route__time { font-size: var(--fs-md); }
}

.map-frame {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--c-border);
  box-shadow: var(--sh-md);
  aspect-ratio: 16 / 9;
  background: var(--c-bg-alt);
}
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 640px) { .map-frame { aspect-ratio: 4 / 3; } }

.notice {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  background: var(--c-accent-wash);
  border: 1px solid #EBD5B8;
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}
.notice svg { width: 1.25rem; height: 1.25rem; flex: none; color: var(--c-accent); margin-top: 2px; }
.notice a { color: var(--c-accent); font-weight: 600; }

/* --- Formlar ------------------------------------------------------------- */
.form { display: grid; gap: var(--sp-5); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
@media (max-width: 640px) { .form__row { grid-template-columns: 1fr; } }

.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-fg);
}
.field label .req { color: var(--c-danger); margin-left: 2px; }
.field__hint { font-size: var(--fs-xs); color: var(--c-fg-muted); }
.field input,
.field select,
.field textarea {
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--c-fg);
  background: var(--c-surface);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-sm);
  padding: 0.8125rem var(--sp-4);
  min-height: 48px;
  width: 100%;
  transition: border-color var(--d-fast) var(--e-out), box-shadow var(--d-fast) var(--e-out);
}
.field textarea { min-height: 9rem; resize: vertical; line-height: var(--lh-normal); }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6055' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-4) center;
  background-size: 1.125rem;
  padding-right: var(--sp-8);
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--c-fg-muted); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(124, 74, 45, .16);
}
.field.has-error input,
.field.has-error textarea,
.field.has-error select { border-color: var(--c-danger); }
.field.has-error input:focus,
.field.has-error textarea:focus { box-shadow: 0 0 0 3px rgba(163, 44, 34, .16); }
.field__error {
  display: none;
  font-size: var(--fs-xs);
  color: var(--c-danger);
  font-weight: 500;
}
.field.has-error .field__error { display: block; }

.checkbox {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-3);
  align-items: start;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--c-fg-muted);
  cursor: pointer;
}
.checkbox input {
  appearance: none;
  width: 22px; height: 22px;
  min-height: 0;
  margin-top: 1px;
  border: 1.5px solid var(--c-border-strong);
  border-radius: var(--r-xs);
  background: var(--c-surface);
  cursor: pointer;
  flex: none;
  transition: background var(--d-fast), border-color var(--d-fast);
}
.checkbox input:checked {
  background: var(--c-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 15px no-repeat;
  border-color: var(--c-primary);
}
.checkbox a { font-weight: 600; }

/* bal küpü — botlar için görünmez tuzak alan */
.hp-field {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form__status {
  display: none;
  gap: var(--sp-3);
  align-items: flex-start;
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}
.form__status.is-visible { display: flex; }
.form__status--success { background: #EAF1E7; border: 1px solid #C6D9BF; color: #2F5A2B; }
.form__status--error   { background: #FBECEA; border: 1px solid #EFC9C4; color: #8A241C; }
.form__status svg { width: 1.25rem; height: 1.25rem; flex: none; margin-top: 2px; }

.btn[data-loading="true"] { pointer-events: none; opacity: .75; }
.btn__spinner { display: none; width: 1.05rem; height: 1.05rem; }
.btn[data-loading="true"] .btn__spinner { display: block; animation: spin .8s linear infinite; }
.btn[data-loading="true"] .btn__icon { display: none; }

/* --- İletişim yan sütunu ------------------------------------------------- */
.contact-layout {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 900px) { .contact-layout { grid-template-columns: 1fr; } }

.contact-panel {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  box-shadow: var(--sh-sm);
}
.contact-list { list-style: none; margin: 0; padding: 0; }
.contact-list li {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: var(--sp-4);
  align-items: start;
  padding-block: var(--sp-4);
  margin: 0;
  border-bottom: 1px solid var(--c-border);
}
.contact-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.contact-list li:first-child { padding-top: 0; }
.contact-list__icon {
  width: 2.5rem; height: 2.5rem;
  border-radius: var(--r-sm);
  display: grid; place-items: center;
  background: var(--c-bg-alt);
  color: var(--c-primary);
}
.contact-list__icon svg { width: 1.125rem; height: 1.125rem; }
.contact-list dt {
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-fg-muted);
}
.contact-list dd { margin: 2px 0 0; font-size: var(--fs-sm); font-weight: 600; }
.contact-list dd a { text-decoration: none; }
.contact-list dd a:hover { text-decoration: underline; }

/* --- Kaynakça / künye ---------------------------------------------------- */
.source-list {
  list-style: none;
  margin: 0; padding: 0;
  columns: 2;
  column-gap: var(--sp-6);
  font-size: var(--fs-xs);
  color: var(--c-fg-muted);
}
@media (max-width: 640px) { .source-list { columns: 1; } }
.source-list li { break-inside: avoid; margin-bottom: var(--sp-3); line-height: var(--lh-normal); }

/* --- CTA şeridi ---------------------------------------------------------- */
.cta-band {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--r-xl);
  padding: clamp(2.5rem, 5vw, 5rem);
  color: #fff;
  background: var(--c-bg-deep);
}
.cta-band img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
.cta-band::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(115deg, rgba(42,35,28,.92) 0%, rgba(42,35,28,.72) 50%, rgba(42,35,28,.5) 100%);
}
.cta-band h2 { color: #fff; max-width: 18ch; }
.cta-band p { margin-top: var(--sp-4); max-width: 46ch; color: rgba(247,242,234,.86); line-height: var(--lh-loose); }
.cta-band .hero__actions { margin-top: var(--sp-6); }

/* --- 404 ----------------------------------------------------------------- */
.error-page {
  min-height: 70vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: var(--sp-9);
}
.error-page__code {
  font-family: var(--ff-display);
  font-size: clamp(5rem, 16vw, 11rem);
  line-height: 1;
  color: var(--c-primary-wash);
  letter-spacing: -0.04em;
}