/* ============================================================
   RHINO RUNNER — HR SUNUMU / WEB
   ============================================================ */

:root{
  --yellow:      #FDE300;
  --yellow-deep: #E0C900;
  --ink:         #1c1c1c;
  --ink-2:       #262626;
  --ink-3:       #2f2f2f;
  --line:        rgba(255,255,255,.10);
  --line-2:      rgba(255,255,255,.18);
  --txt:         #f3f3f3;
  --txt-mute:    #a8a8a8;
  --txt-dim:     #7c7c7c;
  --green:       #3fb950;
  --red:         #e5484d;
  --maxw:        1320px;
  --ease:        cubic-bezier(.22,.61,.36,1);

  /* --- sabit 1920x1080 slayt geometrisi ---
     Sahne sabit, viewport değişken. Bu yüzden CSS'te vw/vh KULLANMA:
     bütün ölçüler px. Kenar boşlukları tek yerden buradan yönetilir. */
  --slide-w:  1920px;
  --slide-h:  1080px;
  --pad:      88px;   /* sol/sağ güvenli kenar */
  --pad-top:  72px;   /* üst güvenli kenar */
  --pad-bot:  96px;   /* alt güvenli kenar — alt barı temizler */
  --rail-w:   56px;   /* sağdaki nokta rayına ayrılan pay */
}

*{box-sizing:border-box; margin:0; padding:0}
/* ÖNEMLİ: `display` tanımlayan bir sınıf, tarayıcının [hidden]{display:none}
   kuralını ezer. Bu satır olmazsa hidden'lı katmanlar ekranda kalır. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  background:#0b0b0b;
  color:var(--txt);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:17.7px; line-height:1.6;
  width:100%; height:100%; overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ==================== 1920x1080 SAHNE ====================
   Her şey burada birebir 1920x1080 kurgulanır ve ekrana
   transform:scale(--s) ile sığdırılır (app.js → fitStage).
   Sonuç: hangi ekranda açılırsa açılsın birebir aynı görüntü. */
#stage{
  position:fixed; left:50%; top:50%;
  width:var(--slide-w); height:var(--slide-h);
  transform:translate(-50%,-50%) scale(var(--s,1));
  transform-origin:center center;
  background:var(--ink); overflow:hidden;
  box-shadow:0 0 90px rgba(0,0,0,.6);
}
#stage::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 80% at 12% 0%, rgba(255,255,255,.045) 0%, transparent 55%),
    radial-gradient(90% 70% at 100% 100%, rgba(253,227,0,.05) 0%, transparent 60%);
}
#page{position:absolute; inset:0; width:var(--slide-w); height:var(--slide-h); overflow:hidden}
#track{
  display:flex; flex-direction:column;
  will-change:transform; transform:translate3d(0,0,0);
  transition:transform .58s cubic-bezier(.66,0,.24,1);
}
#track.no-anim{transition:none}
img{max-width:100%; display:block}
mark{background:var(--yellow); color:#111; padding:.05em .25em; border-radius:2px}
b,strong{font-weight:700; color:#fff}
kbd{
  font:600 14.8px/1 'Inter',sans-serif; background:rgba(255,255,255,.12);
  border:1px solid var(--line-2); border-radius:4px; padding:3px 5px; color:#ddd;
}

/* ---------- NOKTA NAV ---------- */
#dots{
  position:absolute; right:20px; top:50%; transform:translateY(-50%); z-index:60;
  display:flex; flex-direction:column; align-items:center; gap:7px;
}
#dots button{
  width:8px; height:8px; border-radius:50%; border:none; cursor:pointer; padding:0;
  background:rgba(255,255,255,.22); transition:all .28s var(--ease); position:relative;
}
#dots button:hover{background:rgba(255,255,255,.55); transform:scale(1.3)}
#dots button.on{background:var(--yellow); height:22px; border-radius:5px}
/* bölünmüş slaytlar (aynı bölümün 2/3. sayfası) daha küçük nokta alır */
#dots button.sub{width:5px; height:5px; background:rgba(255,255,255,.16)}
#dots button.sub.on{width:8px; height:16px; background:var(--yellow)}
#dots button span{
  position:absolute; right:16px; top:50%; transform:translateY(-50%) translateX(6px);
  white-space:nowrap; font:600 14.2px/1 'Inter'; letter-spacing:.09em; text-transform:uppercase;
  background:rgba(20,20,20,.94); border:1px solid var(--line-2); color:var(--txt);
  padding:6px 9px; border-radius:5px; opacity:0; pointer-events:none; transition:all .22s var(--ease);
}
#dots button:hover span{opacity:1; transform:translateY(-50%) translateX(0)}

/* ---------- SLAYT İSKELETİ ----------
   Her bölüm birebir bir slayt: 1920x1080, taşan içerik gizlenir.
   Taşma olup olmadığını göz kararıyla değil `npm run check` ölçer. */
.sec{
  position:relative; z-index:1; flex:0 0 auto;
  width:var(--slide-w); height:var(--slide-h); overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
  padding:var(--pad-top) calc(var(--pad) + var(--rail-w)) var(--pad-bot) var(--pad);
}
.sec-in{width:100%; max-width:1560px; margin:0 auto; min-height:0;
  /* --fit: app.js -> fitSlides() ölçüp yazar. Seyrek slaytlar kadraja oturur.
     Ölçüm ölçekten önce yapılır, o yüzden burada sabit bir değer YAZMA. */
  transform:scale(var(--fit,1)); transform-origin:center center}
.sec.alt{background:linear-gradient(180deg, var(--ink-2) 0%, var(--ink) 100%)}
.sec.light{background:#eeeeee; color:#1b1b1b}
.sec.light .sec-title, .sec.light .sec-kicker{color:#1b1b1b}
.sec.light b{color:#000}

.sec-kicker{
  font:600 14.8px/1 'Inter'; letter-spacing:.24em; text-transform:uppercase;
  color:var(--yellow); margin-bottom:14px;
}
.sec-title{
  font:700 60px/1.02 'Barlow Condensed',sans-serif;
  letter-spacing:.005em; text-transform:uppercase; color:#fff; margin-bottom:20px;
}
.sec-title b{color:var(--yellow); font-weight:700}
.sec-lead{
  font-size:18.8px; line-height:1.62; color:#d8d8d8;
  max-width:76ch; margin-bottom:34px;
}

/* ---------- ANİMASYON (PPT giriş efektleri) ----------
   ÖNEMLİ: Tüm gizleme kuralları `html.anim` altında.
   Bu sınıfı app.js ekler. JS çalışmazsa hiçbir şey gizlenmez —
   sayfa asla boş/siyah kalmaz.                                   */
html.anim [data-anim]{opacity:0; will-change:transform,opacity,clip-path}
html.anim [data-anim].in{opacity:1}

/* fade */
html.anim [data-anim="fade"]{transition:opacity .7s var(--ease)}
/* zoom (PPT: Zoom) */
html.anim [data-anim="zoom"]{transform:scale(.88); transition:opacity .62s var(--ease), transform .62s var(--ease)}
html.anim [data-anim="zoom"].in{transform:scale(1)}
/* wipe-up (PPT: Wipe from bottom) */
html.anim [data-anim="wipe-up"]{clip-path:inset(100% 0 0 0); transform:translateY(18px);
  transition:opacity .55s var(--ease), transform .65s var(--ease), clip-path .7s var(--ease)}
html.anim [data-anim="wipe-up"].in{clip-path:inset(0 0 0 0); transform:none}
/* wipe-left (PPT: Wipe from left) */
html.anim [data-anim="wipe-left"]{clip-path:inset(0 100% 0 0); transform:translateX(-14px);
  transition:opacity .5s var(--ease), transform .65s var(--ease), clip-path .7s var(--ease)}
html.anim [data-anim="wipe-left"].in{clip-path:inset(0 0 0 0); transform:none}
/* wipe-right */
html.anim [data-anim="wipe-right"]{clip-path:inset(0 0 0 100%); transform:translateX(14px);
  transition:opacity .5s var(--ease), transform .65s var(--ease), clip-path .7s var(--ease)}
html.anim [data-anim="wipe-right"].in{clip-path:inset(0 0 0 0); transform:none}
/* rise */
html.anim [data-anim="rise"]{transform:translateY(26px); transition:opacity .6s var(--ease), transform .7s var(--ease)}
html.anim [data-anim="rise"].in{transform:none}
/* split (PPT: Split geçişi) */
html.anim [data-anim="split"]{clip-path:inset(0 50% 0 50%); transition:opacity .5s var(--ease), clip-path .8s var(--ease)}
html.anim [data-anim="split"].in{clip-path:inset(0 0 0 0)}

@media (prefers-reduced-motion:reduce){
  html.anim [data-anim]{opacity:1 !important; transform:none !important; clip-path:none !important; transition:none !important}
  /* Zaman çizelgesi ve teşhis şeması [data-anim] değil, kendi sınıflarıyla açılıyor.
     Bunlar kapsam dışı kalınca "hareketi azalt" açık kullanıcıda çizelge boş
     görünüyordu — son hâllerine sabitle. */
  .tl-fill{width:100% !important}
  .tl-arrow{transform:translateY(-50%) scale(1) !important}
  .tl-dot{opacity:1 !important; transform:scale(1) !important}
  .tl-cap{opacity:1 !important}
  .tl-fill,.tl-arrow,.tl-dot,.tl-cap{transition:none !important}
  .proc-num{opacity:1 !important; transform:scale(1) !important}
  .proc-ring{opacity:.85 !important; transform:rotate(-90deg) !important}
  .proc-num,.proc-ring{transition:none !important}
}

/* ============================================================
   1 · HERO
   ============================================================ */
#hero{justify-content:center; text-align:center; overflow:hidden}
.hero-glow{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(46% 52% at 30% 45%, rgba(253,227,0,.16) 0%, transparent 68%);
}
/* Rhino silueti: metnin okunurluğunu bozmaması için filigran gibi */
.hero-rhino{
  position:absolute; left:-10%; top:50%; transform:translateY(-50%);
  width:min(998.4px,660px); opacity:.14; pointer-events:none;
  animation:heroFloat 9s ease-in-out infinite;
}
@keyframes heroFloat{0%,100%{transform:translateY(-50%)}50%{transform:translateY(calc(-50% - 16px))}}
.hero-body{position:relative; max-width:var(--maxw); margin:0 auto; width:100%}
.hero-kicker{
  font:600 14.8px/1 'Inter'; letter-spacing:.34em; text-transform:uppercase;
  color:var(--yellow); margin-bottom:20px;
}
.hero-title{
  font:700 96px/.98 'Barlow Condensed',sans-serif;
  text-transform:uppercase; color:#fff; letter-spacing:.005em;
}
.hero-rule{width:76px; height:4px; background:var(--yellow); margin:26px auto 22px}
.hero-site{font:600 15.9px/1 'Inter'; letter-spacing:.2em; color:var(--yellow); text-transform:lowercase}
.scroll-hint{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  font:500 14.5px/1 'Inter'; letter-spacing:.2em; text-transform:uppercase; color:var(--txt-dim);
  display:flex; flex-direction:column; align-items:center; gap:9px;
}
.scroll-hint i{display:block; width:1px; height:26px; background:linear-gradient(180deg,var(--yellow),transparent); animation:scrollPulse 1.9s ease-in-out infinite}
@keyframes scrollPulse{0%,100%{opacity:.25; transform:scaleY(.5)}50%{opacity:1; transform:scaleY(1)}}

/* ============================================================
   2 · BİZ KİMİZ
   ============================================================ */
/* ---------- HİZMETLERİMİZ ----------
   Koyu kart, sarı aksan: sayfanın geri kalanıyla aynı dil.
   Sarı yalnızca ikonda ve üstteki ince çizgide.                */
.svc{margin:104px 0 46px}
.svc-title{
  font:700 36px/1 'Barlow Condensed',sans-serif;
  letter-spacing:.06em; text-transform:uppercase; color:#fff;
  text-align:center; margin-bottom:10px;
}
/* başlığın altına ince sarı çizgi */
.svc-title::after{
  content:''; display:block; width:52px; height:3px; background:var(--yellow);
  margin:14px auto 0; border-radius:2px;
}
.svc-grid{display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:30px}
.svc-card{
  position:relative; overflow:hidden;
  width:calc((100% - 3*14px)/4); min-width:172px;
  display:flex; flex-direction:column; align-items:flex-start; gap:16px;
  padding:24px 20px 22px; border-radius:10px;
  background:linear-gradient(168deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
  border:1px solid var(--line);
  transition:border-color .3s var(--ease), background .3s var(--ease),
             transform .3s var(--ease), box-shadow .3s var(--ease);
}
/* üstte ince sarı çizgi — hover'da tam genişler */
.svc-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--yellow);
  transform:scaleX(.22); transform-origin:left; opacity:.8;
  transition:transform .45s var(--ease), opacity .3s;
}
.svc-card:hover{
  border-color:var(--line-2); background:linear-gradient(168deg, rgba(253,227,0,.09), rgba(255,255,255,.03));
  transform:translateY(-5px); box-shadow:0 16px 36px rgba(0,0,0,.45);
}
.svc-card:hover::before{transform:scaleX(1); opacity:1}
.svc-ico{display:block; width:38px; color:var(--yellow)}
.svc-ico svg{width:100%; height:auto; display:block}
.svc-lbl{
  font:600 17.4px/1.42 'Inter',sans-serif;
  color:#f0f0f0; letter-spacing:.005em;
}



.tl{position:relative; margin:0 0 8px; padding:0 40px}
.tl-line{position:relative; height:4px; background:rgba(255,255,255,.14); border-radius:3px; margin:52px 0}
.tl-fill{position:absolute; inset:0 auto 0 0; width:0; background:var(--yellow); border-radius:3px; transition:width 1.5s var(--ease)}
.tl.in .tl-fill{width:100%}
.tl-arrow{
  position:absolute; right:-6px; top:50%; transform:translateY(-50%) scale(0);
  width:0; height:0; border-left:15px solid var(--yellow);
  border-top:9px solid transparent; border-bottom:9px solid transparent;
  transition:transform .4s var(--ease) 1.2s;
}
.tl.in .tl-arrow{transform:translateY(-50%) scale(1)}
.tl-pin{position:absolute; top:50%; transform:translate(-50%,-50%); z-index:2}
.tl-pin.s{left:2%} .tl-pin.e{left:98%}
.tl-dot{
  width:17px; height:17px; border-radius:50%; background:var(--yellow);
  border:4px solid var(--ink); box-shadow:0 0 0 2px var(--yellow);
  opacity:0; transform:scale(0); transition:all .45s var(--ease);
}
.tl.in .tl-pin.s .tl-dot{opacity:1; transform:scale(1); transition-delay:.15s}
.tl.in .tl-pin.e .tl-dot{opacity:1; transform:scale(1); transition-delay:1.25s}
.tl-cap{position:absolute; top:26px; left:50%; transform:translateX(-50%); text-align:center; white-space:nowrap;
  opacity:0; transition:opacity .5s var(--ease)}
.tl.in .tl-pin.s .tl-cap{opacity:1; transition-delay:.35s}
.tl.in .tl-pin.e .tl-cap{opacity:1; transition-delay:1.4s}
.tl-cap b{display:block; font:700 34px/1 'Barlow Condensed',sans-serif; color:var(--yellow); background:rgba(253,227,0,.12); padding:4px 12px; border-radius:5px; margin-bottom:10px}
.tl-cap span{display:block; font:700 18.3px/1.55 'Inter',sans-serif; color:#fff; letter-spacing:.02em}
/* uc yazilari ust uste binmesin, kenardan tasmasin */
.tl-pin.s .tl-cap{left:0; transform:none; text-align:left}
.tl-pin.e .tl-cap{left:auto; right:0; transform:none; text-align:right}

/* RHINO RUNNER kutusu: 2 ÇALIŞAN yazısıyla arasında boşluk,
   2011–BUGÜN kutularıyla aynı hizada, altında da HİZMETLERİMİZ'e nefes payı */
.reveal-card{
  margin:140px 40px 0;
  background:linear-gradient(135deg, rgba(253,227,0,.09), rgba(255,255,255,.03));
  border:1px solid var(--line-2); border-left:3px solid var(--yellow);
  border-radius:8px; padding:36px; max-width:none;
}
.reveal-card h3{font:700 29px/1 'Barlow Condensed'; letter-spacing:.06em; color:var(--yellow); margin-bottom:12px}
.reveal-card p{font-size:17.1px; color:#ddd; line-height:1.65}

/* ============================================================
   3 · EKİP ŞEMASI
   ============================================================ */
/* MARKA → yönlendirme → ekipler akışı */
.flow{
  display:grid; grid-template-columns:minmax(140px,.85fr) minmax(210px,1.05fr) auto 2.5fr;
  gap:14px; align-items:center; margin-top:8px;
}
.flow-arrow{display:flex; align-items:center; justify-content:center; color:var(--yellow); opacity:.9}
.flow-arrow svg{width:38px; height:24px}
/* MARKA'dan her role ayrı ok — kutunun tam ortasına hizalı,
   göz yormayan yumuşak bir döngüyle ilerliyor */
.flow-route-row{display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:center}
.flow-arrow.live svg{animation:arrowLoop 2.6s ease-in-out infinite}
.flow-routes .flow-route-row:nth-child(2) .flow-arrow.live svg{animation-delay:.5s}
@keyframes arrowLoop{
  0%,100%{transform:translateX(-4px); opacity:.55}
  50%    {transform:translateX(4px);  opacity:1}
}
@media (prefers-reduced-motion:reduce){.flow-arrow.live svg{animation:none}}

.flow-brand{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px;
  text-align:center; padding:26px 16px; border-radius:10px;
  background:linear-gradient(150deg, rgba(253,227,0,.2), rgba(253,227,0,.06));
  border:2px solid var(--yellow); min-height:150px;
}
.flow-brand b{font:700 28px/1 'Barlow Condensed',sans-serif; letter-spacing:.09em; color:var(--yellow)}
.flow-brand span{font:500 15.1px/1.4 'Inter',sans-serif; color:var(--txt-mute)}

.flow-routes{display:grid; gap:12px}
.flow-route{
  border:1.5px solid var(--yellow); border-radius:9px; padding:15px 14px; text-align:center;
  background:rgba(255,255,255,.05); transition:background .25s, transform .25s var(--ease);
}
.flow-route:hover{background:rgba(253,227,0,.13); transform:translateY(-2px)}
.flow-route b{display:block; font:700 18px/1.15 'Barlow Condensed',sans-serif;
  letter-spacing:.05em; text-transform:uppercase; color:#fff; margin-bottom:6px}
.flow-route span{font:500 14.5px/1.4 'Inter',sans-serif; color:var(--txt-mute)}

.flow-teams{display:grid; gap:11px}
.flow-note{
  margin-top:18px; text-align:center; font-size:15.9px; color:var(--txt-mute);
  border-top:1px solid var(--line); padding-top:16px;
}

.org-cell{
  background:rgba(255,255,255,.055); border:1.5px solid var(--yellow);
  border-radius:8px; display:flex; align-items:center; justify-content:center; text-align:center;
  padding:13px 12px; font:600 17.7px/1.28 'Inter',sans-serif; color:#fff;
  transition:background .25s, transform .25s var(--ease), box-shadow .25s;
}
.org-cell.soft{border-color:var(--line-2); background:rgba(255,255,255,.035); color:#e2e2e2}
.org-cell.hl{background:rgba(253,227,0,.13); font-weight:700}
.org-cell:hover{background:rgba(253,227,0,.16); transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.35)}
.org-row{display:grid; grid-template-columns:minmax(130px,.85fr) 2.3fr; gap:11px}
.org-pair{display:grid; grid-template-columns:1fr 1fr; gap:11px}
.org-wide{grid-column:1 / -1}



/* ============================================================
   4 · ANALYTICAL / CREATIVITY
   ============================================================ */
.dual{position:relative; margin-top:24px}
.dual-bar{
  display:grid; grid-template-columns:1fr 1fr; border-radius:100px; overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.5); max-width:900px; margin:0 auto;
}
.dual-half{padding:24px 20px; text-align:center;
  font:700 38px/1 'Barlow Condensed'; letter-spacing:.05em}
.dual-half.a{background:#6E7C7D; color:var(--yellow)}
.dual-half.c{background:var(--yellow); color:#2b2b2b}
.dual-tags{display:grid; grid-template-columns:1fr 1fr; gap:60px; margin-top:38px; max-width:1000px; margin-inline:auto}
.dual-col{display:flex; flex-wrap:wrap; gap:9px; justify-content:center}
.tagpill{
  border:1px solid var(--line-2); border-radius:100px; padding:8px 15px;
  font:600 15.4px/1 'Inter'; letter-spacing:.05em; color:#e2e2e2; white-space:nowrap;
  background:rgba(255,255,255,.035); transition:all .25s var(--ease);
}
.dual-col.a .tagpill:hover{border-color:#9fb0b1; background:rgba(159,176,177,.16); color:#fff; transform:translateY(-3px)}
.dual-col.c .tagpill:hover{border-color:var(--yellow); background:rgba(253,227,0,.16); color:var(--yellow); transform:translateY(-3px)}

/* ============================================================
   5 · YOL AYRIMI
   ============================================================ */
.forkwrap{display:grid; grid-template-columns:1fr 1.05fr; gap:60px; align-items:center}
.fork-img{position:relative}
.fork-img img{width:100%; max-width:420px; margin:0 auto; opacity:.95}
.fork-list{display:grid; gap:11px}
.fork-item{
  display:flex; align-items:center; gap:14px; padding:15px 18px;
  border:1px solid var(--line); border-radius:8px; background:rgba(255,255,255,.03);
  transition:all .28s var(--ease);
}
.fork-item.on{border-color:var(--yellow); background:rgba(253,227,0,.08)}
.fork-item.off{opacity:.42}
.fork-item b{font:700 19.4px/1.18 'Barlow Condensed'; letter-spacing:.05em; text-transform:uppercase; color:#fff; flex:1}
.fork-item.on b{color:var(--yellow)}
.fork-item b span{display:block; font-size:.72em; color:var(--txt-mute); letter-spacing:.12em; margin-top:3px}
.fork-item i{
  font:500 14.2px/1 'Inter'; font-style:normal; letter-spacing:.12em; text-transform:uppercase;
  color:var(--txt-dim); border:1px solid var(--line-2); padding:5px 9px; border-radius:100px; white-space:nowrap;
}
.fork-item.on i{color:var(--yellow); border-color:rgba(253,227,0,.4)}
.fork-chapters{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:40px}
.fork-chip{
  display:block; text-align:center; text-decoration:none; padding:20px 14px; border-radius:8px;
  border:1px solid var(--line-2); background:rgba(255,255,255,.035);
  font:700 18.3px/1.22 'Barlow Condensed'; letter-spacing:.05em;
  text-transform:uppercase; color:#fff; transition:all .28s var(--ease);
}
.fork-chip:hover{border-color:var(--yellow); background:rgba(253,227,0,.1); color:var(--yellow); transform:translateY(-4px)}
.fork-chip em{display:block; font:500 13.9px/1 'Inter'; font-style:normal; letter-spacing:.18em; color:var(--txt-dim); margin-top:9px}


/* ============================================================
   6 · GENEL YAKLAŞIM — 6 HALKA
   ============================================================ */
.rings{display:flex; flex-wrap:wrap; gap:20px; justify-content:center; margin:12px 0 34px}
.ring{
  /* 152 px'te "GELİŞTİRMEK" daireye sığmıyor, iki yandan 6'şar px taşıyordu */
  position:relative; width:174px; aspect-ratio:1;
  border-radius:50%; display:flex; align-items:center; justify-content:center; text-align:center;
  background:#fbfbfb; color:#1b1b1b; padding:14px;
  font:700 15.7px/1.24 'Inter'; letter-spacing:.02em; text-transform:uppercase;
  box-shadow:0 0 0 5px var(--yellow), 0 0 0 9px rgba(0,0,0,.4), 0 14px 34px rgba(0,0,0,.45);
  transition:transform .32s var(--ease), box-shadow .32s var(--ease);
}
.ring:hover{transform:translateY(-8px) scale(1.05); box-shadow:0 0 0 5px var(--yellow), 0 0 0 12px rgba(253,227,0,.25), 0 20px 44px rgba(0,0,0,.55)}
.ring::after{
  content:''; position:absolute; right:-13px; top:50%; transform:translateY(-50%);
  width:9px; height:2px; background:rgba(253,227,0,.55);
}
.ring:last-child::after{display:none}
.approach-footer{
  background:linear-gradient(90deg, rgba(253,227,0,.16), rgba(253,227,0,.05) 60%, transparent);
  border-left:3px solid var(--yellow); border-radius:0 8px 8px 0;
  padding:28px 34px; font-size:17.7px; line-height:1.68; color:#e6e6e6;
}

/* ============================================================
   7 · DOĞRU TEŞHİS
   ============================================================ */
.diag{display:grid; grid-template-columns:1fr 1.15fr; gap:54px; align-items:center; margin-top:8px}
.diag-note{position:relative; padding-left:56px; font-size:18.3px; line-height:1.7; color:#ddd}
.diag-arrow{position:absolute; left:0; top:2px; width:40px; height:46px; color:var(--yellow)}
.diag-arrow path{stroke-dasharray:120; stroke-dashoffset:120; transition:stroke-dashoffset 1s var(--ease) .2s}
.diag.in .diag-arrow path{stroke-dashoffset:0}
.srcbox{border:2px solid var(--yellow); border-radius:16px; padding:28px; display:grid; grid-template-columns:auto 1fr; gap:30px; align-items:center}
.srcbox h4{
  font:700 16.5px/1.5 'Inter',sans-serif; letter-spacing:.05em; text-align:right;
  text-transform:uppercase; color:#fff; max-width:220px; border-right:1px solid var(--line-2); padding-right:26px;
}
/* veri kaynakları — her maddede ikon */
.src-list{display:grid; gap:9px}
.src-item{
  display:flex; align-items:center; gap:12px; padding:9px 12px; border-radius:8px;
  background:rgba(255,255,255,.04); border:1px solid var(--line);
  font-size:16.8px; line-height:1.35; color:#e4e4e4;
  transition:background .25s, border-color .25s, transform .25s var(--ease);
}
.src-item:hover{background:rgba(253,227,0,.09); border-color:rgba(253,227,0,.45); transform:translateX(3px)}
.src-ico{flex:none; width:26px; height:26px; color:var(--yellow); display:block}
.src-ico svg{width:100%; height:100%; display:block}

/* büyük / orta bölüm başlıkları */
.sec-title.big{font-size:84px; line-height:.96; margin-bottom:34px}
.sec-title.mid{font-size:44px; margin:56px 0 22px}

/* ============================================================
   8 · GAP MAP
   ============================================================ */
/* --- üç perspektif → GAP diyagramı --- */
/* Üç perspektif = tablonun başlık satırı. Sütun genişlikleri
   .gap-row ile birebir aynı ki satırlar tam altına hizalansın. */
.lens{display:grid; grid-template-columns:1.25fr 1fr 1fr; gap:8px; margin-bottom:10px}
.lens-card{
  display:flex; flex-direction:column; gap:7px;
  padding:18px 18px 16px; border-radius:9px;
  border:1px solid var(--line-2); border-bottom:2px solid var(--yellow);
  background:linear-gradient(170deg, rgba(253,227,0,.10), rgba(255,255,255,.03));
  transition:border-color .3s, background .3s;
}
.lens-card:hover{background:linear-gradient(170deg, rgba(253,227,0,.16), rgba(255,255,255,.04))}
.lens-ico{width:26px; height:26px; color:var(--yellow); flex:none}
.lens-ico svg{width:100%; height:100%; display:block}
.lens-card b{font:700 19.4px/1.12 'Barlow Condensed',sans-serif; letter-spacing:.05em; text-transform:uppercase; color:#fff}
.lens-note{font:500 15.1px/1.35 'Inter',sans-serif; color:var(--txt-mute)}

/* --- GAP MAP ÖRNEĞİ tablosu (dolgulu yeşil/kırmızı, beyaz yazı) --- */
.gapmap{display:grid; gap:8px}
.gap-row{display:grid; grid-template-columns:1.25fr 1fr 1fr; gap:8px}
.gap-claim{
  display:flex; align-items:center; gap:13px; padding:16px 18px; border-radius:9px;
  background:rgba(255,255,255,.05); border:1px solid var(--line);
}
.gap-claim b{
  font:700 17.1px/1 'Barlow Condensed',sans-serif; color:#151515; background:var(--yellow);
  width:28px; height:28px; border-radius:50%; display:grid; place-items:center; flex:none;
}
.gap-claim span{font:600 17.7px/1.35 'Inter',sans-serif; color:#fff}

.gap-cell{
  display:flex; align-items:center; gap:11px; padding:16px 18px; border-radius:9px;
  font:600 16.8px/1.4 'Inter',sans-serif; color:#fff;
  transition:transform .22s var(--ease), filter .22s;
}
.gap-cell i{
  flex:none; width:20px; height:20px; border-radius:50%;
  background:rgba(255,255,255,.22); position:relative;
}
.gap-cell i::before{
  content:''; position:absolute; inset:0; background:no-repeat center/11px 11px;
}
.gap-cell.yes{background:#2E9B45; border:1px solid #3fb95a}
.gap-cell.no{background:#C3383C; border:1px solid #d9494d}
.gap-cell.yes i::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12.5l5.5 5.5L20 6.5'/></svg>")}
.gap-cell.no i::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round'><path d='M6 6l12 12M18 6L6 18'/></svg>")}
.gap-cell:hover{transform:translateY(-2px); filter:brightness(1.1)}

.gap-legend{display:flex; gap:20px; flex-wrap:wrap; margin-top:18px; font-size:15.1px; color:var(--txt-mute); align-items:center}
.gap-legend i{display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:8px; vertical-align:middle}
.gap-legend i.ok{background:#2E9B45}
.gap-legend i.no{background:#C3383C}

/* ============================================================
   9 · SÜREÇ (3 halka)
   ============================================================ */
.proc{display:flex; flex-wrap:wrap; gap:48px; justify-content:center; margin-top:20px}
.proc-item{position:relative; width:268px; aspect-ratio:1}
.proc-circle{
  position:absolute; inset:0; border-radius:50%; background:#fafafa; color:#1b1b1b;
  display:flex; align-items:center; justify-content:center; text-align:center; padding:20% 16%;
  font:700 17.7px/1.3 'Inter'; letter-spacing:.02em; text-transform:uppercase;
  box-shadow:0 20px 50px rgba(0,0,0,.5); transition:transform .35s var(--ease);
}
.proc-item:hover .proc-circle{transform:scale(1.04)}
.proc-ring{position:absolute; inset:-9%; border:1.5px solid var(--yellow); border-radius:50%; opacity:.85;
  transform:rotate(-90deg); transition:transform .8s var(--ease)}
.proc-item:hover .proc-ring{transform:rotate(0deg)}
.proc-num{
  position:absolute; left:4%; top:14%; width:24%; aspect-ratio:1; border-radius:50%;
  background:#fafafa; border:2px solid var(--yellow); color:var(--yellow);
  display:grid; place-items:center; font:700 32px/1 'Barlow Condensed'; z-index:2;
}

/* ============================================================
   10 · 7 ADIM (STEPPER)
   ============================================================ */
.banner{
  background:linear-gradient(90deg,#1c1a08 0%, var(--yellow-deep) 22%, var(--yellow) 50%, var(--yellow-deep) 78%, #1c1a08 100%);
  padding:28px 50px; border-radius:4px; margin-bottom:36px;
}
.banner h2{font:700 42px/1.1 'Barlow Condensed'; text-transform:uppercase; color:#fff; text-align:center; text-shadow:0 2px 10px rgba(0,0,0,.3)}
.banner h2 b{font-size:1.5em; color:#fff}
.banner h2 span{display:block; font-size:.72em; letter-spacing:.06em; margin-top:6px; opacity:.92}

.steps-nav{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:34px}
.step-btn{
  position:relative; width:142px; aspect-ratio:1; border-radius:50%; cursor:pointer;
  background:#f4f4f4; color:#333; border:none; padding:9px;
  /* "YAYGINLAŞTIRMA" 124 px'lik daireye sığmıyor, koyu zemine taşıp
     görünmez oluyordu. Daire büyütüldü, punto en uzun etikete göre seçildi. */
  font:700 13px/1.2 'Inter'; letter-spacing:0; text-transform:uppercase;
  box-shadow:0 0 0 4px rgba(255,255,255,.14), 0 8px 22px rgba(0,0,0,.4);
  transition:all .35s var(--ease);
}
.step-btn:hover{transform:translateY(-5px); box-shadow:0 0 0 4px rgba(253,227,0,.5), 0 14px 30px rgba(0,0,0,.5)}
.step-btn.on{
  background:#fff; color:#111; transform:scale(1.14);
  box-shadow:0 0 0 5px var(--yellow), 0 0 34px rgba(253,227,0,.4), 0 16px 38px rgba(0,0,0,.55);
}
.step-btn.on:hover{transform:scale(1.14) translateY(-3px)}
.step-btn i{
  position:absolute; top:6px; left:50%; transform:translateX(-50%);
  font:700 13.6px/1 'Barlow Condensed'; font-style:normal; color:var(--yellow-deep); opacity:0; transition:opacity .3s;
}
.step-btn.on i{opacity:1}

.step-panel{
  border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.025);
  padding:40px; min-height:280px;
}
.step-panel h3{
  font:700 27px/1.15 'Barlow Condensed'; letter-spacing:.05em;
  text-transform:uppercase; color:var(--yellow); text-align:center; margin-bottom:24px;
}
.step-sub{text-align:center; color:var(--txt-mute); font-size:16.5px; margin:-14px 0 22px}
.cardgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px}
.card{
  background:rgba(255,255,255,.045); border:1px solid var(--line);
  border-radius:8px; padding:17px 19px; font-size:16.2px; line-height:1.6; color:#dcdcdc;
  transition:all .28s var(--ease);
}
.card:hover{border-color:rgba(253,227,0,.5); background:rgba(253,227,0,.06); transform:translateY(-3px)}
.card b{display:block; margin-bottom:5px; color:var(--yellow); font-size:15.7px; letter-spacing:.05em}
.card.hl{border-color:var(--yellow); background:rgba(253,227,0,.07)}
.pillhead{
  display:inline-block; background:linear-gradient(90deg,#c9c9c9,#efefef); color:#222;
  font:700 15.4px/1 'Inter'; letter-spacing:.06em; text-transform:uppercase;
  padding:10px 20px; border-radius:100px; margin-bottom:12px;
}
.pillhead.y{background:linear-gradient(90deg,var(--yellow-deep),var(--yellow)); color:#1b1b1b}
.blocks{display:grid; grid-template-columns:1fr 1fr; gap:44px; margin-bottom:22px; text-align:center}
.blocks p{font-size:15.9px; line-height:1.6; color:#cfcfcf; text-align:center}
.pair{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:16px}
.aim{
  margin-top:24px; text-align:center; border-radius:100px;
  background:linear-gradient(90deg, transparent, rgba(253,227,0,.16), transparent);
  border-top:1px solid rgba(253,227,0,.3); border-bottom:1px solid rgba(253,227,0,.3);
  padding:13px 22px; font-size:16.2px; color:#fff;
}
.aim b{color:var(--yellow); letter-spacing:.08em}
.awards{display:grid; gap:8px; margin-top:8px}
.awards li{list-style:none; font-size:15.8px; color:#d4d4d4; padding-left:16px; position:relative; line-height:1.55}
.awards li::before{content:'▸'; position:absolute; left:0; color:var(--yellow)}

/* ---------- TAKVİM ---------- */
.cal{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:26px}
.cal-item{border:1px solid var(--line-2); border-radius:10px; padding:20px; text-align:center; transition:all .3s var(--ease)}
.cal-item:hover{border-color:var(--yellow); background:rgba(253,227,0,.06); transform:translateY(-4px)}
.cal-item b{display:block; font:700 26px/1 'Barlow Condensed'; color:var(--yellow); margin-bottom:12px; letter-spacing:.04em}
.cal-steps{display:flex; flex-wrap:wrap; gap:6px; justify-content:center}
.cal-steps span{
  font:600 14.2px/1 'Inter'; letter-spacing:.06em; text-transform:uppercase;
  background:rgba(255,255,255,.08); border:1px solid var(--line-2); color:#ddd;
  padding:6px 10px; border-radius:100px;
}

/* ============================================================
   11 · REFERANSLAR
   ============================================================ */
.tabs{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px}
.tab{
  background:transparent; border:1px solid var(--line-2); color:var(--txt-mute); cursor:pointer;
  font:600 14.8px/1 'Inter'; letter-spacing:.1em; text-transform:uppercase;
  padding:11px 17px; border-radius:100px; transition:all .25s var(--ease);
}
.tab:hover{border-color:var(--yellow); color:var(--yellow)}
.tab.on{background:var(--yellow); border-color:var(--yellow); color:#111}
.ref-note{font-size:16.2px; color:var(--txt-mute); margin-bottom:24px}

/* --- logo ızgarası (her logo ayrı dosya) ---
   Sütun sayısı --cols ile geliyor (app.js logo adedine göre seçiyor).
   Flex + ortalama sayesinde artan karolar sağa yığılmıyor, ortalanıyor.
   Ekran daraldıkça min-width devreye girip satır başına düşen karo
   sayısı kendiliğinden azalıyor.                                      */
.logo-grid{--cols:6; display:flex; flex-wrap:wrap; gap:12px; justify-content:center}
.logo-tile{
  width:calc((100% - (var(--cols) - 1) * 12px) / var(--cols));
  min-width:150px; max-width:280px; flex:0 1 auto;
  position:relative; background:#fff; border-radius:8px; aspect-ratio:16/9;
  display:flex; align-items:center; justify-content:center; padding:14px 16px;
  border:1px solid rgba(0,0,0,.06); overflow:hidden;
  transition:transform .28s var(--ease), box-shadow .28s var(--ease);
}

/* TÜM REFERANSLAR sayfası: karolar diğer sayfaların ~2/3'ü kadar */
.logo-grid.dense{gap:9px}
.logo-grid.dense .logo-tile{
  width:calc((100% - (var(--cols) - 1) * 9px) / var(--cols));
  min-width:102px; max-width:190px; padding:10px 11px; border-radius:6px;
}

.logo-tile img{max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain}
.logo-tile:hover{transform:translateY(-4px); box-shadow:0 14px 30px rgba(0,0,0,.45)}
.logo-name{
  position:absolute; left:0; right:0; bottom:0; padding:7px 8px;
  background:rgba(20,20,20,.9); color:#fff; font:600 13.9px/1.25 'Inter',sans-serif;
  letter-spacing:.06em; text-transform:uppercase; text-align:center;
  transform:translateY(100%); transition:transform .28s var(--ease);
}
.logo-tile:hover .logo-name{transform:translateY(0)}

/* --- uygulama adımları matrisi --- */
.mx-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:6px}
.mx{min-width:760px; display:grid; gap:6px}
.mx-head,.mx-row{display:grid; grid-template-columns:minmax(150px,1.5fr) repeat(var(--cols),1fr); gap:6px; align-items:stretch}
.mx-corner{
  display:flex; align-items:center; padding:10px 12px;
  font:700 14.2px/1 'Inter',sans-serif; letter-spacing:.16em; color:var(--yellow);
}
.mx-step{
  display:flex; align-items:center; justify-content:center; text-align:center;
  background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:7px; padding:10px 6px;
  font:700 13.9px/1.25 'Inter',sans-serif; letter-spacing:.05em; color:#fff; text-transform:uppercase;
}
.mx-brand{
  background:#fff; border-radius:7px; display:flex; align-items:center; justify-content:center;
  padding:8px 12px; min-height:52px;
}
.mx-brand img{max-width:100%; max-height:38px; width:auto; object-fit:contain}
.mx-cell{
  display:flex; align-items:center; justify-content:center; border-radius:7px;
  border:1px solid var(--line); transition:transform .2s var(--ease);
}
.mx-cell svg{width:19px; height:19px}
.mx-cell.yes{background:rgba(63,185,80,.16); border-color:rgba(63,185,80,.45); color:#5fd472}
.mx-cell.no{background:rgba(229,72,77,.10); border-color:rgba(229,72,77,.32); color:#e5686c}
.mx-cell:hover{transform:scale(1.08)}
.mx-legend{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:16px;
  font-size:15.1px; color:var(--txt-mute);
}
.mx-legend span{display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:5px; margin-left:10px}
.mx-legend span:first-child{margin-left:0}
.mx-legend span svg{width:14px; height:14px}
.mx-legend .yes{background:rgba(63,185,80,.16); color:#5fd472}
.mx-legend .no{background:rgba(229,72,77,.10); color:#e5686c}

/* ============================================================
   12 · UYGULAMA ÖRNEKLERİ
   ============================================================ */
.filters{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:26px}
.proj-list{display:grid; gap:16px}
.proj{
  display:grid; grid-template-columns:minmax(240px,.72fr) 1.28fr; gap:0;
  border:1px solid var(--line); border-radius:12px; overflow:hidden;
  background:var(--ink-2); transition:border-color .3s, transform .3s var(--ease), box-shadow .3s;
}
.proj:hover{border-color:var(--line-2); box-shadow:0 18px 46px rgba(0,0,0,.4)}
.proj-info{padding:32px; background:linear-gradient(160deg,#f4f2ef,#e6e3de); color:#1b1b1b; display:flex; flex-direction:column}
.proj-tag{
  align-self:flex-start; font:600 13.9px/1 'Inter'; letter-spacing:.14em; text-transform:uppercase;
  background:#1b1b1b; color:var(--yellow); padding:7px 11px; border-radius:100px; margin-bottom:16px;
}
.proj-lbl{font:600 13.9px/1 'Inter'; letter-spacing:.16em; text-transform:uppercase; color:#8a7f00; background:var(--yellow); display:inline-block; padding:3px 6px; border-radius:2px; margin-bottom:5px}
.proj-brand{font:700 25px/1.06 'Barlow Condensed'; text-transform:uppercase; color:#111; margin-bottom:12px; letter-spacing:.01em}
.proj-name{font:700 20px/1.18 'Barlow Condensed'; text-transform:uppercase; color:#111; margin-bottom:16px}
.proj-body p{font-size:15.8px; line-height:1.62; color:#3a3a3a; margin-bottom:11px}
.proj-res{margin-top:auto; padding-top:16px; border-top:2px solid var(--yellow)}
.proj-res span{display:block; font:700 15.7px/1.5 'Inter'; color:#111; background:var(--yellow); padding:9px 12px; border-radius:4px}
.proj-media{position:relative; background:#232323; padding:24px; display:grid; gap:10px; align-content:center}
.proj-media img, .proj-media video{border-radius:6px; width:100%; height:100%; object-fit:cover; background:#1a1a1a}
.pm-item{overflow:hidden; border-radius:6px; cursor:zoom-in; position:relative; transition:transform .35s var(--ease)}
/* logo / rozet: kırpma yok, nefes payı var */
.pm-item.pm-fit{background:rgba(255,255,255,.05); padding:26px; display:flex; align-items:center; justify-content:center}
.pm-item.pm-fit img{object-fit:contain; width:100%; height:100%; max-height:100%}

/* uzun mailing: üstten kırpılmış önizleme + "devamı var" ipucu */
.pm-item.pm-top{aspect-ratio:3/4; align-self:start}
.pm-item.pm-top img{object-fit:cover; object-position:top center; height:100%}
.pm-item.pm-top::before{
  content:''; position:absolute; left:0; right:0; bottom:0; height:34%; pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(20,20,20,.88));
}
.pm-item.pm-top::after{
  content:'Tamamını görmek için tıklayın';
  position:absolute; left:50%; bottom:14px; transform:translateX(-50%);
  font:700 13.9px/1 'Inter',sans-serif; letter-spacing:.12em; text-transform:uppercase;
  color:#151515; background:var(--yellow); padding:7px 12px; border-radius:100px;
  white-space:nowrap; pointer-events:none; box-shadow:0 6px 16px rgba(0,0,0,.5);
}
.pm-item:hover{transform:scale(1.02)}
.pm-item img{transition:transform .5s var(--ease)}
.pm-item:hover img{transform:scale(1.05)}

/* fit-page: medya sütunu tek ekrana sığar.
   Görseller kırpılmaz, oranını koruyarak küçülür; tıklayınca tam boy açılır. */
.proj-media.fit-page{max-height:min(799.2px, 660px); align-content:stretch}
.proj-media.fit-page.lay-stack,
.proj-media.fit-page.lay-single,
/* duo / trio / tall / hero3 için satır sınırı hiç tanımlanmamıştı: grid
   satırları içeriğe göre büyüyüp sütunu aşıyordu. Galerideki 32 kartın
   yarısı bu düzenleri kullanıyor. */
.proj-media.fit-page.lay-duo,
.proj-media.fit-page.lay-trio,
.proj-media.fit-page.lay-tall{grid-auto-rows:minmax(0,1fr)}
.proj-media.fit-page.lay-hero2,
.proj-media.fit-page.lay-hero3{grid-template-rows:minmax(0,1.18fr) minmax(0,1fr)}
.proj-media.fit-page .pm-item,
.proj-media.fit-page .vid-box,
.proj-media.fit-page .vid-wrap{min-height:0}
.proj-media.fit-page .pm-item img{object-fit:contain; width:100%; height:100%}
.proj-media.fit-page .vid-wrap{display:flex; align-items:center; justify-content:center; height:100%}
.proj-media.fit-page .vid-wrap video{max-height:100%; height:100%; width:100%; object-fit:contain}

.lay-single{grid-template-columns:1fr}
.lay-duo{grid-template-columns:1fr 1fr}
.lay-trio{grid-template-columns:repeat(3,1fr)}
.lay-stack{grid-template-columns:1fr}
.lay-tall{grid-template-columns:1fr; max-width:560px; margin:0 auto; width:100%}
.lay-hero2{grid-template-columns:1fr 1fr; grid-template-rows:auto auto}
.lay-hero2 .pm-item:first-child{grid-column:1 / -1}
.lay-hero3{grid-template-columns:repeat(3,1fr); grid-template-rows:auto auto}
.lay-hero3 .pm-item:first-child{grid-column:1 / -1}

.play-badge{
  position:absolute; inset:0; display:grid; place-items:center; background:rgba(0,0,0,.32);
  transition:background .25s; border:none; cursor:pointer; width:100%; padding:0;
}
.play-badge:hover{background:rgba(0,0,0,.15)}
.play-badge i{
  width:56px; height:56px; border-radius:50%; background:var(--yellow); display:grid; place-items:center;
  box-shadow:0 8px 26px rgba(0,0,0,.5); transition:transform .25s var(--ease);
}
.play-badge:hover i{transform:scale(1.12)}
.play-badge svg{width:20px; height:20px; color:#111; margin-left:3px}
.play-badge b{
  position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
  font:700 14.2px/1 'Inter'; letter-spacing:.18em; text-transform:uppercase;
  background:var(--yellow); color:#111; padding:7px 13px; border-radius:100px;
}
/* Video: kırpılmadan, kendi en-boy oranıyla. Görsel değil, oynatılır. */
.vid-wrap{position:relative; border-radius:6px; overflow:hidden; background:#000; align-self:center; cursor:default}
.vid-wrap:hover{transform:none}
.vid-wrap video{display:block; width:100%; height:auto; object-fit:contain; border-radius:6px; background:#000}



/* ============================================================
   12b · KARİYER SOSYAL MEDYA HESAPLARI
   (Uygulama Örnekleri içinde ayrı kategori)
   ============================================================ */
.tab-social{display:inline-flex; align-items:center; gap:7px}
.tab-social svg{width:12px; height:12px; flex:none}

.social-block{margin-top:56px; padding-top:44px; border-top:1px solid var(--line)}
.social-block.solo{margin-top:0; padding-top:0; border-top:none}
.social-title{
  font:700 32px/1.08 'Barlow Condensed',sans-serif;
  letter-spacing:.01em; text-transform:uppercase; color:#fff; margin-bottom:9px;
}
.social-note{font-size:16.5px; color:var(--txt-mute); margin-bottom:26px}

.social-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}



/* Her kart markanın kurumsal renginde.
   --c  = marka rengi (şerit, çerçeve, buton dolgusu)
   --ci = koyu zeminde okunabilir açık varyantı (metin)
   --ring = isteğe bağlı çok renkli üst şerit                */
.sm-card{
  --c:  var(--yellow);
  --ci: var(--yellow);
  --on: #151515;
  --ring: none;
  position:relative; overflow:hidden; display:flex; flex-direction:column; min-height:186px;
  border:1px solid var(--line); border-radius:10px; padding:22px 18px 18px;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--c) 15%, transparent) 0%, transparent 62%),
    rgba(255,255,255,.04);
  transition:border-color .3s var(--ease), background .3s var(--ease),
             transform .3s var(--ease), box-shadow .3s var(--ease);
}
/* color-mix desteklemeyen tarayıcılarda düz zemin */
@supports not (background: color-mix(in srgb, red 10%, transparent)){
  .sm-card{background:rgba(255,255,255,.05)}
}
/* üst şerit: her zaman görünür, hover'da tam genişler */
.sm-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--c); background-image:var(--ring);
  transform:scaleX(.34); transform-origin:left;
  transition:transform .45s var(--ease), opacity .3s;
  opacity:.85;
}
.sm-card:hover::before{transform:scaleX(1); opacity:1}
/* köşeye sızan renk hâlesi */
.sm-card::after{
  content:''; position:absolute; right:-40%; top:-55%; width:120%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, var(--c) 0%, transparent 68%);
  opacity:.13; pointer-events:none; transition:opacity .35s var(--ease), transform .45s var(--ease);
}
.sm-card:hover{
  border-color:var(--ci);
  transform:translateY(-5px);
  box-shadow:0 16px 38px rgba(0,0,0,.45);
}
.sm-card:hover::after{opacity:.26; transform:scale(1.12)}

.sm-brand{
  position:relative; z-index:1;
  font:700 20px/1.12 'Barlow Condensed',sans-serif;
  letter-spacing:.025em; text-transform:uppercase; color:#fff; margin-bottom:9px;
}
.sm-handle{
  position:relative; z-index:1;
  font:500 15.1px/1.4 'Inter',sans-serif; color:var(--ci);
  word-break:break-all; margin-bottom:18px;
}
.sm-links{position:relative; z-index:1; margin-top:auto; display:flex; gap:8px; flex-wrap:wrap}
.sm-btn{
  display:inline-flex; align-items:center; gap:6px; text-decoration:none;
  border:1px solid var(--line-2); border-radius:100px; padding:8px 13px;
  font:600 14.2px/1 'Inter',sans-serif; letter-spacing:.1em; text-transform:uppercase;
  color:var(--txt-mute); transition:all .22s var(--ease);
}
.sm-card:hover .sm-btn{border-color:color-mix(in srgb, var(--ci) 45%, transparent); color:#e9e9e9}
.sm-btn:hover{background:var(--c); border-color:var(--c); color:var(--on); transform:translateY(-2px)}
.sm-btn svg{width:13px; height:13px; flex:none}

/* ============================================================
   13 · PRODÜKSİYON ÖRNEKLERİ
   ============================================================ */
/* 13 kart var. Grid'de son satır sola yaslanıp sağ alt köşeyi boş bırakıyordu.
   Flex + ortalama ile son satır ortalanıyor: masaüstünde 7 + 6 dizilimi. */
.prod-grid{display:flex; flex-wrap:wrap; gap:14px; justify-content:center}
.prod-item{text-align:center; width:calc((100% - 6*14px)/7)}
   /* 6+6+1 */
   /* 5+5+3 */



.prod-lbl{
  font:700 13.9px/1.25 'Inter'; letter-spacing:.05em; text-transform:uppercase;
  background:var(--yellow); color:#1b1b1b; padding:7px 6px; border-radius:4px 4px 0 0; min-height:34px;
  display:flex; align-items:center; justify-content:center;
}
.prod-shot{
  display:block; position:relative; overflow:hidden; border-radius:0 0 4px 4px;
  cursor:zoom-in; background:#1a1a1a; aspect-ratio:9/16; border:1px solid var(--line);
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.prod-shot img{width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease)}
.prod-item:hover .prod-shot img{transform:scale(1.07)}
.prod-shot.is-link{cursor:pointer}
.prod-item:hover .prod-shot.is-link{border-color:var(--yellow); box-shadow:0 10px 28px rgba(0,0,0,.5)}

/* ---------- DIŞ BAĞLANTI ROZETİ ---------- */
.ext-tag{
  position:absolute; left:50%; bottom:10px; transform:translateX(-50%) translateY(8px);
  display:flex; align-items:center; gap:5px; white-space:nowrap;
  background:var(--yellow); color:#151515; border-radius:100px; padding:6px 11px;
  font:700 13.9px/1 'Inter'; letter-spacing:.11em; text-transform:uppercase;
  opacity:0; pointer-events:none; transition:all .25s var(--ease);
  box-shadow:0 6px 18px rgba(0,0,0,.45);
}
.prod-shot.is-link:hover .ext-tag,
.pm-item.is-link:hover .ext-tag{opacity:1; transform:translateX(-50%) translateY(0)}
.pm-item.is-link{display:block; position:relative; cursor:pointer}

/* video altındaki kaynak bağlantısı (PPT'deki "İZLE") */
.vid-box{display:flex; flex-direction:column; gap:9px; align-self:center}
.vid-link{
  display:inline-flex; align-items:center; justify-content:center; gap:7px; text-decoration:none;
  background:var(--yellow); color:#151515; border-radius:100px; padding:9px 15px;
  font:700 14.2px/1 'Inter'; letter-spacing:.12em; text-transform:uppercase;
  transition:transform .22s var(--ease), filter .22s;
}
.vid-link:hover{transform:translateY(-2px); filter:brightness(1.08)}

/* ============================================================
   14 · KAPANIŞ
   ============================================================ */
#kapanis{text-align:center; justify-content:center}
.thanks{font:700 110px/1 'Barlow Condensed'; text-transform:uppercase; color:var(--yellow); letter-spacing:.02em}
.thanks-logo{width:min(220px,844.8px); margin:44px auto 22px; opacity:.9}
.thanks-site{font:600 15.9px/1 'Inter'; letter-spacing:.22em; color:var(--txt-mute)}
.thanks-site a{color:var(--yellow); text-decoration:none}

/* ============================================================
   SAHNE KABUĞU — ilerleme, nokta rayı, alt bar, bölüm menüsü
   Hepsi #stage'in İÇİNDE yaşar: sahneyle birlikte ölçeklenir,
   içerikle çakışmaz (--rail-w ve --pad-bot payı bunun içindir).
   ============================================================ */

/* ---------- İLERLEME ---------- */
.progress{position:absolute; top:0; left:0; right:0; height:3px; z-index:60; background:rgba(255,255,255,.06)}
.progress span{display:block; height:100%; width:0; background:var(--yellow); transition:width .4s var(--ease)}

/* ---------- ALT BAR ---------- */
#bottombar{
  position:absolute; left:0; right:0; bottom:0; height:56px; z-index:60;
  display:flex; align-items:center; gap:12px; padding:0 24px 0 var(--pad);
  background:linear-gradient(180deg, rgba(20,20,20,0) 0%, rgba(16,16,16,.92) 60%);
  pointer-events:none;
}
#bottombar > *{pointer-events:auto}
.bb-logo{height:22px; width:auto; opacity:.75; margin-right:6px}
.tool-btn{
  width:34px; height:34px; border-radius:9px; cursor:pointer; flex:none;
  background:rgba(255,255,255,.06); border:1px solid var(--line-2); color:var(--txt-mute);
  display:grid; place-items:center; transition:all .2s var(--ease);
}
.tool-btn:hover{border-color:var(--yellow); color:var(--yellow); background:rgba(253,227,0,.08)}
#backBtn{
  display:flex; align-items:center; gap:8px; cursor:pointer;
  background:rgba(255,255,255,.06); border:1px solid var(--line-2); color:var(--txt-mute);
  font:600 14.8px/1 'Inter',sans-serif; letter-spacing:.06em;
  padding:0 14px; height:34px; border-radius:9px; transition:all .2s var(--ease);
}
#backBtn:hover{border-color:var(--yellow); color:var(--yellow)}
#backBtn .bb-ic{display:grid; place-items:center}
#secLabel{
  margin-left:auto; padding-right:calc(var(--rail-w) - 10px);
  font:600 15.1px/1 'Inter',sans-serif; letter-spacing:.14em; text-transform:uppercase;
  color:var(--txt-dim); white-space:nowrap;
}
#secLabel b{color:var(--yellow); font-weight:700; letter-spacing:.06em}

/* ---------- BÖLÜM MENÜSÜ ---------- */
#menuOverlay{
  position:absolute; inset:0; z-index:80; background:rgba(12,12,12,.97); backdrop-filter:blur(10px);
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s;
  display:flex; align-items:center; justify-content:center; padding:80px var(--pad);
}
#menuOverlay.open{opacity:1; visibility:visible}
#menuPanel{width:100%; max-width:1400px}
.menu-title{
  font:600 14.8px/1 'Inter'; letter-spacing:.24em; text-transform:uppercase;
  color:var(--yellow); margin-bottom:26px;
}
.menu-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
.menu-item{
  display:flex; align-items:baseline; gap:12px; padding:14px 16px; cursor:pointer;
  background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:11px;
  transition:all .2s var(--ease);
}
.menu-item:hover{background:rgba(253,227,0,.09); border-color:var(--yellow)}
.menu-item.on{border-color:var(--yellow); background:rgba(253,227,0,.07)}
.mi-num{font:600 14.2px/1 'Inter'; letter-spacing:.1em; color:var(--txt-dim); flex:none}
.menu-item:hover .mi-num, .menu-item.on .mi-num{color:var(--yellow)}
.mi-title{
  font:600 20px/1.15 'Barlow Condensed',sans-serif; letter-spacing:.02em;
  text-transform:uppercase; color:var(--txt);
}
#menuClose{position:absolute; top:24px; right:24px}

/* ---------- LIGHTBOX ---------- */
.lightbox{position:fixed; inset:0; z-index:130; background:rgba(8,8,8,.96); display:grid; place-items:center; padding:40px 20px}
.lb-body{max-width:min(1500px,96vw); max-height:92vh; overflow:auto}
.lb-body img{max-width:100%; max-height:92vh; object-fit:contain; margin:0 auto; border-radius:6px}
.lb-close{
  position:fixed; top:16px; right:20px; width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.1); border:1px solid var(--line-2); color:#fff;
  font-size:26px; line-height:1; cursor:pointer; transition:all .2s;
}
.lb-close:hover{background:var(--yellow); color:#111; border-color:var(--yellow)}

/* ---------- PRINT ---------- */
@media print{
  #dots,#bottombar,.progress,#menuOverlay{display:none !important}
  #stage{position:static; transform:none; width:auto; height:auto; box-shadow:none}
  #track{display:block; transform:none !important}
  .sec{width:auto; height:auto; overflow:visible; page-break-after:always; padding:20px}
  [data-anim]{opacity:1 !important; transform:none !important; clip-path:none !important}
  body{background:#fff; color:#000}
}

/* ============================================================
   GALERİ (yatay) — sabit sahnede uzun listelerin karşılığı
   ============================================================ */
.carousel-wrap{flex:1; min-height:0; display:flex; flex-direction:column; gap:12px}
.carousel-viewport{position:relative; flex:1; min-height:0; overflow:hidden}
.carousel-track{
  display:flex; width:100%; height:100%;
  transition:transform .5s var(--ease); will-change:transform;
}
.car-item{flex:0 0 100%; width:100%; height:100%; min-width:0; display:flex}
.car-item > *{flex:1; min-width:0; min-height:0}
.carousel-wrap{position:relative}
/* Oklar kartın dışında, kenar boşluğunda durur; açık zeminli olduğu için
   koyu slaytta net seçilir (koyu/şeffaf hâlleri kartın üstünde kayboluyordu). */
.car-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:58px; height:58px; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.93); border:1px solid rgba(255,255,255,.75); color:#1b1b1b;
  display:grid; place-items:center; box-shadow:0 10px 30px rgba(0,0,0,.45);
  transition:all .25s var(--ease);
}
.car-arrow:hover:not(:disabled){background:var(--yellow); color:#111; border-color:var(--yellow); transform:translateY(-50%) scale(1.08)}
.car-arrow:disabled{opacity:.28; cursor:default}
.car-arrow.prev{left:-72px} .car-arrow.next{right:-72px}
.car-nav{flex:none; display:flex; align-items:center; justify-content:center; gap:18px; height:22px}
.car-dots{display:flex; gap:7px}
.car-dot{
  width:7px; height:7px; border-radius:50%; border:none; padding:0; cursor:pointer;
  background:rgba(255,255,255,.22); transition:all .25s var(--ease);
}
.car-dot:hover{background:rgba(255,255,255,.5)}
.car-dot.on{background:var(--yellow); width:20px; border-radius:4px}
.car-count{font:600 15.1px/1 'Inter'; letter-spacing:.12em; color:var(--txt-dim)}
.car-count b{color:var(--yellow)}

/* ---- galeri içindeki case kartı tam yüksekliği kullanır ---- */
.carousel-wrap .proj{height:100%; min-height:0}
.carousel-wrap .proj-info{overflow:hidden}
.carousel-wrap .proj-media{overflow:hidden; align-content:center}
.carousel-wrap .proj-media img,
.carousel-wrap .proj-media video{max-height:100%}

/* ---- UYGULAMA ÖRNEKLERİ slaydı: başlık+filtre üstte sabit, galeri kalanı alır ---- */
#ornekler .sec-in{display:flex; flex-direction:column; height:100%; gap:14px}
#ornekler .sec-title{margin-bottom:0; font-size:44px}
#ornekler .sec-lead{display:none}          /* slaytta yer yok; bilgi filtre çubuğunda */
#ornekler .filters{flex:none; margin:0}

/* ---- HİZMETLERİMİZ kendi slaydında: 4+3 ızgara ortalanır ---- */
#hizmetler .sec-in{display:flex; flex-direction:column; justify-content:center; height:100%}
#hizmetler .sec-title{text-align:center; margin-bottom:8px}
#hizmetler .sec-title::after{content:''; display:block; width:52px; height:3px; background:var(--yellow); margin:16px auto 0; border-radius:2px}
/* 7 kutu tek başına slaytta duruyor: kadrajı doldursun, ortada
   küçücük kalmasın. 4 + 3 dizilim, kutular daha iri. */
#hizmetler .svc-grid{margin-top:52px; gap:20px}
#hizmetler .svc-card{width:calc((100% - 3*20px)/4); min-height:236px; padding:34px 30px 30px; gap:22px;
  justify-content:space-between}   /* ikon üstte, etiket kartın dibinde */
#hizmetler .svc-ico svg{width:46px; height:46px}
#hizmetler .svc-lbl{font-size:18.3px; line-height:1.4}

/* ---- KARİYER SOSYAL MEDYA kendi slaydında ---- */
#kariyer-sm .sec-in{display:flex; flex-direction:column; justify-content:center; height:100%}
/* blok artık kendi slaydında: üstündeki ayırıcı çizgi ve payı anlamsız */
#kariyer-sm .social-block{margin:0; padding-top:0; border-top:none}
#kariyer-sm .social-note{margin-bottom:34px}
#kariyer-sm .social-grid{grid-template-columns:repeat(4,1fr); gap:18px}
#kariyer-sm .sm-card{min-height:210px}

/* ---- UYGULAMA ADIMLARI MATRİSİ: 14 satır tek slayda sığar ----
   Satırlar kalan yüksekliği eşit paylaşır; logolar oranını koruyarak
   küçülür. Sabit min-height'ta 36 px taşıyor ve alt bara biniyordu. */
#referanslar-adim .sec-in{display:flex; flex-direction:column; height:100%; gap:0}
#referanslar-adim .sec-title{margin-bottom:10px}
#referanslar-adim .ref-note{margin-bottom:14px}
#referanslar-adim .mx-wrap{flex:1; min-height:0; display:flex; flex-direction:column; overflow:hidden; padding-bottom:0}
#referanslar-adim .mx{flex:1; min-height:0; grid-auto-rows:minmax(0,1fr); gap:5px}
#referanslar-adim .mx-head{flex:none}
#referanslar-adim .mx-brand{min-height:0}
#referanslar-adim .mx-brand img{max-height:100%}
#referanslar-adim .mx-legend{flex:none; margin-top:10px}

/* ============================================================
   SLAYT DOLULUĞU — dikey ağırlık
   ------------------------------------------------------------
   Bu beş slaytta içerik genişlikte dolu, yükseklikte inceydi;
   otomatik uyum (fitSlides) genişlikten sınırlandığı için tek
   başına çare olmuyordu. Bileşenlerin dikey ölçüsü büyütüldü.
   Ölçüm: `node analyze.js` — alan% ve gövde puntosu.
   ============================================================ */

/* ---- 5 · NASIL YAPIYORUZ (alan %47) ---- */
#nasil .dual{margin-top:54px}
#nasil .dual-half{padding:44px 24px}
#nasil .dual-tags{margin-top:64px; gap:80px; max-width:1240px}
#nasil .dual-col{gap:14px}
#nasil .tagpill{padding:14px 22px; font-size:16.5px}

/* ---- 9 · ÇALIŞMA SÜRECİ (alan %43) ---- */
#surec .proc{gap:84px; margin-top:56px}
#surec .proc-item{width:360px}

/* ---- 11 · İLETİŞİM TAKVİMİ (alan %36) — en seyrek olanıydı ---- */
#takvim .cal{margin-top:52px; gap:26px}
#takvim .cal-item{padding:52px 30px 46px}
#takvim .cal-item b{font-size:40px; margin-bottom:26px}
#takvim .cal-steps{gap:11px}
#takvim .cal-steps span{padding:12px 18px; font-size:15px}

/* ---- 12 · EVP REFERANSLARI (alan %53) ----
   Karolar `max-width:280px` ile sabitliydi; 14 logo 1688 px'e
   yayılınca kadrajın yarısı boş kalıyordu. */
#referanslar .logo-grid{gap:18px; margin-top:44px}
/* DİKKAT: karo genişliği gap'e bağlı. Birini değiştirip diğerini unutursan
   satır başına bir karo eksik sığar (14 logo 7+7 yerine 6+6+2 olmuştu). */
#referanslar .logo-tile{max-width:none; padding:22px 26px;
  width:calc((100% - (var(--cols) - 1) * 18px) / var(--cols))}
#referanslar .logo-name{font-size:14.5px; padding:10px}

/* ---- 18 · TEŞEKKÜRLER (alan %33) ---- */
#kapanis .thanks{font-size:152px}
#kapanis .thanks-logo{width:300px; margin:64px auto 30px}
#kapanis .thanks-site{font-size:18px}

/* ---- Galeride medya sütunu ----
   Destede her kart tanımı gereği "tek sayfaya sığmalı", o yüzden `fit-page`
   davranışı galeride varsayılan (app.js her karta ekliyor). Buradaki tek iş
   660 px'lik sabit tavanı kaldırmak: sütun artık slaydın kalanı kadar. */
.carousel-wrap .proj-media.fit-page{max-height:100%; height:100%}
/* Yükseklik zinciri: grid satırı → kutu → sarmalayıcı → video. `.vid-box`
   (video + "kaynağa git" butonu) zincirde sınırsız halkaydı; orada height:100%
   çözülemeyince altındaki video en-boy oranına göre serbest büyüyordu. */
.carousel-wrap .proj-media > *{min-height:0; max-height:100%}
.carousel-wrap .proj-media .vid-box{height:100%; display:flex; flex-direction:column; gap:9px}
.carousel-wrap .proj-media .vid-box .vid-wrap{flex:1 1 auto; min-height:0; height:auto}
.carousel-wrap .proj-media .vid-box .vid-link{flex:none}
.carousel-wrap .proj-media video{height:100%; max-height:100%; width:100%; object-fit:contain}

/* ============================================================
   9 · SÜREÇ — sıralı giriş
   ------------------------------------------------------------
   Üç daire aynı anda değil, art arda geliyor. Sıra `--i` ile
   (app.js yazar): daire açılır → numara yerine oturur → sarı
   halka döner. Adım aralığı 380 ms, dairenin kendi gecikmesiyle
   aynı (app.js: i * 4.22 * 90ms).
   ============================================================ */
html.anim .proc-num{
  opacity:0; transform:scale(.4);
  transition:opacity .3s var(--ease), transform .45s cubic-bezier(.34,1.56,.64,1);
}
html.anim .proc-item.in .proc-num{
  opacity:1; transform:scale(1);
  transition-delay:calc(var(--i) * 380ms + 300ms);
}
html.anim .proc-ring{opacity:0; transform:rotate(-160deg) scale(.94)}
html.anim .proc-item.in .proc-ring{
  opacity:.85; transform:rotate(-90deg) scale(1);
  transition:opacity .45s var(--ease), transform .9s var(--ease);
  transition-delay:calc(var(--i) * 380ms + 180ms);
}
/* Hover'daki halka dönüşü, .in kuralından daha özgül olmalı — yoksa
   giriş animasyonu hover'ı ezer ve halka artık dönmez. */
html.anim .proc-item.in:hover .proc-ring{transform:rotate(0deg) scale(1)}

/* ---- 10 · 7 ADIM: panel sabit kutu, içerik en uzun adıma göre ölçekli ----
   Adım içerikleri 355–614 px arasında değişiyordu; kutu sabitlenmeden
   uzun adımlar (OLUŞTURMA, ölçümleme) alt bara biniyor ve metnin altı
   kırpılıyordu. `--pfit` app.js → fitSteppers() tarafından yazılır. */
#yediadim .sec-in{display:flex; flex-direction:column; height:100%; gap:0}
#yediadim .sec-title.big{flex:none; font-size:46px; margin-bottom:22px}
#yediadim .banner{flex:none; padding:20px 50px; margin-bottom:24px}
#yediadim .steps-nav{flex:none; margin-bottom:22px}
#yediadim .step-panel{flex:1; min-height:0; overflow:hidden; display:flex; flex-direction:column}
#yediadim .step-body{
  /* flex:none şart — aksi hâlde flex-shrink içeriği sıkıştırıyor, doğal boyu
     değil sıkışmış boyu ölçülüyor ve ölçek hiç devreye girmiyordu. */
  flex:none;
  /* transform DEĞİL zoom: transform yerleşimi değiştirmediği için kutu boyu
     ile görüntü ayrışıyor, genişlik telafisi de yerleşimi yeniden akıtıp
     ölçümü geçersiz kılıyordu. zoom gerçekten yeniden akıtır. */
  zoom:var(--pfit,1);
}