/* ═══════════════════════════════════════════════════════════════
   ECHO → KARA GRİMUAR (2026-10-23, G-cwdecw)
   Bir portfolyo videosundaki 11 öğenin Grimuar karşılığı. Tarif:
   reports/2026-10-23-instagram-kaydedilenler-2/KAREKARE.md §(4).
   Kural: WebGL yok, derleme yok; hareket azaltma tercihinde hiçbiri oynamaz;
   390 px'te şerit ve çember düz listeye döner.
   ═══════════════════════════════════════════════════════════════ */

/* ── #1 Açılış: altın çizgi mühür halkasını çizer, ucunda cyan kıvılcım ── */
.acilis{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:var(--murekkep);transition:opacity .7s var(--egri),visibility .7s}
.acilis.bitti{opacity:0;visibility:hidden}
.acilis svg{width:min(340px,70vw);height:auto;overflow:visible}
.acilis .ac-yol{fill:none;stroke:var(--altin);stroke-width:1.6;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(220,183,100,.6))}
.acilis .ac-ic{fill:none;stroke:rgba(220,183,100,.35);stroke-width:.8;opacity:0;transition:opacity .6s}
.acilis .ac-kivilcim{fill:var(--cyan);filter:drop-shadow(0 0 8px var(--cyan)) drop-shadow(0 0 16px var(--cyan))}
.acilis .ac-ad{font-family:var(--f-toren);font-weight:600;font-size:34px;letter-spacing:.32em;fill:var(--parsomen);opacity:0;transition:opacity .7s,letter-spacing .9s var(--egri)}
.acilis.kapandi .ac-ic{opacity:1}
.acilis.kapandi .ac-ad{opacity:1;letter-spacing:.22em}
.acilis.kapandi .ac-kivilcim{opacity:0;transition:opacity .4s}
.acilis-gec{position:absolute;bottom:28px;right:28px;background:none;border:1px solid var(--cizgi);color:var(--soluk);font-family:var(--f-toren);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;padding:10px 16px;min-height:44px;cursor:pointer}
.acilis-gec:hover{color:var(--altin);border-color:var(--cizgi-guclu)}

/* ── #2 Ad: mürekkebin parşömene sızması gibi bulanıktan netleşir ── */
.js .kimlik-ad.sizma span{filter:blur(14px);opacity:0;transform:scale(1.04);transition:filter 1.6s var(--egri),opacity 1.4s var(--egri),transform 1.8s var(--egri)}
.js .kimlik-ad.sizma.gorundu span{filter:blur(0);opacity:1;transform:none}
.js .kimlik-ad.sizma.gorundu span + span{transition-delay:.35s}
/* varak'ın drop-shadow'u filter'da; netleşince geri gelsin */
.js .kimlik-ad.sizma.gorundu .varak{filter:drop-shadow(0 0 22px rgba(220,183,100,.25))}

/* ── #3 Gravür bandı ── */
.gravur-bant{position:relative;height:clamp(220px,32vw,460px);overflow:hidden;background:#07060b;border-top:1px solid rgba(220,183,100,.1)}
.gravur-bant::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,var(--murekkep) 0%,transparent 22%,transparent 70%,var(--murekkep) 100%)}
.gravur{position:absolute;inset:0;width:100%;height:100%}

/* ── #4 Kapak sahnesi: kaydırdıkça cilt büyür, başlık ikiye ayrılır ── */
.kapak-sahne{position:relative;height:190vh;background:var(--murekkep);--p:0}
.kapak-yapis{position:sticky;top:0;height:100svh;display:grid;place-items:center;overflow:hidden}
.kapak-cilt{position:relative;width:calc(min(300px,60vw) + (100vw - min(300px,60vw)) * var(--p));height:calc(min(420px,62svh) + (100svh - min(420px,62svh)) * var(--p));
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;overflow:hidden;
  border-radius:calc(6px * (1 - var(--p)));
  background:radial-gradient(ellipse 70% 60% at 50% 40%,rgba(107,63,160,.28),transparent 70%),linear-gradient(160deg,#17111f,#0b0910 60%,#100b16);
  box-shadow:0 0 0 1px rgba(220,183,100,.45),0 0 0 8px rgba(8,7,12,.9),0 0 0 9px rgba(220,183,100,.25),0 40px 90px -30px #000}
.kapak-cilt::before{content:"";position:absolute;inset:14px;border:1px solid rgba(220,183,100,.28);pointer-events:none;opacity:calc(1 - var(--p))}
.kapak-muhur.sigil{margin:0;width:clamp(120px,14vw,180px);height:clamp(120px,14vw,180px);transform:rotate(calc(var(--p) * 90deg))}
.kapak-yazi{margin:0;text-align:center;font-family:var(--f-baslik);font-style:italic;font-size:clamp(1.3rem,2vw,1.8rem);color:var(--parsomen);opacity:calc(var(--p) * 1.6 - .3)}
.kapak-yazi span{display:block;font-family:var(--f-toren);font-style:normal;font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--altin);margin-top:6px}
.kapak-huzme{position:absolute;left:50%;top:-10%;width:60%;height:120%;transform:translateX(-50%);pointer-events:none;opacity:calc(var(--p) * .9);
  background:conic-gradient(from 180deg at 50% 0%,transparent 160deg,rgba(244,220,150,.16) 175deg,rgba(244,220,150,.24) 180deg,rgba(244,220,150,.16) 185deg,transparent 200deg);mix-blend-mode:screen}
.kapak-kelime{position:absolute;top:50%;margin:0;z-index:2;font-family:var(--f-toren);font-weight:600;font-size:clamp(2.6rem,9vw,8rem);letter-spacing:.06em;text-transform:uppercase;color:var(--parsomen);pointer-events:none;
  text-shadow:0 0 30px rgba(8,7,12,.9);transform:translateY(-50%)}
.kapak-sol{right:50%;margin-right:.18em;transform:translate(calc(var(--p) * -38vw),-50%)}
.kapak-sag{left:50%;margin-left:.18em;color:var(--altin);transform:translate(calc(var(--p) * 38vw),-50%)}
.kapak-kelime{opacity:calc(1 - var(--p) * 1.15)}

/* ── #5 Işık huzmesi: Okullar'ın arka planı ── */
.huzme{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.huzme i{position:absolute;top:-8%;left:58%;width:70%;height:115%;transform:translateX(-50%) rotate(-8deg);transform-origin:50% 0;mix-blend-mode:screen;
  background:linear-gradient(180deg,rgba(244,220,150,.13),rgba(244,220,150,.04) 55%,transparent 85%);
  -webkit-clip-path:polygon(44% 0,56% 0,100% 100%,0 100%);clip-path:polygon(44% 0,56% 0,100% 100%,0 100%);filter:blur(10px);animation:huzme-sal 14s ease-in-out infinite alternate}
.huzme i + i{left:30%;width:46%;opacity:.55;transform:translateX(-50%) rotate(10deg);animation-duration:19s;animation-delay:-6s;background:linear-gradient(180deg,rgba(111,227,255,.08),transparent 75%)}
@keyframes huzme-sal{to{transform:translateX(-50%) rotate(-3deg)}}
.fasil-okullar .sayfa{z-index:1}

/* ── #6 Ritüel: dev soluk yazı ters yönde kayar + mürekkep satırı ── */
.dev-yazi{position:absolute;inset:0;pointer-events:none;overflow:hidden;display:flex;flex-direction:column;justify-content:space-around}
.dev-yazi p{margin:0;white-space:nowrap;font-family:var(--f-toren);font-weight:600;text-transform:uppercase;font-size:clamp(4rem,13vw,13rem);line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(220,183,100,.09);will-change:transform;transform:translateX(calc(var(--x,0) * 1px))}
.dev-yazi p + p{-webkit-text-stroke-color:rgba(111,227,255,.06);margin-left:-30vw}
.murekkep-satir{position:relative;z-index:1;margin:-10px auto 44px;max-width:42em;display:flex;gap:16px;align-items:baseline;justify-content:center;text-align:center;min-height:2.2em;
  font-family:var(--f-baslik);font-style:italic;font-size:clamp(1.25rem,2.1vw,1.7rem);color:var(--parsomen)}
.ms-no{font-family:var(--f-toren);font-style:normal;font-size:.8rem;letter-spacing:.2em;color:var(--altin);min-width:2em}
.ms-metin{display:inline-block}
.ms-metin.kuruyor{animation:murekkep-kuru .7s var(--egri) forwards}
.ms-metin.akiyor{animation:murekkep-ak 1s var(--egri) both}
@keyframes murekkep-kuru{to{opacity:0;filter:blur(6px) saturate(0);transform:translateY(6px);color:var(--soluk)}}
@keyframes murekkep-ak{from{opacity:0;filter:blur(8px);-webkit-mask-position:100% 0;clip-path:inset(0 100% 0 0)}to{opacity:1;filter:blur(0);clip-path:inset(0 0 0 0)}}

/* ── #7 Tomar: mühür kartları kenarlarda kıvrılan parşömen şeridinde ── */
.tomar{position:relative;margin:56px 0 30px;perspective:1100px}
.tomar-serit{list-style:none;margin:0;padding:34px 0;display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--altin-koyu) transparent;
  background:linear-gradient(180deg,rgba(236,226,204,.05),rgba(236,226,204,.09) 50%,rgba(236,226,204,.05));
  border-top:1px solid var(--cizgi);border-bottom:1px solid var(--cizgi);transform-style:preserve-3d;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  padding-left:calc(50% - 150px);padding-right:calc(50% - 150px);perspective:1100px}
.tomar-serit li{flex:0 0 300px;scroll-snap-align:center;transform:rotateY(calc(var(--b,0) * -38deg)) translateZ(calc(var(--b,0) * var(--b,0) * -60px));transition:transform .25s linear;transform-origin:50% 50%}
.tomar-serit a{display:block;text-decoration:none;color:inherit;padding:10px;background:rgba(8,7,12,.75);border:1px solid var(--cizgi-guclu);box-shadow:0 18px 40px -20px #000}
.tomar-serit a:hover,.tomar-serit a:focus-visible{border-color:var(--altin)}
.tomar-serit img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:50% 20%;filter:saturate(.85)}
.tomar-kasa{display:grid;place-items:center;aspect-ratio:16/10;font-size:3rem;color:var(--altin);background:radial-gradient(ellipse at 50% 50%,rgba(107,63,160,.3),rgba(8,7,12,.9) 70%)}
.tomar-serit b{display:block;margin-top:12px;font-family:var(--f-baslik);font-size:1.35rem;font-weight:600;color:var(--parsomen)}
.tomar-serit span:not(.tomar-kasa){display:block;font-size:.92rem;line-height:1.45;color:var(--parsomen-2)}
.tomar-rulo{position:absolute;top:10px;bottom:10px;width:22px;z-index:2;pointer-events:none;border-radius:11px;
  background:linear-gradient(90deg,#5d4520,#d8b56a 40%,#f4dc96 50%,#a97f36 70%,#4a3618)}
.tomar-rulo-sol{left:0}.tomar-rulo-sag{right:0}

/* ── #8 Büyü çemberi: beş mühür bir sihir dairesinin köşelerinde döner ── */
.buyu-cemberi{position:relative;width:min(560px,100%);aspect-ratio:1;margin:10px auto 0}
.bc-cizgi{position:absolute;inset:0;width:100%;height:100%;overflow:visible;animation:bc-don 120s linear infinite reverse}
.bc-halka{list-style:none;margin:0;padding:0;position:absolute;inset:0;animation:bc-don 80s linear infinite}
.bc-halka li{position:absolute;left:50%;top:50%;width:22%;aspect-ratio:1;
  transform:translate(-50%,-50%) rotate(calc(var(--k) * 72deg - 90deg)) translateX(170%) rotate(calc(var(--k) * -72deg + 90deg))}
.bc-halka .sigil{width:100%;height:100%;margin:0;animation:bc-don 80s linear infinite reverse}
.bc-orta{position:absolute;inset:0;display:grid;place-content:center;text-align:center;margin:0;font-family:var(--f-toren);font-weight:600;letter-spacing:.24em;text-transform:uppercase;font-size:clamp(.9rem,1.6vw,1.15rem);color:var(--altin)}
.bc-orta span{display:block;margin-top:6px;font-size:.72em;letter-spacing:.4em;color:var(--parsomen-2)}
@keyframes bc-don{to{transform:rotate(360deg)}}
/* çember dönerken li'nin kendi yerleşim dönüşü korunur: dönüş dış kaba verildi */

/* ── #9 Kitap: kartlar sayfa gibi çevrilir, yanda içindekiler ── */
.muhur-kitap{position:relative}
.icindekiler{display:none}
@media (min-width:1300px){
  .muhur-kitap{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:48px}
  .icindekiler{display:block;position:sticky;top:120px;align-self:start;order:2;padding:20px 0 20px 22px;border-left:1px solid var(--cizgi)}
  .ic-bas{margin:0 0 14px;font-family:var(--f-toren);font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--altin)}
  .icindekiler ol{list-style:none;margin:0;padding:0;display:grid;gap:4px}
  .icindekiler a{display:block;padding:6px 0;text-decoration:none;font-family:var(--f-baslik);font-size:1.12rem;color:var(--soluk);transition:color var(--hiz),transform var(--hiz) var(--egri)}
  .icindekiler a b{display:inline-block;width:2.2em;font-family:var(--f-toren);font-size:.7rem;letter-spacing:.1em;color:rgba(220,183,100,.5)}
  .icindekiler a:hover{color:var(--parsomen)}
  .icindekiler a.aktif{color:var(--altin-acik);transform:translateX(6px)}
  .icindekiler a.aktif b{color:var(--cyan)}
  .ic-ipucu{margin:18px 0 0;font-size:.8rem;font-style:italic;color:rgba(169,159,140,.7)}
}
.js [data-sayfa-cevir] .muhur{transform-origin:50% 0;perspective:1600px}
.js [data-sayfa-cevir] .muhur.reveal{transform:perspective(1600px) rotateX(-16deg) translateY(30px);transition:opacity .9s var(--egri),transform 1.1s var(--egri)}
.js [data-sayfa-cevir] .muhur.reveal.gorundu{transform:none}

/* ── #10 Mühürlü zarflar ── */
.zarflar{margin:64px 0 10px}
.zarf-bas{margin:0 0 18px;font-family:var(--f-toren);font-size:.76rem;letter-spacing:.24em;text-transform:uppercase;color:var(--altin)}
.zarf-bas span:last-child{text-transform:none;letter-spacing:.02em;font-family:var(--f-baslik);font-style:italic;font-size:1rem;color:var(--soluk)}
.zarf-liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:start}
.zarf{position:relative;background:linear-gradient(170deg,rgba(236,226,204,.07),rgba(236,226,204,.03));border:1px solid var(--cizgi)}
.zarf::before{content:"";position:absolute;left:0;right:0;top:0;height:64px;pointer-events:none;
  background:linear-gradient(to bottom right,transparent 49.5%,rgba(220,183,100,.22) 50%,transparent 51%) left/50% 100% no-repeat,
             linear-gradient(to bottom left,transparent 49.5%,rgba(220,183,100,.22) 50%,transparent 51%) right/50% 100% no-repeat;
  transition:opacity .4s}
.zarf-dugme{width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:22px 16px 18px;min-height:88px;background:none;border:0;color:inherit;cursor:pointer;text-align:left}
.zarf-no{min-width:2.4em;font-family:var(--f-toren);font-size:.8rem;letter-spacing:.18em;color:var(--altin)}
.zarf-ad{font-family:var(--f-baslik);font-size:1.3rem;font-weight:600;color:var(--parsomen)}
.zarf-muhur{position:relative;width:38px;height:38px}
.zarf-muhur i{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 35% 30%,#b3473f,#7a1f22 60%,#4a1014);box-shadow:inset 0 0 0 3px rgba(0,0,0,.18),0 2px 6px rgba(0,0,0,.5);
  -webkit-clip-path:polygon(0 0,52% 0,44% 40%,56% 62%,46% 100%,0 100%);clip-path:polygon(0 0,52% 0,44% 40%,56% 62%,46% 100%,0 100%);transition:transform .55s var(--egri),opacity .55s}
.zarf-muhur i + i{-webkit-clip-path:polygon(52% 0,100% 0,100% 100%,46% 100%,56% 62%,44% 40%);clip-path:polygon(52% 0,100% 0,100% 100%,46% 100%,56% 62%,44% 40%)}
.zarf-muhur::after{content:"✦";position:absolute;inset:0;display:grid;place-items:center;color:rgba(244,220,150,.75);font-size:.9rem;transition:opacity .3s}
.zarf.acik .zarf-muhur i:first-child{transform:translate(-8px,6px) rotate(-24deg);opacity:.35}
.zarf.acik .zarf-muhur i + i{transform:translate(8px,6px) rotate(24deg);opacity:.35}
.zarf.acik .zarf-muhur::after{opacity:0}
.zarf.acik::before{opacity:0}
.zarf.acik{border-color:var(--cizgi-guclu)}
.zarf-ic{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--egri)}
.zarf-ic > div{overflow:hidden;padding:0 16px}
.zarf.acik .zarf-ic{grid-template-rows:1fr}
.zarf.acik .zarf-ic > div{padding-bottom:18px}
.zarf-ic p{margin:0 0 10px;font-size:.98rem;line-height:1.55;color:var(--parsomen-2)}
.zarf-ic .zarf-teslim{margin:0;font-size:.86rem;color:var(--cyan)}
/* JS yoksa zarflar açık okunur */
html:not(.js) .zarf-ic{grid-template-rows:1fr}

/* ── #11 Dev ÇAĞIR + hap düğmeler ── */
.dev-cagir{margin:0 0 10px;font-family:var(--f-toren);font-weight:600;text-transform:uppercase;line-height:.9;letter-spacing:.04em;
  font-size:clamp(4.2rem,17vw,12rem);background:var(--varak);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 30px rgba(220,183,100,.25));animation:varak-isik 7s ease-in-out infinite}
.haplar{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.hap{display:inline-flex;align-items:center;min-height:44px;padding:0 22px;border-radius:999px;border:1px solid var(--cizgi-guclu);text-decoration:none;
  font-family:var(--f-toren);font-size:.82rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--parsomen);transition:background var(--hiz),color var(--hiz),border-color var(--hiz)}
.hap:hover,.hap:focus-visible{border-color:var(--cyan);color:var(--cyan)}
.hap-dolu{background:var(--parsomen);color:var(--murekkep);border-color:var(--parsomen)}
.hap-dolu:hover,.hap-dolu:focus-visible{background:var(--altin-acik);border-color:var(--altin-acik);color:var(--murekkep)}

/* ── Dar ekran ── */
@media (max-width:1000px){
  .zarf-liste{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  /* #7 şerit düz liste */
  .tomar{perspective:none;margin:40px 0 20px}
  .tomar-rulo{display:none}
  .tomar-serit{display:grid;gap:12px;padding:0;overflow:visible;background:none;border:0;-webkit-mask-image:none;mask-image:none;transform:none}
  .tomar-serit li{transform:none !important}
  .tomar-serit a{display:grid;grid-template-columns:96px 1fr;column-gap:14px;align-items:center}
  .tomar-serit img,.tomar-kasa{grid-row:span 2;aspect-ratio:4/3;font-size:1.8rem}
  .tomar-serit b{margin-top:0;font-size:1.15rem}
  /* #8 çember küçük ve sabit */
  .buyu-cemberi{width:min(330px,100%)}
  .zarf-liste{grid-template-columns:1fr}
  .kapak-sahne{height:150vh}
  .dev-yazi p{font-size:5rem}
}

/* ── Hareket azaltma: hiçbiri oynamaz ── */
@media (prefers-reduced-motion:reduce){
  .acilis{display:none}
  .js .kimlik-ad.sizma span{filter:none;opacity:1;transform:none;transition:none}
  .kapak-sahne{height:auto;--p:1}
  .kapak-yapis{position:relative;height:auto;padding:80px 20px}
  .kapak-cilt{width:min(520px,100%);height:min(380px,60svh);border-radius:6px}
  .kapak-kelime{display:none}
  .huzme i,.bc-cizgi,.bc-halka,.bc-halka .sigil,.dev-cagir{animation:none}
  .dev-yazi p{transform:none}
  .ms-metin.kuruyor,.ms-metin.akiyor{animation:none}
  .tomar-serit li{transform:none;transition:none}
  .js [data-sayfa-cevir] .muhur.reveal{transform:none;transition:none}
  .zarf-ic,.zarf-muhur i,.icindekiler a{transition:none}
}