/* Tema doğrudan elemana renk veriyor; miras kırılıyordu. */
.fhr-kok{ color: var(--sc-ink) !important; }
.fhr-kok :where(h1,h2,h3,h4,h5,p,a,span,strong,b,em,i,li,div,
                figure,figcaption,nav,button){ color: inherit !important; }

/* ---- Marka zemini: altı renk, iki yüz ---------------------------------- */
  .fhr-kok {
    --sc-canvas:     #0B0A09;   /* saf siyah değil, sıcağa çalan koyu */
    --sc-surface:    #16130F;
    --sc-ink:        #F2EDE3;
    --sc-ink-soft:   #8F877A;   /* nötr gri değil, zeminin sıcaklığından türetildi */
    --sc-accent:     #F0B429;   /* Formatek sarısı, sayfanın tek aksanı */
    --sc-accent-ink: #14110B;
    --sc-font-display: "Archivo", "Segoe UI", system-ui, sans-serif;
    --sc-font-text:    "Geist", "Segoe UI", system-ui, sans-serif;

    --iplik: 2.4px;             /* 3px sürekli çizgi olarak hantal duruyordu */
  }

  /* ---- Türkçe tuzağı ------------------------------------------------------
     Motorun satır maskesi overflow:hidden. Türkçede İ'nin noktası cap
     height'ın üstünde, Ş'nin çengeli taban çizgisinin altında kalıyor ve
     ikisi de kesiliyor. İngilizce metinde hiç görünmeyen bir hata. Kutuyu
     büyütüp negatif kenar boşluğuyla geri alıyoruz.                        */
  .sc-split {
    padding-top: .20em;    margin-top: -.20em;
    padding-bottom: .14em; margin-bottom: -.14em;
  }

  /* ---- Afiş tipografisi ---------------------------------------------------
     Bu gramerde yazı görselin kendisi, o yüzden taste.md'nin 6rem tavanı
     kalkıyor. Karşılığında harf aralığı sıkılaşıyor: 12vw'de varsayılan
     tracking görünür bir kusur.                                            */
  .afis {
    font-family: var(--sc-font-display);
    font-weight: 800;
    line-height: .92;
    letter-spacing: -.035em;
    text-wrap: balance;
    margin: 0;
  }
  .afis--dev  { font-size: clamp(3rem, 11.5vw, 11rem); }
  /* Afis grameri olcek karsitligiyla calisiyor: ayni basligin icinde uc ayri
     kademe. Hepsi ayni puntoda olunca "buyuk yazi" oluyor, afis olmuyor. */
  .afis--mega { font-size: clamp(3.4rem, 17.6vw, 16.5rem); display: block;
                letter-spacing: -.05em; }
  .afis--mini { font-size: clamp(1.1rem, 2.4vw, 2.1rem); display: block;
                font-weight: 600; letter-spacing: .01em; color: var(--sc-ink-soft) !important;
                margin-bottom: .12em; }
  .afis--son  { font-size: clamp(1.8rem, 5vw, 4.4rem); display: block;
                letter-spacing: -.03em; margin-top: .04em; }

  /* Kucuk versal etiket. Uc bolumde en fazla bir tane. */
  .etiket {
    font-family: var(--sc-font-text); font-size: .6875rem; font-weight: 500;
    letter-spacing: .22em; text-transform: uppercase; color: var(--sc-accent) !important;
    margin: 0 0 var(--sc-4);
  }

  /* Capa cesitlemesi: her akt ayni yerde baslarsa sayfa tek bolum olur. */
  .capa-son  { display: grid; justify-items: end; }
  .capa-son  > * { max-width: 52ch; }
  .capa-orta { display: grid; justify-items: center; text-align: center; }
  .capa-orta .govde { margin-inline: auto; }
  .bolunmus  { display: grid; gap: var(--sc-5) var(--sc-8);
               grid-template-columns: minmax(0, 14ch) minmax(0, 1fr); align-items: start; }
  @media (max-width: 860px) { .bolunmus { grid-template-columns: 1fr; } }

  /* Derinlik: duz koyu zemin gercek ekranda bantlaniyor. Kenarlari hafifce
     karartmak sayfayi "karanlik bir sayfa" olmaktan cikarip "isikli bir oda"
     yapiyor. Yazinin oturdugu yer bilerek acik birakildi. */
  /* Zemin bomboştu ve iplik havada dikiş atıyor gibi duruyordu. Çok soluk
     bir dokuma: bakınca fark edilmiyor, ama ipliğin bir yüzeye dikildiği
     hissediliyor. */
  /* Çözgü: tezgâhtaki dikey iplikler. Her biri farklı hızda akıyor, hepsi
     çok soluk. Zemine hareket katıyor ama okumayı bölmüyor. */
  .cozgu { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
  .cozgu line { stroke-linecap: round; }
  @media (prefers-reduced-motion: reduce) { .cozgu { opacity: .5; } }

  .kumas {
    position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background-image:
      repeating-linear-gradient(90deg, rgba(242,237,227,.030) 0 1px, transparent 1px 5px),
      repeating-linear-gradient(0deg,  rgba(242,237,227,.022) 0 1px, transparent 1px 5px);
  }

  .vinyet {
    position: fixed; inset: 0; pointer-events: none; z-index: 4;
    background: radial-gradient(135% 100% at 50% 40%,
      transparent 0%, transparent 62%, rgba(0,0,0,.26) 100%);
  }
  .afis--buyuk{ font-size: clamp(2.4rem, 7.5vw, 6.5rem); }
  .afis--orta { font-size: clamp(1.9rem, 4.6vw, 3.6rem); letter-spacing: -.025em; }

  /* Açık yazı koyu zeminde ince görünür: bir kademe kalın, biraz daha açık
     satır arası, biraz daha gevşek harf aralığı. */
  .govde {
    font-family: var(--sc-font-text);
    font-size: clamp(1rem, 1.15vw, 1.125rem);
    line-height: 1.62;
    letter-spacing: .004em;
    color: var(--sc-ink-soft) !important;
    max-width: 46ch;
    text-wrap: pretty;
    margin: 0;
  }
  .govde strong { color: var(--sc-ink) !important; font-weight: 500; }

  .sari { color: var(--sc-accent) !important; }

  /* ---- Kaydırma ipucu ------------------------------------------------------
     Kaydırmayla anlatılan bir sayfada ilk kare durgun duruyor; ziyaretçi
     devamı olduğunu bilmiyor. İpucu ipliğin diliyle: ince bir hat ve
     üzerinde aşağı akan bir nokta. Kaydırma başlar başlamaz siliniyor —
     işini yaptıktan sonra durması gürültü olurdu. */
  /* İpucu akıştan ÇIKIYOR. Düğmelerle aynı satıra koyunca satır üç öğeli
     oldu ve `space-between` düğmeleri ortaya itti; sağda durmaları
     gerekiyordu. Artık sahnenin altına, ortaya sabitleniyor: ne metinle
     ne düğmelerle yarışıyor. */
  /* İpucu başlıkla alt satırın ARASINDAKİ boşlukta duruyor.
     Sahne `align-content: space-between` ile dağıtıyor: başlık üstte,
     alt satır altta, arada ölü bir alan kalıyordu. İpucu tam oraya
     oturuyor — hem boşluğu dolduruyor hem de "devamı var" diyor.
     Alt satıra koymak düğmeleri ortaya itiyordu, bu yüzden orada değil. */
  .kaydir {
    display: flex; align-items: center; gap: var(--sc-3);
    margin: 0; padding: 0; pointer-events: none;
    font-family: var(--sc-font-text); font-size: .6875rem; font-weight: 500;
    letter-spacing: .22em; text-transform: uppercase; color: var(--sc-ink-soft) !important;
    /* Aktın ilk %10'unda kayboluyor. */
    opacity: clamp(0, calc(1 - var(--sc-p, 0) * 10), 1);
    transition: opacity .2s linear;
  }
  .kaydir__yol {
    position: relative; display: block; width: 1px; height: 26px;
    background: linear-gradient(to bottom,
      var(--sc-accent), color-mix(in oklab, var(--sc-accent) 10%, transparent));
  }
  .kaydir__nokta {
    position: absolute; left: -1.5px; top: 0;
    width: 4px; height: 4px; border-radius: 50%; background: var(--sc-accent);
    animation: kaydirAk 1.9s var(--sc-ease-out) infinite;
  }
  @keyframes kaydirAk {
    0%       { transform: translateY(0);    opacity: 0; }
    22%      { opacity: 1; }
    78%      { opacity: 1; }
    100%     { transform: translateY(22px); opacity: 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .kaydir__nokta { animation: none; top: 14px; }
  }

  /* ---- Sahne kabı --------------------------------------------------------- */
  /* Motor bu elemana .sc-stage ekliyor ve position:sticky veriyor. Buraya
     position yazmak pini sessizce öldürüyor: sahne sabitlenmiyor, içerik
     yukarı kayıp gidiyor. z-index sticky ile zaten çalışıyor. */
  .sahne {
    display: grid;
    align-content: center;
    padding: var(--sc-8) var(--sc-gutter);
    z-index: 2;                /* iplik katmanlarının arasında */
  }
  .sahne > * { grid-column: 1; }
  /* Final iki kolonlu: yukarıdaki kural tüm sahne çocuklarını tek kolona
     yığdığı için tişört sol alta düşüyor ve sağ yarı boş kalıyordu. */
  .final > * { grid-column: auto; }

  /* ---- 1 · Hero ----------------------------------------------------------- */
  .hero { align-content: space-between; }

  /* Menü kompozisyonun parçası, sabit çubuk değil. Arka planı da yok. */
  .ust {
    display: flex; flex-wrap: wrap; align-items: baseline;
    gap: var(--sc-3) var(--sc-7);
    padding-top: var(--sc-2);
  }
  /* Menü yok: bu bölüm mevcut bir siteye eklenecek, gezinme zaten orada. */
  .marka { margin: 0; width: clamp(150px, 15vw, 230px); color: var(--sc-accent) !important; }
  .marka__logo { display: block; width: 100%; height: auto; }

  .hero__orta { display: grid; gap: 0; max-width: none; }
  .hero__alt  { display: flex; flex-wrap: wrap; align-items: end; gap: var(--sc-5);
                justify-content: space-between; padding-bottom: var(--sc-3); }

  /* ---- Eylem -------------------------------------------------------------- */
  /* Düğmeler bilerek küçük: hero'nun işi ikna etmek, düğme göstermek
     değil. Kocaman iki blok afişin ağırlığını kendine çekiyordu. */
  .eylem {
    display: inline-flex; align-items: center; gap: var(--sc-2);
    font-family: var(--sc-font-display); font-weight: 700; font-size: .9375rem;
    letter-spacing: .01em;
    background: var(--sc-accent); color: var(--sc-accent-ink) !important;
    padding: 10px 20px; border: 0; border-radius: 3px;
    text-decoration: none; white-space: nowrap;
    box-shadow: 0 1px 0 rgba(255,255,255,.28) inset,
                0 6px 18px -12px rgba(240,180,41,.5);
    transition: transform .13s var(--sc-ease-out), background-color .16s var(--sc-ease-out);
  }
  @media (hover: hover) and (pointer: fine) { .eylem:hover { background: #FFC544; } }
  .eylem:active { transform: translateY(1px); }
  .eylem.fhr-kok :focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
  .eylem__ok { font-size: 1.1em; line-height: 1; }

  /* İkincil eylem: aynı ağırlıkta iki dolu buton koyarsan ikisi de birincil
     olmaktan çıkıyor. Bu yüzden çerçeveli. */
  .eylem--ikincil {
    background: transparent; color: var(--sc-ink) !important;
    box-shadow: inset 0 0 0 1px rgba(242,237,227,.28);
  }
  @media (hover: hover) and (pointer: fine) {
    .eylem--ikincil:hover { background: transparent; color: var(--sc-accent) !important;
                            box-shadow: inset 0 0 0 1px var(--sc-accent); }
  }
  .eylemler { display: flex; flex-wrap: wrap; gap: var(--sc-3); }

  /* ---- 3 · Tekrar ızgarası -----------------------------------------------
     Dikişler aktın ilerlemesiyle tek tek birikiyor: "beş yüz kez" cümlesi
     yazıyla değil, ekranda olan şeyle kuruluyor. */
  .tekrar { gap: var(--sc-7); }
  .dikisler {
    display: grid; grid-template-columns: repeat(9, 1fr);
    gap: 13px 10px; width: min(38ch, 100%);
  }
  /* Duz yatay cubuklar yukleme cubugu gibi okunuyordu. Gercek dikis egik
     atilir ve her biri birbirinin ayni degildir: hafif aci ve uzunluk
     farki kumasa dikilmis hissi veriyor. */
  .dikisler span {
    display: block; height: 3px; border-radius: 2px;
    background: var(--sc-accent);
    transform: rotate(-14deg) scaleX(var(--u, 1));
    opacity: clamp(0, calc(((var(--sc-p, 1) - .08) * 66) - var(--i)), 1);
  }
  .dikisler span:nth-child(3n)   { --u: .88; }
  .dikisler span:nth-child(5n)   { --u: 1.06; transform: rotate(-11deg) scaleX(var(--u)); }
  .dikisler span:nth-child(7n)   { --u: .94; transform: rotate(-17deg) scaleX(var(--u)); }
  @media (prefers-reduced-motion: reduce) { .dikisler span { opacity: 1; } }

  /* ---- 4 · Gerçekler ------------------------------------------------------ */
  .gercekler { display: grid; gap: var(--sc-6); }
  .gercek {
    display: grid; gap: var(--sc-2);
    padding-block: var(--sc-4);
    border-top: 1px solid rgba(242,237,227,.12);
  }
  .gercek:first-child { border-top: 0; }
  /* Silme kutusu yazının kendi kutusundan ayrı: line-height .92 ile kırpılan
     çıkıntılar (İ noktası, ğ şapkası) burada kesilmiyor. */
  .gercek__basliksarma { overflow: hidden; padding: .18em 0; margin: -.18em 0; }
  .gercek__not { font-size: .95rem; }

  /* ---- 5 · Final ---------------------------------------------------------- */
  /* Damga ortada, tişört sağ köşeden kadraja taşarak giriyor. Amaç onu
     incelemek değil, scroll'da hareket eden büyük bir kütle olması. */
  /* DİKKAT: buraya position yazma. Bu eleman sahnenin kendisi ve motor ona
     position:sticky veriyor; relative yazmak pini sessizce öldürüyor.
     Mutlak konumlu çocuk için sticky zaten kapsayıcı blok kuruyor. */
  /* Alt bosluk ustten kucuk: hikaye bitince sitenin kendi
   icerigi hemen devam ediyor, arada olu kadraj kalmiyor. */
  .final { display: grid; padding-block: var(--sc-8) var(--sc-5); }
  /* Damga kesinlikle ortada kalacak. Üstteki satırın sağ ucu tişörtün parlak
     omzuna denk gelip kontrastı düşürüyordu; bloğu kaydırmak yerine satırı
     daraltıyoruz, böylece damga ortada duruyor. */
  .final__sol {
    position: relative; z-index: 2;
    display: grid; align-content: space-between; justify-items: center;
    gap: var(--sc-6); text-align: center; height: 100%;
  }
  .final__sol .govde { color: var(--sc-ink) !important; margin-inline: auto; }
  /* Sahne overflow:clip, o yüzden sağdan taşan kısım temiz kesiliyor. */
  /* Alt etek kadrajın içinde kalmalı: sahnenin alt kenarındaki düz kesik
     hata gibi okunuyordu. Taşma yalnızca sağ kenardan, o kasıtlı duruyor. */
  .final__sag {
    position: absolute; right: -16%; top: 50%; translate: 0 -50%;
    width: min(80vw, 1060px); height: 104%;
    z-index: 0; pointer-events: none;
  }

  /* 3D tişört: finalin zemini, kahramanı değil. */
  #tuval {
    display: block; width: 100%; height: 100%;
    opacity: 0; transition: opacity 1.1s var(--sc-ease-out);
  }
  #tuval.geldi { opacity: 1; }

  .damga { position: relative; display: grid; justify-items: center; gap: var(--sc-3); }

  /* Harfler soldan sağa açılıyor: --sc-p aktın kendi ilerlemesi.
     0.18 ile 0.72 arasına eşleniyor, öncesi kapalı sonrası tam. */
  .gizli { position: absolute; width: 1px; height: 1px; overflow: hidden;
           clip-path: inset(50%); white-space: nowrap; }

  /* El yazısı logo zaten tek sürekli bir çizgi. Soldan sağa açılınca
     yazılıyormuş gibi okunuyor ve iğne tam açılan kenarda ilerliyor:
     "iğnenin iplikten geçtiği belli değil" sorununun asıl çözümü bu. */
  .damga__yer { position: relative; width: min(74vw, 720px); }
  .damga__logo {
    --ac: clamp(0, calc((var(--sc-p, 0) - .05) / .42), 1);
    display: block; width: 100%; height: auto; color: var(--sc-accent) !important;
    clip-path: inset(-12% calc((1 - var(--ac)) * 100%) -12% 0);
    filter: drop-shadow(0 6px 22px rgba(0,0,0,.7));
  }
  .damga__igne {
    --ac: clamp(0, calc((var(--sc-p, 0) - .05) / .42), 1);
    position: absolute; top: 50%; left: calc(var(--ac) * 100%);
    width: 30px; height: 178px; overflow: visible;
    transform: translate(-50%, -52%) rotate(21deg);
    opacity: clamp(0, calc(var(--ac) * 14), 1);
  }
  .damga__igne .igne__govde { fill: #CFC7B6; filter: drop-shadow(0 3px 7px rgba(0,0,0,.8)); }
  .damga__igne .igne__parlak{ fill: #FBF7EE; opacity: .85; }
  .damga__igne .igne__goz   { fill: var(--sc-canvas); }
  /* İpliğin iğne gözünden geçtiği açıkça görünsün. */
  .iplik .igne__iplik, .damga__igne .igne__iplik {
    fill: none; stroke: var(--sc-accent); stroke-width: 2.6; stroke-linecap: round;
  }

  .damga__yazi {
    --ac: clamp(0, calc((var(--sc-p, 0) - .18) / .54), 1);
    font-family: var(--sc-font-display); font-weight: 800;
    font-size: clamp(2.6rem, 13vw, 12rem);
    letter-spacing: .02em; line-height: 1; margin: 0; color: var(--sc-ink) !important;
    clip-path: inset(-.25em calc((1 - var(--ac)) * 100%) -.25em -.05em);
  }

  /* Dikiş çizgisi yazının taban hizasında, açılan kenarın hemen önünde.
     Kesikler sabit kalıyor, açılmayı clip yapıyor: dashoffset tek başına
     sadece fazı kaydırır, çizgiyi kısaltmaz. */
  .damga__dikis {
    --ac: clamp(0, calc((var(--sc-p, 0) - .03) / .44), 1);
    display: block; width: 100%; height: 26px; overflow: visible;
    clip-path: inset(-40% calc((1 - var(--ac)) * 100%) -40% 0);
  }
  .damga__dikis path {
    fill: none; stroke: var(--sc-accent); stroke-width: var(--iplik);
    stroke-linecap: round; stroke-dasharray: 26 22;
  }
  /* Son düğüm: dikiş bitince atılıyor. */
  .dugum {
    --at: clamp(0, calc((var(--sc-p, 0) - .50) / .10), 1);
    width: 30px; height: 30px;
    /* Nabız dış halkayı %22 büyütüyor ve halka viewBox'ın dışına taşıyor;
       SVG varsayılan olarak kendi kutusunu kırptığı için kenarlar
       kesiliyordu. Kutuyu büyütmek yerine kırpmayı kaldırıyoruz: ölçüler
       ve yerleşim aynı kalıyor. */
    overflow: visible;
    transform: scale(calc(.5 + var(--at) * .5)) rotate(calc(var(--at) * 180deg));
    opacity: var(--at);
  }
  .dugum circle { fill: none; stroke: var(--sc-accent); stroke-width: 3; }
  /* Düğüm atıldıktan sonra sakin bir nabız: dikişin bittiğini işaret ediyor. */
  .dugum circle:last-child { animation: nabiz 2.6s var(--sc-ease-out) infinite; }
  @keyframes nabiz {
    0%, 70%, 100% { opacity: .45; transform-origin: 50% 50%; scale: 1; }
    35%           { opacity: .9;  scale: 1.22; }
  }
  @media (prefers-reduced-motion: reduce) {
    .dugum circle:last-child { animation: none; }
  }

  /* ---- İmza hareketi: kesilmeyen iplik ------------------------------------
     İki katman aynı yolu çiziyor ama kesikleri birbirini tamamlıyor. Biri
     içeriğin arkasında, biri önünde. Böylece iplik yazının bir üstünden bir
     altından geçiyor: sayfaya çizilmiş değil, sayfadan geçirilmiş oluyor. */
  .iplik { position: fixed; inset: 0; pointer-events: none; }
  .iplik--arka { z-index: 1; }
  .iplik--on   { z-index: 3; }
  .iplik path {
    fill: none; stroke: var(--sc-accent);
    stroke-width: var(--iplik); stroke-linecap: round;
  }
  .iplik--on path { opacity: .95; }
  /* İki katman AYNI parlaklıkta olmalı. Arkadakini söndürmek ipliği düz
     zeminde ortadan renk değiştiriyormuş gibi gösteriyordu. Örgü hissini
     zaten yazının kendisi veriyor: arka katmanın harflere denk gelen
     parçasını yazı kapatıyor, ön katmanınki üstte kalıyor. */
  .iplik--arka path { opacity: .95; }
  .iplik.sondu { opacity: 0; transition: opacity .7s var(--sc-ease-out); }

  /* İğne: ipliğin sayfadan geçtiği sabit nokta. Kaydırdıkça iplik onun
     içinden akıyor. "Terzi havası"nı tek başına taşıyan detay bu. */
  /* 5x60 px gerçekçi orandı ama sayfada hiç fark edilmiyordu. Büyütüldü,
     gözü açıldı, kenarına parlama kondu: metal olduğu anlaşılsın. */
  .iplik .igne__govde { fill: #CFC7B6; stroke: none;
                        filter: drop-shadow(0 3px 6px rgba(0,0,0,.75)); }
  .iplik .igne__parlak{ fill: #FBF7EE; stroke: none; opacity: .85; }
  .iplik .igne__goz   { fill: var(--sc-canvas); stroke: none; }

  /* ---- Alt bilgi ---------------------------------------------------------- */

  /* ---- Telefon ------------------------------------------------------------
     Afiş tipini bir kademe indiriyoruz: 11.5vw masaüstü tabanı 390px'te
     başlığı altı satıra sarıyor. */
  @media (max-width: 700px) {
    .fhr-kok { --iplik: 2.5px; }
    .afis--dev   { font-size: clamp(2.5rem, 13vw, 4rem); }
    .afis--buyuk { font-size: clamp(2rem, 10vw, 3rem); }
    .hero__orta  { max-width: none; }
    .marka { width: clamp(128px, 34vw, 170px); }
    /* Telefonda düğmeler alt alta tam genişlik olunca ekranın üçte birini
       kaplıyordu. Yan yana ve küçük: afiş önde kalıyor. */
    .eylem { font-size: .875rem; padding: 9px 15px; }
    .eylemler { gap: var(--sc-2); }
    /* İğne küçük logoya göre çok uzun kalıyor ve üstteki satırın altından
       geçip kontrastı bir karede 1.06:1'e düşürüyordu. */
    .damga__igne { height: 112px; width: 20px; }
    .final { padding-block: var(--sc-6); }
    .final__sag { right: -30%; width: 128vw; height: 62%; top: 68%; }
    .hero__alt { flex-direction: column; align-items: stretch; gap: var(--sc-4); }
  }

  @media (prefers-reduced-motion: reduce) {
    /* Daha az ve daha yumuşak, sıfır değil: anlamı taşıyan opaklık kalıyor. */
    .damga__logo { clip-path: none; }
    .damga__igne { display: none; }
    .dugum { opacity: 1; transform: none; }
  }

/* --- Kutulu Elementor kabından kurtulma -----------------------------
   Hero, Elementor'un flex konteynerinin içinde duruyor. Yalnızca
   width:100vw vermek yetmiyordu: kap dar olduğu için flex-shrink
   hero'yu geri daraltıyor, iki yanda şerit kalıyordu. Kesin ölçüyü
   wp-koprusu.js piksel olarak veriyor; buradakiler taban kural. */
.fhr-kok{
  width:100vw; max-width:100vw;
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  flex:0 0 auto; align-self:stretch;
  /* Sabit katmanlar (iplik, iğne, vinyet) sitenin yapışkan başlığının
     üstüne çıkıyordu; hero kendi yığın bağlamını kuruyor. */
  position:relative; z-index:0; isolation:isolate;
}

/* Menü hero'nun üstüne binince başlık altında kalmasın.
   İki sınıf birden şart: ayar açık olsa bile menü gerçekten
   biniyorsa boşluk ekleniyor. Mobilde Woodmart başlığı binmiyor,
   orada bu boşluk hero'nun tepesinde bomboş bir bant bırakıyordu.
   --fhr-menu'yü wp-koprusu.js gerçek başlığı ölçüp yazıyor. */
.fhr-kok--header.fhr-kok--biniyor .hero{
  padding-top:calc(var(--fhr-menu, clamp(96px,11vh,150px))
                   + clamp(48px, 7vh, 100px));
}

/* Hero'nun sarı logosu menü satırıyla aynı hizaya çekiliyor.
   Akışta kalınca menünün epey altına düşüyor ve hizasız görünüyordu.
   Yükseklik merkezin iki katı: içerik ortalanınca merkez tam
   --fhr-menu-orta'ya oturuyor. Sahne position:sticky, yani konumlu;
   mutlak yerleşim ona göre çözülüyor.

   Yalnızca geniş ekranda: mobilde bandın solunda hamburger duruyor,
   logoyu oraya taşımak ikisini üst üste getiriyor. Telefonda logo
   menünün altında, hero'nun içinde kalıyor.

   left/right SIFIR: mutlak yerleşim kapsayıcının İÇ BOŞLUK kutusuna
   göre çözülüyor ve sahnenin zaten 88 piksellik iç boşluğu var.
   Oraya bir de gutter yazınca logo tam iki katı içeride kalıyordu —
   başlıkla hizasız görünmesinin sebebi buydu. */
@media (min-width:1025px){
  .fhr-kok--header.fhr-kok--biniyor .ust{
    position:absolute; top:0; left:0; right:0;
    height:calc(var(--fhr-menu-orta, 72px) * 2);
    align-items:center; padding-top:0; margin:0; pointer-events:none;
  }
  .fhr-kok--header.fhr-kok--biniyor .ust .marka{ pointer-events:auto; }
}