@font-face { font-family: 'Jost'; src: url('../yazi/jost.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Vollkorn'; src: url('../yazi/vollkorn.woff2') format('woff2'); font-weight: 400 900; font-display: swap; }
@font-face { font-family: 'Platypi'; src: url('../yazi/platypi.woff2') format('woff2'); font-weight: 300 800; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('../yazi/archivo.woff2') format('woff2'); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: 'Cardo'; src: url('../yazi/cardo.woff2') format('woff2'); font-weight: 400; font-display: swap; }
body { background: var(--m-kum2); color: var(--m-murekkep); font: 400 clamp(16px, 1.05vw, 19px)/1.8 var(--m-metin); -webkit-font-smoothing: antialiased; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--bant) + 64px); }
.ad-sedde { font-family: 'Jost', sans-serif; font-weight: 500; letter-spacing: .02em; color: #1f4f6e; }
.ad-kirk  { font-family: 'Vollkorn', serif; font-weight: 700; letter-spacing: .01em; color: #6b4424; }
.ad-tava  { font-family: 'Archivo', sans-serif; font-weight: 800; font-stretch: 72%; letter-spacing: .03em; color: #b0492f; }
.ad-poyraz{ font-family: 'Platypi', serif; font-weight: 500; color: #2f7d66; }
.ad-kaz   { font-family: 'Cardo', serif; font-weight: 400; letter-spacing: .03em; color: #4d5429; }
.ust { position: fixed; top: var(--bant); left: 0; right: 0; z-index: 20; height: 68px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
       padding: 0 2.5vw; color: #fff; transition: background .6s ease, color .6s ease, box-shadow .6s ease; }
.ust.inmis { background: rgba(242,241,229,.97); color: var(--m-murekkep); box-shadow: 0 1px 0 rgba(84,69,47,.14); }
.ust .menu { display: flex; gap: 2.2vw; }
.ust .menu a, .ust .otelBag { font: 500 15px/1 var(--m-metin); letter-spacing: .1em; color: inherit; text-decoration: none; padding-bottom: 5px; border-bottom: 1px solid transparent; white-space: nowrap; }
.ust .menu a:hover, .ust .otelBag:hover { border-bottom-color: currentColor; }
.ust .otelBag { justify-self: end; }
.ust .otelBag::after { content: '\00a0\2192'; }
.ust .marka img { height: 40px; width: auto; }
.ust:not(.inmis) .marka img { opacity: 0; visibility: hidden; }
.tepe { position: relative; height: calc(100svh - var(--bant)); min-height: 560px; background: var(--m-gece); }
.tepe figure { position: absolute; inset: 0; margin: 0; }
.tepe .ornekGorsel::after { bottom: 14px; right: 14px; }
.tepePerde { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(20,26,32,.8) 0%, rgba(20,26,32,.2) 60%, rgba(20,26,32,.4) 100%); pointer-events: none; }
.tepeYazi { position: absolute; z-index: 3; left: 6vw; right: 6vw; bottom: 12vh; max-width: 900px; color: #fff; }
.etiketKucuk { font: 500 12px/1.4 var(--m-metin); letter-spacing: .3em; opacity: .85; margin-bottom: 16px; }
.tepe.ustte .tepePerde { background: linear-gradient(to bottom, rgba(20,26,32,.66) 0%, rgba(20,26,32,.22) 42%, rgba(20,26,32,0) 64%); }
.tepe.ustte .tepeYazi { top: calc(68px + 7vh); bottom: auto; }
.tepe h1 { font: 300 clamp(44px, 6vw, 104px)/1 var(--m-gosteri); }
.tepeAlt { margin-top: 18px; max-width: 34em; font: italic 300 clamp(20px, 1.7vw, 29px)/1.35 var(--m-gosteri); }
.bolum { padding: 9vw 6vw; }
.bolumBas { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 4vw; align-items: end; max-width: 1280px; margin: 0 auto 48px; }
.bolumBas h2 { font: 300 clamp(38px, 3.6vw, 66px)/1.05 var(--m-gosteri); }
.bolumBas p { max-width: 40em; }
.cephe { max-width: 1280px; margin: 0 auto; }
.cepheKaydir { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cephe svg { width: 100%; height: auto; min-width: 640px; }
.cephe .govde { fill: #f7f4ea; stroke: var(--m-murekkep); stroke-width: 1.2; }
.cephe .cati { fill: var(--m-murekkep); }
.cephe .cam { fill: #dfe7ea; stroke: var(--m-murekkep); stroke-width: .8; }
.cephe .kayit { stroke: var(--m-murekkep); stroke-width: .6; }
.cephe .direk { stroke: #3c4046; stroke-width: 3; }
.cephe .yelken { fill: rgba(214,196,160,.55); stroke: #9a825c; stroke-width: .8; }
.cephe .saksi { fill: #fbfaf6; stroke: var(--m-murekkep); stroke-width: .7; }
.cephe .bitki { fill: #7d8c5a; }
.cephe .zemin { stroke: var(--m-murekkep); stroke-width: 1; }
.cephe .no { font: italic 400 20px var(--m-gosteri); fill: var(--m-altin); text-anchor: middle; }
.cephe a .vurgu { fill: transparent; transition: fill .12s linear; }
.cephe a:hover .vurgu, .cephe a:focus-visible .vurgu, .cephe a.isik .vurgu { fill: rgba(154,130,92,.14); }
.cephe figcaption { margin-top: 12px; font: 400 13px/1.5 var(--m-metin); letter-spacing: .1em; opacity: .75; }
.cepheIpucu { display: none; }
.rehber { list-style: none; padding: 0; max-width: 1280px; margin: 56px auto 0; border-top: 1px solid var(--m-murekkep); }
.rehber a { display: grid; grid-template-columns: 70px minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, .9fr) 28px; gap: 6px 28px; align-items: baseline;
            padding: 24px 0 22px; border-bottom: 1px solid rgba(84,69,47,.18); color: inherit; text-decoration: none; transition: background .12s linear; }
.rehber a:hover, .rehber a.isik { background: rgba(255,255,255,.45); }
.rNo { font: italic 300 22px/1 var(--m-gosteri); color: var(--m-altin); padding-left: 6px; }
.rAd { font-size: clamp(26px, 2.3vw, 40px); line-height: 1.05; }
.rTur { font-size: .95em; opacity: .85; }
.rSaat { font-variant-numeric: tabular-nums; font-size: .95em; }
.rSaat .durum { display: block; font-size: 13px; letter-spacing: .08em; opacity: .75; }
.rOk { justify-self: end; font: 300 24px/1 var(--m-gosteri); color: var(--m-altin); }
.saatler { background: #fbfaf5; }
.cizelge { position: relative; max-width: 1280px; margin: 0 auto; }
.czEksen { position: relative; height: 26px; margin-left: 240px; border-bottom: 1px solid var(--m-murekkep); font: 400 13px/1 var(--m-metin); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.czEksen span { position: absolute; top: 0; transform: translateX(-50%); opacity: .75; }
.czSatir { display: grid; grid-template-columns: 240px minmax(0, 1fr); align-items: center; min-height: 58px; border-bottom: 1px solid rgba(84,69,47,.14); color: inherit; text-decoration: none; }
.czAd { font-size: 23px; line-height: 1.1; padding-right: 16px; }
.czYol { position: relative; height: 58px; }
.czCubuk { position: absolute; top: 21px; height: 16px; left: var(--bas); width: calc(var(--son) - var(--bas)); background: var(--renk); }
.czCubuk span { position: absolute; left: 0; top: 20px; white-space: nowrap; font: 400 12.5px/1 var(--m-metin); letter-spacing: .06em; font-variant-numeric: tabular-nums; color: var(--m-murekkep); }
.czSimdi { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px solid #b0492f; pointer-events: none; }
.czSimdi span { position: absolute; top: -22px; left: 6px; font: italic 400 13px/1 var(--m-gosteri); color: #b0492f; white-space: nowrap; }
.acikOlanlar { max-width: 1280px; margin: 26px auto 0; font-size: .98em; }
.saatNot { max-width: 1280px; margin: 10px auto 0; font-size: 14px; font-style: italic; opacity: .75; }
.konum { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 5vw; align-items: center; max-width: 1280px; margin: 0 auto; }
.konum figure { aspect-ratio: 16 / 10; margin: 0; }
.konum h2 { font: 300 clamp(34px, 3.2vw, 58px)/1.1 var(--m-gosteri); margin-bottom: 20px; }
.konum p + p { margin-top: 1em; }
.konum a { color: inherit; }
.taslak { font-size: .9em; opacity: .75; }
.haritaBag { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.haritaBag::after { content: '\00a0\2197'; font-size: .8em; }
@media (max-width: 860px) {
  .ust { height: 58px; padding: 0 16px; grid-template-columns: auto 1fr; }
  .ust .menu { display: none; }
  .ust .marka { justify-self: start; }
  .ust .marka img { height: 32px; }
  .ust .otelBag { font-size: 14px; }
  .tepeYazi { left: 20px; right: 20px; bottom: 11vh; }
  .tepe.ustte .tepeYazi { top: calc(58px + 4vh); bottom: auto; }
  .bolum { padding: 72px 20px; }
  .bolumBas { grid-template-columns: 1fr; gap: 14px; margin-bottom: 30px; }
  .cepheIpucu { display: block; margin-top: 8px; font: italic 400 13px/1.4 var(--m-metin); opacity: .7; }
  .rehber a { grid-template-columns: 38px minmax(0, 1fr) 20px; gap: 2px 14px; padding: 18px 0; }
  .rAd { grid-column: 2; }
  .rTur, .rSaat { grid-column: 2; }
  .rOk { grid-column: 3; grid-row: 1; }
  .czEksen { margin-left: 0; }
  .czSatir { grid-template-columns: 1fr; padding-top: 12px; }
  .czAd { font-size: 20px; }
  .czYol { height: 44px; }
  .czCubuk { top: 8px; }
  .konum { grid-template-columns: 1fr; gap: 28px; }
}