:root{
  --font:'Manrope',system-ui,sans-serif;
  --display:'Space Grotesk',system-ui,sans-serif;
  --night:#0A070A; --ink:#F5F3EF; --red:#D9342E; --cyan:#63C8EA;
  --stone:#F3F5F4; --dink:#13242C; --steel:#26718A;
  --grow:3;
  --ease:cubic-bezier(.22,.7,.2,1);
}
*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{font-family:var(--font);background:var(--night);color:var(--ink);overflow:hidden}

.wordmark{
  position:fixed;top:1.75rem;left:50%;transform:translateX(-50%);z-index:10;
  font:700 .95rem/1 var(--display);letter-spacing:.22em;color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.75);
  pointer-events:none;white-space:nowrap;
}

.split{display:flex;height:100dvh}
.panel{
  position:relative;flex:1 1 0;min-width:0;overflow:hidden;display:block;
  container-type:inline-size;
  color:inherit;text-decoration:none;
  transition:flex-grow .8s var(--ease);
}
.panel:focus-visible{flex-grow:var(--grow);outline:none}
@media (hover:hover) and (min-width:801px){.panel:hover{flex-grow:var(--grow)}}
.panel + .panel{border-left:1px solid rgba(255,255,255,.18)}

.panel img{
  /* sabit genişlik: panel büyürken görsel yeniden ölçeklenmez, yalnızca kırpılır */
  position:absolute;top:0;left:50%;height:100%;width:calc(100vw * var(--grow) / (var(--grow) + 1));
  max-width:none;object-fit:cover;transform:translateX(-50%);
  transition:transform 1.2s var(--ease);will-change:transform;
}
/* karartma: filter yerine ucuz opacity geçişi */
.panel::after{content:"";position:absolute;inset:0;z-index:1;background:#0A070A;opacity:0;pointer-events:none;transition:opacity .8s var(--ease)}
.creator img{object-position:55% 50%}
.services img{object-position:85% 50%}
.panel:hover img,.panel:focus-visible img{transform:translateX(-50%) scale(1.03)}

.shade{position:absolute;inset:0;pointer-events:none}
.creator .shade{
  background:
    radial-gradient(60% 50% at 0% 100%,rgba(217,52,46,.28),transparent 70%),
    radial-gradient(50% 40% at 100% 0%,rgba(99,200,234,.16),transparent 70%),
    linear-gradient(to top,rgba(10,7,10,.92) 0%,rgba(10,7,10,.35) 45%,rgba(10,7,10,.1) 100%);
}
.services .shade{
  background:
    linear-gradient(to right,rgba(243,245,244,.5) 0%,rgba(243,245,244,0) 45%),
    linear-gradient(to top,rgba(243,245,244,.96) 0%,rgba(243,245,244,.55) 40%,rgba(243,245,244,0) 75%);
}

.content{
  position:absolute;left:0;bottom:0;z-index:2;
  width:min(100%,34rem);padding:0 1.5rem 3rem 2.25rem;
  display:flex;flex-direction:column;gap:1rem;align-items:flex-start;
}
.services .content{color:var(--dink)}
.creator .content{color:var(--ink)}

.tag{display:inline-flex;align-items:center;gap:.6rem;font:700 .7rem/1.2 var(--font);letter-spacing:.12em}
.tag i{width:6px;height:6px;display:block}
.creator .tag{color:var(--cyan)} .creator .tag i{background:var(--red)}
.services .tag{color:var(--steel)} .services .tag i{background:var(--steel)}

.content h1,.content h2{
  font:600 clamp(1.8rem,7cqw,4.4rem)/1.02 var(--display);letter-spacing:-.05em;
}
.content p{font:400 1rem/1.5 var(--font);opacity:.85;max-width:26ch;
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.btn{
  display:inline-block;margin-top:.4rem;padding:.95rem 1.4rem;
  font:600 .8rem/1 var(--font);letter-spacing:.06em;text-transform:uppercase;
  transition:background-color .25s,opacity .5s var(--ease),transform .5s var(--ease);
}
.creator .btn{background:var(--red);color:var(--ink)}
.services .btn{background:var(--steel);color:#fff}
.creator:hover .btn{background:#e0504a}
.services:hover .btn{background:#2f86a3}

/* hover: diğer taraf geri çekilir */
@media (hover:hover) and (min-width:801px){
  .split:has(.panel:hover) .panel:not(:hover)::after{opacity:.45}
  .split:has(.panel:hover) .panel:not(:hover) .content p{opacity:0;transform:translateY(8px)}
}
.split:has(.panel:focus-visible) .panel:not(:focus-visible)::after{opacity:.45}
.panel:focus-visible .btn{outline:2px solid currentColor;outline-offset:3px}

/* mobil / dokunmatik: alt alta iki tam kart */
@media (max-width:800px){
  body{overflow:hidden}
  .split{flex-direction:column}
  .panel{flex:1 1 0}
  .panel:hover,.panel:focus-visible{flex-grow:1}
  .panel + .panel{border-left:0;border-top:1px solid rgba(255,255,255,.18)}
  .wordmark{top:1rem;font-size:.8rem}
  .content{width:100%;padding:0 1.25rem 1.5rem;gap:.7rem}
  .content h1,.content h2{font-size:clamp(1.9rem,8.5vw,2.6rem)}
  .content p{font-size:.92rem;max-width:34ch}
  .btn{padding:.85rem 1.2rem}
  .panel img{left:0;width:100%;transform:none}
  .panel:hover img,.panel:focus-visible img{transform:none}
  .creator img{object-position:64% 50%}
  .services img{object-position:91% 50%}
}

@media (prefers-reduced-motion:reduce){
  .panel,.panel img,.panel::after,.content p,.btn{transition:none}
  .panel:hover img,.panel:focus-visible img{transform:translateX(-50%)}
}