@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url('g/archivo-tr-en.woff2') format('woff2-variations');
  unicode-range: U+0020-007E,U+00A0,U+00A9,U+00AB,U+00AE,U+00B7,U+00BB,U+00C7,U+00D6,U+00D7,U+00DC,U+00E7,U+00F6,U+00FC,U+0131,U+2010-2015,U+2018-201A,U+201C-201E,U+2022,U+2026,U+2039,U+203A,U+20AC,U+2212;
}
@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url('g/archivo-tr-ek.woff2') format('woff2-variations');
  unicode-range: U+011E,U+011F,U+0130,U+015E,U+015F,U+20BA;
}

/* Monti Labs · HubX klasmanında örnek site (çok sayfalı)
   Ölçüler: docs/research/2026-11-04-hubx-bolum-plani.md */

:root {
  --derin: #080B1E;
  --gece: #0D1128;
  --yuzey: #141936;
  --parlak: #8E9BFF;
  --kp: #3A4DE6;
  --kobalt: #1F2FA0;
  --kobalt-derin: #17237F;
  --porselen: #F2F2EE;
  --kagit: #F8F8F5;
  --beyaz: #FFFFFF;
  --m2: #B4B7CB;
  --m3: #9A9DB3;
  --cizgi: rgb(242 242 238 / 0.1);
  --cizgi-g: rgb(242 242 238 / 0.22);
  --ink: #0D1128;
  --ink2: #424764;
  --ink3: #585D7A;
  --acik-cizgi: rgb(13 17 40 / 0.11);
  --kobalt-acik-metin: #D6DAF7;

  --pass-zemin: #11281E;
  --pass-lime: #C6EE7C;
  --pass-metin: #F1F6EA;
  --pass-ikinci: #B7C9B0;
  --margin-sis: #F5F6FA;
  --margin-kobalt: #263BAA;
  --margin-murekkep: #10173F;
  --margin-ikinci: #474D6E;
  --margin-vurgu: #FFF4D6;
  --ink-zemin: #17212B;
  --ink-mavi: #356DCC;
  --ink-buz: #EDF3FC;
  --ink-ikinci: #A9B4C2;
  --mm-bordo: #7F2A45;
  --mm-bordo-koyu: #6E2239;
  --mm-dut: #963452;
  --mm-kagit: #F8F6F3;
  --mm-murekkep: #30292E;
  --mm-ikinci: #655B61;
  --mm-gul: #E8CDD6;

  --kap: 1120px;
  --kenar: clamp(20px, 5vw, 48px);
  --bolum: clamp(88px, 9vw, 128px);
  --ust-h: 72px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --yazi: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  --tel-w: 280px;
  --tel-yan-w: 196px;
  --urun-tel-w: 236px;
  --proje-tel-w: 150px;
  interpolate-size: allow-keywords;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--ust-h) + 16px); scrollbar-color: #3A3F63 var(--derin); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--derin); color: var(--porselen); font-family: var(--yazi); font-size: 1.0625rem; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
::selection { background: var(--kp); color: #fff; }
.acik ::selection { background: var(--kobalt); color: #fff; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
a, button, summary { -webkit-tap-highlight-color: rgb(142 155 255 / 0.18); touch-action: manipulation; }
h1, h2, h3, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--parlak); outline-offset: 3px; border-radius: 6px; }
.acik :focus-visible { outline-color: var(--kobalt); }
em { font-style: normal; color: var(--parlak); }
.acik em { color: var(--kobalt); }
.kap { width: min(100% - 2 * var(--kenar), var(--kap)); margin-inline: auto; position: relative; }
.atla { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--porselen); color: var(--ink); padding: 10px 16px; border-radius: 999px; font-weight: 600; transition: top 0.2s; }
.atla:focus { top: 12px; }
.acik { background: var(--porselen); color: var(--ink); }

/* Yazı ölçeği (HubX display-m 64/68 · display-s 48/59 karşılığı) */
.d1 { font-size: clamp(2.6rem, 1.2rem + 4.8vw, 5rem); line-height: 1; font-weight: 700; font-stretch: 104%; letter-spacing: -0.04em; text-wrap: balance; }
.d1--cumle { font-size: clamp(2.25rem, 1.1rem + 3.4vw, 4.25rem); line-height: 1.04; max-width: 19ch; }
.d2 { font-size: clamp(2.125rem, 1.25rem + 2.8vw, 3.875rem); line-height: 1.04; font-weight: 670; font-stretch: 104%; letter-spacing: -0.032em; text-wrap: balance; }

/* Hap düğmeler (HubX: 52px, köşe 62px, 0 24px) */
.hap { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 24px; border-radius: 999px; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.005em; line-height: 1; white-space: nowrap; border: 1px solid transparent; transition: background-color 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease), transform 0.35s var(--ease), box-shadow 0.35s var(--ease); }
.hap svg { width: 18px; height: 18px; flex: none; transition: transform 0.35s var(--ease); }
.hap:hover svg { transform: translateX(3px); }
.hap:active { transform: scale(0.98); }
.hap--kucuk { height: 40px; padding: 0 18px; font-size: 0.9375rem; }
.hap--acik { background: var(--porselen); color: var(--ink); }
.hap--acik:hover { background: var(--beyaz); box-shadow: 0 12px 28px -12px rgb(0 0 0 / 0.55); }
.hap--cerceve { border-color: var(--cizgi-g); color: var(--porselen); }
.hap--cerceve:hover { background: rgb(242 242 238 / 0.07); border-color: rgb(242 242 238 / 0.42); }
.hap--koyu { background: var(--ink); color: var(--porselen); }
.hap--koyu:hover { background: var(--kobalt); }
.hap--beyaz { background: #fff; color: var(--kobalt); }
.hap--beyaz:hover { background: #E7EAFF; }
.hap--pass { background: var(--pass-lime); color: var(--pass-zemin); }
.hap--pass:hover { background: #D6F59A; }
.hap--margin { background: var(--margin-kobalt); color: #fff; }
.hap--margin:hover { background: #1E2F8C; }
.hap--inkstay { background: var(--ink-mavi); color: #fff; }
.hap--inkstay:hover { background: #2C5DB2; }

.ok-bag { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.ok-bag svg { width: 16px; height: 16px; transition: transform 0.3s var(--ease); }
.ok-bag:hover svg { transform: translate(2px, -2px); }
.kapi__git { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--parlak); }
.kapi__git svg { width: 18px; height: 18px; transition: transform 0.35s var(--ease); }
.acik .kapi__git { color: var(--kobalt); }

/* ---------- Üst bar ---------- */
.ust { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--ust-h); border-bottom: 1px solid transparent; transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease); }
.ust.kaydi { background: rgb(8 11 30 / 0.8); -webkit-backdrop-filter: saturate(150%) blur(18px); backdrop-filter: saturate(150%) blur(18px); border-bottom-color: var(--cizgi); }
html.menu-acik .ust { background: var(--derin); border-bottom-color: var(--cizgi); -webkit-backdrop-filter: none; backdrop-filter: none; transition: none; }
.ust__ic { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.marka { display: inline-flex; align-items: center; gap: 11px; font-weight: 660; font-size: 1.1875rem; letter-spacing: -0.02em; font-stretch: 104%; }
.marka__isaret { width: 33px; height: 20px; color: var(--porselen); }
.marka--koyu .marka__isaret { color: var(--kobalt); }
.ust__menu { display: flex; gap: clamp(20px, 2.4vw, 34px); }
.ust__menu a { font-size: 0.9688rem; font-weight: 500; color: var(--m2); padding: 10px 0; position: relative; transition: color 0.25s; }
.ust__menu a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ease); }
.ust__menu a:hover, .ust__menu a[aria-current] { color: var(--porselen); }
.ust__menu a:hover::after, .ust__menu a[aria-current]::after { transform: scaleX(1); }
.ust__son { display: flex; align-items: center; gap: 18px; }
.dil { display: inline-flex; gap: 6px; font-size: 0.875rem; color: var(--m3); }
.dil b { color: var(--porselen); font-weight: 600; }
.dil a:hover { color: var(--porselen); }
.menu-dugme { display: none; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--cizgi-g); font-size: 0.9375rem; font-weight: 500; }
.menu-dugme svg { width: 18px; height: 18px; }
.tel-menu { position: fixed; inset: var(--ust-h) 0 auto; z-index: 49; height: calc(100vh - var(--ust-h)); height: calc(100dvh - var(--ust-h)); background: var(--derin); padding: 24px var(--kenar) max(40px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
html.menu-acik { overflow: hidden; scroll-behavior: auto; }
.tel-menu > a { flex-shrink: 0; }
.tel-menu[hidden] { display: none; }
.tel-menu a:not(.hap) { font-size: 1.75rem; font-weight: 620; letter-spacing: -0.02em; padding: 12px 0; border-bottom: 1px solid var(--cizgi); }
.tel-menu a[aria-current] { color: var(--parlak); }
.tel-menu .hap { margin-top: 28px; align-self: flex-start; }

/* ---------- Dev işaret (ışık arkadan, işaretin biçiminde) ---------- */
.dev-isaret { position: absolute; pointer-events: none; height: auto; overflow: visible; }
.dev-isaret__isik { opacity: 0.75; animation: isik-nefes 8s ease-in-out infinite; }
@keyframes isik-nefes { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.95; } }
@media (prefers-reduced-motion: reduce) { .dev-isaret__isik { animation: none; } }

/* ---------- Ana sayfa girişi ---------- */
.giris { --p: 0; position: relative; overflow: hidden; isolation: isolate; padding-top: calc(var(--ust-h) + clamp(40px, 7vh, 88px)); background: var(--derin); }
.giris__metin { position: relative; z-index: 4; text-align: center; display: flex; flex-direction: column; align-items: center; }
.giris__alt { margin-top: 22px; max-width: 44ch; font-size: clamp(1.0625rem, 0.98rem + 0.4vw, 1.3125rem); line-height: 1.55; color: var(--m2); font-weight: 420; text-wrap: balance; }
.giris__eylem { margin-top: 34px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.giris__eylem--sol { justify-content: flex-start; }

/* ---------- Bölüm başı ---------- */
.bolum-bas { display: grid; grid-template-columns: 7fr 5fr; gap: 56px; align-items: end; }
.bolum-bas p { font-size: 1.1875rem; line-height: 1.6; color: var(--m2); max-width: 38ch; }
.acik .bolum-bas p { color: var(--ink2); }

/* ---------- Uygulama ikonları ---------- */
.uygulama { width: 96px; height: 96px; border-radius: 24px; display: grid; place-items: center; flex: none; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1), 0 18px 34px -16px rgb(0 0 0 / 0.8); transition: transform 0.5s var(--ease); }
.uygulama img { width: 58%; height: auto; }
.uygulama--pass { background: var(--pass-zemin); }
.uygulama--margin { background: var(--margin-kobalt); }
.uygulama--inkstay { background: var(--ink-zemin); }
.uygulama--inkstay img { width: 40%; }
.uygulama--masamasa { background: var(--mm-bordo); }

/* ---------- Ana sayfa ürün vitrini (açık zemin, üç kart) ---------- */
.vitrin { padding: var(--bolum) 0; }
.vitrin__izgara { margin-top: clamp(40px, 4.5vw, 64px); display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.urun-kart { display: flex; flex-direction: column; border-radius: 24px; overflow: hidden; background: var(--beyaz); box-shadow: 0 0 0 1px rgb(13 17 40 / 0.06), 0 8px 20px rgb(13 17 40 / 0.06); transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.urun-kart:hover { transform: translateY(-5px); box-shadow: 0 0 0 1px rgb(13 17 40 / 0.08), 0 28px 50px -22px rgb(13 17 40 / 0.3); }
.urun-kart__govde { display: flex; flex-direction: column; padding: 24px 26px 26px; flex: 1; }
.urun-kart__ust { display: flex; align-items: center; gap: 10px; }
.urun-kart__ust b { font-weight: 650; font-size: 1.0625rem; letter-spacing: -0.01em; }
.urun-kart__tur { margin-left: auto; font-size: 0.875rem; color: var(--ink3); font-weight: 520; }
.urun-kart__cumle { display: block; margin-top: 14px; font-size: 1.375rem; line-height: 1.2; font-weight: 640; letter-spacing: -0.022em; text-wrap: balance; }
.urun-kart .kapi__git { margin-top: auto; padding-top: 22px; }
.urun-kart:hover .kapi__git svg { transform: translateX(4px); }

/* ---------- Ana sayfa çözüm özeti ---------- */
.ozet-cozum { padding: var(--bolum) 0; background: var(--gece); }
.ozet-cozum__izgara { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.ozet-cozum__metin { margin: 22px 0 32px; font-size: 1.1875rem; color: var(--m2); max-width: 38ch; }
.satirlar { border-top: 1px solid var(--cizgi); }
.satirlar a { display: grid; grid-template-columns: 1fr auto; column-gap: 24px; align-items: center; padding: 26px 0; border-bottom: 1px solid var(--cizgi); }
.satirlar b { font-size: clamp(1.5rem, 1.2rem + 0.8vw, 2rem); font-weight: 640; letter-spacing: -0.026em; line-height: 1.1; transition: translate 0.45s var(--ease), color 0.3s; }
.satirlar span { grid-column: 1; margin-top: 6px; color: var(--m2); transition: translate 0.45s var(--ease); }
.satirlar svg { grid-column: 2; grid-row: 1 / span 2; width: 22px; height: 22px; color: var(--parlak); transition: transform 0.4s var(--ease); }
.satirlar a:hover b, .satirlar a:hover span { translate: 10px 0; }
.satirlar a:hover b { color: #fff; }
.satirlar a:hover svg { transform: translateX(4px); }

/* ---------- Kobalt alanlar: DNA ---------- */
.dna-bant, .dna-alan { position: relative; overflow: hidden; isolation: isolate; color: #fff; background: radial-gradient(60% 75% at 100% 0%, rgb(142 155 255 / 0.45), transparent 62%), radial-gradient(55% 80% at 0% 100%, rgb(58 77 230 / 0.7), transparent 60%), var(--kobalt); }
.dna-bant { padding: clamp(100px, 11vw, 160px) 0; }
.dna-bant ::selection, .dna-alan ::selection { background: #fff; color: var(--kobalt); }
.dna-isaret { position: absolute; right: -6%; bottom: -14%; width: min(940px, 78vw); height: auto; z-index: -1; }
.dna-buyuk { font-size: clamp(2.5rem, 1.3rem + 4vw, 5rem); font-weight: 700; line-height: 1; letter-spacing: -0.04em; font-stretch: 104%; max-width: 13ch; text-wrap: balance; }
.dna-bant p, .dna-alan p { margin-top: 24px; font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem); color: var(--kobalt-acik-metin); max-width: 46ch; }
.dna-bant .hap { margin-top: 32px; }
.dna-bant :focus-visible, .dna-alan :focus-visible { outline-color: #fff; }

/* ---------- Ana sayfa son iki kart ---------- */
.son-iki { padding: var(--bolum) 0; background: var(--derin); }
.son-iki__izgara { display: grid; grid-template-columns: 5fr 7fr; gap: 20px; }
.son-kart { display: flex; flex-direction: column; padding: clamp(28px, 3vw, 44px); border-radius: 24px; background: linear-gradient(180deg, var(--yuzey), #10142E); box-shadow: inset 0 0 0 1px var(--cizgi); transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease); }
a.son-kart:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--cizgi-g); }
a.son-kart:hover .kapi__git svg { transform: translateX(4px); }
.son-kart h2 { font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2.125rem); font-weight: 650; letter-spacing: -0.028em; line-height: 1.1; }
.son-kart__buyuk { margin-top: 18px; font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.875rem); font-weight: 560; letter-spacing: -0.022em; line-height: 1.2; color: var(--parlak); }
.son-kart p:not(.son-kart__buyuk) { margin-top: 12px; color: var(--m2); max-width: 44ch; }
.son-kart .kapi__git { margin-top: auto; padding-top: 28px; }
.son-kart--iletisim .hap { margin-top: 28px; align-self: flex-start; }
.eposta { margin-top: 22px; display: inline-block; align-self: flex-start; font-size: clamp(1.625rem, 1.2rem + 1.5vw, 2.5rem); font-weight: 650; letter-spacing: -0.03em; color: var(--parlak); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 10px; text-decoration-color: rgb(142 155 255 / 0.35); transition: text-decoration-color 0.3s; }
.eposta:hover { text-decoration-color: var(--parlak); }

/* ---------- Alt sayfa girişi ---------- */
.sayfa-giris { position: relative; overflow: hidden; isolation: isolate; min-height: clamp(520px, 72vh, 700px); display: flex; flex-direction: column; justify-content: center; padding: calc(var(--ust-h) + 56px) 0 72px; background: var(--derin); }
.sayfa-giris > .dev-isaret { right: -4%; bottom: -150px; width: min(720px, 54vw); z-index: -1; }
.sayfa-giris__ic { max-width: 720px; margin-left: max(var(--kenar), calc((100% - var(--kap)) / 2)); margin-right: auto; width: auto; }
.sayfa-giris__alt { margin-top: 24px; font-size: clamp(1.125rem, 1rem + 0.45vw, 1.375rem); line-height: 1.55; color: var(--m2); max-width: 40ch; text-wrap: balance; }
.sayfa-giris--orta { text-align: center; }
.sayfa-giris--orta .sayfa-giris__alt { margin-inline: auto; }
.ikon-sirasi { margin-top: clamp(48px, 6vw, 80px); display: flex; justify-content: center; gap: clamp(20px, 5vw, 64px); flex-wrap: wrap; }
.ikon-sirasi a { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ikon-sirasi b { margin-top: 14px; font-size: 1.125rem; font-weight: 640; letter-spacing: -0.015em; }
.ikon-sirasi span:not(.uygulama) { font-size: 0.9375rem; color: var(--m3); }
.uygulama--dev { width: clamp(96px, 9vw, 128px); height: clamp(96px, 9vw, 128px); border-radius: 30%; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12), 0 30px 50px -20px rgb(0 0 0 / 0.85); }
.ikon-sirasi a:hover .uygulama { transform: translateY(-6px); }

/* ---------- Ürün sahneleri ---------- */
.urun { --urun-metin: var(--porselen); --urun-ikinci: var(--m2); --urun-cizgi: var(--cizgi-g); padding: clamp(88px, 9vw, 128px) 0; overflow: hidden; color: var(--urun-metin); position: relative; isolation: isolate; }
.urun__izgara { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 5vw, 72px); align-items: center; }
.urun--ters .urun__izgara { grid-template-columns: 7fr 5fr; }
.urun--ters .urun__metin { order: 2; }
.urun__kimlik { display: flex; align-items: center; gap: 18px; }
.uygulama--buyuk { width: 72px; height: 72px; border-radius: 18px; }
.urun__ad { font-size: clamp(2.25rem, 1.6rem + 1.6vw, 3rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1; font-stretch: 104%; }
.urun__ad--logo img { height: clamp(32px, 2.8vw, 40px); width: auto; }
.urun__ad--inkstay img { height: clamp(50px, 4.2vw, 62px); margin-left: -12px; }
.urun__tur { margin-top: 10px; font-size: 1.0625rem; font-weight: 520; color: var(--urun-ikinci); }
.urun__kimlik .urun__tur { margin-top: 6px; }
.urun__baslik { margin-top: 32px; font-size: clamp(1.75rem, 1.2rem + 1.5vw, 2.625rem); font-weight: 650; line-height: 1.08; letter-spacing: -0.028em; max-width: 16ch; text-wrap: balance; font-stretch: 102%; }
.urun__tanim { margin-top: 18px; font-size: 1.0625rem; line-height: 1.65; color: var(--urun-ikinci); max-width: 46ch; }
.cipler { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.cipler li { height: 32px; display: inline-flex; align-items: center; padding: 0 13px; border-radius: 999px; font-size: 0.875rem; font-weight: 520; border: 1px solid var(--cip-kenar, var(--cizgi-g)); color: var(--cip-renk, var(--porselen)); }
.urun__eylem { margin-top: 34px; display: flex; align-items: center; flex-wrap: wrap; gap: 16px 24px; }
.urun__gorsel { position: relative; }
.ozellikler { margin-top: clamp(56px, 6vw, 88px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 32px; }
.ozellikler--dort { grid-template-columns: repeat(4, 1fr); }
.ozellikler li { padding-top: 22px; border-top: 1px solid var(--urun-cizgi); }
.ozellikler h3 { font-size: 1.1875rem; font-weight: 640; letter-spacing: -0.015em; line-height: 1.25; }
.ozellikler p { margin-top: 8px; font-size: 1rem; line-height: 1.6; color: var(--urun-ikinci); }
.urun__not { margin-top: 36px; font-size: 0.8125rem; color: var(--urun-ikinci); }

.urun--pass { background: var(--pass-zemin); --urun-metin: var(--pass-metin); --urun-ikinci: var(--pass-ikinci); --urun-cizgi: rgb(198 238 124 / 0.24); --cip-kenar: rgb(198 238 124 / 0.38); --cip-renk: var(--pass-lime); }
.urun--pass::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 60% at 75% 38%, rgb(198 238 124 / 0.13), transparent 70%); }
.urun--pass .ok-bag { color: var(--pass-lime); }
.urun--pass :focus-visible { outline-color: var(--pass-lime); }
.urun--margin { background: var(--margin-sis); --urun-metin: var(--margin-murekkep); --urun-ikinci: var(--margin-ikinci); --urun-cizgi: rgb(16 23 63 / 0.14); }
.urun--margin ::selection { background: var(--margin-kobalt); color: #fff; }
.urun--margin :focus-visible { outline-color: var(--margin-kobalt); }
.urun--margin .ok-bag { color: var(--margin-kobalt); }
.urun--margin mark { background: linear-gradient(transparent 52%, var(--margin-vurgu) 52%, var(--margin-vurgu) 92%, transparent 92%); color: inherit; padding: 0 0.06em; }
.urun--margin .ui-kart { box-shadow: 0 0 0 1px rgb(16 23 63 / 0.08), 0 2px 4px rgb(16 23 63 / 0.05), 0 40px 70px -30px rgb(16 23 63 / 0.35); }
.urun--inkstay { background: var(--ink-zemin); --urun-metin: #F5F7FA; --urun-ikinci: var(--ink-ikinci); --urun-cizgi: rgb(237 243 252 / 0.18); }
.urun--inkstay::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 60% at 72% 40%, rgb(53 109 204 / 0.24), transparent 70%); }
.urun--inkstay :focus-visible { outline-color: #9DBDF3; }
.urun--masamasa { background: var(--mm-kagit); --urun-metin: var(--mm-murekkep); --urun-ikinci: var(--mm-ikinci); --urun-cizgi: rgb(48 41 46 / 0.14); --cip-kenar: rgb(127 42 69 / 0.3); --cip-renk: var(--mm-bordo); }
.urun--masamasa ::selection { background: var(--mm-bordo); color: #fff; }
.urun--masamasa :focus-visible { outline-color: var(--mm-bordo); }
.urun--masamasa mark { background: linear-gradient(transparent 52%, var(--mm-gul) 52%, var(--mm-gul) 92%, transparent 92%); color: inherit; padding: 0 0.06em; }
.urun--masamasa .ui-kart { border-radius: 16px; box-shadow: 0 0 0 1px rgb(48 41 46 / 0.08), 0 2px 4px rgb(48 41 46 / 0.06), 0 40px 70px -30px rgb(48 41 46 / 0.45); }
.urun__ad--masamasa img { height: clamp(36px, 3.2vw, 46px); margin-left: -4px; }

/* ---------- Kapanış ---------- */
.kapanis { padding: var(--bolum) 0; background: var(--gece); text-align: center; }
.kapanis__ic { display: flex; flex-direction: column; align-items: center; }
.kapanis .d2 { max-width: 20ch; }
.kapanis p { margin-top: 20px; font-size: 1.1875rem; color: var(--m2); max-width: 46ch; }
.kapanis .hap { margin-top: 32px; }

/* ---------- Çözümler ---------- */
.cozumler { padding: var(--bolum) 0; }
.cozumler__izgara { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.cozumler__bas { position: sticky; top: calc(var(--ust-h) + 40px); }
.cozumler__bas p { margin-top: 22px; font-size: 1.1875rem; line-height: 1.6; color: var(--ink2); max-width: 36ch; }
.alanlar { border-top: 1px solid var(--acik-cizgi); }
.alan { padding: 34px 0 36px; border-bottom: 1px solid var(--acik-cizgi); scroll-margin-top: calc(var(--ust-h) + 24px); }
.alan__ad { font-size: clamp(1.75rem, 1.35rem + 1.1vw, 2.5rem); font-weight: 650; letter-spacing: -0.03em; line-height: 1.05; font-stretch: 104%; }
.alan__metin { margin-top: 12px; font-size: 1.125rem; color: var(--ink2); max-width: 48ch; }
.alan__kanit { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 0.9375rem; }
.alan__kanit > span { color: var(--ink3); }
.alan__kanit a { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: underline; text-decoration-color: rgb(13 17 40 / 0.25); text-underline-offset: 4px; transition: text-decoration-color 0.25s; }
.alan__kanit a:hover { text-decoration-color: currentColor; }
.mini { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; overflow: hidden; flex: none; background: #fff; box-shadow: 0 0 0 1px rgb(13 17 40 / 0.1); }
.mini img { width: 100%; height: 100%; object-fit: cover; }
.mini--pass { background: var(--pass-zemin); } .mini--pass img { width: 60%; height: auto; }
.mini--margin { background: var(--margin-kobalt); } .mini--margin img { width: 62%; height: auto; }
.mini--inkstay { background: var(--ink-zemin); } .mini--inkstay img { width: 42%; height: auto; }
.mini--masamasa { background: var(--mm-bordo); } .mini--masamasa img { width: 64%; height: auto; }
.mini--buyuk { width: 44px; height: 44px; border-radius: 12px; }

.yz { padding: var(--bolum) 0; background: var(--gece); }
.yz__izgara { display: grid; grid-template-columns: 6fr 6fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.yz__metin p { font-size: 1.1875rem; line-height: 1.65; color: var(--m2); max-width: 46ch; }
.yz__metin p + p { margin-top: 18px; }

.surec { padding: var(--bolum) 0; background: var(--beyaz); color: var(--ink); }
.surec ::selection { background: var(--kobalt); color: #fff; }
.adimlar { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; counter-reset: adim; }
.adimlar li { padding-top: 24px; border-top: 1px solid var(--acik-cizgi); }
.adim__no { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--kobalt); color: #fff; font-weight: 700; font-size: 1.0625rem; }
.adimlar h3 { margin-top: 20px; font-size: 1.375rem; font-weight: 650; letter-spacing: -0.022em; }
.adimlar p { margin-top: 8px; color: var(--ink2); }

.projeler { padding: var(--bolum) 0; }
.projeler__izgara { margin-top: clamp(40px, 4.5vw, 64px); display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.proje { background: var(--beyaz); border-radius: 24px; overflow: hidden; box-shadow: 0 0 0 1px rgb(13 17 40 / 0.06), 0 8px 20px rgb(13 17 40 / 0.06); display: flex; flex-direction: column; transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.proje:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgb(13 17 40 / 0.08), 0 24px 44px -18px rgb(13 17 40 / 0.22); }
.proje__medya { position: relative; aspect-ratio: 16 / 11; padding: 9% 13% 0 8%; overflow: hidden; }
.proje--iyoka .proje__medya { background: linear-gradient(160deg, #FFF3EC 0%, #FBE4D6 100%); }
.proje--ecce .proje__medya { background: linear-gradient(160deg, #F1EDE6 0%, #E3DCD0 100%); }
.proje__medya .tarayici { transition: transform 0.7s var(--ease); }
.proje:hover .proje__medya .tarayici { transform: translateY(-6px); }
.proje__tel { position: absolute; right: 6%; bottom: -22%; transition: transform 0.7s var(--ease); }
.proje:hover .proje__tel { transform: translateY(-14px); }
.proje__govde { padding: clamp(24px, 2.6vw, 36px); display: flex; flex-direction: column; flex: 1; }
.proje__ust { display: flex; align-items: center; justify-content: space-between; }
.etiket { font-size: 0.8125rem; font-weight: 600; color: var(--ink2); padding: 6px 12px; border-radius: 999px; background: var(--porselen); }
.proje__ad { margin-top: 22px; font-size: clamp(1.75rem, 1.4rem + 0.9vw, 2.25rem); font-weight: 670; letter-spacing: -0.03em; line-height: 1.05; }
.proje__tur { margin-top: 6px; font-size: 1rem; font-weight: 520; color: var(--ink3); }
.proje__tanim { margin-top: 14px; color: var(--ink2); max-width: 46ch; }
.proje .ok-bag { margin-top: auto; padding-top: 22px; align-self: flex-start; }

.tarayici { position: relative; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgb(13 17 40 / 0.1), 0 2px 4px rgb(13 17 40 / 0.04), 0 40px 70px -34px rgb(13 17 40 / 0.35); }
.tarayici__cubuk { height: 30px; display: flex; align-items: center; gap: 6px; padding: 0 12px; background: #EEEFF4; border-bottom: 1px solid rgb(13 17 40 / 0.07); }
.tarayici__cubuk i { width: 9px; height: 9px; border-radius: 50%; background: rgb(13 17 40 / 0.16); }
.tarayici__adres { margin-inline: auto; translate: -20px 0; font-size: 0.6875rem; font-weight: 500; color: var(--ink3); background: rgb(13 17 40 / 0.06); padding: 3px 12px; border-radius: 999px; }
.tarayici img { width: 100%; height: auto; }

/* ---------- DNA sayfası ---------- */
.dna-alan { padding: clamp(110px, 12vw, 180px) 0; }

.ilkeler { padding: var(--bolum) 0; background: var(--beyaz); color: var(--ink); }
.ilkeler ::selection { background: var(--kobalt); color: #fff; }
.ilkeler :focus-visible { outline-color: var(--kobalt); }
.ilkeler__bas { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 6vw, 100px); align-items: end; }
.ilkeler__bas p { font-size: 1.1875rem; line-height: 1.65; color: var(--ink2); max-width: 46ch; }
.ilke-listesi { margin-top: clamp(48px, 5vw, 72px); border-top: 1px solid var(--acik-cizgi); }
.ilke { border-bottom: 1px solid var(--acik-cizgi); }
.ilke summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 0; }
.ilke summary::-webkit-details-marker { display: none; }
.ilke__ad { font-size: clamp(1.75rem, 1.2rem + 1.8vw, 3rem); font-weight: 380; letter-spacing: -0.032em; line-height: 1.1; transition: font-weight 0.4s var(--ease); }
.ilke[open] .ilke__ad, .ilke summary:hover .ilke__ad { font-weight: 600; }
.ilke__ok { width: 48px; height: 48px; flex: none; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgb(13 17 40 / 0.16); transition: background-color 0.3s, transform 0.5s var(--ease); }
.ilke__ok svg { width: 20px; height: 20px; }
.ilke summary:hover .ilke__ok { background: var(--porselen); }
.ilke[open] .ilke__ok { transform: rotate(180deg); background: var(--ink); color: #fff; box-shadow: none; }
.ilke::details-content { block-size: 0; overflow: clip; transition: block-size 0.55s var(--ease), content-visibility 0.55s allow-discrete; }
.ilke[open]::details-content { block-size: auto; }
.ilke__metin p { padding: 0 0 30px; font-size: 1.1875rem; line-height: 1.65; color: var(--ink2); max-width: 60ch; }
@media (prefers-reduced-motion: reduce) { .ilke::details-content { transition: none; } }

.kurucular { padding: var(--bolum) 0; }
.kurucu-listesi { margin-top: clamp(40px, 4.5vw, 64px); display: grid; grid-template-columns: repeat(2, minmax(0, 420px)); gap: 20px; }
.kurucu { display: flex; align-items: center; gap: 22px; padding: 16px; border-radius: 24px; background: var(--beyaz); box-shadow: 0 0 0 1px rgb(13 17 40 / 0.06), 0 8px 20px rgb(13 17 40 / 0.06); }
.kurucu img { width: 132px; height: 132px; border-radius: 18px; object-fit: cover; flex: none; }
.kurucu b { display: block; font-size: 1.3125rem; font-weight: 650; letter-spacing: -0.02em; line-height: 1.2; }
.kurucu span { display: block; margin-top: 4px; color: var(--ink3); }

/* ---------- Kariyer ---------- */
.calisma { padding: var(--bolum) 0; }
.calisma__izgara { display: grid; grid-template-columns: 6fr 6fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.calisma__metin > p { font-size: 1.1875rem; line-height: 1.65; color: var(--ink2); max-width: 46ch; }
.bilgi { margin-top: 32px; border-top: 1px solid var(--acik-cizgi); }
.bilgi > div { display: grid; grid-template-columns: 200px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--acik-cizgi); }
.bilgi dt { color: var(--ink3); font-size: 0.9375rem; }
.bilgi dd { font-weight: 560; }
.bilgi a { text-decoration: underline; text-decoration-color: rgb(13 17 40 / 0.25); text-underline-offset: 4px; }
.bilgi a:hover { text-decoration-color: currentColor; }
.bilgi--koyu { margin-top: 0; border-top-color: var(--cizgi); }
.bilgi--koyu > div { border-bottom-color: var(--cizgi); }
.bilgi--koyu dt { color: var(--m3); }
.bilgi--koyu a { text-decoration-color: rgb(242 242 238 / 0.3); }
.ilanlar { padding: var(--bolum) 0; background: var(--derin); }
.ilanlar__izgara { margin-top: clamp(32px, 4vw, 56px); display: grid; grid-template-columns: 7fr 5fr; gap: 20px; align-items: stretch; }
.ilan-bos { display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 3vw, 48px); border-radius: 24px; box-shadow: inset 0 0 0 1px var(--cizgi-g); }
.ilan-bos__baslik { font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2.25rem); font-weight: 600; letter-spacing: -0.026em; line-height: 1.15; color: var(--parlak); }
.ilan-bos p:not(.ilan-bos__baslik) { margin-top: 12px; color: var(--m2); max-width: 44ch; }
.basvuru { background: var(--beyaz); color: var(--ink); border-radius: 24px; padding: clamp(28px, 3vw, 40px); }
.basvuru h3 { font-size: 1.875rem; font-weight: 650; letter-spacing: -0.028em; line-height: 1.1; }
.basvuru__yer { margin-top: 10px; display: flex; align-items: center; gap: 6px; font-weight: 520; color: var(--ink3); font-size: 1rem; }
.basvuru__yer svg { width: 18px; height: 18px; }
.basvuru p:not(.basvuru__yer) { margin-top: 18px; color: var(--ink2); }
.basvuru .hap { margin-top: 28px; }
.basvuru :focus-visible { outline-color: var(--kobalt); }

/* ---------- İletişim ---------- */
.iletisim-giris__izgara { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(40px, 6vw, 96px); align-items: end; }
.eposta--dev { margin-top: 36px; font-size: clamp(2rem, 1.2rem + 3vw, 3.75rem); text-underline-offset: 12px; }
.adres { font-style: normal; display: grid; gap: 4px; color: var(--m2); padding-bottom: 10px; }
.adres b { color: var(--porselen); font-weight: 620; margin-bottom: 6px; }
.adres .ok-bag { margin-top: 16px; color: var(--porselen); justify-self: start; }
.konular { padding: var(--bolum) 0; }
.konu-izgara { margin-top: clamp(32px, 4vw, 56px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.konu { display: flex; flex-direction: column; height: 100%; min-height: 280px; padding: clamp(24px, 2.6vw, 34px); border-radius: 24px; background: var(--beyaz); box-shadow: 0 0 0 1px rgb(13 17 40 / 0.06), 0 8px 20px rgb(13 17 40 / 0.06); transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.konu:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgb(13 17 40 / 0.08), 0 24px 44px -18px rgb(13 17 40 / 0.22); }
.konu__baslik { font-size: clamp(1.5rem, 1.3rem + 0.6vw, 1.875rem); font-weight: 650; letter-spacing: -0.026em; line-height: 1.1; }
.konu__metin { margin-top: 12px; font-size: 1.0625rem; line-height: 1.55; color: var(--ink2); max-width: 32ch; text-wrap: pretty; }
.konu__posta { margin-top: auto; padding-top: 28px; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--kobalt); text-decoration: underline; text-underline-offset: 5px; text-decoration-color: rgb(31 47 160 / 0.3); }
.konu__posta svg { width: 20px; height: 20px; }
.sirket { padding: var(--bolum) 0; background: var(--gece); }
.sirket__izgara { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 6vw, 96px); align-items: start; }

/* ---------- Alt bilgi ---------- */
.alt { padding: clamp(56px, 6vw, 80px) 0 32px; }
.alt__ust { display: grid; grid-template-columns: 4fr 8fr auto; gap: 40px; align-items: start; }
.alt__marka p { margin-top: 14px; color: var(--ink2); max-width: 26ch; }
.alt__sutunlar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.alt__sutunlar h2 { font-size: 0.9375rem; font-weight: 650; margin-bottom: 12px; }
.alt__sutunlar a { display: block; padding: 5px 0; font-size: 0.9375rem; color: var(--ink2); transition: color 0.25s; }
.alt__sutunlar a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.yukari { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; transition: transform 0.35s var(--ease), background-color 0.3s; }
.yukari:hover { transform: translateY(-3px); background: var(--kobalt); }
.yukari svg { width: 20px; height: 20px; }
.alt__son { margin-top: clamp(48px, 5vw, 72px); padding-top: 22px; border-top: 1px solid var(--acik-cizgi); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 0.8438rem; color: var(--ink3); }
.alt__son a:hover { color: var(--ink); }

/* ---------- Duyarlı düzen ---------- */
@media (max-width: 1080px) {
  .ust__menu, .dil, .ust__son > .hap { display: none; }
  .menu-dugme { display: inline-flex; }
  .ozellikler--dort { grid-template-columns: repeat(2, 1fr); gap: 28px 32px; }
}
@media (max-width: 960px) {
  :root { --tel-w: 236px; --tel-yan-w: 160px; --urun-tel-w: 200px; }
  .bolum-bas, .ozet-cozum__izgara, .cozumler__izgara, .yz__izgara, .ilkeler__bas, .calisma__izgara, .iletisim-giris__izgara, .sirket__izgara, .ilanlar__izgara { grid-template-columns: 1fr; gap: 24px; }
  .cozumler__bas { position: static; }
  .cozumler__izgara, .ozet-cozum__izgara { gap: 40px; }
  .urun__izgara, .urun--ters .urun__izgara { grid-template-columns: 1fr; gap: 56px; }
  .urun--ters .urun__metin { order: 0; }
  .son-iki__izgara, .projeler__izgara { grid-template-columns: 1fr; }
  .vitrin__izgara { grid-template-columns: 1fr; max-width: 520px; }
  .adimlar { grid-template-columns: repeat(2, 1fr); }
  .konu-izgara { grid-template-columns: 1fr; }
  .konu { min-height: 0; }
  .kurucu-listesi { grid-template-columns: 1fr; }
  .alt__ust { grid-template-columns: 1fr auto; }
  .alt__sutunlar { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  :root { --tel-w: 196px; --tel-yan-w: 132px; --urun-tel-w: 150px; --proje-tel-w: 104px; --ust-h: 64px; }
  .giris__eylem { width: 100%; flex-direction: column; align-items: stretch; max-width: 340px; }
  .giris__eylem--sol { max-width: none; }
  .ikon-sirasi { gap: 14px; flex-wrap: nowrap; }
  .ikon-sirasi li { flex: 1; min-width: 0; }
  .uygulama--dev { width: 72px; height: 72px; }
  .ikon-sirasi { gap: 10px; }
  .ikon-sirasi b { font-size: 1rem; }
  .ikon-sirasi span:not(.uygulama) { font-size: 0.8125rem; text-align: center; }
  .ozellikler, .ozellikler--dort { grid-template-columns: 1fr; gap: 24px; }
  .adimlar { grid-template-columns: 1fr; }
  .bilgi > div { grid-template-columns: 1fr; gap: 2px; }
  .kurucu img { width: 96px; height: 96px; }
  .alt__sutunlar { grid-template-columns: 1fr 1fr; gap: 28px 16px; }
  .satirlar a:hover b, .satirlar a:hover span { translate: none; }
  .sayfa-giris { min-height: 0; padding: calc(var(--ust-h) + 56px) 0 200px; }
  .sayfa-giris--orta { padding-bottom: 72px; }
  .sayfa-giris > .dev-isaret { width: 110vw; right: -30vw; bottom: -110px; }
}

/* İçerik düzenlemesi: mevcut HubX yerleşimi içinde okunabilir ölçüler. */
.giris__metin .d1 { font-size: clamp(2.25rem, 1.1rem + 3.65vw, 4.35rem); line-height: 1.08; max-width: 26ch; letter-spacing: -0.035em; }
.giris__alt { max-width: 64ch; text-wrap: pretty; }
.giris__alt-serit p { max-width: 65ch; }
.sayfa-giris__alt { max-width: 55ch; text-wrap: pretty; }
.sayfa-dna .d1--cumle { max-width: 23ch; }
.sayfa-iletisim .iletisim-giris h1 { font-size: clamp(2.5rem, 1.1rem + 3.5vw, 4.5rem); }
.bolum-bas p, .urun__tanim, .alan__metin, .ilke__metin p, .ozet-cozum__metin { text-wrap: pretty; }
.dna-buyuk { max-width: 20ch; }
.ozet-cozum .d2 { max-width: 19ch; }
.alt__marka p { max-width: 30ch; }
.hap--cerceve, .menu-dugme, .durdur { border-color: #6E7290; }
.sayfa-giris .dev-isaret__isik { animation: none; }
html[data-hareket='durdu'] .dev-isaret__isik,
html[data-hareket='durdu'] .cihaz .telefon { animation-play-state: paused; }
@media (max-width: 600px) {
  .giris__metin .d1 { font-size: clamp(2rem, 8.5vw, 2.75rem); max-width: 20ch; }
  .giris__alt { max-width: 38ch; font-size: 1.0625rem; line-height: 1.65; }
  .giris__metin { padding-top: 8px; }
  .dna-buyuk { max-width: 18ch; }
}
@media (max-width: 1080px) {
  html:not(.js) .ust { position: relative; height: auto; }
  html:not(.js) .ust__ic { min-height: var(--ust-h); }
  html:not(.js) .menu-dugme { display: none; }
  html:not(.js) .tel-menu[hidden] { display: flex; position: static; height: auto; padding-block: 0 24px; }
  html:not(.js) .tel-menu a:not(.hap) { font-size: 1rem; }
}

/* Ürün sunumu: ana sayfada kimlik, ürün sayfasında tek okunabilir ekran. */
.giris { min-height: 760px; min-height: min(820px, 92svh); display: flex; flex-direction: column; justify-content: center; padding-block: calc(var(--ust-h) + 64px) 32px; }
.giris__metin .d1 { max-width: 26ch; }
.giris__imza { position: absolute; inset: auto -12% -28% auto; width: min(960px, 70vw); opacity: 0.1; z-index: -1; pointer-events: none; }
.giris__imza .dev-isaret { position: static; width: 100%; }
.giris__imza .dev-isaret__isik { animation: none; }
.urun-imzalari { display: flex; justify-content: center; flex-wrap: wrap; gap: 28px 48px; margin-top: 88px; padding-top: 28px; border-top: 1px solid var(--cizgi-g); }
.urun-imzalari a { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-size: 1rem; color: var(--m2); transition: color 200ms; }
.urun-imzalari a:hover { color: var(--porselen); }
.urun-imzalari .mini { width: 32px; height: 32px; border-radius: 8px; }
.vitrin__izgara { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; max-width: none; }
.urun-kart { border-radius: 0; background: transparent; border-top: 1px solid var(--acik-cizgi); box-shadow: none; overflow: visible; }
.urun-kart:hover { transform: none; box-shadow: none; }
.urun-kart__govde { padding: 28px 0 0; }
.urun-kart__ust { flex-direction: column; align-items: flex-start; gap: 12px; }
.urun-kart__ust .mini { width: 56px; height: 56px; border-radius: 14px; margin-bottom: 12px; }
.urun-kart__ust b { font-size: 1.5rem; letter-spacing: -0.025em; }
.urun-kart__tur { margin-left: 0; }
.urun-kart__cumle { font-size: 1.125rem; line-height: 1.5; font-weight: 450; letter-spacing: 0; text-wrap: pretty; }
.urun-kart .kapi__git { padding-top: 24px; font-size: 1rem; }
.urun-kart:hover .mini { transform: translateY(-3px); }
.urun__izgara, .urun--ters .urun__izgara { grid-template-columns: minmax(0,1fr); gap: 48px; }
.urun--ters .urun__metin { order: 0; }
.urun__metin { display: grid; grid-template-columns: 5fr 7fr; column-gap: 64px; align-items: start; }
.urun__metin > * { grid-column: 1; }
.urun__metin .urun__tanim { grid-column: 2; grid-row: 1 / span 6; align-self: center; max-width: 52ch; font-size: 1.1875rem; margin: 0; }
.urun__baslik { max-width: 24ch; }
.urun em { font-style: normal; background: transparent; color: inherit; }
.urun--pass em { color: var(--pass-lime); }
.urun--inkstay em { color: #9DBDF3; }
.urun-kanit { width: 100%; max-width: 1120px; justify-self: center; margin: 0; }
.urun-kanit a { display: block; border-radius: 12px; overflow: hidden; }
.urun-kanit picture, .urun-kanit img { display: block; width: 100%; height: auto; }
.urun-kanit figcaption { margin-top: 16px; font-size: 0.875rem; line-height: 1.6; color: var(--urun-ikinci); }
.urun-kanit figcaption span { display: block; text-decoration: underline; text-underline-offset: 3px; }
.urun-kanit--margin { max-width: 780px; }
.urun--masamasa .urun__izgara { grid-template-columns: 5fr 7fr; align-items: center; gap: 64px; }
.urun--masamasa .urun__metin { display: block; }
.urun--masamasa .urun__tanim { margin-top: 18px; font-size: 1.0625rem; }
.urun-kanit--masamasa { max-width: 360px; }
.proje__medya.proje__medya--duz { padding: 0; aspect-ratio: auto; }
.proje__medya--duz > img { width: 100%; height: auto; }
@media (max-width: 960px) {
  .vitrin__izgara { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 48px 32px; }
  .urun__metin, .urun--masamasa .urun__izgara { grid-template-columns: minmax(0,1fr); }
  .urun__metin .urun__tanim { grid-column: 1; grid-row: auto; margin-top: 20px; font-size: 1.0625rem; }
  .urun__eylem { margin-top: 24px; }
  .sayfa-giris__ic { width: calc(100% - 2 * var(--kenar)); margin-inline: auto; }
}
@media (max-width: 640px) {
  .giris { min-height: 0; padding-top: calc(var(--ust-h) + 56px); padding-bottom: 32px; }
  .giris__imza { width: 100vw; right: -30%; bottom: -8%; opacity: 0.07; }
  .urun-imzalari { margin-top: 56px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px 20px; }
  .urun-imzalari a { font-size: 0.9375rem; gap: 10px; }
  .vitrin__izgara { grid-template-columns: minmax(0,1fr); gap: 36px; }
  .urun-kart__govde { display: grid; grid-template-columns: 1fr auto; gap: 16px; }
  .urun-kart__ust, .urun-kart__cumle { grid-column: 1 / -1; }
  .urun-kart__ust { display: grid; grid-template-columns: 56px 1fr; align-items: center; column-gap: 16px; row-gap: 4px; }
  .urun-kart__ust .mini { grid-row: 1 / span 2; margin: 0; }
  .urun-kart__ust b, .urun-kart__tur { grid-column: 2; }
  .urun-kart .kapi__git { grid-column: 1 / -1; padding-top: 0; }
  .urun__metin { display: block; }
  .urun__metin .urun__tanim { margin-top: 18px; }
  .urun-kanit { max-width: 390px; }
  .urun-kanit--masamasa { max-width: 340px; }
  .urun__kimlik { align-items: flex-start; gap: 14px; }
  .urun__kimlik .uygulama { width: 56px; height: 56px; border-radius: 14px; }
}

.urun-kanit .ekran-kucuk { display: none; }
@media (max-width: 640px) {
  .urun-kanit .ekran-buyuk { display: none; }
  .urun-kanit .ekran-kucuk { display: block; }
}

/* Uzun Türkçe eylemler dar ekranlarda düğmenin içinde satıra geçebilir. */
.hap { max-width: 100%; min-height: 52px; height: auto; white-space: normal; padding-block: 12px; line-height: 1.25; text-align: center; }
.hap--kucuk { min-height: 40px; padding-block: 9px; }
.ozet-cozum__izgara > *, .calisma__izgara > *, .ilanlar__izgara > * { min-width: 0; }

/* Onaylanan hero: metnin çevresinde altı dik marka işareti. */
.giris {
  min-height: 860px;
  padding-block: calc(var(--ust-h) + 170px) 170px;
}
.giris__metin { width: min(720px, calc(100% - 320px)); padding-top: 0; }
.giris__odak { width: 100%; }
.giris__metin .d1 { max-width: none; font-size: clamp(2.5rem, 3.8vw, 3.5rem); line-height: 1.1; }
.giris__alt { max-width: 56ch; font-size: 1.125rem; line-height: 1.65; }
.giris__imza { opacity: 0.055; }
.logo-yorunge { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.yorunge-ogesi {
  position: absolute;
  width: 68px;
  height: 68px;
  left: 0;
  top: 0;
  pointer-events: auto;
}
.giris[data-yorunge-durum='oynuyor'] .yorunge-ogesi { will-change: transform; }
.yorunge-logo { position: relative; display: block; width: 100%; height: 100%; border-radius: 18px; }
.yorunge-logo::after { content: ''; position: absolute; top: 100%; left: -24px; right: -24px; height: 14px; }
.yorunge-ikon {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--yuzey);
  box-shadow: 0 12px 28px -12px rgb(0 0 0 / 0.65);
  transition: transform 350ms var(--ease);
}
.yorunge-ikon img { width: 62%; height: 62%; object-fit: contain; }
.yorunge-logo:focus-visible .yorunge-ikon { transform: scale(1.08); }
@media (hover: hover) and (pointer: fine) { .yorunge-logo:hover .yorunge-ikon { transform: scale(1.08); } }
.yorunge-logo--pass .yorunge-ikon { background: var(--pass-zemin); }
.yorunge-logo--margin .yorunge-ikon { background: var(--margin-kobalt); }
.yorunge-logo--inkstay .yorunge-ikon { background: var(--ink-zemin); }
.yorunge-logo--inkstay img { width: 42%; }
.yorunge-logo--masamasa .yorunge-ikon { background: var(--mm-bordo); }
.yorunge-logo--iyoka .yorunge-ikon { background: #173451; }
.yorunge-logo--iyoka img { width: 74%; height: 74%; }
.yorunge-logo--ecce .yorunge-ikon { background: #2E2D2A; }
.yorunge-logo--ecce img { width: 82%; height: 82%; }
.yorunge-etiket {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  translate: -50% 0;
  display: grid;
  gap: 2px;
  width: max-content;
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--yuzey);
  color: var(--porselen);
  text-align: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 180ms, transform 180ms, visibility 180ms;
}
.yorunge-etiket strong { font-size: 0.875rem; font-weight: 600; }
.yorunge-etiket small { font-size: 0.75rem; color: var(--m2); }
.etiket-ust .yorunge-etiket { top: auto; bottom: calc(100% + 12px); }
.etiket-ust .yorunge-logo::after { top: auto; bottom: 100%; }
.yorunge-logo:focus-visible .yorunge-etiket {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
@media (hover: hover) and (pointer: fine) {
  .yorunge-logo:hover .yorunge-etiket { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
}
.etiket-sol .yorunge-etiket { left: 0; translate: 0; }
.etiket-sag .yorunge-etiket { left: auto; right: 0; translate: 0; }
.yorunge-kontrol {
  position: absolute;
  right: max(var(--kenar), calc((100% - var(--kap)) / 2));
  bottom: 24px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 0.8125rem;
  color: var(--m2);
}
.yorunge-kontrol:hover { color: var(--porselen); }
.yorunge-kontrol[hidden] { display: none; }
.yorunge-oynat { display: none; }
.yorunge-kontrol[aria-pressed='true'] .yorunge-dur { display: none; }
.yorunge-kontrol[aria-pressed='true'] .yorunge-oynat { display: block; }
html:not(.js) .logo-yorunge { position: relative; display: grid; grid-template-columns: repeat(6,68px); justify-content: center; gap: 24px; margin-top: 64px; }
html:not(.js) .yorunge-ogesi { position: relative; }
html:not(.js) .giris__odak { height: auto; }
html:not(.js) .giris__metin .d1 { width: auto; }
@media (max-width: 1199px) {
  .giris { min-height: 0; padding-block: calc(var(--ust-h) + 20px) 92px; }
  .giris__metin { width: min(720px, calc(100% - 2 * var(--kenar))); }
  .giris__odak { display: grid; place-items: center; height: 560px; }
  .giris__metin .d1 { width: min(320px, calc((100vw - 100px) * 0.66)); font-size: clamp(1.5rem, 6.6vw, 2.75rem); line-height: 1.12; overflow-wrap: anywhere; }
  .giris__alt { margin-top: 20px; max-width: 48ch; }
  .yorunge-ogesi { width: 56px; height: 56px; }
  .yorunge-logo { border-radius: 15px; }
  html:not(.js) .logo-yorunge { grid-template-columns: repeat(3,56px); }
}
@media (max-width: 640px) {
  .giris__alt { font-size: 1rem; line-height: 1.65; }
  .yorunge-ogesi { width: 44px; height: 44px; }
  .yorunge-logo { border-radius: 13px; }
  .yorunge-kontrol { font-size: 0.75rem; bottom: 14px; }
  html:not(.js) .logo-yorunge { grid-template-columns: repeat(3,48px); }
}
@media (prefers-reduced-motion: reduce) {
  .yorunge-ikon, .yorunge-etiket { transition: none; }
}

/* Şirket anlatısı: iş çözümleri, müşteri projeleri ve sade ürün kataloğu. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.isler { padding: var(--bolum) 0 0; }
.isler .bolum-bas > .ok-bag, .vitrin .bolum-bas > .ok-bag { justify-self: end; }
.isler__izgara { margin-top: clamp(40px, 4.5vw, 64px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }
.is-ozeti { border-top: 1px solid var(--acik-cizgi); padding-top: 28px; }
.is-ozeti__kimlik { display: flex; align-items: center; gap: 16px; }
.is-ozeti h3 { font-size: clamp(1.75rem, 2.6vw, 2.25rem); font-weight: 650; letter-spacing: -0.03em; line-height: 1.1; }
.is-ozeti p { margin-top: 20px; color: var(--ink2); max-width: 38ch; font-size: 1.125rem; }
.is-ozeti .ok-bag { margin-top: 24px; }
.alan__ornek { margin-top: 18px; max-width: 52ch; font-size: 0.9375rem; line-height: 1.65; color: var(--ink2); }
.sayfa-cozumler .projeler { padding-top: 0; }
.proje[id] { scroll-margin-top: calc(var(--ust-h) + 24px); }
.katalog-giris { min-height: 0; padding-bottom: 88px; }
.urun-katalog { padding-block: clamp(64px, 7vw, 96px); }
.urun-katalog__izgara { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.urun-katalog__kimlik { display: flex; align-items: flex-start; gap: 20px; min-width: 0; }
.urun-katalog .urun__ad { font-size: clamp(1.875rem, 2.9vw, 2.75rem); line-height: 1.1; }
.urun-katalog .urun__tur { max-width: 28ch; font-size: 1rem; line-height: 1.5; }
.urun-katalog__bilgi > p { max-width: 49ch; font-size: 1.1875rem; line-height: 1.65; color: var(--urun-ikinci); text-wrap: pretty; }
.urun-katalog__bilgi .ok-bag { margin-top: 24px; }
.urun--masamasa .ok-bag { color: var(--mm-bordo); }
@media (max-width: 960px) {
  .isler .bolum-bas > .ok-bag, .vitrin .bolum-bas > .ok-bag { justify-self: start; }
  .urun-katalog__izgara { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 640px) {
  .isler__izgara { grid-template-columns: 1fr; gap: 36px; }
  .urun-katalog__kimlik { gap: 14px; }
  .urun-katalog .uygulama { width: 56px; height: 56px; border-radius: 14px; }
  .urun-katalog__bilgi > p { font-size: 1.0625rem; }
  .katalog-giris { padding-bottom: 64px; }
}