/* İç sayfalar (hizmet, kurumsal, kariyer, e-ticaret, referanslar) — ana sayfanın sade dili.
   Kaynak işaretleme: eski nesacreative.com includes/ui.php (nc_page_hero, nc_faq 'center', nc_steps 'plain') ve
   snippets/nc-references.liquid. Ölçü: --phi-* (nc-ui.css). Hareket yalnız transform/opacity, prefers-reduced-motion'a uyar. */

/* ---------------------------------------------------------------- Sayfa başlığı: gerçek proje fotoğraflarından eğik kolaj
   (eski projeler.php .pj-hero). Metin solda; kolaj sağda, soldan koyulaşan gölgeyle. Mobilde kolaj tüm zemini kaplar. */
.nc-phero { position: relative; overflow: hidden; background: #0e0e0e; color: #fff; isolation: isolate; }
@media (min-width: 1024px) { .nc-phero { min-height: 34rem; display: flex; align-items: center; } }
.nc-phero__wall { position: absolute; inset: 0; overflow: hidden; z-index: -2; }
.nc-phero__drift { position: absolute; inset: 0; }
.nc-phero__grid { position: absolute; left: 30%; top: -34%; width: 100%; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--phi-2); transform: rotate(-9deg); transform-origin: 0 0; }
.nc-phero__grid img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--phi-2); background: #1c1c1c; }
.nc-phero__grid img:nth-child(6n+2), .nc-phero__grid img:nth-child(6n+4), .nc-phero__grid img:nth-child(6n+6) { transform: translateY(var(--phi-4)); }
/* Uygulama ekranları (gerçek ekran görüntüleri): dikey kare, üstten kırpılır */
.nc-phero--screens .nc-phero__grid { left: 36%; top: -26%; width: 84%; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--phi-3); }
.nc-phero--screens .nc-phero__grid img { aspect-ratio: 9 / 19; object-position: 50% 0; border-radius: 1.3125rem; background: #f5f5f5; }
.nc-phero--screens .nc-phero__grid img:nth-child(n) { transform: none; }
.nc-phero--screens .nc-phero__grid img:nth-child(2n) { transform: translateY(var(--phi-5)); }
@media (max-width: 1023.98px) {
  .nc-phero__grid { left: -12%; top: -8%; width: 140%; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .nc-phero--screens .nc-phero__grid { left: -10%; top: -6%; width: 130%; grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.nc-phero__shade { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to right, rgba(14,14,14,.97) 0%, rgba(14,14,14,.88) 38%, rgba(14,14,14,.45) 70%, rgba(14,14,14,.25) 100%), linear-gradient(to top, rgba(14,14,14,.7), rgba(14,14,14,0) 35%); }
@media (max-width: 1023.98px) { .nc-phero__shade { background: linear-gradient(to bottom, rgba(14,14,14,.72), rgba(14,14,14,.92)); } }
.nc-phero__content { position: relative; width: 100%; }
.nc-phero__title { font-size: clamp(2.25rem, 4vw, 3.4375rem); line-height: 1.1; font-weight: 500; letter-spacing: -0.03em; color: #fff; text-wrap: balance; }
.nc-phero__desc { margin-top: var(--phi-3); max-width: 34em; font-size: 1.125rem; line-height: 1.618; color: rgba(255,255,255,.75); text-wrap: pretty; }
.nc-phero__actions { margin-top: var(--phi-4); display: flex; flex-direction: column; gap: .75rem; }
@media (min-width: 640px) { .nc-phero__actions { flex-direction: row; } }
/* Başlık altı kısa olgular (özellik sayıları, e-ticaret onay satırları): sade, çizgili, etiket/çip yok */
.nc-phero__facts { margin-top: var(--phi-5); display: flex; flex-wrap: wrap; gap: var(--phi-3) var(--phi-5); }
.nc-phero__facts li { display: flex; flex-direction: column; padding-left: var(--phi-2); border-left: 1px solid rgba(255,255,255,.2); }
.nc-phero__facts strong { font-size: 1.875rem; line-height: 2.375rem; font-weight: 500; color: #fff; font-variant-numeric: tabular-nums; }
.nc-phero__facts span { font-size: .875rem; line-height: 1.25rem; color: rgba(255,255,255,.6); }
.nc-phero .nc-check { margin-top: var(--phi-5); }

/* Kolaj çok yavaş süzülür (yalnız transform); hareket azaltılmışsa durağan */
@media (prefers-reduced-motion: no-preference) {
  .nc-phero__drift { animation: nc-phero-drift 48s ease-in-out infinite alternate; will-change: transform; }
  .nc-phero__content { animation: nc-phero-in .7s cubic-bezier(.2,.7,.2,1) both; }
}
@keyframes nc-phero-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-2%, -6%, 0); } }
@keyframes nc-phero-in { from { opacity: 0; transform: translateY(13px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- Ortalı SSS (nc_faq 'center'): başlık üstte, liste dar sütunda */
.nc-faq-center { max-width: 48rem; margin-left: auto; margin-right: auto; }

/* ---------------------------------------------------------------- Gerçek ekran görüntüsü karesi (e-ticaret: uygulama ekranları) */
.nc-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--phi-3); align-items: start; }
.nc-shots img { display: block; width: 100%; height: auto; border-radius: 1.3125rem; border: 1px solid #EDEDED; background: #fff; box-shadow: 0 1px 2px rgba(20,20,20,.04); }
.nc-shots img:nth-child(2) { margin-top: var(--phi-5); }
@media (min-width: 640px) { .nc-shots { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------- Kısa olgu satırı (kurumsal rakamları başlıktan ayrıldı) */
.nc-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--phi-4) var(--phi-3); text-align: center; }
@media (min-width: 768px) { .nc-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.nc-facts strong { display: block; font-size: clamp(2.25rem, 3.4vw, 3rem); line-height: 1.15; font-weight: 500; letter-spacing: -0.03em; color: #141414; font-variant-numeric: tabular-nums; }
.nc-facts span { display: block; margin-top: .25rem; font-size: .9375rem; line-height: 1.5rem; color: #737373; }

/* ---------------------------------------------------------------- Referanslar: hafif logo ızgarası (Panel › Markalar)
   Kenarlıksız, bol boşluk; logo gri → üzerine gelince renkli, zemin çok açık gri. Son satır ortalanır (eksik hücre kutusu yok). */
.nc-logos { display: flex; flex-wrap: wrap; justify-content: center; margin: 0 calc(var(--phi-1) * -1); }
.nc-logos__cell { position: relative; flex: 0 0 33.333%; display: flex; align-items: center; justify-content: center; height: 5.5rem; padding: var(--phi-2); border-radius: 1rem; transition: background-color .25s ease; }
@media (min-width: 640px) { .nc-logos__cell { flex-basis: 25%; height: 7.5rem; padding: var(--phi-3); } }
@media (min-width: 1024px) { .nc-logos__cell { flex-basis: 20%; height: 8.5rem; padding: var(--phi-4); } }
.nc-logos__cell img { max-width: 84%; max-height: 2.5rem; width: auto; height: auto; object-fit: contain; filter: grayscale(100%); opacity: .72; transition: filter .3s ease, opacity .3s ease, transform .3s ease; }
@media (min-width: 640px) { .nc-logos__cell img { max-height: 3.25rem; max-width: 76%; } }
@media (min-width: 1024px) { .nc-logos__cell img { max-height: 3.75rem; max-width: 70%; } }
.nc-logos__initial { font-size: 2rem; font-weight: 500; color: #D4D4D4; transition: color .3s ease; }
a.nc-logos__cell:hover, a.nc-logos__cell:focus-visible { background: #FAFAFA; outline: none; }
a.nc-logos__cell:focus-visible { box-shadow: inset 0 0 0 2px #141414; }
a.nc-logos__cell:hover img, a.nc-logos__cell:focus-visible img { filter: none; opacity: 1; transform: scale(1.05); }
a.nc-logos__cell:hover .nc-logos__initial { color: #141414; }
/* İpucu: marka adı + alan adı (yalnız fareyle) */
.nc-logos__cell[data-title]::after { content: attr(data-title); position: absolute; left: 50%; bottom: calc(100% - .25rem); transform: translate(-50%, 4px); padding: .35rem .6rem; border-radius: 6px; background: #141414; color: #fff; font-size: .75rem; line-height: 1rem; font-weight: 500; white-space: nowrap; opacity: 0; pointer-events: none; z-index: 2; transition: opacity .15s ease, transform .15s ease; }
.nc-logos__cell[data-title]:hover::after, .nc-logos__cell[data-title]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
@media (hover: none) { .nc-logos__cell[data-title]::after { display: none; } }
@media (prefers-reduced-motion: reduce) { .nc-logos__cell img, .nc-logos__cell { transition: none; } a.nc-logos__cell:hover img { transform: none; } }

/* ---------------------------------------------------------------- Vitrin kartı sahnesinde gerçek ekran görüntüleri (e-ticaret: sipariş yönetimi)
   Uygulama ekranları kartın altından taşar, kart kırpar (nc-feat overflow: hidden) */
.nc-feat__shots { position: absolute; inset: var(--phi-3) 0 0; display: flex; justify-content: center; align-items: flex-start; gap: var(--phi-3); padding: 0 var(--phi-3); }
.nc-feat__shots img { width: min(15rem, 44%); height: auto; border-radius: 1.3125rem; border: 1px solid #EDEDED; background: #fff; box-shadow: 0 1px 2px rgba(20,20,20,.05); }
.nc-feat__shots img + img { margin-top: var(--phi-5); }

/* ---------------------------------------------------------------- Özellik tablosu (/e-ticaret-ozellikler): büyük harfli aralıklı etiketler
   düz yazıya iner. includes/feature-table.php paketler sayfasıyla ortak olduğu için yalnız bu sayfanın sarmalayıcısında (.nc-ft-plain). */
.nc-ft-plain .ft__badge, .nc-ft-plain .ft__tab-badge, .nc-ft-plain .ft__th--name { text-transform: none; letter-spacing: -0.01em; }
.nc-ft-plain .ft__tab-badge { font-size: 11px; line-height: 14px; }
.nc-ft-plain .ft__badge { font-size: .75rem; }

/* Özellikler sayfası: grup gezinme satırı (.feat-nav) kampanya şeridinin de altına yapışır; karşılaştırma tablosunun sabit başlığı
   (.ft__th, --ft-top) onun hemen altına iner — ikisi üst üste binip yarım görünmesin (feat-nav yüksekliği ≈ 3.8125rem) */
html:has(.nc-topbar):not(.nc-topbar-off) .feat-nav { top: calc(var(--nc-header-h) + var(--nc-topbar-h)); }
html:has(.feat-nav) .ft { --ft-top: calc(var(--nc-header-h) + 3.8125rem); }
html:has(.feat-nav):has(.nc-topbar):not(.nc-topbar-off) .ft { --ft-top: calc(var(--nc-header-h) + var(--nc-topbar-h) + 3.8125rem); }

/* Referanslar: ana sayfa "Projelerimiz" rafındaki fotoğraflı kartlar (.nc-story, nc-ui.css) ızgarada */
.nc-refs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .nc-refs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } }
@media (min-width: 1024px) { .nc-refs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; } }