@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 {
  --deniz: #2f4257; --deniz-sis: #9eb7c5; --kum-50: #fefefd; --kum-200: #f8f7f0; --kum-400: #f2f1e5; --kum-500: #f1ede0;
  --murekkep: #54452f; --altin: #9a825c; --gece: #1a1e22; --cizgi: rgba(84,69,47,.18);
  --gosteri: 'Cormorant Garamond', 'Palatino Linotype', Palatino, Georgia, serif;
  --metin: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --nefes: cubic-bezier(.19, 1, .22, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 70px; }
body { margin: 0; background: var(--kum-400); color: var(--murekkep); font: 400 clamp(16px, 1.05vw, 19px)/1.84 var(--metin); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, p, figure, ol { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--altin); outline-offset: 3px; }


.ust { position: fixed; inset: 0 0 auto 0; z-index: 20; height: 72px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
       padding: 0 2.5vw; color: #fff; transition: background .6s var(--nefes), color .6s var(--nefes), height .6s var(--nefes), box-shadow .6s var(--nefes); }
.ust.inmis { height: 62px; background: rgba(242,241,229,.96); color: var(--murekkep); box-shadow: 0 1px 0 rgba(84,69,47,.12); }
.menu { display: flex; gap: 2.2vw; }
.menu a, .otelBag { font: 500 15px/1 var(--metin); letter-spacing: .1em; text-decoration: none; white-space: nowrap;
                    padding-bottom: 5px; border-bottom: 1px solid transparent; transition: border-color .5s var(--nefes); }
.menu a:hover, .otelBag:hover { border-bottom-color: currentColor; }
.otelBag { justify-self: end; }
.otelBag::after { content: '\00a0\2192'; }
.marka img { height: 42px; width: auto; transition: opacity .6s var(--nefes), visibility .6s; }
.ust:not(.inmis) .marka img { opacity: 0; visibility: hidden; }

.eylem { display: inline-flex; align-items: center; padding: 13px 26px; border: 1px solid currentColor; font: 500 15px/1 var(--metin); letter-spacing: .12em;
         text-decoration: none; cursor: pointer; background: transparent; color: inherit; transition: background .5s var(--nefes), color .5s var(--nefes), border-color .5s var(--nefes); }
.eylem:hover { background: var(--murekkep); border-color: var(--murekkep); color: var(--kum-50); }
.eylem.acik { color: #fff; border-color: rgba(255,255,255,.7); }
.eylem.acik:hover { background: rgba(255,255,255,.14); border-color: #fff; }
.eylem.dolu { background: var(--kum-500); color: var(--murekkep); border-color: var(--kum-500); }
.eylem.dolu:hover { background: #fff; border-color: #fff; }


.tepe { position: relative; height: 100svh; min-height: 600px; overflow: hidden; background: var(--gece); }
.tepeGorsel { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tepePerde { position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,26,32,.78) 0%, rgba(20,26,32,.22) 58%, rgba(20,26,32,.38) 100%); }
.tepeYazi { position: absolute; left: 6vw; right: 6vw; bottom: 11vh; color: #fff; max-width: 980px; }
.etiketKucuk { font: 500 12px/1.4 var(--metin); letter-spacing: .3em; opacity: .8; margin-bottom: 18px; }
h1 { font: 300 clamp(40px, 5.2vw, 92px)/1.04 var(--gosteri); letter-spacing: .01em; }
.tepeAlt { margin-top: 16px; font: italic 300 clamp(20px, 1.7vw, 30px)/1.3 var(--gosteri); opacity: .95; }
.tepeDugmeler { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.tepeTaslak { margin-top: 18px; color: #fff; }


.neden { background: var(--kum-500); padding: 7vw 6vw; }
.nedenBant { display: grid; grid-template-columns: 1.15fr 1fr 1.1fr .9fr .95fr; max-width: 1320px; margin: 0 auto; border-top: 1px solid var(--murekkep); }
.neden1 { padding: 30px 26px 8px 0; }
.neden1 + .neden1 { padding-left: 26px; border-left: 1px solid var(--cizgi); }
.nedenBuyuk { font: 300 clamp(30px, 2.6vw, 48px)/1.08 var(--gosteri); }
.nedenAlt { margin-top: 12px; font-size: .95em; line-height: 1.6; }
.kaynak { margin-top: 12px; font-size: 12.5px; line-height: 1.55; letter-spacing: .04em; opacity: .72; }
.bakistaListe { margin: 0; border-top: 1px solid var(--murekkep); }
.bakistaListe > div { display: grid; grid-template-columns: minmax(7.5em, 32%) minmax(0, 1fr); gap: 18px; align-items: baseline; padding: 17px 0 16px; border-bottom: 1px solid var(--cizgi); }
.bakistaListe dt { font: 500 12px/1.4 var(--metin); letter-spacing: .22em; opacity: .78; }
.bakistaListe dd { margin: 0; font: 300 clamp(22px, 1.9vw, 32px)/1.2 var(--gosteri); }
.yolSerit { display: flex; flex-wrap: wrap; gap: 12px 0; margin: 22px 0 18px; padding: 16px 0 0; border-top: 1px solid var(--cizgi); list-style: none; font-size: .95em; }
.yolSerit li { padding-right: 16px; margin-right: 16px; border-right: 1px solid var(--cizgi); white-space: nowrap; }
.yolSerit li:last-child { padding-right: 0; margin-right: 0; border-right: 0; }
.yolSerit span { display: block; margin-bottom: 3px; font-size: 12px; letter-spacing: .14em; opacity: .75; }
.yolBag { margin-left: 18px; color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; white-space: nowrap; }
.yolBag::after { content: "\00a0\2192"; font-size: .8em; }


.bolum { padding: 11vw 6vw; }
.zKum { background: var(--kum-400); }
.zKum2 { background: var(--kum-200); }
.zDeniz { background: linear-gradient(to bottom, rgba(242,246,248,.7), rgba(158,183,197,.55)); }
.zGece { background: var(--deniz); color: var(--kum-50); }
.ikiKolon { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 6vw; align-items: center; max-width: 1320px; margin: 0 auto; }
.ikiKolon.ters { grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr); }
.tekKolon { max-width: 62ch; margin: 0 auto; text-align: center; }
.tekKolon.genis { max-width: 980px; }
.tekKolon.sol { text-align: left; }
h2 { font: 300 clamp(34px, 3.3vw, 62px)/1.12 var(--gosteri); margin-bottom: 24px; }
.metin p + p, .tekKolon > p + p { margin-top: 1em; }
.taslak { margin-top: 1em; font-size: .9em; font-style: italic; opacity: .72; }
.gorsel figcaption { margin-top: 12px; font: 400 13px/1.5 var(--metin); letter-spacing: .1em; opacity: .75; }


.alanTablo { width: 100%; margin-top: 28px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.alanTablo caption { caption-side: top; text-align: left; padding-bottom: 8px; font-size: 13px; letter-spacing: .12em; opacity: .75; }
.alanTablo th, .alanTablo td { padding: 11px 12px 11px 0; text-align: left; border-bottom: 1px solid var(--cizgi); white-space: nowrap; }
.alanTablo thead th { font-size: 13px; font-weight: 500; letter-spacing: .08em; border-bottom: 1px solid var(--murekkep); }
.alanTablo tbody th { font: 300 24px/1 var(--gosteri); }
.alanTablo .bekler { font-style: italic; opacity: .6; }


.konsept { list-style: none; padding: 0; margin: 34px 0 0; border-top: 1px solid var(--murekkep); counter-reset: k; text-align: left; }
.konsept li { counter-increment: k; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 8px 24px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--cizgi); }
.konsept li::before { content: counter(k); font: italic 300 22px/1 var(--gosteri); color: var(--altin); }
.kAd { font: 300 clamp(22px, 1.9vw, 32px)/1.2 var(--gosteri); }
.kNot { font-size: .92em; opacity: .8; text-align: right; }


.surec { list-style: none; padding: 0; margin: 36px 0 0; display: flex; }
.surec li { flex: 1; position: relative; padding: 26px 8px 0; text-align: center; border-top: 1px solid var(--murekkep); }
.surec li::before { content: ''; position: absolute; top: -5px; left: 50%; width: 9px; height: 9px; margin-left: -4.5px; background: var(--kum-200); border: 1px solid var(--murekkep); transform: rotate(45deg); }
.sNo { display: block; font: italic 300 18px/1 var(--gosteri); color: var(--altin); }
.sAd { display: block; margin-top: 8px; font: 300 clamp(20px, 1.7vw, 28px)/1.2 var(--gosteri); }


.sss { margin-top: 28px; border-top: 1px solid var(--murekkep); }
.sss details { border-bottom: 1px solid var(--cizgi); }
.sss summary { display: flex; justify-content: space-between; gap: 24px; padding: 18px 0; cursor: pointer; list-style: none; font: 300 clamp(21px, 1.7vw, 28px)/1.3 var(--gosteri); }
.sss summary::-webkit-details-marker { display: none; }
.sss summary::after { content: '+'; flex: none; font: 300 26px/1 var(--gosteri); color: var(--altin); }
.sss details[open] summary::after { content: '–'; }
.sss details p { margin: 0 0 18px; max-width: 46em; }


.basin { list-style: none; padding: 0; margin: 18px 0 0; border-top: 1px solid var(--murekkep); }
.basin li { padding: 20px 0 22px; border-bottom: 1px solid var(--cizgi); }
.bTarih { font-size: 13px; letter-spacing: .1em; opacity: .75; }
.basin a { display: block; margin-top: 8px; font: 300 clamp(22px, 1.8vw, 32px)/1.35 var(--gosteri); text-decoration: none; }
.basin a::after { content: '\00a0\2197'; font-size: .55em; opacity: .6; }
.basin a:hover { color: var(--deniz); }


.zGece .taslak { opacity: .82; }
.isKart { margin-top: 36px; padding: 24px 26px; border: 1px solid rgba(254,254,253,.35); }
.isKart .etiketKucuk { margin-bottom: 10px; }
.isBag { margin-top: 18px; }
.isBag::after { content: "\00a0\2192"; }
.isBaslik { font: 300 clamp(24px, 2vw, 32px)/1.2 var(--gosteri); margin-bottom: 10px; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 26px; padding: clamp(24px, 3vw, 44px); border: 1px solid rgba(254,254,253,.3); }
.alan { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.alan label { font-size: 14px; letter-spacing: .08em; opacity: .9; }
.ince { opacity: .7; }
.alan input, .alan select { width: 100%; padding: 10px 0; border: 0; border-bottom: 1px solid rgba(254,254,253,.5); border-radius: 0; background: transparent; color: inherit; font: 400 18px/1.4 var(--metin); }
.alan select { appearance: none; -webkit-appearance: none; }
.alan select option { color: var(--murekkep); }
.alan input:focus, .alan select:focus { outline: none; border-bottom-color: var(--kum-50); box-shadow: 0 1px 0 var(--kum-50); }
.onay { grid-column: 1 / -1; display: grid; grid-template-columns: 20px 1fr; gap: 12px; font-size: 14.5px; line-height: 1.5; cursor: pointer; }
.onay input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--kum-500); }
.form .eylem { grid-column: 1 / -1; justify-self: start; }
.formNot { grid-column: 1 / -1; min-height: 1.2em; font-size: 15px; opacity: .85; }

.basinHepsi { margin-top: 22px; font-size: 16px; letter-spacing: .04em; }


.alt { background: var(--deniz-sis); color: var(--deniz); padding: 5vw 6vw 3vw; }
.altSatir { display: flex; justify-content: space-between; align-items: flex-end; gap: 4vw; flex-wrap: wrap; }
.altLogo { height: 64px; width: auto; }
.altBag { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; font-size: 16px; letter-spacing: .04em; }
.altBag a { text-decoration: none; border-bottom: 1px solid rgba(47,66,87,.4); padding-bottom: 2px; }
.altAyrac { height: 1px; background: rgba(47,66,87,.28); margin: 3vw 0 1.4vw; }
.not { font-size: 13.5px; line-height: 1.75; letter-spacing: .1em; opacity: .9; }
.not + .not { margin-top: .6em; }


@media (prefers-reduced-motion: no-preference) {

  .js .belir { opacity: 0; transform: translateY(26px); transition: opacity .6s var(--nefes), transform .6s var(--nefes); }
  .js .belir:has(img, video, picture) { transition-duration: .4s; }
  .js .belir.gorundu { opacity: 1; transform: none; }
}

@media (max-width: 1100px) {
  .nedenBant { grid-template-columns: 1fr 1fr; }
  .neden1:nth-child(2n+1) { padding-left: 0; border-left: 0; }
  .neden1 { padding-bottom: 26px; border-bottom: 1px solid var(--cizgi); }
}
@media (max-width: 860px) {
  .ust { height: 60px; padding: 0 16px; grid-template-columns: auto 1fr; }
  .menu { display: none; }
  .marka { justify-self: start; }
  .marka img { height: 34px; }
  .otelBag { font-size: 14px; }
  .ikiKolon, .ikiKolon.ters { grid-template-columns: 1fr; gap: 34px; }
  .ikiKolon.ters .gorsel { order: 2; }
  .bolum { padding: 72px 20px; }
  .neden { padding: 56px 20px; }
  .nedenBant { grid-template-columns: 1fr; }
  .neden1, .neden1 + .neden1 { padding: 22px 0; border-left: 0; }
  .tepeYazi { left: 20px; right: 20px; bottom: 9vh; }
  .alanTablo { font-size: 14px; }
  .alanTablo th, .alanTablo td { padding-right: 8px; }
  .konsept li { grid-template-columns: 34px minmax(0, 1fr); }
  .kNot { grid-column: 2; text-align: left; }
  .surec { flex-direction: column; }
  .surec li { text-align: left; padding: 14px 0 14px 28px; border-top: 0; border-left: 1px solid var(--murekkep); }
  .surec li::before { top: 22px; left: -5px; margin-left: 0; }
  .sAd { display: inline; margin: 0 0 0 10px; }
  .form { grid-template-columns: 1fr; }
  .altBag { align-items: flex-start; }
}


.haritaBag { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; white-space: nowrap; }
.haritaBag::after { content: '\00a0\2197'; font-size: .8em; }


.sonra .ikiKolon { grid-template-columns: minmax(0, .8fr) minmax(0, 1.3fr); }
.sonra .eylem { margin-top: 28px; }
.sonra .eylem::after { content: '\00a0\2192'; }
.cephe { margin: 0; min-width: 0; }
.cepheKaydir { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cephe svg { display: block; width: 100%; height: auto; min-width: 560px; font-family: var(--gosteri); }
.cephe .govde { fill: #f7f4ea; stroke: var(--murekkep); stroke-width: 1.2; }
.cephe .cati { fill: var(--murekkep); }
.cephe .cam { fill: #dfe7ea; stroke: var(--murekkep); stroke-width: .8; }
.cephe .kayit { stroke: var(--murekkep); stroke-width: .6; }
.cephe .direk { stroke: #3c4046; stroke-width: 3; }
.cephe .yelken { fill: rgba(214,196,160,.55); stroke: var(--altin); stroke-width: .8; }
.cephe .saksi { fill: #fbfaf6; stroke: var(--murekkep); stroke-width: .7; }
.cephe .bitki { fill: #7d8c5a; }
.cephe .zemin { stroke: var(--murekkep); stroke-width: 1; }
.cephe .no { font: italic 400 20px var(--gosteri); fill: var(--altin); text-anchor: middle; }
.cephe a .vurgu { fill: transparent; transition: fill .12s linear; }
.cephe a:hover .vurgu, .cephe a:focus-visible .vurgu { fill: rgba(154,130,92,.14); }
.cephe figcaption { margin-top: 12px; font: 400 13px/1.5 var(--metin); letter-spacing: .1em; opacity: .75; }
@media (max-width: 860px) { .sonra .ikiKolon { grid-template-columns: minmax(0, 1fr); } }


:focus-visible { outline: 2px solid var(--altin); outline-offset: 3px; }
.tepe :focus-visible, .ust:not(.inmis) :focus-visible { outline-color: #fff; }
.tepe.kisa { height: auto; min-height: 0; padding: 170px 6vw 90px; }
.tepe.kisa .tepeYazi { position: static; }
@media (max-width: 860px) { .tepe.kisa { padding: 130px 20px 60px; } }


.kaynak, .taslak, .bTarih, .alanTablo .bekler { opacity: .88; }
.alt .not { opacity: 1; }
.igBag { display: inline-flex; align-items: center; gap: 8px; }
.igIkon { display: inline-flex; width: 20px; height: 20px; flex: 0 0 auto; }
.igIkon svg { width: 100%; height: 100%; fill: currentColor; }
.gizliBaslik { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 860px) {
  .alt { padding: 46px 20px 30px; }
  .altBag { font-size: 14px; gap: 12px; }
  .alt p.not { font-size: 12.5px; letter-spacing: .04em; line-height: 1.6; margin-bottom: 8px; }
}