/* React Bits bileşenleri (MIT + Commons Clause, © 2026 David Haz), düz JS'e uyarlanmış hâlleri. */

/* GRADIENT TEXT */
.gradient-text{display:inline-block;background-image:var(--gt-gradient,linear-gradient(90deg,var(--c1),var(--c2)));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding-bottom:.08em}

/* LIGHTFALL */
.lightfall{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:-1;opacity:.85;
  -webkit-mask:linear-gradient(#000 60%,transparent);mask:linear-gradient(#000 60%,transparent)}

/* GOOEY NAV */
:root{--linear-ease:linear(0,.068,.19 2.7%,.804 8.1%,1.037,1.199 13.2%,1.245,1.27 15.8%,1.274,1.272 17.4%,1.249 19.1%,.996 28%,.949,.928 33.3%,.926,.933 36.8%,1.001 45.6%,1.013,1.019 50.8%,1.018 54.4%,1 63.1%,.995 68%,1.001 85%,1);--color-1:var(--c1);--color-2:var(--c2);--color-3:var(--c3);--color-4:#fff}
.gooey{position:relative;padding:5px;border-radius:999px;border:1px solid rgba(255,255,255,.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.gooey::before{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;background:rgba(255,255,255,.13);pointer-events:none}
.gooey nav{display:flex;position:relative;transform:translate3d(0,0,.01px)}
.gooey ul{display:flex;gap:.3em;list-style:none;padding:0;margin:0;position:relative;z-index:3;color:#fff}
.gooey li{border-radius:100vw;position:relative;cursor:pointer;transition:color .3s ease;color:#fff}
.gooey li a{display:inline-block;padding:.5em 1em;font-weight:500;font-size:14px;white-space:nowrap}
.gooey li::after{content:"";position:absolute;inset:0;border-radius:10px;background:#fff;opacity:0;transform:scale(0);transition:all .3s ease;z-index:-1}
.gooey li.active{color:#000}.gooey li.active::after{opacity:1;transform:scale(1)}
.gooey .effect{position:absolute;left:0;top:0;width:0;height:0;opacity:1;pointer-events:none;display:grid;place-items:center;z-index:1}
.gooey .effect.text{color:#fff;transition:color .3s ease;font-weight:500;font-size:14px;white-space:nowrap}.gooey .effect.text.active{color:#000}
.gooey .effect.filter{filter:blur(7px) contrast(100) blur(0);mix-blend-mode:lighten}
.gooey .effect.filter::before{content:"";position:absolute;inset:-75px;z-index:-2;background:#000}
.gooey .effect.filter::after{content:"";position:absolute;inset:0;background:#fff;transform:scale(0);opacity:0;z-index:-1;border-radius:100vw}
.gooey .effect.active::after{animation:pill .3s ease both}
@keyframes pill{to{transform:scale(1);opacity:1}}
.particle,.point{display:block;opacity:0;width:20px;height:20px;border-radius:100%;transform-origin:center}
.particle{--time:5s;position:absolute;top:calc(50% - 8px);left:calc(50% - 8px);animation:particle calc(var(--time)) ease 1 -350ms}
.point{background:var(--color);opacity:1;animation:point calc(var(--time)) ease 1 -350ms}
@keyframes particle{0%{transform:rotate(0deg) translate(calc(var(--start-x)),calc(var(--start-y)));opacity:1;animation-timing-function:cubic-bezier(.55,0,1,.45)}70%{transform:rotate(calc(var(--rotate)*.5)) translate(calc(var(--end-x)*1.2),calc(var(--end-y)*1.2));opacity:1;animation-timing-function:ease}85%{transform:rotate(calc(var(--rotate)*.66)) translate(calc(var(--end-x)),calc(var(--end-y)));opacity:1}100%{transform:rotate(calc(var(--rotate)*1.2)) translate(calc(var(--end-x)*.5),calc(var(--end-y)*.5));opacity:1}}
@keyframes point{0%{transform:scale(0);opacity:0;animation-timing-function:cubic-bezier(.55,0,1,.45)}25%{transform:scale(calc(var(--scale)*.25))}38%{opacity:1}65%{transform:scale(var(--scale));opacity:1;animation-timing-function:ease}85%{transform:scale(var(--scale));opacity:1}100%{transform:scale(0);opacity:0}}

/* MAGIC BENTO: 4 sütun, 3 satır; 3. kart sağ üstte 2x2, 4. kart sol altta 2x2 */
.bento{display:grid;gap:clamp(8px,.9vw,14px);grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,1fr);user-select:none}
.mb-card{display:flex;flex-direction:column;justify-content:flex-end;position:relative;min-height:0;padding:clamp(16px,1.6vw,28px);border-radius:22px;
  border:1px solid rgba(255,255,255,.09);background:rgba(10,8,18,.55);backdrop-filter:blur(6px);overflow:hidden;transition:box-shadow .3s ease;
  --glow-x:50%;--glow-y:50%;--glow-intensity:0;--glow-radius:300px}
.mb-card:nth-child(3){grid-column:3/span 2;grid-row:1/span 2}
.mb-card:nth-child(4){grid-column:1/span 2;grid-row:2/span 2}
.mb-card:nth-child(6){grid-column:4;grid-row:3}
.mb-card::after{content:"";position:absolute;inset:0;padding:6px;border-radius:inherit;pointer-events:none;z-index:1;
  background:radial-gradient(var(--glow-radius) circle at var(--glow-x) var(--glow-y),rgba(var(--glow),calc(var(--glow-intensity)*.8)) 0%,rgba(var(--glow),calc(var(--glow-intensity)*.4)) 30%,transparent 60%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude}
.mb-card:hover{box-shadow:0 4px 20px rgba(0,0,0,.4),0 0 30px rgba(var(--glow),.2)}
.mb-card h3,.mb-card p{position:relative;z-index:2}
.mb-card h3{font-size:clamp(18px,min(1.5vw,2.8vh),24px);letter-spacing:-.03em;margin:0}
.mb-card p{margin:6px 0 0;font-size:clamp(13px,min(.95vw,1.8vh),15px);color:rgba(255,255,255,.68);line-height:1.45}
.mb-card:nth-child(3) h3,.mb-card:nth-child(4) h3{font-size:clamp(26px,min(2.6vw,5vh),44px)}
.mb-card:nth-child(3) p,.mb-card:nth-child(4) p{font-size:clamp(14px,min(1.15vw,2.2vh),18px);max-width:26rem}
.mb-card:nth-child(3),.mb-card:nth-child(4){background:radial-gradient(120% 90% at 100% 0%,rgba(var(--glow),.22),transparent 60%),rgba(10,8,18,.55)}
.mb-parca{position:absolute;width:4px;height:4px;border-radius:50%;background:rgba(var(--glow),1);box-shadow:0 0 6px rgba(var(--glow),.6);pointer-events:none;z-index:3}
.global-spotlight{position:fixed;width:800px;height:800px;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);mix-blend-mode:screen;z-index:15;opacity:0;
  background:radial-gradient(circle,rgba(var(--glow),.15) 0%,rgba(var(--glow),.08) 15%,rgba(var(--glow),.04) 25%,rgba(var(--glow),.02) 40%,rgba(var(--glow),.01) 65%,transparent 70%)}
@media (max-width:820px){.bento{grid-template-columns:1fr 1fr;grid-template-rows:none}.mb-card,.mb-card:nth-child(n){grid-column:auto;grid-row:auto;min-height:96px;padding:14px}
  .mb-card:nth-child(3),.mb-card:nth-child(4){grid-column:span 2}.mb-card:nth-child(3) h3,.mb-card:nth-child(4) h3{font-size:22px}}
.mb-gorsel{position:absolute;z-index:0;right:5%;bottom:0;width:min(30%,220px);aspect-ratio:1/2.1636;object-fit:cover;object-position:top;border-radius:26px 26px 0 0;
  transform:translateY(38%) rotate(-4deg);transform-origin:bottom center;box-shadow:0 -10px 60px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.14);transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.mb-card:hover .mb-gorsel{transform:translateY(30%) rotate(0deg)}
.mb-sahne{position:absolute;z-index:0;inset:0 0 0 auto;width:62%;height:100%;object-fit:cover;object-position:center;
  -webkit-mask:linear-gradient(90deg,transparent,#000 35%);mask:linear-gradient(90deg,transparent,#000 35%);transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.mb-card:hover .mb-sahne{transform:scale(1.05)}
.mb-mozaik{position:absolute;z-index:0;right:5%;top:8%;width:min(50%,380px);display:grid;grid-template-columns:1fr 1fr;gap:10px;transform:rotate(-4deg)}
.mb-mozaik img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:14px;box-shadow:0 14px 30px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.12);transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.mb-card:hover .mb-mozaik img:nth-child(odd){transform:translateY(-6px)}.mb-card:hover .mb-mozaik img:nth-child(even){transform:translateY(6px)}
.mb-card:has(.mb-sahne) h3,.mb-card:has(.mb-sahne) p,.mb-card:has(.mb-mozaik) h3,.mb-card:has(.mb-mozaik) p{max-width:46%}
@media (max-width:820px){.mb-gorsel,.mb-sahne,.mb-mozaik{display:none}.mb-card:nth-child(n) h3,.mb-card:nth-child(n) p{max-width:none}}
/* konuya özel görseller: üç kartlık yelpaze, üzerine gelince açılır */
.mb-yelpaze{position:absolute;z-index:0;right:4%;top:6%;bottom:6%;width:min(46%,340px);pointer-events:none}
.mb-yelpaze img{position:absolute;left:50%;top:50%;height:min(100%,330px);aspect-ratio:941/1672;object-fit:cover;border-radius:18px;
  box-shadow:0 24px 50px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.14);
  transform:translate(-50%,-50%) translateX(calc(var(--k)*34%)) rotate(calc(var(--k)*9deg)) scale(calc(1 - (var(--k)*var(--k))*.12));
  z-index:calc(2 - var(--k)*var(--k));transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.mb-card:hover .mb-yelpaze img{transform:translate(-50%,-50%) translateX(calc(var(--k)*58%)) rotate(calc(var(--k)*13deg)) scale(calc(1 - (var(--k)*var(--k))*.08))}
@media (max-width:820px){.mb-yelpaze{display:none}}
.mb-card:has(.mb-yelpaze) h3,.mb-card:has(.mb-yelpaze) p{max-width:48%}
.mb-yelpaze img[src$=".png"]{aspect-ratio:420/640;object-fit:contain;box-shadow:none;border-radius:0;filter:drop-shadow(0 20px 30px rgba(0,0,0,.5))}
.mb-card:has(.mb-gorsel) h3,.mb-card:has(.mb-gorsel) p{max-width:56%}.mb-card h3,.mb-card p{text-shadow:0 2px 16px rgba(0,0,0,.6)}
.mb-card h3{line-height:1.12}

/* === hizalama: tüm bento kartlarında başlık + açıklama sol üstte, aynı boşlukla; görseller sağda/altta === */
.mb-card{justify-content:flex-start}
.mb-card h3{font-size:clamp(18px,min(1.45vw,2.7vh),23px);line-height:1.2;max-width:none}
.mb-card p{margin-top:8px}
.mb-card:nth-child(3) h3,.mb-card:nth-child(4) h3{font-size:clamp(24px,min(2.2vw,4.2vh),36px);line-height:1.1}
.mb-card:nth-child(3) p,.mb-card:nth-child(4) p{margin-top:10px}
.mb-card:has(.mb-gorsel) h3,.mb-card:has(.mb-gorsel) p,.mb-card:has(.mb-yelpaze) h3,.mb-card:has(.mb-yelpaze) p,
.mb-card:has(.mb-sahne) h3,.mb-card:has(.mb-sahne) p,.mb-card:has(.mb-mozaik) h3,.mb-card:has(.mb-mozaik) p{max-width:44%}
.mb-yelpaze{top:10%;bottom:4%}
.mb-mozaik{top:auto;bottom:8%}

/* degrade yazının son harfi kesilmesin (sıkı harf aralığı kutuyu daraltıyor) */
.gradient-text{padding-right:.08em;margin-right:-.08em}
.mb-card:has(.mb-gorsel) h3,.mb-card:has(.mb-gorsel) p{max-width:54%}

/* === kart yazıları: renkli kalın başlık, düz beyaz açıklama, dikeyde ortalı === */
.mb-card{justify-content:center}
.mb-card h3{font-weight:700;letter-spacing:-.025em;color:var(--c1);text-shadow:none}
.mb-card p{color:#FFFFFF;font-weight:500;opacity:.92;text-shadow:0 1px 12px rgba(0,0,0,.5)}
.mb-card:nth-child(3) h3,.mb-card:nth-child(4) h3{font-weight:700}
.mb-card h3{background:linear-gradient(90deg,color-mix(in srgb,var(--c1) 78%,#fff),color-mix(in srgb,var(--c2) 78%,#fff));-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em}

/* dönen şerit (mb-dongu): yan yana üç kart, ortadaki büyük, yanlar küçük; eğim ve üst üste binme yok */
.mb-card .mb-dongu{width:min(50%,480px);right:1%;top:3%;bottom:3%}
.mb-card .mb-dongu img,.mb-card:hover .mb-dongu img{aspect-ratio:var(--oran);height:min(100%,420px);max-width:44%;object-fit:cover;z-index:1;filter:brightness(.6);
  transform:translate(-50%,-50%) translateX(calc(var(--k)*72%)) scale(calc(1 - min(var(--k)*var(--k),1)*.36));
  transition:transform 1s cubic-bezier(.2,.8,.2,1),opacity .8s ease,filter .8s ease}
.mb-card .mb-dongu img.orta{z-index:2;filter:none}
.mb-card .mb-dongu img.gizli{opacity:0}
.mb-etiket{position:absolute;left:50%;bottom:-2%;z-index:5;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:9px 18px;border-radius:16px;background:rgba(10,7,19,.55);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.18);white-space:nowrap;text-align:center}
.mb-etiket small{font-size:12px;font-weight:500;color:#FFFFFF;opacity:.75}
.mb-etiket b{font-size:clamp(16px,1.3vw,20px);font-weight:600;letter-spacing:-.02em;color:#FFFFFF;transition:opacity .25s,transform .25s}
.mb-etiket b.degis{opacity:0;transform:translateY(6px)}