/* ========================================================================== ATABASCH — "SYNTHESIS" (atabasch-portfolio-8) Full Stack Developer Portfolio — Design System & Global Stylesheet Görsel yön: Editorial Engineering + çerçeveli bölümler — beyaz sayfa, sert grid, 1px ince çizgiler, siyaha yakın mürekkep, cerrahi turuncu vurgu (#FF7116), keskin köşeler. KURALLAR: - Yarıçap: yüzeyler var(--r)=6px, küçük kontroller var(--r-sm)=3px. (İstisna: ≤8px işaret noktaları, pulse-dot ve özel imleç — daire olabilir.) - Her renk bir custom property üzerinden çözülür. Dark mode AKTİF: dosya sonundaki html[data-theme="dark"] bloğu (NOVA paleti) tokenları override eder; header'daki .theme-toggle ile açılır, localStorage'da kalır. - Fontlar: Inter (gövde) / Space Grotesk (başlık) / JetBrains Mono (mono) — içinde Google Fonts ile yüklenir (@import YOK). - Progressive enhancement: .no-js/.js sınıf takası, reveal'lar JS'siz görünür kalır, prefers-reduced-motion tam kill-switch. İÇİNDEKİLER 01 — TOKENS 12 — FRAME (imza bileşen) 02 — RESET / BASE 13 — HİZMET KARTLARI (svc-*) 03 — TİPOGRAFİ 14 — PROJE KARTLARI (work-*) 04 — LAYOUT 15 — TECH STACK BANDI (stack-*) 05 — BUTONLAR 16 — SÜREÇ (keycap process) 06 — TAG / CHIP / BADGE 17 — BLOG ÇERÇEVESİ (post-trio/rows) 07 — İKON UTILITY 18 — BLOG KARTLARI + SIDEBAR 08 — HEADER / NAV 19 — FAQ ACCORDION 09 — HERO (fold-lock) 20 — PAGE HERO / BREADCRUMB 10 — TERMİNAL (term) 21 — PROJE DETAY / PANELLER 11 — TECH TICKER (tek satır) 22 — SKILL GRID / LEDGER 23 — İLETİŞİM + FORMLAR 26 — FOOTER (CTA birleşik) 24 — ARTICLE / PROSE / TOC 27 — REVEAL / CURSOR / SPOT 25 — 404 28 — REDUCED MOTION / PRINT 29 — DARK THEME İSKELETİ (yorum) ========================================================================== */ /* -------------------------------------------------------------------------- 01 — TOKENS -------------------------------------------------------------------------- */ :root{ /* Surfaces (light) — hafif soğuk zemin (tema-3 esintisi), kartlar saf beyaz */ --bg:#F6F7FA; --bg-soft:#ECEEF3; --surface:#FFFFFF; /* Ink */ --ink:#0B0B0B; --ink-2:#171717; --ink-3:#232323; --muted:#666666; --faint:#70757F; /* faint: küçük metinde WCAG AA için koyulaştırıldı */ /* Lines */ --line:#E4E7ED; --line-dark:#262626; /* Brand */ --accent:#FF7116; --accent-600:#E4600C; --accent-050:#FFF3EB; --accent-border:#FFD5B8; /* Dark band surfaces (sections that are dark INSIDE the light theme) */ --dark:#0B0B0B; --dark-2:#171717; --on-dark:#FFFFFF; --on-dark-muted:#A9A9A9; --on-dark-faint:#7A7A7A; --on-dark-tag:#D5D5D5; /* Status */ --ok:#22C55E; --err:#DC2626; /* Type */ --font-display:'Space Grotesk','Segoe UI',system-ui,sans-serif; --font-body:'Inter','Segoe UI',system-ui,sans-serif; --font-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace; --fs-display-1:clamp(2.5rem,5.2vw,4.75rem); --fs-display-2:clamp(2.125rem,4.2vw,3.75rem); --fs-display-3:clamp(1.75rem,3vw,2.75rem); --fs-h4:clamp(1.25rem,1.8vw,1.5rem); --fs-h5:clamp(1.0625rem,1.4vw,1.25rem); --fs-body:clamp(1rem,.98rem + .15vw,1.125rem); --fs-small:.9375rem; --fs-xs:.8125rem; --lh-tight:1.02; --lh-snug:1.15; --lh-body:1.7; /* Layout */ --container:1320px; --narrow:940px; --reading:760px; --gutter:clamp(20px,5vw,64px); --section-y:clamp(52px,6vw,96px); --header-h:80px; /* Shape & elevation — az ama hissedilir yumuşaklık: yüzeyler 6px, küçük kontroller 3px */ --r:6px; --r-sm:3px; --shadow-sm:0 1px 2px rgba(0,0,0,.05); --shadow-md:0 12px 32px -18px rgba(0,0,0,.35); --shadow-lg:0 28px 70px -40px rgba(0,0,0,.5); /* Motion */ --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1); --dur:.38s; } /* Bileşen token uzantıları — her renk token üzerinden kuralı için. (Dark iskelet bunları da override edebilir.) */ :root{ --on-dark-link:#B8B8B8; --header-bg:rgba(255,255,255,.86); --header-bg-solid:rgba(255,255,255,.96); /* Durum tonları (form alert / callout) */ --ok-050:#F0FDF4; --ok-border:#BBF7D0; --ok-ink:#14532D; --err-050:#FEF2F2; --err-border:#FECACA; --err-ink:#7F1D1D; --info-050:#F0F7FF; --info-border:#CFE3FB; --info-ink:#2563EB; --warn-050:#FFFBEB; --warn-border:#FDE68A; --warn-ink:#B45309; /* Kod bloğu sözdizimi renkleri */ --syn-c:#6B7280; --syn-k:var(--accent); --syn-s:#8FD98F; --syn-f:#93C5FD; --syn-n:#E5C07B; --syn-v:#D0D0D0; --code-bar:#141414; --code-bar-line:#242424; --code-text:#E4E4E4; /* Terminal vurgu renkleri */ --term-key:#A78BFA; --term-ok:#4ADE80; } /* -------------------------------------------------------------------------- 02 — RESET / BASE -------------------------------------------------------------------------- */ *, *::before, *::after{ box-sizing:border-box; } *{ margin:0; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 24px); color-scheme:light; overflow-x:clip; } body{ font:400 var(--fs-body)/var(--lh-body) var(--font-body); background:var(--bg); color:var(--ink); font-synthesis-weight:none; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } body.is-locked{ overflow:hidden; } img, svg, video, canvas{ display:block; max-width:100%; height:auto; } /* WebP/AVIF sunabilmek için 'i ile sarar; `contents` picture'ı yerleşimin dışında tutar, böylece `.post-card__media img` gibi kurallar (height:100%, object-fit, :first-of-type) aynen çalışır. */ picture{ display:contents; } input, button, textarea, select{ font:inherit; color:inherit; } button{ background:none; border:0; padding:0; cursor:pointer; } ul, ol{ padding:0; list-style:none; } a{ color:inherit; text-decoration:none; } :focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:var(--r); } ::selection{ background:var(--accent); color:#fff; } hr{ border:0; border-top:1px solid var(--line); margin:0; } /* Skip link */ .skip-link{ position:absolute; left:16px; top:-80px; z-index:999; background:var(--dark); color:var(--on-dark); padding:12px 20px; font-size:var(--fs-xs); font-family:var(--font-display); letter-spacing:.1em; text-transform:uppercase; border-radius:var(--r); transition:top .2s var(--ease); } .skip-link:focus{ top:16px; } .visually-hidden{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } /* -------------------------------------------------------------------------- 03 — TİPOGRAFİ -------------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6{ font-family:var(--font-display); font-weight:600; line-height:var(--lh-snug); letter-spacing:-.025em; text-wrap:balance; } .display-1{ font-size:var(--fs-display-1); line-height:var(--lh-tight); letter-spacing:-.04em; font-weight:600; } .display-2{ font-size:var(--fs-display-2); line-height:1.05; letter-spacing:-.035em; } .display-3{ font-size:var(--fs-display-3); line-height:1.1; letter-spacing:-.03em; } .h4{ font-size:var(--fs-h4); letter-spacing:-.02em; } .h5{ font-size:var(--fs-h5); letter-spacing:-.015em; } .lead{ font-size:clamp(1.0625rem,1.35vw,1.3125rem); line-height:1.65; color:var(--muted); max-width:58ch; } .text-muted{ color:var(--muted); } .text-accent{ color:var(--accent); } .text-balance{ text-wrap:balance; } .mono{ font-family:var(--font-mono); font-size:var(--fs-xs); letter-spacing:.06em; } /* Eyebrow — bölüm üstü teknik etiket */ .eyebrow{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-display); font-size:.75rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); line-height:1; } .eyebrow::before{ content:""; width:22px; height:1px; background:var(--accent); flex:none; } .eyebrow--dot::before{ width:7px; height:7px; border-radius:50%; background:var(--accent); /* ≤8px işaret noktası — daire serbest */ } .eyebrow--plain::before{ display:none; } .eyebrow--on-dark{ color:var(--on-dark-muted); } .eyebrow .idx{ color:var(--accent); font-variant-numeric:tabular-nums; } /* Vurgulanmış kelime */ .hl{ color:var(--accent); } .cat-label{ font-family:var(--font-display); font-size:.6875rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); } /* -------------------------------------------------------------------------- 04 — LAYOUT -------------------------------------------------------------------------- */ .container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); } .container--narrow{ max-width:var(--narrow); } .container--wide{ max-width:1600px; } .section{ padding-block:var(--section-y); position:relative; } .section--tight{ padding-block:clamp(36px,4vw,60px); } .section--flush-top{ padding-top:0; } .section--flush-bottom{ padding-bottom:0; } .section--soft{ background:var(--bg-soft); } .section--dark{ background:var(--dark); color:var(--on-dark); } .section--dark .lead, .section--dark .text-muted{ color:var(--on-dark-muted); } .section--dark .eyebrow{ color:var(--on-dark-muted); } .divider{ height:1px; background:var(--line); } .section--dark .divider{ background:var(--line-dark); } /* Section header — solda başlık, sağda açıklama */ .section-head{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(24px,4vw,72px); align-items:end; padding-bottom:clamp(32px,4vw,56px); } .section-head__title{ margin-top:18px; } .section-head__aside{ padding-bottom:6px; } .section-head--center{ grid-template-columns:1fr; text-align:center; justify-items:center; max-width:760px; margin-inline:auto; } .section-head--stack{ grid-template-columns:1fr; align-items:start; } @media (max-width:860px){ .section-head{ grid-template-columns:1fr; align-items:start; } .section-head__aside{ padding-bottom:0; } } /* -------------------------------------------------------------------------- 05 — BUTONLAR -------------------------------------------------------------------------- */ .btn{ --btn-bg:var(--ink); --btn-fg:var(--bg); --btn-bd:var(--ink); display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:16px 26px; background:var(--btn-bg); color:var(--btn-fg); border:1px solid var(--btn-bd); border-radius:var(--r-sm); font-family:var(--font-display); font-size:.9375rem; font-weight:500; letter-spacing:-.01em; line-height:1; text-align:center; position:relative; overflow:hidden; transition:background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform .2s var(--ease); cursor:pointer; } .btn:hover{ --btn-bg:var(--accent); --btn-bd:var(--accent); --btn-fg:#fff; } .btn:active{ transform:translateY(1px); } .btn--accent{ --btn-bg:var(--accent); --btn-bd:var(--accent); --btn-fg:#fff; } .btn--accent:hover{ --btn-bg:var(--ink); --btn-bd:var(--ink); --btn-fg:var(--bg); } .btn--outline{ --btn-bg:transparent; --btn-fg:var(--ink); --btn-bd:var(--ink); } .btn--outline:hover{ --btn-bg:var(--ink); --btn-fg:var(--bg); --btn-bd:var(--ink); } .btn--ghost-light{ --btn-bg:transparent; --btn-fg:var(--on-dark); --btn-bd:rgba(255,255,255,.32); } .btn--ghost-light:hover{ --btn-bg:var(--on-dark); --btn-fg:var(--ink); --btn-bd:var(--on-dark); } .btn--light{ --btn-bg:var(--on-dark); --btn-fg:var(--ink); --btn-bd:var(--on-dark); } .btn--light:hover{ --btn-bg:var(--accent); --btn-fg:#fff; --btn-bd:var(--accent); } .btn--sm{ padding:12px 18px; font-size:.875rem; } .btn--lg{ padding:19px 32px; font-size:1rem; } .btn--block{ display:flex; width:100%; } .btn .arw{ transition:transform var(--dur) var(--ease); } .btn:hover .arw{ transform:translateX(4px); } .btn.is-loading{ pointer-events:none; opacity:.8; } .btn.is-loading .btn__label{ opacity:.6; } .spinner{ width:15px; height:15px; border-radius:50%; border:2px solid rgba(255,255,255,.35); border-top-color:currentColor; animation:spin .7s linear infinite; display:none; } .btn.is-loading .spinner{ display:block; } @keyframes spin{ to{ transform:rotate(360deg); } } /* Text button — "Metin →" */ .tbtn{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:500; font-size:.9375rem; color:var(--ink); padding-bottom:4px; border-bottom:1px solid var(--line); transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .tbtn .arw{ transition:transform var(--dur) var(--ease); } .tbtn:hover{ color:var(--accent); border-color:var(--accent); } .tbtn:hover .arw{ transform:translateX(5px); } .tbtn--light{ color:var(--on-dark); border-color:rgba(255,255,255,.24); } .tbtn--light:hover{ color:var(--accent); border-color:var(--accent); } .tbtn--accent{ color:var(--accent); border-color:rgba(255,113,22,.4); } .btn-row{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; } /* -------------------------------------------------------------------------- 06 — TAG / CHIP / BADGE -------------------------------------------------------------------------- */ .tag{ display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border:1px solid var(--line); border-radius:var(--r-sm); font-family:var(--font-mono); font-size:.75rem; letter-spacing:.02em; color:var(--ink-2); background:var(--surface); transition:border-color var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease); white-space:nowrap; } a.tag:hover{ border-color:var(--accent); color:var(--accent); } .tag--solid{ background:var(--bg-soft); border-color:transparent; } .tag--dark{ background:transparent; border-color:var(--line-dark); color:var(--on-dark-tag); } a.tag--dark:hover{ border-color:var(--accent); color:var(--accent); } .tag--accent{ border-color:var(--accent); color:var(--accent); background:var(--accent-050); } .tag-list{ display:flex; flex-wrap:wrap; gap:8px; } /* Chip — skills band rozeti (marquee içinde ve serbest kullanım) */ .chip{ display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface); padding:5px 12px; font:500 .75rem var(--font-mono); color:var(--muted); white-space:nowrap; } /* Badge — gri teknoloji rozeti, tek renk logolu (hakkımda skill kartları) */ .badge{ display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--bg-soft); padding:5px 10px; font:500 .75rem var(--font-mono); color:var(--muted); white-space:nowrap; } .badge__logo{ width:13px; height:13px; fill:currentColor; flex-shrink:0; opacity:.75; } .badge:hover{ border-color:var(--faint); color:var(--ink-3); } /* -------------------------------------------------------------------------- 07 — İKON UTILITY -------------------------------------------------------------------------- */ .ico{ width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; flex:none; } .ico-lg{ width:22px; height:22px; } .arw{ width:15px; height:15px; } /* -------------------------------------------------------------------------- 08 — HEADER / NAVIGATION -------------------------------------------------------------------------- */ .site-header{ position:sticky; top:0; z-index:100; background:var(--header-bg); backdrop-filter:saturate(1.6) blur(14px); -webkit-backdrop-filter:saturate(1.6) blur(14px); border-bottom:1px solid transparent; transition:border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease); } .site-header.is-stuck{ border-bottom-color:var(--line); background:var(--header-bg-solid); box-shadow:0 1px 20px -8px rgba(0,0,0,.18); } .header-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; height:var(--header-h); transition:height .3s var(--ease); } .site-header.is-stuck .header-inner{ height:64px; } /* Logo */ .brand{ display:inline-flex; align-items:center; gap:12px; flex:none; } .brand__mark{ width:38px; height:38px; flex:none; display:grid; place-items:center; background:var(--ink); color:var(--bg); border-radius:var(--r); font-family:var(--font-display); font-weight:700; font-size:1.0625rem; letter-spacing:-.03em; position:relative; transition:background var(--dur) var(--ease); } .brand__mark::after{ content:""; position:absolute; right:5px; bottom:5px; width:5px; height:5px; background:var(--accent); border-radius:1px; /* 5px köşe noktası */ } .brand:hover .brand__mark{ background:var(--accent); color:#fff; } .brand:hover .brand__mark::after{ background:#fff; } .brand__text{ display:flex; flex-direction:column; line-height:1.1; } .brand__name{ font-family:var(--font-display); font-weight:600; font-size:1.0625rem; letter-spacing:-.03em; color:var(--ink); } .brand__role{ font-size:.625rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:500; } /* Nav */ .nav{ display:flex; align-items:center; gap:clamp(6px,1.4vw,22px); } .nav__link{ position:relative; font-size:.9375rem; font-weight:500; color:var(--ink-2); padding:8px 2px; transition:color var(--dur) var(--ease); } .nav__link::after{ content:""; position:absolute; left:0; right:100%; bottom:2px; height:1.5px; background:var(--accent); transition:right var(--dur) var(--ease); } .nav__link:hover{ color:var(--ink); } .nav__link:hover::after{ right:0; } .nav__link[aria-current="page"]{ color:var(--accent); } .nav__link[aria-current="page"]::after{ right:0; } .header-cta{ display:flex; align-items:center; gap:12px; flex:none; } /* Tema düğmesi (light ⇄ dark) — her genişlikte görünür */ .theme-toggle{ display:grid; place-items:center; width:40px; height:40px; flex:none; border:1px solid var(--line); border-radius:var(--r-sm); background:transparent; color:var(--muted); cursor:pointer; transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .theme-toggle:hover{ color:var(--accent); border-color:var(--accent); } .theme-toggle .ico{ width:17px; height:17px; } .theme-toggle__sun{ display:none; } html[data-theme="dark"] .theme-toggle__sun{ display:block; } html[data-theme="dark"] .theme-toggle__moon{ display:none; } .no-js .theme-toggle{ display:none; } /* Hamburger */ .nav-toggle{ display:none; width:46px; height:46px; border:1px solid var(--line); border-radius:var(--r); place-items:center; transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease); } .nav-toggle:hover{ border-color:var(--ink); } .nav-toggle__bars{ display:block; width:18px; height:10px; position:relative; } .nav-toggle__bars span{ position:absolute; left:0; height:1.5px; background:var(--ink); border-radius:var(--r); transition:transform .3s var(--ease), width .3s var(--ease), opacity .2s; } .nav-toggle__bars span:nth-child(1){ top:0; width:18px; } .nav-toggle__bars span:nth-child(2){ bottom:0; width:12px; } .nav-toggle:hover .nav-toggle__bars span:nth-child(2){ width:18px; } .nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1){ top:4px; transform:rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2){ bottom:4.5px; width:18px; transform:rotate(-45deg); } /* Mobil menü */ .mobile-nav{ position:fixed; inset:0; z-index:99; background:var(--bg); padding-top:var(--header-h); display:flex; flex-direction:column; opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity .32s var(--ease), transform .32s var(--ease), visibility .32s; overflow-y:auto; } .mobile-nav.is-open{ opacity:1; visibility:visible; transform:none; } .mobile-nav__inner{ padding:24px var(--gutter) 48px; display:flex; flex-direction:column; gap:32px; flex:1; } .mobile-nav__list{ display:flex; flex-direction:column; } .mobile-nav__list li{ border-bottom:1px solid var(--line); } .mobile-nav__link{ display:flex; align-items:baseline; gap:14px; padding:18px 0; font-family:var(--font-display); font-size:1.75rem; font-weight:500; letter-spacing:-.03em; } .mobile-nav__link .num{ font-size:.6875rem; color:var(--accent); font-family:var(--font-mono); letter-spacing:.1em; } .mobile-nav__link[aria-current="page"]{ color:var(--accent); } .mobile-nav__foot{ display:flex; flex-direction:column; gap:20px; margin-top:auto; } .mobile-nav__meta{ display:flex; flex-direction:column; gap:4px; font-size:var(--fs-small); color:var(--muted); } .mobile-nav__meta a:hover{ color:var(--accent); } @media (max-width:1080px){ .nav, .header-cta .btn{ display:none; } .nav-toggle{ display:grid; } } /* -------------------------------------------------------------------------- 09 — HERO (Anasayfa — fold-lock: skills band ilk ekranın dibine yapışır) -------------------------------------------------------------------------- */ .hero{ display:flex; flex-direction:column; min-height:calc(100svh - var(--header-h)); } .hero__wrap{ flex:1; display:flex; flex-direction:column; padding-top:clamp(40px,4.5vw,72px); } .hero__grid{ display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); gap:clamp(32px,4vw,72px); align-items:center; padding-bottom:clamp(40px,4.5vw,72px); } .hero__copy{ min-width:0; } .hero__title{ margin:22px 0 26px; hyphens:none; overflow-wrap:break-word; } .hero__desc{ margin-bottom:34px; } .hero__visual{ position:relative; min-width:0; } /* Birleşik borderlı istatistik kutusu (tema-1'in cetvel hissi, tek çerçevede) */ .hero__stats{ margin-top:auto; margin-bottom:clamp(28px,3.2vw,48px); display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line); border-radius:var(--r); background:var(--surface); overflow:hidden; } .hero__stat{ padding:clamp(18px,2vw,26px) clamp(18px,2.2vw,30px); } .hero__stat + .hero__stat{ border-left:1px solid var(--line); } .hero__stat dt{ font:500 .6875rem var(--font-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--faint); } .hero__stat dd{ margin-top:6px; font:600 clamp(1.25rem,2vw,1.625rem)/1.1 var(--font-display); } .hero__stat em{ font-style:normal; color:var(--accent); } .hero__status{ display:flex; align-items:center; gap:10px; margin-top:14px; font-size:var(--fs-xs); color:var(--muted); } .hero__status strong{ font-weight:600; color:var(--ink); } .pulse-dot{ width:8px; height:8px; border-radius:50%; background:var(--ok); flex:none; box-shadow:0 0 0 4px rgba(34,197,94,.16); animation:pulse 2.4s var(--ease) infinite; } @keyframes pulse{ 50%{ box-shadow:0 0 0 7px rgba(34,197,94,.06); } } @media (max-width:900px){ .hero{ min-height:0; } .hero__grid{ grid-template-columns:1fr; } } @media (max-width:560px){ .hero__stats{ grid-template-columns:1fr; } .hero__stat + .hero__stat{ border-left:0; border-top:1px solid var(--line); } } /* -------------------------------------------------------------------------- 10 — TERMİNAL (.term — hero görseli / .term--mini footer CTA) -------------------------------------------------------------------------- */ .term{ border:1px solid var(--line-dark); border-radius:var(--r); background:var(--dark); box-shadow:var(--shadow-md); overflow:hidden; } .term__bar{ display:flex; align-items:center; gap:10px; height:34px; padding-inline:12px; border-bottom:1px solid rgba(255,255,255,.08); } .term__dots{ display:inline-flex; gap:6px; } .term__dots i{ width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.18); } .term__name{ font:400 .6875rem var(--font-mono); color:rgba(255,255,255,.45); } .term__body{ padding:16px 14px; font:400 .78rem/1.7 var(--font-mono); } .term__body p + p{ margin-top:8px; } .term__ps{ color:var(--ok); } .term__cmd{ color:var(--on-dark); } .term__out{ color:rgba(255,255,255,.68); } .term__key{ color:var(--term-key); } .term__ok{ color:var(--term-ok); } .term__link{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; } .term__caret{ display:inline-block; width:8px; height:14px; margin-left:6px; vertical-align:-2px; background:rgba(255,255,255,.8); animation:caret 1.05s steps(1) infinite; } @keyframes caret{ 0%,49%{ opacity:1; } 50%,100%{ opacity:0; } } .term--mini .term__body{ padding:14px 14px; font-size:.8125rem; } /* -------------------------------------------------------------------------- 11 — TECH TICKER (tek satır, hairline'lı açık bant — tema-4 ciddiyeti) -------------------------------------------------------------------------- */ .ticker{ border-block:1px solid var(--line); background:rgba(255,255,255,.65); padding-block:14px; overflow:hidden; } .ticker__mask{ -webkit-mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent); mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent); } .ticker__track{ display:flex; width:max-content; align-items:center; animation:marquee 44s linear infinite; } .ticker__track:hover{ animation-play-state:paused; } .ticker__group{ display:flex; align-items:center; flex-shrink:0; } .ticker__group span{ font:500 var(--fs-xs) var(--font-mono); color:var(--muted); white-space:nowrap; } .ticker__group i{ font-style:normal; font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--accent); margin-inline:18px; opacity:.7; } @keyframes marquee{ to{ transform:translate3d(-50%,0,0); } } @keyframes marquee-rev{ from{ transform:translate3d(-50%,0,0); } to{ transform:none; } } /* -------------------------------------------------------------------------- 12 — FRAME (imza bileşen — düz çerçeve, pencere barı YOK) İç içerik dış margin kullanmaz; içerideki grid'ler hairline böler, her kenar çerçeveye değer. -------------------------------------------------------------------------- */ .frame{ border:1px solid var(--line); border-radius:var(--r); background:var(--surface); } .frame__head{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:clamp(20px,3vw,56px); align-items:end; padding:clamp(24px,2.6vw,40px) clamp(20px,2.4vw,36px); border-bottom:1px solid var(--line); } .frame__title{ margin-top:10px; } .frame__lead{ font-size:var(--fs-small); color:var(--muted); line-height:1.65; max-width:44ch; justify-self:end; align-self:end; } .frame__body{ padding:clamp(24px,2.6vw,40px) clamp(20px,2.4vw,36px); } .frame__foot{ border-top:1px solid var(--line); padding:18px clamp(20px,2.4vw,36px); } @media (max-width:860px){ .frame__head{ grid-template-columns:1fr; } .frame__lead{ justify-self:start; } } /* -------------------------------------------------------------------------- 13 — HİZMET KARTLARI -------------------------------------------------------------------------- */ .svc-grid{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); } .svc-card{ display:flex; flex-direction:column; padding:clamp(28px,2.4vw,38px) clamp(20px,1.8vw,30px) clamp(28px,2.4vw,34px); border-bottom:1px solid var(--line); border-right:1px solid var(--line); position:relative; transition:background var(--dur) var(--ease); min-height:320px; } .svc-grid > .svc-card:nth-child(4n){ border-right:0; } .svc-card::before{ content:""; position:absolute; left:0; right:0; top:-1px; height:2px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform var(--dur) var(--ease); } .svc-card:hover{ background:var(--bg-soft); } .svc-card:hover::before{ transform:scaleX(1); } .svc-card__num{ font-family:var(--font-mono); font-size:.75rem; letter-spacing:.1em; color:var(--muted); margin-bottom:26px; } .svc-card:hover .svc-card__num{ color:var(--accent); } .svc-card__icon{ width:40px; height:40px; margin-bottom:20px; color:var(--ink); transition:color var(--dur) var(--ease), transform var(--dur) var(--ease); } .svc-card:hover .svc-card__icon{ color:var(--accent); transform:translateY(-2px); } .svc-card__title{ font-size:1.1875rem; letter-spacing:-.02em; margin-bottom:12px; } .svc-card__desc{ font-size:var(--fs-small); color:var(--muted); line-height:1.6; } .svc-card__link{ margin-top:auto; padding-top:24px; display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display); font-size:.875rem; font-weight:500; color:var(--ink); } .svc-card:hover .svc-card__link{ color:var(--accent); } .svc-card:hover .svc-card__link .arw{ transform:translateX(4px); } .svc-card__link .arw{ transition:transform var(--dur) var(--ease); } .svc-card::after{ content:""; position:absolute; inset:0; } @media (max-width:1080px){ .svc-grid{ grid-template-columns:repeat(2,1fr); } .svc-grid > .svc-card:nth-child(4n){ border-right:1px solid var(--line); } .svc-grid > .svc-card:nth-child(2n){ border-right:0; } } @media (max-width:620px){ .svc-grid{ grid-template-columns:1fr; } .svc-grid > .svc-card{ border-right:0 !important; min-height:0; } } /* Frame içinde svc-grid: çerçeve kenarları dış çizgileri sağlar, hücreler yalnızca aralarındaki hairline'ları taşır. */ .frame .svc-grid{ border-top:0; } .frame .svc-grid .svc-card{ border-bottom:0; } @media (max-width:1080px){ /* 2 sütun: ilk satır hücreleri alt çizgi alır */ .frame .svc-grid .svc-card:nth-child(-n+2){ border-bottom:1px solid var(--line); } } @media (max-width:620px){ /* 1 sütun: son hücre hariç hepsi alt çizgi alır */ .frame .svc-grid .svc-card{ border-bottom:1px solid var(--line); } .frame .svc-grid .svc-card:last-child{ border-bottom:0; } } /* Hizmetler arşivi — geniş satır listesi */ .svc-rows{ border-top:1px solid var(--line); } .svc-row{ display:grid; grid-template-columns:90px minmax(0,1fr) minmax(0,1.15fr) 150px; gap:clamp(16px,2.5vw,40px); align-items:start; padding:clamp(28px,3.2vw,44px) 0; border-bottom:1px solid var(--line); position:relative; transition:padding-inline var(--dur) var(--ease), background var(--dur) var(--ease); } .svc-row::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--accent); transform:scaleY(0); transform-origin:top; transition:transform var(--dur) var(--ease); } .svc-row:hover{ padding-inline:clamp(8px,1.4vw,22px); background:var(--bg-soft); } .svc-row:hover::before{ transform:scaleY(1); } .svc-row__num{ font-family:var(--font-mono); font-size:.8125rem; color:var(--muted); letter-spacing:.1em; padding-top:8px; } .svc-row:hover .svc-row__num{ color:var(--accent); } .svc-row__title{ font-size:clamp(1.375rem,2.2vw,1.875rem); letter-spacing:-.03em; } .svc-row__body{ color:var(--muted); font-size:var(--fs-small); line-height:1.65; } .svc-row__tags{ margin-top:16px; } .svc-row__cta{ display:flex; justify-content:flex-end; padding-top:6px; } .svc-row__arrow{ width:44px; height:44px; border-radius:var(--r); /* daire → 44px kare */ border:1px solid var(--line); display:grid; place-items:center; color:var(--ink); transition:background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease); } .svc-row:hover .svc-row__arrow{ background:var(--accent); border-color:var(--accent); color:#fff; transform:rotate(-45deg); } .svc-row__link::after{ content:""; position:absolute; inset:0; } @media (max-width:1000px){ .svc-row{ grid-template-columns:64px minmax(0,1fr) 52px; } .svc-row__body{ grid-column:2 / 3; margin-top:14px; } .svc-row__cta{ grid-row:1 / 2; grid-column:3 / 4; } } @media (max-width:600px){ .svc-row{ grid-template-columns:52px minmax(0,1fr); } .svc-row__cta{ display:none; } } /* -------------------------------------------------------------------------- 14 — PROJE KARTLARI (work-card + hover mini-carousel + see-all) -------------------------------------------------------------------------- */ .work-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,2.4vw,34px); } .work-grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); } @media (max-width:1000px){ .work-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:680px){ .work-grid, .work-grid--2{ grid-template-columns:1fr; } } .work-card{ display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); overflow:hidden; position:relative; transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); } .work-card:hover{ border-color:var(--ink); box-shadow:var(--shadow-md); transform:translateY(-3px); } .work-card__media{ position:relative; overflow:hidden; aspect-ratio:16 / 10; background:var(--bg-soft); border-bottom:1px solid var(--line); } /* Hover mini-carousel: ilk görsel akışta kalır, diğerleri üstte crossfade olur. (Tema-1'in hover scale'i kaldırıldı — crossfade ile çakışıyordu.) */ .work-card__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .45s var(--ease); } .work-card__media img:first-of-type{ position:relative; } .work-card__media img.is-active{ opacity:1; } .work-card__progress{ position:absolute; left:0; right:0; bottom:0; height:2px; z-index:2; background:rgba(255,255,255,.25); opacity:0; transition:opacity var(--dur) var(--ease); } .work-card__progress i{ display:block; height:100%; width:0; background:var(--accent); } .work-card:hover .work-card__progress{ opacity:1; } .work-card.is-cycling .work-card__progress i{ animation:wc-progress var(--wc-interval,2000ms) linear infinite; } @keyframes wc-progress{ from{ width:0; } to{ width:100%; } } .work-card__year{ position:absolute; top:12px; right:12px; z-index:2; background:rgba(11,11,11,.86); color:#fff; font-family:var(--font-mono); font-size:.6875rem; letter-spacing:.08em; padding:5px 9px; border-radius:var(--r-sm); } .work-card__overlay{ position:absolute; inset:0; z-index:1; background:linear-gradient(to top, rgba(11,11,11,.78), rgba(11,11,11,0) 55%); opacity:0; transition:opacity var(--dur) var(--ease); display:flex; align-items:flex-end; padding:18px; } .work-card:hover .work-card__overlay{ opacity:1; } .work-card__overlay span{ display:inline-flex; align-items:center; gap:8px; background:var(--accent); color:#fff; font-family:var(--font-display); font-size:.8125rem; font-weight:500; padding:10px 16px; border-radius:var(--r); transform:translateY(8px); transition:transform var(--dur) var(--ease); } .work-card:hover .work-card__overlay span{ transform:none; } .work-card__body{ padding:clamp(20px,1.8vw,26px); display:flex; flex-direction:column; flex:1; } .work-card__meta{ display:flex; align-items:center; gap:10px; margin-bottom:12px; } .work-card__title{ font-size:1.25rem; letter-spacing:-.025em; margin-bottom:10px; } .work-card:hover .work-card__title{ color:var(--accent); } .work-card__desc{ font-size:var(--fs-small); color:var(--muted); line-height:1.6; margin-bottom:18px; } .work-card__foot{ margin-top:auto; display:flex; flex-wrap:wrap; gap:6px; } .work-card__link::after{ content:""; position:absolute; inset:0; z-index:3; } /* Featured — geniş kart */ .work-card--featured{ grid-column:span 2; } .work-card--featured .work-card__media{ aspect-ratio:16 / 9; } .work-card--featured .work-card__title{ font-size:clamp(1.375rem,2vw,1.75rem); } @media (max-width:680px){ .work-card--featured{ grid-column:span 1; } } /* "Tümünü Gör" hayalet karo — grid'i yetim bırakmadan kapatır */ .work-see-all{ display:flex; flex-direction:column; justify-content:space-between; gap:24px; border:1px dashed var(--faint); border-radius:var(--r); background:transparent; padding:clamp(22px,2.2vw,30px); transition:border-color var(--dur), background var(--dur), transform var(--dur); } .work-see-all:hover{ border-color:var(--accent); background:var(--surface); transform:translateY(-3px); } .work-see-all__icon{ display:grid; place-items:center; width:46px; height:46px; border:1px solid var(--line); border-radius:var(--r); background:var(--accent-050); color:var(--accent-600); transition:background var(--dur), color var(--dur); } .work-see-all:hover .work-see-all__icon{ background:var(--accent); color:#fff; } .work-see-all h3, .work-see-all__title{ display:block; font:600 var(--fs-h5)/var(--lh-snug) var(--font-display); letter-spacing:-.02em; color:var(--ink); } .work-see-all p, .work-see-all__desc{ display:block; font-size:var(--fs-small); color:var(--muted); margin-top:8px; } /* Filtreler */ .filters{ display:flex; flex-wrap:wrap; gap:8px; padding-block:22px; border-block:1px solid var(--line); margin-bottom:clamp(28px,3vw,44px); } .filter-btn{ padding:10px 18px; border:1px solid var(--line); border-radius:var(--r-sm); /* pill → keskin köşe */ font-family:var(--font-display); font-size:.875rem; font-weight:500; color:var(--ink-2); background:var(--surface); transition:all var(--dur) var(--ease); } .filter-btn:hover{ border-color:var(--ink); } .filter-btn[aria-pressed="true"]{ background:var(--accent); border-color:var(--accent); color:#fff; } .filter-count{ font-family:var(--font-mono); font-size:.6875rem; opacity:.6; margin-left:6px; } .filter-empty{ padding:64px 0; text-align:center; color:var(--muted); } [data-filter-item].is-hidden{ display:none; } /* -------------------------------------------------------------------------- 15 — TECH STACK BANDI (koyu bölüm; solda sticky intro, sağda stack kutusu) -------------------------------------------------------------------------- */ .stack-layout{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr); gap:clamp(28px,4vw,72px); align-items:start; } .stack-intro{ position:sticky; top:calc(var(--header-h) + 32px); } .stack-box{ border:1px solid var(--line-dark); border-radius:var(--r); background:var(--dark-2); } .stack-row{ display:grid; grid-template-columns:150px minmax(0,1fr); gap:clamp(14px,2vw,32px); align-items:center; padding:clamp(18px,2vw,26px) clamp(18px,2vw,28px); } .stack-row + .stack-row{ border-top:1px solid var(--line-dark); } .stack-row__label{ display:flex; align-items:center; gap:10px; font-size:1rem; } .stack-row__label .dot{ width:6px; height:6px; border-radius:50%; background:var(--accent); flex-shrink:0; } @media (max-width:1000px){ .stack-layout{ grid-template-columns:1fr; } .stack-intro{ position:static; } } @media (max-width:640px){ .stack-row{ grid-template-columns:1fr; gap:10px; } } /* -------------------------------------------------------------------------- 16 — SÜREÇ (keycap process — dekoratif marker noktaları YOK) -------------------------------------------------------------------------- */ .process{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,2.4vw,36px); position:relative; list-style:none; margin:0; padding:0; } .process::before{ content:""; position:absolute; left:0; right:0; top:24px; height:1px; background:var(--line); } .process__num{ position:relative; z-index:1; display:grid; place-items:center; width:48px; height:48px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); font:600 .9375rem var(--font-display); box-shadow:var(--shadow-sm); } .process__step--accent .process__num{ border-color:var(--accent-border); background:var(--accent-050); color:var(--accent-600); } .process__title{ margin-top:20px; font-size:var(--fs-h5); } .process__desc{ margin-top:10px; font-size:var(--fs-small); color:var(--muted); line-height:1.6; } .process__list{ margin-top:14px; display:grid; gap:6px; } .process__list li{ display:flex; gap:8px; font:400 .75rem var(--font-mono); color:var(--muted); } .process__list li::before{ content:"—"; color:var(--accent); } @media (max-width:1000px){ .process{ grid-template-columns:repeat(2,1fr); } .process::before{ display:none; } } @media (max-width:560px){ .process{ grid-template-columns:1fr; } } /* Koyu sayfalarda yeniden kullanım */ .section--dark .process::before{ background:var(--line-dark); } .section--dark .process__num{ background:var(--dark-2); border-color:var(--line-dark); color:var(--on-dark); } .section--dark .process__step--accent .process__num{ border-color:var(--accent); background:transparent; color:var(--accent); } .section--dark .process__desc, .section--dark .process__list li{ color:var(--on-dark-muted); } /* -------------------------------------------------------------------------- 17 — BLOG ÇERÇEVESİ (post-trio: 3 tipografik hücre + post-rows: 3 satır) -------------------------------------------------------------------------- */ .post-trio{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); } .post-cell{ display:flex; flex-direction:column; padding:0; transition:background var(--dur) var(--ease); } .post-cell__media{ display:block; aspect-ratio:16/9; overflow:hidden; border-bottom:1px solid var(--line); background:var(--bg-soft); } .post-cell__media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease-out); } .post-cell:hover .post-cell__media img{ transform:scale(1.04); } .post-cell__inner{ display:flex; flex-direction:column; flex:1; padding:clamp(20px,2vw,28px) clamp(20px,2.4vw,32px) clamp(22px,2.2vw,30px); } .post-cell + .post-cell{ border-left:1px solid var(--line); } .post-cell:hover{ background:var(--bg-soft); } .post-cell__meta{ display:flex; align-items:center; gap:10px; } .post-cell__meta .mono{ font-size:.6875rem; color:var(--faint); } .post-cell__title{ margin-top:14px; font-size:var(--fs-h5); transition:color var(--dur); } .post-cell:hover .post-cell__title{ color:var(--accent); } .post-cell__excerpt{ margin-top:10px; font-size:var(--fs-small); color:var(--muted); line-height:1.6; } .post-cell__date{ margin-top:auto; padding-top:20px; font-size:.75rem; color:var(--faint); } .post-rows{ border-top:1px solid var(--line); } .post-row{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; padding:15px clamp(20px,2.4vw,36px); transition:background var(--dur); } .post-row + .post-row{ border-top:1px solid var(--line); } .post-row:hover{ background:var(--bg-soft); } .post-row__cat{ width:84px; flex-shrink:0; font-size:.75rem; color:var(--accent); } .post-row__title{ flex:1; min-width:0; font:500 var(--fs-small) var(--font-display); transition:color var(--dur); } .post-row:hover .post-row__title{ color:var(--accent); } .post-row__date{ font-size:.75rem; color:var(--faint); } .post-row .arw{ color:var(--faint); transition:transform var(--dur), color var(--dur); } .post-row:hover .arw{ transform:translateX(4px); color:var(--accent); } @media (max-width:900px){ .post-trio{ grid-template-columns:1fr; } .post-cell + .post-cell{ border-left:0; border-top:1px solid var(--line); } } /* -------------------------------------------------------------------------- 18 — BLOG KARTLARI + SIDEBAR + PAGINATION -------------------------------------------------------------------------- */ .post-card{ display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; position:relative; height:100%; transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); } .post-card:hover{ border-color:var(--ink); box-shadow:var(--shadow-md); transform:translateY(-3px); } .post-card__media{ aspect-ratio:16/9; overflow:hidden; background:var(--bg-soft); border-bottom:1px solid var(--line); } .post-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease-out); } .post-card:hover .post-card__media img{ transform:scale(1.04); } .post-card__body{ padding:clamp(20px,1.7vw,26px); display:flex; flex-direction:column; flex:1; } .post-card__title{ font-size:1.1875rem; letter-spacing:-.02em; margin:12px 0 10px; line-height:1.3; } .post-card:hover .post-card__title{ color:var(--accent); } .post-card__excerpt{ font-size:var(--fs-small); color:var(--muted); line-height:1.6; } .post-card__foot{ margin-top:auto; padding-top:20px; display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:var(--fs-xs); color:var(--muted); } .post-card__link::after{ content:""; position:absolute; inset:0; } .post-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:var(--fs-xs); color:var(--muted); } .post-meta li{ display:inline-flex; align-items:center; gap:8px; } .post-meta li + li::before{ content:""; width:3px; height:3px; border-radius:50%; background:var(--line); } /* Blog listeleme: masaüstünde 2 sütun (sidebar'lı layout için), ≤680px 1 sütun */ .post-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(20px,2.2vw,32px); } @media (max-width:680px){ .post-grid{ grid-template-columns:1fr; } } /* Featured makale */ .post-feature{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(24px,3vw,56px); align-items:center; border:1px solid var(--line); border-radius:var(--r); padding:clamp(20px,2vw,28px); position:relative; transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .post-feature:hover{ border-color:var(--ink); box-shadow:var(--shadow-md); } .post-feature__media{ aspect-ratio:16/10; overflow:hidden; border-radius:var(--r); background:var(--bg-soft); } .post-feature__media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease-out); } .post-feature:hover .post-feature__media img{ transform:scale(1.04); } .post-feature__title{ font-size:clamp(1.5rem,2.6vw,2.25rem); letter-spacing:-.03em; margin:16px 0 14px; } .post-feature__link::after{ content:""; position:absolute; inset:0; } @media (max-width:860px){ .post-feature{ grid-template-columns:1fr; } } /* Sidebar layout */ .blog-layout{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:clamp(32px,4vw,64px); align-items:start; } @media (max-width:1000px){ .blog-layout{ grid-template-columns:1fr; } } .blog-sidebar{ min-width:0; } .widget + .widget{ margin-top:34px; } .widget__title{ font-family:var(--font-display); font-size:.6875rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); padding-bottom:14px; margin-bottom:16px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:10px; } .widget__title::before{ content:""; width:16px; height:1px; background:var(--accent); } .cat-list{ display:flex; flex-direction:column; } .cat-list a{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 0; font-size:var(--fs-small); border-bottom:1px solid var(--line); transition:color var(--dur) var(--ease), padding-left var(--dur) var(--ease); } .cat-list a:hover{ color:var(--accent); padding-left:6px; } .cat-list .count{ font-family:var(--font-mono); font-size:.6875rem; color:var(--faint); } .cat-list a[aria-current="page"]{ color:var(--accent); font-weight:500; } .mini-list{ display:flex; flex-direction:column; gap:16px; } .mini-post{ display:grid; grid-template-columns:34px minmax(0,1fr); gap:14px; align-items:start; } .mini-post__num{ font-family:var(--font-mono); font-size:.8125rem; color:var(--accent); letter-spacing:.06em; padding-top:2px; } .mini-post h4{ font-size:.9375rem; line-height:1.4; letter-spacing:-.015em; font-weight:500; } .mini-post:hover h4{ color:var(--accent); } .mini-post span{ font-size:var(--fs-xs); color:var(--faint); display:block; margin-top:5px; } .newsletter-card{ padding:clamp(22px,2.4vw,30px); background:var(--dark); color:var(--on-dark); border-radius:var(--r); } .newsletter-card h3{ font-size:1.125rem; letter-spacing:-.02em; margin-bottom:10px; } .newsletter-card p{ font-size:var(--fs-xs); color:var(--on-dark-muted); line-height:1.65; margin-bottom:18px; } /* Pagination */ .pagination{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; margin-top:clamp(40px,5vw,64px); } .pagination a, .pagination span{ min-width:44px; height:44px; padding-inline:12px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:var(--r-sm); font-family:var(--font-display); font-size:.875rem; font-weight:500; transition:all var(--dur) var(--ease); } .pagination a:hover{ border-color:var(--ink); } .pagination [aria-current="page"]{ background:var(--accent); border-color:var(--accent); color:#fff; } .pagination .is-disabled{ opacity:.38; pointer-events:none; } /* -------------------------------------------------------------------------- 19 — FAQ ACCORDION -------------------------------------------------------------------------- */ .faq{ border-top:1px solid var(--line); } .faq__item{ border-bottom:1px solid var(--line); } .faq__q{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; width:100%; text-align:left; padding:clamp(20px,2vw,26px) 0; font-family:var(--font-display); font-size:clamp(1.0625rem,1.6vw,1.25rem); font-weight:500; letter-spacing:-.02em; line-height:1.4; transition:color var(--dur) var(--ease); } .faq__q:hover{ color:var(--accent); } .faq__q[aria-expanded="true"]{ color:var(--accent); } .faq__icon{ flex:none; width:22px; height:22px; position:relative; margin-top:4px; } .faq__icon::before, .faq__icon::after{ content:""; position:absolute; left:50%; top:50%; background:currentColor; transition:transform var(--dur) var(--ease), opacity var(--dur) var(--ease); } .faq__icon::before{ width:15px; height:1.5px; transform:translate(-50%,-50%); } .faq__icon::after{ width:1.5px; height:15px; transform:translate(-50%,-50%); } .faq__q[aria-expanded="true"] .faq__icon::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; } .faq__a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .36s var(--ease); } .faq__a[data-open="true"]{ grid-template-rows:1fr; } .faq__a > div{ overflow:hidden; } .faq__a p{ padding-bottom:26px; max-width:72ch; color:var(--muted); font-size:var(--fs-small); line-height:1.75; } .faq__a p + p{ padding-top:0; margin-top:-12px; padding-bottom:26px; } .faq__a a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; } .section--dark .faq, .section--dark .faq__item{ border-color:var(--line-dark); } .section--dark .faq__a p{ color:var(--on-dark-muted); } /* JS yokken tüm cevaplar açık kalır */ .no-js .faq__a{ grid-template-rows:1fr; } /* -------------------------------------------------------------------------- 20 — PAGE HERO / BREADCRUMB (iç sayfalar) -------------------------------------------------------------------------- */ /* Sayfa başlığı bandı — gövdeden AYRI bir yüzey. Zemin ile aynı renk olduğunda header, başlık ve içerik tek düz bir alan gibi okunuyordu; bant artık kendi zeminini ve alt çizgisini taşıyor. */ .page-hero{ padding-block:clamp(28px,3.4vw,48px) clamp(32px,4vw,56px); background:var(--surface); border-bottom:1px solid var(--line); } .page-hero--dark{ background:var(--dark); color:var(--on-dark); border-color:var(--line-dark); } .page-hero--dark .lead{ color:var(--on-dark-muted); } .page-hero__grid{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(24px,4vw,64px); align-items:end; } .page-hero__title{ margin-top:20px; } @media (max-width:860px){ .page-hero__grid{ grid-template-columns:1fr; align-items:start; } } .breadcrumb{ padding-block:14px; background:var(--surface); } .breadcrumb ol{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:var(--fs-xs); color:var(--muted); } .breadcrumb li{ display:inline-flex; align-items:center; gap:8px; } .breadcrumb li + li::before{ content:"/"; color:var(--line); } .breadcrumb a:hover{ color:var(--accent); } .breadcrumb [aria-current="page"]{ color:var(--ink); } .breadcrumb--dark{ border-color:var(--line-dark); background:var(--dark); color:var(--on-dark); } .breadcrumb--dark ol{ color:var(--on-dark-faint); } .breadcrumb--dark [aria-current="page"]{ color:var(--on-dark); } /* -------------------------------------------------------------------------- 21 — PROJE DETAY / PANELLER / GALERİ -------------------------------------------------------------------------- */ /* Birleşik borderlı bilgi kutusu: 4 hücre + tam genişlik Stack satırı */ .case-meta{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border:1px solid var(--line); border-radius:var(--r); background:var(--surface); overflow:hidden; } .case-meta > div{ padding:clamp(18px,2vw,24px) clamp(18px,2.2vw,28px); border-right:1px solid var(--line); } .case-meta > div:nth-child(4){ border-right:0; } .case-meta dt{ font:500 .6875rem var(--font-mono); text-transform:uppercase; letter-spacing:.12em; color:var(--faint); margin-bottom:8px; } .case-meta dd{ font-family:var(--font-display); font-size:1rem; font-weight:500; letter-spacing:-.015em; } .case-meta__stack{ grid-column:1 / -1; border-top:1px solid var(--line); border-right:0 !important; } .case-meta__stack .tag-list{ margin-top:2px; } .case-meta__cover{ margin-top:clamp(20px,2.4vw,32px); } /* Vaka sayfalarında bölüm ritmi daha sıkı akar */ .case-body .section{ padding-block:clamp(48px,5.5vw,84px); } @media (max-width:780px){ .case-meta{ grid-template-columns:repeat(2,1fr); } .case-meta > div:nth-child(2n){ border-right:0; } .case-meta > div:nth-child(3), .case-meta > div:nth-child(4){ border-top:1px solid var(--line); } } @media (max-width:460px){ .case-meta{ grid-template-columns:1fr; } .case-meta > div{ border-right:0; } .case-meta > div + div{ border-top:1px solid var(--line); } } .case-cover{ border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--bg-soft); } .case-split{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(24px,3.5vw,56px); } @media (max-width:820px){ .case-split{ grid-template-columns:1fr; } } .panel{ padding:clamp(24px,2.6vw,36px); border:1px solid var(--line); border-radius:var(--r); background:var(--surface); height:100%; } .panel--light{ background:var(--bg-soft); border-color:transparent; } .panel--dark{ background:var(--dark); color:var(--on-dark); border-color:var(--dark); } .panel--accent{ background:var(--accent-050); border-color:var(--accent-border); } .panel__label{ font-family:var(--font-display); font-size:.6875rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin-bottom:14px; display:block; } .panel h3{ font-size:1.25rem; letter-spacing:-.025em; margin-bottom:12px; } .panel p{ font-size:var(--fs-small); color:var(--muted); line-height:1.7; } .panel--dark p{ color:var(--on-dark-muted); } .note-strip{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:14px 18px; border:1px dashed var(--accent); border-radius:var(--r); background:var(--accent-050); font-size:var(--fs-xs); color:var(--accent-600); } .check-list{ display:flex; flex-direction:column; gap:12px; } .check-list li{ display:flex; gap:12px; font-size:var(--fs-small); line-height:1.6; } .check-list li::before{ content:""; flex:none; width:18px; height:18px; margin-top:2px; background-color:var(--accent-050); border-radius:var(--r); /* daire → kare */ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l2.5 2.5L9 1' stroke='%23FF7116' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:center; } .section--dark .check-list li{ color:var(--on-dark-tag); } .section--dark .check-list li::before{ background-color:rgba(255,113,22,.16); } /* Feature grid (1px-gap hairline hilesi) + koyu modifiye */ .feature-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; } .feature-item{ background:var(--surface); padding:clamp(22px,2.2vw,30px); transition:background var(--dur) var(--ease); } .feature-item:hover{ background:var(--bg-soft); } .feature-item__num{ font-family:var(--font-mono); font-size:.6875rem; color:var(--accent); letter-spacing:.1em; margin-bottom:14px; display:block; } .feature-item h3{ font-size:1.0625rem; letter-spacing:-.02em; margin-bottom:8px; } .feature-item p{ font-size:var(--fs-small); color:var(--muted); line-height:1.6; } /* Koyu ızgara: bir modifiye sınıfı değil, BAĞLAM belirler — ızgara koyu bir bölümün ya da koyu zeminli bir bloğun içindeyse. Blok panelden koyu zemine alındığında da doğru görünsün diye. */ .section--dark .feature-grid, .blk--bg-dark .feature-grid{ background:var(--line-dark); border-color:var(--line-dark); } .section--dark .feature-item, .blk--bg-dark .feature-item{ background:var(--dark-2); } .section--dark .feature-item:hover, .blk--bg-dark .feature-item:hover{ background:var(--dark); } .section--dark .feature-item h3, .blk--bg-dark .feature-item h3{ color:var(--on-dark); } .section--dark .feature-item p, .blk--bg-dark .feature-item p{ color:var(--on-dark-muted); } /* Link kartları + koyu modifiye */ .link-cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; } .link-card{ background:var(--surface); padding:clamp(22px,2.2vw,28px); display:flex; flex-direction:column; gap:10px; position:relative; transition:background var(--dur) var(--ease); } .link-card:hover{ background:var(--bg-soft); } .link-card:hover h3{ color:var(--accent); } .link-card h3{ font-size:1.0625rem; letter-spacing:-.02em; } .link-card p{ font-size:var(--fs-xs); color:var(--muted); line-height:1.6; } .link-card .arw{ margin-top:auto; color:var(--accent); transition:transform var(--dur) var(--ease); } .link-card:hover .arw{ transform:translateX(4px); } .section--dark .link-cards, .blk--bg-dark .link-cards{ background:var(--line-dark); border-color:var(--line-dark); } .section--dark .link-card, .blk--bg-dark .link-card{ background:var(--dark-2); } .section--dark .link-card:hover, .blk--bg-dark .link-card:hover{ background:var(--dark); } .section--dark .link-card h3, .blk--bg-dark .link-card h3{ color:var(--on-dark); } .section--dark .link-card:hover h3, .blk--bg-dark .link-card:hover h3{ color:var(--accent); } .section--dark .link-card p, .blk--bg-dark .link-card p{ color:var(--on-dark-muted); } .gallery{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(16px,2vw,26px); } .gallery figure{ margin:0; } .gallery img{ width:100%; border:1px solid var(--line); border-radius:var(--r); background:var(--bg-soft); } .gallery figcaption{ margin-top:10px; font-size:var(--fs-xs); color:var(--muted); } .quote-block{ padding:clamp(28px,4vw,56px); border-left:2px solid var(--accent); background:var(--bg-soft); border-radius:var(--r); } .quote-block p{ font-family:var(--font-display); font-size:clamp(1.1875rem,2.2vw,1.75rem); line-height:1.4; letter-spacing:-.025em; } .stat-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--surface); } .stat-row > div{ padding:clamp(22px,2.4vw,32px); border-right:1px solid var(--line); } .stat-row > div:last-child{ border-right:0; } .stat-row dt{ font-size:var(--fs-xs); color:var(--muted); } .stat-row dd{ font-family:var(--font-display); font-size:clamp(1.375rem,2.4vw,2rem); font-weight:600; letter-spacing:-.035em; margin-top:6px; } @media (max-width:640px){ .stat-row{ grid-template-columns:1fr; } .stat-row > div{ border-right:0; } .stat-row > div + div{ border-top:1px solid var(--line); } } /* Portre (hakkımda) */ .portrait{ position:relative; border:1px solid var(--line); border-radius:var(--r); background:var(--bg-soft); overflow:hidden; aspect-ratio:4 / 5; } .portrait img{ width:100%; height:100%; object-fit:cover; } @media (min-width:901px){ .portrait--sticky{ position:sticky; top:calc(var(--header-h) + 32px); } } .portrait__tag{ position:absolute; left:0; top:26px; background:var(--accent); color:#fff; font-family:var(--font-display); font-size:.6875rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; padding:9px 14px 9px 12px; } /* -------------------------------------------------------------------------- 22 — SKILL GRID (hakkımda) + LEDGER ("Yolculuğum") -------------------------------------------------------------------------- */ .skill-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; } .skill-card{ background:var(--surface); padding:clamp(24px,2.2vw,32px); transition:background var(--dur) var(--ease); } .skill-card:hover{ background:var(--bg-soft); } .skill-card__head{ display:flex; align-items:center; gap:12px; margin-bottom:22px; padding-bottom:16px; border-bottom:1px solid var(--line); } .skill-card__head h3{ font-size:1.0625rem; letter-spacing:-.015em; } .skill-card__head .num{ font-family:var(--font-mono); font-size:.6875rem; color:var(--accent); letter-spacing:.1em; margin-left:auto; } .skill-sub{ margin-top:18px; } .skill-sub:first-of-type{ margin-top:0; } .skill-sub__label{ font-family:var(--font-display); font-size:.6875rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; display:block; } /* Ledger — tema-1 timeline'ın yerini alan defter listesi */ .ledger{ border:1px solid var(--line); border-radius:var(--r); background:var(--surface); list-style:none; } .ledger__row{ display:grid; grid-template-columns:150px minmax(0,1fr); gap:clamp(14px,2vw,28px); padding:clamp(18px,2vw,26px) clamp(18px,2.2vw,30px); } .ledger__row + .ledger__row{ border-top:1px solid var(--line); } .ledger__era{ display:flex; align-items:center; gap:9px; font:500 .75rem var(--font-mono); color:var(--accent); } .ledger__era .dot{ width:6px; height:6px; border-radius:50%; background:var(--accent); flex-shrink:0; } .ledger__body h3{ font-size:var(--fs-h5); } .ledger__body p{ margin-top:6px; font-size:var(--fs-small); color:var(--muted); line-height:1.65; } @media (max-width:640px){ .ledger__row{ grid-template-columns:1fr; gap:8px; } } /* -------------------------------------------------------------------------- 23 — İLETİŞİM + FORMLAR -------------------------------------------------------------------------- */ .contact-layout{ display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:clamp(32px,4vw,72px); align-items:start; } @media (max-width:940px){ .contact-layout{ grid-template-columns:1fr; } } .contact-info{ display:flex; flex-direction:column; gap:4px; } .contact-item{ display:grid; grid-template-columns:44px minmax(0,1fr); gap:16px; padding:20px 0; border-bottom:1px solid var(--line); align-items:start; } .contact-item:first-of-type{ border-top:1px solid var(--line); } .contact-item__icon{ width:44px; height:44px; border:1px solid var(--line); border-radius:var(--r); display:grid; place-items:center; color:var(--accent); } .contact-item dt{ font-size:var(--fs-xs); color:var(--muted); margin-bottom:4px; } .contact-item dd{ font-family:var(--font-display); font-size:1.0625rem; letter-spacing:-.02em; } .contact-item dd a:hover{ color:var(--accent); } .form-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; } .field--full{ grid-column:1 / -1; } @media (max-width:640px){ .form-grid{ grid-template-columns:1fr; } } .field{ display:flex; flex-direction:column; gap:8px; } .field label{ font-size:var(--fs-xs); font-weight:500; color:var(--ink-2); letter-spacing:.01em; } .field label .req{ color:var(--accent); } .field label .opt{ color:var(--faint); font-weight:400; } .field input, .field select, .field textarea{ width:100%; padding:15px 16px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm); font-size:var(--fs-small); color:var(--ink); transition:border-color .2s var(--ease), box-shadow .2s var(--ease); } .field textarea{ resize:vertical; min-height:150px; line-height:1.65; } .field select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; padding-right:42px; cursor:pointer; } .field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(255,113,22,.12); } .field input::placeholder, .field textarea::placeholder{ color:var(--faint); } .field.has-error input, .field.has-error select, .field.has-error textarea{ border-color:var(--err); } .field.has-error input:focus, .field.has-error textarea:focus{ box-shadow:0 0 0 3px rgba(220,38,38,.12); } .field__error{ font-size:var(--fs-xs); color:var(--err); display:none; align-items:center; gap:6px; } .field.has-error .field__error{ display:flex; } .field__hint{ font-size:var(--fs-xs); color:var(--faint); } .radio-row{ display:flex; flex-wrap:wrap; gap:10px; } .radio-chip{ position:relative; } .radio-chip input{ position:absolute; opacity:0; width:0; height:0; } .radio-chip span{ display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border:1px solid var(--line); border-radius:var(--r); /* pill → kare */ font-size:var(--fs-small); cursor:pointer; transition:all var(--dur) var(--ease); } .radio-chip span::before{ content:""; width:8px; height:8px; border-radius:50%; /* ≤8px radio noktası — daire serbest */ border:1px solid var(--faint); transition:all var(--dur) var(--ease); } .radio-chip input:checked + span{ border-color:var(--accent); background:var(--accent-050); color:var(--accent-600); } .radio-chip input:checked + span::before{ background:var(--accent); border-color:var(--accent); box-shadow:inset 0 0 0 2px var(--bg); } .radio-chip input:focus-visible + span{ outline:2px solid var(--accent); outline-offset:3px; } .check{ display:flex; align-items:flex-start; gap:12px; font-size:var(--fs-xs); color:var(--muted); line-height:1.6; cursor:pointer; } .check input{ width:18px; height:18px; flex:none; margin-top:2px; accent-color:var(--accent); cursor:pointer; } .check a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; } .check.has-error{ color:var(--err); } .form-note{ font-size:var(--fs-xs); color:var(--faint); } .hp-field{ position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden; } .form-alert{ display:none; gap:14px; align-items:flex-start; padding:20px 22px; border-radius:var(--r); border:1px solid var(--line); background:var(--bg-soft); font-size:var(--fs-small); } .form-alert.is-visible{ display:flex; } .form-alert--success{ background:var(--ok-050); border-color:var(--ok-border); color:var(--ok-ink); } .form-alert--error{ background:var(--err-050); border-color:var(--err-border); color:var(--err-ink); } .form-alert svg{ flex:none; margin-top:2px; } /* -------------------------------------------------------------------------- 24 — ARTICLE / PROSE / TOC (sağ ray içindekiler) -------------------------------------------------------------------------- */ .article-layout{ display:grid; grid-template-columns:minmax(0,var(--reading)) 260px; gap:clamp(32px,5vw,88px); justify-content:center; align-items:start; padding-block:clamp(32px,4vw,56px) var(--section-y); } .article-main{ min-width:0; } /* align-self:start ZORUNLU — grid stretch sticky'yi öldürür */ .article-rail{ position:sticky; top:calc(var(--header-h) + 28px); align-self:start; } .toc{ border-left:none; } .toc__title{ font:600 .6875rem var(--font-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--faint); margin-bottom:12px; } .toc__title::before{ content:""; display:inline-block; width:16px; height:1px; background:var(--accent); vertical-align:middle; margin-right:8px; } .toc ol{ list-style:none; max-height:calc(100vh - var(--header-h) - 120px); overflow-y:auto; } .toc a{ display:block; padding:7px 0 7px 14px; font-size:var(--fs-xs); color:var(--muted); border-left:1.5px solid var(--line); transition:color var(--dur), border-color var(--dur); } .toc li.lvl-3 a{ padding-left:28px; } .toc a:hover{ color:var(--ink); } .toc a.is-active{ color:var(--accent); border-color:var(--accent); font-weight:500; } @media (max-width:1080px){ .article-layout{ grid-template-columns:minmax(0,var(--reading)); } .article-rail{ position:static; order:-1; width:100%; border:1px solid var(--line); border-radius:var(--r); padding:18px 20px; margin-bottom:8px; } } /* Makale başlık bloğu */ .article-head{ padding-block:clamp(36px,4vw,56px) clamp(28px,3vw,40px); } .article-head__title{ font-size:clamp(2rem,4.2vw,3.5rem); line-height:1.06; letter-spacing:-.035em; margin:18px 0 20px; } .article-head__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:16px; padding-top:24px; margin-top:26px; border-top:1px solid var(--line); font-size:var(--fs-xs); color:var(--muted); } .author-chip{ display:flex; align-items:center; gap:10px; } .author-chip__avatar{ width:38px; height:38px; border-radius:var(--r); overflow:hidden; /* daire → kare */ background:var(--dark); color:var(--on-dark); display:grid; place-items:center; flex:none; font-family:var(--font-display); font-weight:600; font-size:.8125rem; } .author-chip strong{ display:block; font-family:var(--font-display); font-size:.875rem; color:var(--ink); font-weight:500; } /* Yazar bir profil fotoğrafı yüklediyse baş harflerin yerini alır (EP133). */ .author-chip__photo{ width:100%; aspect-ratio:1; height:auto; object-fit:cover; border-radius:inherit; } .author-box__img img{ width:100%; height:100%; object-fit:cover; } .article-cover{ margin-block:clamp(20px,3vw,36px); } .article-cover img{ width:100%; border-radius:var(--r); border:1px solid var(--line); } .article-foot{ margin-top:clamp(32px,4vw,48px); padding-top:24px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px; } /* Prose */ .prose{ max-width:100%; font-size:1.0625rem; line-height:1.78; color:var(--ink-3); } /* Başlığın hemen ardından gelen metin bloğu: .prose'un iç akış boşluğu yalnız ÇOCUKLARI arasında çalışıyor, kendi üstünde değil — başlığa yapışıyordu. */ :where(h1, h2, h3) + .prose{ margin-top:clamp(14px,1.4vw,22px); } .prose > * + *{ margin-top:1.35em; } /* content.json prose'u bazen class'sız sarmalayıcı div'ler içerir; akış boşluğu onların içine de iner. (Makale prose'unda class'sız div = kod bloğu/callout yapılarıdır, oraya inmez.) */ .prose:not(.prose--article) > div:not([class]) > * + *, .prose:not(.prose--article) > div:not([class]) > div:not([class]) > * + *{ margin-top:1.35em; } .prose h2{ font-size:clamp(1.5rem,2.4vw,2rem); letter-spacing:-.03em; margin-top:2.4em; margin-bottom:.6em; scroll-margin-top:calc(var(--header-h) + 28px); padding-top:.5em; border-top:1px solid var(--line); } .prose h3{ font-size:clamp(1.1875rem,1.8vw,1.4375rem); letter-spacing:-.025em; margin-top:1.9em; margin-bottom:.5em; scroll-margin-top:calc(var(--header-h) + 28px); } .prose h4{ font-size:1.0625rem; margin-top:1.6em; margin-bottom:.4em; } .prose p{ text-wrap:pretty; } .prose a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; } .prose a:hover{ color:var(--accent-600); } .prose strong{ font-weight:600; color:var(--ink); } .prose ul, .prose ol{ padding-left:4px; display:flex; flex-direction:column; gap:.55em; } .prose ul li{ padding-left:26px; position:relative; } .prose ul li::before{ content:""; position:absolute; left:4px; top:.72em; width:7px; height:1.5px; background:var(--accent); } .prose ol{ counter-reset:li; } .prose ol li{ padding-left:34px; position:relative; counter-increment:li; } .prose ol li::before{ content:counter(li, decimal-leading-zero); position:absolute; left:0; top:0; font-family:var(--font-mono); font-size:.75rem; color:var(--accent); line-height:1.9; } .prose blockquote{ margin-block:1.9em; padding:4px 0 4px 26px; border-left:2px solid var(--accent); font-family:var(--font-display); font-size:1.1875rem; line-height:1.55; letter-spacing:-.015em; color:var(--ink); } .prose blockquote cite{ display:block; margin-top:12px; font-family:var(--font-body); font-size:var(--fs-xs); font-style:normal; color:var(--muted); } .prose figure{ margin-block:2em; } .prose figure img{ width:100%; border:1px solid var(--line); border-radius:var(--r); } .prose figcaption{ margin-top:12px; font-size:var(--fs-xs); color:var(--muted); text-align:center; } .prose hr{ margin-block:2.4em; } .prose table{ width:100%; border-collapse:collapse; font-size:var(--fs-small); } .table-scroll{ overflow-x:auto; margin-block:1.9em; border:1px solid var(--line); border-radius:var(--r); } .prose th, .prose td{ padding:13px 16px; text-align:left; border-bottom:1px solid var(--line); } .prose th{ background:var(--bg-soft); font-family:var(--font-display); font-weight:600; font-size:var(--fs-xs); letter-spacing:.04em; text-transform:uppercase; } .prose tbody tr:last-child td{ border-bottom:0; } .prose :not(pre) > code{ font-family:var(--font-mono); font-size:.875em; background:var(--bg-soft); border:1px solid var(--line); padding:2px 6px; border-radius:var(--r); color:var(--accent-600); word-break:break-word; } /* Kod bloğu */ .code-block{ margin-block:2em; border-radius:var(--r); overflow:hidden; background:var(--dark); border:1px solid var(--dark); } .code-block__bar{ display:flex; align-items:center; gap:12px; padding:11px 14px; background:var(--dark-2); border-bottom:1px solid var(--line-dark); } .code-block__lang{ flex:none; font-family:var(--font-mono); font-size:.6875rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); } .code-block__file{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; direction:rtl; text-align:left; font-family:var(--font-mono); font-size:.6875rem; color:var(--on-dark-faint); } .code-copy{ flex:none; display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:.6875rem; color:var(--on-dark-muted); padding:5px 9px; border:1px solid var(--line-dark); border-radius:var(--r-sm); transition:all .2s var(--ease); } .code-copy:hover{ color:var(--on-dark); border-color:rgba(255,255,255,.28); } .code-copy.is-done{ color:var(--accent); border-color:var(--accent); } .code-block pre{ margin:0; padding:20px; overflow-x:auto; } .code-block code{ font-family:var(--font-mono); font-size:.8125rem; line-height:1.75; color:var(--on-dark-tag); display:block; white-space:pre; tab-size:2; } .code-block .c{ color:var(--syn-c); font-style:italic; } .code-block .k{ color:var(--syn-k); } .code-block .s{ color:var(--syn-s); } .code-block .f{ color:var(--syn-f); } .code-block .n{ color:var(--syn-n); } .code-block .v{ color:var(--syn-v); } /* content.json makale gövdesi — class'sız kod bloğu yapısı: .prose > div > [div: dildosya] + pre > code */ .prose--article > div:not([class]){ margin-block:2em; } .prose--article > div:not([class]):has(> pre){ border:1px solid var(--dark); border-radius:var(--r); overflow:hidden; background:var(--dark); } .prose--article > div:not([class]) > div:has(+ pre){ display:flex; align-items:center; gap:14px; padding:9px 14px; background:var(--code-bar); border-bottom:1px solid var(--code-bar-line); font:500 .6875rem var(--font-mono); } .prose--article > div:not([class]) > div:has(+ pre) > span:first-child{ color:var(--accent); text-transform:uppercase; letter-spacing:.08em; flex:none; } .prose--article > div:not([class]) > div:has(+ pre) > span:nth-child(2){ color:var(--faint); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; direction:rtl; text-align:left; } .prose--article > div:not([class]) > div:has(+ pre) > button{ flex:none; font:500 .6875rem var(--font-mono); color:var(--on-dark-tag); border:1px solid var(--code-bar-line); border-radius:var(--r-sm); background:transparent; padding:4px 10px; cursor:pointer; transition:color var(--dur), border-color var(--dur); } .prose--article > div:not([class]) > div:has(+ pre) > button:hover, .prose--article > div:not([class]) > div:has(+ pre) > button.is-done{ color:var(--accent); border-color:var(--accent); } .prose--article > div:not([class]) > pre{ margin:0; padding:18px 16px; overflow-x:auto; } .prose--article > div:not([class]) > pre code{ display:block; font:400 .8125rem/1.75 var(--font-mono); color:var(--code-text); background:none; border:0; padding:0; white-space:pre; } .prose--article > div:not([class]) > pre code span{ color:var(--syn-k); } /* content.json makale gövdesi — class'sız bilgi kutusu: div > div > strong + p */ .prose--article > div:not([class]):not(:has(pre)){ border:1px solid var(--line); border-left:2px solid var(--accent); border-radius:var(--r); background:var(--bg-soft); } .prose--article > div:not([class]):not(:has(pre)) > div{ padding:16px 20px; } .prose--article > div:not([class]):not(:has(pre)) strong{ display:block; font:600 .75rem var(--font-mono); text-transform:uppercase; letter-spacing:.12em; color:var(--accent-600); margin-bottom:6px; } .prose--article > div:not([class]):not(:has(pre)) p{ margin:0; font-size:var(--fs-small); color:var(--ink-3); } /* Bilgi kutuları */ .callout{ display:flex; gap:16px; margin-block:2em; padding:20px 22px; border-radius:var(--r); border:1px solid var(--line); background:var(--bg-soft); font-size:var(--fs-small); line-height:1.7; } .callout__icon{ flex:none; width:22px; height:22px; color:var(--accent); margin-top:1px; } .callout__title{ font-family:var(--font-display); font-weight:600; font-size:.9375rem; margin-bottom:5px; display:block; } .callout p{ margin:0; } .callout--info{ background:var(--info-050); border-color:var(--info-border); } .callout--info .callout__icon{ color:var(--info-ink); } .callout--warn{ background:var(--warn-050); border-color:var(--warn-border); } .callout--warn .callout__icon{ color:var(--warn-ink); } .callout--accent{ background:var(--accent-050); border-color:var(--accent-border); } /* Okuma ilerleme çubuğu */ .reading-progress{ position:fixed; top:0; left:0; right:0; height:3px; z-index:200; background:transparent; pointer-events:none; } .reading-progress__bar{ height:100%; width:0; background:var(--accent); transition:width .1s linear; } /* Paylaşım */ .share{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .share__label{ font-size:var(--fs-xs); color:var(--muted); } .share a, .share button{ width:40px; height:40px; border-radius:var(--r); border:1px solid var(--line); display:grid; place-items:center; color:var(--ink-2); transition:all var(--dur) var(--ease); } .share a:hover, .share button:hover{ background:var(--accent); border-color:var(--accent); color:#fff; } .author-box{ display:grid; grid-template-columns:96px minmax(0,1fr); gap:24px; padding:clamp(24px,3vw,36px); border:1px solid var(--line); border-radius:var(--r); background:var(--bg-soft); align-items:start; margin-top:clamp(28px,3vw,40px); } .author-box__img{ width:96px; height:96px; border-radius:var(--r); overflow:hidden; background:var(--surface); border:1px solid var(--line); } @media (max-width:600px){ .author-box{ grid-template-columns:1fr; } } /* -------------------------------------------------------------------------- 25 — 404 -------------------------------------------------------------------------- */ .error-page{ min-height:72vh; display:grid; place-items:center; text-align:center; padding-block:clamp(56px,8vw,120px); } .error-code{ font-family:var(--font-display); font-weight:700; font-size:clamp(6rem,22vw,16rem); line-height:.84; letter-spacing:-.06em; color:transparent; -webkit-text-stroke:2px var(--ink); position:relative; display:inline-block; } .error-code span{ color:var(--accent); -webkit-text-stroke:0; } /* -------------------------------------------------------------------------- 26 — FOOTER (birleşik CTA + kolonlar; ayrı .cta-band YOK) -------------------------------------------------------------------------- */ .site-footer{ position:relative; overflow:hidden; background:var(--dark); color:var(--on-dark); } .footer-cta__glow{ position:absolute; right:-140px; top:-140px; width:520px; height:520px; border-radius:50%; background:radial-gradient(circle, rgba(255,113,22,.2), transparent 62%); pointer-events:none; } .footer-cta{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:clamp(28px,4vw,72px); align-items:end; padding-block:clamp(56px,7vw,110px); border-bottom:1px solid var(--line-dark); position:relative; } .footer-cta__main{ min-width:0; } .footer-cta__side{ min-width:0; } .footer-cta__title{ font-size:clamp(2.25rem,5vw,4.25rem); line-height:var(--lh-tight); letter-spacing:-.04em; margin-top:14px; } .footer-cta .lead{ color:var(--on-dark-muted); margin-top:18px; } .footer-cta .btn-row{ margin-top:28px; } .footer-facts{ margin-top:18px; border-top:1px solid var(--line-dark); } .footer-facts > div{ display:flex; flex-direction:column; gap:7px; align-items:flex-start; padding-block:14px; border-bottom:1px solid var(--line-dark); } .footer-facts dt{ font:500 .6875rem var(--font-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark-faint); } .footer-facts dd{ font:500 var(--fs-small) var(--font-display); color:var(--on-dark); } @media (max-width:900px){ .footer-cta{ grid-template-columns:1fr; } } .footer-cols{ padding-block:clamp(40px,5vw,68px); display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:clamp(24px,3vw,44px); border-bottom:1px solid var(--line-dark); } .footer-brand{ max-width:320px; } .footer-brand .brand__name{ color:var(--on-dark); } .footer-brand p{ color:var(--on-dark-muted); font-size:var(--fs-small); margin-top:18px; line-height:1.7; } /* Koyu zeminde marka karesi görünür kalsın */ .site-footer .brand__mark{ background:var(--dark-2); color:var(--on-dark); border:1px solid var(--line-dark); } .site-footer .brand:hover .brand__mark{ background:var(--accent); border-color:var(--accent); color:#fff; } .footer-col h3{ font-family:var(--font-display); font-size:.6875rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin-bottom:18px; } .footer-col ul{ display:flex; flex-direction:column; gap:11px; } .footer-col a{ font-size:var(--fs-small); color:var(--on-dark-link); transition:color var(--dur) var(--ease), padding-left var(--dur) var(--ease); } .footer-col a:hover{ color:var(--on-dark); padding-left:5px; } @media (max-width:1000px){ .footer-cols{ grid-template-columns:repeat(2,1fr); } .footer-brand{ grid-column:1 / -1; max-width:none; } } @media (max-width:560px){ .footer-cols{ grid-template-columns:1fr; } } .footer-bottom{ padding-block:26px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; font-size:var(--fs-xs); color:var(--on-dark-faint); } .footer-bottom a:hover{ color:var(--on-dark); } .footer-legal{ display:flex; flex-wrap:wrap; gap:18px; } .social-links{ display:flex; gap:8px; } .social-links a{ width:42px; height:42px; border-radius:var(--r); border:1px solid var(--line-dark); display:grid; place-items:center; color:var(--on-dark-link); transition:all var(--dur) var(--ease); } .social-links a:hover{ background:var(--accent); border-color:var(--accent); color:#fff; padding-left:0; } .social-links--light a{ border-color:var(--line); color:var(--ink); } /* -------------------------------------------------------------------------- 26b — REVİZYON BİLEŞENLERİ (bento hizmetler, work-feature, faq-layout, cover-slider + lightbox, section-foot) -------------------------------------------------------------------------- */ /* Hizmetler bento grid'i (tema-3 yapısı) */ .svc-bento{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:clamp(14px,1.6vw,22px); } .svc-bento__card{ position:relative; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); padding:clamp(22px,2.2vw,30px); transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); } .svc-bento__card:hover{ border-color:var(--ink); transform:translateY(-3px); box-shadow:var(--shadow-md); } .svc-bento__card--feature{ grid-column:span 4; grid-row:span 2; } .svc-bento__card--tall{ grid-column:span 2; } .svc-bento__card--wide{ grid-column:span 3; } .svc-bento__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; } .svc-bento__icon{ display:grid; place-items:center; width:44px; height:44px; flex:none; border-radius:var(--r-sm); background:var(--accent-050); color:var(--accent-600); } .svc-bento__icon .ico{ width:21px; height:21px; } .svc-bento__num{ font-size:.75rem; color:var(--faint); letter-spacing:.1em; } .svc-bento__title{ margin-top:18px; font-size:var(--fs-h5); letter-spacing:-.02em; } .svc-bento__title a{ color:inherit; transition:color var(--dur); } .svc-bento__title a::after{ content:""; position:absolute; inset:0; z-index:1; } .svc-bento__card:hover .svc-bento__title a{ color:var(--accent); } .svc-bento__desc{ margin-top:10px; font-size:var(--fs-small); color:var(--muted); line-height:1.62; } .svc-bento__go{ margin-top:auto; padding-top:20px; display:inline-flex; align-items:center; gap:8px; font:500 var(--fs-xs) var(--font-display); color:var(--ink); transition:color var(--dur); } .svc-bento__go .arw{ transition:transform var(--dur) var(--ease); } .svc-bento__card:hover .svc-bento__go{ color:var(--accent); } .svc-bento__card:hover .svc-bento__go .arw{ transform:translateX(4px); } /* Featured hizmet kartındaki mini editör */ .svc-editor{ margin-top:22px; border:1px solid var(--line-dark); border-radius:var(--r-sm); background:var(--dark); overflow:hidden; } .svc-editor__bar{ display:flex; align-items:center; gap:6px; height:30px; padding-inline:12px; border-bottom:1px solid rgba(255,255,255,.08); } .svc-editor__bar i{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.18); } .svc-editor__bar span{ margin-left:6px; font:400 .6563rem var(--font-mono); color:rgba(255,255,255,.45); } .svc-editor pre{ margin:0; padding:14px 16px; overflow-x:auto; font:400 .75rem/1.8 var(--font-mono); color:var(--code-text); white-space:pre; } .svc-editor .k{ color:var(--syn-k); } .svc-editor .s{ color:var(--syn-s); } .svc-editor .f{ color:var(--syn-f); } @media (max-width:1000px){ .svc-bento__card--feature{ grid-column:span 6; } .svc-bento__card--tall{ grid-column:span 3; } .svc-bento__card--wide{ grid-column:span 3; } } @media (max-width:640px){ .svc-bento__card--feature, .svc-bento__card--tall, .svc-bento__card--wide{ grid-column:span 6; } } .section-foot{ margin-top:clamp(28px,3.2vw,44px); } /* Tam genişlik öne çıkan proje (tema-5 yapısı) */ .work-feature{ position:relative; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); border:1px solid var(--line); border-radius:var(--r); background:var(--surface); overflow:hidden; margin-bottom:clamp(18px,2vw,28px); transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); } .work-feature:hover{ border-color:var(--ink); box-shadow:var(--shadow-md); transform:translateY(-3px); } .work-feature__media{ border-right:1px solid var(--line); border-bottom:0 !important; } .work-feature__media, .work-feature .work-card__media{ aspect-ratio:16/10; } .work-feature__body{ padding:clamp(24px,3vw,48px); display:flex; flex-direction:column; justify-content:center; align-items:flex-start; } .work-feature__title{ margin-top:14px; font-size:clamp(1.5rem,2.4vw,2.125rem); letter-spacing:-.03em; line-height:1.12; } .work-feature:hover .work-feature__title{ color:var(--accent); } .work-feature__desc{ margin-top:12px; font-size:var(--fs-small); color:var(--muted); line-height:1.65; max-width:52ch; } .work-feature .work-card__foot{ margin-top:18px; padding-top:0; border-top:0; } .work-feature__go{ margin-top:22px; pointer-events:none; } @media (max-width:900px){ .work-feature{ grid-template-columns:1fr; } .work-feature__media{ border-right:0; border-bottom:1px solid var(--line) !important; } } /* Merak Edilenler — solda yapışkan başlık, sağda akordeon (tema-2 yerleşimi) */ .faq-layout{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(28px,4vw,72px); align-items:start; } .faq-intro{ position:sticky; top:calc(var(--header-h) + 32px); } .faq-intro .lead{ margin-top:18px; } .faq-body .faq{ border-top:1px solid var(--line); } @media (max-width:900px){ .faq-layout{ grid-template-columns:1fr; } .faq-intro{ position:static; } } /* Kapak slider'ı (referans detay) */ .cover-slider{ position:relative; } .cover-slider__track{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; border:1px solid var(--line); border-radius:var(--r); background:var(--bg-soft); scrollbar-width:none; -webkit-overflow-scrolling:touch; } .cover-slider__track::-webkit-scrollbar{ display:none; } .cover-slider__slide{ flex:0 0 100%; scroll-snap-align:start; margin:0; } .cover-slider__slide img{ width:100%; height:auto; display:block; } .cover-slider__btn{ position:absolute; top:50%; transform:translateY(-50%); z-index:2; display:grid; place-items:center; width:42px; height:42px; border:1px solid var(--line); border-radius:var(--r-sm); background:rgba(255,255,255,.92); color:var(--ink); box-shadow:var(--shadow-sm); cursor:pointer; transition:background var(--dur), color var(--dur), border-color var(--dur), opacity var(--dur); } .cover-slider__btn:hover{ background:var(--accent); border-color:var(--accent); color:#fff; } .cover-slider__btn:disabled{ opacity:.35; pointer-events:none; } .cover-slider__btn--prev{ left:14px; } .cover-slider__btn--next{ right:14px; } .cover-slider__count{ position:absolute; right:14px; bottom:12px; z-index:2; padding:4px 10px; border-radius:var(--r-sm); background:rgba(11,11,11,.82); color:#fff; font-size:.6875rem; letter-spacing:.08em; } .no-js .cover-slider__btn, .no-js .cover-slider__count{ display:none; } /* Büyütülebilir görseller + lightbox */ [data-lightbox]{ cursor:zoom-in; } .lightbox{ position:fixed; inset:0; z-index:1100; display:flex; align-items:center; justify-content:center; background:rgba(5,6,8,.93); padding:clamp(16px,4vw,56px); opacity:0; visibility:hidden; transition:opacity .25s var(--ease), visibility .25s; } .lightbox.is-open{ opacity:1; visibility:visible; } .lightbox img{ max-width:min(1400px,94vw); max-height:86vh; width:auto; height:auto; border-radius:var(--r); box-shadow:var(--shadow-lg); } .lightbox__caption{ position:absolute; left:50%; bottom:clamp(14px,3vw,28px); transform:translateX(-50%); max-width:80vw; text-align:center; font:400 var(--fs-xs) var(--font-mono); color:rgba(255,255,255,.75); } .lightbox__btn{ position:absolute; z-index:2; display:grid; place-items:center; width:46px; height:46px; border:1px solid rgba(255,255,255,.25); border-radius:var(--r-sm); background:rgba(255,255,255,.08); color:#fff; cursor:pointer; transition:background var(--dur), border-color var(--dur); } .lightbox__btn:hover{ background:var(--accent); border-color:var(--accent); } .lightbox__btn--close{ top:18px; right:18px; } .lightbox__btn--prev{ left:18px; top:50%; transform:translateY(-50%); } .lightbox__btn--next{ right:18px; top:50%; transform:translateY(-50%); } .lightbox__count{ position:absolute; top:26px; left:50%; transform:translateX(-50%); font:500 .75rem var(--font-mono); color:rgba(255,255,255,.7); letter-spacing:.1em; } body.lightbox-open{ overflow:hidden; } /* -------------------------------------------------------------------------- 27 — REVEAL / CURSOR / SPOTLIGHT -------------------------------------------------------------------------- */ /* Scroll reveal — yalnızca .js altında gizlenir; no-js'te içerik daima görünür. JS tarafında 2.5s failsafe tüm reveal'ları açar. */ .js [data-reveal]{ opacity:0; transform:translateY(22px); } .js [data-reveal].is-revealed{ opacity:1; transform:none; transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); transition-delay:var(--reveal-delay, 0ms); } .js [data-reveal="fade"]{ transform:none; } .js [data-reveal="right"]{ transform:translateX(-24px); } .js [data-reveal="scale"]{ transform:scale(.985); } .no-js [data-reveal]{ opacity:1; transform:none; } /* Özel imleç (pointer:fine + no-reduced-motion; JS body.has-cursor ekler) */ body.has-cursor, body.has-cursor a, body.has-cursor button{ cursor:none; } .cursor-dot, .cursor-ring{ position:fixed; top:0; left:0; z-index:1000; pointer-events:none; border-radius:50%; will-change:transform; } .cursor-dot{ width:7px; height:7px; background:var(--accent); } .cursor-ring{ width:34px; height:34px; border:1.5px solid rgba(255,113,22,.5); transition:width .25s, height .25s, border-color .25s, background-color .25s; } /* Aktif halka (bağlantı/buton üstünde). Eski hâli neredeyse siyahtı, bu yüzden koyu butonların ve koyu bölümlerin üstünde kayboluyordu. Artık vurgu rengiyle dolu bir halka + dışına ince açık bir kontur: açık zeminde turuncu, koyu zeminde beyaz kontur okunur. */ .cursor-ring.is-active{ width:52px; height:52px; border-color:var(--accent); background:rgba(255,113,22,.14); box-shadow:0 0 0 1px rgba(255,255,255,.45), 0 0 12px rgba(255,113,22,.35); } /* Spotlight — .spot taşıyan çerçeve/kartlarda imleci izleyen turuncu tül. pointer-events:none → tıklamayı asla engellemez. */ .spot{ position:relative; } .spot::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(255,113,22,.055), transparent 55%); opacity:0; transition:opacity .3s var(--ease); } .spot:hover::after{ opacity:1; } /* -------------------------------------------------------------------------- 28 — REDUCED MOTION / PRINT -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } .js [data-reveal]{ opacity:1 !important; transform:none !important; } .ticker__track{ animation:none; } .ticker__mask{ -webkit-mask-image:none; mask-image:none; overflow-x:auto; } .term__caret{ animation:none; } .pulse-dot{ animation:none; } .work-card.is-cycling .work-card__progress i{ animation:none; } .cursor-dot, .cursor-ring{ display:none; } .spot::after{ display:none; } } @media print{ .site-header, .site-footer, .mobile-nav, .ticker, .reading-progress, .filters, .cursor-dot, .cursor-ring, .article-rail, .share, .work-card__overlay, .work-card__progress{ display:none !important; } body{ color:#000; } a{ text-decoration:underline; } .section{ padding-block:24px; } .hero{ min-height:0; } } /* -------------------------------------------------------------------------- 29 — DARK MODE (AKTİF — NOVA/tema-7 renklendirmesi) Tetikleme: html[data-theme="dark"] (header'daki .theme-toggle + localStorage). Yalnızca token override + az sayıda koyu-kapsamlı kural; markup değişmez. -------------------------------------------------------------------------- */ html[data-theme="dark"]{ /* NOVA yüzeyleri: void sayfa, abyss bantlar, panel kartlar */ --bg:#05060B; --bg-soft:#0A0D16; --surface:#0D101C; --ink:#F2F4FA; --ink-2:#E5E9F4; --ink-3:#D3D9EA; --muted:#98A1B6; --faint:#77809A; --line:#232A42; --line-dark:#232A42; --accent:#FF7116; --accent-600:#FF8A3D; --accent-050:#221208; --accent-border:#54301A; /* Açık temadaki koyu bantlar dark modda abyss/panel-2 tonlarına oturur */ --dark:#090B14; --dark-2:#12162A; --on-dark:#F2F4FA; --on-dark-muted:#98A1B6; --on-dark-faint:#77809A; --on-dark-tag:#C6CDE2; --on-dark-link:#98A1B6; --header-bg:rgba(5,6,11,.78); --header-bg-solid:rgba(7,9,16,.94); --ok-050:#0A1F12; --ok-border:#1E4D2E; --ok-ink:#86EFAC; --err-050:#220C0C; --err-border:#5C2222; --err-ink:#FCA5A5; --info-050:#0B1626; --info-border:#1E3A5F; --info-ink:#93C5FD; --warn-050:#211804; --warn-border:#5C4409; --warn-ink:#FCD34D; --code-bar:#0A0E1B; --code-bar-line:#1C2340; --code-text:#DBE2F0; --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 12px 32px -18px rgba(0,0,0,.8); --shadow-lg:0 28px 70px -40px rgba(0,0,0,.9); color-scheme:dark; } /* Atmosfer: çok hafif turuncu + mor aurora (tema-7'nin sevilen renklendirmesi) */ html[data-theme="dark"] body::after{ content:""; position:fixed; inset:0; z-index:-2; pointer-events:none; background: radial-gradient(42rem 42rem at 8% -10%, rgba(255,113,22,.09), transparent 68%), radial-gradient(38rem 38rem at 96% 30%, rgba(124,77,255,.07), transparent 70%), radial-gradient(34rem 34rem at 40% 110%, rgba(34,211,238,.05), transparent 70%); } /* Sert beyaz yerine turuncu kenar + hafif glow — NOVA hover dili */ html[data-theme="dark"] .work-card:hover, html[data-theme="dark"] .work-feature:hover, html[data-theme="dark"] .svc-bento__card:hover, html[data-theme="dark"] .post-card:hover, html[data-theme="dark"] .post-feature:hover{ border-color:rgba(255,113,22,.55); box-shadow:0 0 30px -12px rgba(255,113,22,.35), var(--shadow-md); } html[data-theme="dark"] .svc-card:hover{ background:var(--bg-soft); } /* İnce glow vurguları */ html[data-theme="dark"] .btn--accent{ box-shadow:0 0 22px -6px rgba(255,113,22,.5); } html[data-theme="dark"] .btn--accent:hover{ box-shadow:0 0 32px -4px rgba(255,113,22,.62); } html[data-theme="dark"] .hl{ text-shadow:0 0 26px rgba(255,113,22,.42); } html[data-theme="dark"] .stack-row__label .dot, html[data-theme="dark"] .ledger__era .dot, html[data-theme="dark"] .skills-dot{ box-shadow:0 0 10px rgba(255,113,22,.85); } html[data-theme="dark"] .pulse-dot{ box-shadow:0 0 0 4px rgba(34,197,94,.18), 0 0 14px rgba(74,222,128,.55); } html[data-theme="dark"] .process__step--accent .process__num{ box-shadow:0 0 20px -4px rgba(255,113,22,.5); } html[data-theme="dark"] .spot::after{ background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(255,113,22,.1), transparent 55%); } html[data-theme="dark"] .cursor-dot{ box-shadow:0 0 12px rgba(255,113,22,.9); } html[data-theme="dark"] .cursor-ring.is-active{ box-shadow:0 0 0 1px rgba(5,6,11,.55), 0 0 14px rgba(255,113,22,.45); } /* Karanlıkta sabit renk taşıyan bileşen düzeltmeleri */ html[data-theme="dark"] .ticker{ background:rgba(13,16,28,.62); } html[data-theme="dark"] .cover-slider__btn{ background:rgba(13,16,28,.92); color:var(--ink); } html[data-theme="dark"] .cover-slider__btn:hover{ background:var(--accent); color:#fff; } html[data-theme="dark"] .term{ box-shadow:0 0 40px -18px rgba(255,113,22,.25), var(--shadow-md); } html[data-theme="dark"] .work-card__year{ background:rgba(5,6,11,.88); border:1px solid var(--line); } html[data-theme="dark"] .footer-cta__glow{ background:radial-gradient(circle, rgba(255,113,22,.16), transparent 62%); } /* -------------------------------------------------------------------------- 28 — BLOK GÖRÜNÜMÜ (panelden gelen ayarlar) Motor her bloğu `.blk` ile sarar ve panelde seçilen arkaplan / genişlik / dikey boşluk / hizalama değerlerini `blk--bg-* · blk--w-* · blk--pad-* · blk--align-*` sınıflarına çevirir (BlockRenderer::wrap). Bu kurallar olmadan panelin görünüm kontrolleri sessizce hiçbir şey yapmıyordu. `partials/block-sections.blade.php` bir BÖLÜMÜ açan bloğun arkaplanını ve boşluğunu
'a yükseltir (zemin bölümün tamamını kaplasın diye); bölüm ortasındaki bir bloğun kendi zemini ise aşağıdaki .blk kurallarıyla basılır. İki yol da aynı renk sözlüğünü kullanır. -------------------------------------------------------------------------- */ /* Bölüm zeminleri — `_bg` bölüm açan blokta seçildiğinde. */ .section--light{ background:var(--surface); } .section--primary{ background:var(--accent); color:#fff; } .section--accent{ background:var(--accent-050); } .section--primary :where(h1,h2,h3,h4,.eyebrow,.lead){ color:#fff; } .section--primary .tbtn, .section--primary a{ color:#fff; } /* Bölümün dikey boşluğu — bölümü AÇAN bloğun `_pt`'si ve KAPATAN bloğun `_pb`'si buraya yükseltilir (block-sections). Bir bloğun üst boşluğunu kısmak istediğinizde bölümün kendi boşluğu araya girmesin diye: aksi hâlde iki boşluk üst üste binerdi ve "az" demek hiçbir şeyi azaltmazdı. İki sınıf seçici (.section.section--x) BİLEREK: referans/hizmet gövdesi `.case-body .section` ile kendi ritmini kuruyor (0,2,0) ve tek sınıflı bir modifiye (0,1,0) ona yeniliyordu — yani panelden boşluk seçmek o sayfalarda sessizce hiçbir şey yapmıyordu. Kullanıcı ayarı temanın ritmini yenmeli. */ .section.section--pt-none{ padding-top:0; } .section.section--pt-xs{ padding-top:clamp(8px,1vw,14px); } .section.section--pt-sm{ padding-top:clamp(16px,2vw,26px); } .section.section--pt-md{ padding-top:clamp(28px,3vw,48px); } .section.section--pt-lg{ padding-top:clamp(44px,5vw,76px); } .section.section--pt-xl{ padding-top:clamp(64px,7vw,112px); } .section.section--pb-none{ padding-bottom:0; } .section.section--pb-xs{ padding-bottom:clamp(8px,1vw,14px); } .section.section--pb-sm{ padding-bottom:clamp(16px,2vw,26px); } .section.section--pb-md{ padding-bottom:clamp(28px,3vw,48px); } .section.section--pb-lg{ padding-bottom:clamp(44px,5vw,76px); } .section.section--pb-xl{ padding-bottom:clamp(64px,7vw,112px); } /* Blok zeminleri — bölüm ortasındaki bir blok kendi zeminini taşıdığında. Zemin varsa nefes alacak boşluk da olmalı, yoksa metin kenara yapışır. */ .blk{ position:relative; } .blk--bg-light, .blk--bg-muted, .blk--bg-dark, .blk--bg-primary, .blk--bg-accent{ padding-block:clamp(28px,3vw,48px); } .blk--bg-light{ background:var(--surface); } .blk--bg-muted{ background:var(--bg-soft); } .blk--bg-dark{ background:var(--dark); color:var(--on-dark); } .blk--bg-primary{ background:var(--accent); color:#fff; } .blk--bg-accent{ background:var(--accent-050); } .blk--bg-dark :where(h1,h2,h3,h4){ color:var(--on-dark); } .blk--bg-dark :where(p,li,.lead,.eyebrow){ color:var(--on-dark-muted); } .blk--bg-dark .prose :where(p,li){ color:var(--on-dark-muted); } .blk--bg-dark .prose a{ color:var(--accent); } .blk--bg-primary :where(h1,h2,h3,h4,p,li,a,.lead,.eyebrow){ color:#fff; } /* Genişlik — `_width`. Blok kendi .container'ını bastığı için ölçüyü ona veriyoruz. */ .blk--w-narrow > .container{ max-width:var(--narrow); } .blk--w-wide > .container{ max-width:1600px; } /* Boşluk basamakları — `_pt/_pb/_px` (iç) ve `_mt/_mb/_mx` (dış). Tek bir "dikey boşluk" düğmesi panelin gerçekten sorulan şeyi ("üstü az, altı çok") ifade edemiyordu; ayrıca iç boşluk (bloğun renkli bandının içi) ile dış boşluk (bloklar ARASI aralık) farklı iki soru. Bu yüzden kenar başına ayrı kontrol var, hepsi aynı basamakları paylaşıyor. `0` (none) BİLEREK var: temanın varsayılan ritmini sıfırlamanın tek yolu. */ .blk--pt-none{ padding-top:0; } .blk--pt-xs{ padding-top:clamp(8px,1vw,14px); } .blk--pt-sm{ padding-top:clamp(16px,2vw,26px); } .blk--pt-md{ padding-top:clamp(28px,3vw,48px); } .blk--pt-lg{ padding-top:clamp(44px,5vw,76px); } .blk--pt-xl{ padding-top:clamp(64px,7vw,112px); } .blk--pb-none{ padding-bottom:0; } .blk--pb-xs{ padding-bottom:clamp(8px,1vw,14px); } .blk--pb-sm{ padding-bottom:clamp(16px,2vw,26px); } .blk--pb-md{ padding-bottom:clamp(28px,3vw,48px); } .blk--pb-lg{ padding-bottom:clamp(44px,5vw,76px); } .blk--pb-xl{ padding-bottom:clamp(64px,7vw,112px); } .blk--px-none{ padding-inline:0; } .blk--px-xs{ padding-inline:clamp(8px,1vw,14px); } .blk--px-sm{ padding-inline:clamp(16px,2vw,26px); } .blk--px-md{ padding-inline:clamp(28px,3vw,48px); } .blk--px-lg{ padding-inline:clamp(44px,5vw,76px); } .blk--px-xl{ padding-inline:clamp(64px,7vw,112px); } .blk--mt-none{ margin-top:0; } .blk--mt-xs{ margin-top:clamp(8px,1vw,14px); } .blk--mt-sm{ margin-top:clamp(16px,2vw,26px); } .blk--mt-md{ margin-top:clamp(28px,3vw,48px); } .blk--mt-lg{ margin-top:clamp(44px,5vw,76px); } .blk--mt-xl{ margin-top:clamp(64px,7vw,112px); } .blk--mb-none{ margin-bottom:0; } .blk--mb-xs{ margin-bottom:clamp(8px,1vw,14px); } .blk--mb-sm{ margin-bottom:clamp(16px,2vw,26px); } .blk--mb-md{ margin-bottom:clamp(28px,3vw,48px); } .blk--mb-lg{ margin-bottom:clamp(44px,5vw,76px); } .blk--mb-xl{ margin-bottom:clamp(64px,7vw,112px); } .blk--mx-none{ margin-inline:0; } .blk--mx-xs{ margin-inline:clamp(8px,1vw,14px); } .blk--mx-sm{ margin-inline:clamp(16px,2vw,26px); } .blk--mx-md{ margin-inline:clamp(28px,3vw,48px); } .blk--mx-lg{ margin-inline:clamp(44px,5vw,76px); } .blk--mx-xl{ margin-inline:clamp(64px,7vw,112px); } /* Hizalama — `_align`. .section-head iki sütunlu bir grid; ortalanınca tek sütuna düşmezse "ortalandı" görüntüsü vermez. */ .blk--align-center{ text-align:center; } .blk--align-right{ text-align:right; } .blk--align-center .section-head, .blk--align-right .section-head{ grid-template-columns:1fr; } .blk--align-center .section-head__aside, .blk--align-right .section-head__aside{ max-width:none; } .blk--align-center :where(.btn-row,.section-foot,.tag-list){ justify-content:center; } .blk--align-right :where(.btn-row,.section-foot,.tag-list){ justify-content:flex-end; } .blk--align-center .prose{ margin-inline:auto; } /* Yan yana bölüm — bölüm başlığında "Bölüm düzeni: Yan yana" seçildiğinde. Izgara .stack-layout'tan geliyor (tek kaynak); iç bloklar kendi .container'larını bastığı için o ölçüler burada nötrleniyor. */ .stack-intro > .blk > .container, .stack-body > .blk > .container, .stack-intro > .blk, .stack-body > .blk{ max-width:none; padding-inline:0; } .stack-intro > .blk + .blk, .stack-body > .blk + .blk{ margin-top:clamp(20px,2.4vw,36px); } @media (min-width:901px){ .section--split .stack-intro{ position:sticky; top:calc(var(--header-h) + 32px); } } /* Dar sütunda .section-head'in iki sütunlu ızgarası anlamsız — alt alta düşer. */ .section--split .stack-intro .section-head{ grid-template-columns:1fr; gap:18px; } .section--split .stack-intro .section-head__aside{ max-width:none; } /* Koyu bölümde kart ızgaraları — `_bg=dark` seçilen bölümde de doğru görünsün. */ .section--dark .skill-grid, .blk--bg-dark .skill-grid{ background:var(--line-dark); border-color:var(--line-dark); } .section--dark .skill-card, .blk--bg-dark .skill-card{ background:var(--dark-2); } .section--dark .skill-card:hover, .blk--bg-dark .skill-card:hover{ background:var(--dark); } .section--dark .skill-card__head, .blk--bg-dark .skill-card__head{ border-color:var(--line-dark); } .section--dark .ledger, .blk--bg-dark .ledger{ background:var(--dark-2); border-color:var(--line-dark); } .section--dark .ledger__row + .ledger__row, .blk--bg-dark .ledger__row + .ledger__row{ border-color:var(--line-dark); } .section--dark .ledger__body p, .blk--bg-dark .ledger__body p{ color:var(--on-dark-muted); }