/* -------------------------------------------------------------------------- 0. Yazı tipleri — kendi sunucumuzda, Türkçe alt kümesine indirilmiş Google Fonts'tan çekmek FCP'yi ~850 ms geciktiriyordu: üçüncü taraf DNS/TLS + render'ı bloke eden CSS + 4 ayrı dosya (236 KB). Değişken eksenli fontları Latin-1 + Latin Ext-A aralığına indirip iki dosyaya düşürdük (88 KB) ve aynı kaynaktan sunuyoruz. -------------------------------------------------------------------------- */ @font-face { font-family: 'Inter var'; src: url('../webfonts/inter-tr.woff2') format('woff2-variations'), url('../webfonts/inter-tr.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0000-024F, U+2000-206F, U+20A0-20BF, U+2122, U+2190-2193, U+2212, U+2713, U+2717, U+25CF; } @font-face { font-family: 'Bricolage var'; src: url('../webfonts/bricolage-tr.woff2') format('woff2-variations'), url('../webfonts/bricolage-tr.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0000-024F, U+2000-206F, U+20A0-20BF, U+2122, U+2190-2193, U+2212, U+2713, U+2717, U+25CF; } /* ========================================================================== Ankara SEO Uzmanı — tasarım sistemi Tek dosya: token'lar, temel öğeler, düzen, bileşenler. Koyu tema ile açılır; seçim yapılmamışsa isletim sisteminin tercihi uygulanır. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Token'lar -------------------------------------------------------------------------- */ :root { /* Yüzeyler */ --renk-sayfa: #ffffff; --renk-kagit: #f4f7fc; --renk-kart: #ffffff; --renk-bant: #edf2fb; --renk-panel: #0a1b3d; --renk-panel-yazi: #e8eefb; /* Metin */ --renk-murekkep: #0a1b3d; --renk-soluk: #5b6b8c; /* Çizgi ve vurgu */ --renk-cizgi: #e1e8f5; --renk-cizgi-koyu: #cdd8ec; --renk-vurgu: #dce7fb; /* Eylem rengi */ --renk-cta: #1558d6; --renk-cta-ust: #1148b4; --renk-cta-derin: #0d3a92; --renk-derin: #071e55; /* İkincil vurgu — Ankara sarısı, ölçülü kullanılır */ --renk-altin: #d99420; --renk-altin-soft: #fdf3e0; /* Durum renkleri */ --renk-iyi: #17835a; --renk-iyi-soft: #e4f5ec; --renk-uyari: #b8760a; --renk-uyari-soft: #fdf2df; --renk-kotu: #c53434; --renk-kotu-soft: #fdeaea; /* Tipografi */ --yazi-govde: 'Inter var', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --yazi-baslik: 'Bricolage var', 'Inter var', ui-sans-serif, system-ui, sans-serif; --yazi-kod: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; /* Ölçü */ --kap: 1180px; --kap-dar: 760px; --bar-yuk: 64px; --yuvarlak: 14px; --yuvarlak-s: 10px; --yuvarlak-l: 22px; /* Gölge */ --golge-s: 0 1px 2px rgba(10, 27, 61, .06); --golge-m: 0 4px 16px -6px rgba(10, 27, 61, .14), 0 1px 3px rgba(10, 27, 61, .05); --golge-l: 0 18px 44px -18px rgba(10, 27, 61, .26), 0 2px 8px rgba(10, 27, 61, .06); /* Hareket */ --yay: linear(0, .006, .025 2.8%, .101 6.1%, .539 18.9%, .721 25.3%, .849 31.5%, .937 38.1%, .968 41.8%, .991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001); --gecis: 180ms cubic-bezier(.4, 0, .2, 1); color-scheme: light; } /* İşletim sistemi koyu tercihi — kullanıcı elle açık seçmediyse */ @media (prefers-color-scheme: dark) { :root:not([data-tema="acik"]) { --renk-sayfa: #0e1117; --renk-kagit: #0e1117; --renk-kart: #171b23; --renk-bant: #ffffff08; --renk-panel: #171b23; --renk-panel-yazi: #eef1f7; --renk-murekkep: #eef1f7; --renk-soluk: #9aa5bb; --renk-cizgi: #ffffff1f; --renk-cizgi-koyu: #ffffff33; --renk-vurgu: #5a8ff026; --renk-cta: #5c9bf7; --renk-cta-ust: #86b6fa; --renk-cta-derin: #4285ef; --renk-derin: #171b23; --renk-altin: #e8b45c; --renk-altin-soft: #e8b45c1f; --renk-iyi: #4ec89a; --renk-iyi-soft: #4ec89a1f; --renk-uyari: #e0a94a; --renk-uyari-soft: #e0a94a1f; --renk-kotu: #f07a7a; --renk-kotu-soft: #f07a7a1f; --golge-s: 0 1px 2px rgba(0, 0, 0, .4); --golge-m: 0 4px 16px -6px rgba(0, 0, 0, .55); --golge-l: 0 18px 44px -18px rgba(0, 0, 0, .7); color-scheme: dark; } } /* Elle seçilen koyu tema — her koşulda kazanır */ :root[data-tema="koyu"] { --renk-sayfa: #0e1117; --renk-kagit: #0e1117; --renk-kart: #171b23; --renk-bant: #ffffff08; --renk-panel: #171b23; --renk-panel-yazi: #eef1f7; --renk-murekkep: #eef1f7; --renk-soluk: #9aa5bb; --renk-cizgi: #ffffff1f; --renk-cizgi-koyu: #ffffff33; --renk-vurgu: #5a8ff026; --renk-cta: #5c9bf7; --renk-cta-ust: #86b6fa; --renk-cta-derin: #4285ef; --renk-derin: #171b23; --renk-altin: #e8b45c; --renk-altin-soft: #e8b45c1f; --renk-iyi: #4ec89a; --renk-iyi-soft: #4ec89a1f; --renk-uyari: #e0a94a; --renk-uyari-soft: #e0a94a1f; --renk-kotu: #f07a7a; --renk-kotu-soft: #f07a7a1f; --golge-s: 0 1px 2px rgba(0, 0, 0, .4); --golge-m: 0 4px 16px -6px rgba(0, 0, 0, .55); --golge-l: 0 18px 44px -18px rgba(0, 0, 0, .7); color-scheme: dark; } /* -------------------------------------------------------------------------- 2. Temel -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--bar-yuk) + 16px); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } body { margin: 0; background: var(--renk-sayfa); color: var(--renk-murekkep); font-family: var(--yazi-govde); font-size: 16px; line-height: 1.62; font-feature-settings: 'cv05' 1, 'ss03' 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-wrap: break-word; } body[data-menu-acik] { overflow: hidden; } h1, h2, h3, h4, h5, h6 { font-family: var(--yazi-baslik); font-weight: 600; line-height: 1.14; letter-spacing: -.02em; margin: 0 0 .6em; text-wrap: balance; color: var(--renk-murekkep); } h1 { font-size: clamp(32px, 5vw, 52px); } h2 { font-size: clamp(26px, 3.6vw, 38px); } h3 { font-size: clamp(20px, 2.4vw, 26px); } h4 { font-size: 19px; } h5 { font-size: 17px; } h6 { font-size: 15px; } p { margin: 0 0 1.1em; text-wrap: pretty; } p:last-child { margin-bottom: 0; } a { color: var(--renk-cta); text-decoration: none; transition: color var(--gecis); } /* Düz metin içindeki bağlantılar yalnızca renkle ayrılmamalı (WCAG 1.4.1). Kapsam bilinçli olarak dar: yalnızca cümle içine gömülü bağlantılar. Gezinme, alt bilgi ve kart bağlantıları buraya girmez — onların kendi görsel sınırı (konum, arka plan, çerçeve) zaten var. Not: seçiciye genel bir `li` koymak menüyü de altı çizili yapıyordu. */ :where(p, dd, blockquote, figcaption, .bolum-lead, .sonuc, .uyari-kutu, .alan-ipucu, .yazi li, .onay label, .alt-seffaf) a:not(.btn):not(.ok-link):not(.rozet):not(.marka) { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; } a:hover { color: var(--renk-cta-ust); } :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--renk-cta); outline-offset: 2px; border-radius: 4px; } img, svg, video, canvas { max-width: 100%; height: auto; display: block; } /* Ölçüsü belirtilmemiş satır içi simgeler metin boyuna uyar. Bu kural temel katmanda durur; bileşenlerin kendi ölçüleri sonra geldiği için onları ezmez. */ svg:not([width]) { width: 1em; height: 1em; flex: none; } hr { border: 0; border-top: 1px solid var(--renk-cizgi); margin: 40px 0; } code, kbd, pre, samp { font-family: var(--yazi-kod); font-size: .92em; } code { background: var(--renk-bant); border: 1px solid var(--renk-cizgi); border-radius: 5px; padding: .12em .38em; } pre { background: var(--renk-bant); border: 1px solid var(--renk-cizgi); border-radius: var(--yuvarlak-s); padding: 16px; overflow-x: auto; line-height: 1.55; margin: 0 0 1.1em; } pre code { background: none; border: 0; padding: 0; } ::selection { background: var(--renk-cta); color: #fff; } .gorunmez { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .atla { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--renk-cta); color: #fff; padding: 10px 18px; border-radius: 0 0 10px 10px; transition: top var(--gecis); } .atla:focus { top: 0; color: #fff; } /* -------------------------------------------------------------------------- 3. Düzen -------------------------------------------------------------------------- */ .kap { width: min(100% - 40px, var(--kap)); margin-inline: auto; } .kap--dar { max-width: var(--kap-dar); } @media (max-width: 600px) { .kap { width: min(100% - 32px, var(--kap)); } } .bolum { padding: clamp(56px, 8vw, 104px) 0; } .bolum--sik { padding: clamp(40px, 5vw, 64px) 0; } .bolum--kagit { background: var(--renk-kagit); } .bolum--bant { background: var(--renk-bant); } .bolum--panel { background: var(--renk-panel); color: var(--renk-panel-yazi); } .bolum--panel h1, .bolum--panel h2, .bolum--panel h3, .bolum--panel h4 { color: inherit; } .bolum--cizgi-ust { border-top: 1px solid var(--renk-cizgi); } /* Bölüm başlığı bloğu */ .bolum-bas { max-width: 760px; margin-bottom: clamp(32px, 4vw, 52px); } .bolum-bas--orta { margin-inline: auto; text-align: center; } .bolum-bas h2, .bolum-bas .bolum-h2 { margin-bottom: 14px; } .bolum-lead { font-size: clamp(16px, 1.6vw, 18px); color: var(--renk-soluk); line-height: 1.65; margin: 0; } /* Üst etiket (kicker) */ .kicker { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--renk-cta); background: var(--renk-vurgu); border-radius: 999px; padding: 5px 13px; margin-bottom: 18px; } .kicker svg { width: 14px; height: 14px; flex: none; } /* Izgara */ .izgara { display: grid; gap: 20px; } .izgara--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .izgara--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .izgara--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .izgara--yan { grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 64px); align-items: center; } @media (max-width: 960px) { .izgara--3, .izgara--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .izgara--yan { grid-template-columns: 1fr; } } @media (max-width: 640px) { .izgara--2, .izgara--3, .izgara--4 { grid-template-columns: 1fr; } } /* -------------------------------------------------------------------------- 4. Düğmeler -------------------------------------------------------------------------- */ .btn { --btn-yuk: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: var(--btn-yuk); padding: 0 22px; border: 1px solid transparent; border-radius: 999px; font: inherit; font-size: 15px; font-weight: 600; letter-spacing: -.005em; line-height: 1; cursor: pointer; text-align: center; white-space: nowrap; transition: background var(--gecis), border-color var(--gecis), color var(--gecis), transform var(--gecis), box-shadow var(--gecis); } .btn:active { transform: translateY(1px); } .btn svg { width: 17px; height: 17px; flex: none; } .btn--dolu { background: var(--renk-cta); color: #fff; box-shadow: var(--golge-m); } .btn--dolu:hover { background: var(--renk-cta-ust); color: #fff; } .btn--hat { background: var(--renk-kart); border-color: var(--renk-cizgi-koyu); color: var(--renk-murekkep); } .btn--hat:hover { border-color: var(--renk-cta); color: var(--renk-cta); } .btn--cam { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .34); color: var(--renk-murekkep); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .btn--cam:hover { background: rgba(255, 255, 255, .28); color: var(--renk-murekkep); } .btn--sade { background: transparent; color: var(--renk-cta); padding: 0 6px; } .btn--sade:hover { color: var(--renk-cta-ust); } .btn--kucuk { --btn-yuk: 38px; font-size: 14px; padding: 0 16px; } .btn--buyuk { --btn-yuk: 54px; font-size: 16px; padding: 0 30px; } .btn--tam { width: 100%; } .btn[disabled], .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; } .btn-satir { display: flex; flex-wrap: wrap; gap: 12px; } .btn-satir--orta { justify-content: center; } /* Bağlantı oku */ .ok-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 15px; } .ok-link svg { width: 15px; height: 15px; transition: transform var(--gecis); } .ok-link:hover svg { transform: translateX(3px); } /* -------------------------------------------------------------------------- 5. Kartlar ve rozetler -------------------------------------------------------------------------- */ .kart { background: var(--renk-kart); border: 1px solid var(--renk-cizgi); border-radius: var(--yuvarlak); padding: clamp(20px, 2.4vw, 28px); transition: border-color var(--gecis), box-shadow var(--gecis), transform var(--gecis); } .kart h3, .kart h4 { margin-bottom: 10px; } .kart p { color: var(--renk-soluk); font-size: 15.5px; } .kart p:last-child { margin-bottom: 0; } a.kart, .kart--tikla { display: block; color: inherit; } a.kart:hover, .kart--tikla:hover { border-color: var(--renk-cta); box-shadow: var(--golge-m); transform: translateY(-2px); color: inherit; } .kart-ikon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--renk-vurgu); color: var(--renk-cta); margin-bottom: 16px; } .kart-ikon svg { width: 22px; height: 22px; } .kart-no { font-family: var(--yazi-baslik); font-size: 13px; font-weight: 600; letter-spacing: .1em; color: var(--renk-cta); display: block; margin-bottom: 12px; } .rozet { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; line-height: 1; padding: 5px 10px; border-radius: 999px; background: var(--renk-bant); border: 1px solid var(--renk-cizgi); color: var(--renk-soluk); white-space: nowrap; align-self: flex-start; /* dikey flex kaplarda genişliğe yayılmasın */ } .rozet--iyi { background: var(--renk-iyi-soft); color: var(--renk-iyi); border-color: transparent; } .rozet--uyari { background: var(--renk-uyari-soft); color: var(--renk-uyari); border-color: transparent; } .rozet--kotu { background: var(--renk-kotu-soft); color: var(--renk-kotu); border-color: transparent; } .rozet--cta { background: var(--renk-vurgu); color: var(--renk-cta); border-color: transparent; } .rozet--altin { background: var(--renk-altin-soft); color: var(--renk-altin); border-color: transparent; } .cip-liste { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } /* -------------------------------------------------------------------------- 6. Üst çubuk -------------------------------------------------------------------------- */ .ust { position: fixed; inset: 0 0 auto; z-index: 100; height: var(--bar-yuk); display: flex; align-items: center; background: color-mix(in srgb, var(--renk-sayfa) 82%, transparent); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); border-bottom: 1px solid transparent; transition: border-color var(--gecis), background var(--gecis); } .ust[data-kaydi] { border-bottom-color: var(--renk-cizgi); } .ust-ic { width: min(100% - 40px, var(--kap)); margin-inline: auto; display: flex; align-items: center; gap: 10px; } .marka { display: inline-flex; align-items: center; gap: 9px; font-family: var(--yazi-baslik); font-weight: 600; font-size: 17px; letter-spacing: -.02em; color: var(--renk-murekkep); margin-right: auto; } .marka:hover { color: var(--renk-murekkep); } .marka svg { width: 26px; height: 26px; flex: none; } .marka span { white-space: nowrap; } .marka b { font-weight: 600; color: var(--renk-cta); } .ana-menu { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; } .ana-menu > li { position: relative; } .menu-bag { display: inline-flex; align-items: center; gap: 5px; height: 36px; padding: 0 12px; border-radius: 9px; font-size: 14.5px; font-weight: 500; color: var(--renk-murekkep); background: none; border: 0; font-family: inherit; cursor: pointer; transition: background var(--gecis), color var(--gecis); } .menu-bag:hover { background: var(--renk-bant); color: var(--renk-murekkep); } .menu-bag[aria-current="page"] { color: var(--renk-cta); } .menu-bag svg { width: 12px; height: 12px; opacity: .55; transition: transform var(--gecis); } .menu-bag[aria-expanded="true"] svg { transform: rotate(180deg); } .acilir { position: absolute; top: calc(100% + 8px); left: 0; min-width: 292px; background: var(--renk-kart); border: 1px solid var(--renk-cizgi); border-radius: var(--yuvarlak); box-shadow: var(--golge-l); padding: 7px; list-style: none; margin: 0; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--gecis), transform var(--gecis), visibility var(--gecis); } .ana-menu li:hover > .acilir, .acilir:focus-within, .menu-bag[aria-expanded="true"] + .acilir { opacity: 1; visibility: visible; transform: translateY(0); } .acilir a { display: block; padding: 9px 12px; border-radius: var(--yuvarlak-s); color: var(--renk-murekkep); transition: background var(--gecis); } .acilir a:hover { background: var(--renk-bant); color: var(--renk-murekkep); } .acilir b { display: block; font-size: 14.5px; font-weight: 600; } .acilir small { display: block; font-size: 12.8px; color: var(--renk-soluk); line-height: 1.45; margin-top: 1px; } .ust-eylem { display: flex; align-items: center; gap: 8px; margin-left: 8px; } .tema-dugme { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--renk-cizgi); background: var(--renk-kart); color: var(--renk-soluk); cursor: pointer; transition: border-color var(--gecis), color var(--gecis); } .tema-dugme:hover { border-color: var(--renk-cta); color: var(--renk-cta); } .tema-dugme svg { width: 17px; height: 17px; } .tema-dugme .ay { display: none; } :root[data-tema="koyu"] .tema-dugme .ay { display: block; } :root[data-tema="koyu"] .tema-dugme .gunes { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-tema="acik"]) .tema-dugme .ay { display: block; } :root:not([data-tema="acik"]) .tema-dugme .gunes { display: none; } } .menu-dugme { display: none; place-items: center; width: 38px; height: 38px; border-radius: 9px; border: 1px solid var(--renk-cizgi); background: var(--renk-kart); color: var(--renk-murekkep); cursor: pointer; } .menu-dugme svg { width: 19px; height: 19px; } .menu-dugme .kapat { display: none; } body[data-menu-acik] .menu-dugme .kapat { display: block; } body[data-menu-acik] .menu-dugme .ac { display: none; } @media (max-width: 1080px) { .ana-menu, .ust-eylem .btn { display: none; } .menu-dugme { display: grid; } } @media (max-width: 600px) { .ust-ic { width: min(100% - 32px, var(--kap)); } .marka span { font-size: 15.5px; } } /* Mobil menü */ .mobil-menu { position: fixed; inset: var(--bar-yuk) 0 0; z-index: 99; background: var(--renk-sayfa); overflow-y: auto; padding: 20px 0 48px; transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity var(--gecis), transform var(--gecis), visibility var(--gecis); } body[data-menu-acik] .mobil-menu { opacity: 1; visibility: visible; transform: none; } .mobil-menu ul { list-style: none; margin: 0; padding: 0; } .mobil-menu > .kap > ul > li { border-bottom: 1px solid var(--renk-cizgi); } .mobil-menu a { display: block; padding: 13px 2px; font-size: 16.5px; font-weight: 500; color: var(--renk-murekkep); } .mobil-menu .alt-liste a { padding: 9px 2px 9px 16px; font-size: 15px; color: var(--renk-soluk); font-weight: 400; } .mobil-menu .btn-satir { margin-top: 24px; } .mobil-menu .btn { flex: 1 1 180px; } /* -------------------------------------------------------------------------- 7. Kahraman (hero) -------------------------------------------------------------------------- */ .hero { position: relative; display: flex; width: 100%; min-height: 100svh; padding: 10px; padding-top: calc(var(--bar-yuk) + 10px); background: var(--renk-kagit); } .hero-kabuk { position: relative; display: flex; flex: 1; flex-direction: column; align-items: center; min-height: calc(100svh - var(--bar-yuk) - 20px); overflow: hidden; border-radius: var(--yuvarlak-l); transform-origin: 50% 0; will-change: transform; } /* Zemin degradesi hem WebGL yokken yedek, hem canvas yüklenirken ilk kare. */ .hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; background: radial-gradient(125% 95% at 10% 6%, #ffffff 0%, #eaf1fd 32%, #c3d9f8 56%, #4d86e0 82%, #0d3a92 100%); } .hero-bg canvas { position: absolute; inset: 0; width: 100%; height: 100%; } @media (prefers-color-scheme: dark) { :root:not([data-tema="acik"]) .hero-bg { background: radial-gradient(125% 95% at 10% 6%, #0f131b 0%, #172c4f 40%, #1d4176 68%, #3d7fd0 100%); } } :root[data-tema="koyu"] .hero-bg { background: radial-gradient(125% 95% at 10% 6%, #0f131b 0%, #172c4f 40%, #1d4176 68%, #3d7fd0 100%); } .hero-ic { position: relative; z-index: 5; margin: auto; display: flex; flex-direction: column; align-items: center; width: 90%; max-width: 840px; padding: 76px 0 62px; text-align: center; } .hero-kicker { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 26px; padding: 6px 16px; border-radius: 999px; font-size: 12.5px; font-weight: 500; letter-spacing: .1px; color: var(--renk-murekkep); background: rgba(255, 255, 255, .28); border: 1px solid rgba(255, 255, 255, .4); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .hero-kicker svg { width: 15px; height: 15px; flex: none; } .hero h1 { margin: 0; font-size: clamp(30px, 5vw, 60px); font-weight: 600; line-height: 1.05; letter-spacing: -.03em; color: var(--renk-murekkep); } /* Slogan h1 değil ama görsel ağırlığını koruyor: h1 sayfanın ne olduğunu söyler, slogan neden önemli olduğunu. */ .hero-slogan { margin: 10px 0 0; font-family: var(--yazi-baslik); font-size: clamp(22px, 3.4vw, 40px); font-weight: 400; line-height: 1.12; letter-spacing: -.022em; color: color-mix(in srgb, var(--renk-murekkep) 72%, transparent); text-wrap: balance; } .hero-lead { max-width: 660px; margin: 26px auto 0; font-size: 17px; font-weight: 450; line-height: 1.55; color: color-mix(in srgb, var(--renk-murekkep) 78%, transparent); } /* SEO / GEO seçici */ .hero-secici { position: relative; display: flex; align-items: center; gap: 4px; margin-top: clamp(40px, 7vh, 80px); padding: 4px; border-radius: 15px; border: 1px solid rgba(255, 255, 255, .3); background: rgba(10, 27, 61, .13); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 6px 20px -6px rgba(10, 27, 61, .2); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .hero-secenek { position: relative; z-index: 2; display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 11px; font-size: 14px; font-weight: 500; color: color-mix(in srgb, var(--renk-murekkep) 72%, transparent); cursor: pointer; user-select: none; transition: color var(--gecis); } .hero-secenek svg { width: 15px; height: 15px; } .hero-secenek[aria-selected="true"] { color: var(--renk-murekkep); } .hero-izleyici { position: absolute; top: 4px; left: 0; height: 36px; border-radius: 11px; background: rgba(255, 255, 255, .8); box-shadow: 0 1px 3px rgba(10, 27, 61, .16); transition: transform 420ms var(--yay), width 420ms var(--yay); z-index: 1; } :root[data-tema="koyu"] .hero-izleyici { background: rgba(255, 255, 255, .18); } /* Analiz formu */ .hero-form { display: flex; align-items: center; gap: 6px; width: min(100%, 520px); margin-top: 18px; padding: 6px 6px 6px 8px; border-radius: 999px; background: rgba(255, 255, 255, .82); border: 1px solid rgba(255, 255, 255, .6); box-shadow: var(--golge-l); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } :root[data-tema="koyu"] .hero-form { background: rgba(23, 27, 35, .78); border-color: rgba(255, 255, 255, .16); } .hero-form .onek { font-size: 14.5px; color: var(--renk-soluk); padding-left: 8px; user-select: none; } .hero-form input { flex: 1; min-width: 0; height: 42px; border: 0; background: none; font: inherit; font-size: 15px; color: var(--renk-murekkep); outline: none; } .hero-form input::placeholder { color: var(--renk-soluk); } .hero-form button { flex: none; } .hero-not { margin-top: 14px; font-size: 13.5px; color: color-mix(in srgb, var(--renk-murekkep) 66%, transparent); } .hero-not a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } /* Hero istatistikleri */ .hero-sayac { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(20px, 5vw, 56px); margin-top: clamp(40px, 6vh, 66px); } .hero-sayac div { text-align: center; } .hero-sayac b { display: block; font-family: var(--yazi-baslik); font-size: clamp(24px, 3vw, 32px); font-weight: 600; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .hero-sayac span { display: block; margin-top: 6px; font-size: 13px; color: color-mix(in srgb, var(--renk-murekkep) 68%, transparent); } @media (max-width: 760px) { .hero { padding: 0; padding-top: var(--bar-yuk); } .hero-kabuk { border-radius: 0; min-height: calc(100svh - var(--bar-yuk)); } .hero-ic { width: 100%; padding: 52px 24px 72px; } .hero-lead { font-size: 15px; margin-top: 18px; } .hero-slogan { margin-top: 8px; } .hero-form { flex-wrap: nowrap; } .hero-form .onek { display: none; } } /* -------------------------------------------------------------------------- 8. İstatistik şeridi -------------------------------------------------------------------------- */ .seritler { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 1px; background: var(--renk-cizgi); border: 1px solid var(--renk-cizgi); border-radius: var(--yuvarlak); overflow: hidden; } .serit { background: var(--renk-kart); padding: 22px 20px; } .serit b { display: block; font-family: var(--yazi-baslik); font-size: 30px; font-weight: 600; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--renk-cta); } .serit span { display: block; margin-top: 7px; font-size: 13.5px; color: var(--renk-soluk); } /* Canlı veri kartı */ .canli { display: flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 600; color: var(--renk-iyi); } .canli i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: nabiz 2s ease-in-out infinite; } @keyframes nabiz { 0%, 100% { opacity: 1; } 50% { opacity: .25; } } /* -------------------------------------------------------------------------- 9. Akordiyon (SSS) -------------------------------------------------------------------------- */ .sss-liste { display: grid; gap: 10px; } .sss-kart { border: 1px solid var(--renk-cizgi); border-radius: var(--yuvarlak); background: var(--renk-kart); overflow: hidden; transition: border-color var(--gecis); } .sss-kart:hover { border-color: var(--renk-cizgi-koyu); } .sss-kart[open] { border-color: var(--renk-cta); } .sss-kart summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 22px; cursor: pointer; list-style: none; font-family: var(--yazi-baslik); font-size: 17px; font-weight: 600; letter-spacing: -.015em; color: var(--renk-murekkep); } .sss-kart summary::-webkit-details-marker { display: none; } .sss-arti { position: relative; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--renk-bant); transition: background var(--gecis), transform var(--gecis); } .sss-arti::before, .sss-arti::after { content: ''; position: absolute; inset: 50% 5px auto; height: 1.6px; background: var(--renk-cta); transform: translateY(-50%); transition: transform var(--gecis), opacity var(--gecis); } .sss-arti::after { transform: translateY(-50%) rotate(90deg); } .sss-kart[open] .sss-arti { background: var(--renk-vurgu); } .sss-kart[open] .sss-arti::after { transform: translateY(-50%) rotate(0); opacity: 0; } .sss-govde { padding: 0 22px 20px; } .sss-govde p { color: var(--renk-soluk); font-size: 15.5px; } .sss-govde p:last-child { margin-bottom: 0; } /* -------------------------------------------------------------------------- 10. Tablo -------------------------------------------------------------------------- */ .tbl-sar { overflow-x: auto; border: 1px solid var(--renk-cizgi); border-radius: var(--yuvarlak); background: var(--renk-kart); -webkit-overflow-scrolling: touch; } .tbl { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 14.5px; } .tbl th, .tbl td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--renk-cizgi); vertical-align: top; } .tbl thead th { position: sticky; top: 0; background: var(--renk-bant); font-family: var(--yazi-baslik); font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; z-index: 1; } .tbl tbody tr:last-child td { border-bottom: 0; } .tbl tbody tr:hover { background: var(--renk-bant); } .tbl td:first-child { font-weight: 500; } .tbl .evet { color: var(--renk-iyi); font-weight: 600; } .tbl .hayir { color: var(--renk-soluk); opacity: .6; } .tbl-grup td { background: var(--renk-bant); font-family: var(--yazi-baslik); font-weight: 600; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; color: var(--renk-soluk); } /* -------------------------------------------------------------------------- 11. Form öğeleri -------------------------------------------------------------------------- */ .alan { display: block; margin-bottom: 18px; } .alan > label, .alan-etiket { display: block; font-size: 14px; font-weight: 600; margin-bottom: 7px; color: var(--renk-murekkep); } .alan-ipucu { display: block; font-size: 13px; font-weight: 400; color: var(--renk-soluk); margin-top: 5px; line-height: 1.5; } .girdi, input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="search"], input[type="password"], select, textarea { width: 100%; min-height: 46px; padding: 11px 14px; border: 1px solid var(--renk-cizgi-koyu); border-radius: var(--yuvarlak-s); background: var(--renk-sayfa); color: var(--renk-murekkep); font: inherit; font-size: 15px; transition: border-color var(--gecis), box-shadow var(--gecis); } textarea { min-height: 120px; resize: vertical; line-height: 1.6; } .girdi:focus, input:focus, select:focus, textarea:focus { outline: none; border-color: var(--renk-cta); box-shadow: 0 0 0 3px color-mix(in srgb, var(--renk-cta) 16%, transparent); } .girdi::placeholder, input::placeholder, textarea::placeholder { color: var(--renk-soluk); opacity: .75; } select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6b8c' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 15px; padding-right: 38px; } :root[data-tema="koyu"] select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa5bb' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); } .onay { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; } .onay input[type="checkbox"], .onay input[type="radio"] { width: 17px; height: 17px; min-height: 0; margin: 3px 0 0; accent-color: var(--renk-cta); flex: none; } .onay label { font-size: 14.5px; color: var(--renk-soluk); line-height: 1.55; } .ikili { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; } @media (max-width: 560px) { .ikili { grid-template-columns: 1fr; } } /* Geri bildirim kutuları */ .uyari-kutu { padding: 14px 18px; border-radius: var(--yuvarlak-s); font-size: 14.5px; line-height: 1.55; border: 1px solid transparent; margin-bottom: 18px; } .uyari-kutu--iyi { background: var(--renk-iyi-soft); color: var(--renk-iyi); } .uyari-kutu--uyari { background: var(--renk-uyari-soft); color: var(--renk-uyari); } .uyari-kutu--kotu { background: var(--renk-kotu-soft); color: var(--renk-kotu); } .uyari-kutu--bilgi { background: var(--renk-vurgu); color: var(--renk-cta); } .uyari-kutu p:last-child { margin-bottom: 0; } /* -------------------------------------------------------------------------- 12. Yazı (blog / hukuki metin) tipografisi -------------------------------------------------------------------------- */ .yazi { max-width: 720px; } .yazi h2 { margin-top: 2em; font-size: clamp(23px, 2.8vw, 30px); } .yazi h3 { margin-top: 1.7em; font-size: clamp(19px, 2.2vw, 23px); } .yazi h2:first-child, .yazi h3:first-child { margin-top: 0; } .yazi p, .yazi li { font-size: 17px; line-height: 1.72; } .yazi ul, .yazi ol { margin: 0 0 1.2em; padding-left: 1.35em; } .yazi li { margin-bottom: .5em; } .yazi li::marker { color: var(--renk-cta); } .yazi a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .yazi blockquote { margin: 1.6em 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--renk-cta); font-size: 18px; color: var(--renk-soluk); } .yazi img { border-radius: var(--yuvarlak); margin: 1.6em 0; } .yazi table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: 15px; } .yazi th, .yazi td { padding: 10px 14px; border: 1px solid var(--renk-cizgi); text-align: left; } .yazi th { background: var(--renk-bant); font-weight: 600; } /* Sayfa başlığı bloğu */ .sayfa-bas { padding: calc(var(--bar-yuk) + clamp(48px, 7vw, 84px)) 0 clamp(36px, 5vw, 56px); background: var(--renk-kagit); border-bottom: 1px solid var(--renk-cizgi); } .sayfa-bas h1 { margin-bottom: 16px; } .sayfa-bas .bolum-lead { max-width: 700px; } /* Kırıntı yolu */ .kirinti { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; list-style: none; margin: 0 0 20px; padding: 0; font-size: 13.5px; color: var(--renk-soluk); } .kirinti a { color: var(--renk-soluk); } .kirinti a:hover { color: var(--renk-cta); } .kirinti li + li::before { content: '/'; margin-right: 7px; opacity: .5; } /* İçindekiler */ .icindekiler { background: var(--renk-bant); border: 1px solid var(--renk-cizgi); border-radius: var(--yuvarlak); padding: 20px 24px; margin-bottom: 36px; } .icindekiler b { display: block; font-family: var(--yazi-baslik); font-size: 14px; margin-bottom: 10px; } .icindekiler ol { margin: 0; padding-left: 1.2em; } .icindekiler li { font-size: 14.5px; margin-bottom: 4px; } /* -------------------------------------------------------------------------- 13. Alt bilgi -------------------------------------------------------------------------- */ .alt { background: var(--renk-panel); color: var(--renk-panel-yazi); padding: clamp(40px, 4.5vw, 56px) 0 0; } .alt a { color: color-mix(in srgb, var(--renk-panel-yazi) 76%, transparent); } /* Koyu zeminde marka mavisi okunmuyor; açık bir tona alınır. */ .alt .marka, .cta-serit .marka { color: var(--renk-panel-yazi); } .alt .marka b, .cta-serit b { color: #8fb9f7; } .alt a:hover { color: #fff; } :root[data-tema="koyu"] .alt a:hover { color: var(--renk-cta-ust); } .alt-guven { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; padding: 20px 24px; border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--yuvarlak); background: rgba(255, 255, 255, .04); margin-bottom: 48px; } .alt-guven p { font-size: 14px; line-height: 1.6; margin: 0; flex: 1 1 380px; opacity: .84; } .alt-guven .rozet-satir { display: flex; gap: 8px; flex-wrap: wrap; } .alt-guven .rozet { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .16); color: inherit; } .alt-izgara { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 36px; padding-bottom: 36px; } @media (max-width: 900px) { .alt-izgara { grid-template-columns: 1fr 1fr; gap: 32px; } } @media (max-width: 560px) { .alt-izgara { grid-template-columns: 1fr; gap: 28px; } } .alt-izgara h3 { font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--renk-panel-yazi) 60%, transparent); margin-bottom: 14px; } .alt-izgara ul { list-style: none; margin: 0; padding: 0; } .alt-izgara li { margin-bottom: 9px; font-size: 14.5px; } .alt-tanim { font-size: 14.5px; line-height: 1.65; opacity: .8; margin: 14px 0 18px; max-width: 340px; } .alt-seffaf { border-top: 1px solid rgba(255, 255, 255, .12); padding: 32px 0; font-size: 13.2px; line-height: 1.7; opacity: .68; } .alt-seffaf h3 { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 12px; opacity: .9; } .alt-seffaf strong { font-weight: 600; opacity: 1; } .alt-rozetler { display: flex; gap: 7px; flex-wrap: wrap; } .alt-rozetler .rozet { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .14); color: inherit; opacity: .85; } .alt-son { border-top: 1px solid rgba(255, 255, 255, .12); /* Sağ altta duran yüzer WhatsApp düğmesi son satırı örtmesin. */ padding: 18px 0 clamp(22px, 6vw, 78px); display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; align-items: center; font-size: 13.5px; opacity: .7; } /* -------------------------------------------------------------------------- 14. WhatsApp yüzer düğme -------------------------------------------------------------------------- */ .wp-yuzer { position: fixed; right: 18px; bottom: 18px; z-index: 90; display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 20px 0 16px; border-radius: 999px; background: #25d366; color: #06301a; font-size: 14.5px; font-weight: 600; box-shadow: 0 10px 30px -8px rgba(37, 211, 102, .6); transition: transform var(--gecis), box-shadow var(--gecis); } .wp-yuzer:hover { transform: translateY(-2px); color: #06301a; box-shadow: 0 14px 34px -8px rgba(37, 211, 102, .7); } .wp-yuzer svg { width: 23px; height: 23px; } @media (max-width: 560px) { .wp-yuzer { padding: 0; width: 52px; justify-content: center; right: 14px; bottom: 14px; } .wp-yuzer span { display: none; } } /* -------------------------------------------------------------------------- 15. Araç kabuğu -------------------------------------------------------------------------- */ .arac-panel { background: var(--renk-kart); border: 1px solid var(--renk-cizgi); border-radius: var(--yuvarlak-l); padding: clamp(22px, 3vw, 34px); box-shadow: var(--golge-m); } .arac-panel + .arac-panel { margin-top: 20px; } .arac-cikti { margin-top: 24px; } .arac-cikti:empty { display: none; } .cikti-kutu { position: relative; background: var(--renk-bant); border: 1px solid var(--renk-cizgi); border-radius: var(--yuvarlak-s); padding: 16px 52px 16px 16px; font-family: var(--yazi-kod); font-size: 13.5px; line-height: 1.65; white-space: pre-wrap; word-break: break-word; max-height: 460px; overflow: auto; } .kopyala { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--renk-cizgi); background: var(--renk-kart); color: var(--renk-soluk); cursor: pointer; transition: color var(--gecis), border-color var(--gecis); } .kopyala:hover { color: var(--renk-cta); border-color: var(--renk-cta); } .kopyala svg { width: 15px; height: 15px; } .kopyala[data-ok] { color: var(--renk-iyi); border-color: var(--renk-iyi); } /* Sonuç satırları */ .sonuc-liste { display: grid; gap: 8px; } .sonuc { display: grid; grid-template-columns: 26px 1fr auto; gap: 12px; align-items: start; padding: 13px 16px; border: 1px solid var(--renk-cizgi); border-radius: var(--yuvarlak-s); background: var(--renk-kart); } .sonuc-im { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 12px; font-weight: 700; margin-top: 1px; } .sonuc--iyi .sonuc-im { background: var(--renk-iyi-soft); color: var(--renk-iyi); } .sonuc--uyari .sonuc-im { background: var(--renk-uyari-soft); color: var(--renk-uyari); } .sonuc--kotu .sonuc-im { background: var(--renk-kotu-soft); color: var(--renk-kotu); } .sonuc--bilgi .sonuc-im { background: var(--renk-vurgu); color: var(--renk-cta); } .sonuc b { display: block; font-size: 14.8px; font-weight: 600; margin-bottom: 2px; } .sonuc p { margin: 0; font-size: 14px; color: var(--renk-soluk); line-height: 1.55; } .sonuc code { font-size: 12.6px; } /* Puan göstergesi */ .puan-kutu { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; padding: 26px; border-radius: var(--yuvarlak); background: var(--renk-bant); border: 1px solid var(--renk-cizgi); } .puan-halka { --p: 0; position: relative; flex: none; width: 116px; height: 116px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--puan-renk, var(--renk-cta)) calc(var(--p) * 1%), var(--renk-cizgi) 0); } .puan-halka::before { content: ''; position: absolute; inset: 9px; border-radius: 50%; background: var(--renk-kart); } .puan-halka b { position: relative; font-family: var(--yazi-baslik); font-size: 32px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; } .puan-halka small { position: relative; display: block; font-size: 11.5px; color: var(--renk-soluk); margin-top: 3px; text-align: center; } .puan-bar { height: 7px; border-radius: 99px; background: var(--renk-cizgi); overflow: hidden; } .puan-bar i { display: block; height: 100%; border-radius: 99px; background: var(--renk-cta); transition: width 700ms var(--yay); } /* Yükleniyor */ .yukleniyor { display: inline-block; width: 15px; height: 15px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: don .7s linear infinite; vertical-align: -2px; } @keyframes don { to { transform: rotate(360deg); } } /* Sekmeler */ .sekmeler { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--renk-bant); border: 1px solid var(--renk-cizgi); margin-bottom: 20px; overflow-x: auto; } .sekme { flex: none; height: 34px; padding: 0 15px; border: 0; border-radius: 9px; background: none; font: inherit; font-size: 14px; font-weight: 500; color: var(--renk-soluk); cursor: pointer; white-space: nowrap; transition: background var(--gecis), color var(--gecis); } .sekme[aria-selected="true"] { background: var(--renk-kart); color: var(--renk-murekkep); box-shadow: var(--golge-s); } /* Araç hub kartı */ .arac-kart { display: flex; flex-direction: column; gap: 10px; background: var(--renk-kart); border: 1px solid var(--renk-cizgi); border-radius: var(--yuvarlak); padding: 20px; color: inherit; transition: border-color var(--gecis), box-shadow var(--gecis), transform var(--gecis); } .arac-kart:hover { border-color: var(--renk-cta); box-shadow: var(--golge-m); transform: translateY(-2px); color: inherit; } .arac-kart-bas { display: flex; align-items: center; gap: 11px; } .arac-kart-bas svg { width: 19px; height: 19px; color: var(--renk-cta); flex: none; } .arac-kart b { font-family: var(--yazi-baslik); font-size: 15.6px; font-weight: 600; letter-spacing: -.015em; line-height: 1.3; } .arac-kart p { margin: 0; font-size: 14px; color: var(--renk-soluk); line-height: 1.55; } /* İlgili araçlar */ .ilgili-araclar { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; } .ilgili-araclar a { display: flex; align-items: center; gap: 9px; padding: 11px 14px; border: 1px solid var(--renk-cizgi); border-radius: var(--yuvarlak-s); font-size: 14px; color: var(--renk-murekkep); background: var(--renk-kart); transition: border-color var(--gecis), color var(--gecis); } .ilgili-araclar a:hover { border-color: var(--renk-cta); color: var(--renk-cta); } .ilgili-araclar svg { width: 16px; height: 16px; flex: none; opacity: .7; } /* -------------------------------------------------------------------------- 16. Fiyat kartları -------------------------------------------------------------------------- */ .fiyat-izgara { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; } @media (max-width: 980px) { .fiyat-izgara { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } } .fiyat { position: relative; display: flex; flex-direction: column; background: var(--renk-kart); border: 1px solid var(--renk-cizgi); border-radius: var(--yuvarlak-l); padding: 30px 26px; height: 100%; } .fiyat--one { border-color: var(--renk-cta); box-shadow: 0 0 0 1px var(--renk-cta), var(--golge-l); } .fiyat-etiket { position: absolute; top: -12px; left: 26px; background: var(--renk-cta); color: #fff; font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 999px; } .fiyat h3 { font-size: 22px; margin-bottom: 6px; } .fiyat-kim { font-size: 14px; color: var(--renk-soluk); margin-bottom: 22px; min-height: 44px; } .fiyat-tutar { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; } .fiyat-tutar b { font-family: var(--yazi-baslik); font-size: 38px; font-weight: 600; letter-spacing: -.03em; line-height: 1; } .fiyat-tutar span { font-size: 14.5px; color: var(--renk-soluk); } .fiyat-onek { font-size: 13px; color: var(--renk-soluk); margin-bottom: 22px; } .fiyat .btn { margin-bottom: 24px; } .fiyat ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; } .fiyat li { display: grid; grid-template-columns: 17px 1fr; gap: 10px; font-size: 14.5px; line-height: 1.5; color: var(--renk-soluk); } .fiyat li svg { width: 16px; height: 16px; color: var(--renk-iyi); margin-top: 3px; } .fiyat li b { color: var(--renk-murekkep); font-weight: 600; } /* -------------------------------------------------------------------------- 17. Zaman çizelgesi / adım listesi -------------------------------------------------------------------------- */ .adimlar { display: grid; gap: 2px; counter-reset: adim; } .adim { position: relative; display: grid; grid-template-columns: 46px 1fr; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--renk-cizgi); } .adim:last-child { border-bottom: 0; } .adim-no { counter-increment: adim; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--renk-vurgu); color: var(--renk-cta); font-family: var(--yazi-baslik); font-weight: 600; font-size: 15px; } .adim-no::before { content: counter(adim, decimal-leading-zero); } .adim h3 { font-size: 19px; margin-bottom: 7px; } .adim p { color: var(--renk-soluk); font-size: 15.5px; margin: 0; } /* İki yol karşılaştırması */ .iki-yol { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } @media (max-width: 800px) { .iki-yol { grid-template-columns: 1fr; } } .yol { border: 1px solid var(--renk-cizgi); border-radius: var(--yuvarlak); padding: 24px; background: var(--renk-kart); } .yol--iyi { border-color: var(--renk-cta); background: color-mix(in srgb, var(--renk-vurgu) 40%, var(--renk-kart)); } .yol h3 { display: flex; align-items: center; gap: 9px; font-size: 17px; margin-bottom: 18px; } .yol h3 svg { width: 18px; height: 18px; } .yol ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; } .yol li { display: grid; grid-template-columns: 58px 1fr; gap: 14px; align-items: baseline; padding: 11px 0; border-top: 1px solid var(--renk-cizgi); font-size: 14.5px; color: var(--renk-soluk); line-height: 1.5; } .yol li:first-child { border-top: 0; } .yol li b { font-size: 12.5px; font-weight: 600; color: var(--renk-murekkep); opacity: .7; } .yol--kotu li b { color: var(--renk-kotu); opacity: 1; } .yol--iyi li b { color: var(--renk-cta); opacity: 1; } /* -------------------------------------------------------------------------- 18. Blog listesi -------------------------------------------------------------------------- */ .yazi-kart { display: flex; flex-direction: column; background: var(--renk-kart); border: 1px solid var(--renk-cizgi); border-radius: var(--yuvarlak); overflow: hidden; color: inherit; transition: border-color var(--gecis), box-shadow var(--gecis), transform var(--gecis); } .yazi-kart:hover { border-color: var(--renk-cta); box-shadow: var(--golge-m); transform: translateY(-2px); color: inherit; } .yazi-kart img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } .yazi-kart-ic { padding: 20px; display: flex; flex-direction: column; gap: 9px; flex: 1; } .yazi-kart h3 { font-size: 18px; margin: 0; line-height: 1.32; } .yazi-kart p { margin: 0; font-size: 14.5px; color: var(--renk-soluk); line-height: 1.55; } .yazi-kart .ust-bilgi { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--renk-soluk); margin-top: auto; padding-top: 6px; } /* -------------------------------------------------------------------------- 19. Yardımcılar -------------------------------------------------------------------------- */ .orta { text-align: center; } .soluk { color: var(--renk-soluk); } .kucuk { font-size: 13.5px; line-height: 1.6; } .mt-0 { margin-top: 0; } .mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; } .mt-48 { margin-top: 48px; } .mb-0 { margin-bottom: 0; } .mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; } .mb-32 { margin-bottom: 32px; } .gizle { display: none !important; } @media (max-width: 760px) { .mobil-gizle { display: none !important; } } @media (min-width: 761px) { .masa-gizle { display: none !important; } } /* CTA şeridi */ .cta-serit { background: var(--renk-panel); color: var(--renk-panel-yazi); border-radius: var(--yuvarlak-l); padding: clamp(32px, 5vw, 52px); text-align: center; } .cta-serit h2 { color: inherit; margin-bottom: 14px; } .cta-serit p { color: color-mix(in srgb, var(--renk-panel-yazi) 76%, transparent); max-width: 560px; margin-inline: auto; } .cta-serit .btn-satir { margin-top: 26px; justify-content: center; } .cta-serit .btn--hat { background: transparent; border-color: rgba(255, 255, 255, .28); color: var(--renk-panel-yazi); } .cta-serit .btn--hat:hover { border-color: #fff; color: #fff; }