/* tabaka.css — TABAKA: adobe.com's main-page grammar on Olympos content. tabaka.css.md */

:root {
  --beyaz: #FFFFFF;                 /*§1 page ground*/
  --siyah: #000000;                 /* dark sheets */
  --gri: #F8F8F8;                   /* gray surface, cards on white */
  --metin: #2C2C2C;                 /* text on light */
  --ikincil: #6B6B6B;               /* secondary text on light */
  --acik: rgba(255,255,255,.64);    /* secondary text on dark */
  --kirmizi: #D42A22;               /* the one saturated chrome color: CTAs, focus §1 */
  --koyu: #7E1B14;                  /* hover / pressed */
  --cam: rgba(255,255,255,.08);     /* glass */
  --cam-cizgi: rgba(255,255,255,.11);
  --gecis: cubic-bezier(.23,1,.32,1);   /* reveals §5 */
  --renk: cubic-bezier(.42,0,0,1);      /* color changes §5 */
  color-scheme: light;
}

* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: auto; background: var(--beyaz); overflow-x: clip; }   /*§4 the full-bleed strip + the classic scrollbar*/
body {
  color: var(--metin);
  font: 400 1.25rem/1.5 'Schibsted Grotesk', system-ui, sans-serif;   /*§2 body 20/30*/
  -webkit-text-size-adjust: 100%;
}
::selection { background: var(--kirmizi); color: #fff; }
a { color: inherit; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; transition: color .3s var(--renk); }
:focus-visible { outline: 2px solid var(--kirmizi); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { text-wrap: balance; }
img { display: block; max-width: 100%; height: auto; }
b { font-weight: 800; }   /* no tabular figures in prose: tnum made "46 . 000" (eye pass) §2 */

.atla { position: absolute; left: 1rem; top: -4rem; z-index: 30; background: var(--siyah); color: #fff; padding: .5rem 1rem; text-decoration: none; border-radius: 999px; }
.atla:focus { top: 5rem; }

/* ---------- the scale §2: one family, weight makes the hierarchy ---------- */
.d1 { font-weight: 900; font-size: clamp(2.75rem, 5.55vw, 5rem); line-height: .95; letter-spacing: -.04em; max-width: 14ch; }
.d2 { font-weight: 800; font-size: clamp(2rem, 3.05vw, 2.75rem); line-height: 1.15; letter-spacing: -.02em; max-width: 22ch; margin-bottom: 3rem; }
h3 { font-weight: 800; font-size: 1.5rem; line-height: 1.25; }
.kunye { font-weight: 700; font-size: 1rem; line-height: 1.25; margin-bottom: 1.5rem; }
.alt-satir { color: var(--acik); max-width: 40ch; margin-top: -1.5rem; }
.beyaz .alt-satir, .gri .alt-satir { color: var(--ikincil); }
.adet { font-weight: 400; font-size: .875rem; color: var(--ikincil); margin-left: .5rem; font-variant-numeric: tabular-nums; }
.sayi { font-weight: 800; font-size: clamp(2.5rem, 3.9vw, 3.5rem); line-height: 1; letter-spacing: -.03em; }
.birim { font-weight: 700; font-size: 1rem; color: var(--ikincil); }

/* ---------- the floating glass pill §2 ---------- */
.ust {
  position: fixed; top: 8px; left: 8px; right: 8px; z-index: 10;
  display: flex; align-items: center; gap: 1.5rem; padding: .5rem .5rem .5rem 1.1rem;
  border-radius: 16px; color: var(--metin);
  background: rgba(255,255,255,.78); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
  transition: background-color .3s var(--renk), box-shadow .3s var(--renk), color .3s var(--renk);
}
/* at the top of the page, over the photo, the pill is not there yet (anim layer only) §2 */
html[data-anim]:not(.kaydi) .ust { background: transparent; box-shadow: none; color: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
.marka { display: flex; align-items: center; gap: .55rem; text-decoration: none; }
.marka .soz { font-weight: 800; font-size: 1.125rem; letter-spacing: -.02em; }
.ust nav { display: flex; gap: .25rem; margin-left: auto; }
.ust nav a { font-size: 1rem; font-weight: 700; text-decoration: none; padding: .45rem .85rem; border-radius: 999px; transition: background-color .3s var(--renk); }
.ust nav a:hover { background: rgba(127,127,127,.16); }
#hareket { font: 700 .875rem/1 'Schibsted Grotesk', system-ui, sans-serif; color: inherit; background: none; border: 0; box-shadow: inset 0 0 0 1.5px currentColor; border-radius: 999px; padding: .55rem .9rem; cursor: pointer; touch-action: manipulation; transition: background-color .3s var(--renk); }
#hareket:hover { background: rgba(127,127,127,.16); }

/* ---------- buttons: the pill is the only shape an action takes §2 ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; height: 50px; padding: 0 1.5rem; border-radius: 999px; font: 700 1rem/1 'Schibsted Grotesk', system-ui, sans-serif; text-decoration: none; touch-action: manipulation; white-space: nowrap; transition: background-color .3s var(--renk), color .3s var(--renk), transform .15s var(--gecis); }
.btn.kucuk { height: 40px; padding: 0 1.1rem; font-size: .875rem; }
.birincil { background: var(--kirmizi); color: #fff; }
.birincil:hover { background: var(--koyu); }
.birincil:active { transform: scale(.98); }
.ikincil { box-shadow: inset 0 0 0 1.5px currentColor; color: inherit; }
.ikincil:hover { background: rgba(127,127,127,.16); }

/* ---------- KAPAK: the photograph, the scrim, one sentence, two tabs §3 ---------- */
.kapak { position: relative; min-height: 100lvh; background: var(--siyah); color: #fff; }
.kapak-resimler { position: absolute; inset: 0; overflow: hidden; }
.sahne { position: absolute; inset: 0; }
.sahne:not(.aktif) { opacity: 0; }
.sahne img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: center; }
/* archive slides (q183): 400–530px originals filling the viewport — a touch more darkness so the
   upscale reads as atmosphere, the type stays the subject */
.sahne.arsiv::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.3); }   /* .18 left the lead over bright shelf tubs (eye pass) */
/* the scrim: the mailbox picture is bright on the left where the sentence sits (q179) */
.kapak-resimler::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.3) 55%, rgba(0,0,0,.44) 100%), linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.5) 100%); }
.kapak-ic { position: relative; max-width: 75rem; margin: 0 auto; padding: 9rem 1.5rem 2rem; min-height: 100lvh; display: grid; grid-template-rows: 1fr auto; gap: 3rem; }
.kapak-metin { align-self: center; max-width: 40rem; }
.ozet { max-width: 34ch; margin-top: 1.5rem; }
.cta-satir { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; }
.sekmeler { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.sekme { position: relative; overflow: hidden; display: flex; align-items: center; gap: 1rem; min-width: 14rem; padding: 1.25rem 1.25rem; border-radius: 16px; background: var(--cam); box-shadow: inset 0 0 0 1px var(--cam-cizgi); color: #fff; font-weight: 700; font-size: 1rem; text-decoration: none; transition: background-color .3s var(--renk), color .3s var(--renk); }
.sekme::after { content: '›'; margin-left: auto; font-size: 1.25rem; line-height: 1; }
.sekme.aktif { background: #fff; color: var(--metin); }
.sekme i { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--kirmizi); transform: scaleX(0); transform-origin: left; }
.durdur { margin-left: auto; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--cam); box-shadow: inset 0 0 0 1px var(--cam-cizgi); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; touch-action: manipulation; transition: background-color .3s var(--renk); }
.durdur:hover { background: rgba(255,255,255,.2); }
.durdur svg { fill: currentColor; }
.durdur .sur, .durdur[aria-pressed="true"] .dur { display: none; }
.durdur[aria-pressed="true"] .sur { display: block; }

/* ---------- the sheets: each one lies on the one before it, 32px corners, no shadow §4 ---------- */
.tabaka { position: relative; z-index: 1; border-radius: 32px; margin-top: -32px; padding: 8rem 1.5rem 0; }   /* all four corners: the bottom pair shows over a band §10 */
.alt.tabaka { border-radius: 32px 32px 0 0; }
.tabaka.beyaz { background: var(--beyaz); color: var(--metin); }
.tabaka.gri { background: var(--gri); color: var(--metin); }
.tabaka.siyah { background: var(--siyah); color: #fff; }
.tabaka > .ic + .ic { margin-top: 8rem; }                     /* between blocks: the big register §4 */
.tabaka > :last-child { padding-bottom: 8rem; }
.ic { max-width: 75rem; margin: 0 auto; }
section, .is[id], .belge[id] { scroll-margin-top: 5rem; }      /* the fixed pill's clearance; two stories are tab targets (q183), every legal document is an index target §14 */
.uclu { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.ikili { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; align-items: start; }
.uclu h3 + p, .gruplar h3 + ul { margin-top: .5rem; }
.uclu p { color: var(--ikincil); }
.gruplar ul { list-style: none; padding: 0; color: var(--ikincil); font-size: 1rem; line-height: 1.5; }
.gruplar li + li { margin-top: .25rem; }
.gruplar > div + div { margin-top: 0; }
.gruplar { row-gap: 3rem; }

/* ---------- the bands: a full-bleed picture the next sheet rises over §10 ---------- */
.bant { position: relative; z-index: 0; min-height: 72vh; margin-top: -32px; background: var(--siyah); color: #fff; display: flex; align-items: flex-end; overflow: hidden; }
.bant-resim { position: absolute; inset: 0; }
.bant-resim img { position: absolute; left: 0; top: -12%; width: 100%; height: 124%; object-fit: cover; }   /* room for the drift */
.bant-resim::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.3), rgba(0,0,0,.58)); }
.bant-soz { position: relative; width: 100%; max-width: 75rem; margin: 0 auto; padding: 10rem 1.5rem 7rem; font-weight: 800; font-size: clamp(2rem, 3.05vw, 2.75rem); line-height: 1.15; letter-spacing: -.02em; }

/* ---------- the archive strip and the stories §5 ---------- */
.serit { margin: 3rem calc(50% - 50vw) 0; overflow-x: auto; scroll-snap-type: x proximity; }
.serit-ic { display: flex; gap: 1rem; width: max-content; padding: 0 1.5rem; }
.serit-ic img { height: 15rem; width: auto; border-radius: 16px; scroll-snap-align: start; }
html[data-anim] .serit { overflow: hidden; }
html[data-anim] .serit-ic { animation: serit-kay 70s linear infinite; padding: 0; }
html[data-anim] .serit:hover .serit-ic { animation-play-state: paused; }   /* a reader can look §5 */
html[data-anim] .serit-ic img { transition: transform .3s var(--gecis); }
html[data-anim] .serit-ic img:hover { transform: translateY(-6px); }
.foto-kutu { overflow: hidden; border-radius: 16px; }     /* JS-only box for the settle §5; static page has no box */
.kart-foto .foto-kutu { height: 100%; }
@keyframes serit-kay { from { transform: translateX(0); } to { transform: translateX(-50%); } }   /* the clone is the second half */
.siyah .ic .is:first-of-type { margin-top: 8rem; }
.is { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; }
.is + .is { margin-top: 5rem; }
.is-yazi { max-width: 40ch; }
.is-yazi h3 + p { margin-top: .5rem; }
.is-yazi p + h3 { margin-top: 1.5rem; }
.siyah .is-yazi p { color: var(--acik); }
.siyah b { color: #fff; }
.foto img { border-radius: 16px; width: 100%; }
.foto figcaption { font-size: .875rem; font-weight: 700; margin-top: .5rem; color: var(--ikincil); }
.siyah .foto figcaption { color: var(--acik); }
.is .foto + .foto { margin-top: 1rem; }

/* ---------- cards on white: a gray tile, no border, no shadow §6 ---------- */
.kart { background: var(--gri); border-radius: 16px; padding: 2rem; }
.gri .kart { background: var(--beyaz); }
.kayit .rakam { display: flex; align-items: baseline; gap: .5rem; margin-bottom: 1.5rem; }
.kayit h3 + p { margin-top: .5rem; color: var(--ikincil); font-size: 1rem; line-height: 1.5; }
.kart-foto { align-self: stretch; }
.kart-foto img { height: 100%; object-fit: cover; }
.genis { margin-top: 2rem; }
.genis img { max-height: 32rem; width: 100%; object-fit: cover; }

/* ---------- print chips, the price, the İş Emri §7–§8 ---------- */
.levha { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0; }
.levha span { font-size: .875rem; font-weight: 700; letter-spacing: .06em; background: var(--beyaz); padding: .5rem .8rem; border-radius: 8px; }
.ikili > p + p, .ikili p + .levha, .ikili .levha + p { margin-top: 1rem; }
.fiyat { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .5rem; }
.fiyat + .fiyat { margin-top: .75rem; }
.fiyat-bag { margin-top: 1rem; font-weight: 700; }
.isemri fieldset { border: 0; padding: 0; }
.isemri legend { font-weight: 800; font-size: 1.5rem; line-height: 1.25; margin-bottom: 1rem; }
.isemri label { display: flex; align-items: center; gap: .75rem; padding: .5rem .75rem; margin: 0 -.75rem; border-radius: 8px; font-size: 1rem; font-weight: 700; cursor: pointer; transition: background-color .3s var(--renk); }
.isemri label:hover { background: rgba(0,0,0,.05); }
.isemri input { accent-color: var(--kirmizi); width: 1.1rem; height: 1.1rem; margin: 0; }
.mesaj { font-size: 1rem; line-height: 1.5; background: var(--beyaz); border-radius: 8px; padding: 1rem; margin: 1.5rem 0; }
.isemri .not { font-size: .875rem; color: var(--ikincil); margin-top: 1rem; }
address { font-style: normal; }
address p + p { margin-top: .5rem; }

/* ---------- the footer: black sheet, the wordmark cropped at the edge §9 ---------- */
.alt { overflow: hidden; }
.alt > .ic { padding-bottom: 0 !important; }
.alt-orta { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 2rem 4rem; }
.alt-orta nav { display: grid; gap: .5rem; }
.alt-orta nav a, .alt address a { text-decoration-color: rgba(255,255,255,.3); }
.alt-orta nav a:hover, .alt address a:hover { text-decoration-color: #fff; }
.alt address { color: var(--acik); }
.alt .btn { margin-left: auto; }
.alt-kunye { display: flex; align-items: center; gap: .75rem; margin-top: 5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.14); font-size: .875rem; color: var(--acik); }
.alt-kunye a { margin-left: auto; text-decoration-color: rgba(255,255,255,.3); }   /* "Yasal" §14 */
.alt-kunye a:hover { text-decoration-color: #fff; }
.dev-soz { font-weight: 900; font-size: clamp(6rem, 24vw, 22rem); line-height: .78; letter-spacing: -.05em; margin: 2rem 0 -.22em; text-align: left; white-space: nowrap; }

/* ---------- 404.html: the footer's black sheet as a whole page §13 ---------- */
.yok { background: var(--siyah); color: #fff; min-height: 100lvh; overflow: hidden; display: flex; flex-direction: column; }
.yok-ic { flex: 1; width: 100%; max-width: 75rem; margin: 0 auto; padding: 8rem 1.5rem 4rem; }
.yok-ic img { margin-bottom: 2rem; }
.yok-ic p { color: var(--acik); max-width: 34ch; margin-top: 1.5rem; }

/* ---------- yasal/index.html: the legal documents, a page without script §14 ---------- */
.yasal-ust { background: var(--siyah); color: #fff; padding: 9rem 1.5rem 7rem; }   /* 9rem clears the pill; the sheet below lies 32px over this one */
.yasal-dizin { margin-top: 4rem; }
.dizin-ad { font-weight: 800; font-size: 1.5rem; line-height: 1.25; }              /* the h3 face on a <p>: the index repeats the sheets' titles, it is not an outline */
.yasal-ust .adet { color: var(--acik); }
.yasal-dizin ul { list-style: none; padding: 0; margin-top: .75rem; }
.yasal-dizin li + li { margin-top: .25rem; }
.yasal-dizin a { text-decoration-color: rgba(255,255,255,.3); }
.yasal-dizin a:hover { text-decoration-color: #fff; }
.belge { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; }   /* title | text, the story rows' grid */
.belge + .belge { margin-top: 5rem; }
.belge .bos p { font-size: 1rem; line-height: 1.5; color: var(--ikincil); }
/* the lawyers' text replaces .bos inside .belge-metin: p, h4, ul, ol, dl are the whole kit */
.belge-metin > * + * { margin-top: 1rem; }
.belge-metin > :first-child { margin-top: 0; }
.belge-metin h4 { font-weight: 800; font-size: 1.25rem; line-height: 1.3; margin-top: 2rem; }
.belge-metin ul { padding-left: 1.25rem; }
.belge-metin ol { padding-left: 2rem; }                              /* room for "10." — at 1.25rem the numerals hung out of the column (eye pass) */
.belge-metin li + li { margin-top: .25rem; }
.belge-metin li::marker { font-variant-numeric: normal; }            /* the UA gives markers tnum: "1 ." with a digit-wide gap, as in §2's "46 . 000" */
.belge-metin dt { font-weight: 800; }
.belge-metin dd + dt { margin-top: 1rem; }

/* ---------- reveal gating: hidden ONLY when the animation layer armed itself §5 ---------- */
html[data-anim] [data-belir], html[data-anim] .gruplar li, html[data-anim] .levha span, html[data-anim] .sekmeler > * { opacity: 0; }
html[data-anim] .parca { display: inline-block; overflow: clip; vertical-align: bottom; }
html[data-anim] .parca > span { display: inline-block; transform: translateY(110%); }

@media (max-width: 48rem) {
  .ust { flex-wrap: wrap; gap: .75rem; padding: .5rem .5rem .5rem .9rem; }
  .ust nav { order: 3; width: 100%; overflow-x: auto; margin-left: 0; padding-bottom: .25rem; }
  .ust .btn.kucuk { display: none; }
  #hareket { margin-left: auto; }
  .kapak-ic { padding-top: 9rem; }
  .sekme { min-width: 0; flex: 1 1 10rem; }
  .tabaka { padding: 5rem 1.5rem 0; }
  .tabaka > :last-child { padding-bottom: 5rem; }
  .tabaka > .ic + .ic { margin-top: 5rem; }
  .uclu, .ikili, .is, .belge { grid-template-columns: 1fr; }
  .belge { gap: 1rem; }
  .yasal-ust { padding: 9rem 1.5rem 5rem; }
  .yasal-dizin { margin-top: 3rem; }
  .gruplar { row-gap: 2rem; }
  .serit-ic img { height: 11rem; }
  .siyah .ic .is:first-of-type { margin-top: 5rem; }
  .alt .btn { margin-left: 0; }
  .d2 { margin-bottom: 2rem; }
  section, .is[id], .belge[id] { scroll-margin-top: 7.5rem; }   /* the two-row pill covered the first title line after an anchor jump (eye pass, 360) */
}