/* Terekeme · Karapapak — ortak görsel dil
   Yazı: Stardom (başlık), Panchang (etiket, yıl), Supreme (gövde). Hepsi yerel woff2.
   Renk: keçe kreması, mürekkep, kök boya kırmızısı, çivit, zerdeçal, ceviz. */

@font-face { font-family: 'Stardom'; src: url(../fonts/stardom-400.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Panchang'; src: url(../fonts/panchang-var.woff2) format('woff2'); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Supreme'; src: url(../fonts/supreme-var.woff2) format('woff2'); font-weight: 100 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Supreme'; src: url(../fonts/supreme-400-italic.woff2) format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --kece: #efe6d4;
  --kece-2: #e6d9c0;
  --kece-3: #d6c3a0;
  --murekkep: #17110e;
  --murekkep-2: #2a201b;
  --soluk: #6b5a4c;
  --kok: #a3281c;
  --kok-acik: #c4412c;
  --kok-koyu: #6c1912;
  --civit: #1b2541;
  --civit-2: #27355b;
  --zerdecal: #d9982a;
  --zerdecal-acik: #f0c46a;
  --ceviz: #4a2e1f;
  --yosun: #5d6b3a;

  --f-baslik: 'Stardom', 'Iowan Old Style', 'Times New Roman', serif;
  --f-etiket: 'Panchang', 'Arial Black', system-ui, sans-serif;
  --f-govde: 'Supreme', 'Segoe UI', system-ui, sans-serif;

  --kenar: clamp(16px, 4.4vw, 64px);
  --ust-h: 76px;
  --e-cikis: cubic-bezier(.16, 1, .3, 1);
  --e-yumusak: cubic-bezier(.65, 0, .35, 1);
  --kece-doku: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .25  0 0 0 0 .17  0 0 0 0 .11  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23f)' opacity='.32'/></svg>");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0; background: var(--kece); color: var(--murekkep);
  font: 400 17px/1.62 var(--f-govde); font-feature-settings: 'kern', 'liga';
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body::before { /* keçe dokusu */
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: var(--kece-doku); mix-blend-mode: multiply; opacity: .55;
}
img, svg, canvas, video { display: block; max-width: 100%; }
figure { margin: 0; }
blockquote { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--kok); color: var(--kece); }
:focus-visible { outline: 2px solid var(--zerdecal); outline-offset: 3px; }
.gizli { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- tipografi ---------- */
.etiket { font: 600 11px/1.3 var(--f-etiket); letter-spacing: .16em; text-transform: uppercase; }
.etiket--k { font-size: 10px; letter-spacing: .18em; }
.baslik-dev { font: 400 clamp(56px, 11.5vw, 210px)/.86 var(--f-baslik); letter-spacing: -.015em; margin: 0; }
.baslik-b { font: 400 clamp(40px, 6.4vw, 112px)/.92 var(--f-baslik); letter-spacing: -.01em; margin: 0; }
.baslik-o { font: 400 clamp(28px, 3.4vw, 54px)/1.02 var(--f-baslik); margin: 0; }
.baslik-k { font: 400 clamp(22px, 2vw, 30px)/1.12 var(--f-baslik); margin: 0; }
.giris-metni { font: 400 clamp(18px, 1.55vw, 23px)/1.55 var(--f-govde); }
.soluk { color: var(--soluk); }
em, i { font-style: italic; }
.vurgu { color: var(--kok); }

/* ---------- motif / şerit ---------- */
.motif { width: 100%; height: auto; shape-rendering: crispEdges; }
.serit { height: 14px; color: var(--kok); }
.serit svg { width: 100%; height: 100%; }
.serit--ince { height: 8px; }

/* ---------- düğmeler (basamaklı köşe) ---------- */
.dugme {
  --c: var(--murekkep); --z: transparent; --y: var(--murekkep);
  position: relative; display: inline-flex; align-items: center; gap: 12px;
  padding: 16px 24px 15px; font: 600 11px/1 var(--f-etiket); letter-spacing: .16em; text-transform: uppercase;
  color: var(--y); isolation: isolate; white-space: nowrap;
  clip-path: polygon(6px 0, calc(100% - 6px) 0, calc(100% - 6px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 6px, 100% 6px, 100% calc(100% - 6px), calc(100% - 3px) calc(100% - 6px), calc(100% - 3px) calc(100% - 3px), calc(100% - 6px) calc(100% - 3px), calc(100% - 6px) 100%, 6px 100%, 6px calc(100% - 3px), 3px calc(100% - 3px), 3px calc(100% - 6px), 0 calc(100% - 6px), 0 6px, 3px 6px, 3px 3px, 6px 3px);
  background: var(--c); transition: color .45s var(--e-cikis);
}
.dugme::before { content: ''; position: absolute; inset: 1.5px; background: var(--kece); z-index: -1;
  clip-path: inherit; transition: transform .55s var(--e-cikis); transform-origin: 50% 100%; }
.dugme:focus-visible::before { transform: scaleY(0); }
.dugme:focus-visible { color: var(--kece); }
@media (hover: hover) { .dugme:hover::before { transform: scaleY(0); } .dugme:hover { color: var(--kece); } }
.dugme--dolu { --c: var(--kok); --y: var(--kece); }
.dugme--dolu::before { background: var(--kok); transform: scaleY(1); }
.dugme--dolu:hover::before { transform: scaleY(0); }
.dugme--dolu:hover { --c: var(--murekkep); }
.dugme--acik { --c: var(--kece); --y: var(--kece); }
.dugme--acik::before { background: var(--zemin, var(--murekkep)); }
.dugme--acik:hover, .dugme--acik:focus-visible { color: var(--murekkep); }
.dugme .ok { width: 14px; height: 10px; flex: none; }

/* ---------- üst çubuk ---------- */
.ust {
  position: fixed; inset: 0 0 auto 0; height: var(--ust-h); z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 0 var(--kenar); color: var(--kece);
  transition: background-color .5s, color .5s, transform .6s var(--e-cikis), border-color .5s;
  border-bottom: 1px solid transparent;
}
.ust::before { content: ''; position: absolute; inset: 0 0 -30px 0; background: linear-gradient(rgba(12, 8, 7, .5), transparent); pointer-events: none; z-index: -1; transition: opacity .5s; }
.ust.ust--acik::before { opacity: 0; }
.ust.ust--acik { color: var(--murekkep); background: color-mix(in srgb, var(--kece) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom-color: rgba(23,17,14,.12); }
.ust.ust--sakli { transform: translateY(-100%); }
.marka { display: flex; align-items: center; gap: 12px; min-width: 0; }
.marka-amblem { display: block; width: 50px; height: 38px; flex: none; color: currentColor; }
.marka-yazi { display: flex; flex-direction: column; line-height: 1; min-width: 0; }
.marka-yazi b { font: 400 23px/0.9 var(--f-baslik); letter-spacing: .005em; }
.marka-yazi span { font: 600 8.5px/1 var(--f-etiket); letter-spacing: .2em; text-transform: uppercase; margin-top: 5px; opacity: .78; white-space: nowrap; }
.menu { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); }
.menu a.m { font: 500 14.5px/1 var(--f-govde); position: relative; padding: 6px 0; opacity: .9; }
.menu a.m::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background:
  repeating-linear-gradient(90deg, currentColor 0 3px, transparent 3px 6px); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--e-cikis); }
.menu a.m[aria-current]::after { transform: scaleX(1); }
@media (hover: hover) { .menu a.m:hover::after { transform: scaleX(1); } }
.ust .dugme { padding: 13px 18px 12px; }
.ust:not(.ust--acik) .dugme { --c: var(--kece); --y: var(--murekkep); }
.ust:not(.ust--acik) .dugme::before { background: var(--kece); }
.ust:not(.ust--acik) .dugme:hover, .ust:not(.ust--acik) .dugme:focus-visible { --c: var(--zerdecal); color: var(--murekkep); }
.menu-ac { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; }
.menu-ac i { display: block; width: 22px; height: 2px; background: currentColor; position: relative; box-shadow: 0 -7px 0 currentColor, 0 7px 0 currentColor; }
.cekmece { position: fixed; inset: 0; z-index: 70; background: var(--civit); color: var(--kece); display: none; flex-direction: column; padding: calc(var(--ust-h) + 10px) var(--kenar) 32px; overflow: auto; }
.cekmece.acik { display: flex; }
.cekmece a.cm { font: 400 44px/1.12 var(--f-baslik); display: flex; align-items: baseline; gap: 14px; padding: 6px 0; border-bottom: 1px solid rgba(239,230,212,.14); }
.cekmece a.cm small { font: 600 10px/1 var(--f-etiket); letter-spacing: .18em; color: var(--zerdecal); }
.cekmece .kapat { position: absolute; top: 16px; right: var(--kenar); width: 44px; height: 44px; font-size: 28px; line-height: 44px; text-align: center; }
.cekmece .serit { margin-top: auto; color: var(--kok); }
@media (max-width: 1080px) { .menu a.m { display: none; } .menu-ac { display: inline-flex; } }
body.cekmece-acik { overflow: hidden; }
/* dokunmatik: sabit katmanda karışım (multiply) ve arka plan bulanıklığı yok — kaydırma her karede bütün sayfayı yeniden karıştırmasın */
@media (pointer: coarse), (hover: none) {
  body::before { display: none; }
  .ust.ust--acik { backdrop-filter: none; -webkit-backdrop-filter: none; background: color-mix(in srgb, var(--kece) 97%, transparent); }
}
@media (max-width: 560px) { .marka-amblem { width: 44px; height: 34px; } .ust .dugme { display: none; } .marka-yazi span { display: none; } .dugme { white-space: normal; line-height: 1.35; max-width: 100%; } }

/* ---------- imleç (yalnız ince işaretçi) ---------- */
.imlec { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; width: 18px; height: 18px; margin: -9px 0 0 -9px; color: var(--kok);
  transition: width .35s var(--e-cikis), height .35s var(--e-cikis), margin .35s var(--e-cikis), opacity .3s; opacity: 0; mix-blend-mode: multiply; }
.imlec .motif { width: 100%; height: 100%; }
.imlec.gorunur { opacity: 1; }
.imlec.buyuk { width: 46px; height: 46px; margin: -23px 0 0 -23px; }
.imlec.koyu { mix-blend-mode: normal; color: var(--zerdecal-acik); filter: drop-shadow(0 0 1.5px rgba(13,10,10,.95)) drop-shadow(0 0 5px rgba(13,10,10,.6)); }
.imlec-yazi { position: fixed; left: 0; top: 0; z-index: 91; pointer-events: none; font: 600 9px/1 var(--f-etiket); letter-spacing: .18em; text-transform: uppercase; color: var(--kece); background: var(--murekkep); padding: 7px 9px 6px; opacity: 0; transition: opacity .25s; white-space: nowrap; }
.imlec-yazi.gorunur { opacity: 1; }
@media (hover: none), (pointer: coarse) { .imlec, .imlec-yazi { display: none; } }
/* Sistem imleci yalnız düz alanlarda gizlenir; bağlantı, düğme ve alanlarda motifle birlikte görünür */
html.ince-imlec { cursor: none; }
html.ince-imlec a, html.ince-imlec button, html.ince-imlec label, html.ince-imlec [data-imlec], html.ince-imlec summary { cursor: pointer; }
html.ince-imlec input, html.ince-imlec textarea { cursor: text; }

/* ---------- alt bilgi ---------- */
.alt { position: relative; z-index: 2; background: var(--murekkep); color: var(--kece); padding: 0 var(--kenar) 28px; overflow: hidden; }
.alt { content-visibility: auto; contain-intrinsic-size: auto 690px; }
@media (max-width: 900px) { .alt { contain-intrinsic-size: auto 1120px; } }
.alt .serit { margin: 0 calc(var(--kenar) * -1); height: 16px; color: var(--kok); }
.alt-ust { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding: 64px 0 56px; border-bottom: 1px solid rgba(239,230,212,.14); }
.alt-ust h4, .alt-ust h2 { margin: 0 0 16px; color: var(--zerdecal); }
.alt-ust ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.alt-ust a:hover { color: var(--zerdecal-acik); }
.alt-soz { font: 400 clamp(26px, 2.4vw, 36px)/1.1 var(--f-baslik); margin: 0 0 18px; max-width: 16ch; }
.alt-marka { display: flex; align-items: flex-end; gap: clamp(16px, 3vw, 52px); margin: 48px 0 26px; color: var(--kece); }
.alt-amblem { display: block; width: clamp(104px, 17vw, 260px); height: auto; color: var(--zerdecal); flex: none; }
.alt-logotip { display: block; width: clamp(190px, 50vw, 760px); height: auto; min-width: 0; }
.alt-son { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; font-size: 13px; }
.alt-son > span { opacity: .7; }
/* Künye: siteyi yapanın işareti. Soluklaştırma yalnız metin aralıklarında; işaret en az .85 */
.kunye { display: inline-flex; align-items: center; align-self: center; flex: none; margin-left: 12px; opacity: .85; transition: opacity .2s; }
.kunye:hover, .kunye:focus-visible { opacity: 1; }
.kunye img { display: block; width: 26px; height: 26px; }
@media (max-width: 640px) { .kunye { margin-left: 0; } }
@media (max-width: 900px) { .alt-ust { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .alt-ust { grid-template-columns: 1fr; gap: 28px; } }

/* ---------- ortak görünüm ---------- */
main { position: relative; z-index: 1; }
.kap { padding-left: var(--kenar); padding-right: var(--kenar); }
.foto { position: relative; overflow: hidden; background: var(--kece-3); }
.foto img { width: 100%; height: 100%; object-fit: cover; filter: sepia(.35) saturate(.82) contrast(1.04); transition: filter .8s var(--e-cikis), transform 1.2s var(--e-cikis); }
.foto:hover img { filter: none; }
.foto::after { content: ''; position: absolute; inset: 0; background-image: var(--kece-doku); mix-blend-mode: multiply; opacity: .5; pointer-events: none; }
figcaption, .alt-yazi { font: 500 12.5px/1.45 var(--f-govde); color: var(--soluk); margin-top: 10px; }

/* JS yoksa ya da hareket azaltılmışsa görünür kalan öğeler */
[data-ac] { opacity: 1; }
html.js:not(.rm) [data-ac] { opacity: 0; }
html.js:not(.rm) [data-ac].acildi { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}