/* ============================================================
   Studio NRC — HERO taslakları (3 farklı kurgu)
   hero-1: Sinematik · hero-2: Editoryal Split · hero-3: Kinetik Izgara
   ============================================================ */

/* ============================================================
   HERO 1 — Sinematik
   ============================================================ */

.h1x{
  position:relative;min-height:100svh;overflow:hidden;background:var(--black);
  display:flex;align-items:center;
  padding-top:var(--head-h);
  /* alt film şeridinin yüksekliği kadar boşluk — içerik şeritle çakışmasın */
  padding-bottom:clamp(130px,16vh,175px);
}
.h1x-bg{position:absolute;inset:0;z-index:0}
.h1x-bg video{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.06);opacity:.5;
  filter:grayscale(.25) contrast(1.06);
}
.h1x::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(130% 100% at 50% 42%,transparent 0%,rgba(0,0,0,.55) 52%,rgba(0,0,0,.93) 100%),
    linear-gradient(180deg,rgba(0,0,0,.82) 0%,transparent 22%,transparent 58%,rgba(0,0,0,.96) 100%);
}
/* İnce film greni */
.h1x-grain{
  position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

.h1x-in{position:relative;z-index:4;text-align:center;width:100%;
  padding-block:clamp(1rem,3vh,2rem)}

.h1x-eye{
  display:inline-flex;align-items:center;gap:.7rem;
  font-size:var(--t-eyebrow);letter-spacing:.3em;text-transform:uppercase;
  color:var(--dim);font-weight:600;margin-bottom:1.4rem;
}
.h1x-eye .dot{width:6px;height:6px;border-radius:50%;background:var(--red);
  box-shadow:0 0 0 0 rgba(230,0,18,.65);animation:h1xPulse 2.2s var(--ease-in-out) infinite}
@keyframes h1xPulse{70%{box-shadow:0 0 0 9px rgba(230,0,18,0)}100%{box-shadow:0 0 0 0 rgba(230,0,18,0)}}

/* İki satır halinde, ölçülü bir ölçek — aşırı büyük tipografiden kaçınılır */
.h1x-title{
  font-size:clamp(2rem,4.4vw,3.6rem);font-weight:650;line-height:1.05;
  letter-spacing:-.04em;margin:0;
}
.h1x-title > span{display:block;overflow:hidden}
.h1x-title .em{color:var(--red)}

.h1x-sub{
  margin:1.5rem auto 0;max-width:52ch;color:var(--dim);
  font-size:clamp(.94rem,1.08vw,1.06rem);line-height:1.72;
}
.h1x-act{display:flex;gap:.85rem;justify-content:center;flex-wrap:wrap;margin-top:1.9rem}

/* Dönen uzmanlık kelimeleri */
.h1x-rot{
  display:inline-flex;align-items:center;gap:1rem;margin-top:2rem;
  font-size:var(--t-eyebrow);letter-spacing:.24em;text-transform:uppercase;
}
.h1x-rot .lbl{color:var(--dim-2)}
.rot-box{
  position:relative;display:block;height:1.35em;overflow:hidden;
  min-width:15ch;text-align:left;
}
.rot-box b{
  position:absolute;left:0;top:0;width:100%;color:#fff;font-weight:600;
  opacity:0;transform:translateY(100%);
  animation:rotWord 12s var(--ease) infinite;
  animation-delay:calc(var(--i) * 3s);
}
@keyframes rotWord{
  0%{opacity:0;transform:translateY(100%)}
  4%,21%{opacity:1;transform:translateY(0)}
  25%,100%{opacity:0;transform:translateY(-100%)}
}

/* Alt film şeridi */
.h1x-strip{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  padding:1rem 0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.h1x-strip-in{display:flex;gap:.7rem;width:max-content;animation:h1xSlide 48s linear infinite}
.h1x:hover .h1x-strip-in{animation-play-state:paused}
@keyframes h1xSlide{to{transform:translateX(-50%)}}
.h1x-cell{
  width:clamp(78px,7.5vw,116px);aspect-ratio:4/5;flex:none;
  border-radius:2px;overflow:hidden;opacity:.5;
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.h1x-cell img{width:100%;height:100%;object-fit:cover}
.h1x-cell:hover{opacity:1;transform:translateY(-5px)}

.h1x-scroll{
  position:absolute;left:50%;transform:translateX(-50%);bottom:9.5rem;z-index:5;
  display:flex;align-items:center;gap:.8rem;
  font-size:var(--t-eyebrow);letter-spacing:.26em;text-transform:uppercase;color:var(--dim-2);
}
.h1x-scroll .ln{width:44px;height:1px;background:#2c2c36;position:relative;overflow:hidden}
.h1x-scroll .ln::after{content:"";position:absolute;inset:0;background:var(--red);
  animation:scrollLn 2.1s var(--ease-in-out) infinite}

/* ============================================================
   HERO 2 — Editoryal Split
   ============================================================ */

.h2x{
  position:relative;min-height:100svh;display:flex;align-items:center;
  padding-top:var(--head-h);overflow:hidden;background:var(--black);
}
.h2x-amb{position:absolute;inset:0;z-index:0;overflow:hidden}
.h2x-amb img{
  width:100%;height:100%;object-fit:cover;
  filter:blur(58px) saturate(115%) brightness(.42);transform:scale(1.22);opacity:.55;
}
.h2x::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(120% 85% at 12% 40%,rgba(0,0,0,.94) 0%,rgba(0,0,0,.72) 42%,transparent 78%),
    linear-gradient(180deg,rgba(0,0,0,.72) 0%,transparent 26%,transparent 62%,rgba(0,0,0,.9) 100%);
}
.h2x-in{
  position:relative;z-index:3;width:100%;max-width:var(--wrap);margin:0 auto;
  padding-inline:var(--gut);
  display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(2rem,5vw,5rem);align-items:center;
}
.h2x-copy{padding-block:clamp(2.5rem,6vh,4.5rem)}
.h2x-title{
  font-size:clamp(2.35rem,5.1vw,4.15rem);font-weight:640;line-height:1.03;
  letter-spacing:-.038em;margin:1.35rem 0 0;
}
.h2x-title > span{display:block;overflow:hidden}
.h2x-title .em{color:var(--red)}
.h2x-copy .lede{margin-top:1.5rem;max-width:44ch}
.h2x-act{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.2rem}
.h2x-sign{
  margin-top:2.6rem;display:flex;align-items:center;gap:1rem;
  font-size:.9rem;color:var(--dim);
}
.h2x-sign::before{content:"";width:34px;height:1px;background:var(--red);flex:none}

.h2x-stage{position:relative;display:grid;grid-template-columns:1.32fr .68fr;gap:.85rem;align-items:center}
.h2x-v{position:relative;overflow:hidden;border-radius:var(--r);background:#101014;aspect-ratio:9/16}
.h2x-v video{width:100%;height:100%;object-fit:cover}
.h2x-v::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(200deg,transparent 55%,rgba(0,0,0,.42) 100%);pointer-events:none;
}
.h2x-main{box-shadow:0 34px 90px -30px rgba(0,0,0,.95)}
.h2x-side{display:grid;gap:.85rem}
.h2x-side .h2x-v{aspect-ratio:9/13}

.h2x-tag{
  position:absolute;right:calc(var(--gut) * -.15);top:50%;
  transform:translateY(-50%) rotate(90deg);transform-origin:right center;
  font-size:var(--t-eyebrow);letter-spacing:.34em;text-transform:uppercase;
  color:var(--dim-2);white-space:nowrap;z-index:4;
}
.h2x-scroll{
  position:absolute;left:var(--gut);bottom:2rem;z-index:4;
  display:flex;align-items:center;gap:.8rem;
  font-size:var(--t-eyebrow);letter-spacing:.26em;text-transform:uppercase;color:var(--dim-2);
}
.h2x-scroll .ln{width:44px;height:1px;background:#2c2c36;position:relative;overflow:hidden}
.h2x-scroll .ln::after{content:"";position:absolute;inset:0;background:var(--red);
  animation:scrollLn 2.1s var(--ease-in-out) infinite}

/* ============================================================
   HERO 3 — Kinetik Izgara
   ============================================================ */

.h3x{
  position:relative;min-height:100svh;overflow:hidden;background:var(--black);
  display:flex;align-items:center;justify-content:center;padding-top:var(--head-h);
}
.h3x-grid{
  position:absolute;inset:-8% -2%;z-index:0;
  display:grid;grid-template-columns:repeat(5,1fr);gap:.6rem;
}
.h3x-col{overflow:hidden}
.h3x-track{display:flex;flex-direction:column;gap:.6rem;will-change:transform}
.h3x-col.up .h3x-track{animation:h3xUp 56s linear infinite;animation-delay:calc(var(--d) * -1)}
.h3x-col.dn .h3x-track{animation:h3xDn 56s linear infinite;animation-delay:calc(var(--d) * -1)}
@keyframes h3xUp{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes h3xDn{from{transform:translateY(-50%)}to{transform:translateY(0)}}
.h3x-cell{
  display:block;aspect-ratio:4/5;overflow:hidden;border-radius:2px;background:#0e0e12;
}
.h3x-cell img,.h3x-cell video{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(.55) contrast(1.05) brightness(.82);
}
.h3x-veil{
  position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(85% 68% at 50% 50%,rgba(0,0,0,.93) 0%,rgba(0,0,0,.84) 44%,rgba(0,0,0,.58) 100%),
    linear-gradient(180deg,rgba(0,0,0,.92) 0%,transparent 26%,transparent 70%,rgba(0,0,0,.96) 100%);
}
.h3x-in{
  position:relative;z-index:3;text-align:center;
  padding:clamp(2rem,6vh,4rem) var(--gut);max-width:960px;
}
.h3x-logo{
  width:min(268px,54vw);height:auto;margin:0 auto 2.1rem;
  filter:drop-shadow(0 12px 40px rgba(0,0,0,.9));
}
.h3x-title{
  font-size:clamp(1.95rem,4.4vw,3.5rem);font-weight:640;line-height:1.08;
  letter-spacing:-.038em;margin:0;
}
.h3x-title > span{display:block;overflow:hidden}
.h3x-title .em{color:var(--red)}
.h3x-sub{
  margin:1.5rem auto 0;max-width:46ch;color:var(--dim);
  font-size:clamp(.94rem,1.08vw,1.06rem);line-height:1.72;
}
.h3x-act{display:flex;gap:.85rem;justify-content:center;flex-wrap:wrap;margin-top:2.1rem}
.h3x-meta{
  display:flex;gap:2.2rem;justify-content:center;flex-wrap:wrap;margin-top:2.6rem;
  padding-top:1.7rem;border-top:1px solid rgba(255,255,255,.08);
  font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--dim-2);
}
.h3x-meta b{color:#fff;font-weight:650;margin-right:.35rem}
.h3x-scroll{
  position:absolute;left:50%;transform:translateX(-50%);bottom:1.8rem;z-index:4;
  display:flex;align-items:center;gap:.8rem;
  font-size:var(--t-eyebrow);letter-spacing:.26em;text-transform:uppercase;color:var(--dim-2);
}
.h3x-scroll .ln{width:44px;height:1px;background:#2c2c36;position:relative;overflow:hidden}
.h3x-scroll .ln::after{content:"";position:absolute;inset:0;background:var(--red);
  animation:scrollLn 2.1s var(--ease-in-out) infinite}

/* ============================================================
   HERO 4 — "Sahne" (referans taslak)
   ============================================================ */

.h4x{
  position:relative;min-height:100svh;overflow:hidden;background:var(--black);
  display:flex;align-items:center;padding-top:var(--head-h);
}
.h4x-bg{position:absolute;inset:0;z-index:0}
.h4x-bg img{
  width:100%;height:100%;object-fit:cover;object-position:72% center;
  animation:h4xDrift 26s var(--ease-in-out) infinite alternate;
}
@keyframes h4xDrift{
  from{transform:scale(1.04) translateX(0)}
  to{transform:scale(1.1) translateX(-1.4%)}
}
/* Soldan koyu geçiş — metin her zaman okunur kalır */
.h4x::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(90deg,rgba(0,0,0,.96) 0%,rgba(0,0,0,.88) 26%,rgba(0,0,0,.54) 50%,transparent 76%),
    linear-gradient(180deg,rgba(0,0,0,.72) 0%,transparent 20%,transparent 68%,rgba(0,0,0,.88) 100%);
}

.h4x-in{
  position:relative;z-index:3;width:100%;max-width:var(--wrap);
  margin:0 auto;padding-inline:var(--gut);
}
.h4x-copy{max-width:min(620px,52%);padding-block:clamp(1.5rem,4vh,3rem)}

.h4x-eye{
  font-size:clamp(.66rem,.82vw,.78rem);
  letter-spacing:.44em;text-transform:uppercase;
  color:#b9b9c2;font-weight:500;margin-bottom:1.15rem;
}

.h4x-title{
  font-family:var(--f-display);
  font-size:clamp(1.95rem,4.1vw,3.35rem);
  font-weight:760;line-height:1.02;letter-spacing:-.022em;
  text-transform:uppercase;margin:0;
}
.h4x-title > span{display:block;overflow:hidden}
.h4x-title .l1{display:block;color:#ece2d2}   /* krem */
.h4x-title .l2{display:block;color:#fff}

.h4x-rule{
  display:block;width:64px;height:3px;background:var(--red);
  margin:1.25rem 0 1.4rem;transform-origin:left;
}
[data-anim="fade"].h4x-rule{transform:scaleX(0);opacity:1}
[data-anim="fade"].h4x-rule.in{transform:scaleX(1);transition:transform .8s var(--ease)}

.h4x-body{display:grid;gap:.95rem;max-width:44ch}
.h4x-body p{
  color:#cfcfd6;font-size:clamp(.9rem,1.02vw,1rem);line-height:1.75;
}

/* El yazısı imza */
.h4x-sign{
  margin-top:1.9rem;position:relative;display:inline-block;
  font-family:'Segoe Script','Bradley Hand','Brush Script MT',cursive;
  font-size:clamp(1.25rem,2.1vw,1.72rem);
  line-height:1.24;color:#fff;font-weight:400;
  transform:rotate(-3.2deg);transform-origin:left center;
}
.h4x-sign span{display:block}
.h4x-sign span:nth-child(2){padding-left:1.6em}
.h4x-sign::after{
  content:"";position:absolute;left:1.4em;bottom:-.24em;
  width:52%;height:2px;background:var(--red);border-radius:2px;
  transform:scaleX(0);transform-origin:left;
}
[data-anim="fade"].h4x-sign.in::after{transform:scaleX(1);transition:transform .9s var(--ease) .35s}

.h4x-act{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:2.1rem}

/* Sağ üst dikey anahtar kelimeler */
.h4x-keys{
  position:absolute;right:var(--gut);top:calc(var(--head-h) + clamp(1rem,4vh,2.6rem));
  z-index:4;list-style:none;margin:0;padding:0;text-align:right;
}
.h4x-keys li{
  font-size:clamp(.6rem,.72vw,.7rem);letter-spacing:.32em;text-transform:uppercase;
  color:#c9c9d2;font-weight:550;line-height:2.05;
}

/* Sağ alt motto */
.h4x-motto{
  position:absolute;right:var(--gut);bottom:clamp(1.6rem,5vh,3.2rem);
  z-index:4;text-align:right;margin:0;
}
.h4x-motto span{
  display:block;font-size:clamp(.6rem,.72vw,.7rem);
  letter-spacing:.3em;text-transform:uppercase;color:#a9a9b4;line-height:1.95;
}
.h4x-motto::after{
  content:"";display:block;width:34px;height:1px;background:var(--red);
  margin-left:auto;margin-top:.75rem;
}

/* ---- Hero altı hizmet şeridi ---- */
.h4x-strip{
  display:grid;grid-template-columns:repeat(6,1fr);
  background:var(--line-soft);gap:1px;
  border-bottom:1px solid var(--line-soft);
}
.h4x-tile{
  display:flex;flex-direction:column;background:var(--ink);
  position:relative;overflow:hidden;
}
.h4x-tile-vis{
  display:block;position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--ink-3);
}
.h4x-tile-vis img{
  width:100%;height:100%;object-fit:cover;object-position:center 26%;
  filter:brightness(.88);
  transition:transform 1.1s var(--ease),filter .6s var(--ease);
}
.h4x-tile:hover .h4x-tile-vis img{transform:scale(1.06);filter:brightness(1)}
/* Görsel gelmeden önceki geçici görünüm */
.h4x-tile-ph{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--f-display);font-size:2rem;font-weight:650;
  color:#232329;letter-spacing:-.04em;
  background:linear-gradient(145deg,#121216 0%,#0c0c10 100%);
}
.h4x-tile-b{
  display:block;padding:.95rem 1rem 1.15rem;border-top:2px solid transparent;
  transition:border-color .45s var(--ease);
}
.h4x-tile:hover .h4x-tile-b{border-top-color:var(--red)}
.h4x-tile-b b{
  display:block;font-size:.775rem;font-weight:650;letter-spacing:.06em;
  text-transform:uppercase;line-height:1.35;color:#f0f0f4;
  /* İki satıra taşan başlıklarda açıklamalar aynı hizada kalsın */
  min-height:2.7em;
}
.h4x-tile-b em{
  display:block;font-style:normal;margin-top:.4rem;
  font-size:.72rem;color:var(--dim-2);line-height:1.45;
}

@media (max-width:1100px){
  .h4x-strip{grid-template-columns:repeat(3,1fr)}
  .h4x-keys{display:none}
}
@media (max-width:980px){
  .h4x{min-height:auto;padding-top:calc(var(--head-h) + 1rem);padding-bottom:2.6rem}
  .h4x-copy{max-width:none}
  .h4x-bg img{object-position:66% center}
  .h4x::before{
    background:
      linear-gradient(180deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.74) 42%,rgba(0,0,0,.94) 100%);
  }
  .h4x-motto{display:none}
}
@media (max-width:680px){
  .h4x-strip{grid-template-columns:repeat(2,1fr)}
  .h4x-title{font-size:clamp(1.7rem,7.6vw,2.4rem)}
  .h4x-sign{font-size:1.3rem}
}

/* ============================================================
   Duyarlı
   ============================================================ */

@media (max-width:980px){
  /* HERO 2 — mobilde dikey akış */
  .h2x{min-height:auto;padding-top:calc(var(--head-h) + 1.5rem);padding-bottom:3rem}
  .h2x-in{grid-template-columns:1fr;gap:2.2rem}
  .h2x-copy{padding-block:0;order:1}
  .h2x-stage{order:2;grid-template-columns:1.5fr .8fr;gap:.6rem}
  .h2x-side .h2x-v:nth-child(2){display:none}
  .h2x-tag,.h2x-scroll{display:none}
  .h2x-title{font-size:clamp(2.1rem,8.5vw,3rem)}

  .h1x-strip{padding:.7rem 0}
  .h1x-scroll{display:none}
  .h3x-grid{grid-template-columns:repeat(3,1fr)}
}

@media (max-width:680px){
  .h2x-stage{grid-template-columns:1fr}
  .h2x-side{display:none}
  .h2x-main{aspect-ratio:4/5}
  .h1x-title{font-size:clamp(2.3rem,10vw,3.2rem)}
  .h1x-rot{display:none}
  .h3x-grid{grid-template-columns:repeat(2,1fr)}
  .h3x-meta{gap:1.1rem;font-size:10.5px}
}

@media (prefers-reduced-motion:reduce){
  .h1x-strip-in,.h3x-col .h3x-track,.rot-box b{animation:none}
  .rot-box b:first-child{opacity:1;transform:none}
}