/* ============================================================================
   Darul-Hat — enhance.css
   Paylaşılan görsel zenginleştirme katmanı (atmosfer, tezhip, foil, reveal,
   marquee, sayfa geçişi, eser kart süslemeleri, yeni sayfa bileşenleri).

   KURALLAR
   - Eklemeci: hiçbir mevcut sınıf/işlev ezilmez. Yalnızca yeni sınıflar +
     yeni --fx-* değişkenleri tanımlanır; global token'lar (--ink, --gold-1,
     --gold-grad, --cini, --ease-cine ...) OKUNUR ama yeniden tanımlanmaz.
   - Koyu (varsayılan) + Açık (html[data-theme="light"]) + RTL ([dir="rtl"])
     hepsi ele alınır.
   - prefers-reduced-motion: reduce → tüm animasyon/geçişler anlık görünür.
   - Düşük opaklık, ince altın, müze zarafeti. İçeriği boğmaz.
   - Bu katman global token'lara bağımlıdır; tanımlı değilse zarif fallback verir.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   0) Yerel --fx-* değişkenleri (global'i EZMEZ; sadece yeni isimler)
   -------------------------------------------------------------------------- */
:root{
  /* Altın tonları — global yoksa fallback */
  --fx-gold:           var(--gold-2, #E9CD86);
  --fx-gold-deep:      var(--gold-1, #C8A24A);
  --fx-gold-grad:      var(--gold-grad, linear-gradient(105deg,#C8A24A 0%,#E9CD86 45%,#8C6A2E 100%));
  --fx-cini:           var(--cini, #0E5E5A);

  /* Atmosfer yoğunlukları (KOYU varsayılan) */
  --fx-grain-opacity:    0.05;
  --fx-vignette-opacity: 0.55;
  --fx-mesh-opacity:     0.40;
  --fx-girih-opacity:    0.045;
  --fx-corner-opacity:   0.30;
  --fx-divider-opacity:  0.85;
  --fx-pen-opacity:      0.34;

  /* Zamanlama */
  --fx-ease:    var(--ease-cine, cubic-bezier(.22,1,.36,1));
  --fx-reveal-dur: .9s;
  --fx-wipe-dur:   .6s;

  /* z-index katmanları */
  --fx-z-atmosphere: 0;   /* zeminin üstünde, içeriğin altında */
  --fx-z-pen:        9998;
  --fx-z-wipe:       9999;
}

/* Açık (tezhip) tema — daha hafif, daha sıcak/çini tonları */
html[data-theme="light"]{
  --fx-grain-opacity:    0.035;
  --fx-vignette-opacity: 0.16;
  --fx-mesh-opacity:     0.30;
  --fx-girih-opacity:    0.05;
  --fx-corner-opacity:   0.34;
  --fx-pen-opacity:      0.22;
}

/* ============================================================================
   1) ATMOSFER  (.fx-atmosphere + alt katmanlar — enhance.js body'e enjekte eder)
   ========================================================================== */
.fx-atmosphere{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:var(--fx-z-atmosphere);
  overflow:hidden;
}
.fx-atmosphere > *{
  position:absolute;
  inset:0;
  pointer-events:none;
}

/* 1a) İnce parşömen/film noise — SVG fractalNoise data-URI */
.fx-grain{
  opacity:var(--fx-grain-opacity);
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size:160px 160px;
}
html[data-theme="light"] .fx-grain{ mix-blend-mode:multiply; }

/* 1b) Vignette — kenar karartma (açıkta çok hafif sıcak) */
.fx-vignette{
  background:radial-gradient(120% 90% at 50% 42%,
              transparent 52%,
              rgba(5,4,3,0.45) 100%);
  opacity:var(--fx-vignette-opacity);
}
html[data-theme="light"] .fx-vignette{
  background:radial-gradient(125% 95% at 50% 40%,
              transparent 58%,
              rgba(120,86,30,0.18) 100%);
}

/* 1c) Altın ışık lekeleri (goldmesh) — yumuşak, bulanık */
.fx-goldmesh{
  opacity:var(--fx-mesh-opacity);
  background:
    radial-gradient(40% 38% at 18% 14%, rgba(233,205,134,0.14), transparent 70%),
    radial-gradient(46% 44% at 84% 82%, rgba(200,162,74,0.10), transparent 72%);
  filter:blur(36px);
}
html[data-theme="light"] .fx-goldmesh{
  background:
    radial-gradient(42% 40% at 16% 12%, rgba(201,162,75,0.16), transparent 70%),
    radial-gradient(48% 46% at 86% 84%, rgba(14,94,90,0.08), transparent 72%);
  filter:blur(44px);
}

/* ============================================================================
   2) REVEAL  (.fx-reveal — enhance.js IntersectionObserver .is-in ekler)
   ========================================================================== */
.fx-reveal{
  opacity:0;
  transform:translateY(18px);
  transition:
    opacity var(--fx-reveal-dur) var(--fx-ease),
    transform var(--fx-reveal-dur) var(--fx-ease),
    filter var(--fx-reveal-dur) var(--fx-ease);
  transition-delay:var(--fx-reveal-delay, 0ms);
  will-change:opacity, transform;
}
.fx-reveal.fx-reveal-blur{ filter:blur(10px); }
.fx-reveal.is-in{
  opacity:1;
  transform:none;
  filter:none;
}
/* data-reveal-delay="120" → enhance.js style.setProperty veya class; CSS fallback */
.fx-reveal[data-reveal-delay]{ transition-delay:120ms; }

/* ============================================================================
   3) TEZHİP AYRAÇ  (.tezhip-divider — JS içine SVG enjekte; data-variant)
   ========================================================================== */
.tezhip-divider{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(14px,3vw,30px);
  width:100%;
  margin:clamp(16px,2.6vw,34px) auto;
  opacity:var(--fx-divider-opacity);
  --fx-div-line:84px;
  --fx-div-svg:38px;
}
/* iki yana uzanan ince altın degrade çizgi */
.tezhip-divider::before,
.tezhip-divider::after{
  content:"";
  flex:1 1 auto;
  max-width:var(--fx-div-line);
  height:1px;
  background:linear-gradient(90deg, transparent, var(--fx-gold-deep) 60%, var(--fx-gold) 100%);
}
.tezhip-divider::after{
  background:linear-gradient(270deg, transparent, var(--fx-gold-deep) 60%, var(--fx-gold) 100%);
}
.tezhip-divider svg{
  flex:0 0 auto;
  width:var(--fx-div-svg);
  height:var(--fx-div-svg);
  color:var(--fx-gold);
  overflow:visible;
}
.tezhip-divider svg [stroke]{
  stroke:currentColor;
  fill:none;
  vector-effect:non-scaling-stroke;
}
.tezhip-divider svg [data-fill]{ fill:currentColor; stroke:none; }

/* data-variant boyutları */
.tezhip-divider[data-variant="ince"]{ --fx-div-line:120px; --fx-div-svg:18px; opacity:0.65; }
.tezhip-divider[data-variant="kosebent"]{ --fx-div-line:70px; --fx-div-svg:30px; }
.tezhip-divider[data-variant="sems"]{ --fx-div-line:84px; --fx-div-svg:44px; }

/* Çizilme animasyonu — JS .is-in eklediğinde stroke-dashoffset:0 */
.tezhip-divider svg [data-draw]{
  stroke-dasharray:240;
  stroke-dashoffset:240;
  transition:stroke-dashoffset 1.4s var(--fx-ease);
}
.tezhip-divider.is-in svg [data-draw]{ stroke-dashoffset:0; }

/* Açık temada çini + altın karışım */
html[data-theme="light"] .tezhip-divider svg{ color:var(--fx-gold-deep); }
html[data-theme="light"] .tezhip-divider[data-variant="sems"] svg{ color:var(--fx-cini); }

/* ============================================================================
   4) GİRİH ZEMİN  (.fx-girih — section ::before, faint geometrik yıldız)
   ========================================================================== */
.fx-girih{ position:relative; isolation:isolate; }
.fx-girih::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:var(--fx-girih-opacity);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><g fill='none' stroke='%23C8A24A' stroke-width='1.1'><path d='M60 8 L74 34 L102 34 L80 54 L88 82 L60 66 L32 82 L40 54 L18 34 L46 34 Z'/><circle cx='60' cy='50' r='26'/><path d='M60 24 L60 76 M34 50 L86 50 M42 32 L78 68 M78 32 L42 68'/></g></svg>");
  background-size:120px 120px;
  background-position:center;
  -webkit-mask-image:radial-gradient(120% 100% at 50% 50%, #000 40%, transparent 92%);
          mask-image:radial-gradient(120% 100% at 50% 50%, #000 40%, transparent 92%);
}
html[data-theme="light"] .fx-girih::before{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><g fill='none' stroke='%230E5E5A' stroke-width='1.1'><path d='M60 8 L74 34 L102 34 L80 54 L88 82 L60 66 L32 82 L40 54 L18 34 L46 34 Z'/><circle cx='60' cy='50' r='26'/><path d='M60 24 L60 76 M34 50 L86 50 M42 32 L78 68 M78 32 L42 68'/></g></svg>");
}

/* ============================================================================
   5) FOIL  (.foil — altın varak parıltı; mevcut metin rengini bozmadan)
   ========================================================================== */
.foil{
  background:
    linear-gradient(100deg,
      transparent 0%,
      rgba(255,255,255,0.65) 16%,
      transparent 32%) 0 0 / 220% 100% no-repeat,
    var(--fx-gold-grad);
  background-blend-mode:overlay, normal;
  -webkit-background-clip:text;
          background-clip:text;
  -webkit-text-fill-color:transparent;
          color:transparent;
  animation:fx-foil-sheen 6s linear infinite;
}
@keyframes fx-foil-sheen{
  0%{   background-position:120% 0, 0 0; }
  100%{ background-position:-120% 0, 0 0; }
}
.foil:hover{ filter:brightness(1.12) saturate(1.06); }

/* Açık temada çini+altın ton */
html[data-theme="light"] .foil{
  background:
    linear-gradient(100deg,
      transparent 0%,
      rgba(255,255,255,0.5) 16%,
      transparent 32%) 0 0 / 220% 100% no-repeat,
    linear-gradient(120deg,#A9781F 0%,#C9A24B 30%,#0E5E5A 50%,#C9A24B 70%,#A9781F 100%);
  background-blend-mode:overlay, normal;
  -webkit-background-clip:text;
          background-clip:text;
}

/* ============================================================================
   6) TEZHİP KÖŞELER  (.tezhip-corners — 4 köşe faint altın süsleme)
   enhance.js köşe <i> öğeleri enjekte edebilir; CSS hem ::before/::after hem
   .tezhip-corner__c[1-4] varyantını destekler.
   ========================================================================== */
.tezhip-corners{ position:relative; }
.tezhip-corners::before,
.tezhip-corners::after,
.tezhip-corners > .tezhip-corner{
  content:"";
  position:absolute;
  width:34px; height:34px;
  pointer-events:none;
  opacity:var(--fx-corner-opacity);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'><g fill='none' stroke='%23C8A24A' stroke-width='1.2'><path d='M2 14 V2 H14'/><path d='M2 22 Q2 2 22 2'/><circle cx='6' cy='6' r='2' fill='%23C8A24A' stroke='none'/></g></svg>");
  background-repeat:no-repeat;
  background-size:contain;
}
/* ::before → sol-üst, ::after → sağ-alt (varsayılan iki köşe) */
.tezhip-corners::before{ top:8px; left:8px; transform:rotate(0deg); }
.tezhip-corners::after{ bottom:8px; right:8px; transform:rotate(180deg); }
/* JS enjekte ettiğinde 4 köşe (sırayla) */
.tezhip-corners > .tezhip-corner{ top:8px; left:8px; }
.tezhip-corners > .tezhip-corner:nth-of-type(2){ top:8px; left:auto; right:8px; transform:rotate(90deg); }
.tezhip-corners > .tezhip-corner:nth-of-type(3){ top:auto; bottom:8px; left:auto; right:8px; transform:rotate(180deg); }
.tezhip-corners > .tezhip-corner:nth-of-type(4){ top:auto; bottom:8px; left:8px; transform:rotate(270deg); }

html[data-theme="light"] .tezhip-corners::before,
html[data-theme="light"] .tezhip-corners::after,
html[data-theme="light"] .tezhip-corners > .tezhip-corner{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'><g fill='none' stroke='%23A9781F' stroke-width='1.2'><path d='M2 14 V2 H14'/><path d='M2 22 Q2 2 22 2'/><circle cx='6' cy='6' r='2' fill='%23A9781F' stroke='none'/></g></svg>");
}

/* RTL yatay aynalama */
[dir="rtl"] .tezhip-corners::before{ left:auto; right:8px; transform:scaleX(-1); }
[dir="rtl"] .tezhip-corners::after{ right:auto; left:8px; transform:scaleX(-1) rotate(180deg); }

/* ============================================================================
   7) MANYETİK BUTON  (.magnetic — enhance.js translate transform uygular)
   ========================================================================== */
.magnetic{
  transition:transform .25s ease-out;
  will-change:transform;
}

/* ============================================================================
   8) HAT MARQUEE  (.hat-marquee — hattat isimleri kayan serit; JS track kurar)
   ========================================================================== */
.hat-marquee{
  position:relative;
  overflow:hidden;
  width:100%;
  padding:18px 0;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.hat-marquee__track{
  display:flex;
  flex-wrap:nowrap;
  width:max-content;
  align-items:center;
  gap:clamp(28px,5vw,64px);
  animation:fx-marquee 42s linear infinite;
}
.hat-marquee:hover .hat-marquee__track{ animation-play-state:paused; }
.hat-marquee__item{
  flex:0 0 auto;
  font-family:"Cormorant Garamond",serif;
  font-style:italic;
  font-size:clamp(1.1rem,2.4vw,1.9rem);
  letter-spacing:0.04em;
  color:var(--fx-gold);
  opacity:0.5;
  white-space:nowrap;
}
.hat-marquee__item::after{
  content:"·";
  margin-inline-start:clamp(28px,5vw,64px);
  color:var(--fx-gold-deep);
  opacity:0.6;
}
@keyframes fx-marquee{
  from{ transform:translateX(0); }
  to{   transform:translateX(-50%); }
}
/* RTL yön ters */
[dir="rtl"] .hat-marquee__track{ animation-name:fx-marquee-rtl; }
@keyframes fx-marquee-rtl{
  from{ transform:translateX(0); }
  to{   transform:translateX(50%); }
}
[dir="rtl"] .hat-marquee__item{ font-family:"Amiri",serif; font-style:normal; }
html[data-theme="light"] .hat-marquee__item{ color:var(--fx-gold-deep); opacity:0.55; }

/* ============================================================================
   9) SAYFA GEÇİŞİ  (.fx-wipe — ink-wipe overlay; JS .is-active ile gösterir)
   ========================================================================== */
.fx-wipe{
  position:fixed;
  inset:0;
  z-index:var(--fx-z-wipe);
  pointer-events:none;
  background:linear-gradient(180deg, #0a0807 0%, #1a130a 50%, #0a0807 100%);
  background-image:
    linear-gradient(180deg, rgba(233,205,134,0.10), transparent 40%),
    linear-gradient(180deg, #0a0807 0%, #1a130a 50%, #0a0807 100%);
  transform:scaleY(0);
  transform-origin:top;
  opacity:0;
  transition:transform var(--fx-wipe-dur) var(--fx-ease), opacity var(--fx-wipe-dur) var(--fx-ease);
}
.fx-wipe.is-active{
  transform:scaleY(1);
  opacity:1;
}
/* Geçiş perdesi üstündeki Arapça hüsn-i hat — hikaye bölümündeki Amiri altın
   hat stili. Perde inerken (is-active) zarifçe belirir. */
.fx-wipe__ar{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  overflow:hidden; margin:0; text-align:center;
  font-family:"Amiri",serif; direction:rtl; line-height:1;
  font-size:clamp(170px,32vw,360px); color:var(--gold-1, #C8A24A);
  opacity:0; transform:scale(.985);
  transition:opacity .45s var(--fx-ease) .05s, transform .6s var(--fx-ease) .05s;
  pointer-events:none; user-select:none;
}
.fx-wipe.is-active .fx-wipe__ar{ opacity:.08; transform:scale(1); }
html[data-theme="light"] .fx-wipe.is-active .fx-wipe__ar{ opacity:.10; }
html[data-theme="light"] .fx-wipe{
  background-image:
    linear-gradient(180deg, rgba(201,162,75,0.16), transparent 40%),
    linear-gradient(180deg, #F4E9D2 0%, #EAD9B2 50%, #F4E9D2 100%);
}

/* ============================================================================
   10) PEN TRAIL  (.fx-pen-trail — küçük altın mürekkep imleç izi)
   ========================================================================== */
.fx-pen-trail{
  position:fixed;
  top:0; left:0;
  width:8px; height:8px;
  border-radius:50%;
  pointer-events:none;
  z-index:var(--fx-z-pen);
  background:radial-gradient(circle, var(--fx-gold) 0%, rgba(200,162,74,0.4) 50%, transparent 70%);
  opacity:var(--fx-pen-opacity);
  filter:blur(2px);
  will-change:transform, opacity;
  transform:translate(-50%,-50%);
}

/* ============================================================================
   11) SKELETON  (.skeleton — altın shimmer yükleniyor iskeleti)
   ========================================================================== */
.skeleton{
  position:relative;
  overflow:hidden;
  border-radius:4px;
  background:var(--surface, #15110D);
  border:1px solid var(--hairline, #2A2118);
}
.skeleton::after{
  content:"";
  position:absolute;
  inset:0;
  transform:translateX(-100%);
  background:linear-gradient(90deg,
              transparent,
              rgba(233,205,134,0.10) 45%,
              rgba(233,205,134,0.16) 55%,
              transparent);
  animation:fx-shimmer 1.6s ease-in-out infinite;
}
@keyframes fx-shimmer{
  100%{ transform:translateX(100%); }
}
[dir="rtl"] .skeleton::after{ animation-name:fx-shimmer-rtl; }
@keyframes fx-shimmer-rtl{
  0%{   transform:translateX(100%); }
  100%{ transform:translateX(-100%); }
}

/* ============================================================================
   12) ESER KART ZENGİNLEŞTİRME  (.piece — MEVCUT stilleri EZMEDEN ek katman)
   Mevcut: .piece transition transform, .piece:hover translateY(-6px),
   .frame::after border glow, html[light] .piece::before. Bunlar KORUNUR.
   ========================================================================== */

/* 12a) Hover'da hafif yükselme + gölge artışı (mevcut translateY'ı destekler,
   sadece box-shadow ekler; transform'u tekrar yazmıyoruz, mevcut kazansın) */
.piece{ transition:transform .6s var(--fx-ease), box-shadow .6s var(--fx-ease); }
.piece:hover{
  box-shadow:0 26px 60px -28px rgba(0,0,0,0.7), 0 0 0 1px rgba(200,162,74,0.06);
}
html[data-theme="light"] .piece:hover{
  box-shadow:0 24px 54px -26px rgba(120,86,30,0.34), 0 0 0 1px rgba(154,122,46,0.10);
}

/* 12b) Paspartu (.piece--mat) — iç parşömen mat + ince altın çerçeve */
.piece--mat .frame{
  padding:clamp(10px,2vw,20px);
  background:var(--ink-lift, #14100C);
  border:1px solid rgba(200,162,74,0.22);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,0.4);
}
.piece--mat .frame img{ box-shadow:0 6px 22px -10px rgba(0,0,0,0.6); }
html[data-theme="light"] .piece--mat .frame{
  background:#FBF5E6;
  border-color:rgba(154,122,46,0.34);
  box-shadow:0 10px 30px -16px rgba(120,86,30,0.30), inset 0 0 0 1px rgba(255,255,255,0.5);
}

/* 12c) Duotone görsel (.fx-duotone img) — koyu temada sıcak duotone, hover normal */
.fx-duotone img,
img.fx-duotone{
  filter:sepia(0.32) saturate(1.05) contrast(1.02) brightness(0.92) hue-rotate(-8deg);
  transition:filter .9s var(--fx-ease);
}
.fx-duotone:hover img,
img.fx-duotone:hover,
.piece:hover .fx-duotone img{
  filter:none;
}
html[data-theme="light"] .fx-duotone img,
html[data-theme="light"] img.fx-duotone{
  filter:sepia(0.18) saturate(1.02) contrast(1.0) brightness(0.99);
}

/* 12c-bis) fx-duotone DİRİLTME — base '.piece .frame img' (özgüllük 0,2,1)
   yukarıdaki '.fx-duotone img / img.fx-duotone' (0,1,0) kuralını eziyordu.
   works.js karta 'img.fx-duotone' veriyor → DAHA YÜKSEK özgüllük (0,3,1) +
   !important ile tasarlanan "soğuk duotone → hover'da renk" efektini geri ver.
   Zarif/ince: hafif desatürasyon + ufak sepya; hover'da tam renk. */
.piece .frame img.fx-duotone{
  filter:saturate(0.72) sepia(0.18) brightness(0.94) contrast(1.02) !important;
  transition:filter .6s ease;
}
.piece:hover .frame img.fx-duotone{
  filter:none !important;
}
/* Açık (tezhip) tema — daha incelikli; parşömen sıcaklığını bozmasın */
html[data-theme="light"] .piece .frame img.fx-duotone{
  filter:saturate(0.84) sepia(0.10) brightness(0.99) contrast(1.0) !important;
}
html[data-theme="light"] .piece:hover .frame img.fx-duotone{
  filter:none !important;
}

/* 12d) Meta overlay (.piece__meta) — alttan beliren hat-türü/yıl */
.piece .frame{ position:relative; }
.piece__meta{
  position:absolute;
  inset-inline:0;
  bottom:0;
  z-index:2;
  display:flex;
  flex-wrap:wrap;
  gap:6px 14px;
  align-items:baseline;
  padding:14px 16px;
  font-family:"IBM Plex Mono",monospace;
  font-size:10.5px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--fx-gold);
  background:linear-gradient(0deg, rgba(5,4,3,0.82) 0%, rgba(5,4,3,0.4) 60%, transparent 100%);
  opacity:0;
  transform:translateY(8px);
  transition:opacity .5s var(--fx-ease), transform .5s var(--fx-ease);
  pointer-events:none;
}
.piece:hover .piece__meta,
.piece:focus-within .piece__meta,
.piece:focus .piece__meta{
  opacity:1;
  transform:none;
}
.piece__meta .piece__meta-year{ color:var(--text-2, #B6AC98); }
html[data-theme="light"] .piece__meta{
  color:#F2D88A;
  background:linear-gradient(0deg, rgba(42,33,24,0.86) 0%, rgba(42,33,24,0.42) 60%, transparent 100%);
}
html[data-theme="light"] .piece__meta .piece__meta-year{ color:rgba(247,239,216,0.82); }

/* ============================================================================
   13) GALERİ MASONRY  (.works-masonry — CSS column-count responsive)
   ========================================================================== */
.works-masonry{
  column-count:1;
  column-gap:clamp(16px,2.6vw,32px);
}
@media (min-width:640px){  .works-masonry{ column-count:2; } }
@media (min-width:1024px){ .works-masonry{ column-count:3; } }
.works-masonry .piece{
  break-inside:avoid;
  -webkit-column-break-inside:avoid;
  margin-bottom:clamp(16px,2.6vw,32px);
  display:block;
  width:100%;
}

/* ============================================================================
   14) INK-WRITE  (.ink-write — yazılıyormuş gibi reveal + kalem ucu glow)
   .besmele-hero tipografisi (Amiri, büyük, altın) RTL doğal.
   ========================================================================== */
.ink-write{
  position:relative;
  -webkit-mask-image:linear-gradient(90deg, #000 0, #000 100%);
          mask-image:linear-gradient(90deg, #000 0, #000 100%);
  -webkit-mask-size:0% 100%;
          mask-size:0% 100%;
  -webkit-mask-repeat:no-repeat;
          mask-repeat:no-repeat;
  -webkit-mask-position:left center;
          mask-position:left center;
  transition:-webkit-mask-size 2.2s var(--fx-ease), mask-size 2.2s var(--fx-ease);
}
.ink-write.is-in{
  -webkit-mask-size:100% 100%;
          mask-size:100% 100%;
}
/* RTL'de sağdan açıl */
[dir="rtl"] .ink-write{
  -webkit-mask-position:right center;
          mask-position:right center;
}
/* hareketli kalem ucu glow */
.ink-write::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width:2px;
  left:0;
  background:linear-gradient(180deg, transparent, var(--fx-gold), transparent);
  filter:blur(3px);
  opacity:0;
  transform:translateX(0);
}
.ink-write.is-in::after{
  animation:fx-pen-glow 2.2s var(--fx-ease) forwards;
}
@keyframes fx-pen-glow{
  0%{ opacity:0.9; left:0; }
  90%{ opacity:0.9; left:100%; }
  100%{ opacity:0; left:100%; }
}

.besmele-hero{
  font-family:"Amiri",serif;
  direction:rtl;
  font-size:clamp(2.2rem,8vw,6rem);
  line-height:1.4;
  text-align:center;
  background:var(--fx-gold-grad);
  -webkit-background-clip:text;
          background-clip:text;
  -webkit-text-fill-color:transparent;
          color:transparent;
  text-shadow:0 2px 30px rgba(200,162,74,0.10);
}
html[data-theme="light"] .besmele-hero{
  filter:drop-shadow(0 1px 14px rgba(154,122,46,0.18));
}

/* ============================================================================
   15) ZOOM LENS  (.zoom-lens — dairesel büyüteç base)
   ========================================================================== */
.zoom-lens{
  position:absolute;
  pointer-events:none;
  width:160px; height:160px;
  border-radius:50%;
  border:1.5px solid var(--fx-gold-deep);
  box-shadow:0 12px 40px -12px rgba(0,0,0,0.7), inset 0 0 0 1px rgba(233,205,134,0.18);
  overflow:hidden;
  background-repeat:no-repeat;
  z-index:5;
  opacity:0;
  transition:opacity .25s var(--fx-ease);
}
.zoom-lens.is-on{ opacity:1; }
html[data-theme="light"] .zoom-lens{
  border-color:var(--fx-gold);
  box-shadow:0 12px 36px -12px rgba(120,86,30,0.35), inset 0 0 0 1px rgba(154,122,46,0.20);
}

/* ============================================================================
   16) YENİ SAYFA ORTAK BİLEŞENLER
   ========================================================================== */

/* 16a) .page-hero — üst başlık bandı */
.page-hero{
  position:relative;
  padding:clamp(90px,16vh,180px) 0 clamp(40px,7vw,80px);
  text-align:center;
  isolation:isolate;
}
.page-hero .page-hero__eyebrow{
  font-family:"IBM Plex Mono",monospace;
  font-size:11px;
  letter-spacing:0.24em;
  text-transform:uppercase;
  color:var(--fx-gold-deep);
  opacity:0.85;
  margin-bottom:18px;
}
.page-hero .page-hero__title{
  font-family:"Cormorant Garamond",serif;
  font-weight:400;
  font-size:clamp(2.6rem,7vw,5.4rem);
  line-height:1;
  letter-spacing:-0.02em;
  color:var(--ivory, #EDE6D8);
}
[dir="rtl"] .page-hero .page-hero__title,
body.lang-ar .page-hero .page-hero__title{ font-family:"Amiri",serif; line-height:1.3; }
.page-hero .page-hero__lead{
  max-width:60ch;
  margin:22px auto 0;
  font-family:"Cormorant Garamond",serif;
  font-style:italic;
  font-weight:300;
  font-size:clamp(1.05rem,2vw,1.4rem);
  line-height:1.6;
  color:var(--text-2, #B6AC98);
}
body.lang-ar .page-hero .page-hero__lead{ font-family:"Amiri",serif; font-style:normal; }

/* 16b) .lesson-card — hat türü kartı */
.lesson-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:clamp(22px,3vw,34px);
  background:var(--ink-lift, #14100C);
  border:1px solid var(--hairline, #2A2118);
  text-decoration:none;
  color:inherit;
  transition:transform .5s var(--fx-ease), border-color .5s var(--fx-ease), box-shadow .5s var(--fx-ease);
}
.lesson-card:hover{
  transform:translateY(-5px);
  border-color:rgba(200,162,74,0.45);
  box-shadow:0 24px 56px -28px rgba(0,0,0,0.7);
}
.lesson-card .lesson-card__no{
  font-family:"IBM Plex Mono",monospace;
  font-size:11px;
  letter-spacing:0.2em;
  color:var(--fx-gold-deep);
}
.lesson-card .lesson-card__title{
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(1.5rem,2.6vw,2.1rem);
  line-height:1.1;
  color:var(--ivory, #EDE6D8);
}
body.lang-ar .lesson-card .lesson-card__title{ font-family:"Amiri",serif; }
.lesson-card .lesson-card__glyph{
  font-family:"Amiri",serif;
  font-size:clamp(2.4rem,5vw,3.6rem);
  line-height:1;
  color:var(--fx-gold);
  opacity:0.85;
  direction:rtl;
}
.lesson-card .lesson-card__desc{
  font-family:"Cormorant Garamond",serif;
  font-style:italic;
  font-weight:300;
  font-size:1.02rem;
  line-height:1.6;
  color:var(--text-2, #B6AC98);
}
body.lang-ar .lesson-card .lesson-card__desc{ font-family:"Amiri",serif; font-style:normal; }
html[data-theme="light"] .lesson-card{
  background:#FBF5E6;
  border-color:var(--hairline, #E2D2AC);
}
html[data-theme="light"] .lesson-card:hover{
  border-color:rgba(154,122,46,0.5);
  box-shadow:0 22px 50px -26px rgba(120,86,30,0.32);
}
html[data-theme="light"] .lesson-card .lesson-card__glyph{ color:var(--fx-cini); }

/* 16c) .glossary-item — stil sayfa-içi (sozluk.html); enhance grid kuralı kaldırıldı */

/* Altın gradyan başlıklar (background-clip:text) + dar line-height (.display 0.96)
   alt çıkıntıları (g · ğ · ş · y · p) kırpıyordu. Küçük alt padding kutuyu uzatır. */
.gold-text, .foil{ padding-bottom:0.14em; }
.hero h1.gold-text, .page-hero h1.gold-text{ padding-bottom:0.06em; }

/* 16d) .silsile — dikey zaman çizelgesi (icazet zinciri) */
.silsile{
  position:relative;
  margin:clamp(20px,4vw,40px) 0;
  padding-inline-start:34px;
}
.silsile::before{
  content:"";
  position:absolute;
  inset-inline-start:7px;
  top:6px;
  bottom:6px;
  width:1px;
  background:linear-gradient(180deg, transparent, var(--fx-gold-deep) 12%, var(--fx-gold-deep) 88%, transparent);
  opacity:0.6;
}
.silsile-node{
  position:relative;
  padding:0 0 clamp(26px,4vw,40px);
}
.silsile-node::before{
  content:"";
  position:absolute;
  inset-inline-start:-31px;
  top:6px;
  width:11px; height:11px;
  border-radius:50%;
  background:radial-gradient(circle, var(--fx-gold) 0%, var(--fx-gold-deep) 60%, transparent 75%);
  box-shadow:0 0 0 4px rgba(200,162,74,0.10);
}
.silsile-node .silsile-node__name{
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(1.2rem,2.2vw,1.6rem);
  color:var(--ivory, #EDE6D8);
  line-height:1.15;
}
body.lang-ar .silsile-node .silsile-node__name{ font-family:"Amiri",serif; }
.silsile-node .silsile-node__meta{
  font-family:"IBM Plex Mono",monospace;
  font-size:10.5px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--fx-gold-deep);
  margin-top:5px;
}
.silsile-node .silsile-node__note{
  margin-top:8px;
  font-family:"Cormorant Garamond",serif;
  font-style:italic;
  font-weight:300;
  color:var(--text-2, #B6AC98);
  line-height:1.6;
}
body.lang-ar .silsile-node .silsile-node__note{ font-family:"Amiri",serif; font-style:normal; }
html[data-theme="light"] .silsile-node .silsile-node__name{ color:var(--ivory, #2A2118); }
html[data-theme="light"] .silsile-node::before{ box-shadow:0 0 0 4px rgba(154,122,46,0.12); }
/* RTL: zaten inset-inline-start ile aynalanır; ekstra is yok */

/* ============================================================================
   17) REDUCED MOTION  — tüm animasyon/geçiş anlık; öğeler doğrudan görünür
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .fx-reveal{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
    transition:none !important;
  }
  .fx-reveal-blur{ filter:none !important; }

  .tezhip-divider svg [data-draw]{
    stroke-dashoffset:0 !important;
    transition:none !important;
  }

  .foil{ animation:none !important; }

  .hat-marquee__track{ animation:none !important; }

  .fx-wipe{
    transition:none !important;
    transform:scaleY(0) !important;
    opacity:0 !important;
  }
  .fx-wipe.is-active{ opacity:0 !important; }

  .fx-pen-trail{ display:none !important; }

  .skeleton::after{ animation:none !important; }

  .ink-write{
    -webkit-mask-image:none !important;
            mask-image:none !important;
    transition:none !important;
  }
  .ink-write::after{ animation:none !important; opacity:0 !important; }

  .magnetic{ transition:none !important; }

  .piece,
  .piece__meta,
  .fx-duotone img,
  img.fx-duotone,
  .piece .frame img.fx-duotone,
  .lesson-card,
  .zoom-lens{ transition:none !important; }
  /* meta hover yine de görünür kalmalı; sadece geçiş kapanır */
}

/* ============================================================================
   FOOTER MÜHÜR (.end .tugra ﷲ) — her iki temada altın parıltı + besmele
   ========================================================================== */
.end .tugra,
html[data-theme="light"] .end .tugra{
  background:
    linear-gradient(100deg, transparent 0%, rgba(255,255,255,0.9) 14%, transparent 30%) 0 0 / 230% 100% no-repeat,
    var(--fx-gold-grad);
  background-blend-mode:overlay, normal;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  text-shadow:none; font-size:44px;
  animation:fx-foil-sheen 3.6s linear infinite, fx-seal-glow 2.6s ease-in-out infinite;
}
@keyframes fx-seal-glow{
  0%,100%{ filter:drop-shadow(0 0 7px rgba(242,202,80,0.30)); }
  50%{     filter:drop-shadow(0 0 22px rgba(242,202,80,0.70)); }
}
@media (prefers-reduced-motion:reduce){
  .end .tugra{ animation:none; filter:drop-shadow(0 0 12px rgba(242,202,80,0.45)); }
}

/* besmele — ﷲ mührünün hemen altında */
.end .seal-besmele{
  text-align:center; font-family:"Amiri",serif; direction:rtl;
  font-size:clamp(15px,2.1vw,21px); line-height:1; letter-spacing:0;
  margin:4px auto 30px; color:#C8A24A; opacity:0.95;
}
html[data-theme="light"] .end .seal-besmele{ color:#0E5E5A; opacity:1; }

/* ============================================================================
   İMLEÇ — yuvarlak custom cursor yerine site-altını NORMAL ok
   ========================================================================== */
.cursor-ring, .cursor-dot{ display:none !important; }
@media (hover:hover) and (pointer:fine){
  body, body *{
    cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 25 25'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0.4' y2='1'%3E%3Cstop offset='0' stop-color='%23F0DCA0'/%3E%3Cstop offset='0.5' stop-color='%23C8A24A'/%3E%3Cstop offset='1' stop-color='%238C6A2E'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M4 2.6L4 20.4L8.9 16.1L11.9 22.2L14.5 21L11.5 15.1L17.8 14.7Z' fill='url(%23g)' stroke='%23231703' stroke-width='0.8' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") 4 3, auto !important;
  }
  input, textarea, select, [contenteditable="true"]{ cursor:text !important; }
}

/* ============================================================================
   NAVBAR MARKASI "Dârü'l-Hat" — altın parıltı (daha iddialı)
   ========================================================================== */
.nav .brand, .nav .brand *,
html[data-theme="light"] .nav .brand, html[data-theme="light"] .nav .brand *{
  background:var(--fx-gold-grad); background-size:230% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.nav .brand, .nav .brand *{ animation:fx-foil-sheen 6s linear infinite; }
.nav .brand{ font-size:clamp(25px,2.7vw,31px) !important; filter:drop-shadow(0 0 9px rgba(201,162,74,0.30)); letter-spacing:0.05em; }
.nav .brand b{ font-weight:700; }
@media (prefers-reduced-motion:reduce){ .nav .brand, .nav .brand *{ animation:none; } }

/* ============================================================================
   NAVBAR DÜZENİ — marka | ORTALANMIŞ menü | kontroller (3 bölge, dengeli)
   <ul> artık .nav-right dışında, doğrudan .nav çocuğu.
   ========================================================================== */
.nav{ justify-content:space-between !important; }
.nav > .brand{ flex:1 1 0; min-width:0; }
.nav > ul{
  position:static !important; left:auto !important; top:auto !important; transform:none !important;
  flex:0 1 auto; justify-content:center; margin:0 !important;
}
.nav > .nav-right{ flex:1 1 0; min-width:0; justify-content:flex-end; }
.nav a.navlink{ font-size:12.5px; }            /* nav yazısını hafif büyüt (11→12.5) */
@media (max-width:780px){ .nav > ul{ display:none !important; } }

/* detay büyüteç ipucu rozetini kaldır (artık tek büyüteç = lens) */
.eser-art .zoom-hint{ display:none !important; }

/* ============================================================================
   ERİŞİLEBİLİRLİK — GÖRÜNÜR KLAVYE ODAĞI (:focus-visible)
   Site genelinde tutarlı, görünür odak halkası. !important ile interaktif
   öğelerdeki 'outline:none' geçişlerini :focus-visible'da geri kazandırır.
   Kapsam: nav linkleri, butonlar, .gthumb, lightbox kontrolleri, sözlük arama,
   form alanları (input/textarea/select), link ve [tabindex] taşıyan her öğe.
   Yalnızca klavye/odak göstergesi gerektiğinde görünür (fare tıklamasında değil).
   ========================================================================== */
:focus-visible{
  outline:2px solid #C8A24A !important;
  outline-offset:3px;
  border-radius:2px;
}
html[data-theme="light"] :focus-visible{
  outline-color:#0E5E5A !important;
}

/* ============================================================================
   18) PAYLAŞILAN MOBİL / RESPONSIVE İYİLEŞTİRMELER
   Yalnızca @media (max-width:…) içinde — masaüstü görünüm KORUNUR.
   Kapsam: paylaşılan dokunma hedefleri (≥44px), overflow-x güvenliği,
   tezhip/foil/atmosfer mobil zarafeti. Bottom-bar gövde padding'i A ajanında.
   Üst kırılım 920px: bazı sayfalar nav'ı 780, bazıları 920px'te gizliyor;
   nav mobil moda geçer geçmez kontroller dokunma dostu olsun diye 920 seçildi.
   ========================================================================== */
@media (max-width:920px){

  /* 18a) Dokunma hedefleri — paylaşılan nav kontrolleri ≥44×44px.
     base.css: .theme-toggle 36px, #lang-toggle ~30px, .lang-btn ~36px.
     Görsel kutuyu büyütmeden tıklama alanını büyütmek için min ölçü + padding;
     ikon boyutu korunur, sadece dokunulabilir alan genişler. */
  .nav .theme-toggle,
  .nav-right .theme-toggle,
  .theme-toggle{
    min-width:44px; min-height:44px;
    width:44px; height:44px;
  }
  .nav #lang-toggle,
  .nav-right #lang-toggle,
  #lang-toggle{
    min-height:44px;
    padding-top:11px; padding-bottom:11px;
  }
  /* Dil menüsü öğeleri (dropdown + drawer içine klonlanmış olabilir) */
  #lang-menu .lang-btn,
  .lang-btn{
    min-height:44px;
    padding-top:12px; padding-bottom:12px;
  }
  /* İkonlar dokunma alanı büyürken görsel olarak küçük kalsın (base ile uyumlu) */
  .nav .theme-toggle .material-symbols-outlined{ font-size:19px; }
  .nav #lang-toggle .material-symbols-outlined{ font-size:17px; }

  /* 18b) Atmosfer/efektler mobilde hafifletilsin (GPU/blur maliyeti) ama
     zarafet korunsun. Aşırı blur'lar mobilde performansı düşürür. */
  .fx-goldmesh{ filter:blur(28px); }
  html[data-theme="light"] .fx-goldmesh{ filter:blur(32px); }

  /* 18c) Tezhip ayraç mobilde dar ekrana sığsın (yan çizgiler kısalsın) */
  .tezhip-divider{ --fx-div-line:60px; gap:clamp(10px,4vw,22px); }
  .tezhip-divider[data-variant="ince"]{ --fx-div-line:84px; }
}

/* 18d) Daha dar ekranlar — overflow-x güvenliği ve foil/marquee zarafeti */
@media (max-width:560px){
  /* Paylaşılan tam-genişlik bileşenler taşma yapmasın */
  .hat-marquee,
  .works-masonry,
  .tezhip-divider,
  .page-hero{ max-width:100%; }

  /* mask'li marquee + foil sheen mobilde de yumuşak kalsın, taşma engellensin */
  .hat-marquee{ overflow:hidden; }

  /* Köşe süslemeleri küçük ekranda biraz küçülsün ki içeriği sıkıştırmasın */
  .tezhip-corners::before,
  .tezhip-corners::after,
  .tezhip-corners > .tezhip-corner{
    width:26px; height:26px;
  }

  /* page-hero üst boşluğu mobilde fazla agresif olmasın (chrome'u bozmadan) */
  .page-hero{ padding-top:clamp(76px,14vh,120px); }
}

/* 18e) Dokunmatik cihaz (hover yok) — kalem izi/atmosfer kapanmaz ama
   hover'a bağlı pause/efektler dokunmada takılı kalmasın. */
@media (hover:none){
  /* marquee dokunmada da akmaya devam etsin (hover pause anlamsız) */
  .hat-marquee:hover .hat-marquee__track{ animation-play-state:running; }
  /* foil parlaklık hover'ı dokunmada yapışmasın */
  .foil:hover{ filter:none; }
}


/* NOT: önceki "html{ overflow-x:clip }" KALDIRILDI — Chrome'da html'e overflow
   vermek .yol .pin'in position:sticky'sini bozuyordu (Kalemin Yolu scroll-pin
   çalışmıyordu). Yatay taşma gerekirse tek tek taşan öğede çözülür, root'ta değil. */

/* ============================================================================
   19) GERÇEK DOKUNMATİK TELEFON — masaüstü düzeni width=1280 ile zorlandığından
   genişlik medya sorguları (max-width) telefonda TETİKLENMEZ. Cihazı doğrudan
   hedefle (pointer:coarse / hover:none) ve masaüstünün tam-ekran (100svh) hero/
   intro bölümlerini kısalt: 1280px layout telefona küçülünce bu bölümler iki tam
   ekran boyu BOŞ dikey alana dönüşüyordu. Masaüstü (pointer:fine) hiç etkilenmez.
   ========================================================================== */
/* Footer (.end): scroll-reveal yerine DİREKT görünür gelsin. Alttaki mühür/
   künye .reveal ile opacity:0 başlıyıp IntersectionObserver'a bağlıydı; mobilde
   tetiklenmeyince footer boş/görünmez kalıyordu. Açık başlat — her sayfada. */
.end .reveal{ opacity:1 !important; transform:none !important; }

@media (hover:none),(pointer:coarse){
  /* tam-ekran hero artık içeriğe göre küçülsün (boş dikey alan kalkar) */
  .hero{ min-height:auto !important; }
  /* ana sayfa interaktif "yaz" introsu: tam ekran yerine afiş yüksekliği */
  .iwrite{ height:80vw !important; }

  /* "Kalemin Yolu" telefonda: scroll-pin'i (78svh sticky band) TAMAMEN bırak —
     band viewport'u dolduruyor, kareler ortada yüzüp üst/alt koca boşluk
     bırakıyordu. Bunun yerine içerik yüksekliğinde KOMPAKT yatay kaydırma şeridi:
     boşluk sıfır, parmakla yana kaydırılır. JS pin pointer:fine'a kilitli
     (aşağıda), masaüstü scroll-pin'i hiç etkilenmez. */
  .yol{ height:auto !important; }
  .yol .pin{ position:static !important; height:auto !important;
    overflow-x:auto !important; overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
    display:block !important; padding:2px 0 20px !important; }
  .yol .pin::-webkit-scrollbar{ display:none; }
  .yol-track{ transform:none !important; display:flex !important;
    flex-direction:row !important; align-items:center !important;
    width:max-content !important; gap:16px !important; padding:0 20px !important; }
  .yol .still{ width:64vw !important; max-width:340px !important; flex:0 0 auto !important; }
  .yol-lead{ width:72vw !important; max-width:360px !important; flex:0 0 auto !important; }