@font-face { font-family: 'EB Garamond'; src: url('../../yazi/eb-garamond.woff2') format('woff2'); font-weight: 400 600; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('../../yazi/cormorant-garamond.woff2') format('woff2'); font-weight: 300 600; font-display: swap; }
:root {
  --m-deniz: #2f4257; --m-sis: #9eb7c5; --m-kum: #f1ede0; --m-kum2: #f2f1e5; --m-murekkep: #54452f; --m-altin: #9a825c; --m-gece: #14181c;
  --m-gosteri: 'Cormorant Garamond', 'Palatino Linotype', Palatino, Georgia, serif;
  --m-metin: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --bant: 42px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; padding-top: var(--bant); overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, figure, ol, ul, dl, dd { margin: 0; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.ornekBant { position: fixed; inset: 0 0 auto 0; z-index: 50; min-height: var(--bant); display: flex; align-items: center; justify-content: center;
             flex-wrap: wrap; gap: 4px 18px; padding: 9px 16px; background: var(--m-gece); color: var(--m-kum);
             font: 400 14px/1.35 var(--m-metin); letter-spacing: .03em; text-align: center; }
.ornekBant b { font-weight: 600; letter-spacing: .22em; color: #e6c88e; }
.ornekBant a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(241,237,224,.5); white-space: nowrap; }
.ornekBant a:hover { border-bottom-color: currentColor; }
.bantUzun { display: inline; }
.bantKisa { display: none; }
.mSerit { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 12px 3vw;
          background: var(--serit-zemin, var(--m-kum2)); color: var(--serit-yazi, var(--m-murekkep));
          font: 400 15px/1.3 var(--m-metin); letter-spacing: .06em; border-bottom: 1px solid var(--serit-cizgi, rgba(84,69,47,.16)); }
.mSerit a { color: inherit; text-decoration: none; }
.mSerit .geri::before { content: '\2190\00a0'; }
.mSerit .geri:hover { text-decoration: underline; text-underline-offset: 4px; }
.mSerit .mLogo img { height: 30px; width: auto; }
.mSerit .yer { justify-self: end; opacity: .85; }
.ornekGorsel { position: relative; overflow: hidden; background: var(--yt-zemin, #d9d3c4); }
.ornekGorsel::after { content: 'Örnek'; position: absolute; right: 10px; bottom: 10px; z-index: 2; padding: 4px 9px 5px; pointer-events: none;
                      background: rgba(20,24,28,.66); color: #f5f1e6; font: 500 12.5px/1 var(--m-metin); letter-spacing: .16em; }
.ornekGorsel img { width: 100%; height: 100%; object-fit: cover; }
.ornekGorsel figcaption { position: absolute; left: 0; bottom: 0; padding: 0 0 12px 14px; font: 400 12.5px/1.3 var(--m-metin); letter-spacing: .1em; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.gorselKutu { position: relative; overflow: hidden; background: #cfd6d8; }
.gorselKutu img { width: 100%; height: 100%; object-fit: cover; }
.gorselKutu figcaption { position: absolute; right: 12px; bottom: 10px; z-index: 2; font: 400 12.5px/1.3 var(--m-metin); letter-spacing: .1em; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.55); }
.logoKutu { margin: 0; }
.logoNot { display: block; margin-top: 6px; font: italic 400 12.5px/1 var(--m-metin); letter-spacing: .08em; opacity: .7; }
.yerTutucu { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 18px 20px 16px;
             background: var(--yt-zemin, #d9d3c4); color: var(--yt-yazi, rgba(40,34,26,.55)); }
.yerTutucu .ytAd { font-family: var(--yt-yazi-tipi, var(--m-gosteri)); font-size: clamp(15px, 1.25vw, 20px); line-height: 1.2; letter-spacing: .04em; opacity: .55; }
.yerTutucu .ytNot { font: italic 400 13px/1.3 var(--m-metin); letter-spacing: .06em; opacity: .9; }
.miniPlan svg { width: 100%; max-width: 360px; height: auto; }
.miniPlan rect.alan { fill: none; stroke: currentColor; stroke-width: 1; opacity: .55; }
.miniPlan rect.alan.bu { fill: var(--vurgu, currentColor); stroke: var(--vurgu, currentColor); opacity: 1; }
.miniPlan text { font: italic 400 13px var(--m-gosteri); fill: currentColor; }
.miniPlan .golge { stroke: currentColor; stroke-width: .8; stroke-dasharray: 3 4; opacity: .5; fill: none; }
.mAlt { padding: 34px 3vw 30px; background: var(--m-sis); color: var(--m-deniz); font: 400 15px/1.7 var(--m-metin); letter-spacing: .04em; }
.mAltSatir { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 18px 4vw; }
.mAlt img { height: 46px; width: auto; }
.mAltBag { display: flex; flex-wrap: wrap; gap: 8px 26px; }
.mAlt a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(47,66,87,.4); padding-bottom: 2px; }
.mAlt .not { margin-top: 18px; font-size: 13.5px; letter-spacing: .08em; opacity: .9; }
.gizliBaslik { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 860px) {
  :root { --bant: 40px; }
  .ornekBant { font-size: 13px; gap: 2px 12px; padding: 8px 12px; }
  .bantUzun { display: none; }
  .bantKisa { display: inline; }
  .mSerit { grid-template-columns: 1fr auto; padding: 10px 16px; font-size: 14px; }
  .mSerit .mLogo { display: none; }
  .mAlt { padding: 28px 16px 26px; }
}