/* ESNAF V2 (EV1) · Yalniz /esnaf/ yukler. Gorsel yerlesim: OpenAI "SENTINEL_ESNAF_PREVIEW" prototipi referans alindi;
   kod mevcut sistemin degiskenleriyle yeniden yazildi (esnaf.css / esnaf.js degismedi; bu dosya onlardan SONRA yuklenir).
   Renk yasasi: buyuk basliklar beyaz (--sys-head), yardimci yazi SENTINEL turuncusu (--sys-desc). Hareket: yalniz hafif solma/kayma + cok yavas isik; reduced-motion'da hicbiri. */

/* ---- koyu gorsel yuzeyler (her iki temada koyu kalir; icindeki renk degiskenleri sabitlenir) ---- */
.es2-over{--sys-head:#FFFFFF;--t-on-ink:#FFFFFF;--t-on-ink-mute:#D5DCE8;--sys-desc:#FF9245;--sys-orange:#FF9245;--sys-orange-rgb:255,146,69;--v6-label:#FF9245;--sys-quiet:#C3CBD8;--sys-edge-2:rgba(170,200,255,.26);--line-dark:rgba(255,255,255,.28);--btn-fg:#FFFFFF}

/* ---- hero: tam genislik gorsel, solda metin ---- */
.es2-hero{isolation:isolate;min-height:clamp(560px,76vh,780px);display:flex;align-items:center;padding-block:clamp(72px,9vw,120px);border-bottom:1px solid rgba(170,200,255,.12)}
.es2-hero.v6-hero::before{display:none}
.es2-hero__bg{position:absolute;inset:0;z-index:-2;background:#06090d}
.es2-hero__bg img{display:block;width:100%;height:100%;object-fit:cover;object-position:68% center}
.es2-hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(5,8,12,.94) 0%,rgba(5,8,12,.76) 34%,rgba(5,8,12,.18) 62%,rgba(5,8,12,.06) 100%)}
.es2-hero .v6-hero__grid{grid-template-columns:minmax(0,640px)}
.es2-hero .v6-hero__copy{max-width:640px}
html[lang] body[data-world="esnaf"] main .es2-hero .v6-hero__note{color:#D5DCE8}
html[lang] body[data-world="esnaf"] main .es2-hero .v6-hero__note .txt-link{color:#FFFFFF}

/* ---- bolum iskeleti ---- */
.es2-sec{padding-block:clamp(44px,6vw,88px)}
.band.es2-gun{padding-top:clamp(0px,1vw,12px)}
.es2-sec[id]{scroll-margin-top:84px}
.es2-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(28px,4.5vw,56px);align-items:center}
.es2-split--rev{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr)}
.es2-copy{min-width:0}
.es2-copy h2{margin:.35em 0 .5em}
.es2-copy .v6-lede{max-width:46ch}
.es2-copy .btn{margin-top:22px}
.es2-tag{display:inline-flex;align-items:center;gap:9px;margin:22px 0 0;padding:9px 13px;border:1px solid var(--sys-edge-2);border-radius:999px;font:600 .76rem/1.2 var(--mono)}
html[lang] body[data-world="esnaf"] main .es2-tag{color:var(--sys-desc)}
.es2-tag i{width:7px;height:7px;border-radius:50%;background:#4AA7FF;box-shadow:0 0 12px #4AA7FF;flex:none}

/* ---- gorsel kart ---- */
.es2-visual{position:relative;margin:0;min-width:0;border-radius:26px;overflow:hidden;isolation:isolate;border:1px solid rgba(170,200,255,.18);background:#0A0E13;box-shadow:0 40px 100px -44px rgba(0,0,0,.6);--sys-desc:#FF9245}
.es2-visual img{display:block;width:100%;height:auto;aspect-ratio:1672/941;object-fit:cover}
.es2-visual::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 70px rgba(4,8,12,.35)}
.es2-visual figcaption{position:relative;z-index:1;padding:16px 20px 18px;border-top:1px solid rgba(170,200,255,.14);background:#0A0E13;font-size:.9rem;line-height:1.5}
html[lang] body[data-world="esnaf"] main .es2-visual figcaption{color:#FF9245}
.es2-visual figcaption .es-st{margin:8px 0 0 0;display:flex;width:max-content;max-width:100%}
.es2-timeline{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:clamp(28px,3.4vw,44px)}
.es2-timeline .es2-visual{border-radius:22px}

/* ---- sinema: gorsel + soldan koyu perde + metin ---- */
.es2-sec--wide>.wrap{width:min(100% - (var(--gutter) * 2),1360px)}
.es2-cinema{position:relative;display:flex;align-items:center;min-height:clamp(480px,46vw,610px);border-radius:30px;overflow:hidden;isolation:isolate;border:1px solid rgba(170,200,255,.16);background:#070B10}
.es2-cinema>img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.es2-cinema::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(4,7,10,.92) 0%,rgba(4,7,10,.45) 44%,rgba(4,7,10,.08) 76%)}
.es2-cinema__copy{position:relative;max-width:560px;padding:clamp(40px,5.5vw,80px) clamp(24px,4.6vw,60px)}
.es2-cinema__copy h2{margin:.3em 0 .45em}
.es2-cinema--final{min-height:clamp(520px,48vw,620px)}
.es2-cinema--final .es2-cinema__copy{max-width:700px}
.es2-cinema--final::before{background:linear-gradient(90deg,rgba(5,8,12,.95) 0%,rgba(5,8,12,.58) 50%,rgba(5,8,12,.12) 80%)}
.es2-cinema .btn-row{margin-top:clamp(20px,2.4vw,30px)}
#gun .es2-cinema{margin-bottom:clamp(8px,1.4vw,16px)}
.v6 .es2-gun__lede{margin:clamp(24px,3vw,38px) 0 clamp(18px,2vw,26px)}
.v6 .es2-ses__lede{margin:clamp(26px,3vw,40px) 0 clamp(18px,2vw,26px)}
.es2-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:clamp(30px,3.6vw,48px)}
.es2-cards .es-cap{min-height:180px}

/* ---- hareket: yalniz hafif (JS, reduced-motion'da hicbir sinif eklemez) ---- */
.es2-m [data-es2-img]{transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.es2-m [data-es2-img].es2-pre{opacity:0;transform:translate3d(0,14px,0)}
.es2-visual.es2-glow::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;background:radial-gradient(55% 70% at 72% 46%,rgba(255,170,100,.17),transparent 72%)}
.es2-cinema.es2-glow::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;background:radial-gradient(55% 70% at 72% 46%,rgba(255,170,100,.17),transparent 72%)}
.es2-visual.es2-live::before{animation:es2glow 7s ease-in-out infinite}
.es2-cinema.es2-live::after{animation:es2glow 7s ease-in-out infinite}
@keyframes es2glow{0%,100%{opacity:0}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .es2-m [data-es2-img]{transition:none}
  .es2-m [data-es2-img].es2-pre{opacity:1;transform:none}
  .es2-visual.es2-live::before,.es2-cinema.es2-live::after{animation:none}
}

/* ---- tablet / telefon ---- */
@media (max-width:900px){
  .es2-hero{align-items:flex-end;min-height:0;padding-block:calc(min(112vw,500px) - 56px) 44px}
  .es2-hero__bg{inset:0 0 auto 0;height:min(112vw,500px)}
  .es2-hero__bg img{object-position:84% center;-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 55%,transparent 100%)}
  .es2-hero::after{display:none}
  .es2-split,.es2-split--rev{grid-template-columns:minmax(0,1fr);gap:26px}
  .es2-cards{grid-template-columns:minmax(0,1fr)}
  .es2-timeline{grid-template-columns:minmax(0,1fr)}
  .es2-cinema{display:block;min-height:0;border-radius:24px}
  .es2-cinema>img{inset:0 0 auto 0;height:min(100vw,440px);object-position:var(--es2-pos,70%) center;-webkit-mask-image:linear-gradient(180deg,#000 58%,transparent 100%);mask-image:linear-gradient(180deg,#000 58%,transparent 100%)}
  .es2-cinema::before,.es2-cinema--final::before,.es2-cinema::after{display:none}
  .es2-cinema__copy{padding:calc(min(100vw,440px) - 64px) 22px 30px;max-width:none}
  .es2-cinema--final .es2-cinema__copy{max-width:none}
}
@media (max-width:420px){
  .es2-cinema__copy{padding-inline:20px}
}


/* ESNAF VITRIN FINAL · demo + beta paket yüzeyi; yalnız /esnaf/ */
.es-vitrin{padding-block:clamp(48px,6vw,86px)}
.es-vitrin__head{margin-bottom:clamp(24px,3vw,38px)}
.es-demo-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;list-style:none;padding:0;margin:0}
.es-demo-step{display:flex;gap:14px;min-width:0;padding:22px;border:1px solid var(--sys-edge-2);border-radius:20px;background:var(--v6-card,rgba(255,255,255,.035))}
.es-demo-step>span{display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;border-radius:50%;background:rgba(var(--sys-orange-rgb),.12);border:1px solid rgba(var(--sys-orange-rgb),.45);font:700 .8rem/1 var(--mono);color:var(--sys-desc)}
.es-demo-step h3{margin:2px 0 8px;font-size:1rem}
.es-demo-step p{margin:0 0 16px;font-size:.9rem;line-height:1.55;color:var(--sys-quiet)}
.es-demo-btn{margin-top:auto;padding:.7rem .9rem;font-size:.82rem}
.es-demo-bank{margin-top:20px;border:1px solid var(--sys-edge-2);border-radius:20px;background:var(--v6-card,rgba(255,255,255,.025));overflow:hidden}
.es-demo-bank summary{cursor:pointer;padding:18px 20px;font-weight:700;color:var(--sys-head)}
.es-demo-bank__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:0 18px 18px}
.es-demo-bank__grid button{min-width:0;text-align:left;padding:13px 14px;border:1px solid var(--sys-edge-2);border-radius:14px;background:transparent;color:var(--sys-head);font:600 .86rem/1.4 var(--body);cursor:pointer}
.es-demo-bank__grid button:hover,.es-demo-bank__grid button:focus-visible{border-color:rgba(var(--sys-orange-rgb),.7);outline:none}
.es-demo-bank__grid b{color:var(--sys-desc);margin-right:6px}
.es-demo-bank__note{margin:0;padding:0 20px 20px;font-size:.82rem;color:var(--sys-quiet)}
.es-demo-own{margin-top:20px;padding:16px 18px;border-left:3px solid var(--sys-orange);background:rgba(var(--sys-orange-rgb),.07);border-radius:0 14px 14px 0;line-height:1.55}
.es-package-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.es-package-card{display:flex;flex-direction:column;min-width:0;padding:clamp(22px,2.6vw,30px);border:1px solid var(--sys-edge-2);border-radius:22px;background:var(--v6-card,rgba(255,255,255,.035))}
.es-package-card--focus{border-color:rgba(var(--sys-orange-rgb),.55);box-shadow:0 0 0 1px rgba(var(--sys-orange-rgb),.08),0 24px 70px -48px rgba(var(--sys-orange-rgb),.8)}
.es-package-card h3{margin:16px 0 10px}
.es-package-card p{margin:0 0 22px;line-height:1.58;color:var(--sys-quiet)}
.es-package-card .btn{margin-top:auto;align-self:flex-start}
.es-package-truth{max-width:92ch;margin:22px 0 0;padding:18px 20px;border:1px solid var(--sys-edge-2);border-radius:16px;line-height:1.6;color:var(--sys-quiet)}
#demo,#paket{scroll-margin-top:84px}
@media (max-width:980px){
  .es-demo-flow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .es-package-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .es-demo-flow,.es-demo-bank__grid{grid-template-columns:minmax(0,1fr)}
  .es-demo-step{padding:18px}
  .es-demo-bank summary{padding:16px 18px}
  .es-demo-bank__grid{padding-inline:14px}
  .es-package-card .btn{width:100%;justify-content:center}
}