/* =========================================================
   PriceONN v2 · zemin (sayfa zemini + hero bandı motifi)
   html[data-zemin] ile seçilir (theme-boot.js, ?zemin=N, localStorage po-zemin). Varsayılan 1.
     1 gren + akan fiyat eğrileri   2 topografik kontur   3 aurora
     4 piyasa derinliği             5 monogram (P)
   Motifler renksiz SVG maskelerdir (siyah + opaklık); rengi tema tokenı verir, böylece aynı SVG
   iki temada da çalışır. Katmanlar: .hero-band::before / ::after, body.po::before.
   Hareket yalnız transform/opacity; prefers-reduced-motion'da durur. Büyük blur/backdrop-filter yok.
   ========================================================= */
:root{
  --motif-a:#1f5fbf; --motif-b:#0a8fa0;      /* açık tema: koyu marka mavisi -> camgöbeği */
  --band-motif-o:.3; --page-motif-o:.08;
  --hl-o:.52;                                /* hero eğrileri (zemin 1); metin kontrastı ölçüldü, belgeye bakın */
  --live-a:#0a8fa0; --live-core:#067789; --live-halo:rgba(10,143,160,.22);
  --aur-1:rgba(47,107,255,.26); --aur-2:rgba(44,201,216,.28); --aur-3:rgba(31,111,178,.18);
}
:root[data-theme="dark"]{
  --motif-a:#8cc4ff; --motif-b:#58d8e3;
  --band-motif-o:.22; --page-motif-o:.06;
  --hl-o:.42;
  --live-a:#7eeaf3; --live-core:#e9fdff; --live-halo:rgba(88,216,227,.32);
  --aur-1:rgba(58,120,255,.42); --aur-2:rgba(44,201,216,.26); --aur-3:rgba(30,70,190,.4);
}

/* ---------- ortak iskelet ---------- */
body.po{position:relative;isolation:isolate}
body.po::before,.hero-band::before,.hero-band::after{content:"";position:absolute;pointer-events:none;z-index:-1}
body.po::before{display:none;inset:0 0 auto;height:0}
.hero-band::before{inset:0;background:linear-gradient(90deg,var(--motif-a),var(--motif-b));opacity:var(--band-motif-o);
  mask-repeat:no-repeat;mask-composite:intersect}
body.po::before{background:linear-gradient(90deg,var(--motif-a),var(--motif-b));opacity:var(--page-motif-o);mask-repeat:no-repeat;mask-composite:intersect}

/* =========================================================
   1. Gren + uzun pozlama fiyat eğrileri (varsayılan)
   ========================================================= */
.hero-band::before{
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 420' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round'%3E%3Cpath d='M0 330 C120 300 190 350 300 300 S470 190 590 230 S780 300 880 190 S1060 70 1200 90' stroke-width='1.6'/%3E%3Cpath d='M0 350 C140 320 210 372 320 318 S480 214 600 250 S790 318 890 212 S1070 96 1200 112' stroke-opacity='.64' stroke-width='1.2'/%3E%3Cpath d='M0 372 C150 344 230 390 340 338 S500 240 610 272 S800 338 900 236 S1080 124 1200 136' stroke-opacity='.45' stroke-width='1'/%3E%3Cpath d='M0 300 C110 276 180 320 280 280 S450 166 570 206 S770 276 870 166 S1050 44 1200 64' stroke-opacity='.36' stroke-width='1'/%3E%3Cpath d='M0 396 C160 370 250 408 360 360 S520 268 620 296 S810 360 910 262 S1090 154 1200 162' stroke-opacity='.27' stroke-width='.8'/%3E%3C/g%3E%3C/svg%3E"),linear-gradient(90deg,rgba(0,0,0,.35) 0%,#000 45%,#000 100%);
  mask-size:100% 88%,100% 100%;mask-position:0 100%,0 0}
:root:not([data-zemin]) .hero-band::before,[data-zemin="1"] .hero-band::before{opacity:calc(var(--band-motif-o) * 1.1)}
@media (max-width:999px){.hero-band::before{mask-size:260% 46%,100% 100%;mask-position:35% 100%,0 0}}
.hero-band::after{top:-40%;bottom:-40%;left:38%;width:34%;background:linear-gradient(100deg,transparent,var(--band-sheen) 50%,transparent);transform:skewX(-14deg)}

/* =========================================================
   2. Topografik: ince eş yükselti çizgileri, hero'da yoğun, sayfada silik ve aşağı doğru sönen
   ========================================================= */
[data-zemin="2"] .hero-band::before{
  mask-image:url("../img/zemin/topo.svg"),linear-gradient(90deg,rgba(0,0,0,.45) 0%,#000 50%);
  mask-size:cover,100% 100%;mask-position:70% 35%,0 0;
  opacity:calc(var(--band-motif-o) * 1.35)}
[data-zemin="2"] .hero-band::after{display:none}
[data-zemin="2"] body.po::before{display:block;height:1600px;
  mask-image:url("../img/zemin/topo.svg"),linear-gradient(180deg,#000 0%,rgba(0,0,0,.6) 45%,transparent 100%);
  mask-size:max(1600px,100%) auto,100% 100%;mask-position:50% -120px,0 0}

/* =========================================================
   3. Aurora: çizgisiz, yavaş kayan marka mavisi/camgöbeği bulutları + gren
   ========================================================= */
[data-zemin="3"] .hero-band::before,[data-zemin="3"] .hero-band::after{inset:-35%;width:auto;top:-35%;bottom:-35%;left:-35%;
  mask-image:none;opacity:1;will-change:transform}
[data-zemin="3"] .hero-band::before{
  background:radial-gradient(closest-side at 72% 30%,var(--aur-1),transparent),radial-gradient(closest-side at 30% 70%,var(--aur-2),transparent);
  transform:translate3d(-4%,2%,0) rotate(-6deg);animation:po-aur-a 28s ease-in-out infinite alternate}
[data-zemin="3"] .hero-band::after{
  background:radial-gradient(closest-side at 50% 45%,var(--aur-3),transparent),radial-gradient(closest-side at 85% 75%,var(--aur-2),transparent 80%);
  transform:translate3d(3%,-2%,0) scale(1.05);opacity:.8;animation:po-aur-b 21s ease-in-out infinite alternate}
[data-zemin="3"] body.po::before{display:block;position:fixed;inset:-25%;height:auto;mask-image:none;will-change:transform;
  background:radial-gradient(closest-side at 18% 22%,var(--aur-1),transparent),radial-gradient(closest-side at 86% 34%,var(--aur-2),transparent);
  opacity:.45;animation:po-aur-a 46s ease-in-out infinite alternate}
@keyframes po-aur-a{from{transform:translate3d(-4%,2%,0) rotate(-6deg) scale(1)}to{transform:translate3d(5%,-3%,0) rotate(5deg) scale(1.12)}}
@keyframes po-aur-b{0%{transform:translate3d(3%,-2%,0) scale(1.05);opacity:.55}100%{transform:translate3d(-5%,4%,0) scale(1.18);opacity:.95}}

/* =========================================================
   4. Piyasa derinliği: hero alt kenarında emir defteri çubukları, zeminde düzensiz fiyat seviyeleri
   ========================================================= */
[data-zemin="4"] .hero-band::before{top:auto;bottom:48px;height:24%;
  background:linear-gradient(90deg,var(--motif-a) 0,var(--motif-a) 56%,var(--motif-b) 56%,var(--motif-b) 100%);
  mask-image:url("../img/zemin/derinlik.svg"),linear-gradient(180deg,rgba(0,0,0,.15) 0,#000 70%);
  mask-size:100% 100%,100% 100%;mask-position:0 100%,0 0;
  opacity:calc(var(--band-motif-o) * 1.1)}
[data-zemin="4"] .hero-band::after{inset:0;width:auto;transform:none;background:var(--motif-a);
  mask-image:url("../img/zemin/seviye.svg"),linear-gradient(90deg,rgba(0,0,0,.25),#000 60%);
  mask-size:100% 1400px,100% 100%;mask-position:0 0,0 0;mask-repeat:no-repeat;mask-composite:intersect;opacity:calc(var(--band-motif-o) * .8)}
[data-zemin="4"] body.po::before{display:block;inset:0;height:auto;background:var(--motif-a);
  mask-image:url("../img/zemin/seviye.svg");mask-size:100% 1400px;mask-repeat:repeat-y;opacity:calc(var(--page-motif-o) * 1.1)}
@media (max-width:999px){[data-zemin="4"] .hero-band::before{height:120px}}

/* =========================================================
   5. Monogram: PriceONN "P", çok büyük, çok silik, kırpılmış; tek odak (tekrar yok)
   ========================================================= */
[data-zemin="5"] .hero-band::before{
  background:linear-gradient(160deg,var(--motif-a),var(--motif-b));
  mask-image:url("../img/zemin/monogram.svg");mask-size:auto 118%;mask-position:47% 20%;
  opacity:calc(var(--band-motif-o) * .8)}
[data-zemin="5"] .hero-band::after{display:none}
[data-zemin="5"] body.po::before{display:block;inset:0 auto auto 0;left:auto;right:0;top:0;width:min(1100px,100%);height:1800px;
  background:linear-gradient(180deg,var(--motif-a),var(--motif-b));
  mask-image:url("../img/zemin/monogram.svg"),linear-gradient(180deg,#000 30%,transparent 100%);
  mask-size:auto 1840px,100% 100%;mask-position:right -9vw top -40px,0 0;opacity:calc(var(--page-motif-o) * .7)}
@media (max-width:999px){[data-zemin="5"] .hero-band::before{mask-size:auto 70%;mask-position:112% 2%}}

/* hareket azaltıldığında her şey durur */
@media (prefers-reduced-motion:reduce){
  [data-zemin="3"] .hero-band::before,[data-zemin="3"] .hero-band::after,[data-zemin="3"] body.po::before{animation:none}
}

/* ---------- 1. canlı akış: hero eğrileri gerçek SVG, yalnız transform ile akar ----------
   Her eğri 1200 birimlik periyotla dikişsiz tekrar eder (tools/gen-hero-lines.py). .hl-flow sola akar,
   .hl-bob katmanları farklı hız ve fazla hafifçe salınır; böylece derinlik oluşur. */
.hero-lines{position:absolute;inset:auto 0 0 0;width:100%;height:88%;z-index:-1;pointer-events:none;display:none;
  opacity:var(--hl-o);
  /* metin sütununun (sol ~%45) arkasında eğriler daha silik: hero metni en kötü pikselde de 4,5:1 (ölçüldü) */
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.2) 0%,rgba(0,0,0,.34) 32%,#000 58%,#000 100%);mask-image:linear-gradient(90deg,rgba(0,0,0,.2) 0%,rgba(0,0,0,.34) 32%,#000 58%,#000 100%)}
:root:not([data-zemin]) .hero-lines,[data-zemin="1"] .hero-lines{display:block}
:root:not([data-zemin]) .hero-band::before,[data-zemin="1"] .hero-band::before{display:none}
.hl-flow{animation:hl-flow var(--flow) linear infinite;will-change:transform}
.hl-bob{animation:hl-bob var(--bob) ease-in-out var(--bdelay) infinite alternate}
@keyframes hl-flow{from{transform:translateX(0)}to{transform:translateX(-1200px)}}
@keyframes hl-bob{from{transform:translateY(calc(var(--bamp) * -1))}to{transform:translateY(var(--bamp))}}
@media (max-width:999px){.hero-lines{height:46%;width:260%;left:-60%}}

/* açılışta soldan sağa çizim (hero.js, stroke-dashoffset 1 -> 0,48; ekranda görünen yarı yolun sonu).
   html.m-js ilk boyamadan önce eklenir; betik çalışmazsa theme-boot.js sınıfı kaldırır, eğriler görünür kalır. */
.m-js:not(.hl-drawn) .hl-p{stroke-dasharray:1 1;stroke-dashoffset:1}
/* canlı fiyat noktası: öndeki eğrinin üzerinde, kısa ışıklı iziyle (konum hero.js) */
.hl-live{opacity:0;transition:opacity 700ms cubic-bezier(.16,1,.3,1)}
.hl-live.on{opacity:1}
.hl-core{fill:var(--live-core);stroke:var(--live-a);stroke-width:1.6;vector-effect:non-scaling-stroke}
.hl-halo{fill:var(--live-halo);stroke:none;transform-box:fill-box;transform-origin:center;animation:hl-halo 2.4s cubic-bezier(.16,1,.3,1) infinite}
@keyframes hl-halo{0%{transform:scale(.6);opacity:1}70%,100%{transform:scale(1.9);opacity:0}}
.hero-off .hl-halo{animation-play-state:paused}

/* ---------- 2. topografik: çizgiler çok yavaş kayar ve nefes alır ---------- */
[data-zemin="2"] .hero-band::before{inset:-6%;animation:topo-drift 48s ease-in-out infinite alternate;will-change:transform}
@keyframes topo-drift{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-2.2%,1.4%,0) scale(1.035)}100%{transform:translate3d(1.6%,-1%,0) scale(1.02)}}

/* hero ekrandan çıkınca ya da sekme gizliyken dur (home.js .hero-off ekler) */
.hero-off .hl-flow,.hero-off .hl-bob,.hero-off.hero-band::before{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
  .hl-flow,.hl-bob,[data-zemin="2"] .hero-band::before,.hl-halo{animation:none}
  .m-js:not(.hl-drawn) .hl-p{stroke-dasharray:none}
  .hl-live{display:none}
}

/* ---------- geliştirme seçicisi: yalnız ?zemin=N adresinde görünür (priceonn.js ekler) ---------- */
.zsel{position:fixed;left:12px;bottom:calc(var(--zsel-b,12px) + env(safe-area-inset-bottom,0px));z-index:31;display:flex;align-items:center;gap:2px;padding:4px 4px 4px 10px;border-radius:12px;
  background:var(--bg-surface);border:1px solid var(--border-strong);box-shadow:var(--shadow-2);font:600 .75rem/1 var(--font-sans);color:var(--text-secondary)}
.zsel span{margin-right:4px}
.zsel button{min-width:36px;height:36px;border:0;border-radius:8px;background:transparent;color:var(--text-primary);font:600 .875rem/1 var(--font-num);cursor:pointer}
.zsel button:hover{background:var(--bg-raised)}
.zsel button[aria-pressed="true"]{background:var(--action-bg);color:var(--on-action)}

/* ---------- başlık bantlarının motifi (src/View/BandLines.php) ----------
   Kareli ızgaranın yerine (operatör kararı 3 Ekim 2026): hero eğrilerinin silik sürümü sola akar, üstünde ince bir
   fiyat izi döngüyle kendini çizer, bekler ve söner. Sol tarafta (başlık ve metin) maskeyle silikleşir; metin
   kontrastı motifsiz banttakiyle aynı kalır. Hareket yalnız transform ve stroke-dashoffset. */
:root{--bl-o:.38;--bl-trace:.6;--bm-o:.2}
:root[data-theme="dark"]{--bl-o:.32;--bl-trace:.55;--bm-o:.17}
.band-lines{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:var(--bl-o);
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.14) 0%,rgba(0,0,0,.3) 38%,#000 72%);mask-image:linear-gradient(90deg,rgba(0,0,0,.14) 0%,rgba(0,0,0,.3) 38%,#000 72%)}
.bl-flow{animation:bl-flow var(--flow) linear infinite;will-change:transform}
@keyframes bl-flow{from{transform:translateX(0)}to{transform:translateX(-1200px)}}
.bl-trace{fill:none;stroke:var(--live-a);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:1;opacity:0;
  animation:bl-trace 14s cubic-bezier(.45,0,.2,1) 1.2s infinite}
@keyframes bl-trace{0%{stroke-dashoffset:1;opacity:0}6%{opacity:var(--bl-trace)}58%{stroke-dashoffset:0;opacity:var(--bl-trace)}86%{stroke-dashoffset:0;opacity:var(--bl-trace)}100%{stroke-dashoffset:0;opacity:0}}
/* Telefonda metin bandın tamamını kaplar: motif daha silik, alt kenarda (sayılar) yumuşak. */
@media (max-width:599px){.band-lines{opacity:calc(var(--bl-o) * .75);-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,.7) 60%,rgba(0,0,0,.45) 100%);mask-image:linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,.7) 60%,rgba(0,0,0,.45) 100%)}}
@media (prefers-reduced-motion:reduce){.bl-flow,.bl-trace{animation:none}.bl-trace{stroke-dashoffset:0;opacity:calc(var(--bl-trace) * .7)}}

/* ---------- sayfaya özgü başlık motifleri (BandLines::svg($kind)): çok silik, döngülü, yalnız transform ve opacity ----------
   Şekil motifleri bandın sağına yaslanır; soldaki maske (başlık ve metin altı) .band-lines ile aynıdır. */
.band-motif{opacity:var(--bm-o)}
/* piyasalar: hacim sütunları nefes alır */
.bm-col{opacity:var(--o);transform-box:fill-box;transform-origin:50% 100%;animation:bm-breathe var(--d) ease-in-out var(--dl) infinite alternate}
@keyframes bm-breathe{from{transform:scaleY(.42)}to{transform:scaleY(1)}}
/* takvim: hücreler köşegen dalgayla belirir, "şimdi" çizgisi geçer */
.bm-day{opacity:.28;animation:bm-day 7s ease-in-out var(--dl) infinite}
@keyframes bm-day{0%,100%{opacity:.22}18%{opacity:1}40%{opacity:.22}}
.bm-now{fill:var(--live-a);opacity:.9;animation:bm-now 14s linear infinite}
@keyframes bm-now{from{transform:translateX(0)}to{transform:translateX(284px)}}
/* topluluk: düğümler nabız atar, mesaj noktaları kenar boyunca gider */
.bm-edges{opacity:.55}
.bm-node{transform-box:fill-box;transform-origin:center;animation:bm-node 4.8s ease-in-out var(--dl) infinite}
@keyframes bm-node{0%,100%{transform:scale(1);opacity:.75}50%{transform:scale(1.45);opacity:1}}
.bm-msg{fill:var(--live-a);opacity:0;animation:bm-msg 7.2s ease-in-out var(--dl) infinite}
@keyframes bm-msg{0%{transform:translate(var(--x1),var(--y1));opacity:0}12%{opacity:1}50%{transform:translate(var(--x2),var(--y2));opacity:1}62%,100%{transform:translate(var(--x2),var(--y2));opacity:0}}
/* fiyatlandırma: basamaklar süzülür, parıltı geçer */
.bm-tier{animation:bm-tier 6s ease-in-out var(--dl) infinite alternate}
@keyframes bm-tier{from{transform:translateY(4px)}to{transform:translateY(-4px)}}
.bm-sheen{animation:bm-sheen 9s ease-in-out 1s infinite}
@keyframes bm-sheen{0%{transform:skewX(-18deg) translateX(0)}55%,100%{transform:skewX(-18deg) translateX(420px)}}
@media (prefers-reduced-motion:reduce){.bm-col,.bm-day,.bm-now,.bm-node,.bm-msg,.bm-tier,.bm-sheen{animation:none}.bm-msg,.bm-sheen{display:none}}

/* ---------- sembol sayfası: sembolün kendi fiyat izi (BandLines::price) ----------
   Gerçek kapanışlardan çok silik bir alan grafiği. Çizgi bir kez çizilir (2,4 sn), sonra üzerinden 7 sn'de bir ince
   bir ışık geçer; uçtaki son fiyat noktası nabız atar. Nokta rengi günün yönündedir (artı yeşil, eksi kırmızı).
   Başlık ve fiyat metni okunur kalır: motif bandın alt yarısında, sol tarafı maskeyle silik. */
.band-price{opacity:var(--bp-o)}
:root{--bp-o:.62}
:root[data-theme="dark"]{--bp-o:.55}
.bp-area{opacity:0;animation:bp-in 1.2s ease 1.6s forwards}
.bp-line{fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:1;animation:bp-draw 2.4s cubic-bezier(.45,0,.2,1) .3s forwards}
.bp-glow{fill:none;stroke:var(--live-a);stroke-width:2.2;stroke-linecap:round;opacity:.9}
.bp-sweep{animation:bp-sweep 7s cubic-bezier(.45,0,.55,1) 2.8s infinite;transform:translateX(-300px)}
.bp-last{fill:none;stroke:var(--motif-b);stroke-width:1;stroke-dasharray:3 6;opacity:0;animation:bp-in 1s ease 2.4s forwards}
.bp-dot,.bp-halo{fill:none;stroke-linecap:round}
.bp-dot{stroke:var(--live-core);stroke-width:6;opacity:0;animation:bp-in .6s ease 2.6s forwards}
.bp-halo{stroke:var(--live-halo);stroke-width:6;opacity:0;animation:bp-halo 2.4s cubic-bezier(.16,1,.3,1) 2.8s infinite}
.bp-up .bp-dot{stroke:var(--up)}.bp-up .bp-halo{stroke:color-mix(in srgb,var(--up) 40%,transparent)}
.bp-down .bp-dot{stroke:var(--down)}.bp-down .bp-halo{stroke:color-mix(in srgb,var(--down) 40%,transparent)}
@keyframes bp-draw{to{stroke-dashoffset:0}}
@keyframes bp-in{to{opacity:1}}
@keyframes bp-sweep{0%{transform:translateX(-300px)}70%,100%{transform:translateX(1240px)}}
@keyframes bp-halo{0%{stroke-width:6;opacity:.9}75%,100%{stroke-width:22;opacity:0}}
/* Telefonda bant dikey üç satırdır (ad, fiyat, düğmeler): iz düğmelerin arkasından geçer, bu yüzden daha silik. */
@media (max-width:599px){.band-price{opacity:calc(var(--bp-o) * .5)}.bp-area{animation-name:bp-in-soft}}
@keyframes bp-in-soft{to{opacity:.6}}
@media (prefers-reduced-motion:reduce){
  .bp-line{animation:none;stroke-dashoffset:0}
  .bp-area,.bp-last,.bp-dot{animation:none;opacity:1}
  .bp-glow,.bp-halo{display:none}
}