/* ═══════════════════════════════════════════════════════════════════
   Söğüt 1299 — Sayfa CSS  |  Sıfırdan Yazıldı
   Hikayemiz · Deneyim · Galeri · İletişim · Menü
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Sayfa Hero ────────────────────────────────────────────────── */
.page-hero {
  position: relative;
  min-height: 55vh;
  display: flex;
  align-items: flex-end;
  padding: calc(var(--header-height) + 3.5rem) 0 4.5rem;
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 65% 80% at 18% 100%, rgba(107,31,40,0.16) 0%, transparent 55%),
    linear-gradient(180deg, var(--ivory) 0%, var(--ivory-3) 100%);
  z-index: 0;
}
.page-hero.has-bg::before {
  background: linear-gradient(180deg, rgba(7,4,2,var(--hero-overlay,0.74)) 0%, rgba(7,4,2,var(--hero-overlay,0.65)) 100%);
}
.page-hero.has-bg .page-hero-eyebrow { background: rgba(212,175,55,0.12); border-color: rgba(212,175,55,0.38); color: rgba(232,210,160,0.92); }
.page-hero.has-bg .page-hero-title   { color: #f5f0e8; }
.page-hero.has-bg .page-hero-title em {
  background: linear-gradient(135deg, #f0d87a, #d4af37);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.page-hero.has-bg .page-hero-subtitle { color: rgba(240,230,210,0.82); }

.page-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: -1; }
.page-hero-content { position: relative; z-index: 1; }

/* Sayfa hero eyebrow pill rozet */
.page-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  background: var(--gold-mist);
  border: 1px solid var(--gold-line);
  padding: 0.38rem 1.1rem;
  border-radius: var(--r-pill);
  margin-bottom: 1.2rem;
}
.page-hero-eyebrow::before { content: "✦"; font-size: 0.56rem; opacity: 0.82; }

.page-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 7.5vw, 4.8rem);
  font-weight: 500;
  line-height: 1.06;
  color: var(--ink);
  letter-spacing: -0.025em;
  margin-bottom: 1rem;
}
.page-hero-title em {
  font-style: italic;
  background: linear-gradient(135deg, var(--gold-rich) 0%, var(--gold) 55%, var(--gold-deep) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.page-hero-subtitle {
  max-width: 540px;
  font-size: 1.05rem;
  color: var(--ink-3);
  line-height: 1.8;
}

.page-hero-image { margin-top: 2rem; max-width: 480px; border: 1px solid var(--gold-line); overflow: hidden; border-radius: var(--r-md); }
.page-hero-image img { width: 100%; display: block; aspect-ratio: 16/10; object-fit: cover; }

/* ─── Pillars / Stats — bu sayfalarda da kullanılır ─────────────── */
/* Ana stiller styles.css'te; burada sadece word-wrap */
.pillar-card h3 { word-wrap: break-word; overflow-wrap: break-word; }
.pillar-card p  { word-wrap: break-word; overflow-wrap: break-word; }
/* stats-bar lüks glassmorphism styles.css'te */

/* ─── Hikayemiz / Story ──────────────────────────────────────────── */
.story-intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
  align-items: start;
}
.story-intro-grid .lead { font-size: 1.2rem; color: var(--ink); margin-bottom: var(--sp-3); }
.story-intro-grid p { margin-bottom: var(--sp-3); color: var(--ink-3); }
.story-image-main {
  border-radius: var(--r-md);
  box-shadow: var(--card-shadow-hover);
  overflow: hidden;
  border: 1px solid var(--card-border);
}
.story-image-main img { width: 100%; aspect-ratio: 3/4; object-fit: cover; }

/* ─── Zaman Çizgisi ─────────────────────────────────────────────── */
.timeline {
  position: relative;
  padding-left: 2.75rem;
  border-left: 1px solid var(--gold-line);
  margin-top: var(--sp-6);
}
.timeline-item {
  position: relative;
  padding-bottom: var(--sp-6);
  padding-left: var(--sp-4);
}
.timeline-item::before {
  content: "";
  position: absolute;
  left: -2.75rem; top: 0.4rem;
  width: 14px; height: 14px;
  margin-left: -7px;
  background: radial-gradient(circle, var(--gold-rich) 0%, var(--gold) 100%);
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--ivory), 0 0 14px rgba(212,175,55,0.45);
}
.timeline-era {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
  background: var(--gold-mist);
  border-radius: var(--r-pill);
  padding: 0.2rem 0.65rem;
  margin-bottom: 0.4rem;
}
.timeline-item h3 {
  font-family: var(--font-display);
  font-size: 1.8rem;
  color: var(--ink);
  margin-bottom: 0.45rem;
  letter-spacing: -0.01em;
}

/* ─── Değer Kartları (Hikayemiz 4'lü grid) ──────────────────────── */
.values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
}
.value-card {
  position: relative;
  padding: var(--sp-5) var(--sp-4);
  text-align: center;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--r-lg);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.value-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-rich), transparent);
  opacity: 0;
  transition: opacity var(--t);
}
.value-card:hover::before { opacity: 1; }
.value-card:hover {
  transform: translateY(-7px);
  box-shadow: var(--card-shadow-hover);
  border-color: rgba(184,150,46,0.38);
}
.value-card h4 {
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 500;
  color: var(--gold);
  margin-bottom: 0.45rem;
}

/* ─── İçerik Bölümleri ──────────────────────────────────────────── */
.content-sections { display: flex; flex-direction: column; gap: var(--sp-7); }
.content-section-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
  align-items: center;
}
.content-section-row:nth-child(even) .content-section-image { order: 2; }
.content-section-row:nth-child(even) .content-section-text  { order: 1; }
.content-section-image {
  overflow: hidden;
  border-radius: var(--r-md);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
}
.content-section-image img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.content-section-text h3 { font-family: var(--font-display); font-size: 2rem; color: var(--ink); margin-bottom: var(--sp-3); letter-spacing: -0.01em; }

/* ─── Deneyim Özellikleri (Feature Blocks) ──────────────────────── */
.feature-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
  align-items: center;
  padding: var(--sp-6) 0;
  border-bottom: 1px solid var(--gold-line);
}
.feature-block:last-child { border-bottom: none; }
.feature-block:nth-child(even) .feature-image  { order: 2; }
.feature-block:nth-child(even) .feature-content { order: 1; }
.feature-image {
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
}
.feature-image img { width: 100%; height: 100%; object-fit: cover; }
.feature-subtitle {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 0.5rem;
}
.feature-content h3 {
  font-family: var(--font-display);
  font-size: 2.3rem;
  color: var(--ink);
  letter-spacing: -0.015em;
  margin-bottom: var(--sp-3);
}
.feature-content > p { color: var(--ink-3); margin-bottom: var(--sp-3); }
.feature-highlights {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.feature-highlights li {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.38rem 0.88rem;
  border: 1px solid var(--gold-line);
  color: var(--gold);
  border-radius: var(--r-sm);
  background: var(--gold-mist);
}

/* ─── Galeri ────────────────────────────────────────────────────── */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
}
.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
  aspect-ratio: 1;
  cursor: pointer;
  background: var(--ivory-3);
  transition: box-shadow var(--t), border-color var(--t);
}
.gallery-item:hover {
  box-shadow: var(--card-shadow-hover);
  border-color: rgba(184,150,46,0.35);
}
.gallery-item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.gallery-item:hover img { transform: scale(1.07); }
.gallery-item figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: 2rem 1.25rem 1.25rem;
  background: linear-gradient(to top, rgba(11,7,5,0.86) 0%, rgba(11,7,5,0.36) 65%, transparent 100%);
  font-size: 0.9rem;
  font-weight: 400;
  color: rgba(250,246,238,0.92);
  letter-spacing: 0.02em;
  transform: translateY(8px);
  transition: transform var(--t);
}
.gallery-item:hover figcaption { transform: translateY(0); }
.gallery-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 5rem 2rem;
  color: var(--ink-3);
  border: 1px dashed var(--gold-line);
  border-radius: var(--r-lg);
  background: var(--card-bg);
}

/* Galeri tıklanabilir buton */
.gallery-item { cursor: default; }
.gallery-item.has-image .gallery-item-btn {
  position: relative; display: block; width: 100%; height: 100%;
  padding: 0; border: none; background: none;
  cursor: zoom-in; overflow: hidden;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.gallery-item.has-image .gallery-item-btn::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(11,7,5,0.22); opacity: 0; transition: opacity 0.25s; pointer-events: none;
}
.gallery-item.has-image .gallery-item-btn::before {
  content: "⤢"; position: absolute; right: 0.65rem; bottom: 0.55rem; z-index: 2;
  font-size: 1.05rem; font-weight: 600; color: #fff8ef; line-height: 1;
  background: rgba(11,7,5,0.58); width: 2rem; height: 2rem;
  display: grid; place-items: center; border-radius: var(--r-pill);
  opacity: 0; transition: opacity 0.25s, transform 0.25s; transform: translateY(4px);
}
.gallery-item.has-image:hover .gallery-item-btn::after,
.gallery-item.has-image:hover .gallery-item-btn::before,
.gallery-item.has-image:active .gallery-item-btn::after,
.gallery-item.has-image:active .gallery-item-btn::before { opacity: 1; }
.gallery-item.has-image:hover .gallery-item-btn::before,
.gallery-item.has-image:active .gallery-item-btn::before { transform: translateY(0); }
.gallery-item.has-image .gallery-item-btn:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px; border-radius: var(--r-md);
}

/* ─── İletişim Kartları ─────────────────────────────────────────── */
.contact-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  margin-bottom: var(--sp-7);
}
.contact-card {
  position: relative;
  padding: var(--sp-5) var(--sp-4);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--r-lg);
  box-shadow: var(--card-shadow);
  text-align: center;
  overflow: hidden;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.contact-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-rich), transparent);
  opacity: 0; transition: opacity var(--t);
}
.contact-card:hover::before { opacity: 1; }
.contact-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--card-shadow-hover);
  border-color: rgba(184,150,46,0.38);
}
.contact-card-icon {
  font-size: 1.8rem;
  color: var(--gold);
  margin-bottom: var(--sp-3);
  filter: drop-shadow(0 2px 8px rgba(184,150,46,0.28));
}
.contact-card h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 0.45rem;
  letter-spacing: -0.01em;
}
.contact-card a, .contact-card span {
  color: var(--ink-3);
  font-size: 1.02rem;
  line-height: 1.65;
}
.contact-card a:hover { color: var(--gold); }

/* İletişim Layout */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
}

/* ─── SSS (FAQ) ─────────────────────────────────────────────────── */
.faq-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.faq-item {
  padding: var(--sp-4) var(--sp-5);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--r-md);
  box-shadow: var(--card-shadow);
  transition: border-color var(--t), transform var(--t-fast), box-shadow var(--t);
}
.faq-item:hover {
  border-color: rgba(184,150,46,0.35);
  transform: translateY(-2px);
  box-shadow: var(--card-shadow-hover);
}
.faq-item h4 {
  font-family: var(--font-display);
  font-size: 1.38rem;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 0.45rem;
  letter-spacing: -0.01em;
}
.faq-item p { font-size: 0.95rem; line-height: 1.78; color: var(--ink-3); }

/* ─── Aktif nav linki ───────────────────────────────────────────── */
.nav-links a.active { color: var(--ink) !important; }

/* ─── Harita Embed ──────────────────────────────────────────────── */
.contact-map-link { display: block; text-decoration: none; color: inherit; }
.contact-map-embed {
  position: relative; width: 100%;
  aspect-ratio: 16/10;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--card-border);
  background: var(--ivory-2);
  min-height: 280px;
  box-shadow: var(--card-shadow);
}
.contact-map-embed iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block;
}
.contact-map-fallback {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.75rem; padding: 2rem; text-align: center;
  background: radial-gradient(ellipse at center, rgba(107,31,40,0.07) 0%, transparent 70%), var(--ivory-2);
  transition: background 0.2s;
}
.contact-map-link:hover .contact-map-fallback {
  background: radial-gradient(ellipse at center, rgba(107,31,40,0.12) 0%, transparent 70%), var(--ivory-2);
}
.map-embed-hint { font-size: 0.8rem; color: var(--ink-3); margin-top: 0.5rem; }

/* ─── Performans: content-visibility ───────────────────────────── */
.section,
.timeline-item, .pillar-card, .experience-card,
.faq-item, .contact-card, .gallery-item,
.menu-preview-card, .values-grid > * {
  content-visibility: auto;
  contain-intrinsic-size: auto 200px;
}

/* ─── Responsive ────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .pillars-grid,
  .values-grid,
  .gallery-grid,
  .contact-cards { grid-template-columns: repeat(2, 1fr); }
  .story-intro-grid,
  .content-section-row,
  .feature-block,
  .contact-layout { grid-template-columns: 1fr; }
  .feature-block:nth-child(even) .feature-image { order: unset; }
}
@media (max-width: 600px) {
  .pillars-grid,
  .values-grid,
  .gallery-grid,
  .contact-cards { grid-template-columns: 1fr; }
}

/* ─── Gallery Lightbox ──────────────────────────────────────────── */
body.gallery-open { overflow: hidden; }
body.gallery-open .site-dock,
body.gallery-open .menu-dock { opacity: 0; pointer-events: none; }

.gallery-lightbox {
  position: fixed; inset: 0; z-index: 4000;
  display: grid; place-items: center;
  padding: 1rem;
  padding-top: calc(1rem + var(--safe-t));
  padding-bottom: calc(1rem + var(--safe-b));
}
.gallery-lightbox[hidden] { display: none !important; }
.gallery-lightbox-backdrop {
  position: absolute; inset: 0;
  background: rgba(7,4,2,0.9);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  opacity: 0; transition: opacity 0.3s ease; cursor: pointer;
}
.gallery-lightbox-card {
  position: relative; z-index: 1;
  width: min(980px, 100%); max-height: 92vh;
  display: grid; grid-template-rows: auto 1fr auto;
  background: #100b08;
  border: 1px solid rgba(212,175,55,0.28);
  border-radius: var(--r-md);
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
  transform: translateY(16px) scale(0.97); opacity: 0;
  transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), opacity 0.35s cubic-bezier(0.22,1,0.36,1);
  overflow: hidden;
}
.gallery-lightbox.is-open .gallery-lightbox-backdrop { opacity: 1; }
.gallery-lightbox.is-open .gallery-lightbox-card { transform: translateY(0) scale(1); opacity: 1; }
.gallery-lightbox-header {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.75rem 0.9rem 0.75rem 1.1rem;
  border-bottom: 1px solid rgba(212,175,55,0.16);
}
.gallery-lightbox-counter { font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(232,213,163,0.78); }
.gallery-lightbox-title {
  font-family: var(--font-display); font-size: 1rem; font-weight: 500; color: #f0e2c2;
  text-align: center; flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gallery-lightbox-close {
  width: 2.2rem; height: 2.2rem; border: none; border-radius: var(--r-pill);
  background: rgba(250,246,238,0.08); color: #f0e2c2;
  font-size: 1.4rem; line-height: 1; display: grid; place-items: center;
  cursor: pointer; transition: background 0.2s, color 0.2s; flex-shrink: 0;
}
.gallery-lightbox-close:hover { background: rgba(212,175,55,0.22); color: #fff8ef; }
.gallery-lightbox-media {
  position: relative; background: #080503;
  display: grid; place-items: center; min-height: 0; overflow: hidden;
}
.gallery-lightbox-media img { width: 100%; height: auto; max-height: 72vh; object-fit: contain; display: block; }
.gallery-lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 2.75rem; height: 2.75rem; border: none; border-radius: var(--r-pill);
  background: rgba(250,246,238,0.07); color: #f0e2c2; font-size: 1.4rem;
  display: grid; place-items: center; cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.gallery-lightbox-nav:hover { background: rgba(212,175,55,0.28); color: #fff8ef; transform: translateY(-50%) scale(1.06); }
.gallery-lightbox-nav.prev { left: 0.75rem; }
.gallery-lightbox-nav.next { right: 0.75rem; }
.gallery-lightbox-footer { padding: 0.7rem 1.1rem 0.85rem; border-top: 1px solid rgba(212,175,55,0.16); text-align: center; }
.gallery-lightbox-caption { font-size: 0.88rem; color: rgba(232,213,163,0.78); font-style: italic; }
@media (max-width: 640px) {
  .gallery-lightbox-nav { width: 2.2rem; height: 2.2rem; font-size: 1.1rem; }
  .gallery-lightbox-nav.prev { left: 0.4rem; }
  .gallery-lightbox-nav.next { right: 0.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .gallery-lightbox-card,
  .gallery-lightbox-backdrop { transition: none !important; }
  .gallery-lightbox.is-open .gallery-lightbox-card { transform: none; }
}

/* ─── Yazı tipi kenar yumuşatma ─────────────────────────────────── */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

html[dir="rtl"] .timeline { padding-left:0; padding-right:2.75rem; border-left:0; border-right:1px solid var(--gold-line); }
html[dir="rtl"] .timeline-item { padding-left:0; padding-right:var(--sp-4); }
html[dir="rtl"] .timeline-item::before { left:auto; right:-2.75rem; margin-left:0; margin-right:-7px; }