/* ==========================================================================
   Dizayn Makina — REFERANSLAR page (Sinematik theme)
   Loaded after sinematik.css on referanslar.html only. Every rule is scoped to
   body.theme-sinematik[data-page="referanslar"] so nothing leaks to other pages.
   Uses the shared tokens / components (page-hero, .eyebrow + .sn-eyebrow__idx,
   .sn-stat, .sn-certs, .sn-link, .cta-band, reveal classes); adds only:
     .rf-head      split section head (title left, lead right — as on the home page)
     .rf-wall      logo wall on white tiles, unnumbered (same optical treatment as the home marquee)
     .rf-figures   trust figures grid (home .sn-stat cells + a certificates cell)
     .rf-index     sectors as a numbered, type-led index (restyles main.js "refSector")
   ========================================================================== */

/* ---------- Hero: real finished part, kept high in the frame (type sits over the table) ----------
   The photo is pre-graded (part lifted, table burned down), so the shared desaturation and navy
   tint are eased here: the gold part reads as lit metal instead of grey-green murk. */
body.theme-sinematik[data-page="referanslar"] .page-hero__media img{object-position:54% 8%;filter:saturate(.96) contrast(1.05);}
body.theme-sinematik[data-page="referanslar"] .page-hero__shade{
  background:
    linear-gradient(0deg,rgba(5,9,15,.96) 0%,rgba(5,9,15,.86) 26%,rgba(5,9,15,.54) 52%,rgba(5,9,15,.3) 76%,rgba(5,9,15,.62) 100%),
    linear-gradient(90deg,rgba(5,9,15,.74) 0%,rgba(5,9,15,.32) 58%,rgba(5,9,15,.12) 100%);
}

/* ---------- Split section head ---------- */
body.theme-sinematik[data-page="referanslar"] .rf-head{
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);align-items:end;
  gap:24px clamp(32px,6vw,104px);margin:0 0 clamp(44px,5vw,80px);
}
body.theme-sinematik[data-page="referanslar"] .rf-head h2{margin:0;max-width:14em;}
body.theme-sinematik[data-page="referanslar"] .rf-head__lead{
  margin:0;max-width:34rem;font-size:clamp(1.02rem,.96rem + .22vw,1.14rem);line-height:1.66;color:var(--tx-md);
}

/* ==========================================================================
   01 · LOGO WALL — white tiles on a hairline grid (unnumbered: the wall is not a ranking)
   ========================================================================== */
body.theme-sinematik[data-page="referanslar"] .rf-partners{background:var(--sn-paper);}
body.theme-sinematik[data-page="referanslar"] .rf-wall{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;
  margin:0;padding:0;list-style:none;
  background:var(--sn-line-l);box-shadow:0 0 0 1px var(--sn-line-l);
}
body.theme-sinematik[data-page="referanslar"] .rf-wall__cell{
  position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:4/3;min-width:0;padding:clamp(24px,2.6vw,42px) clamp(16px,1.8vw,30px);
  background:#fff;list-style:none;
}
/* hover: the green rule of the design system runs along the tile top */
body.theme-sinematik[data-page="referanslar"] .rf-wall__cell::after{
  content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:var(--sn-green);
  transform:scaleX(0);transform-origin:left;transition:transform .6s var(--sn-ease);
}
body.theme-sinematik[data-page="referanslar"] .rf-wall__cell img{
  display:block;width:100%;height:100%;max-width:228px;max-height:108px;object-fit:contain;
  mix-blend-mode:multiply;transform:scale(var(--s,1));
  filter:grayscale(1) brightness(.94) contrast(1.3);transition:filter .4s;
}
/* reveal: the white tiles and the hairline grid stay put; only the logos rise in, one after another */
html.sinematik-js body.theme-sinematik[data-page="referanslar"] .rf-wall.sn-stagger>*{opacity:1;transform:none;}
html.sinematik-js body.theme-sinematik[data-page="referanslar"] .rf-wall.sn-stagger>* img{opacity:0;translate:0 24px;}
html.sinematik-js body.theme-sinematik[data-page="referanslar"] .rf-wall.sn-stagger.is-in>* img{
  opacity:1;translate:none;
  transition:opacity .9s var(--sn-ease) var(--rd,0s),translate 1.1s var(--sn-ease) var(--rd,0s),filter .4s;
}
body.theme-sinematik[data-page="referanslar"] .rf-wall__cell:nth-child(2){--rd:.06s;}
body.theme-sinematik[data-page="referanslar"] .rf-wall__cell:nth-child(3){--rd:.12s;}
body.theme-sinematik[data-page="referanslar"] .rf-wall__cell:nth-child(4){--rd:.18s;}
body.theme-sinematik[data-page="referanslar"] .rf-wall__cell:nth-child(5){--rd:.24s;}
body.theme-sinematik[data-page="referanslar"] .rf-wall__cell:nth-child(6){--rd:.30s;}
body.theme-sinematik[data-page="referanslar"] .rf-wall__cell:nth-child(7){--rd:.36s;}
body.theme-sinematik[data-page="referanslar"] .rf-wall__cell:nth-child(8){--rd:.42s;}
body.theme-sinematik[data-page="referanslar"] .rf-wall__cell:nth-child(9){--rd:.48s;}
body.theme-sinematik[data-page="referanslar"] .rf-wall__cell:nth-child(10){--rd:.54s;}
body.theme-sinematik[data-page="referanslar"] .rf-wall__cell[data-tone="dense"] img{filter:grayscale(1) contrast(.9) brightness(1.14);}
body.theme-sinematik[data-page="referanslar"] .rf-wall__cell[data-tone="pale"] img{filter:grayscale(1) brightness(.8) contrast(1.75);}
@media (hover:hover) and (pointer:fine){
  body.theme-sinematik[data-page="referanslar"] .rf-wall__cell:hover img{filter:none;}
  body.theme-sinematik[data-page="referanslar"] .rf-wall__cell:hover::after{transform:scaleX(1);}
}

/* ==========================================================================
   02 · TRUST — figures (home .sn-stat cells) + certificates cell
   ========================================================================== */
body.theme-sinematik[data-page="referanslar"] .rf-figures{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.3fr);
  border-top:1px solid var(--sn-line-d);
}
/* label <h3> / value <p>: sinematik.css .sn-stat rules already out-rank `.bg-navy h3` / `.bg-navy p` */
body.theme-sinematik[data-page="referanslar"] .rf-certstat__body{display:grid;justify-items:start;gap:20px;}
body.theme-sinematik[data-page="referanslar"] .rf-certstat .sn-certs{display:grid;gap:10px;width:100%;}
body.theme-sinematik[data-page="referanslar"] .rf-certstat .sn-certs .strip-item{width:100%;justify-content:flex-start;}

/* ==========================================================================
   03 · SECTORS — numbered, type-led index (main.js "refSector" markup:
   .sector-card > .icon + h3 + p)
   ========================================================================== */
body.theme-sinematik[data-page="referanslar"] .rf-sectors{background:var(--sn-paper);}
body.theme-sinematik[data-page="referanslar"] .rf-index{counter-reset:rfsec;border-top:1px solid var(--sn-line-l);}
body.theme-sinematik[data-page="referanslar"] .rf-index .sector-card{
  --rf-t:clamp(2.1rem,.9rem + 2.9vw,4rem);   /* title size; the number and text align to its cap line */
  counter-increment:rfsec;position:relative;
  display:grid;grid-template-columns:clamp(56px,6vw,104px) minmax(0,1.15fr) minmax(0,.85fr);
  column-gap:clamp(24px,4vw,72px);row-gap:0;align-items:start;
  padding:clamp(28px,3vw,44px) 0 clamp(30px,3.2vw,46px);
  background:none;border:0;border-bottom:1px solid var(--sn-line-l);border-radius:0;
  color:var(--sn-i-hi);
}
body.theme-sinematik[data-page="referanslar"] .rf-index .sector-card::before{
  content:counter(rfsec,decimal-leading-zero);
  position:static;width:auto;height:auto;background:none;transition:none;
  font-family:var(--sn-f-mono);font-size:12px;font-weight:500;letter-spacing:.16em;line-height:1;color:var(--sn-green-dk);
  margin-top:calc(var(--rf-t) * .175 - 2px);
}
body.theme-sinematik[data-page="referanslar"] .rf-index .sector-card::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--sn-green);
  transform:scaleX(0);transform-origin:left;transition:transform .7s var(--sn-ease);
}
body.theme-sinematik[data-page="referanslar"] .rf-index .sector-card .icon{display:none;}
/* number | title | description */
body.theme-sinematik[data-page="referanslar"] .rf-index .sector-card::before{grid-column:1;grid-row:1;}
body.theme-sinematik[data-page="referanslar"] .rf-index .sector-card h3{grid-column:2;grid-row:1;}
body.theme-sinematik[data-page="referanslar"] .rf-index .sector-card p{grid-column:3;grid-row:1;}
body.theme-sinematik[data-page="referanslar"] .rf-index .sector-card h3{
  margin:0;font-weight:600;text-transform:uppercase;color:var(--sn-i-hi);
  font-size:var(--rf-t);line-height:.95;letter-spacing:-.005em;
  hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word;
}
body.theme-sinematik[data-page="referanslar"] .rf-index .sector-card p{
  margin:0;max-width:30em;font-size:clamp(1rem,.96rem + .16vw,1.08rem);line-height:1.6;color:var(--sn-i-md);
}
/* rows are not links: only a quiet green reading rule on hover, no movement */
@media (hover:hover) and (pointer:fine){
  body.theme-sinematik[data-page="referanslar"] .rf-index .sector-card:hover::after{transform:scaleX(1);}
}

/* ---------- CTA band: secondary action on the dark photo ---------- */
body.theme-sinematik[data-page="referanslar"] .rf-cta .cta-band .actions{flex-wrap:nowrap;}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1100px){
  /* sector rows: number | (title over description) */
  body.theme-sinematik[data-page="referanslar"] .rf-index .sector-card{grid-template-columns:clamp(48px,7vw,80px) minmax(0,1fr);}
  body.theme-sinematik[data-page="referanslar"] .rf-index .sector-card p{grid-column:2;grid-row:2;margin-top:14px;max-width:36em;}
}

@media (max-width:980px){
  body.theme-sinematik[data-page="referanslar"] .rf-head{grid-template-columns:minmax(0,1fr);}
  body.theme-sinematik[data-page="referanslar"] .rf-head h2{max-width:none;}
  body.theme-sinematik[data-page="referanslar"] .rf-head__lead{max-width:40rem;}
  body.theme-sinematik[data-page="referanslar"] .rf-cta .cta-band .actions{flex-wrap:wrap;}
}

/* tablets: the two figures side by side, certificates full width underneath */
@media (min-width:601px) and (max-width:900px){
  body.theme-sinematik[data-page="referanslar"] .rf-figures{grid-template-columns:repeat(2,minmax(0,1fr));border-top:0;}
  body.theme-sinematik[data-page="referanslar"] .rf-figures .sn-stat:nth-child(2){border-left:1px solid var(--sn-line-d);padding-left:clamp(20px,3vw,40px);}
  body.theme-sinematik[data-page="referanslar"] .rf-figures .rf-certstat{grid-column:1 / -1;}
  body.theme-sinematik[data-page="referanslar"] .rf-certstat .sn-certs{grid-template-columns:repeat(2,minmax(0,1fr));}
}
/* tablets: 3 · 4 · 3 brick bond on a 12-track grid instead of five cramped squares
   (fewer, larger tiles; every row shares one height so the hairline grid stays even) */
@media (min-width:601px) and (max-width:980px){
  body.theme-sinematik[data-page="referanslar"] .rf-wall{grid-template-columns:repeat(12,minmax(0,1fr));}
  body.theme-sinematik[data-page="referanslar"] .rf-wall__cell{
    grid-column:span 4;aspect-ratio:auto;height:clamp(132px,19vw,176px);padding:20px clamp(18px,3vw,30px);
  }
  body.theme-sinematik[data-page="referanslar"] .rf-wall__cell:nth-child(n+4):nth-child(-n+7){grid-column:span 3;}
  body.theme-sinematik[data-page="referanslar"] .rf-wall__cell img{max-width:min(100%,200px);max-height:92px;}
}

@media (max-width:600px){
  /* hero: the phone crop keeps the part in the upper half; same eased shade with phone stops */
  body.theme-sinematik[data-page="referanslar"] .page-hero__media img{object-position:50% 18%;}
  body.theme-sinematik[data-page="referanslar"] .page-hero__shade{background:
    linear-gradient(0deg,rgba(5,9,15,.97) 0%,rgba(5,9,15,.9) 34%,rgba(5,9,15,.68) 60%,rgba(5,9,15,.38) 84%,rgba(5,9,15,.62) 100%);}

  body.theme-sinematik[data-page="referanslar"] .rf-head{margin-bottom:36px;gap:18px;}
  body.theme-sinematik[data-page="referanslar"] .rf-head__lead{font-size:1rem;}

  /* logo wall: 2 × 5 tiles */
  body.theme-sinematik[data-page="referanslar"] .rf-wall{grid-template-columns:repeat(2,minmax(0,1fr));}
  body.theme-sinematik[data-page="referanslar"] .rf-wall__cell{aspect-ratio:4/3;padding:22px 18px;}
  body.theme-sinematik[data-page="referanslar"] .rf-wall__cell img{max-width:142px;max-height:70px;}

  /* figures: stacked like the home stats; certificate chips full width */
  body.theme-sinematik[data-page="referanslar"] .rf-figures{grid-template-columns:minmax(0,1fr);border-top:0;}
  body.theme-sinematik[data-page="referanslar"] .rf-certstat{padding-bottom:0;}
  body.theme-sinematik[data-page="referanslar"] .rf-certstat__body{gap:14px;}
  body.theme-sinematik[data-page="referanslar"] .rf-certstat .sn-link{margin-top:4px;}

  /* sector index: number → title → description, full width */
  body.theme-sinematik[data-page="referanslar"] .rf-index .sector-card{
    --rf-t:clamp(1.9rem,9vw,2.6rem);
    grid-template-columns:minmax(0,1fr);padding:24px 0 26px;
  }
  body.theme-sinematik[data-page="referanslar"] .rf-index .sector-card::before{grid-column:1;grid-row:1;margin:0 0 14px;font-size:11px;}
  body.theme-sinematik[data-page="referanslar"] .rf-index .sector-card h3{grid-column:1;grid-row:2;}
  body.theme-sinematik[data-page="referanslar"] .rf-index .sector-card h3{line-height:.96;}
  body.theme-sinematik[data-page="referanslar"] .rf-index .sector-card p{grid-column:1;grid-row:3;margin-top:12px;font-size:.98rem;}
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  body.theme-sinematik[data-page="referanslar"] .rf-wall__cell::after,
  body.theme-sinematik[data-page="referanslar"] .rf-wall__cell img,
  body.theme-sinematik[data-page="referanslar"] .rf-index .sector-card::after{transition:none!important;}
  html.sinematik-js body.theme-sinematik[data-page="referanslar"] .rf-wall.sn-stagger>* img{opacity:1!important;translate:none!important;transition:none!important;}
}