/** * Engineered in Türkiye — tema stilleri. * * Tailwind derleme adımı yok: WordPress kurulumunun Node gerektirmemesi için * jetonlar CSS değişkeni, düzen ise grid/flex ile elle yazıldı. Renkler Next.js * sürümünün paletiyle aynı. */ :root { /* Next.js (apps/web/.../styles.css @theme) ile birebir aynı değerler — yaklaşık değil. */ --eit-primary: #d72638; --eit-primary-dark: color-mix(in srgb, var(--eit-primary) 82%, black); --eit-bg: #fafafa; --eit-fg: #111827; --eit-muted: #6b7280; --eit-secondary: #374151; --eit-card: #ffffff; --eit-card-alt: #f3f4f6; --eit-border: #e5e7eb; --eit-border-strong: #d1d5db; --eit-success: #16a34a; --eit-warning: #f59e0b; --eit-error: #dc2626; --eit-info: #2563eb; --eit-radius: 10px; --eit-radius-sm: 6px; --eit-shadow: 0 1px 2px rgb(17 24 39 / 6%), 0 4px 12px rgb(17 24 39 / 4%); --eit-container: 1200px; /* Next.js `--header-height` (3.125rem) ile aynı: mobil üst çubuğun yüksekliği. */ --eit-header-h: 50px; /* Next.js `--sidebar-width` (16rem) ile aynı: masaüstünde sol sabit menünün genişliği. Diğer şablonlar/ajanlar ana içerik alanını buna göre konumlandırır (bkz. aşağıdaki .eit-main / .eit-footer kuralları — sadece bu jetonu okurlar, kendi kopyalarını tutmazlar). */ --eit-sidebar-width: 16rem; /* Next.js `--font-sans` ile aynı: önce gerçek Geist fontu, sonra Next.js'in `--font-system` yedek zinciriyle birebir aynı sistem fontu listesi. */ --eit-font: "Geist", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; } /* Masaüstünde sol menü her zaman açık durur; sticky elemanların üst boşluğu artık mobil üst çubuğa değil, doğrudan viewport üstüne göre hesaplanır. */ @media (min-width: 1024px) { :root { --eit-header-h: 0px; } } /* * Koyu tema: sistem tercihine göre uygulanır, sol menüdeki ay/güneş düğmesiyle de elle * değiştirilebilir (bkz. main.js `data-eit-theme-toggle` — 'e `eit-dark`/`eit-light` * sınıfı ekler, tercih localStorage'da kalıcı olur). Next.js sürümündeki `.dark` sınıfının * karşılığı; değerler Next.js'in `.dark` bloğundaki hex/hsl karşılıklarıyla birebir aynı. * Elle "açık" seçildiyse `:not(.eit-light)` sistem tercihini bastırır. */ @media (prefers-color-scheme: dark) { :root:not(.eit-light) { --eit-primary: #e35f6c; --eit-bg: hsl(0 0% 8%); --eit-fg: hsl(0 0% 87%); --eit-muted: hsl(0 0% 60%); --eit-secondary: hsl(0 0% 70%); --eit-card: hsl(0 0% 11%); --eit-card-alt: hsl(0 0% 13%); --eit-border: hsl(0 0% 18%); --eit-border-strong: hsl(0 0% 20%); --eit-success: #22c55e; --eit-warning: #fbbf24; --eit-error: #f87171; --eit-info: #3b82f6; --eit-shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 4px 16px rgb(0 0 0 / 30%); } } :root.eit-dark { --eit-primary: #e35f6c; --eit-bg: hsl(0 0% 8%); --eit-fg: hsl(0 0% 87%); --eit-muted: hsl(0 0% 60%); --eit-secondary: hsl(0 0% 70%); --eit-card: hsl(0 0% 11%); --eit-card-alt: hsl(0 0% 13%); --eit-border: hsl(0 0% 18%); --eit-border-strong: hsl(0 0% 20%); --eit-success: #22c55e; --eit-warning: #fbbf24; --eit-error: #f87171; --eit-info: #3b82f6; --eit-shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 4px 16px rgb(0 0 0 / 30%); } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--eit-bg); color: var(--eit-fg); font-family: var(--eit-font); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; height: auto; } h1, h2, h3 { line-height: 1.2; letter-spacing: -0.0125em; margin: 0 0 0.5em; } /* Klavye kullanıcıları için görünür odak; fare tıklamasında gösterilmez. */ :focus-visible { outline: 2px solid var(--eit-primary); outline-offset: 2px; } .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .eit-skip { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 10px 16px; background: var(--eit-primary); color: #fff; } .eit-skip:focus { left: 8px; top: 8px; } /* ---------- Düzen ---------- */ .eit-container { width: 100%; max-width: var(--eit-container); margin: 0 auto; padding: 0 20px; } .eit-container--narrow { max-width: 760px; } .eit-main { /* * Next.js sürümünde ".eit-main" ile aynı rolü oynayan `
` büyür (`grow`) ama bu * büyüme kendi İÇİNDEKİ footer'ı aşağı itmez — footer içerikten hemen sonra gelir, * kısa sayfalarda (ör. /kategoriler) ekstra boşluk YOKTUR. Burada footer ayrı bir * kardeş eleman (bkz. footer.php) olduğundan sabit bir `min-height` doğrudan içerikle * footer arasında DEV bir boşluk olarak görünüyordu — kaldırıldı. */ padding: 32px 0 64px; } .eit-section { padding: 40px 0; scroll-margin-top: calc(var(--eit-header-h) + 16px); } .eit-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .eit-section__title { font-size: 26px; margin: 0 0 16px; } .eit-section__lead { color: var(--eit-muted); max-width: 60ch; margin: 0 0 24px; } .eit-grid { display: grid; gap: 16px; } .eit-grid--cards { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .eit-grid--3 { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } /* ---------- Sol sabit menü ---------- */ /* * Next.js `sidebar.tsx`'in karşılığı. Üç düşey bölge: üst (kimlik + arama + gönder), * orta (kaydırılabilir gezinme — flex: 1 min-height: 0), alt (hesap + tema, her zaman * görünür). Masaüstünde her zaman açık ve sabit; mobilde ekran dışında durur, üstteki * hamburgerle ekrana kayar (bkz. main.js `data-eit-sidebar-toggle`). */ .eit-sidebar { position: fixed; inset-block: var(--eit-header-h) 0; left: 0; z-index: 50; display: flex; flex-direction: column; gap: 14px; width: var(--eit-sidebar-width); max-width: 82vw; overflow: hidden; padding: 18px 14px; background: var(--eit-bg); border-right: 1px solid var(--eit-border); border-radius: 0 20px 20px 0; box-shadow: 16px 0 44px rgb(0 0 0 / 16%); transform: translateX(-100%); transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1); } @media (min-width: 1024px) { .eit-sidebar { border-radius: 0; box-shadow: none; transform: none; } } .eit-sidebar.is-open { transform: translateX(0); } body.admin-bar .eit-sidebar { inset-block-start: calc(var(--eit-header-h) + 32px); } @media (min-width: 1024px) { body.admin-bar .eit-sidebar { inset-block-start: 32px; } } @media (max-width: 782px) { body.admin-bar .eit-sidebar { inset-block-start: calc(var(--eit-header-h) + 46px); } } .eit-sidebar__top { display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; } .eit-sidebar__logo { display: none; align-items: center; gap: 8px; padding: 2px; font-weight: 500; font-size: 14px; white-space: nowrap; } @media (min-width: 1024px) { .eit-sidebar__logo { display: inline-flex; } } .eit-sidebar__logo-mark { width: 20px; height: 20px; flex-shrink: 0; } .eit-sidebar__search { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 14px; font: inherit; font-size: 14px; color: var(--eit-muted); background: var(--eit-card-alt); border: 1px solid transparent; border-radius: 999px; cursor: pointer; transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease; } .eit-sidebar__search:hover, .eit-sidebar__search:focus-visible { background: var(--eit-card); border-color: var(--eit-border-strong); box-shadow: 0 2px 10px rgb(0 0 0 / 8%); } .eit-sidebar__search svg { width: 15px; height: 15px; flex-shrink: 0; opacity: 0.7; } .eit-sidebar__submit { display: flex; align-items: center; justify-content: center; width: 100%; padding: 9px 16px; font-size: 14px; font-weight: 500; color: #fff; background: var(--eit-primary); border-radius: 999px; cursor: pointer; box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--eit-primary) 65%, transparent); transition: background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease; } .eit-sidebar__submit:hover { text-decoration: none; background: var(--eit-primary-dark); box-shadow: 0 10px 24px -6px color-mix(in srgb, var(--eit-primary) 75%, transparent); transform: translateY(-1px); } .eit-sidebar__scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding-right: 2px; scrollbar-width: thin; } .eit-sidebar__group { display: flex; flex-direction: column; gap: 2px; } .eit-sidebar__group--more { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--eit-border); } .eit-sidebar__label { margin: 0; padding: 0 12px 2px; font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--eit-muted); } .eit-sidebar__item { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px 8px 14px; font-size: 14px; color: var(--eit-muted); background: none; border: 0; border-radius: var(--eit-radius); cursor: pointer; list-style: none; text-align: left; transition: background-color 160ms ease, color 160ms ease, transform 160ms ease; } .eit-sidebar__item::before { content: ""; position: absolute; top: 50%; left: 5px; width: 3px; height: 18px; background: var(--eit-primary); border-radius: 999px; opacity: 0; transform: translateY(-50%) scaleY(0.4); transition: opacity 160ms ease, transform 160ms ease; } .eit-sidebar__item:hover { text-decoration: none; color: var(--eit-fg); background: color-mix(in srgb, var(--eit-card-alt) 70%, transparent); } .eit-sidebar__item.is-active { color: var(--eit-primary); font-weight: 500; background: color-mix(in srgb, var(--eit-primary) 10%, transparent); } .eit-sidebar__item.is-active::before { opacity: 1; transform: translateY(-50%) scaleY(1); } .eit-sidebar__item.is-active svg { opacity: 1; } .eit-sidebar__item svg { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.75; transition: opacity 160ms ease; } .eit-sidebar__item-label { flex: 1; } /* `
`/``: JS'siz de çalışan, sunucu tarafında `open` ile önceden genişletilebilen açılır panel — Next.js'teki React state'inin ilerleyici karşılığı. */ .eit-sidebar__details { display: contents; } .eit-sidebar__item--summary { justify-content: flex-start; } .eit-sidebar__item--summary::-webkit-details-marker { display: none; } .eit-sidebar__item--summary::marker { content: ""; } .eit-sidebar__chevron { flex-shrink: 0; transition: transform 200ms ease; } .eit-sidebar__details[open] .eit-sidebar__chevron { transform: rotate(-180deg); } .eit-sidebar__subpanel { margin: 2px 0 4px; padding-left: 4px; } .eit-sidebar__subhead { display: flex; justify-content: flex-end; padding: 0 8px 3px; } .eit-sidebar__subhead a { font-size: 11px; color: var(--eit-muted); } .eit-sidebar__subhead a:hover { color: var(--eit-fg); } .eit-sidebar__cat-list { margin: 0; padding: 0; list-style: none; } .eit-sidebar__cat-item { display: flex; align-items: center; gap: 6px; } .eit-sidebar__cat-index { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex-shrink: 0; font-size: 10px; font-variant-numeric: tabular-nums; color: var(--eit-muted); background: var(--eit-card-alt); border-radius: 999px; opacity: 0.85; transition: color 160ms ease, background-color 160ms ease; } .eit-sidebar__cat-link { display: flex; flex: 1; align-items: center; gap: 8px; min-width: 0; padding: 5px 8px 5px 4px; font-size: 13px; color: var(--eit-muted); border-radius: var(--eit-radius-sm); transition: background-color 160ms ease, color 160ms ease; } .eit-sidebar__cat-link:hover { text-decoration: none; color: var(--eit-fg); background: color-mix(in srgb, var(--eit-card-alt) 60%, transparent); } .eit-sidebar__cat-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .eit-sidebar__cat-icon { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.7; } .eit-sidebar__cat-item.is-active .eit-sidebar__cat-link { color: var(--eit-fg); font-weight: 500; } .eit-sidebar__cat-item.is-active .eit-sidebar__cat-index { color: #fff; background: var(--eit-primary); opacity: 1; } .eit-sidebar__cat-empty { margin: 0; padding: 4px 8px; font-size: 12px; color: var(--eit-muted); } .eit-sidebar__bottom { display: flex; flex-shrink: 0; flex-direction: column; gap: 10px; padding-top: 12px; border-top: 1px solid var(--eit-border); } .eit-sidebar__signin, .eit-sidebar__account-link { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 9px 14px; font-size: 14px; font-weight: 500; color: var(--eit-bg); background: var(--eit-fg); border-radius: 999px; cursor: pointer; box-shadow: 0 6px 16px -6px rgb(0 0 0 / 30%); transition: opacity 160ms ease, transform 160ms ease; } .eit-sidebar__signin:hover, .eit-sidebar__account-link:hover { text-decoration: none; opacity: 0.9; transform: translateY(-1px); } .eit-sidebar__signin svg, .eit-sidebar__account-link svg { width: 15px; height: 15px; flex-shrink: 0; } .eit-sidebar__account { display: flex; align-items: center; gap: 6px; } .eit-sidebar__account-link { justify-content: flex-start; overflow: hidden; } .eit-sidebar__account-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .eit-sidebar__logout { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex-shrink: 0; color: var(--eit-muted); background: var(--eit-card-alt); border-radius: 999px; cursor: pointer; transition: color 160ms ease, background-color 160ms ease; } .eit-sidebar__logout:hover { color: var(--eit-fg); } .eit-sidebar__logout svg { width: 15px; height: 15px; } .eit-sidebar__theme { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-left: auto; color: var(--eit-muted); background: var(--eit-card-alt); border: 0; border-radius: 999px; cursor: pointer; transition: color 160ms ease, background-color 160ms ease, transform 160ms ease; } .eit-sidebar__theme:hover { color: var(--eit-fg); background: var(--eit-border); transform: rotate(-10deg); } .eit-sidebar__theme svg { width: 16px; height: 16px; } /* Aydınlık/karanlık simge çifti: yalnızca geçerli olan gösterilir (bkz. main.js). */ .eit-icon--sun { display: none; } html.eit-dark .eit-icon--moon { display: none; } html.eit-dark .eit-icon--sun { display: block; } /* ---------- Mobil üst çubuk ---------- */ .eit-topbar { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; gap: 10px; height: var(--eit-header-h); padding: 0 16px; background: color-mix(in srgb, var(--eit-bg) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--eit-border); } @media (min-width: 1024px) { .eit-topbar { display: none; } } .eit-topbar__toggle { position: relative; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex-shrink: 0; margin-left: -6px; color: var(--eit-fg); background: none; border: 0; border-radius: 999px; cursor: pointer; transition: background-color 160ms ease; } .eit-topbar__toggle:hover { background: var(--eit-card-alt); } .eit-topbar__toggle-icon { position: absolute; width: 20px; height: 20px; } .eit-topbar__toggle-icon--close { display: none; } /* Simge geçişi `aria-expanded`e dayanır — main.js her açma/kapamada bu özniteliği günceller. */ .eit-topbar__toggle[aria-expanded="true"] .eit-topbar__toggle-icon--open { display: none; } .eit-topbar__toggle[aria-expanded="true"] .eit-topbar__toggle-icon--close { display: block; } .eit-topbar__logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 14px; white-space: nowrap; } .eit-topbar__logo:hover { text-decoration: none; } .eit-topbar__logo-mark { width: 18px; height: 18px; flex-shrink: 0; } .eit-sidebar-backdrop { position: fixed; inset: 0; z-index: 45; background: rgb(10 12 16 / 40%); backdrop-filter: blur(4px); } @media (min-width: 1024px) { .eit-sidebar-backdrop { display: none !important; } } /* ---------- Ana içerik kayması ---------- */ /* Sol menü sabitken içerik onun altında kalmasın diye masaüstünde sağa kayar; mobilde menü ekran dışı olduğundan içerik tam genişlikte kalır. */ @media (min-width: 1024px) { .eit-main, .eit-footer { margin-left: var(--eit-sidebar-width); } } /* Arama düğmesi artık menü içinde tam genişlikte durduğu için ayrı bir daraltma kuralına gerek yok; eski `.eit-search-trigger` bu adla `.eit-sidebar__search` oldu. */ /* ---------- Düğmeler ---------- */ .eit-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 14px; font: inherit; font-size: 14px; font-weight: 500; color: var(--eit-fg); background: var(--eit-card); border: 1px solid var(--eit-border-strong); border-radius: var(--eit-radius-sm); cursor: pointer; transition: background-color 120ms ease, border-color 120ms ease; } .eit-button:hover { text-decoration: none; background: var(--eit-card-alt); } .eit-button--primary { color: #fff; background: var(--eit-primary); border-color: var(--eit-primary); } .eit-button--primary:hover { background: var(--eit-primary-dark); border-color: var(--eit-primary-dark); } .eit-button--ghost { background: transparent; } /* Next.js'teki bülten formunun `SpecularButton` (primary varyant, fg/bg ters) rengiyle eşleşir — sitenin geri kalanındaki kırmızı `--primary` düğmelerden kasıtlı olarak farklı. */ .eit-button--dark { color: var(--eit-bg); background: var(--eit-fg); border-color: var(--eit-fg); } .eit-button--dark:hover { background: var(--eit-fg); opacity: 0.85; } .eit-button--lg { padding: 12px 22px; font-size: 16px; } .eit-button__icon { width: 16px; height: 16px; flex-shrink: 0; } .eit-link { color: var(--eit-primary); font-size: 14px; font-weight: 500; } /* ---------- Proje duvarı ---------- */ /* * Next.js `ProjectDriftWall` + `DriftWall.tsx`'in hafifletilmiş karşılığı: kenardan kenara * taşan bir şerit, üstünde gerçek ürün favicon'larından oluşan, sonsuz döngüde kayan * sütunlar. Next.js'teki #080b12 koyu zemin gerçek ürün FOTOĞRAFLARININ arka planı olarak * tasarlanmış (siyah sadece kart aralarında ince bir "derz" olarak görünür); burada gerçek * görsel yerine küçük favicon'lar olduğu için aynı koyu zemin bütün alanı kaplayıp baskın * görünüyordu — bu yüzden sayfanın kendi kart/kenarlık tonlarını (--eit-card-alt vb., * tema açık/koyu moda göre otomatik uyum sağlar) kullanıyoruz. * * `-32px` üst kenar boşluğu `.eit-main`'in kendi `padding-top`'unu (32px) iptal eder ki * duvar, Next.js'teki `-mt-8 md:-mt-10 lg:-mt-12` gibi içerik sütununun en tepesine * yasla-sın; `.eit-container` ile SARILMIYOR ki iki yanından da o kapsayıcının 20px'lik * boşluğu kadar taşıp kenara değsin. */ .eit-wall { position: relative; margin: -32px 0 40px; overflow: hidden; background: var(--eit-card-alt); border-radius: 16px; height: min(60vh, 420px); min-height: 260px; } .eit-wall__grid { box-sizing: border-box; display: flex; justify-content: center; height: 100%; gap: 14px; padding: 28px; } /* Next.js `DriftWall`'daki sütun mantığının saf-CSS karşılığı: her sütun kendi içinde dikeyde iki kopya taşır ve `translate3d(0, -50%, 0)`'a kadar akar — kopya, orijinalin tam yerine geldiği an döngü görünmez şekilde başa sarar (klasik "sonsuz marquee" hilesi). */ .eit-wall__col { position: relative; flex: 0 0 130px; height: 100%; overflow: hidden; } .eit-wall__track { display: flex; flex-direction: column; gap: 14px; width: 100%; will-change: transform; animation: eit-wall-drift-up var(--eit-wall-dur, 32s) linear infinite; } .eit-wall__col--down .eit-wall__track { animation-name: eit-wall-drift-down; } @keyframes eit-wall-drift-up { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -50%, 0); } } @keyframes eit-wall-drift-down { from { transform: translate3d(0, -50%, 0); } to { transform: translate3d(0, 0, 0); } } /* Fareyle üzerine gelince veya klavyeyle bir karoya odaklanınca akış durur — hem kullanışlı (bir karoyu tıklamaya çalışırken kayması can sıkıcı) hem de erişilebilir. */ .eit-wall:hover .eit-wall__track, .eit-wall:focus-within .eit-wall__track { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { .eit-wall__track { animation: none; } } .eit-wall__tile { display: flex; flex: 0 0 auto; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 100%; aspect-ratio: 1.4 / 1; padding: 12px; background: var(--eit-card); border: 1px solid var(--eit-border); border-radius: 12px; box-shadow: 0 1px 2px rgb(0 0 0 / 4%); text-align: center; transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease; } .eit-wall__tile:hover, .eit-wall__tile:focus-visible { text-decoration: none; border-color: var(--eit-border-strong); box-shadow: 0 4px 12px rgb(0 0 0 / 8%); } .eit-wall__tile-icon { width: 36px; height: 36px; border-radius: 8px; background: #fff; border: 1px solid var(--eit-border); object-fit: contain; padding: 6px; } .eit-wall__tile-name { max-width: 100%; overflow: hidden; color: var(--eit-fg); font-size: 12px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; } @media (max-width: 620px) { .eit-wall { height: min(46vh, 300px); min-height: 200px; } .eit-wall__grid { gap: 10px; padding: 18px; } .eit-wall__col { flex-basis: 96px; } } /* ---------- Ortak üst başlık ---------- */ /* Fayda kutuları ve adımlar bölümlerinin küçük kırmızı üst başlığı (Next.js: text-[0.6875rem] tracking-[0.2em]). */ .eit-eyebrow { margin: 0 0 4px; font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--eit-primary); } /* ---------- Hero ---------- */ .eit-hero { padding: 64px 0 40px; text-align: center; } .eit-hero__eyebrow { margin: 0 0 12px; font-size: 12px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--eit-primary); } .eit-hero__title { /* Next.js: text-4xl sm:text-5xl lg:text-[3.25rem]/[1.08] font-semibold — h1/h2/h3'ün sitedeki varsayılan kalınlığı (tarayıcı UA `bold`=700) yerine burada 600 kullanılır. */ font-size: clamp(30px, 5vw, 52px); max-width: 20ch; margin: 0 auto 16px; font-weight: 600; line-height: 1.08; } .eit-hero__sub { max-width: 62ch; margin: 0 auto 28px; color: var(--eit-muted); font-size: 18px; } .eit-hero__actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; } .eit-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; max-width: 640px; margin: 44px auto 0; padding: 0; } .eit-stats div { padding: 12px; background: var(--eit-card); border: 1px solid var(--eit-border); border-radius: var(--eit-radius); } .eit-stats dt { font-size: 12px; color: var(--eit-muted); text-transform: uppercase; letter-spacing: 0.04em; } .eit-stats dd { margin: 4px 0 0; font-size: 22px; font-weight: 700; } @media (max-width: 620px) { .eit-stats { grid-template-columns: repeat(2, 1fr); } } /* ---------- Kapanış çağrısı (Next.js landing-close.tsx) ---------- */ .eit-close__card { display: flex; flex-direction: column; gap: 24px; padding: 24px; background: var(--eit-card); border: 1px solid var(--eit-border); border-radius: 16px; } @media (min-width: 768px) { .eit-close__card { flex-direction: row; align-items: flex-end; justify-content: space-between; padding: 32px; } } .eit-close__intro { max-width: 40ch; } .eit-close__intro h2 { margin: 0; font-size: 24px; } .eit-close__intro p { margin: 8px 0 20px; color: var(--eit-secondary); font-size: 15px; line-height: 1.6; } .eit-close__subscribe { width: 100%; } @media (min-width: 768px) { .eit-close__subscribe { max-width: 360px; } } .eit-subscribe__proof { margin: 10px 0 0; color: var(--eit-muted); font-size: 13px; } /* ---------- Kartlar ---------- */ .eit-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 16px; background: var(--eit-card); border: 1px solid var(--eit-border); border-radius: var(--eit-radius); transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease; } .eit-card:hover { border-color: var(--eit-border-strong); box-shadow: var(--eit-shadow); transform: translateY(-1px); } /* * Kartın tamamı tıklanabilir olsun ama başlık bağlantısı da erişilebilir kalsın: * kaplama bağlantı kartı örter, içerideki etiketler z-index ile üstte durur. */ .eit-card__link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; } .eit-card__head { display: flex; align-items: center; gap: 10px; } .eit-card__icon { width: 32px; height: 32px; border-radius: 6px; background: var(--eit-card-alt); object-fit: contain; flex-shrink: 0; } .eit-card__title { font-size: 16px; margin: 0; flex: 1; min-width: 0; } .eit-card__summary { margin: 0; color: var(--eit-muted); font-size: 14px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .eit-card__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: auto; padding-top: 8px; font-size: 12px; color: var(--eit-muted); border-top: 1px solid var(--eit-border); } .eit-card__stars { font-variant-numeric: tabular-nums; } .eit-card__flag { padding: 1px 7px; background: var(--eit-card-alt); border-radius: 999px; } /* ---------- Etiketler ve rozetler ---------- */ .eit-terms { display: flex; flex-wrap: wrap; gap: 6px; position: relative; z-index: 2; } .eit-tag { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; font-size: 12px; color: var(--eit-secondary); background: var(--eit-card-alt); border: 1px solid var(--eit-border); border-radius: 999px; } .eit-tag:hover { text-decoration: none; border-color: var(--eit-border-strong); } .eit-tag--muted { color: var(--eit-muted); } /* * Teknoloji rozetleri: gerçek marka ikonu (ör. Python, React logosu) ya da, ikon yoksa, * adın ilk harfini taşıyan bir rozet — `eit_tech_icon_html()`'in ürettiği iki biçim. * Next.js'teki `BrandLink`'in ikon karosuyla aynı fikir: marka renkleri her temada * okunaklı kalsın diye kutu her zaman beyaz kalır (koyu temada bile). */ .eit-tag--stack { padding-left: 4px; } .eit-tech-icon { width: 16px; height: 16px; flex-shrink: 0; border-radius: 4px; background: #fff; border: 1px solid var(--eit-border); padding: 2px; object-fit: contain; box-sizing: border-box; } .eit-tech-icon--badge { display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; line-height: 1; color: #6b7280; background: #fff; text-transform: uppercase; } .eit-tag__count { color: var(--eit-muted); font-variant-numeric: tabular-nums; } .eit-terms--lg .eit-tag { padding: 6px 14px; font-size: 14px; } /* * Kategori/konu/lisans dizin pill'lerindeki lucide çizgi ikonu (bkz. * template-parts/term-index.php, eit_category_icon_svg()). Teknoloji pill'leri kendi * `.eit-tech-icon` sınıfını kullanır (üstte) — marka logosu farklı bir kutu tedavisi ister. */ .eit-tag__icon { width: 14px; height: 14px; flex: none; opacity: 0.75; } .eit-terms--lg .eit-tag__icon { width: 16px; height: 16px; } /* * Kategoriler dizini (/kategoriler): Next.js `CategoryList`'in 3 sütunlu, noktalı kılavuz * çizgili satır listesi — bkz. template-parts/term-index.php'deki kullanım yorumu. */ .eit-category-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; } @media (max-width: 900px) { .eit-category-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .eit-category-list { grid-template-columns: 1fr; } } .eit-category-list__item { display: flex; align-items: center; gap: 8px; padding: 12px 0; color: var(--eit-fg); text-decoration: none; border-bottom: 1px solid var(--eit-border); min-width: 0; } .eit-category-list__item:hover { text-decoration: none; color: var(--eit-primary); } .eit-category-list__item:hover .eit-category-list__leader { border-color: var(--eit-border-strong); } .eit-category-list__icon { width: 16px; height: 16px; flex: none; opacity: 0.75; } .eit-category-list__name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .eit-category-list__leader { flex: 1 1 auto; min-width: 12px; height: 0; margin: 0 2px; border-bottom: 1px dotted var(--eit-border); align-self: center; } .eit-category-list__count { flex: none; font-size: 13px; color: var(--eit-muted); font-variant-numeric: tabular-nums; } .eit-verify { padding: 2px 8px; font-size: 11px; font-weight: 600; border-radius: 999px; white-space: nowrap; } /* Doğrulama düzeyi arttıkça vurgu artar. */ .eit-verify--communityverified { color: #1d4ed8; background: #dbeafe; } .eit-verify--companyverified { color: #15803d; background: #dcfce7; } .eit-verify--editorverified { color: #fff; background: var(--eit-primary); } .eit-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: 13px; background: var(--eit-card-alt); border: 1px solid var(--eit-border); border-radius: 999px; } .eit-chip--clear { color: var(--eit-primary); background: transparent; border-style: dashed; } /* ---------- Filtreler ---------- */ .eit-filters { margin-bottom: 24px; } .eit-filters__form { display: flex; gap: 8px; flex-wrap: wrap; } .eit-filters__form input[type="search"] { flex: 1; min-width: 220px; } .eit-filters__active { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; } input[type="text"], input[type="url"], input[type="email"], input[type="search"], input[type="number"], select, textarea { width: 100%; padding: 8px 12px; font: inherit; font-size: 14px; color: var(--eit-fg); background: var(--eit-card); border: 1px solid var(--eit-border-strong); border-radius: var(--eit-radius-sm); } select { width: auto; } /* ---------- Sayfa başlıkları ---------- */ /* * Kimlik ikonu kartı: bir favicon/logoyu köşeli, gölgeli bir kutu içine alır — Next.js'teki * `Favicon` bileşeninin (`rounded-md border bg-background p-1`, listelerde kullanılan) daha * büyük karşılığı. Ürün ve firma detay sayfalarının başlığındaki büyük ikon için: önceki * hâli (arka planı sayfayla aynı tonda, kenarlıksız `object-fit:contain`) soluk/tanımsız * duruyordu — kenarlık + gölge + beyaz zemin ikonu net bir "kart" olarak ayırır. */ .eit-icon-card { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--eit-card); border: 1px solid var(--eit-border); border-radius: var(--eit-radius); box-shadow: var(--eit-shadow); overflow: hidden; } .eit-icon-card--lg { width: 72px; height: 72px; padding: 10px; } .eit-icon-card--letter { font-size: 26px; font-weight: 600; color: var(--eit-muted); background: var(--eit-card-alt); } /* Firma profil kartındaki küçük yuvarlak avatar — Next.js `CompanyProfile`'daki `size-10 rounded-full` ile eşleşir (bkz. profile.tsx). Sayfa başlığındaki büyük kare `.eit-icon-card--lg`'den kasıtlı olarak farklı bir görünüm. */ .eit-icon-card--round { width: 40px; height: 40px; padding: 0; border-radius: 999px; font-size: 15px; } .eit-icon-card img { width: 100%; height: 100%; object-fit: contain; } .eit-page-head { margin-bottom: 24px; } .eit-page-head--company { display: flex; align-items: center; gap: 16px; } .eit-company__logo { display: block; } .eit-company__meta { display: flex; gap: 12px; margin: 0; color: var(--eit-muted); font-size: 14px; } .eit-page-title { font-size: 30px; margin: 0 0 8px; } .eit-page-desc, .eit-page-count { margin: 0; color: var(--eit-muted); font-size: 14px; } /* ---------- Ürün detayı ---------- */ .eit-single__head { display: flex; align-items: flex-start; gap: 16px; padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--eit-border); flex-wrap: wrap; } .eit-single__icon { display: block; } .eit-single__identity { flex: 1; min-width: 240px; } .eit-single__title { font-size: 32px; margin: 0 0 6px; } .eit-single__tagline { margin: 0 0 10px; color: var(--eit-muted); font-size: 17px; } .eit-single__badges { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .eit-single__actions { display: flex; gap: 8px; flex-wrap: wrap; } .eit-single__layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: start; } @media (max-width: 900px) { .eit-single__layout { grid-template-columns: 1fr; } } .eit-single__figure { margin: 0 0 24px; border: 1px solid var(--eit-border); border-radius: var(--eit-radius); overflow: hidden; } .eit-single__figure img { display: block; width: 100%; } .eit-panel { padding: 16px; margin-bottom: 16px; background: var(--eit-card); border: 1px solid var(--eit-border); border-radius: var(--eit-radius); } .eit-panel--muted { background: var(--eit-card-alt); } /* reactbits.dev "Lanyard" rozeti (bkz. assets/js/lanyard.js). Panel kutusu/başlığı yok — şeffaf WebGL sahnesi doğrudan kenar çubuğunun üstünde duruyor. */ .eit-lanyard__stage { position: relative; width: 100%; height: 420px; margin-bottom: 16px; touch-action: none; } .eit-lanyard__stage canvas { display: block; width: 100%; height: 100%; } .eit-panel__title { font-size: 14px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--eit-muted); margin: 0 0 12px; } .eit-panel__subtitle { font-size: 13px; color: var(--eit-muted); margin: 16px 0 8px; } .eit-company-profile__head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 15px; } .eit-company-profile__cta { display: flex; justify-content: center; width: 100%; margin-top: 16px; box-sizing: border-box; } .eit-panel p { margin: 0 0 12px; font-size: 14px; color: var(--eit-muted); } .eit-specs { margin: 0; font-size: 14px; } .eit-specs div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--eit-border); } .eit-specs div:last-child { border-bottom: 0; } .eit-specs dt { color: var(--eit-muted); } .eit-specs dd { margin: 0; font-weight: 500; text-align: right; } .eit-links { margin: 0; padding-left: 18px; font-size: 14px; } .eit-resources-list { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--eit-border); } .eit-resources-list ul { margin: 0; padding: 0; list-style: none; } .eit-resources-list li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--eit-border); } .eit-gallery { margin-top: 32px; } .eit-gallery figure { margin: 0; } /* ---------- Katkı çağrısı + paylaşım ---------- */ /* Giriş yapılmamışsa gösterilen tek satırlık katkı daveti — Next.js'teki `ToolContributionActions`'ın oturum açılmamış hâliyle aynı metin. */ .eit-contribute-prompt { margin: 24px 0 0; font-size: 14px; color: var(--eit-muted); } .eit-contribute-prompt a { margin-left: 4px; font-weight: 500; color: var(--eit-fg); } .eit-contribute-prompt a:hover { text-decoration: underline; } /* Paylaşım satırı — Next.js'teki `ShareButtons` ile aynı düzen: sol tarafta bağlantı kopyalama, ayraçtan sonra marka renkli paylaşım ikonları. */ .eit-share { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; width: fit-content; max-width: 100%; margin: 12px 0 0; padding: 4px; background: var(--eit-bg); border: 1px solid var(--eit-border); border-radius: var(--eit-radius); } .eit-share__copy { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; font: inherit; font-size: 12px; font-weight: 500; color: var(--eit-secondary); background: none; border: 0; border-radius: 4px; cursor: pointer; } .eit-share__copy:hover { color: var(--eit-fg); } .eit-share__kbd { display: inline-flex; padding: 1px 5px; font: inherit; font-size: 11px; font-weight: 500; color: inherit; background: color-mix(in srgb, var(--eit-fg) 10%, transparent); border-radius: 4px; } .eit-share__divider { width: 1px; height: 16px; margin: 0 4px; background: var(--eit-border); flex-shrink: 0; } .eit-share__label { margin: 0 2px; font-size: 11px; font-weight: 500; color: var(--eit-muted); } .eit-share__icon { display: inline-flex; align-items: center; justify-content: center; padding: 4px; border-radius: 4px; opacity: 0.8; } .eit-share__icon:hover { text-decoration: none; opacity: 1; } .eit-share__icon svg { width: 20px; height: 20px; } /* Marka renkleri; X'in siyah amblemi koyu zeminde kaybolduğu için orada beyaza döner. */ .eit-share__icon--x { color: #000000; } @media (prefers-color-scheme: dark) { :root:not(.eit-light) .eit-share__icon--x { color: #ffffff; } } :root.eit-dark .eit-share__icon--x { color: #ffffff; } .eit-share__icon--facebook { color: #1877f2; } .eit-share__icon--linkedin { color: #0a66c2; } .eit-share__icon--hackernews { color: #ff6600; } .eit-share__icon--reddit { color: #ff4500; } .eit-share__icon--whatsapp { color: #25d366; } /* ---------- Öne çıkan projeler (kenar çubuğu) ---------- */ .eit-featured__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; } .eit-featured__item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px dashed var(--eit-border); } .eit-featured__item:last-child { border-bottom: 0; } .eit-featured__link { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; font-weight: 500; color: var(--eit-fg); } .eit-featured__link:hover { text-decoration: none; color: var(--eit-primary); } .eit-featured__icon { width: 16px; height: 16px; flex-shrink: 0; border-radius: 4px; object-fit: contain; } .eit-featured__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .eit-featured__stars { flex-shrink: 0; font-size: 11px; color: var(--eit-muted); font-variant-numeric: tabular-nums; } /* ---------- Metin içeriği ---------- */ .eit-prose { max-width: 72ch; font-size: 16px; line-height: 1.75; } .eit-prose h2 { font-size: 22px; margin-top: 1.6em; } .eit-prose h3 { font-size: 18px; margin-top: 1.4em; } .eit-prose a { color: var(--eit-primary); text-decoration: underline; } .eit-prose img { border-radius: var(--eit-radius); } .eit-prose pre { padding: 14px; overflow-x: auto; background: var(--eit-card-alt); border-radius: var(--eit-radius-sm); } .eit-prose blockquote { margin: 1.5em 0; padding-left: 16px; border-left: 3px solid var(--eit-primary); color: var(--eit-muted); } /* ---------- Listeler ---------- */ .eit-company-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--eit-border); } .eit-company-list__item { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--eit-border); } .eit-postlist__item { padding: 20px 0; border-bottom: 1px solid var(--eit-border); } .eit-postlist__item h2 { font-size: 20px; margin: 0 0 4px; } .eit-muted { color: var(--eit-muted); font-size: 14px; } .eit-empty { padding: 40px 20px; text-align: center; color: var(--eit-muted); background: var(--eit-card); border: 1px dashed var(--eit-border-strong); border-radius: var(--eit-radius); } .eit-empty--lg { padding: 80px 20px; } /* ---------- Sayfalama ---------- */ .eit-pagination ul { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; margin: 32px 0 0; padding: 0; list-style: none; } .eit-pagination a, .eit-pagination span { display: inline-block; padding: 6px 12px; font-size: 14px; border: 1px solid var(--eit-border); border-radius: var(--eit-radius-sm); background: var(--eit-card); } .eit-pagination .current { color: #fff; background: var(--eit-primary); border-color: var(--eit-primary); } /* ---------- Form ---------- */ .eit-form fieldset { margin: 0 0 24px; padding: 20px; border: 1px solid var(--eit-border); border-radius: var(--eit-radius); background: var(--eit-card); } .eit-form legend { padding: 0 8px; font-weight: 600; font-size: 14px; } .eit-field { margin: 0 0 18px; } .eit-field label { display: block; margin-bottom: 5px; font-size: 14px; font-weight: 500; } .eit-hint { display: block; margin-top: 4px; font-size: 13px; color: var(--eit-muted); } .eit-req { color: var(--eit-primary); } /* Bal küpü alanı: ekrandan tamamen çıkarılır ama DOM'da kalır. */ .eit-hp { position: absolute; left: -9999px; opacity: 0; pointer-events: none; } .eit-note { padding: 12px 16px; margin-bottom: 20px; font-size: 14px; border-radius: var(--eit-radius-sm); background: var(--eit-card-alt); border: 1px solid var(--eit-border); } .eit-note p { margin: 6px 0 0; } .eit-note--ok { border-color: var(--eit-success); color: var(--eit-success); } .eit-note--error { border-color: var(--eit-error); color: var(--eit-error); } /* ---------- Arama paleti ---------- */ .eit-palette[hidden] { display: none; } .eit-palette { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; } .eit-palette__backdrop { position: absolute; inset: 0; background: rgb(0 0 0 / 45%); } .eit-palette__panel { position: relative; width: 100%; max-width: 560px; background: var(--eit-card); border: 1px solid var(--eit-border-strong); border-radius: var(--eit-radius); box-shadow: 0 24px 60px rgb(0 0 0 / 30%); overflow: hidden; } .eit-palette__form { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--eit-border); } .eit-palette__input { border: 0; font-size: 16px; background: transparent; } .eit-palette__input:focus { outline: none; } .eit-palette__close { font-size: 20px; line-height: 1; color: var(--eit-muted); background: none; border: 0; cursor: pointer; } .eit-palette__results { max-height: 50vh; overflow-y: auto; } .eit-palette__group { padding: 8px 12px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--eit-muted); } .eit-palette__item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; font-size: 14px; } .eit-palette__item:hover, .eit-palette__item:focus { text-decoration: none; background: var(--eit-card-alt); } .eit-palette__item small { color: var(--eit-muted); } .eit-palette__empty { padding: 20px 12px; text-align: center; color: var(--eit-muted); font-size: 14px; } /* ---------- Alt bilgi ---------- */ /* * Marka bloğu (logo + slogan + CTA) solda, "Katalog" / "Proje" / "Bağlantı" bağlantı * sütunları sağda (4 kolon >=1024px, 2x2 kolon >=768px, tek kolon altında), ardından * bir ayraçla ayrılan telif/rozet satırı. Sayfa arka planından ayrı bir kart rengi yok * (Next.js tarafında da `