/* ESHIK · W07 · ESHIK sayfası (kullanıcı kararı, 04.11.2026): lockup + slogan, kaydırmayla ilerleyen yedi bölümlük marka hikâyesi, alan bağlantıları.
   Zeytin dünya: bilgi metni kireç ≥ 24 px; küçük metin yalnız kısa tanıtıcı etiket (numara, dil, renk adı) ya da kireç / grafit yüzeyde.
   Hareket: her bölüm (.hk-b) uzun bir kaydırma alanı, içindeki sahne sabitlenir; --p (0–1, assets/eshik.js) yalnız kaydırmanın fonksiyonudur, zamanlı geçiş yok.
   html.hk-js yoksa (JS kapalı ya da azaltılmış hareket) bölümler akışta ve son hâlinde: --p 1; geometri bölümünde 0,5 (çizgiler görünür, sistemi anlatır). */

/* açılış: solda onaylı lockup, sağda slogan; slogan satırı lockup'ın eşik çizgisiyle aynı hizada biter (eşik: lockup yüksekliğinin %70,63'ü) */
.hk-ust { --lh: clamp(260px, 46vh, 440px); max-width: 1180px; margin: 0 auto; padding: clamp(56px, 10vh, 120px) var(--gutter) clamp(72px, 14vh, 160px);
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(40px, 7vw, 112px); align-items: start; }
.hk-logo { margin: 0; }
.hk-logo img { display: block; height: var(--lh); width: auto; }
.hk-sag { position: relative; height: calc(var(--lh) * .7063); display: flex; flex-direction: column; justify-content: flex-end; }
.hk-slogan { margin: 0; max-width: 12ch; font: 600 clamp(40px, 5.2vw, 76px)/1.02 var(--f-display); letter-spacing: -.01em; color: var(--eshik-chalk); }
.hk-tanim { position: absolute; top: 100%; left: 0; margin: 22px 0 0; color: var(--eshik-chalk); }   /* kısa tanıtıcı etiket (descriptor) */

/* hikâye bölümleri */
.hk-b { --p: 1; position: relative; }
.hk-geo { --p: .5; }
html.hk-js .hk-b { height: 230vh; }
.hk-sahne { max-width: 1180px; margin: 0 auto; padding: 72px var(--gutter); display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 32px clamp(40px, 6vw, 96px); align-items: center; }
html.hk-js .hk-sahne { position: sticky; top: var(--bar-h); height: calc(100vh - var(--bar-h)); padding-top: 0; padding-bottom: 0; }
.hk-no { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; color: var(--eshik-chalk); font: 400 15px/1 var(--f-label); letter-spacing: .14em; }
.hk-top { display: flex; align-items: center; gap: 12px; font-size: 12px; }
.hk-top::before { content: ""; width: 34px; height: 2px; background: currentColor; }
.hk-metin h2 { margin: 0 0 20px; font: 600 clamp(32px, 3vw, 44px)/1.08 var(--f-display); letter-spacing: -.005em; color: var(--eshik-chalk); }   /* masaüstünde en çok iki satır: metin sütunu 6fr, başlık en çok 44 px */
.hk-metin p:not(.hk-no) { margin: 0; max-width: 30ch; font: 400 24px/1.45 var(--f-text); color: var(--eshik-chalk); }   /* zeytin üstünde ≥ 24 px */
.hk-gorsel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px; height: min(70vh, 640px); min-width: 0; }
.hk-tanim-svg { position: absolute; width: 0; height: 0; overflow: hidden; }
/* çizgi başlangıcı: sıfır uzunluktaki yuvarlak uç nokta olarak görünmesin diye, ilerleme başlayana dek saydam */
.hk-b svg :is(use, path) { stroke-linecap: round; stroke-linejoin: round; }

/* 01 · İsim: ESHIK soldan sağa açılır; anlamları belirir */
.hk-yazi { width: min(100%, 560px); height: auto; fill: var(--eshik-chalk); overflow: visible;
  clip-path: inset(-2% calc((1 - clamp(0, (var(--p) - .05) / .45, 1)) * 102%) -2% -2%); }
.hk-anlam { display: flex; gap: 56px; opacity: clamp(0, (var(--p) - .64) / .14, 1); }
/* ESHIK ile anlamlar arasında logodaki eşik (kullanıcı kararı A, 09.11.2026): yazı yazılınca kireç çizgi soldan çizilir, ortasında safran ışık açılır (%61,8);
   genişlik yazının görünen genişliği (viewBox 192–9629 / 9629), aynı hizada */
.hk-yazi-esik { display: block; width: calc(min(100%, 560px) * 9437 / 9629); height: 3px; overflow: visible; margin: -14px 0; transform: translateX(1.017%); }
.hk-yazi-esik path, .hk-son-esik path { fill: none; stroke-width: 3; stroke-dasharray: 1; }
.hk-b :is(.hk-yazi-esik, .hk-son-esik) path { stroke-linecap: butt; }   /* yatay esneyen SVG'de yuvarlak uç bozulur */
.hk-yazi-esik .k { stroke: var(--eshik-chalk); stroke-dashoffset: calc(1 - clamp(0, (var(--p) - .42) / .16, 1)); opacity: clamp(0, (var(--p) - .42) * 100, 1); }
.hk-yazi-esik .s { stroke: var(--eshik-saffron); stroke-dashoffset: calc(1 - clamp(0, (var(--p) - .56) / .12, 1)); opacity: clamp(0, (var(--p) - .56) * 100, 1); }
.hk-anlam p { margin: 0; text-align: center; font: 400 13px/1.3 var(--f-label); letter-spacing: .12em; text-transform: uppercase; color: var(--eshik-chalk); }   /* dil adı: kısa etiket */
.hk-anlam b { display: block; margin-bottom: 8px; font: 600 40px/1.1 var(--f-display); letter-spacing: 0; text-transform: none; }

/* 02 · Sekiz: kalem kaldırmadan çizilir */
.hk-sembol { height: 100%; max-height: 520px; width: auto; max-width: 100%; overflow: visible; }
.hk-cizim { fill: none; stroke: var(--eshik-chalk); stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: calc(1 - clamp(0, (var(--p) - .05) / .6, 1)); opacity: clamp(0, (var(--p) - .05) * 100, 1); }

/* 03 · Eşik ve ışık: eşik ortadan iki yana çizilir, sonra safran ışık ortadan açılır */
.hk-sabit { fill: none; stroke: var(--eshik-chalk); stroke-width: 3; }
.hk-esik, .hk-saf { fill: none; stroke-width: 3; stroke-dasharray: 1; }
.hk-esik { stroke: var(--eshik-chalk); stroke-dashoffset: calc(1 - clamp(0, (var(--p) - .05) / .35, 1)); opacity: clamp(0, (var(--p) - .05) * 100, 1); }
.hk-saf { stroke: var(--eshik-saffron); stroke-dashoffset: calc(1 - clamp(0, (var(--p) - .45) / .3, 1)); opacity: clamp(0, (var(--p) - .45) * 100, 1); }

/* 03 doruk anı (kullanıcı onayı, 07.11.2026): sahne boydan boya; sekiz ortada, eşik ekranın iki kenarına uzanır, ışık ortadan açılır; metin altta ortada.
   Eşik 1000 × 3 birimlik SVG, yalnız yatayda esner (çizgi kalınlığı 3 px kalır); zamanlama yukarıdaki .hk-esik / .hk-saf kurallarıyla aynı */
html.hk-js .hk-doruk { height: 330vh; }
.hk-doruk .hk-sahne { max-width: none; grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto auto; justify-items: center; align-items: end; gap: 0; padding-left: 0; padding-right: 0; }
html:not(.hk-js) .hk-doruk .hk-sahne { padding-top: 72px; padding-bottom: 72px; }
.hk-doruk .hk-gorsel { height: auto; align-self: end; }
.hk-doruk .hk-sembol { height: min(40vh, 360px); }
.hk-esik-tam { display: block; width: 100%; height: 3px; margin: clamp(18px, 3.5vh, 34px) 0 clamp(28px, 5vh, 48px); overflow: visible; }
.hk-b .hk-esik-tam path { stroke-linecap: butt; }   /* yatay esneyen SVG'de yuvarlak uç bozulur */
.hk-doruk .hk-metin { max-width: 1180px; padding: 0 var(--gutter) clamp(28px, 6vh, 64px); text-align: center; }
.hk-doruk .hk-no { justify-content: center; }
.hk-doruk .hk-metin h2 { font-size: clamp(36px, 4.6vw, 68px); }
.hk-doruk .hk-metin p:not(.hk-no) { margin: 0 auto; max-width: 36ch; }
/* bölüm ritmi: çift bölümler (02, 04, 06) aynalanır, masaüstünde görsel solda */
@media (min-width: 761px) {
  .hk-ayna .hk-b:nth-child(even) .hk-sahne { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .hk-ayna .hk-b:nth-child(even) .hk-gorsel { order: -1; }
}

/* 04 · Görünmeyen geometri: 55 × 89 poster. Önce çizgisiz; kaydırınca altın oran kareleri, yayı ve sayıları belirir, sonra çekilir; tasarım aynı kalır.
   Web'de kâğıt zemini yok (kullanıcı onayı, 09.11.2026): poster doğrudan zeytin zeminde; çizgiler, sayılar ve tasarım kireç, ışık safran. Onaylı poster değişmez, yalnız web uyarlaması */
.hk-poster { height: 100%; max-height: 640px; width: auto; max-width: 100%; }
.hk-p-zemin { fill: none; }
.hk-p-cizgi { opacity: calc(1 - clamp(0, (var(--p) - .62) / .22, 1)); }
.hk-p-kare rect { fill: none; stroke: var(--eshik-chalk); stroke-width: 1.5; stroke-dasharray: 6 6; opacity: clamp(0, (var(--p) - .12) / .2, 1); }
.hk-p-yay { fill: none; stroke: var(--eshik-chalk); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: calc(1 - clamp(0, (var(--p) - .15) / .35, 1)); opacity: clamp(0, (var(--p) - .15) * 100, 1); }
.hk-p-sayi text { font: 400 16px var(--f-label); letter-spacing: .08em; fill: var(--eshik-chalk); text-anchor: middle; opacity: clamp(0, (var(--p) - .35) / .12, 1); }
.hk-p-sekiz { fill: none; stroke: var(--eshik-chalk); stroke-width: 3; }
.hk-p-esik { fill: none; stroke: var(--eshik-chalk); stroke-width: 3; }
.hk-p-isik { fill: none; stroke: var(--eshik-saffron); stroke-width: 3; }
.hk-p-baslik { font: 600 46px var(--f-display); fill: var(--eshik-chalk); }
.hk-p-esik2 { stroke: var(--eshik-chalk); stroke-width: 6; }
.hk-p-isik2 { stroke: var(--eshik-saffron); stroke-width: 6; }
.hk .hk-poster :is(.hk-p-esik2, .hk-p-isik2) { stroke-linecap: butt; }
.hk-p-metin { font: 400 22px var(--f-text); fill: var(--eshik-chalk); }
.hk-p-yazi { fill: var(--eshik-chalk); }

/* 05 · Dört renk: sırayla belirir. Safran yüzey değildir: eşik üstünde ışık olarak */
.hk-renkler { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 230px)); gap: 20px; width: 100%; justify-content: center; }
.hk-renkler li { --i: 0; position: relative; aspect-ratio: 1; padding: 20px; display: flex; flex-direction: column; justify-content: flex-start; gap: 6px; color: var(--eshik-chalk);
  opacity: clamp(0, (var(--p) - .06 - var(--i) * .14) / .12, 1); }
.hk-renkler li:nth-child(2) { --i: 1; } .hk-renkler li:nth-child(3) { --i: 2; } .hk-renkler li:nth-child(4) { --i: 3; }
.hk-renkler .etiket { font-size: 12px; }
.hk-renkler b { margin-top: auto; font: 600 30px/1.1 var(--f-display); }
.hk-renkler i { font: 400 24px/1.3 var(--f-text); font-style: normal; }
.r-zeytin { background: var(--eshik-olive); box-shadow: inset 0 0 0 2px var(--eshik-chalk); }
.r-kirec { background: var(--eshik-chalk); color: var(--eshik-graphite) !important; }
.r-grafit { background: var(--eshik-graphite); }
.r-safran { box-shadow: inset 0 0 0 2px var(--eshik-chalk); }
.r-isik { position: absolute; left: 20px; right: 20px; top: 46%; height: 4px; background: var(--eshik-chalk); border-radius: 2px; }
.r-isik::after { content: ""; position: absolute; left: 19.1%; right: 19.1%; top: 0; bottom: 0; background: var(--eshik-saffron); border-radius: 2px; }   /* ışık eşiğin %61,8'i */

/* 06 · Mekân: Core Brand Guide V3.2 s. 24 render'ı, sabit açı; eşikten yukarı açılır */
.hk-3d { display: block; width: 100%; max-height: 100%; aspect-ratio: 1; object-fit: cover; object-position: 100% 50%;
  clip-path: inset(calc((1 - clamp(0, (var(--p) - .05) / .4, 1)) * 100%) 0 0 0); }

/* 07 · His: üç söz sırayla; ardından altlarında eşik çizilir, ortasında ışık yanar (kullanıcı onayı, 09.11.2026). Eşik en uzun söz genişliğinde */
.hk-his .hk-gorsel { align-items: flex-start; }
.hk-soz-blok { width: max-content; max-width: 100%; }
.hk-son-esik { display: block; width: 0; min-width: 100%; height: 3px; overflow: visible; margin-top: 18px; }
.hk-son-esik .k { stroke: var(--eshik-chalk); stroke-dashoffset: calc(1 - clamp(0, (var(--p) - .62) / .16, 1)); opacity: clamp(0, (var(--p) - .62) * 100, 1); }
.hk-son-esik .s { stroke: var(--eshik-saffron); stroke-dashoffset: calc(1 - clamp(0, (var(--p) - .8) / .12, 1)); opacity: clamp(0, (var(--p) - .8) * 100, 1); }
.hk-sozler { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; align-self: stretch; align-content: center; }
.hk-sozler li { --i: 0; font: 600 clamp(36px, 4.4vw, 64px)/1.15 var(--f-display); letter-spacing: -.01em; color: var(--eshik-chalk); opacity: clamp(0, (var(--p) - .08 - var(--i) * .18) / .14, 1); }
.hk-sozler li:nth-child(2) { --i: 1; } .hk-sozler li:nth-child(3) { --i: 2; }

/* kredi bandı (kireç; kullanıcı kararı 10.11.2026): kimliği Eshik Studio tasarladı, Studio'ya bağlantı. Etiket .cal-et ve bağlantı .s-git site.css'ten */
.hk-kredi-ic { max-width: 1180px; margin: 0 auto; padding: clamp(64px, 11vh, 120px) var(--gutter); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px 56px; align-items: start; }
.hk-kredi-ic .cal-et { grid-column: 1 / -1; margin: 0; }
.hk-kredi h2 { margin: 0; font: 600 clamp(34px, 4vw, 48px)/1.08 var(--f-display); letter-spacing: -.01em; }
.hk-kredi-ic div p { margin: 0 0 24px; max-width: 40ch; font: 400 21px/1.5 var(--f-text); }
@media (max-width: 760px) { .hk-kredi-ic { grid-template-columns: 1fr; } }

/* son: tek marka, üç alan (P5.1 Threshold Light: hover ve klavye odağında eşikten aşağı yayılan ışık) */
.hk-son-ic { max-width: 1180px; margin: 0 auto; padding: clamp(80px, 14vh, 160px) var(--gutter); }
.hk-son h2 { margin: 0 0 22px; font: 600 clamp(40px, 5vw, var(--s-55))/1.05 var(--f-display); letter-spacing: -.01em; color: var(--eshik-chalk); }
.hk-son-ic > p { margin: 0; max-width: 40ch; font: 400 24px/1.45 var(--f-text); color: var(--eshik-chalk); }
.hk-alanlar { display: flex; flex-wrap: wrap; gap: 8px 40px; margin: 48px 0 0 -16px; }
.hk-alanlar .tl { font: 400 24px/1 var(--f-label); letter-spacing: .12em; padding-left: 16px; padding-right: 16px; }   /* P5.1 20 px → zeytin üstünde 24 px; alan adları Michroma, ana sayfa ve menüyle aynı (kullanıcı kararı, 10.11.2026; M38 açık noktası) */
.hk-son .hk-cagri { margin: 56px 0 0 -16px; }
.hk-son .hk-git { font-size: 24px; padding-left: 16px; padding-right: 16px; }   /* İletişim: P5.1 Threshold Light (K6, kullanıcı kararı 10.11.2026), zeytin üstünde 24 px; eşik metinle hizalı */

/* dar ekran: lockup üstte, slogan altında; sahnede görsel üstte, metin altta */
@media (max-width: 760px) {
  .hk-ust { --lh: 220px; grid-template-columns: 1fr; gap: 36px; }
  .hk-sag { height: auto; }
  .hk-tanim { position: static; margin-top: 18px; }
  .hk-sahne { grid-template-columns: 1fr; gap: 28px; padding: 56px var(--gutter); }
  html.hk-js .hk-b { height: 200vh; }
  html.hk-js .hk-sahne { align-content: center; padding-top: 20px; padding-bottom: 32px; }
  .hk-gorsel { order: -1; height: 40vh; gap: 24px; }
  .hk-metin h2 { font-size: 30px; margin-bottom: 14px; }
  .hk-renkler { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: min(100%, 40vh); }
  .hk-renkler li { padding: 12px; } .hk-renkler b { font-size: 24px; } .hk-renkler i { font-size: 24px; }
  .r-isik { left: 12px; right: 12px; }
  .hk-3d { aspect-ratio: auto; height: 100%; }
  .hk-anlam { gap: 32px; } .hk-anlam b { font-size: 32px; }
  .hk-sozler li { font-size: 34px; }
}
@media (forced-colors: active) { .hk-top::before, .r-isik, .r-isik::after { background: CanvasText; } }