/* ====================================================================
   birlesme.css — sol panel + Sale cart BIRLESMESI ve gomulu takas (2026-10-12)
   assets/js/birlesme.js ile. Hayalet kutular ve panel .yuzey ile AYNI cam.
   Karemsi; hover yok; yuvarlak hap/rozet yok.
   ==================================================================== */
.calisma.bl-var { position:relative; }
.bl-sahne { position:absolute; inset:0; z-index:6; pointer-events:none; }

.bl-g, .bl-panel { position:absolute; box-sizing:border-box;
  background:var(--cam); -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%);
  border:1px solid var(--kd-kenar, rgba(255,255,255,.72)); border-radius:20px; box-shadow:var(--golge); }
.bl-g { will-change:left, width, transform; }
.bl-panel { pointer-events:auto; overflow:auto; overscroll-behavior:contain;
    }
.bl-panel::-webkit-scrollbar { width:9px; }
.bl-panel::-webkit-scrollbar-thumb { background:var(--cizgi-2); border-radius:99px; border:2px solid transparent; background-clip:content-box; }

/* ---------------------------------------- A) icerik cekilir / geri gelir */
.bl-cikis > .sol-kol > *, .bl-cikis > .sepet > * { animation:blCik .3s cubic-bezier(.5,0,.75,0) both; }
.bl-cikis > .sol-kol > :nth-child(2), .bl-cikis > .sepet > :nth-child(2) { animation-delay:.03s; }
.bl-cikis > .sol-kol > :nth-child(3), .bl-cikis > .sepet > :nth-child(3) { animation-delay:.06s; }
.bl-cikis > .sol-kol > :nth-child(n+4) { animation-delay:.09s; }
@keyframes blCik { to { opacity:0; transform:translateY(-8px) scale(.985); filter:blur(2px); } }
.bl-gizli > .sol-kol, .bl-gizli > .sepet { visibility:hidden; }
.bl-donus > .sol-kol > *, .bl-donus > .sepet > * { animation:blDon .45s cubic-bezier(.2,.8,.2,1) both; }
.bl-donus > .sol-kol > :nth-child(3), .bl-donus > .sepet > :nth-child(2) { animation-delay:.05s; }
.bl-donus > .sol-kol > :nth-child(n+4), .bl-donus > .sepet > :nth-child(n+3) { animation-delay:.1s; }
@keyframes blDon { from { opacity:0; transform:translateY(10px); } }
@media (max-width:980px) { .calisma.bl-acik > .sol-kol, .calisma.bl-acik > .sepet { display:none; } }

/* ---------------------------------------- B) tasarim parcalari */
/* 1 yutma: one isikli kenar */
.bl-g.bl-kenar::after { content:""; position:absolute; top:8%; bottom:8%; right:-2px; width:3px; border-radius:2px;
  background:linear-gradient(transparent, #60A5FA 30%, #2563EB 50%, #60A5FA 70%, transparent);
  box-shadow:0 0 18px 4px rgba(96,165,250,.45); }
/* 2 miknatis: dikis parlamasi */
.bl-dikis { position:absolute; width:4px; transform:translateX(-50%); border-radius:2px; pointer-events:none;
  background:linear-gradient(transparent, rgba(96,165,250,.95) 20%, var(--kd-yuzey, #fff) 50%, rgba(96,165,250,.95) 80%, transparent);
  box-shadow:0 0 22px 6px rgba(96,165,250,.55); z-index:3; }
/* 3 katlanma / isik gecisi */
.bl-isik::before { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:2;
  background:linear-gradient(100deg, transparent 0 35%, rgba(var(--kd-cam, 255,255,255), .85) 50%, transparent 65% 100%) no-repeat;
  background-size:45% 100%; animation:blIsik 1s cubic-bezier(.3,0,.2,1) forwards; }
@keyframes blIsik { from { background-position:-80% 0; } to { background-position:180% 0; } }
/* 5 fermuar */
.bl-kopru { border-radius:0 !important; border-left:0; border-right:0; box-shadow:none; z-index:1; }
.bl-cekecek { position:absolute; z-index:4; width:14px; height:24px; border-radius:4px; pointer-events:none;
  background:linear-gradient(180deg,#60A5FA,#2563EB); box-shadow:0 0 0 3px var(--kd-halka, rgba(255,255,255,.9)), 0 0 22px 6px rgba(37,99,235,.45); }
.bl-panel.bl-nabiz { animation:blNabiz .9s ease-out; }
@keyframes blNabiz { from { box-shadow:var(--golge), 0 0 0 0 rgba(37,99,235,.38); } to { box-shadow:var(--golge), 0 0 0 18px rgba(37,99,235,0); } }

/* ---------------------------------------- gomulu takas: panel zaten cam, icteki kutular sade */
.bl-ic { padding:18px 22px 22px; }
.bl-ic .trd { max-width:none; }
.bl-ic .trd-ust { margin-top:0; }
.bl-ic .trd-duzen { grid-template-columns:minmax(0,1fr) 340px; gap:22px; }
.bl-ic .trd-ana { padding:0; background:none; border:0; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; border-radius:0; }
.bl-ic .trd-yan .yuzey, .bl-ic .trd-sonuc { background:rgba(var(--kd-cam, 255,255,255), .72); -webkit-backdrop-filter:none; backdrop-filter:none;
  border:1px solid var(--cizgi); box-shadow:0 1px 2px rgba(15,42,86,.04); }
.bl-ic .trd-sonuc { margin-top:40px; }
@media (max-width:980px) { .bl-ic .trd-duzen { grid-template-columns:1fr; } }
@media (max-width:560px) { .bl-ic { padding:14px; } }

/* ---------------------------------------- C) icerik girisi (her tasarimin kendi dili) */
@keyframes blYukari { from { opacity:0; transform:translateY(14px); } }
@keyframes blSoldan { from { opacity:0; transform:translateX(-26px); filter:blur(6px); } }
@keyframes blSagdan { from { opacity:0; transform:translateX(26px); filter:blur(6px); } }
@keyframes blBuyu { from { opacity:0; transform:scale(.93); } }
@keyframes blDus { 0% { opacity:0; transform:translateY(-48px) rotate(-5deg); } 55% { opacity:1; } 100% { transform:none; } }
@keyframes blZemin { from { background-color:rgba(255,255,255,0); box-shadow:none; } }
@keyframes blSol { from { opacity:0; } }

.bl-gir-1 .bl-o { animation:blYukari .5s cubic-bezier(.2,.8,.2,1) var(--d,0ms) both; }
.bl-gir-2 .bl-o { animation:blYukari .48s cubic-bezier(.2,.8,.2,1) calc(var(--d,0ms) + 60ms) both; }
.bl-gir-3 .bl-o { animation:blSoldan .55s cubic-bezier(.2,.8,.2,1) var(--d,0ms) both; }
.bl-gir-3 .trd-yan .bl-o { animation-name:blSagdan; }
.bl-gir-4 .bl-o { animation:blBuyu .5s cubic-bezier(.2,.9,.3,1.25) var(--d,0ms) both; }
.bl-gir-5 .bl-o { animation:blYukari .45s cubic-bezier(.2,.8,.2,1) var(--d,0ms) both; }
.bl-gir-5 .trd-k.bl-o { transform-origin:50% 0; animation:blDus .62s cubic-bezier(.3,1.35,.5,1) calc(var(--d,0ms) + 120ms) both; }
/* esya gorseli ucarken kartin zemini ve yazilari sonradan belirir (2 ve 4) */
.bl-ic .trd-k.bl-ucan { animation:blZemin .5s ease-out .3s both !important; }
.bl-ic .trd-k.bl-ucan > :not(figure) { animation:blSol .35s ease-out .45s both; }
.bl-ic .trd-k.bl-ucan figure { z-index:3; }

@media (prefers-reduced-motion: reduce) {
  .bl-cikis *, .bl-donus *, .bl-ic *, .bl-panel { animation:none !important; }
}