/* ========================================================================== Pergel — index3 (bagimsiz sayfa; pergel.css kullanmaz) Palet (27.09.2026 revizyonu): fildisi + komur + koyu orman yesili + yumusak altin; yumusak tonlar kartlarda. Tokenlar --k-* ; tema (varsayilan acik) ========================================================================== */ :root { --k-zemin: #F5F2EC; --k-zemin-2: #ECE6DC; --k-yazi: #1C1B19; --k-soluk: #67625A; --k-cizgi: rgba(28, 27, 25, .12); --k-cizgi-guclu: rgba(28, 27, 25, .75); --k-ana: #274F43; /* koyu orman yesili */ --k-ana-koyu: #1D3C33; --k-altin: #B8955A; /* yumusak altin */ --k-adacayi: #C9D5C3; --k-kum: #E7DAC6; --k-pudra: #ECD5CC; --k-sis: #D6DEE2; --k-komur: #1C1B19; --k-fildisi: #F5F2EC; --k-vurgu-yazi: #274F43; /* italik vurgu */ --k-golge: 0 22px 50px -26px rgba(28, 27, 25, .45); --k-golge-hafif: 0 10px 28px -14px rgba(28, 27, 25, .35); --k-f-govde: "Bricolage Grotesque", system-ui, sans-serif; --k-f-serif: "Instrument Serif", Georgia, serif; --k-f-etiket: "Archivo Narrow", "Arial Narrow", sans-serif; --k-kap: 1320px; --k-yan: clamp(18px, 4.5vw, 56px); --k-ease: cubic-bezier(.2, .8, .1, 1); color-scheme: light; } [data-theme="dark"] { --k-zemin: #131614; --k-zemin-2: #1B1F1C; --k-yazi: #ECE8E0; --k-soluk: #A29E95; --k-cizgi: rgba(236, 232, 224, .12); --k-cizgi-guclu: rgba(236, 232, 224, .7); --k-vurgu-yazi: #A9C8B8; --k-golge: 0 22px 50px -24px rgba(0, 0, 0, .7); --k-golge-hafif: 0 10px 28px -14px rgba(0, 0, 0, .6); color-scheme: dark; } /* ---------- temel ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--k-zemin); color: var(--k-yazi); font: 400 17px/1.6 var(--k-f-govde); overflow-x: hidden; transition: background-color .5s, color .5s; } img, svg { display: block; max-width: 100%; } a { color: inherit; } ::selection { background: var(--k-ana); color: var(--k-fildisi); } :focus-visible { outline: 2px solid var(--k-altin); outline-offset: 3px; } .k-kap { width: 100%; max-width: calc(var(--k-kap) + 2 * var(--k-yan)); margin: 0 auto; padding: 0 var(--k-yan); } .k-atla { position: absolute; left: 12px; top: -60px; z-index: 300; background: var(--k-ana); color: var(--k-fildisi); padding: 10px 16px; border-radius: 8px; font-weight: 600; text-decoration: none; } .k-atla:focus { top: 12px; } .k-etiket { font: 600 14px/1 var(--k-f-etiket); letter-spacing: .16em; text-transform: uppercase; color: var(--k-soluk); margin: 0 0 24px; } .k-baslik { font: 800 clamp(44px, 6.4vw, 104px)/.92 var(--k-f-govde); letter-spacing: -.045em; margin: 0; } .k-baslik em, .k-hero__baslik em { font: italic 400 1.08em/1 var(--k-f-serif); letter-spacing: -.01em; color: var(--k-vurgu-yazi); } /* ---------- butonlar (yumusak golge) ---------- */ .k-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; border-radius: 999px; font: 500 16px/1 var(--k-f-govde); text-decoration: none; border: 1.5px solid transparent; transition: background-color .3s, color .3s, border-color .3s, box-shadow .3s, transform .4s var(--k-ease); } .k-btn--ana { background: var(--k-ana); color: var(--k-fildisi); box-shadow: 0 10px 24px -12px rgba(39, 79, 67, .7); } .k-btn--ana:hover { background: var(--k-ana-koyu); box-shadow: 0 14px 30px -12px rgba(39, 79, 67, .8); } .k-btn--koyu { background: var(--k-yazi); color: var(--k-zemin); } .k-btn--koyu:hover { background: var(--k-ana); color: var(--k-fildisi); } .k-btn--cizgi { color: var(--k-yazi); border-color: var(--k-cizgi-guclu); } .k-btn--cizgi:hover { border-color: var(--k-ana); color: var(--k-vurgu-yazi); } .k-btn--acik { background: var(--k-fildisi); color: var(--k-komur); } .k-btn--acik:hover { background: var(--k-altin); color: var(--k-komur); } [data-theme="dark"] .k-btn--ana { box-shadow: none; } [data-magnetic] { will-change: transform; } /* ---------- ust bar ---------- */ .k-ust { position: fixed; inset: 0 0 auto; z-index: 200; transition: background-color .4s, transform .5s var(--k-ease), border-color .4s; border-bottom: 1px solid transparent; } .k-ust.is-dolu { background: color-mix(in srgb, var(--k-zemin) 90%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: var(--k-cizgi); } .k-ust.is-gizli { transform: translateY(-100%); } .k-ust__ic { display: flex; align-items: center; gap: 22px; height: 84px; } .k-logo { text-decoration: none; display: flex; align-items: baseline; gap: 2px; font-size: 30px; line-height: 1; } .k-logo b { font: 800 1em/1 var(--k-f-govde); letter-spacing: -.05em; } .k-logo i { font: italic 400 1.05em/1 var(--k-f-serif); color: var(--k-vurgu-yazi); } .k-menu { display: flex; gap: 4px; margin-left: auto; } .k-menu a { text-decoration: none; font: 500 16px/1 var(--k-f-govde); padding: 11px 16px; border-radius: 999px; transition: background-color .3s, color .3s; } .k-menu a:hover { background: var(--k-zemin-2); } .k-tema { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--k-cizgi-guclu); background: transparent; cursor: pointer; display: grid; place-items: center; padding: 0; } .k-tema span { width: 16px; height: 16px; border-radius: 50%; background: linear-gradient(90deg, var(--k-yazi) 50%, transparent 50%); border: 1.5px solid var(--k-yazi); transition: transform .6s var(--k-ease); } [data-theme="dark"] .k-tema span { transform: rotate(180deg); } .k-ust__cta { min-height: 46px; padding: 0 22px; font-size: 15px; } .k-hamburger { display: none; width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--k-cizgi-guclu); background: transparent; color: var(--k-yazi); cursor: pointer; place-items: center; align-content: center; gap: 5px; } .k-hamburger span { display: block; width: 18px; height: 1.8px; background: currentColor; transition: transform .35s var(--k-ease); } .k-hamburger[aria-expanded="true"] span:first-child { transform: translateY(3.4px) rotate(45deg); } .k-hamburger[aria-expanded="true"] span:last-child { transform: translateY(-3.4px) rotate(-45deg); } /* ---------- hero ---------- */ .k-hero { position: relative; min-height: 100svh; display: flex; align-items: center; padding: 120px 0 60px; overflow: hidden; } .k-hero__ic { position: relative; z-index: 2; pointer-events: none; } .k-hero__ic a, .k-hero__ic button { pointer-events: auto; } .k-hero__baslik { font: 800 clamp(52px, min(10.4vw, 15vh), 178px)/.9 var(--k-f-govde); /* alcak ekranda da sigsin */ letter-spacing: -.055em; margin: 0; } .k-satir { display: block; } .k-slot { height: calc(1.26em * 1.12); margin: -.14em 0; overflow: hidden; position: relative; } /* kelime 1.12em italik; kelimeler arasi bosluk harf uclari tasmasin diye */ .k-slot__iz { display: flex; flex-direction: column; transition: transform .9s var(--k-ease); } .k-slot__iz i { display: block; height: 1.26em; font: italic 400 1.12em/1.26 var(--k-f-serif); letter-spacing: -.02em; color: var(--k-vurgu-yazi); white-space: nowrap; padding-left: .04em; } .k-hero__alt { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 30px; margin-top: 44px; max-width: 980px; } .k-hero__alt p { max-width: 470px; margin: 0; font-size: 18px; color: var(--k-soluk); } .k-hero__btn { display: flex; gap: 12px; flex-wrap: wrap; } .k-ipucu { position: absolute; right: var(--k-yan); bottom: -30px; margin: 0; font: italic 400 22px/1 var(--k-f-serif); color: var(--k-soluk); } /* surukle-firlat etiketler (yumusak, kenarliksiz) */ .k-cikartmalar { position: absolute; inset: 0; z-index: 3; pointer-events: none; } .k-ck { position: absolute; left: 0; top: 0; pointer-events: auto; cursor: grab; user-select: none; touch-action: none; will-change: transform; font: 500 clamp(19px, 1.8vw, 27px)/1 var(--k-f-govde); padding: .6em 1.1em; border-radius: 999px; color: var(--k-komur); white-space: nowrap; box-shadow: var(--k-golge-hafif); transition: box-shadow .3s; } .k-ck.is-tutuluyor { cursor: grabbing; box-shadow: var(--k-golge); } .k-ck--adacayi { background: var(--k-adacayi); } .k-ck--ana { background: var(--k-ana); color: var(--k-fildisi); } .k-ck--pudra { background: var(--k-pudra); } .k-ck--kum { background: var(--k-kum); } .k-ck--koyu { background: var(--k-komur); color: var(--k-fildisi); } .k-ck--sis { background: var(--k-sis); } [data-theme="dark"] .k-ck--koyu { background: var(--k-fildisi); color: var(--k-komur); } .k-ck--yildiz, .k-ck--daire { padding: 0; background: none; box-shadow: none; border-radius: 50%; } .k-ck--yildiz svg { width: clamp(64px, 6vw, 96px); fill: var(--k-altin); filter: drop-shadow(0 8px 14px rgba(28, 27, 25, .2)); } .k-ck--daire svg { width: clamp(110px, 10vw, 150px); animation: k-don 18s linear infinite; } .k-ck--daire text { fill: var(--k-yazi); font: 600 15px var(--k-f-etiket); letter-spacing: .34em; } @keyframes k-don { to { transform: rotate(360deg); } } /* giris animasyonu */ .js .k-gir { opacity: 0; transform: translateY(50px); } .k-hazir .k-gir { opacity: 1; transform: none; transition: opacity .9s var(--k-ease), transform 1.1s var(--k-ease); } .k-hazir .k-hero__baslik .k-satir:nth-child(2) { transition-delay: .1s; } .k-hazir .k-hero__baslik .k-satir:nth-child(3) { transition-delay: .2s; } .k-hazir .k-hero__alt { transition-delay: .35s; } .js .k-ck { opacity: 0; } .k-hazir .k-ck { opacity: 1; transition: opacity .6s, box-shadow .3s; } /* ---------- capraz bantlar ---------- */ .k-bantlar { position: relative; height: clamp(170px, 18vw, 240px); overflow: hidden; margin: 10px 0 40px; } .k-bant { position: absolute; left: -5%; right: -5%; top: 50%; padding: 18px 0; } .k-bant--ana { background: var(--k-ana); color: var(--k-fildisi); transform: translateY(-70%) rotate(-3deg); z-index: 2; } .k-bant--koyu { background: var(--k-komur); color: var(--k-fildisi); transform: translateY(-20%) rotate(2.5deg); } .k-bant__iz { display: flex; align-items: center; gap: 28px; width: max-content; will-change: transform; } .k-bant span { font: 500 clamp(26px, 3vw, 42px)/1 var(--k-f-govde); letter-spacing: -.02em; white-space: nowrap; } .k-bant--koyu span:nth-of-type(odd) { font: italic 400 clamp(30px, 3.4vw, 48px)/1 var(--k-f-serif); color: var(--k-altin); } .k-bant b { font-size: 22px; color: var(--k-altin); } /* ---------- hizmetlerimiz: yana kayan ray ---------- */ .k-isler { position: relative; } .k-isler__sahne { position: sticky; top: 0; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding: 96px 0 28px; } .k-isler__bas { display: grid; grid-template-columns: auto 1fr auto; gap: 30px; align-items: end; margin-bottom: clamp(20px, 3.5vh, 38px); } .k-isler__bas p { margin: 0; color: var(--k-soluk); max-width: 380px; } .k-isler__bas .k-baslik { font-size: clamp(44px, min(6.4vw, 11vh), 104px); } .k-isler__sayac { font: 600 15px/1 var(--k-f-etiket); letter-spacing: .12em; color: var(--k-soluk); } .k-isler__sayac b { color: var(--k-yazi); font-size: 34px; letter-spacing: -.02em; font-family: var(--k-f-govde); font-weight: 600; } .k-isler__ray { display: flex; gap: 24px; padding: 0 var(--k-yan); padding-left: max(var(--k-yan), calc((100vw - var(--k-kap)) / 2)); width: max-content; will-change: transform; } .k-is { width: clamp(260px, min(27vw, 42vh), 410px); flex: none; } /* kart + metin alcak ekrana da sigsin */ .k-is__kapak { position: relative; aspect-ratio: 4 / 3.6; border-radius: 20px; overflow: hidden; isolation: isolate; transition: transform .6s var(--k-ease), box-shadow .6s var(--k-ease); } .k-is:hover .k-is__kapak { transform: translateY(-6px); box-shadow: var(--k-golge); } .k-is__bilgi { padding: 22px 4px 0; } .k-is__no { font: 600 13px/1 var(--k-f-etiket); letter-spacing: .14em; color: var(--k-altin); } .k-is__bilgi h3 { margin: 10px 0 8px; font: 600 25px/1.15 var(--k-f-govde); letter-spacing: -.025em; } .k-is__bilgi p { margin: 0; color: var(--k-soluk); font-size: 15.5px; line-height: 1.55; } .k-is__bilgi ul { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .k-is__bilgi li { font: 500 13px/1 var(--k-f-govde); padding: 8px 12px; border-radius: 999px; background: var(--k-zemin-2); } .k-is--son { align-self: center; display: grid; gap: 26px; justify-items: start; padding: 0 30px; width: clamp(260px, 26vw, 380px); } .k-is--son p { margin: 0; font: 800 clamp(34px, 3.4vw, 52px)/.98 var(--k-f-govde); letter-spacing: -.04em; } .k-is--son em { font: italic 400 1.1em/1 var(--k-f-serif); color: var(--k-vurgu-yazi); } /* kapaklar: her hizmet icin sade cizim */ .k-kp__cizim { position: absolute; inset: 8%; width: 84%; height: 84%; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: transform 1.1s var(--k-ease); } .k-is:hover .k-kp__cizim { transform: scale(1.04) rotate(-2deg); } /* 01 kimlik */ .k-kp--kimlik { background: var(--k-kum); } .k-kp--kimlik .c { stroke: rgba(28, 27, 25, .35); stroke-width: 1.5; } .k-kp--kimlik .harf { fill: var(--k-ana); stroke: none; font: italic 400 120px var(--k-f-serif); } .k-kp--kimlik .r1 { fill: var(--k-ana); } .k-kp--kimlik .r2 { fill: var(--k-altin); } .k-kp--kimlik .r3 { fill: var(--k-fildisi); } .k-kp--kimlik .r4 { fill: var(--k-komur); } /* 02 web */ .k-kp--web { background: var(--k-sis); } .k-kp__tarayici { position: absolute; left: 11%; right: 11%; top: 13%; bottom: 13%; background: #fff; border-radius: 12px; box-shadow: var(--k-golge-hafif); overflow: hidden; transition: transform .8s var(--k-ease); } .k-is:hover .k-kp__tarayici { transform: translateY(-8px); } .k-kp__tarayici .bar { height: 22px; background: #EEF1F3; display: flex; gap: 5px; align-items: center; padding: 0 10px; } .k-kp__tarayici .bar i { width: 7px; height: 7px; border-radius: 50%; background: #C8D0D5; } .k-kp__tarayici .govde { padding: 16px; display: grid; gap: 8px; } .k-kp__tarayici b { height: 16px; width: 70%; border-radius: 4px; background: var(--k-komur); } .k-kp__tarayici span { height: 8px; width: 90%; border-radius: 4px; background: #D9DFE3; } .k-kp__tarayici span.kisa { width: 60%; } .k-kp__tarayici em { height: 22px; width: 90px; border-radius: 999px; background: var(--k-ana); margin: 4px 0 6px; } .k-kp__tarayici .kartlar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .k-kp__tarayici .kartlar i { aspect-ratio: 1; border-radius: 6px; background: var(--k-adacayi); } .k-kp__tarayici .kartlar i:nth-child(2) { background: var(--k-kum); } .k-kp__tarayici .kartlar i:nth-child(3) { background: var(--k-pudra); } /* 03 sosyal */ .k-kp--sosyal { background: var(--k-pudra); } .k-kp__telefon { position: absolute; left: 50%; top: 10%; bottom: -8%; width: 46%; transform: translateX(-50%); background: #fff; border-radius: 22px; padding: 12px; box-shadow: var(--k-golge-hafif); transition: transform .8s var(--k-ease); } .k-is:hover .k-kp__telefon { transform: translateX(-50%) translateY(-8px); } .k-kp__telefon .ust { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; } .k-kp__telefon .ust i { width: 26px; height: 26px; border-radius: 50%; background: var(--k-ana); } .k-kp__telefon .ust b { height: 8px; width: 50%; border-radius: 4px; background: #E6E1DA; } .k-kp__telefon .izgara { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; } .k-kp__telefon .izgara i { aspect-ratio: 1; border-radius: 3px; background: var(--k-kum); } .k-kp__telefon .izgara i:nth-child(3n+2) { background: var(--k-adacayi); } .k-kp__telefon .izgara i:nth-child(4n) { background: var(--k-ana); } .k-kp__kalp { position: absolute; right: 9%; top: 22%; background: #fff; color: #C8574B; border-radius: 999px; padding: 8px 12px; font: 600 13px/1 var(--k-f-govde); box-shadow: var(--k-golge-hafif); } /* 04 foto */ .k-kp--foto { background: var(--k-ana); } .k-kp--foto .c { stroke: rgba(245, 242, 236, .75); stroke-width: 2; } .k-kp--foto .ince { stroke-width: 1.2; stroke: rgba(245, 242, 236, .4); } .k-kp--foto .k { stroke: var(--k-altin); stroke-width: 3; } .k-kp--foto .kayit { fill: #E0685A; stroke: none; animation: k-yanson 1.4s steps(2) infinite; } @keyframes k-yanson { 50% { opacity: .2; } } /* 05 reklam */ .k-kp--reklam { background: var(--k-adacayi); } .k-kp--reklam .k { stroke: rgba(28, 27, 25, .4); stroke-width: 2; } .k-kp--reklam .b1 { fill: rgba(39, 79, 67, .35); stroke: none; } .k-kp--reklam .b2 { fill: var(--k-ana); stroke: none; } .k-kp--reklam .cizgi { stroke: var(--k-komur); stroke-width: 3.5; } /* 06 e-ticaret */ .k-kp--eticaret { background: var(--k-zemin-2); } [data-theme="dark"] .k-kp--eticaret { background: #2A2E2B; } .k-kp__urun { position: absolute; left: 16%; top: 12%; width: 50%; background: #fff; border-radius: 14px; padding: 10px; display: grid; gap: 7px; box-shadow: var(--k-golge-hafif); z-index: 2; transition: transform .8s var(--k-ease); } .k-is:hover .k-kp__urun:not(.k-kp__urun--arka) { transform: translateY(-8px) rotate(-2deg); } .k-kp__urun i { aspect-ratio: 1 / .9; border-radius: 9px; background: linear-gradient(145deg, var(--k-kum), var(--k-pudra)); } .k-kp__urun b { height: 9px; width: 80%; border-radius: 4px; background: var(--k-komur); } .k-kp__urun span { height: 7px; width: 55%; border-radius: 4px; background: #DDD6CC; } .k-kp__urun em { font: 600 14px/1 var(--k-f-govde); font-style: normal; color: var(--k-komur); } .k-kp__urun u { text-decoration: none; text-align: center; font: 500 11px/1 var(--k-f-govde); color: var(--k-fildisi); background: var(--k-ana); border-radius: 999px; padding: 7px 0; } .k-kp__urun--arka { left: auto; right: 10%; top: 24%; width: 40%; z-index: 1; opacity: .9; transform: rotate(6deg); } /* 07 katalog */ .k-kp--katalog { background: var(--k-komur); } .k-kp__kitap { position: absolute; left: 14%; top: 14%; width: 46%; aspect-ratio: 3 / 4; background: var(--k-fildisi); border-radius: 4px 10px 10px 4px; padding: 16px 14px; box-shadow: -8px 0 0 var(--k-altin); transform: rotate(-6deg); transition: transform .8s var(--k-ease); } .k-is:hover .k-kp__kitap { transform: rotate(-10deg) translateY(-6px); } .k-kp__kitap b { font: 800 clamp(16px, 1.5vw, 22px)/.95 var(--k-f-govde); letter-spacing: -.04em; color: var(--k-ana); } .k-kp__kitap i { position: absolute; left: 14px; right: 14px; bottom: 16px; height: 40%; border-radius: 6px; background: var(--k-adacayi); } .k-kp__kutu2 { position: absolute; right: 10%; bottom: 12%; width: 36%; aspect-ratio: 1; background: var(--k-kum); border-radius: 8px; transform: rotate(8deg); display: grid; place-items: center; } .k-kp__kutu2 span { width: 44%; aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--k-ana); } /* ---------- yaklasim ---------- */ .k-studyo { padding: clamp(90px, 11vw, 160px) 0; background: var(--k-zemin-2); } .k-manifesto { font: 500 clamp(28px, 3.7vw, 56px)/1.2 var(--k-f-govde); letter-spacing: -.03em; margin: 0; max-width: 1180px; } .k-manifesto em { font: italic 400 1.08em/1 var(--k-f-serif); color: var(--k-vurgu-yazi); } .js .k-manifesto .k-k { opacity: .18; transition: opacity .35s; } .js .k-manifesto .k-k.is-yan { opacity: 1; } .k-adim { list-style: none; margin: clamp(70px, 9vw, 120px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; scroll-margin-top: 110px; } .k-adim li { padding: 24px 24px 28px; border-radius: 18px; background: var(--k-zemin); display: grid; gap: 10px; align-content: start; transition: transform .5s var(--k-ease), box-shadow .5s var(--k-ease); } .k-adim li:hover { transform: translateY(-5px); box-shadow: var(--k-golge); } .k-adim b { font: 600 14px/1 var(--k-f-etiket); letter-spacing: .14em; color: var(--k-altin); } .k-adim strong { font: 700 27px/1.05 var(--k-f-govde); letter-spacing: -.035em; } .k-adim span { color: var(--k-soluk); font-size: 16px; } .k-sektor { margin-top: clamp(60px, 7vw, 100px); } .k-sektor ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; } .k-sektor li { font: 500 17px/1 var(--k-f-govde); padding: 13px 20px; border: 1px solid var(--k-cizgi-guclu); border-radius: 999px; transition: background-color .3s, color .3s, border-color .3s; } .k-sektor li:hover { background: var(--k-ana); color: var(--k-fildisi); border-color: var(--k-ana); } /* ---------- iletisim ---------- */ .k-iletisim { background: var(--k-ana); color: var(--k-fildisi); padding: clamp(100px, 12vw, 170px) 0; } .k-iletisim .k-etiket { color: rgba(245, 242, 236, .7); } .k-iletisim__baslik { font: 800 clamp(60px, 11vw, 190px)/.88 var(--k-f-govde); letter-spacing: -.06em; margin: 0; } .k-iletisim__baslik em { font: italic 400 1.08em/1 var(--k-f-serif); color: var(--k-altin); letter-spacing: -.02em; } .k-iletisim__alt { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-top: 56px; flex-wrap: wrap; } .k-eposta { font: 500 clamp(26px, 3.8vw, 56px)/1.1 var(--k-f-govde); letter-spacing: -.03em; text-decoration: none; background: linear-gradient(var(--k-altin), var(--k-altin)) 0 100% / 0 2px no-repeat; transition: background-size .6s var(--k-ease), color .3s; padding-bottom: 6px; word-break: break-all; } .k-eposta:hover { background-size: 100% 2px; color: #E9D9B8; } /* ---------- alt bilgi: klasik ---------- */ .k-alt { background: var(--k-komur); color: #CFCAC0; font-size: 15px; } [data-theme="dark"] .k-alt { background: #0D0F0E; } .k-alt__ust { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 40px; padding: 72px 0 56px; } .k-logo--alt { color: var(--k-fildisi); } .k-logo--alt i { color: var(--k-altin); } .k-alt__marka p { margin: 18px 0 22px; max-width: 320px; line-height: 1.6; } .k-sosyal { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; } .k-sosyal a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(245, 242, 236, .22); display: grid; place-items: center; transition: background-color .3s, border-color .3s; } .k-sosyal a:hover { background: var(--k-ana); border-color: var(--k-ana); } .k-sosyal svg { width: 18px; height: 18px; fill: none; stroke: var(--k-fildisi); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .k-sosyal .d { fill: var(--k-fildisi); stroke: none; } .k-alt__sutun { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; } .k-alt__sutun h3 { margin: 6px 0 8px; font: 600 13px/1 var(--k-f-etiket); letter-spacing: .16em; text-transform: uppercase; color: var(--k-fildisi); } .k-alt__sutun a { text-decoration: none; transition: color .25s; } .k-alt__sutun a:hover, .k-alt__serit a:hover { color: var(--k-altin); } .k-alt__serit { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; padding: 22px 0 28px; border-top: 1px solid rgba(245, 242, 236, .14); font-size: 14px; color: #9D988F; } .k-alt__serit nav { display: flex; gap: 22px; margin-left: auto; } .k-alt__serit a { text-decoration: none; } /* ---------- kaydirinca gorunme ---------- */ .js .k-gorun { opacity: 0; transform: translateY(40px); transition: opacity .9s var(--k-ease), transform .9s var(--k-ease); } .js .k-gorun.is-in { opacity: 1; transform: none; } /* ---------- duyarli ---------- */ @media (max-width: 1100px) { .k-menu a { padding: 10px 11px; font-size: 15px; } .k-alt__ust { grid-template-columns: 1fr 1fr; } } @media (max-width: 900px) { .k-hamburger { display: grid; } .k-ust__cta { display: none; } .k-tema { margin-left: auto; } .k-menu { position: fixed; inset: 0; z-index: -1; flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px; padding: 100px var(--k-yan) 40px; margin: 0; background: var(--k-ana); clip-path: inset(0 0 100% 0); transition: clip-path .7s cubic-bezier(.7, 0, .2, 1); visibility: hidden; } .k-menu.is-acik { clip-path: inset(0 0 0 0); visibility: visible; } .k-menu a { font: 800 clamp(46px, 13vw, 80px)/1.05 var(--k-f-govde); letter-spacing: -.05em; color: var(--k-fildisi); padding: 4px 0; } .k-menu a:hover { background: none; color: var(--k-altin); } .k-ust:has(.k-menu.is-acik) .k-logo, .k-ust:has(.k-menu.is-acik) .k-logo i, .k-ust:has(.k-menu.is-acik) .k-tema, .k-ust:has(.k-menu.is-acik) .k-hamburger { color: var(--k-fildisi); border-color: rgba(245, 242, 236, .5); } .k-ust:has(.k-menu.is-acik) .k-tema span { border-color: var(--k-fildisi); background: linear-gradient(90deg, var(--k-fildisi) 50%, transparent 50%); } .k-isler { height: auto !important; } .k-isler__sahne { position: relative; min-height: 0; padding: 60px 0 20px; } .k-isler__bas { grid-template-columns: 1fr; gap: 14px; } .k-isler__sayac { display: none; } .k-isler__ray { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 20px; transform: none !important; -webkit-overflow-scrolling: touch; } .k-is { width: min(80vw, 360px); scroll-snap-align: start; } .k-adim { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { body { font-size: 16px; } .k-ust__ic { height: 70px; gap: 10px; } .k-logo { font-size: 26px; } .k-hero { padding-top: 100px; padding-bottom: 200px; align-items: flex-start; } /* altta etiket bandi */ .k-hero__baslik { font-size: clamp(46px, 13.2vw, 64px); } .k-hero__alt { margin-top: 30px; } .k-hero__alt p { font-size: 16px; } .k-hero__btn .k-btn { flex: 1 1 auto; } .k-ipucu { display: none; } .k-ck { font-size: 17px; } .k-ck--daire, .k-ck--yildiz { display: none; } /* dar ekranda kalabalik olmasin */ .k-adim { grid-template-columns: 1fr; } .k-alt__ust { grid-template-columns: 1fr; gap: 32px; padding-top: 56px; } .k-alt__serit nav { margin-left: 0; flex-wrap: wrap; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }