/* ========================================================================== Bağlan Mimarlık — site stilleri Renk ve yazı boyutu değişkenleri Panel > Renk, Buton & Yazı'dan da ayarlanır (--red, --ink, --paper, --stone, --k-*, --fw-head, --wd-head). ========================================================================== */ @font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url(/assets/fonts/archivo-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url(/assets/fonts/archivo-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/plexmono-400-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/plexmono-400-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/plexmono-500-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/plexmono-500-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { --red: #FF0000; --ink: #0C0C0D; --glass: #14212F; --paper: #ECEAE4; --stone: #8B8A85; --ink-2: color-mix(in srgb, var(--ink) 92%, #fff); --cizgi-k: color-mix(in srgb, var(--paper) 14%, transparent); --cizgi-a: color-mix(in srgb, var(--ink) 16%, transparent); --soluk-k: color-mix(in srgb, var(--paper) 58%, var(--ink)); --soluk-a: color-mix(in srgb, var(--ink) 62%, var(--paper)); --sans: "Archivo", "Helvetica Neue", Arial, sans-serif; --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; --wd: var(--wd-head, 112); --fw: var(--fw-head, 560); --pad: clamp(16px, 4vw, 56px); --gut: clamp(12px, 1.8vw, 28px); --max: 1760px; --ust-satir: 76px; --t-hero: calc(clamp(3.1rem, 10.4vw, 10.5rem) * var(--k-hero, 1)); --t-h1: calc(clamp(2.8rem, 8vw, 7.5rem) * var(--k-h1, 1)); --t-h2: calc(clamp(1.9rem, 4.4vw, 4rem) * var(--k-h2, 1)); --t-h3: calc(clamp(1.2rem, 1.7vw, 1.625rem) * var(--k-h3, 1)); --t-lead: calc(clamp(1.08rem, 1.45vw, 1.375rem) * var(--k-lead, 1)); --t-body: calc(clamp(1rem, .95rem + .2vw, 1.0625rem) * var(--k-body, 1)); --ease: cubic-bezier(.2, .8, .2, 1); --ease-io: cubic-bezier(.7, 0, .2, 1); } /* ---------- temel ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; } body { background: var(--ink); color: var(--paper); font-family: var(--sans); font-size: var(--t-body); line-height: 1.55; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: clip; } img, svg, video { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } ol, ul { list-style: none; padding: 0; } :focus-visible { outline: 2px solid var(--red); outline-offset: 3px; } ::selection { background: var(--red); color: var(--ink); } .mono { font-family: var(--mono); font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; font-weight: 400; } .gizli { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .atla { position: fixed; left: 12px; top: -60px; z-index: 200; background: var(--red); color: var(--ink); padding: 10px 14px; font-weight: 600; } .atla:focus { top: 12px; } [data-tema="acik"] { background: var(--paper); color: var(--ink); } [data-tema="koyu"] { background: var(--ink); color: var(--paper); } [data-tema="kirmizi"] { background: var(--red); color: var(--ink); } [data-tema="cam"] { background: var(--glass); color: var(--paper); --ink-2: color-mix(in srgb, var(--glass) 85%, #fff); } /* açık zeminde koyu zemin için yazılmış çizgi ve soluk metin renkleri tersine döner */ [data-tema="acik"] { --cizgi-k: var(--cizgi-a); --soluk-k: var(--soluk-a); --ink-2: color-mix(in srgb, var(--paper) 86%, var(--ink)); } [data-tema="acik"] .cip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); } .kap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--pad); } .izgara { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); } .img-bos { display: block; width: 100%; height: 100%; background: repeating-linear-gradient(135deg, transparent 0 9px, var(--cizgi-k) 9px 10px); } /* başlık kelimeleri: satır satır yukarıdan açılır */ /* üstte büyük harf noktaları (İ, Ö, Ü) ve altta çengeller (Ş, Ç, Ğ) maskeye takılmasın diye pay; negatif margin satır aralığını korur */ .k { display: inline-block; overflow: hidden; vertical-align: top; padding: .2em .04em .14em; margin: -.2em -.04em -.14em; } .k > span { display: inline-block; } .js [data-satirlar] .k > span { transform: translateY(135%); transition: transform 1.1s var(--ease); transition-delay: calc(var(--i, 0) * 55ms); } .js [data-satirlar].gorunur .k > span { transform: none; } /* ---------- cephe ızgarası (sayfanın üstünde ince dikmeler) ---------- */ .cizgiler { position: fixed; inset: 0; z-index: 40; pointer-events: none; display: grid; grid-template-columns: repeat(6, 1fr); padding-inline: var(--pad); max-width: var(--max); margin-inline: auto; mix-blend-mode: difference; } .cizgiler span { border-left: 1px solid rgba(255, 255, 255, .055); } .cizgiler span:last-child { border-right: 1px solid rgba(255, 255, 255, .055); } @media (max-width: 900px) { .cizgiler { grid-template-columns: repeat(3, 1fr); } .cizgiler span:nth-child(n+4) { display: none; } .cizgiler span:nth-child(3) { border-right: 1px solid rgba(255, 255, 255, .055); } } /* ---------- açılış ---------- */ .giris { display: none; } .js:not(.giris-gorulmus) .giris { position: fixed; inset: 0; z-index: 120; background: var(--ink); color: var(--paper); display: grid; place-content: center; justify-items: center; gap: 22px; animation: giris-kapan .9s var(--ease-io) 1.55s forwards; } .giris__isaret { width: 92px; height: auto; overflow: visible; } .giris__isaret .isaret__kare { stroke-dasharray: 1820; stroke-dashoffset: 1820; animation: ciz 1s var(--ease) .1s forwards; } .giris__isaret .isaret__gri { transform: translateY(40px); opacity: 0; animation: kanca .7s var(--ease) .55s forwards; } .giris__isaret .isaret__kirmizi { transform: translateY(-40px); opacity: 0; animation: kanca .7s var(--ease) .7s forwards; } .giris__yil { color: var(--soluk-k); opacity: 0; animation: belir .6s ease .9s forwards; } @keyframes ciz { to { stroke-dashoffset: 0; } } @keyframes kanca { to { transform: none; opacity: 1; } } @keyframes belir { to { opacity: 1; } } @keyframes giris-kapan { to { clip-path: inset(0 0 100% 0); visibility: hidden; } } /* ---------- header ---------- Panel › Header & Logo: yükseklik (--ust-satir / --ust-satir-m), renkler (--ust-bg, --ust-renk, --ust-vurgu), üst şerit (--serit-*), logo ortada düzeni (.ust--ortali), yapışkan değil (.ust--sabit-degil), alt çizgi yok (.ust--cizgisiz). */ :root { --ust-h: calc(var(--ust-satir, 76px) + var(--serit-h, 0px)); } body:has(.ust--serit) { --serit-h: 34px; } .ust { position: fixed; inset: 0 0 auto; z-index: 60; height: var(--ust-h); --hdr-ink: #0C0C0D; --hdr-accent: var(--ust-vurgu, var(--red)); color: var(--paper); transition: transform .5s var(--ease), color .35s ease, background-color .35s ease; } .ust--sabit-degil { position: absolute; } .ust__satir { height: var(--ust-satir, 76px); display: flex; align-items: center; gap: clamp(16px, 2.6vw, 40px); padding-inline: var(--pad); } .ust::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .35s ease; background: var(--ust-bg, color-mix(in srgb, var(--zemin, var(--ink)) 82%, transparent)); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); border-bottom: 1px solid var(--cizgi-k); } .ust--cizgisiz::before { border-bottom: 0; } .ust.kaydi::before { opacity: 1; } .ust.kaydi { color: var(--ust-renk, var(--paper)); } .ust.kaydi.acik, .ust.kaydi.kirmizi { color: var(--ust-renk, var(--ink)); } /* görselli bölümlerin üstünde menü okunaklı kalsın: header'ın arkasında yumuşak koyu geçiş */ .ust::after { content: ""; position: absolute; inset: 0 0 -40px; z-index: -2; pointer-events: none; transition: opacity .35s; background: linear-gradient(180deg, color-mix(in srgb, var(--ink) 62%, transparent) 0%, color-mix(in srgb, var(--ink) 28%, transparent) 60%, transparent 100%); } .ust.acik::after, .ust.kirmizi::after, .ust.kaydi::after { opacity: 0; } .ust:not(.acik):not(.kirmizi) .ms-nav__link, .ust:not(.acik):not(.kirmizi) .ust__dil, .ust:not(.acik):not(.kirmizi) .logo, .ust:not(.acik):not(.kirmizi) .ust__tel { text-shadow: 0 1px 12px rgba(0, 0, 0, .35); } .ust.gizle { transform: translateY(-100%); } .ust.acik { color: var(--ink); --zemin: var(--paper); } .ust.acik::before { border-bottom-color: var(--cizgi-a); } .ust.kirmizi { color: var(--ink); --zemin: var(--red); } .ust.cam { --zemin: var(--glass); } .ust__logo { flex: none; display: flex; align-items: center; } .logo { display: flex; align-items: center; gap: 12px; } .logo__isaret { width: 38px; height: auto; } .logo__yazi { display: grid; line-height: 1; } .logo__yazi b { font-weight: 760; font-size: 1.12rem; letter-spacing: .14em; font-stretch: 118%; } .logo__yazi small { font-family: var(--mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; opacity: .62; margin-top: 4px; } .logo-gorsel { display: block; height: auto; max-height: calc(var(--ust-satir, 76px) - 16px); object-fit: contain; } .logo-gorsel--mobil { display: none; } /* menü: panelde "menünün yeri" — logonun yanında / ortada / butonların yanında */ .ust__menu { display: flex; align-items: center; gap: clamp(14px, 2vw, 32px); } .ust__menu--sol { margin-right: auto; } .ust__menu--orta { flex: 1; justify-content: center; } .ust__menu--sag { margin-left: auto; } .ust__satir > .ust__menu--sag + .ust__arac, .ust__satir > .ust__menu--sol + .ust__arac { margin-left: 0; } .ust__arac { display: flex; align-items: center; gap: clamp(12px, 1.6vw, 24px); flex: none; } .ust__menu .ms-nav__link { position: relative; display: flex; align-items: baseline; gap: 6px; font-size: .94rem; padding-block: 6px; white-space: nowrap; } .ust__menu .ms-nav__link .mono { font-size: .6rem; opacity: .5; } .ust__menu .ms-nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); } .ust__menu .ms-nav__link:hover::after { transform: scaleX(1); transform-origin: left; } .ust__menu .ms-nav__link[aria-current]::after { transform: scaleX(1); background: var(--ust-vurgu, var(--red)); height: 2px; } /* logo ortada, menü iki yanında */ .ust--ortali .ust__satir { display: grid; grid-template-columns: 1fr auto 1fr auto; } .ust--ortali .ust__menu--sol { justify-self: end; margin: 0; } .ust--ortali .ust__menu--sag { justify-self: start; margin: 0; } /* megamenü (Panel › Megamenü): menü öğesinin altında açılan panel */ .ms-nav__item { display: flex; align-items: center; gap: 2px; } .ms-nav__caret { width: 22px; height: 22px; display: grid; place-items: center; opacity: .7; } .ms-nav__caret svg { width: 12px; height: 12px; transition: transform .3s var(--ease); } .ms-nav__item.is-open .ms-nav__caret svg { transform: rotate(180deg); } .ust .ms-mega { text-shadow: none; font-family: var(--sans); --mega-radius: 0; } .ust .ms-mega--konteyner .ms-mega__in { padding-inline: var(--pad); max-width: var(--max); margin-inline: auto; } /* telefon bloğu, sosyal ikonlar, çağrı butonları */ .ust__tel { display: grid; line-height: 1.15; font-size: .9rem; white-space: nowrap; } .ust__tel small { font-size: .56rem; opacity: .6; } .ms-soc { display: inline-flex; align-items: center; gap: 10px; } .ms-soc__a { display: grid; place-items: center; opacity: .8; transition: opacity .2s, color .2s; } .ms-soc__a:hover { opacity: 1; color: var(--red); } .ms-soc__a svg { width: 15px; height: 15px; } .ms-soc--daire .ms-soc__a { width: 28px; height: 28px; border: 1px solid currentColor; border-radius: 50%; } .ms-soc--daire .ms-soc__a svg { width: 13px; height: 13px; } .ms-soc__txt { font: 600 .7rem var(--mono); } .ust__cta { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; font-size: .86rem; white-space: nowrap; border: 1px solid currentColor; transition: background-color .3s, color .3s, border-color .3s; } .ust__cta:not([style*="background"]) { background: transparent; } .ust__cta:hover { background: var(--ust-vurgu, var(--red)); border-color: var(--ust-vurgu, var(--red)); color: var(--ink); } .ust__cta .ms-ikon, .ust__cta .rte-ikon { width: 14px; height: 14px; } .ust__dil { display: flex; gap: 5px; align-items: center; } .ust__dil span { opacity: .45; transition: opacity .2s; } .ust__dil span.on, .ust__dil:hover span { opacity: 1; } .ust__dil i { font-style: normal; opacity: .3; } .ust__ac { display: none; align-items: center; gap: 10px; height: 40px; } .ust__ac i { position: relative; width: 26px; height: 9px; border-block: 1.5px solid currentColor; transition: transform .4s var(--ease); } .menu-acik .ust__ac i { transform: scaleY(0.2); } .menu-acik .ust { color: var(--paper); --zemin: var(--ink); } .menu-acik .ust::before { opacity: 0; } /* üst şerit (Panel › Header & Logo › Üst şerit) */ .serit { height: var(--serit-h, 34px); display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-inline: var(--pad); background: var(--serit-bg, color-mix(in srgb, var(--ink) 78%, transparent)); color: var(--serit-renk, var(--paper)); font-size: .62rem; text-transform: none; letter-spacing: .03em; border-bottom: 1px solid color-mix(in srgb, var(--paper) 10%, transparent); } .serit__sol, .serit__sag { display: flex; align-items: center; gap: 18px; min-width: 0; } .serit a, .serit__konum { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .serit a:hover { color: var(--red); } .serit .ikon { width: 13px; height: 13px; opacity: .7; } .serit__not { display: inline-flex; align-items: center; gap: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .serit__nokta { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34, 197, 94, .6); animation: nabiz 2s infinite; flex: none; } @keyframes nabiz { 70% { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } } .serit .ms-soc__a svg { width: 13px; height: 13px; } @media (max-width: 1280px) { .ust__tel { display: none; } } @media (max-width: 1100px) { .ust__arac .ms-soc { display: none; } } @media (max-width: 980px) { .ust__menu { display: none; } .ust--ortali .ust__satir { display: flex; } .ust--ortali .ust__logo { margin-inline: auto; } .ust__ac { display: inline-flex; } .ust__dil { display: none; } .ust__satir { height: var(--ust-satir-m, 64px); } :root { --ust-h: calc(var(--ust-satir-m, 64px) + var(--serit-h, 0px)); } .logo__isaret { width: 32px; } .logo-gorsel--masaustu { display: none; } .logo-gorsel--mobil { display: block; max-height: calc(var(--ust-satir-m, 64px) - 14px); } .ust__satir > .ust__logo { margin-right: auto; } body:has(.serit-mobil-gizle) { --serit-h: 0px; } .serit-mobil-gizle .serit { display: none; } .serit-mobil-not .serit__sag, .serit-mobil-not .serit__konum { display: none; } body:has(.serit-mobil-hepsi) { --serit-h: 58px; } .serit-mobil-hepsi .serit { flex-direction: column; justify-content: center; gap: 4px; } } @media (max-width: 640px) { .ust__cta { display: none; } } /* mobil menü */ .mmenu { position: fixed; inset: 0; z-index: 55; background: var(--ink); color: var(--paper); display: flex; flex-direction: column; justify-content: space-between; padding: calc(var(--ust-h) + 4vh) var(--pad) calc(28px + env(safe-area-inset-bottom)); clip-path: inset(0 0 100% 0); transition: clip-path .7s var(--ease-io); } .mmenu.acik { clip-path: inset(0 0 0 0); } .mmenu nav { display: grid; } .mmenu nav a { display: flex; align-items: baseline; gap: 14px; font-size: clamp(2.1rem, 9vw, 3.6rem); line-height: 1.12; font-weight: 560; font-stretch: 112%; border-bottom: 1px solid var(--cizgi-k); padding-block: 8px; transform: translateY(24px); opacity: 0; transition: transform .7s var(--ease), opacity .7s; } .mmenu.acik nav a { transform: none; opacity: 1; } .mmenu nav a:nth-child(2) { transition-delay: .05s; } .mmenu nav a:nth-child(3) { transition-delay: .1s; } .mmenu nav a:nth-child(4) { transition-delay: .15s; } .mmenu nav a:nth-child(5) { transition-delay: .2s; } .mmenu nav a:nth-child(6) { transition-delay: .25s; } .mmenu nav a:nth-child(7) { transition-delay: .3s; } .mmenu nav a .mono { font-size: .7rem; color: var(--red); } .mmenu nav a[aria-current] { color: var(--red); } .mmenu__alt { display: grid; gap: 10px; color: var(--soluk-k); text-transform: none; letter-spacing: .02em; } .mmenu__alt a { color: var(--paper); } .mmenu__cta { display: inline-flex; gap: 10px; align-items: center; width: fit-content; padding: 12px 18px; background: var(--red); color: var(--ink) !important; margin-bottom: 8px; text-transform: none; font-family: var(--sans); font-size: .95rem; } .mmenu__mega summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 14px; font-size: clamp(2.1rem, 9vw, 3.6rem); line-height: 1.12; font-weight: 560; font-stretch: 112%; border-bottom: 1px solid var(--cizgi-k); padding-block: 8px; } .mmenu__mega summary::-webkit-details-marker { display: none; } .mmenu__mega summary .mono { font-size: .7rem; color: var(--red); } .mmenu__mega .ms-mega-m { padding: 16px 0; --mega-ink: var(--paper); color: var(--paper); } .mmenu__tumu { display: block; padding: 8px 0 16px; color: var(--red); } /* ---------- ortak parçalar ---------- */ .etiket { display: flex; align-items: center; gap: 12px; color: inherit; opacity: .62; } .etiket i { display: block; width: 28px; height: 1px; background: currentColor; } .bag { display: inline-flex; align-items: center; gap: 10px; font-size: 1rem; padding-block: 6px; position: relative; width: fit-content; } .bag::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; opacity: .35; } .bag::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); z-index: 1; } .bag:hover::before { transform: scaleX(1); } .bag sup { font-size: .62rem; vertical-align: super; opacity: .6; } .ok { width: 1em; height: 1em; flex: none; transition: transform .45s var(--ease); } .bag:hover .ok, a:hover > .ok { transform: translate(3px, -3px); } .cizgili { border-bottom: 1px solid currentColor; } .bolum-bas { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); row-gap: 28px; align-items: end; margin-bottom: clamp(56px, 9vw, 130px); } .bolum-bas .etiket { grid-column: 1 / span 3; align-self: start; padding-top: .9em; } .bolum-bas__baslik { grid-column: 4 / span 9; font-size: var(--t-h1); line-height: .92; letter-spacing: -.025em; font-weight: var(--fw); font-stretch: calc(var(--wd) * 1%); } .bolum-bas__baslik--orta { font-size: var(--t-h2); line-height: 1.02; max-width: 18ch; } .bolum-bas .bag { grid-column: 4 / span 6; } @media (max-width: 800px) { .bolum-bas .etiket, .bolum-bas__baslik, .bolum-bas .bag { grid-column: 1 / -1; } } /* ---------- anasayfa: hero ---------- */ .hero { position: relative; height: 100svh; min-height: 640px; overflow: clip; isolation: isolate; } .hero__gorseller { position: absolute; inset: 0; z-index: -1; } .hero__kare { position: absolute; inset: 0; opacity: 0; } .hero__kare.on { opacity: 1; z-index: 1; } .hero__kare img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.5) contrast(1.06) brightness(.8); transform: scale(1.08); transition: transform 7s linear; } .hero__kare.on img { transform: scale(1); } /* karartma: Panel › Site Metinleri › Anasayfa › Görsel karartma (--hero-k, varsayılan %35) — açık renkli görsellerde yazı ve butonlar okunur kalır */ .hero__gorseller::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(12, 12, 13, .55) 0%, rgba(12, 12, 13, .05) 30%, rgba(12, 12, 13, .15) 55%, rgba(12, 12, 13, .9) 100%), linear-gradient(90deg, rgba(12, 12, 13, .45) 0%, transparent 55%), color-mix(in srgb, var(--ink) var(--hero-k, 35%), transparent); } .hero__paneller { position: absolute; inset: 0; z-index: 3; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(4, 1fr); pointer-events: none; } .hero__paneller span { background: var(--ink); transform-origin: 50% 0; transform: scaleY(0); border-right: 1px solid rgba(255, 255, 255, .04); } .js .hero__paneller span { transform: scaleY(1); animation: panel-ac 1.05s var(--ease-io) forwards; animation-delay: calc(var(--d, 0s) + 1.75s); } .js.giris-gorulmus .hero__paneller span { animation-delay: calc(var(--d, 0s) + .15s); } @keyframes panel-ac { to { transform: scaleY(0); } } .hero__ic { position: relative; z-index: 4; height: 100%; display: grid; grid-template-rows: auto 1fr auto; padding: calc(var(--ust-h) + 3vh) var(--pad) clamp(22px, 4.5vh, 52px); max-width: var(--max); margin-inline: auto; } .hero__ust { color: var(--paper); opacity: .72; } .hero__baslik { align-self: end; font-size: var(--t-hero); line-height: .88; letter-spacing: -.035em; font-weight: var(--fw); font-stretch: calc(var(--wd) * 1%); max-width: 11.5ch; margin-bottom: clamp(26px, 5vh, 60px); } .js .hero__baslik .k > span { transform: translateY(135%); animation: kelime-ac 1.15s var(--ease) forwards; animation-delay: calc(var(--i, 0) * 70ms + 2.15s); } .js.giris-gorulmus .hero__baslik .k > span { animation-delay: calc(var(--i, 0) * 70ms + .55s); } @keyframes kelime-ac { to { transform: none; } } .hero__alt { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); align-items: end; border-top: 1px solid var(--cizgi-k); padding-top: 18px; } .hero__metin { grid-column: 1 / span 5; font-size: var(--t-lead); line-height: 1.35; max-width: 34ch; color: color-mix(in srgb, var(--paper) 86%, transparent); } .hero__proje { grid-column: 9 / -1; position: relative; min-height: 112px; } .hero__kontrol { display: flex; align-items: center; gap: 18px; margin-bottom: 12px; } .hero__sayac { flex: 1; display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 6px; } .hero__sayac li { height: 2px; background: color-mix(in srgb, var(--paper) 28%, transparent); position: relative; } .hero__sayac button { position: absolute; inset: -10px 0; width: 100%; cursor: pointer; } .hero__sayac button i { position: absolute; left: 0; right: 0; top: 10px; height: 2px; display: block; overflow: hidden; } .hero__sayac li:hover { background: color-mix(in srgb, var(--paper) 55%, transparent); } .hero__oklar { display: flex; gap: 6px; flex: none; } .hero__oklar button { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--paper) 35%, transparent); border-radius: 50%; color: var(--paper); background: color-mix(in srgb, var(--ink) 35%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background-color .3s, border-color .3s, color .3s; } .hero__oklar button:hover, .hero__oklar button:focus-visible { background: var(--red); border-color: var(--red); color: var(--ink); } .hero__oklar svg { width: 16px; height: 16px; } .hero__sayac li i::before { content: ""; position: absolute; inset: 0; background: var(--red); transform: scaleX(0); transform-origin: left; } .hero__sayac li.bitti i::before { transform: scaleX(1); } .hero__sayac li.on i::before { animation: sayac var(--sure, 6.5s) linear forwards; } .hero.durdu .hero__sayac li.on i::before { animation-play-state: paused; } @keyframes sayac { to { transform: scaleX(1); } } .hero__etiket { position: absolute; left: 0; right: 0; top: 50px; display: grid; gap: 4px; opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .6s var(--ease); pointer-events: none; } .hero__etiket.on { opacity: 1; transform: none; pointer-events: auto; } .hero__etiket b { font-family: var(--sans); font-size: 1.05rem; font-weight: 560; letter-spacing: .01em; text-transform: none; } .hero__etiket span { opacity: .6; } .hero__etiket:hover b { color: var(--red); } .js [data-giris-ogesi] { opacity: 0; transform: translateY(14px); animation: oge-gel .9s var(--ease) 2.5s forwards; } .js.giris-gorulmus [data-giris-ogesi] { animation-delay: .9s; } @keyframes oge-gel { to { opacity: 1; transform: none; } } .hero__kenar { position: absolute; z-index: 4; right: calc(var(--pad) - 2px); top: 50%; transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl; display: flex; gap: 28px; align-items: center; color: var(--paper); opacity: .55; font-size: .62rem; } .hero__kaydir { display: flex; align-items: center; gap: 12px; } .hero__kaydir i { width: 1px; height: 56px; background: linear-gradient(currentColor 50%, transparent 0) 0 0 / 1px 200%; animation: kaydir 2.2s linear infinite; } @keyframes kaydir { to { background-position: 0 -112px; } } @media (max-width: 800px) { .hero__sol { grid-column: 1 / -1; margin-bottom: 18px; } .hero__metin { grid-column: 1 / -1; margin-bottom: 18px; } .hero__proje { grid-column: 1 / -1; } .hero__kenar { display: none; } } /* ---------- anasayfa: ilke + sayılar ---------- */ .ilke { padding-block: clamp(96px, 15vw, 220px) clamp(72px, 9vw, 140px); } .ilke .etiket { grid-column: 1 / span 3; padding-top: .6em; align-self: start; } .ilke__metin { grid-column: 4 / span 9; font-size: var(--t-h2); line-height: 1.06; letter-spacing: -.018em; font-weight: 480; font-stretch: 100%; } .ilke__metin .ki { transition: opacity .3s; } .js .ilke__metin .ki { opacity: .16; } .ilke__yan { grid-column: 8 / span 5; margin-top: clamp(40px, 6vw, 88px); display: grid; gap: 22px; color: var(--soluk-a); font-size: var(--t-lead); line-height: 1.4; } .ilke__yan .bag { color: var(--ink); font-size: 1rem; } @media (max-width: 800px) { .ilke .etiket, .ilke__metin, .ilke__yan { grid-column: 1 / -1; } .ilke .etiket { margin-bottom: 28px; } } .sayilar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gut); margin-top: clamp(96px, 14vw, 200px); } .sayi { padding-top: 22px; position: relative; } .sayi__olcu { position: absolute; inset: 0 0 auto; height: 11px; display: block; } .sayi__olcu::before, .sayi__olcu::after { content: ""; position: absolute; top: 0; width: 1px; height: 11px; background: currentColor; } .sayi__olcu::before { left: 0; } .sayi__olcu::after { right: 0; } .sayi__olcu i { position: absolute; left: 0; right: 0; top: 5px; height: 1px; background: currentColor; transform-origin: left; } .js .sayi__olcu i { transform: scaleX(0); transition: transform 1.4s var(--ease); } .js .sayilar.gorunur .sayi__olcu i { transform: scaleX(1); } .sayi__deger { display: flex; align-items: baseline; gap: 10px; margin-top: 18px; } .sayi__deger strong { font-size: clamp(2.6rem, 6.2vw, 6rem); line-height: .9; font-weight: 500; font-stretch: 72%; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .sayi__deger span { font-family: var(--mono); font-size: .8rem; color: var(--red); text-transform: uppercase; } .sayi__etiket { margin-top: 14px; opacity: .62; max-width: 22ch; } @media (max-width: 800px) { .sayilar { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; } } /* ---------- anasayfa: seçili projeler ---------- */ .secili { padding-block: clamp(110px, 14vw, 220px); } .secili__izgara { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); row-gap: clamp(64px, 9vw, 150px); } .kart { display: block; position: relative; } .kart__gorsel { position: relative; overflow: hidden; background: var(--ink-2); } .kart__gorsel img { width: 100%; height: 118%; object-fit: cover; margin-top: -9%; filter: saturate(.42) contrast(1.05) brightness(.9); transition: filter .7s ease, scale 1.4s var(--ease); will-change: transform; } .kart:hover .kart__gorsel img, .kart:focus-visible .kart__gorsel img { filter: none; scale: 1.04; } .kart__gorsel::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--cizgi-k); pointer-events: none; } .kart__alt { display: grid; grid-template-columns: 3.2em 1fr; column-gap: 12px; row-gap: 4px; margin-top: 18px; align-items: baseline; } .kart__no { color: var(--red); } .kart__ad { font-size: var(--t-h3); line-height: 1.12; font-weight: 560; font-stretch: 106%; letter-spacing: -.005em; transition: color .3s; } .kart__bilgi { grid-column: 2; opacity: .55; } .kart--1 { grid-column: 1 / span 7; } .kart--1 .kart__gorsel { aspect-ratio: 4 / 3; } .kart--2 { grid-column: 9 / span 4; margin-top: 34%; } .kart--2 .kart__gorsel { aspect-ratio: 3 / 4; } .kart--3 { grid-column: 2 / span 5; } .kart--3 .kart__gorsel { aspect-ratio: 4 / 5; } .kart--4 { grid-column: 8 / span 5; margin-top: 22%; } .kart--4 .kart__gorsel { aspect-ratio: 1 / 1; } .kart--5 { grid-column: 1 / span 4; margin-top: 8%; } .kart--5 .kart__gorsel { aspect-ratio: 3 / 4; } .kart--6 { grid-column: 6 / span 7; } .kart--6 .kart__gorsel { aspect-ratio: 16 / 11; } @media (max-width: 800px) { .secili__izgara { row-gap: 56px; } .kart[class*="kart--"] { grid-column: 1 / -1; margin-top: 0; } .kart--2, .kart--4, .kart--6 { grid-column: 3 / -1 !important; } .kart[class*="kart--"] .kart__gorsel { aspect-ratio: 4 / 5; } } /* ---------- anasayfa: öne çıkan kişi ---------- */ .kisi-one { padding-block: clamp(100px, 13vw, 200px); } .kisi-one__foto { grid-column: 1 / span 5; position: relative; } .kisi-one__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; mix-blend-mode: multiply; filter: grayscale(1) contrast(1.08); } .kisi-one__foto figcaption { margin-top: 14px; opacity: .55; } .seritler { position: absolute; inset: 0 0 auto; aspect-ratio: 4 / 5; display: grid; grid-template-columns: repeat(5, 1fr); pointer-events: none; } .seritler i { background: var(--paper); transform-origin: 50% 0; } .js .seritler i { transition: transform 1.2s var(--ease-io); } .js [data-seritler].gorunur .seritler i { transform: scaleY(0); } .seritler i:nth-child(2) { transition-delay: .08s; } .seritler i:nth-child(3) { transition-delay: .16s; } .seritler i:nth-child(4) { transition-delay: .24s; } .seritler i:nth-child(5) { transition-delay: .32s; } html:not(.js) .seritler { display: none; } .kisi-one__metin { grid-column: 7 / span 6; align-self: center; display: grid; gap: 30px; min-width: 0; } .kisi-one__ad { font-size: clamp(2.6rem, 6.4vw, 7.2rem); line-height: .86; letter-spacing: -.03em; font-weight: 640; font-stretch: 122%; text-transform: uppercase; } .kisi-one__ad .k { display: block; width: fit-content; } .kisi-one__ad .k:last-child { margin-left: clamp(0px, 4vw, 80px); } .kisi-one__ozet { font-size: var(--t-lead); line-height: 1.4; max-width: 38ch; } .kronoloji-mini { border-top: 1px solid var(--cizgi-a); } .kronoloji-mini li { display: grid; grid-template-columns: 7.5em 1fr; gap: 16px; padding-block: 11px; border-bottom: 1px solid var(--cizgi-a); font-size: .95rem; } .kronoloji-mini li .mono { color: var(--ink); opacity: .55; padding-top: .2em; } @media (max-width: 800px) { .kisi-one__foto, .kisi-one__metin { grid-column: 1 / -1; } .kisi-one__metin { margin-top: 48px; } } /* ---------- anasayfa: hizmetler özeti ---------- */ .hizmet-ozet { padding-block: clamp(100px, 13vw, 200px); } .adimlar { border-top: 1px solid var(--cizgi-k); margin-bottom: 48px; } .adimlar li { border-bottom: 1px solid var(--cizgi-k); } .adimlar a { position: relative; display: grid; grid-template-columns: 3fr 6fr 5fr 1fr; column-gap: var(--gut); align-items: center; padding-block: clamp(20px, 2.6vw, 34px); overflow: hidden; } .adimlar a::before { content: ""; position: absolute; inset: 0; background: var(--red); transform: scaleY(0); transform-origin: bottom; transition: transform .55s var(--ease); z-index: 0; } .adimlar a > * { position: relative; z-index: 1; transition: color .3s, transform .55s var(--ease); } .adimlar a:hover::before, .adimlar a:focus-visible::before { transform: scaleY(1); } .adimlar a:hover > *, .adimlar a:focus-visible > * { color: var(--ink); } .adimlar a:hover .adimlar__ad { transform: translateX(10px); } .adimlar__no { opacity: .6; } .adimlar__ad { font-size: clamp(1.25rem, 2.3vw, 2.1rem); line-height: 1.1; font-weight: 520; font-stretch: 104%; letter-spacing: -.01em; } .adimlar__ozet { font-size: .95rem; opacity: .62; line-height: 1.45; } .adimlar__ok { width: 22px; height: 22px; justify-self: end; } .adimlar a:hover .adimlar__ok { transform: rotate(45deg); } @media (max-width: 800px) { .adimlar a { grid-template-columns: 3em 1fr 24px; row-gap: 8px; } .adimlar__ozet { grid-column: 2 / 3; grid-row: 2; } .adimlar__ok { grid-column: 3; grid-row: 1; } } /* ---------- iletişim bandı (kırmızı) ---------- */ .cta { padding-block: clamp(100px, 15vw, 230px) clamp(70px, 9vw, 130px); position: relative; overflow: hidden; } .cta__ic { max-width: var(--max); margin-inline: auto; padding-inline: var(--pad); display: grid; gap: clamp(28px, 4vw, 54px); } .cta__ust { opacity: .75; } .cta__baslik { display: flex; align-items: flex-end; justify-content: space-between; gap: 4vw; font-size: clamp(3rem, 9.6vw, 10rem); line-height: .9; letter-spacing: -.04em; font-weight: 600; font-stretch: 112%; } .cta__baslik span { max-width: 12ch; } .cta__baslik .ok { width: clamp(52px, 9vw, 150px); height: auto; aspect-ratio: 1; margin-bottom: .1em; transition: transform .6s var(--ease); } .cta__baslik:hover .ok { transform: rotate(45deg); } .cta__alt { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; border-top: 1.5px solid var(--ink); padding-top: 18px; } .cta__alt .cta__metin { border-top: 0; padding-top: 0; } .cta__buton { display: inline-flex; align-items: center; gap: 12px; padding: 16px 26px; background: var(--ink); color: var(--paper); font-size: 1rem; transition: background-color .3s, color .3s; } .cta__buton:hover { background: var(--paper); color: var(--ink); } .hero__sol { grid-column: 1 / span 5; display: grid; gap: 22px; justify-items: start; } .hero__sol .hero__metin { grid-column: auto; } .hero__buton { display: inline-flex; align-items: center; gap: 12px; padding: 14px 22px; border: 1px solid color-mix(in srgb, var(--paper) 60%, transparent); font-size: .95rem; color: var(--paper); background: color-mix(in srgb, var(--ink) 45%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background-color .3s, color .3s, border-color .3s; } .hero__buton:hover { background: var(--red); border-color: var(--red); color: var(--ink); } @media (max-width: 800px) { .hero__sol { grid-column: 1 / -1; margin-bottom: 18px; } .hero__metin { max-width: none; } } .antet__cta { padding: 18px; border-bottom: 1px solid var(--ink); } .cta__metin { max-width: 40ch; font-size: var(--t-lead); line-height: 1.35; border-top: 1.5px solid var(--ink); padding-top: 18px; } /* ---------- footer: cam mavisi zemin, arkada cam cephe fotoğrafı ---------- */ .alt { position: relative; overflow: hidden; isolation: isolate; } .alt__telif a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); transition: color .3s; } .alt__telif a:hover { color: var(--red); } .alt__gorsel { position: absolute; inset: 0; z-index: -1; } .alt__gorsel img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.15) brightness(1.1); mix-blend-mode: luminosity; opacity: .32; } .alt__gorsel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--glass) 30%, transparent) 0%, color-mix(in srgb, var(--glass) 55%, transparent) 55%, var(--glass) 100%); } .alt__ic { max-width: var(--max); margin-inline: auto; padding: clamp(80px, 10vw, 140px) var(--pad) calc(26px + env(safe-area-inset-bottom)); } .alt__izgara { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); row-gap: 48px; align-items: start; } .alt__marka { grid-column: 1 / span 3; display: grid; gap: 18px; } .alt__logo .logo__isaret { width: 52px; } .alt__logo .logo__yazi b { font-size: 1.35rem; } .alt__logo-gorsel { max-width: 220px; max-height: 80px; width: auto; height: auto; } .alt__slogan { font-size: 1.05rem; line-height: 1.45; color: color-mix(in srgb, var(--paper) 80%, transparent); max-width: 30ch; } .alt__ekler { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 40px var(--gut); margin-top: clamp(48px, 6vw, 80px); padding-top: 32px; border-top: 1px solid var(--cizgi-k); } .alt__unvan { opacity: .55; max-width: 26ch; line-height: 1.6; font-size: .62rem; } .alt__blok { display: grid; gap: 10px; align-content: start; font-size: .98rem; } .alt__blok h2 { opacity: .5; margin-bottom: 8px; font-weight: 400; } .alt__blok a { width: fit-content; transition: color .25s; } .alt__blok a:hover { color: var(--red); } .alt__hizmetler { grid-column: 4 / span 3; } .alt__hizmetler a { color: color-mix(in srgb, var(--paper) 82%, transparent); line-height: 1.35; padding-block: 2px; } .alt__ilke { grid-column: 7 / span 3; } .alt__ilke p { color: color-mix(in srgb, var(--paper) 78%, transparent); line-height: 1.6; } .alt__ilke .bag { margin-top: 6px; } .alt__iletisim { grid-column: 10 / span 3; } .ikonlu { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; } .ikonlu .ikon { width: 18px; height: 18px; margin-top: 2px; opacity: .7; } .alt__iletisim p.ikonlu { color: color-mix(in srgb, var(--paper) 82%, transparent); } .alt__sosyal { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--cizgi-k); } .alt__son { display: flex; flex-wrap: wrap; gap: 14px 28px; justify-content: space-between; align-items: center; margin-top: clamp(64px, 8vw, 120px); padding-top: 22px; border-top: 1px solid var(--cizgi-k); opacity: .7; font-size: .66rem; } .alt__yasal { display: flex; flex-wrap: wrap; gap: 18px; } .alt__yasal a:hover, .alt__yukari:hover { color: var(--red); } @media (max-width: 1000px) { .alt__marka, .alt__hizmetler, .alt__ilke, .alt__iletisim { grid-column: span 6; } } @media (max-width: 640px) { .alt__marka, .alt__hizmetler, .alt__ilke, .alt__iletisim { grid-column: 1 / -1; } } /* ---------- iç sayfa başlığı ---------- */ .sayfa-bas { padding-block: calc(var(--ust-h) + clamp(72px, 12vw, 180px)) clamp(48px, 6vw, 90px); position: relative; isolation: isolate; overflow: hidden; } .sayfa-bas > .kap { position: relative; } .sayfa-bas--gorsel { height: clamp(520px, 70svh, 760px); display: flex; align-items: flex-end; padding-bottom: clamp(40px, 5vw, 72px); } .sayfa-bas__gorsel { position: absolute; inset: 0; z-index: -1; } .sayfa-bas__gorsel img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.35) contrast(1.05); animation: phero-gel 2.4s var(--ease) both; } .sayfa-bas__gorsel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--glass) 70%, transparent) 0%, transparent 26%), linear-gradient(90deg, var(--glass) 0%, color-mix(in srgb, var(--glass) 88%, transparent) 30%, color-mix(in srgb, var(--glass) 35%, transparent) 70%, color-mix(in srgb, var(--glass) 15%, transparent) 100%), linear-gradient(0deg, var(--glass) 0%, transparent 40%); } /* eskiz görseli: cam mavisi üzerinde ters çevrilmiş çizgiler — mavi pafta (blueprint) */ .sayfa-bas__gorsel--eskiz img { filter: grayscale(1) invert(1) contrast(1.4); mix-blend-mode: screen; opacity: .42; } .sayfa-bas__gorsel--eskiz::after { background: linear-gradient(90deg, var(--glass) 0%, color-mix(in srgb, var(--glass) 50%, transparent) 45%, transparent 100%), linear-gradient(0deg, var(--glass) 0%, transparent 35%); } .sayfa-bas .etiket { grid-column: 1 / span 3; align-self: start; padding-top: 1.2em; } .sayfa-bas__baslik { grid-column: 4 / span 9; font-size: var(--t-hero); line-height: .86; letter-spacing: -.04em; font-weight: var(--fw); font-stretch: calc(var(--wd) * 1%); } .sayfa-bas__baslik sup { font-size: .8rem; vertical-align: top; margin-left: .4em; letter-spacing: .04em; color: var(--red); position: relative; top: .8em; } .sayfa-bas__giris { grid-column: 7 / span 6; margin-top: clamp(32px, 4vw, 56px); font-size: var(--t-lead); line-height: 1.38; opacity: .78; max-width: 44ch; } @media (max-width: 800px) { .sayfa-bas .etiket, .sayfa-bas__baslik, .sayfa-bas__giris { grid-column: 1 / -1; } .sayfa-bas .etiket { margin-bottom: 20px; } } /* ---------- projeler: araç çubuğu ---------- */ .projeler { padding-bottom: clamp(80px, 10vw, 160px); } .arac { display: flex; flex-wrap: wrap; gap: 18px 32px; justify-content: space-between; align-items: center; padding-block: 18px; border-block: 1px solid var(--cizgi-k); margin-bottom: clamp(40px, 5vw, 72px); } .arac__filtre { display: flex; flex-wrap: wrap; gap: 8px; } .cip { display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 14px; border: 1px solid var(--cizgi-k); border-radius: 999px; font-size: .9rem; transition: background-color .25s, color .25s, border-color .25s; } .cip sup { font-family: var(--mono); font-size: .62rem; opacity: .6; } .cip:hover { border-color: currentColor; } .cip[aria-pressed="true"] { background: var(--paper); color: var(--ink); border-color: var(--paper); } .arac__gorunum { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--cizgi-k); border-radius: 999px; } .arac__gorunum button { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; opacity: .6; transition: opacity .2s, background-color .2s; } .arac__gorunum button[aria-pressed="true"] { opacity: 1; background: var(--cizgi-k); } .ikon-izgara, .ikon-liste { width: 12px; height: 12px; display: block; } .ikon-izgara { background: linear-gradient(currentColor 0 0) 0 0 / 5px 5px no-repeat, linear-gradient(currentColor 0 0) 7px 0 / 5px 5px no-repeat, linear-gradient(currentColor 0 0) 0 7px / 5px 5px no-repeat, linear-gradient(currentColor 0 0) 7px 7px / 5px 5px no-repeat; } .ikon-liste { background: linear-gradient(currentColor 0 0) 0 1px / 12px 1.5px no-repeat, linear-gradient(currentColor 0 0) 0 5.5px / 12px 1.5px no-repeat, linear-gradient(currentColor 0 0) 0 10px / 12px 1.5px no-repeat; } [data-gorunum="izgara"] [data-gorunum-alan="liste"], [data-gorunum="liste"] [data-gorunum-alan="izgara"] { display: none; } html:not(.js) [data-gorunum-alan="liste"] { display: none; } html:not(.js) [data-gorunum-alan="izgara"] { display: grid; } html:not(.js) .arac__gorunum { display: none; } /* ızgara: üç kolon, orta kolon aşağı kaydırılmış */ .pgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gut); row-gap: clamp(48px, 6vw, 96px); padding-bottom: 12vh; } .pkart[hidden] { display: none; } .pkart:nth-child(3n+2 of .pkart:not([hidden])) { transform: translateY(12vh); } .pkart a { display: block; } .pkart__gorsel { overflow: hidden; aspect-ratio: 4 / 5; background: var(--ink-2); position: relative; } .pkart__gorsel--yatay { aspect-ratio: 4 / 3; } /* çerçeve görselin yönünü izler: yatay görsel dikey karta kırpılmaz */ .pkart__gorsel--kare { aspect-ratio: 1 / 1; } .pkart__gorsel img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.42) contrast(1.05) brightness(.9); transition: filter .7s ease, scale 1.2s var(--ease); } .pkart a:hover img, .pkart a:focus-visible img { filter: none; scale: 1.05; } .pkart__gorsel::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--cizgi-k); } .pkart__alt { display: grid; grid-template-columns: 3em 1fr; column-gap: 10px; row-gap: 4px; margin-top: 16px; } .pkart__no { color: var(--red); padding-top: .3em; } .pkart__ad { font-size: clamp(1.05rem, 1.3vw, 1.3rem); line-height: 1.2; font-weight: 560; font-stretch: 104%; } .pkart__bilgi { grid-column: 2; opacity: .55; } .js .pkart { opacity: 0; translate: 0 40px; transition: opacity .9s var(--ease), translate .9s var(--ease); } .js .pkart.gorunur { opacity: 1; translate: 0 0; } @media (max-width: 1100px) { .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pkart:nth-child(3n+2 of .pkart:not([hidden])) { transform: none; } .pkart:nth-child(2n of .pkart:not([hidden])) { transform: translateY(8vh); } } @media (max-width: 640px) { .pgrid { grid-template-columns: 1fr; padding-bottom: 0; } .pkart:nth-child(n) { transform: none !important; } } /* liste: çizim listesi gibi */ .pliste__bas, .pliste a { display: grid; grid-template-columns: 4em minmax(0, 3fr) minmax(0, 1.4fr) minmax(0, 2fr) 8em; column-gap: var(--gut); align-items: baseline; } .pliste__bas { padding-bottom: 12px; border-bottom: 1px solid var(--cizgi-k); opacity: .5; } .pliste .sag, .pliste__m { text-align: right; } .pliste li { border-bottom: 1px solid var(--cizgi-k); } .pliste li[hidden] { display: none; } .pliste a { position: relative; padding-block: 18px; transition: color .25s, padding .4s var(--ease); } .pliste a::before { content: ""; position: absolute; inset: 0 calc(var(--pad) * -1); background: var(--red); transform: scaleY(0); transform-origin: bottom; transition: transform .45s var(--ease); z-index: -1; } .pliste a:hover, .pliste a:focus-visible { color: var(--ink); padding-left: 10px; } .pliste a:hover::before, .pliste a:focus-visible::before { transform: scaleY(1); } .pliste ul { position: relative; z-index: 0; } .pliste__ad { font-size: clamp(1.05rem, 1.6vw, 1.45rem); font-weight: 540; font-stretch: 104%; } .pliste__k { opacity: .65; font-size: .92rem; } .liste-onizleme { position: fixed; left: 0; top: 0; z-index: 30; width: 280px; aspect-ratio: 4 / 5; pointer-events: none; opacity: 0; transform: scale(.92); transition: opacity .3s, transform .4s var(--ease); overflow: hidden; } .liste-onizleme.on { opacity: 1; transform: none; } .liste-onizleme img { width: 100%; height: 100%; object-fit: cover; } @media (max-width: 800px) { .pliste__bas { display: none; } .pliste a { grid-template-columns: 3em 1fr auto; } .pliste__k { display: none; } } @media (hover: none) { .liste-onizleme { display: none; } } .telif { opacity: .45; margin-top: clamp(48px, 6vw, 96px); max-width: 80ch; text-transform: none; letter-spacing: 0; font-size: .72rem; line-height: 1.6; } /* ---------- proje detayı ---------- */ .phero { position: relative; height: 92svh; min-height: 560px; overflow: hidden; display: flex; align-items: flex-end; } .phero__gorsel { position: absolute; inset: 0; } .phero__gorsel img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.75) contrast(1.04) brightness(.86); animation: phero-gel 2.2s var(--ease) both; } @keyframes phero-gel { from { transform: scale(1.12); } } .phero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 12, 13, .6) 0%, transparent 28%, transparent 50%, rgba(12, 12, 13, .85) 100%); } .phero__ic { position: relative; z-index: 2; padding-bottom: clamp(28px, 5vh, 64px); width: 100%; } .phero__yol { position: absolute; top: calc(-92svh + var(--ust-h) + 24px); display: flex; gap: 10px; opacity: .8; } .phero__yol a:hover { color: var(--red); } .phero__no { margin-left: 18px; opacity: .6; } .phero__baslik { font-size: clamp(2.6rem, 8.2vw, 8.6rem); line-height: .9; letter-spacing: -.035em; font-weight: var(--fw); font-stretch: calc(var(--wd) * 1%); max-width: 16ch; } .js .phero__baslik .k > span { animation: kelime-ac 1.1s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms + .25s); transform: translateY(135%); } .phero__taslak { margin-top: 16px; color: var(--red); } @media (max-width: 800px) { .phero__yol { position: static; margin-bottom: 18px; } } .pbilgi { padding-block: clamp(72px, 9vw, 140px); } .pbilgi__metin { grid-column: 1 / span 5; display: grid; gap: 24px; align-content: start; } .pbilgi__ozet { font-size: var(--t-lead); line-height: 1.4; } .antet { grid-column: 1 / -1; border: 1px solid var(--ink); display: grid; font-size: 1rem; } .pbilgi__metin + .antet { grid-column: 7 / -1; } .antet__hucre { padding: 16px 18px 18px; display: grid; gap: 8px; align-content: start; border-right: 1px solid var(--cizgi-a); min-width: 0; } .antet__hucre > .mono, .antet__hucre dt { opacity: .55; font-size: .66rem; } .antet__hucre strong, .antet__hucre dd { font-weight: 520; overflow-wrap: anywhere; } .antet__ust { display: grid; grid-template-columns: 2fr 1fr 1.4fr; border-bottom: 1px solid var(--ink); } .antet__ust > :last-child, .antet__kunye > :nth-child(3n) { border-right: 0; } .antet__hucre--ad strong { font-size: clamp(1.3rem, 2.2vw, 2rem); line-height: 1.05; font-stretch: 108%; letter-spacing: -.01em; } .antet__hucre--m2 strong { font-size: clamp(2.2rem, 4.4vw, 4.2rem); line-height: .9; font-stretch: 72%; font-weight: 500; display: flex; align-items: baseline; gap: 8px; font-variant-numeric: tabular-nums; } .antet__hucre--m2 small { font-family: var(--mono); font-size: .8rem; color: var(--red); } .antet__kunye { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--ink); } .antet__kunye .antet__hucre { border-bottom: 1px solid var(--cizgi-a); margin-bottom: -1px; } .antet__hucre--bos { background: repeating-linear-gradient(135deg, transparent 0 7px, var(--cizgi-a) 7px 8px); } .antet__lejant { padding: 18px; border-bottom: 1px solid var(--ink); } .antet__lejant h2 { opacity: .55; font-size: .66rem; font-weight: 400; margin-bottom: 14px; } .antet__lejant ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; } .antet__lejant li { display: grid; grid-template-columns: 34px 2.4em 1fr; gap: 12px; align-items: center; padding-block: 9px; border-top: 1px solid var(--cizgi-a); font-size: .95rem; } .antet__lejant li .mono { opacity: .5; } .antet__alt { display: flex; align-items: center; gap: 16px; padding: 12px 18px; font-size: .62rem; } .antet__alt .mono { font-size: .62rem; opacity: .7; } .antet__isaret { width: 30px; height: auto; } .antet__konum { margin-left: auto; } .antet { position: relative; } .js .antet::after { content: ""; position: absolute; inset: -2px; background: var(--paper); transform-origin: 50% 100%; transition: transform 1.4s var(--ease-io); pointer-events: none; } .js .antet.gorunur::after { transform: scaleY(0); } @media (max-width: 900px) { .pbilgi__metin, .pbilgi__metin + .antet { grid-column: 1 / -1; } .pbilgi__metin { margin-bottom: 40px; } .antet__ust { grid-template-columns: 1fr 1fr; } .antet__hucre--ad { grid-column: 1 / -1; border-right: 0; border-bottom: 1px solid var(--cizgi-a); } .antet__kunye { grid-template-columns: 1fr 1fr; } .antet__kunye > :nth-child(3n) { border-right: 1px solid var(--cizgi-a); } .antet__kunye > :nth-child(2n) { border-right: 0; } .antet__hucre--bos { display: none; } .antet__lejant ol { grid-template-columns: 1fr; } .antet__konum { display: none; } } /* çizim lejantı desenleri */ .desen { display: block; width: 34px; height: 22px; border: 1px solid var(--ink); background-color: transparent; } .desen--cam { background: repeating-linear-gradient(45deg, transparent 0 5px, var(--ink) 5px 6px); } .desen--levha { background: var(--ink); } .desen--tas { background: linear-gradient(var(--ink) 1px, transparent 1px) 0 0 / 8px 8px, linear-gradient(90deg, var(--ink) 1px, transparent 1px) 0 0 / 8px 8px; } .desen--dograma { background: linear-gradient(90deg, transparent 15px, var(--ink) 15px 17px, transparent 17px), linear-gradient(transparent 9px, var(--ink) 9px 11px, transparent 11px); } .desen--korkuluk { background: repeating-linear-gradient(90deg, transparent 0 4px, var(--ink) 4px 5px); } .desen--gunes { background: repeating-linear-gradient(0deg, transparent 0 3px, var(--ink) 3px 4.5px); } .desen--nokta { background: radial-gradient(circle, var(--ink) 1.1px, transparent 1.4px) 0 0 / 5px 5px; } .desen--celik { background: var(--red); border-color: var(--red); } .desen--cati { background: repeating-linear-gradient(45deg, transparent 0 4px, var(--ink) 4px 5px), repeating-linear-gradient(-45deg, transparent 0 4px, var(--ink) 4px 5px); } .desen--ahsap { background: repeating-linear-gradient(0deg, transparent 0 5px, var(--ink) 5px 6px) 0 0 / 6px 100%, repeating-linear-gradient(0deg, transparent 0 5px, var(--ink) 5px 6px) 12px 2px / 6px 100% no-repeat; } .desen--bos { background: linear-gradient(to top right, transparent calc(50% - .5px), var(--ink) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px)); } /* galeri: asimetrik */ .pgaleri { padding-block: clamp(80px, 10vw, 160px); } .pgaleri .etiket { margin-bottom: clamp(32px, 4vw, 56px); } .pgaleri__izgara { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); row-gap: clamp(20px, 3vw, 44px); align-items: start; } .pgaleri__oge { display: block; overflow: hidden; background: var(--ink-2); grid-column: span 6; cursor: zoom-in; } .pgaleri__oge img { width: 100%; height: 100%; object-fit: cover; transition: scale 1.2s var(--ease); } .pgaleri__oge:hover img { scale: 1.03; } /* dikey görsel: ekran yüksekliğini aşmaz, bulunduğu kolonda ortalanır (tam genişlik yuvada çok uzun görünmesin) */ .pgaleri__oge--dikey { justify-self: center; width: auto; max-width: 100%; } .pgaleri__oge--dikey img { width: auto; height: auto; max-width: 100%; max-height: 86vh; } .pgaleri__oge:nth-child(5n+1) { grid-column: 1 / -1; } .pgaleri__oge:nth-child(5n+2) { grid-column: 1 / span 7; } .pgaleri__oge:nth-child(5n+3) { grid-column: 9 / span 4; margin-top: 18%; } .pgaleri__oge:nth-child(5n+4) { grid-column: 2 / span 5; } .pgaleri__oge:nth-child(5n+5) { grid-column: 7 / span 6; margin-top: -12%; } .pgaleri__izgara--1 .pgaleri__oge { grid-column: 2 / span 10; } .pgaleri__izgara--2 .pgaleri__oge:nth-child(1) { grid-column: 1 / span 7; } .pgaleri__izgara--2 .pgaleri__oge:nth-child(2) { grid-column: 8 / span 5; margin-top: 24%; } @media (max-width: 800px) { .pgaleri__oge[class] { grid-column: 1 / -1 !important; margin-top: 0 !important; } } /* ışık kutusu */ .isik { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; padding: 0; border: 0; background: rgba(12, 12, 13, .96); color: var(--paper); } .isik::backdrop { background: rgba(12, 12, 13, .8); } .isik[open] { display: grid; place-items: center; animation: belir .35s ease; } .isik__gorsel { width: 100%; height: 100svh; display: grid; place-items: center; padding: 72px clamp(16px, 7vw, 120px); } .isik__gorsel img { display: block; width: auto; height: auto; max-width: calc(100vw - 2 * clamp(16px, 7vw, 120px)); max-height: calc(100svh - 144px); object-fit: contain; } .isik__btn { position: absolute; padding: 14px; font-size: 1.4rem; transition: color .2s; } .isik__btn:hover { color: var(--red); } .isik__kapat { top: 14px; right: var(--pad); font-size: .75rem; } .isik__onceki { left: calc(var(--pad) - 14px); top: 50%; translate: 0 -50%; } .isik__sonraki { right: calc(var(--pad) - 14px); top: 50%; translate: 0 -50%; } .isik__sayac { position: absolute; top: 28px; left: var(--pad); opacity: .7; } /* sonraki proje */ .psonraki { padding-bottom: clamp(56px, 6vw, 96px); } .psonraki__bag { position: relative; display: block; height: 70svh; min-height: 420px; overflow: hidden; } .psonraki__gorsel { position: absolute; inset: 0; } .psonraki__gorsel img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(.5); transition: filter .9s ease, scale 1.4s var(--ease); scale: 1.04; } .psonraki__bag:hover .psonraki__gorsel img { filter: saturate(.8) brightness(.62); scale: 1; } .psonraki__ic { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; padding-bottom: clamp(28px, 5vw, 64px); } .psonraki__ad { font-size: clamp(2.4rem, 7.6vw, 8rem); line-height: .9; letter-spacing: -.035em; font-weight: var(--fw); font-stretch: calc(var(--wd) * 1%); max-width: 16ch; transition: transform .8s var(--ease); } .psonraki__bag:hover .psonraki__ad { transform: translateX(14px); } .psonraki__bilgi { opacity: .65; } .psonraki__alt { display: flex; justify-content: space-between; gap: 20px; padding-top: 28px; } /* yasal ve basit metin sayfaları */ .metin { max-width: 70ch; } .yok { min-height: 80svh; padding-top: calc(var(--ust-h) + 12vh); } .yok__baslik { font-size: clamp(6rem, 26vw, 24rem); line-height: .8; letter-spacing: -.05em; font-stretch: 70%; font-weight: 500; margin-block: 24px; color: var(--red); } .yok__metin { font-size: var(--t-lead); margin-bottom: 28px; opacity: .8; } /* ---------- metin blokları (panel editörü içeriği) ---------- */ .metin { font-size: var(--t-body); line-height: 1.7; } .metin > * + * { margin-top: 1.1em; } .metin h2, .metin h3 { font-weight: 560; line-height: 1.15; margin-top: 1.8em; } .metin h2 { font-size: var(--t-h3); } .metin a { border-bottom: 1px solid currentColor; } .metin ul { list-style: disc; padding-left: 1.2em; } .metin ol { list-style: decimal; padding-left: 1.4em; } .sayfa-bas__baslik--orta { font-size: calc(clamp(2.3rem, 5vw, 5rem) * var(--k-h1, 1)); line-height: .98; max-width: 18ch; } /* ---------- hizmetler: liste ---------- */ .surec__ac { justify-self: end; width: 22px; height: 22px; position: relative; align-self: center; flex: none; } .surec__ac::before, .surec__ac::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: currentColor; transition: transform .45s var(--ease); } .surec__ac::after { transform: rotate(90deg); } details[open] > summary .surec__ac::after { transform: rotate(0); } .hliste { padding-bottom: clamp(48px, 5vw, 80px); } .hliste__bas { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); padding-block: 28px clamp(56px, 7vw, 110px); border-top: 1px solid var(--cizgi-k); } .hliste__bas .etiket { grid-column: 1 / span 3; } .hliste__ilke { grid-column: 5 / span 8; font-size: var(--t-h3); line-height: 1.3; color: var(--soluk-k); max-width: 52ch; } .hkartlar { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); row-gap: clamp(72px, 9vw, 150px); } .hkart { grid-column: 1 / span 6; } .hkart:nth-child(even) { grid-column: 7 / span 6; margin-top: 30%; } .hkart:nth-child(4n+3) { grid-column: 2 / span 5; } .hkart a { display: grid; gap: 22px; } .hkart__gorsel { overflow: hidden; aspect-ratio: 4 / 3; background: var(--ink-2); position: relative; } .hkart:nth-child(even) .hkart__gorsel { aspect-ratio: 4 / 5; } .hkart__gorsel img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.4) contrast(1.05) brightness(.88); transition: filter .7s ease, scale 1.2s var(--ease); } .hkart a:hover .hkart__gorsel img, .hkart a:focus-visible .hkart__gorsel img { filter: none; scale: 1.04; } .hkart__metin { display: grid; grid-template-columns: 3.2em 1fr; column-gap: 12px; row-gap: 12px; align-items: baseline; } .hkart__metin > :not(.hkart__no) { grid-column: 2; } .hkart__no { color: var(--red); } .hkart__ad { font-size: clamp(1.5rem, 2.6vw, 2.4rem); line-height: 1.04; letter-spacing: -.015em; font-weight: 560; font-stretch: 106%; } .hkart__ozet { opacity: .68; max-width: 44ch; } .js .hkart { opacity: 0; translate: 0 50px; transition: opacity 1s var(--ease), translate 1s var(--ease); } .js .hkart.gorunur { opacity: 1; translate: 0 0; } @media (max-width: 800px) { .hliste__bas .etiket, .hliste__ilke { grid-column: 1 / -1; } .hliste__ilke { margin-top: 20px; } .hkart[class] { grid-column: 1 / -1; margin-top: 0; } } .hbant { padding-block: clamp(56px, 6vw, 96px) clamp(90px, 10vw, 160px); border-top: 1px solid var(--cizgi-a); } .hbant .etiket { grid-column: 1 / -1; margin-bottom: clamp(32px, 4vw, 56px); } .hbant__bag { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); align-items: end; } .hbant__gorsel { grid-column: 1 / span 7; aspect-ratio: 16 / 10; overflow: hidden; } .hbant__gorsel img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.5); transition: filter .7s, scale 1.2s var(--ease); } .hbant__bag:hover .hbant__gorsel img { filter: none; scale: 1.03; } .hbant__metin { grid-column: 8 / -1; min-width: 0; display: grid; grid-template-columns: 3.2em minmax(0, 1fr); column-gap: 12px; row-gap: 14px; } .hbant__metin > :not(.hkart__no) { grid-column: 2; } .hbant__ad { font-size: clamp(1.8rem, 3.3vw, 3.4rem); line-height: 1.02; letter-spacing: -.02em; font-weight: 560; font-stretch: 104%; overflow-wrap: break-word; hyphens: auto; } .hbant .hkart__ozet { color: var(--soluk-a); opacity: 1; } .disiplin { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gut); border-top: 1px solid var(--cizgi-k); margin-top: clamp(56px, 7vw, 100px); } .disiplin--acik { border-top-color: var(--ink); } .disiplin li { padding: 22px var(--gut) 34px 0; display: grid; gap: 12px; align-content: start; border-right: 1px solid var(--cizgi-a); } .disiplin li:last-child { border-right: 0; } .disiplin .mono { color: var(--red); } .disiplin h3 { font-size: var(--t-h3); font-weight: 540; font-stretch: 104%; line-height: 1.1; } .disiplin p { color: var(--soluk-a); } .hbant__katalog { grid-column: 1 / -1; margin-top: 40px; } @media (max-width: 900px) { .hbant__gorsel, .hbant__metin { grid-column: 1 / -1; } .hbant__metin { margin-top: 24px; } .disiplin { grid-template-columns: 1fr 1fr; } .disiplin li:nth-child(2n) { border-right: 0; } } /* ---------- tek hizmet ---------- */ .hhero { padding-block: calc(var(--ust-h) + clamp(48px, 7vw, 110px)) clamp(64px, 8vw, 120px); } .hhero .izgara { align-items: end; } .hhero__metin { grid-column: 1 / span 7; display: grid; gap: 24px; align-content: end; position: relative; } .hhero__yol { display: flex; gap: 10px; opacity: .7; } .hhero__yol a:hover { color: var(--red); } .hhero__no { font-size: clamp(6rem, 17vw, 16rem); line-height: .78; font-weight: 300; font-stretch: 62%; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--paper) 45%, transparent); margin-bottom: -.12em; } .hhero__baslik { font-size: clamp(2.3rem, 5.4vw, 5.4rem); line-height: .96; letter-spacing: -.03em; font-weight: var(--fw); font-stretch: calc(var(--wd) * 1%); max-width: 15ch; } .hhero__ozet { font-size: var(--t-lead); line-height: 1.4; max-width: 40ch; opacity: .8; border-top: 1px solid var(--cizgi-k); padding-top: 20px; } .hhero__gorsel { grid-column: 9 / -1; position: relative; aspect-ratio: 3 / 4; overflow: hidden; } .hhero__gorsel img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.6) contrast(1.05); } .hhero__gorsel .seritler { aspect-ratio: auto; inset: 0; } .hhero__gorsel .seritler i { background: var(--ink); } @media (max-width: 800px) { .hhero__metin, .hhero__gorsel { grid-column: 1 / -1; } .hhero__gorsel { margin-top: 40px; aspect-ratio: 4 / 5; } } .hgovde { padding-block: clamp(80px, 9vw, 150px); } .dizin { grid-column: 1 / span 3; position: sticky; top: calc(var(--ust-h) + 24px); align-self: start; grid-row: span 3; } .dizin__baslik { opacity: .55; margin-bottom: 14px; } .dizin ol { border-top: 1px solid var(--ink); } .dizin a { display: grid; grid-template-columns: 2.4em 1fr; gap: 8px; padding-block: 11px; border-bottom: 1px solid var(--cizgi-a); font-size: .9rem; line-height: 1.3; transition: color .25s, padding .4s var(--ease); } .dizin a .mono { opacity: .5; padding-top: .15em; } .dizin a:hover { color: var(--red); padding-left: 6px; } .dizin a[aria-current] { color: var(--red); font-weight: 560; } .dizin a[aria-current] .mono { opacity: 1; } .hgovde__ana { grid-column: 5 / -1; display: grid; gap: clamp(64px, 8vw, 120px); min-width: 0; } .hgovde__ana--alt { margin-top: clamp(64px, 8vw, 120px); } .hgovde__giris { font-size: var(--t-lead); line-height: 1.55; max-width: 60ch; } .hgovde__giris p:first-child { font-size: clamp(1.3rem, 2vw, 1.8rem); line-height: 1.35; letter-spacing: -.005em; } .hbolum .etiket { margin-bottom: 22px; } .vurgular { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--ink); } .vurgular li { padding: 26px 26px 34px 0; display: grid; gap: 12px; align-content: start; border-bottom: 1px solid var(--cizgi-a); } .vurgular li:nth-child(odd) { border-right: 1px solid var(--cizgi-a); } .vurgular li:nth-child(even) { padding-left: 26px; } .vurgular .mono { color: var(--red); } .vurgular h2 { font-size: var(--t-h3); line-height: 1.12; font-weight: 560; font-stretch: 104%; } .vurgular p { color: var(--soluk-a); } .js .vurgular li { opacity: 0; translate: 0 24px; transition: opacity .9s var(--ease), translate .9s var(--ease); } .js .vurgular li.gorunur { opacity: 1; translate: 0 0; } .js .vurgular li:nth-child(2) { transition-delay: .1s; } .js .vurgular li:nth-child(3) { transition-delay: .2s; } .js .vurgular li:nth-child(4) { transition-delay: .3s; } .hserit { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); margin-top: clamp(80px, 10vw, 150px); align-items: start; } .hserit__oge { overflow: hidden; cursor: zoom-in; background: var(--ink); } .hserit__oge img { width: 100%; height: 100%; object-fit: cover; transition: scale 1.2s var(--ease); } .hserit__oge:hover img { scale: 1.03; } .hserit--1 .hserit__oge { grid-column: 3 / -1; aspect-ratio: 16 / 9; } .hserit--2 .hserit__oge:nth-child(1), .hserit--3 .hserit__oge:nth-child(1) { grid-column: 1 / span 7; aspect-ratio: 4 / 3; } .hserit--2 .hserit__oge:nth-child(2), .hserit--3 .hserit__oge:nth-child(2) { grid-column: 9 / span 4; aspect-ratio: 3 / 4; margin-top: 22%; } .hserit--3 .hserit__oge:nth-child(3) { grid-column: 4 / span 6; aspect-ratio: 16 / 10; margin-top: clamp(24px, 3vw, 44px); } @media (max-width: 800px) { .hserit__oge[class] { grid-column: 1 / -1 !important; margin-top: 16px !important; aspect-ratio: 4 / 3 !important; } } .kapsam { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; border-top: 1px solid var(--ink); } .kapsam li { display: grid; grid-template-columns: 34px 1fr; gap: 16px; align-items: center; padding-block: 14px; border-bottom: 1px solid var(--cizgi-a); font-size: 1.02rem; } .hkapanis { border-left: 3px solid var(--red); padding-left: clamp(20px, 3vw, 40px); } .hkapanis p { font-size: var(--t-h2); line-height: 1.08; letter-spacing: -.018em; font-weight: 480; max-width: 22ch; } .sss { border-top: 1px solid var(--ink); } .sss details { border-bottom: 1px solid var(--cizgi-a); } .sss summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; align-items: center; padding-block: 22px; font-size: var(--t-h3); font-weight: 520; line-height: 1.2; } .sss summary::-webkit-details-marker { display: none; } .sss summary:hover { color: var(--red); } .sss details p { padding-bottom: 26px; max-width: 62ch; color: var(--soluk-a); font-size: 1.05rem; } .sss details[open] p { animation: oge-gel .6s var(--ease); } .hgovde .gonder { justify-self: start; } @media (max-width: 900px) { .dizin { grid-column: 1 / -1; position: static; grid-row: auto; margin-bottom: 56px; } .dizin ol { display: flex; overflow-x: auto; gap: 8px; border: 0; scrollbar-width: none; padding-bottom: 4px; } .dizin li { flex: none; } .dizin a { border: 1px solid var(--cizgi-a); border-radius: 999px; padding: 8px 14px; white-space: nowrap; grid-template-columns: auto auto; } .dizin a[aria-current] { border-color: var(--red); } .hgovde__ana { grid-column: 1 / -1; } .vurgular, .kapsam { grid-template-columns: 1fr; } .vurgular li:nth-child(odd) { border-right: 0; } .vurgular li:nth-child(even) { padding-left: 0; } } .hproje { padding-block: clamp(90px, 10vw, 160px); } .hproje .bolum-bas { margin-bottom: clamp(40px, 5vw, 72px); } .hproje .bolum-bas .bag { grid-column: 10 / -1; justify-self: end; } .hproje__izgara { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gut); } .hproje__izgara .pkart:nth-child(2) { margin-top: 10vh; } @media (max-width: 800px) { .hproje__izgara { grid-template-columns: 1fr; } .hproje__izgara .pkart:nth-child(2) { margin-top: 0; } .hproje .bolum-bas .bag { grid-column: 1 / -1; justify-self: start; } } .psonraki__ad--uzun { font-size: clamp(2rem, 5.6vw, 5.8rem); max-width: 20ch; } /* ---------- hakkımızda ---------- */ .hakkinda { padding-block: clamp(90px, 11vw, 180px); } .hakkinda .etiket { grid-column: 1 / span 3; align-self: start; } .hakkinda__metin { grid-column: 4 / span 6; font-size: var(--t-lead); line-height: 1.55; } .hakkinda__ilke { grid-column: 4 / -1; margin-block: clamp(64px, 8vw, 120px); padding-left: clamp(20px, 3vw, 44px); border-left: 3px solid var(--red); } .hakkinda__ilke p { font-size: var(--t-h2); line-height: 1.08; letter-spacing: -.015em; font-weight: 480; } .hakkinda__vizyon { grid-column: 7 / span 6; font-size: var(--t-lead); line-height: 1.45; color: var(--soluk-a); } @media (max-width: 800px) { .hakkinda .etiket, .hakkinda__metin, .hakkinda__ilke, .hakkinda__vizyon { grid-column: 1 / -1; } .hakkinda .etiket { margin-bottom: 24px; } } .kronoloji { padding-block: clamp(90px, 10vw, 160px); } .rakamlar { padding-bottom: clamp(90px, 10vw, 160px); } .rakamlar .sayilar { margin-top: clamp(56px, 7vw, 110px); } .rakamlar__ilke { padding-top: clamp(20px, 3vw, 40px); } .rakamlar__ilke .hakkinda__ilke { margin-top: 0; } .devami { margin-top: 1.2em; } .devami > summary { list-style: none; cursor: pointer; display: inline-flex; gap: 14px; font-size: 1rem; } .devami > summary::-webkit-details-marker { display: none; } .devami[open] > summary { margin-bottom: 1.1em; } .devami > :not(summary) + * { margin-top: 1.1em; } .hakkinda { padding-bottom: clamp(40px, 5vw, 80px); } .hakkinda__ilke { margin-block: clamp(48px, 6vw, 88px); } .kronoloji .etiket { margin-bottom: clamp(40px, 5vw, 72px); } .kronoloji__liste { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: clamp(24px, 3vw, 48px); overflow-x: auto; scrollbar-width: thin; padding-bottom: 12px; border-top: 1px solid var(--cizgi-k); } .kronoloji__liste li { position: relative; padding-top: 28px; display: grid; gap: 14px; align-content: start; } .kronoloji__liste li::before { content: ""; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; background: var(--red); } .kronoloji__yil { font-size: clamp(1.9rem, 3.1vw, 3rem); line-height: .9; font-stretch: 72%; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; } .kronoloji__liste p { opacity: .72; max-width: 30ch; } .ekip { padding-block: clamp(90px, 10vw, 160px); } .ekip .etiket { margin-bottom: 32px; } .ekip-one { align-items: center; padding-bottom: clamp(72px, 9vw, 140px); } .ekip-one__foto { grid-column: 1 / span 5; position: relative; } .ekip-one__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; mix-blend-mode: multiply; filter: grayscale(1) contrast(1.08); } .ekip-one__metin { grid-column: 7 / span 6; display: grid; gap: 26px; min-width: 0; } .ekip-one__unvan { color: var(--red); } @media (max-width: 800px) { .ekip-one__foto, .ekip-one__metin { grid-column: 1 / -1; } .ekip-one__metin { margin-top: 40px; } } .ekip-liste ol { border-top: 1px solid var(--ink); } .ekip-liste li { border-bottom: 1px solid var(--cizgi-a); } .ekip-liste a { position: relative; display: grid; grid-template-columns: 4em minmax(0, 1fr) minmax(0, 18em) 32px; column-gap: var(--gut); align-items: center; padding-block: clamp(20px, 2.6vw, 34px); isolation: isolate; transition: color .3s, padding .45s var(--ease); } .ekip-liste a::before { content: ""; position: absolute; inset: 0 calc(var(--pad) * -1); background: var(--ink); transform: scaleY(0); transform-origin: bottom; transition: transform .5s var(--ease); z-index: -1; } .ekip-liste a:hover, .ekip-liste a:focus-visible { color: var(--paper); padding-left: 14px; } .ekip-liste a:hover::before, .ekip-liste a:focus-visible::before { transform: scaleY(1); } .ekip-liste__no { color: var(--red); } .ekip-liste__foto { display: none; } .ekip-liste__ad { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-block: .06em; font-size: clamp(1.9rem, 4.2vw, 4.2rem); line-height: .95; letter-spacing: -.03em; font-weight: 560; font-stretch: 116%; text-transform: uppercase; } .ekip-liste__unvan { opacity: .65; } .ekip-liste__ok { width: 26px; height: 26px; justify-self: end; transition: transform .45s var(--ease); } .ekip-liste a:hover .ekip-liste__ok { transform: rotate(45deg); color: var(--red); } .liste-onizleme--portre { width: 240px; background: var(--paper); } .liste-onizleme--portre img { filter: grayscale(1) contrast(1.06); } @media (max-width: 800px) { .ekip-liste a { grid-template-columns: 64px minmax(0, 1fr) 22px; row-gap: 6px; } .ekip-liste__no { display: none; } .ekip-liste__foto { display: block; grid-row: span 2; width: 64px; aspect-ratio: 4 / 5; overflow: hidden; } .ekip-liste__foto img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; filter: grayscale(1); } .ekip-liste__ad { font-size: 1.6rem; grid-column: 2; white-space: normal; } .ekip-liste__unvan { grid-column: 2; grid-row: 2; } .ekip-liste__ok { grid-column: 3; grid-row: 1 / span 2; } } /* kişi sayfası */ .kisi { padding-block: calc(var(--ust-h) + clamp(48px, 8vw, 120px)) clamp(90px, 10vw, 160px); } .kisi__foto { grid-column: 1 / span 5; position: sticky; top: calc(var(--ust-h) + 24px); align-self: start; } .kisi__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; mix-blend-mode: multiply; filter: grayscale(1) contrast(1.08); } .kisi__metin { grid-column: 7 / span 6; display: grid; gap: 28px; align-content: start; min-width: 0; } .kisi__yol { opacity: .6; } .kisi__yol a:hover { color: var(--red); } .kisi__unvan { color: var(--red); } .kisi .metin { color: color-mix(in srgb, var(--ink) 82%, var(--paper)); } @media (max-width: 800px) { .kisi__foto, .kisi__metin { grid-column: 1 / -1; position: static; } .kisi__metin { margin-top: 40px; } } /* ---------- eskizler ---------- */ .eskiz { padding-block: clamp(60px, 8vw, 120px); } .eskiz__izgara { columns: 4 260px; column-gap: var(--gut); } .eskiz__izgara li { break-inside: avoid; margin-bottom: var(--gut); } .eskiz__izgara a { position: relative; display: block; overflow: hidden; background: #fff; cursor: zoom-in; } .eskiz__izgara img { width: 100%; mix-blend-mode: multiply; transition: scale 1s var(--ease), filter .5s; filter: grayscale(.2); } .eskiz__izgara a:hover img { scale: 1.03; filter: none; } .eskiz__izgara li[hidden] { display: none; } .eskiz__etiket { position: absolute; left: 10px; bottom: 8px; right: 10px; font-size: .6rem; background: var(--paper); padding: 3px 7px; width: fit-content; max-width: calc(100% - 20px); text-transform: none; transition: opacity .3s; } .eskiz--baslik-hover .eskiz__etiket { opacity: 0; } .eskiz--baslik-hover .eskiz__izgara a:hover .eskiz__etiket, .eskiz--baslik-hover .eskiz__izgara a:focus-visible .eskiz__etiket { opacity: 1; } .eskiz--baslik-yok .eskiz__etiket { display: none; } .eskiz__fazla { margin: 16px auto 0; display: flex; gap: 14px; } .eskiz .arac { margin-bottom: 32px; } .eskiz .telif { color: var(--ink); } /* ---------- iletişim ---------- */ .iletisim { padding-block: clamp(80px, 10vw, 160px); } .iletisim__bilgi { grid-column: 1 / span 4; display: grid; gap: 36px; align-content: start; } .iletisim__bilgi div { display: grid; gap: 6px; } .iletisim__bilgi h2 { opacity: .55; font-weight: 400; margin-bottom: 6px; } .iletisim__bilgi a:not(.bag) { font-size: var(--t-h3); font-weight: 520; width: fit-content; } .iletisim__bilgi a:not(.bag):hover { color: var(--red); } .iletisim__bilgi p { font-size: var(--t-lead); line-height: 1.35; margin-bottom: 8px; } .iletisim__form { grid-column: 6 / -1; scroll-margin-top: calc(var(--ust-h) + 20px); } .iletisim__baslik { font-size: var(--t-h2); line-height: 1; letter-spacing: -.02em; font-weight: 540; font-stretch: 108%; margin-bottom: clamp(28px, 3vw, 44px); } .form { display: grid; grid-template-columns: 1fr 1fr; gap: 26px var(--gut); } .alan { display: grid; gap: 8px; } .alan--tam { grid-column: 1 / -1; } .alan span { opacity: .6; } .alan input, .alan select, .alan textarea { font: inherit; font-size: 1.1rem; color: inherit; background: transparent; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; padding: 10px 0; width: 100%; transition: border-color .2s; } .alan textarea { resize: vertical; min-height: 140px; } .alan select { appearance: none; background: linear-gradient(45deg, transparent 50%, currentColor 50%) right 6px center / 6px 6px no-repeat, linear-gradient(-45deg, transparent 50%, currentColor 50%) right 0 center / 6px 6px no-repeat; } .alan input:focus, .alan select:focus, .alan textarea:focus { outline: none; border-bottom: 2px solid var(--red); } .form__gizli { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .onay { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: .92rem; color: var(--soluk-a); cursor: pointer; } .onay input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--red); } .onay a { color: var(--ink); border-bottom: 1px solid currentColor; } .gonder { grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: 16px; background: var(--ink); color: var(--paper); padding: 18px 28px; font-size: 1.05rem; transition: background-color .3s; } .gonder:hover { background: var(--red); color: var(--ink); } .gonder .ok { width: 18px; height: 18px; } .form-bildirim { border: 1px solid var(--red); padding: 18px 20px; margin-bottom: 28px; } .form-bildirim--tamam { border-color: var(--ink); background: var(--ink); color: var(--paper); font-size: var(--t-lead); } @media (max-width: 900px) { .iletisim__bilgi, .iletisim__form { grid-column: 1 / -1; } .iletisim__form { margin-top: 64px; } .form { grid-template-columns: 1fr; } } /* ---------- master panel modülleri (blog, video galerisi) sitenin renk ve yazı tipleriyle ---------- */ .modul-alan { padding-block: clamp(64px, 8vw, 120px); } .son-yazilar { padding-block: clamp(90px, 10vw, 160px); } .ms-blog, .ms-post, .ms-post__progress, .ms-post__related, .ms-blog-son { --blog-accent: var(--red); --blog-ink: var(--ink); --blog-text: color-mix(in srgb, var(--ink) 82%, var(--paper)); --blog-muted: var(--soluk-a); --blog-line: var(--cizgi-a); --blog-soft: color-mix(in srgb, var(--ink) 5%, transparent); --blog-card: color-mix(in srgb, var(--paper) 60%, #fff); --blog-radius: 0px; --blog-title-font: var(--sans); font-family: var(--sans); } .ms-vg { --vg-brand: var(--ink); --vg-accent: var(--red); --vg-ink: var(--ink); --vg-muted: var(--soluk-a); --vg-line: var(--cizgi-a); --vg-card: color-mix(in srgb, var(--paper) 60%, #fff); --vg-radius: 0px; --vg-title-font: var(--sans); } .bos-not { font-size: var(--t-lead); color: var(--soluk-a); } .sayfa-bas .etiket a:hover { color: var(--red); } /* ---------- yasal sayfalar ---------- */ .yasal { padding-block: clamp(70px, 9vw, 140px); } .yasal__metin { grid-column: 4 / span 7; } .yasal .rte-content { --rte-accent: var(--red); color: var(--ink); } @media (max-width: 800px) { .yasal__metin { grid-column: 1 / -1; } } /* ---------- sayfa geçişleri (destekleyen tarayıcılarda) ---------- */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation: .45s var(--ease-io) both vt-cik; } ::view-transition-new(root) { animation: .6s var(--ease) both vt-gir; } @keyframes vt-cik { to { opacity: 0; transform: translateY(-2vh); } } @keyframes vt-gir { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } } /* ---------- hareket azaltma ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; transition-delay: 0s !important; } .js:not(.giris-gorulmus) .giris { display: none; } .js [data-satirlar] .k > span, .js .hero__baslik .k > span { transform: none; } .js .ilke__metin .ki { opacity: 1; } .hero__kare img { transform: none !important; } @view-transition { navigation: none; } }