/* OZEL ALAN SAYFASI (Views/Page/Ayricalik.cshtml): cabana, balayi, aktiviteler, misir kumlari ve panelden eklenenler.
   Font degiskenleri, galeri izgarasi (.galgrid) ve fotograf goruntuleyici (.lb) zone.css'ten gelir. */
.ay {
  --ay-bg: #f7f4ee;
  --ay-ink: #1d2328;
  --ay-text: #454c53;
  --ay-mute: #757a80;
  --ay-gold: #7f6a4b;
  --ay-line: rgba(29, 35, 40, .14);
  --ay-deep: #1b2026;
  --ay-ease: cubic-bezier(.19, 1, .22, 1);
  --hh: var(--site-header-height, 76px);
  background: var(--ay-bg); color: var(--ay-ink);
}

/* ---------- Acilis: solda baslik, sagda boydan boya fotograf ---------- */
.ay-hero { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: max(620px, 100svh); padding-top: var(--hh); }
.ay-hero.no-ph { grid-template-columns: minmax(0, 1fr); min-height: 0; }
.ay-hero-tx { display: flex; flex-direction: column; min-width: 0; padding: clamp(28px, 3.2vw, 50px) clamp(24px, 4.6vw, 80px) clamp(28px, 3.2vw, 46px); }
.ay-meta { display: flex; align-items: center; justify-content: space-between; gap: 18px; font-size: .68rem; letter-spacing: .3em; text-transform: uppercase; color: var(--ay-mute); }
.ay-idx { display: inline-flex; align-items: center; gap: 10px; letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.ay-idx b { font-weight: 600; color: var(--ay-ink); }
.ay-idx i { display: block; width: 30px; height: 1px; background: currentColor; opacity: .6; }
.ay-hero-main { margin: auto 0; padding: clamp(40px, 7vh, 88px) 0; }
.ay-kicker { margin-bottom: clamp(14px, 1.6vw, 22px); font-family: var(--serif); font-style: italic; font-size: clamp(1.05rem, 1.35vw, 1.3rem); line-height: 1.4; color: var(--ay-gold); }
.ay-hero h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(2.6rem, 4.7vw, 4.9rem); line-height: 1.02; letter-spacing: -.01em; color: var(--ay-ink); overflow-wrap: break-word; }
.ay-intro { max-width: 46ch; margin-top: clamp(22px, 2.6vw, 36px); }
.ay-intro p { font-size: .97rem; line-height: 1.85; color: var(--ay-text); }
.ay-intro p + p { margin-top: 1em; }
.ay-down { align-self: flex-start; display: inline-flex; align-items: center; gap: 14px; font-size: .68rem; letter-spacing: .3em; text-transform: uppercase; color: var(--ay-ink); }
.ay-down svg { width: 12px; height: 20px; }
.ay-hero-ph { position: relative; margin: 0; overflow: hidden; background: #d9d1c4; }
.ay-hero-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

@media (prefers-reduced-motion: no-preference) {
  .ay-hero-ph img { animation: ay-settle 2.8s var(--ay-ease) both; }
  .ay-hero-ph::after { content: ""; position: absolute; inset: 0; background: var(--ay-bg); transform-origin: 100% 50%; animation: ay-curtain 1.3s cubic-bezier(.77, 0, .18, 1) .1s both; }
  .ay-hero-tx > * { animation: ay-rise 1.1s var(--ay-ease) .2s both; }
  .ay-hero-tx > .ay-hero-main { animation-delay: .45s; }
  .ay-hero-tx > .ay-down { animation-delay: .8s; }
  .ay-down svg { animation: ay-nudge 2.6s ease-in-out 2s infinite; }
}
@keyframes ay-settle { from { transform: scale(1.07); } to { transform: none; } }
@keyframes ay-curtain { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes ay-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes ay-nudge { 0%, 100% { transform: none; } 50% { transform: translateY(5px); } }

/* ---------- Tanitim yazisi: solda ara baslik (kaydirirken sabit), sagda metin ---------- */
.ay-story { max-width: 1280px; margin: 0 auto; padding: clamp(84px, 10vw, 160px) clamp(22px, 4.6vw, 80px) clamp(56px, 6vw, 96px); }
.ay-st { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 6vw, 110px); padding: clamp(40px, 4.4vw, 64px) 0; border-top: 1px solid var(--ay-line); }
.ay-st:first-child { padding-top: 0; border-top: 0; }
.ay-st-h h2 { position: sticky; top: calc(var(--hh) + 36px); font-family: var(--serif); font-weight: 400; font-size: clamp(1.4rem, 2.1vw, 2rem); line-height: 1.25; color: var(--ay-ink); }
.ay-st-h i { display: block; width: 56px; height: 1px; margin-top: .95em; background: var(--ay-gold); }
.ay-st-b { max-width: 64ch; }
.ay-st-b p { font-size: 1rem; line-height: 1.9; color: var(--ay-text); }
.ay-st-b p + p { margin-top: 1.15em; }
.ay-st.first .ay-st-b p:first-child { font-family: var(--serif); font-size: clamp(1.2rem, 1.65vw, 1.5rem); line-height: 1.62; color: var(--ay-ink); }
.ay-st.first .ay-st-b p:first-child::first-letter { float: left; margin: .1em .12em 0 -.02em; font-size: 3.3em; line-height: .8; color: var(--ay-gold); }
[dir="rtl"] .ay-st.first .ay-st-b p:first-child::first-letter { float: none; margin: 0; font-size: inherit; line-height: inherit; color: inherit; }

/* ---------- One cikanlar: her madde kendi cizgisinin altinda ---------- */
.ay-hl { max-width: 1280px; margin: 0 auto; padding: 0 clamp(22px, 4.6vw, 80px) clamp(96px, 10vw, 160px); }
.ay-hl.solo { padding-top: clamp(84px, 10vw, 160px); }
.ay-hl ol { list-style: none; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 44px clamp(20px, 2.8vw, 44px); }
.ay-hl li { padding-top: 20px; border-top: 1px solid rgba(29, 35, 40, .55); }
.ay-hl .n { display: block; font-family: var(--serif); font-style: italic; font-size: .95rem; color: var(--ay-gold); }
.ay-hl h3 { margin-top: 18px; font-family: var(--serif); font-weight: 400; font-size: clamp(1.12rem, 1.45vw, 1.35rem); line-height: 1.3; color: var(--ay-ink); }
.ay-hl p { margin-top: 8px; font-size: .9rem; line-height: 1.65; color: var(--ay-mute); }

/* ---------- Fotografli bolumler: buyuk fotograf, ustune binen metin karti; sirayla sag/sol ---------- */
.ay-feats { padding: 0 0 clamp(120px, 12vw, 190px); }
.ay-ft { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); max-width: 1500px; margin: 0 auto; padding: 0 clamp(20px, 3vw, 48px); }
.ay-ft + .ay-ft { margin-top: clamp(120px, 12vw, 200px); }
.ay-ft-media { grid-column: 1 / span 8; grid-row: 1; align-self: start; min-width: 0; }
.ay-ft-card { grid-column: 8 / span 5; grid-row: 1; align-self: end; position: relative; z-index: 2; margin-bottom: calc(-1 * clamp(36px, 5vw, 80px)); padding: clamp(32px, 3.6vw, 60px) clamp(28px, 3.4vw, 56px); background: #fff; }
.ay-ft.rev .ay-ft-media { grid-column: 5 / span 8; }
.ay-ft.rev .ay-ft-card { grid-column: 1 / span 5; }
.ay-ft.no-ph .ay-ft-card { grid-column: 3 / span 8; margin-bottom: 0; }

.ay-ft-media .ph { position: relative; overflow: hidden; aspect-ratio: 3 / 2; background: #e3ddd2; }
.ay-ft-media .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .9s cubic-bezier(.4, 0, .2, 1); }
.ay-ft-media .ph img.on { opacity: 1; }
.ay-ft-media .nav { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(12px, 1.4vw, 22px); pointer-events: none; }
.ay-ft-media .nav button { pointer-events: auto; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .9); color: var(--ay-ink); cursor: pointer; opacity: 0; transition: opacity .35s, background .25s; }
.ay-ft-media .ph:hover .nav button, .ay-ft-media .nav button:focus-visible { opacity: 1; }
.ay-ft-media .nav button:hover { background: #fff; }
.ay-ft-media .nav svg { width: 16px; height: 16px; }
/* Sayac kartin ortmedigi alt kosede; noktalar yerine yalniz sayac */
.ay-ft-media .count { position: absolute; left: 20px; bottom: 18px; z-index: 2; color: #fff; font-size: .7rem; letter-spacing: .26em; font-variant-numeric: tabular-nums; text-shadow: 0 1px 10px rgba(0, 0, 0, .5); }
.ay-ft.rev .ay-ft-media .count { left: auto; right: 20px; }
.ay-ft-media .dots { display: none; }

.ay-kick { display: flex; align-items: baseline; gap: 14px; font-family: var(--serif); font-style: italic; font-size: 1.02rem; line-height: 1.45; color: var(--ay-gold); }
.ay-kick::before { content: ""; flex: none; width: 26px; height: 1px; background: currentColor; transform: translateY(-.3em); }
.ay-ft-card h2 { margin-top: 18px; font-family: var(--serif); font-weight: 400; font-size: clamp(1.6rem, 2.5vw, 2.4rem); line-height: 1.12; color: var(--ay-ink); }
.ay-ft-card .ay-kick + h2 { margin-top: 18px; }
.ay-ft-card h2:first-child { margin-top: 0; }
.ay-ft-card p:not(.ay-kick) { margin-top: 18px; font-size: .95rem; line-height: 1.85; color: var(--ay-text); }
.ay-ft-card p:not(.ay-kick) + p { margin-top: .9em; }
.ay-specs { margin-top: 26px; border-top: 1px solid var(--ay-line); }
.ay-specs div { display: flex; justify-content: space-between; gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--ay-line); font-size: .86rem; }
.ay-specs dt { color: var(--ay-mute); }
.ay-specs dd { color: var(--ay-ink); text-align: end; }

/* Tanitim yazisi ve one cikanlar yoksa acilistan sonraki ilk bolum */
#icerik:empty + .ay-feats, #icerik:empty + .ay-note, #icerik:empty + .ay-gal { margin-top: clamp(84px, 10vw, 160px); }

/* ---------- Not ---------- */
.ay-note { max-width: 860px; margin: 0 auto; padding: 0 clamp(22px, 4vw, 64px) clamp(96px, 9vw, 140px); text-align: center; }
.ay-note::before { content: ""; display: block; width: 1px; height: 56px; margin: 0 auto 28px; background: var(--ay-gold); opacity: .7; }
.ay-note p { font-family: var(--serif); font-style: italic; font-size: clamp(1.08rem, 1.45vw, 1.3rem); line-height: 1.65; color: var(--ay-ink); }
.ay-hl + .ay-note { margin-top: calc(-1 * clamp(30px, 4vw, 60px)); }

/* ---------- Fotograf mozaigi (tiklaninca buyur: js/page.js .galgrid) ---------- */
.ay-gal { max-width: 1500px; margin: 0 auto; padding: 0 clamp(20px, 3vw, 48px) clamp(100px, 10vw, 160px); }
.ay-gal-h { display: flex; align-items: baseline; gap: clamp(18px, 2.4vw, 34px); margin-bottom: clamp(22px, 2.6vw, 36px); }
.ay-gal-h h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 2.4vw, 2.2rem); white-space: nowrap; }
.ay-gal-h i { flex: 1; height: 1px; background: var(--ay-line); transform: translateY(-.35em); }
.ay-gal-h span { font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ay-mute); white-space: nowrap; }
.ay-mosaic { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 15vw, 250px); grid-auto-flow: row dense; gap: 6px; }
.ay-mosaic figure { aspect-ratio: auto; }
.ay-mosaic .big { grid-column: span 2; grid-row: span 2; }
.ay-mosaic .big.r { grid-column: 3 / span 2; }
.ay-mosaic .w2 { grid-column: span 2; }
.ay-mosaic .half { grid-column: span 2; grid-row: span 2; }
.ay-mosaic .pano { grid-column: 1 / -1; grid-row: span 2; }

/* ---------- RTL ---------- */
[dir="rtl"] .ay-ft-media .count { left: auto; right: 20px; }
[dir="rtl"] .ay-ft.rev .ay-ft-media .count { right: auto; left: 20px; }

/* ---------- Tablet ---------- */
@media (max-width: 1180px) {
  .ay-ft-media { grid-column: 1 / span 7; }
  .ay-ft-card { grid-column: 7 / span 6; }
  .ay-ft.rev .ay-ft-media { grid-column: 6 / span 7; }
  .ay-ft.rev .ay-ft-card { grid-column: 1 / span 6; }
  .ay-hl ol { grid-template-columns: repeat(min(var(--n, 4), 2), minmax(0, 1fr)); }
}

/* ---------- Mobil ---------- */
@media (max-width: 900px) {
  .ay-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .ay-hero-ph { order: -1; aspect-ratio: 5 / 4; }
  .ay-hero-tx { padding: 24px 20px 8px; }
  .ay-hero-main { padding: 34px 0 0; }
  .ay-hero h1 { font-size: clamp(2.3rem, 10vw, 3.3rem); }
  .ay-down { display: none; }

  .ay-story { padding: 64px 20px 40px; }
  .ay-st { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 36px 0; }
  .ay-st-h h2 { position: static; }
  .ay-st.untitled .ay-st-h { display: none; }

  .ay-hl { padding: 0 20px 80px; }
  .ay-hl.solo { padding-top: 64px; }
  .ay-hl ol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }

  .ay-feats { padding-bottom: 80px; }
  .ay-ft { display: block; padding: 0; }
  .ay-ft + .ay-ft { margin-top: 72px; }
  .ay-ft-media .ph { aspect-ratio: 4 / 3; }
  .ay-ft-card { margin: -44px 16px 0; padding: 30px 24px 34px; }
  .ay-ft.no-ph .ay-ft-card { margin: 0 16px; }
  .ay-ft-media .nav button { width: 38px; height: 38px; opacity: 1; }
  .ay-ft-media .count, .ay-ft.rev .ay-ft-media .count { left: 18px; right: auto; bottom: 58px; }
  [dir="rtl"] .ay-ft-media .count, [dir="rtl"] .ay-ft.rev .ay-ft-media .count { left: auto; right: 18px; }

  .ay-note { padding: 0 24px 80px; }
  .ay-hl + .ay-note { margin-top: -24px; }

  .ay-gal { padding: 0 6px 80px; }
  .ay-gal-h { padding: 0 14px; }
  .ay-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 40vw; gap: 4px; }
  .ay-mosaic .big, .ay-mosaic .big.r, .ay-mosaic .pano { grid-column: 1 / -1; grid-row: span 2; }
  .ay-mosaic .w2 { grid-column: 1 / -1; grid-row: span 1; }
  .ay-mosaic .half { grid-column: span 1; grid-row: span 2; }
}

@media (prefers-reduced-motion: reduce) {
  .ay-ft-media .ph img, .ay-ft-media .nav button { transition: none; }
}