/* ============================================================================= UZN Yönetim: site eklentileri (Tailwind çıktısının üstüne yüklenir) - Koyu / açık tema (html[data-theme]) - Erişilebilirlik: içeriğe geç bağlantısı, odak halkası, azaltılmış hareket - Mobil menü, SSS, yüzen butonlar, tema düğmesi, yazı animasyonu ========================================================================== */ :root { color-scheme: light; --u-red: #dc2627; --u-focus: #dc2627; } html[data-theme="dark"] { color-scheme: dark; --u-focus: #f87171; /* Ton merdiveni: derin -> taban -> kart */ --u-deep: #0b0e13; --u-base: #10141a; --u-card: #161b23; --u-card-2: #1c222c; --u-line: #262d38; --u-line-2: #333b48; --u-ink: #f1f3f6; --u-ink-2: #d5d9e0; --u-ink-3: #b3bac5; --u-ink-4: #949dab; --u-red-text: #f26464; } /* --------------------------------------------------------------------------- Erişilebilirlik ------------------------------------------------------------------------ */ .u-skip { position: absolute; left: 1rem; top: -100px; z-index: 100; background: var(--u-red); color: #fff; font-weight: 700; padding: .75rem 1.25rem; border-radius: .5rem; transition: top .15s; } .u-skip:focus { top: 1rem; } :where(a, button, summary, [tabindex]):focus-visible { outline: 3px solid var(--u-focus); outline-offset: 3px; border-radius: 6px; } /* Tailwind'in focus:outline-none sınıfı klavye odağını gizlemesin */ .focus\:outline-none:focus-visible { outline: 3px solid var(--u-focus) !important; outline-offset: 3px; } html { scroll-padding-top: 7.5rem; } #main:focus { outline: none; } /* Anasayfa görseli mobilde taşmasın */ @media (max-width: 639px) { .u-hero-img { margin-left: 0 !important; max-width: 100% !important; } } .u-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Tipografi incelikleri: dengeli başlık kırılımı, yetim kelime yok, marka renginde seçim */ h1, h2, h3 { text-wrap: balance; } p, li { text-wrap: pretty; } ::selection { background: #dc2626; color: #fff; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* Yazdırırken yalnızca içerik */ @media print { .u-fab, .u-theme-toggle, .u-skip, [data-menu-button], .social-share-btn { display: none !important; } body > header { position: static !important; } } /* Footer ve üst bar bağlantılarında daha rahat dokunma alanı */ footer ul a { display: inline-block; padding-block: .3rem; } /* Telif çubuğu yüzen butonların altında kalmasın */ @media (max-width: 639px) { footer > .bg-gray-900 { padding-bottom: 4.5rem; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .hover\:scale-105:hover, .hover\:scale-110:hover, .group:hover .group-hover\:scale-110 { transform: none !important; } } /* --------------------------------------------------------------------------- Tema düğmesi ------------------------------------------------------------------------ */ .u-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; margin-right: .75rem; flex: none; border-radius: 9999px; border: 1px solid #e5e7eb; color: #111827; background: transparent; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; } .u-theme-toggle:hover { background: #f3f4f6; } .u-theme-toggle svg { width: 1.25rem; height: 1.25rem; } .u-theme-toggle .u-moon { display: block; } .u-theme-toggle .u-sun { display: none; } html[data-theme="dark"] .u-theme-toggle { border-color: var(--u-line-2); color: var(--u-ink); } html[data-theme="dark"] .u-theme-toggle:hover { background: var(--u-card-2); } html[data-theme="dark"] .u-theme-toggle .u-moon { display: none; } html[data-theme="dark"] .u-theme-toggle .u-sun { display: block; } html:not(.js) .u-theme-toggle { display: none; } @media (max-width: 899px) { .u-theme-toggle { margin-right: 0; } } /* Logo: koyu temada açık renkli sürüm */ .u-logo-dark { display: none; } html[data-theme="dark"] .u-logo-light { display: none; } html[data-theme="dark"] .u-logo-dark { display: block; } /* --------------------------------------------------------------------------- Mobil menü (React yerine sade JS) ------------------------------------------------------------------------ */ .u-menu-backdrop[hidden], .u-menu-panel[hidden] { display: none !important; } .u-menu-panel { pointer-events: none; min-height: 100vh; } .u-menu-panel > div { pointer-events: auto; max-width: 420px; margin-left: auto !important; margin-right: auto !important; } @keyframes mobilemenuin { 0% { opacity: 0; transform: translateY(-24px) scale(.98); } 100% { opacity: 1; transform: translateY(0) scale(1); } } .animate-mobilemenuin { animation: mobilemenuin .3s cubic-bezier(.4, 0, .2, 1); } .u-menu-panel a[aria-current="page"] { color: var(--u-red); font-weight: 700; } html[data-theme="dark"] .u-menu-panel a[aria-current="page"] { color: var(--u-red-text); } html.u-menu-open { overflow: hidden; } /* Masaüstü menüde aktif sayfa */ nav.header-desktop a[aria-current="page"] { color: #dc2626; font-weight: 600; } /* Başlık çubuğu orta genişliklerde sığsın, kırılmasın (900–1279px) */ nav.header-desktop a, .header-desktop-inline { white-space: nowrap; } @media (min-width: 900px) and (max-width: 1023px) { nav.header-desktop.space-x-10 > :not([hidden]) ~ :not([hidden]) { margin-left: 1.25rem; } nav.header-desktop a { font-size: .95rem; } header img.h-10 { height: 2.25rem; } header .header-desktop-inline { padding-left: .875rem; padding-right: .875rem; } .u-theme-toggle { width: 2.5rem; height: 2.5rem; margin-right: .5rem; } } @media (min-width: 1024px) and (max-width: 1279px) { nav.header-desktop.space-x-10 > :not([hidden]) ~ :not([hidden]) { margin-left: 1.75rem; } } /* --------------------------------------------------------------------------- SSS akordeonu ------------------------------------------------------------------------ */ [data-faq] button[aria-expanded="true"] svg { transform: rotate(180deg); } /* JS kapalıysa cevaplar açık görünsün */ html:not(.js) [data-faq] [id^="faq-answer-"].hidden { display: block; } html:not(.js) [data-faq] button svg { display: none; } /* --------------------------------------------------------------------------- Yüzen WhatsApp / Ara butonları ------------------------------------------------------------------------ */ .u-fab { right: max(1.5rem, env(safe-area-inset-right)); bottom: max(1.5rem, env(safe-area-inset-bottom)); } @media (max-width: 639px) { .u-fab { right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); gap: .5rem; } .u-fab > a { width: 3rem; height: 3rem; } } .u-fab .u-fab-tip { pointer-events: none; } .u-fab a:focus-visible .u-fab-tip { opacity: 1; } /* --------------------------------------------------------------------------- Anasayfa yazı animasyonu: sabit yükseklik (mobilde zıplama yok) ------------------------------------------------------------------------ */ .u-typed-pill { display: inline-grid; align-content: center; vertical-align: top; } .u-typed-line { display: block; } .typed-cursor { margin-left: -.04em; } .typed-cursor--blink { animation: u-blink .7s infinite; } @keyframes u-blink { 50% { opacity: 0; } } /* --------------------------------------------------------------------------- İletişim sayfası: iletişim panosu + form + çalışma saatleri + küçük harita Masaüstü: solda pano / saatler / harita, sağda form. Mobil: pano, form, saatler, harita. ------------------------------------------------------------------------ */ .u-c { padding: .5rem 0 5rem; } .u-c-grid { display: grid; gap: 2.75rem; grid-template-areas: "dir" "form" "hours" "map"; } .u-c-dir { grid-area: dir; min-width: 0; } .u-c-form { grid-area: form; min-width: 0; scroll-margin-top: 8rem; } .u-c-hours { grid-area: hours; min-width: 0; } .u-c-map { grid-area: map; min-width: 0; } @media (min-width: 1024px) { .u-c-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 4.5rem; row-gap: 2.75rem; align-items: start; grid-template-areas: "dir form" "hours form" "map form"; } } .u-c-h { font-size: 1.125rem; font-weight: 700; color: #111827; margin-bottom: .75rem; } /* Pano: bina girişindeki yönetim panosu gibi etiket / değer satırları; telefon en büyük */ .u-dir { margin: 0; border-top: 2px solid #111827; } .u-dir-row { display: grid; grid-template-columns: 6rem minmax(0, 1fr); column-gap: 1rem; align-items: center; padding: 1rem 0; border-bottom: 1px solid #e5e7eb; } .u-dir dt { font-size: .9rem; font-weight: 600; color: #6b7280; } .u-dir dd { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-width: 0; } .u-dir-val { font-size: 1.125rem; font-weight: 600; color: #111827; overflow-wrap: anywhere; transition: color .2s; } .u-dir-val:hover { color: #dc2626; } .u-dir-main .u-dir-val { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.25rem); font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; line-height: 1.15; } .u-dir-addr { font-size: 1rem; font-weight: 500; line-height: 1.55; } @media (max-width: 479px) { .u-dir-row { grid-template-columns: minmax(0, 1fr); row-gap: .2rem; padding: .85rem 0; } } /* Panoda "Kopyalandı" baloncuğu düğmenin üstünde çıkar (sağda taşmasın) */ .u-dir .u-copy.is-copied::after { left: auto; right: 0; top: auto; bottom: calc(100% + .4rem); translate: none; animation-name: u-tip-up; } @keyframes u-tip-up { from { opacity: 0; translate: 0 .3rem; } } /* Çalışma saatleri: bugünün satırı işaretli (site.js) */ .u-week { margin: 0; display: grid; gap: .15rem; } .u-week > div { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .55rem .75rem; border-radius: .5rem; font-variant-numeric: tabular-nums; } .u-week dt { color: #374151; font-weight: 500; display: flex; align-items: center; gap: .5rem; } .u-week dd { margin: 0; color: #111827; font-weight: 600; } .u-week > div.is-today { background: #fef2f2; } .u-week > div.is-today dt { color: #111827; font-weight: 700; } .u-today { font-size: .75rem; font-weight: 700; color: #b91c1c; background: #fff; border: 1px solid #fecaca; border-radius: 9999px; padding: .05rem .5rem; } /* Harita: küçük, çerçeveli; altında Google Haritalar bağlantıları */ .u-map { border-radius: 1rem; overflow: hidden; border: 1px solid #e5e7eb; aspect-ratio: 4 / 3; background: #e5e7eb; } .u-map iframe { display: block; width: 100%; height: 100%; border: 0; } .u-map-links { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: .85rem; font-weight: 600; } .u-map-links a { color: #dc2626; text-decoration: underline; text-underline-offset: 3px; } .u-map-links a:hover { color: #b91c1c; } /* Form kartı */ .u-form-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 1.25rem; padding: clamp(1.25rem, 3vw, 2.25rem); box-shadow: 0 24px 48px -28px rgb(15 23 42 / .28); } .u-form-title { font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem); font-weight: 800; color: #111827; line-height: 1.2; } .u-form-lead { color: #4b5563; margin-top: .5rem; max-width: 34rem; } .u-form-card .u-form { margin-top: 1.5rem; } .u-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; } .u-btn-send { background: #dc2626; color: #fff; padding: .95rem 2.5rem; font-size: 1.05rem; } .u-btn-send:hover { background: #b91c1c; } .u-btn-send[disabled] { opacity: .75; cursor: progress; } .u-btn-ghost { background: transparent; color: #111827; border: 1px solid #d1d5db; } .u-btn-ghost:hover { border-color: #dc2626; color: #dc2626; } .u-form-done { padding: .5rem 0; } .u-form-done:focus { outline: none; } .u-form-done svg { width: 2.75rem; height: 2.75rem; color: #15803d; background: #dcfce7; border-radius: 9999px; padding: .55rem; } .u-form-done h3 { font-size: 1.5rem; font-weight: 800; color: #111827; margin-top: 1rem; } .u-form-done p { color: #4b5563; margin: .5rem 0 1.5rem; max-width: 34rem; } .u-form-done p a { color: #dc2626; font-weight: 600; text-decoration: underline; } form[aria-busy="true"] { cursor: progress; } html[data-theme="dark"] .u-c-h, html[data-theme="dark"] .u-form-title, html[data-theme="dark"] .u-form-done h3 { color: var(--u-ink); } html[data-theme="dark"] .u-dir { border-top-color: var(--u-ink-3); } html[data-theme="dark"] .u-dir-row { border-bottom-color: var(--u-line); } html[data-theme="dark"] .u-dir dt { color: var(--u-ink-4); } html[data-theme="dark"] .u-dir-val { color: var(--u-ink); } html[data-theme="dark"] .u-dir-val:hover { color: var(--u-red-text); } html[data-theme="dark"] .u-week dt { color: var(--u-ink-3); } html[data-theme="dark"] .u-week dd, html[data-theme="dark"] .u-week > div.is-today dt { color: var(--u-ink); } html[data-theme="dark"] .u-week > div.is-today { background: rgb(220 38 39 / .14); } html[data-theme="dark"] .u-today { background: transparent; color: #fca5a5; border-color: rgb(248 113 113 / .45); } html[data-theme="dark"] .u-map { border-color: var(--u-line-2); background: var(--u-card); } html[data-theme="dark"] .u-map-links a, html[data-theme="dark"] .u-form-done p a { color: var(--u-red-text); } html[data-theme="dark"] .u-form-card { background: var(--u-card); border-color: var(--u-line); box-shadow: 0 24px 48px -28px rgb(0 0 0 / .8); } html[data-theme="dark"] .u-form-lead, html[data-theme="dark"] .u-form-done p { color: var(--u-ink-3); } html[data-theme="dark"] .u-btn-ghost { color: var(--u-ink); border-color: var(--u-line-2); } html[data-theme="dark"] .u-btn-ghost:hover { color: var(--u-red-text); border-color: var(--u-red-text); } html[data-theme="dark"] .u-form-done svg { color: #4ade80; background: rgb(22 163 74 / .18); } /* --------------------------------------------------------------------------- Hakkımızda: proje fotoğraflarından dönen 3B halka (site.js "Proje halkası") .is-3d JS başlayınca eklenir; yoksa kartlar yatay kaydırmalı bir satırdır. ------------------------------------------------------------------------ */ .u-ring-sec { position: relative; background: #090b38; color: #fff; padding: 5rem 0 4rem; overflow: hidden; --w: clamp(160px, 20vw, 260px); --r: calc(var(--w) * 2.15); } .u-ring-sec::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 55% at 50% 62%, rgb(255 255 255 / .09), transparent 70%); } .u-ring-head { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.25rem 2rem; } .u-ring-title { font-size: clamp(1.875rem, 1.4rem + 1.8vw, 2.75rem); font-weight: 800; line-height: 1.15; letter-spacing: -.01em; } .u-ring-lead { color: #c9cde4; margin-top: .6rem; max-width: 38rem; font-size: 1.05rem; } .u-ring-actions { display: flex; align-items: center; gap: 1.25rem; } .u-ring-all { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgb(255 255 255 / .5); } .u-ring-all:hover { text-decoration-color: #fff; } .u-ring-sec :focus-visible { outline-color: #fff; } /* Ortak kart */ .u-ring { list-style: none; margin: 0; padding: 0; } .u-ring-card { display: block; width: var(--w); border-radius: .875rem; overflow: hidden; background: #fff; color: #111827; box-shadow: 0 30px 50px -28px rgb(0 0 0 / .75); -webkit-user-drag: none; user-select: none; } .u-ring-card img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; pointer-events: none; } .u-ring-cap { display: grid; gap: .1rem; padding: .7rem .85rem .8rem; } .u-ring-name { font-weight: 700; font-size: .98rem; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .u-ring-loc { font-size: .8rem; color: #6b7280; } .u-ring-card:hover .u-ring-name { color: #dc2626; } /* JS yok / başlamadı: yatay kaydırmalı satır */ .u-ring-sec:not(.is-3d) .u-ring-stage { margin-top: 2.5rem; } .u-ring-sec:not(.is-3d) .u-ring { --pad: max(1rem, calc((100vw - 80rem) / 2 + 2rem)); display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: .5rem var(--pad) 1.5rem; scroll-padding-inline: var(--pad); } .u-ring-sec:not(.is-3d) .u-ring-item { flex: none; scroll-snap-align: start; } /* 3B halka */ .u-ring-sec.is-3d .u-ring-stage { position: relative; margin-top: 2rem; height: calc(var(--w) * .8 + 9rem); perspective: calc(var(--r) * 2.7); overflow: hidden; touch-action: pan-y; cursor: grab; } .u-ring-sec.is-3d .u-ring-stage.is-dragging { cursor: grabbing; } /* zemin gölgesi: halka havada durmasın */ .u-ring-sec.is-3d .u-ring-stage::after { content: ""; position: absolute; z-index: -1; left: 50%; bottom: .5rem; width: min(90%, calc(var(--r) * 2.2)); height: 2.5rem; translate: -50% 0; background: radial-gradient(closest-side, rgb(0 0 0 / .5), transparent); pointer-events: none; } .u-ring-sec.is-3d .u-ring { position: absolute; left: 50%; top: 2.5rem; width: var(--w); height: calc(var(--w) * .8 + 3.6rem); margin-left: calc(var(--w) / -2); transform-style: preserve-3d; transform: translateZ(calc(var(--r) * -1)) rotateX(-4deg) rotateY(var(--a, 0deg)); } .u-ring-sec.is-3d .u-ring-item { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform: rotateY(calc(var(--i) * 360deg / var(--n))) translateZ(var(--r)); } .u-ring-sec.is-3d .u-ring-item.is-back { pointer-events: none; } .u-ring-sec.is-3d .u-ring-card { transition: box-shadow .3s; } html[data-theme="dark"] .u-ring-sec { background: var(--u-deep); border-block: 1px solid var(--u-line); } html[data-theme="dark"] .u-ring-card { background: var(--u-card); color: var(--u-ink); } html[data-theme="dark"] .u-ring-loc { color: var(--u-ink-4); } html[data-theme="dark"] .u-ring-card:hover .u-ring-name { color: var(--u-red-text); } /* Hakkımızda: uzun metnin yanında fotoğraf ortada boşlukta kalmasın, metinle birlikte ilerlesin */ @media (min-width: 1024px) { #hakkimizda .grid.items-center > div:first-child { align-self: start; position: sticky; top: 9rem; } } /* Proje kartları: alt bölüm kartın sonuna kadar uzar (kısa başlıkta altta boş şerit kalmasın) */ .project-card { display: flex; flex-direction: column; } .project-card > div:last-child { flex: 1 1 auto; } html[data-theme="dark"] .project-card { background-color: var(--u-card); } html[data-theme="dark"] .project-card > div:last-child { background-color: var(--u-card); border-top-color: var(--u-line); } .project-card h2 { transition: color .2s; } .project-card:hover h2 { color: #dc2626; } html[data-theme="dark"] .project-card:hover h2 { color: var(--u-red-text); } /* --------------------------------------------------------------------------- KVKK / 404 içerik sayfaları ------------------------------------------------------------------------ */ .u-legal h2 { font-size: 1.25rem; font-weight: 700; margin-top: 2rem; margin-bottom: .5rem; color: #111827; } .u-legal p, .u-legal li { color: #374151; line-height: 1.75; } .u-legal ul { list-style: disc; padding-left: 1.25rem; margin: .5rem 0 1rem; } .u-legal a { color: #dc2626; text-decoration: underline; } html[data-theme="dark"] .u-legal h2 { color: var(--u-ink); } html[data-theme="dark"] .u-legal p, html[data-theme="dark"] .u-legal li { color: var(--u-ink-2); } html[data-theme="dark"] .u-legal a { color: var(--u-red-text); } /* Derlenmiş Tailwind çıktısında olmayan, yeni sayfalarda kullanılan sınıflar */ .py-24 { padding-top: 6rem; padding-bottom: 6rem; } .pb-20 { padding-bottom: 5rem; } .mt-10 { margin-top: 2.5rem; } .gap-y-2 { row-gap: .5rem; } @media (min-width: 768px) { .md\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } } /* Blog: ilgili yazılar */ .u-related { display: flex; align-items: center; gap: .875rem; } .u-related img { width: 4rem; height: 4rem; flex: none; object-fit: cover; border-radius: .625rem; } .u-related span { line-height: 1.35; } /* Kontrast düzeltmeleri (WCAG AA: beyaz metin ≥ 4.5:1, simge ≥ 3:1) */ /* Şablondaki açık kırmızı (#ef4444, 3.76:1) yerine markanın kırmızısı (#dc2626, 4.83:1) */ .bg-red-500 { background-color: #dc2626; } .bg-red-500.hover\:bg-red-600:hover, .hover\:bg-red-500:hover { background-color: #b91c1c; } /* Paylaşım düğmeleri: aynı marka tonu, daha koyu */ .bg-\[\#1877F2\] { background-color: #0866ff; } .hover\:bg-\[\#166FE5\]:hover { background-color: #1462d6; } .bg-\[\#25D366\] { background-color: #0f7a5c; } .hover\:bg-\[\#22C55E\]:hover { background-color: #0c6650; } .bg-\[\#4C88BF\] { background-color: #3a6fa8; } .hover\:bg-\[\#3A6B99\]:hover { background-color: #2f5f96; } /* Yüzen WhatsApp düğmesi: simge için ≥ 3:1 */ .u-fab .bg-green-500 { background-color: #16a34a; } .u-fab .hover\:bg-green-600:hover { background-color: #15803d; } /* Koyu tema: form notundaki bağlantı ve tablo çizgileri */ html[data-theme="dark"] .u-form-note a { color: var(--u-red-text); } html[data-theme="dark"] .prose :is(table, thead, tbody, tr, th, td) { border-color: var(--u-line-2); } /* Paylaşım: X düğmesi. Koyu temada siyah dolgu zemine karışıp düğmeyi küçük gösteriyordu: sitedeki diğer koyu düğmeler gibi açık renge döner (X'in kendi koyu tema görünümü de beyaz zemin, siyah logo) */ .u-share-x { background-color: #000; } .u-share-x:hover { background-color: #1f2937; } html[data-theme="dark"] .u-share-x { background-color: #eceff3; color: #0b0e13; } html[data-theme="dark"] .u-share-x:hover { background-color: #ffffff; } /* Başlık bandından sonraki içerik: üstte büyük boşluk kalmasın (patch.mjs ekler) */ .u-after-band { padding-top: 1.5rem; } /* ============================================================================= KOYU TEMA: Tailwind yardımcı sınıflarının koyu karşılıkları ========================================================================== */ html[data-theme="dark"] body { background-color: var(--u-base); color: var(--u-ink-2); } /* Yüzeyler */ html[data-theme="dark"] .bg-white { background-color: var(--u-base); } html[data-theme="dark"] :is(.bg-gray-50) { background-color: var(--u-deep); } html[data-theme="dark"] .bg-gray-200 { background-color: var(--u-line-2); } html[data-theme="dark"] header.bg-white { background-color: var(--u-base); } /* Kartlar: gölge/kenarlık taşıyan beyaz kutular bir ton açık */ html[data-theme="dark"] :is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl).bg-white, html[data-theme="dark"] :is(.shadow-sm, .shadow-md, .shadow-lg, .shadow-xl, .shadow-2xl).bg-white, html[data-theme="dark"] article.bg-white { background-color: var(--u-card); } html[data-theme="dark"] .bg-white\/70 { background-color: rgb(22 27 35 / .75); } html[data-theme="dark"] .bg-white\/80 { background-color: rgb(22 27 35 / .85); } html[data-theme="dark"] .bg-white\/90, html[data-theme="dark"] .hover\:bg-white\/90:hover { background-color: rgb(22 27 35 / .92); } html[data-theme="dark"] .bg-white\/95 { background-color: rgb(22 27 35 / .96); } html[data-theme="dark"] .bg-white\/10 { background-color: rgb(0 0 0 / .1); } html[data-theme="dark"] .hover\:bg-gray-50:hover { background-color: var(--u-card-2); } html[data-theme="dark"] .hover\:bg-gray-100:hover, html[data-theme="dark"] .bg-gray-100 { background-color: var(--u-card-2); } html[data-theme="dark"] .bg-red-100 { background-color: rgb(220 38 39 / .18); } html[data-theme="dark"] .text-red-800 { color: #fca5a5; } /* Koyu çubuklar (üst bar, telif çubuğu, ipuçları) bir ton daha koyu */ html[data-theme="dark"] div.bg-gray-900 { background-color: #05070a; } /* Koyu dolgulu butonlar koyu temada açık renge döner */ html[data-theme="dark"] :is(a, button).bg-gray-900 { background-color: #eceff3; color: #0b0e13; } html[data-theme="dark"] :is(a, button).bg-gray-900:hover, html[data-theme="dark"] :is(a, button).hover\:bg-gray-700:hover { background-color: #ffffff; } html[data-theme="dark"] .u-fab-tip { background-color: #eceff3 !important; color: #0b0e13 !important; } html[data-theme="dark"] .u-fab-tip > div { border-left-color: #eceff3 !important; } /* Degradeler */ html[data-theme="dark"] .from-slate-50 { --tw-gradient-from: #10141a var(--tw-gradient-from-position); --tw-gradient-to: rgb(16 20 26 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } html[data-theme="dark"] .to-red-50 { --tw-gradient-to: #22121a var(--tw-gradient-to-position); } html[data-theme="dark"] .from-white { --tw-gradient-from: var(--u-base) var(--tw-gradient-from-position); --tw-gradient-to: rgb(16 20 26 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } html[data-theme="dark"] .to-white { --tw-gradient-to: var(--u-base) var(--tw-gradient-to-position); } html[data-theme="dark"] .from-gray-50 { --tw-gradient-from: var(--u-deep) var(--tw-gradient-from-position); --tw-gradient-to: rgb(11 14 19 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } html[data-theme="dark"] .to-gray-50 { --tw-gradient-to: var(--u-deep) var(--tw-gradient-to-position); } /* Metin */ html[data-theme="dark"] :is(.text-gray-900, .text-dark, .text-secondary) { color: var(--u-ink); } html[data-theme="dark"] .text-gray-800 { color: #e6e9ee; } html[data-theme="dark"] .text-gray-700 { color: var(--u-ink-2); } html[data-theme="dark"] .text-gray-600 { color: var(--u-ink-3); } html[data-theme="dark"] :is(.text-gray-500, .text-gray-400) { color: var(--u-ink-4); } html[data-theme="dark"] .text-dark\/80 { color: rgb(241 243 246 / .85); } html[data-theme="dark"] .text-dark\/70 { color: rgb(241 243 246 / .74); } html[data-theme="dark"] .text-dark\/60 { color: rgb(241 243 246 / .66); } html[data-theme="dark"] .hover\:text-gray-900:hover { color: #ffffff; } /* Kırmızı metin koyu zeminde okunur tonda (≥4.5:1) */ html[data-theme="dark"] :is(.text-red-600, .text-primary, .text-red-500, .hover\:text-red-600:hover, .group:hover .group-hover\:text-red-600, .group:hover .group-hover\:text-primary) { color: var(--u-red-text); } html[data-theme="dark"] nav.header-desktop a[aria-current="page"] { color: var(--u-red-text); } /* Kenarlıklar */ html[data-theme="dark"] .border-gray-100 { border-color: var(--u-line); } html[data-theme="dark"] .border-gray-200 { border-color: var(--u-line); } html[data-theme="dark"] .border-gray-300 { border-color: var(--u-line-2); } html[data-theme="dark"] .border-white { border-color: var(--u-line-2); } /* Renk sınıfı olmayan kenarlıklar (Tailwind varsayılanı gray-200) — özgüllük 0, sınıflar kazanır */ :where(html[data-theme="dark"] *), :where(html[data-theme="dark"] *)::before, :where(html[data-theme="dark"] *)::after { border-color: var(--u-line); } /* Gölgeler koyu zeminde siyah tonlu */ html[data-theme="dark"] :is(.shadow-sm, .shadow-md, .shadow-lg, .shadow-xl, .shadow-2xl, .hover\:shadow-xl:hover, .hover\:shadow-md:hover) { --tw-shadow-color: rgb(0 0 0 / .55); --tw-shadow: var(--tw-shadow-colored); } /* Blog / hizmet metinleri (Tailwind Typography) */ html[data-theme="dark"] .prose { --tw-prose-body: var(--u-ink-2); --tw-prose-headings: var(--u-ink); --tw-prose-lead: var(--u-ink-3); --tw-prose-links: var(--u-red-text); --tw-prose-bold: var(--u-ink); --tw-prose-counters: var(--u-ink-4); --tw-prose-bullets: #4b5563; --tw-prose-hr: var(--u-line); --tw-prose-quotes: var(--u-ink); --tw-prose-quote-borders: var(--u-line-2); --tw-prose-captions: var(--u-ink-4); --tw-prose-th-borders: var(--u-line-2); --tw-prose-td-borders: var(--u-line); } html[data-theme="dark"] .prose-headings\:text-gray-900 :is(h1, h2, h3, h4, h5, h6, th) { color: var(--u-ink); } html[data-theme="dark"] .prose thead th { background-color: var(--u-card-2); color: var(--u-ink); } html[data-theme="dark"] .prose tbody tr:nth-child(2n) :is(td, th) { background-color: rgb(255 255 255 / .03); } html[data-theme="dark"] .prose tbody th:not(:first-child) { font-weight: 400; color: var(--u-ink-2); } html[data-theme="dark"] .prose-a\:text-red-600 a { color: var(--u-red-text); } /* Görseller: koyu yazılı logolar koyu temada okunur olsun */ html[data-theme="dark"] img[alt="Clutch"], html[data-theme="dark"] img[alt="Trustpilot"] { filter: invert(1) hue-rotate(180deg); } html[data-theme="dark"] iframe[src*="google.com/maps"] { filter: brightness(.82) contrast(1.05); } /* Form alanları (varsa) */ html[data-theme="dark"] :is(input, textarea, select) { background-color: var(--u-card); color: var(--u-ink); border-color: var(--u-line-2); } /* --------------------------------------------------------------------------- Detaylar: kaydırınca beliren içerik, sayaçlar, başlık gölgesi, okuma çubuğu ------------------------------------------------------------------------ */ .u-count { font-variant-numeric: tabular-nums; } /* Kaydırınca başlığa ince gölge */ body > header { transition: box-shadow .25s ease; } html.u-scrolled body > header { box-shadow: 0 10px 30px -18px rgb(15 23 42 / .35); } html[data-theme="dark"].u-scrolled body > header { box-shadow: 0 10px 30px -14px rgb(0 0 0 / .8); } /* Blog okuma ilerleme çubuğu (başlığın alt kenarında) */ .u-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: #dc2626; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); pointer-events: none; } @supports (animation-timeline: scroll()) { .u-progress { animation: u-progress linear both; animation-timeline: scroll(root); } @keyframes u-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } } } html[data-theme="dark"] .u-progress { background: #f26464; } /* İletişim: şu an açık mı? */ .u-open { display: flex; align-items: center; gap: .5rem; margin-top: .5rem; font-size: .85rem; font-weight: 600; } .u-open::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: #9ca3af; flex: none; } .u-open.is-open::before { background: #16a34a; box-shadow: 0 0 0 4px rgb(22 163 74 / .18); } .u-open:empty { display: none; } /* İletişim: hızlı mesaj formu (WhatsApp / e-posta ile hazır açılır, sunucu gerekmez) */ .u-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1rem 1.25rem; margin-top: 1.75rem; } .u-field { display: flex; flex-direction: column; gap: .4rem; } .u-field.u-wide, .u-form > .u-wide { grid-column: 1 / -1; } .u-field label { font-size: .9rem; font-weight: 600; color: #374151; } .u-field label span { color: #dc2626; } .u-field :is(input, select, textarea) { width: 100%; border: 1px solid #d1d5db; border-radius: .625rem; padding: .7rem .85rem; font: inherit; color: #111827; background: #fff; } .u-field textarea { min-height: 7.5rem; resize: vertical; field-sizing: content; max-height: 20rem; } .u-field :is(input, select, textarea):focus-visible { outline: 3px solid var(--u-focus); outline-offset: 1px; border-color: transparent; } .u-field [aria-invalid="true"] { border-color: #dc2626; } .u-form-note { font-size: .85rem; color: #6b7280; } .u-form-note a { color: #dc2626; text-decoration: underline; } .u-form-actions { display: flex; flex-wrap: wrap; gap: .75rem; } .u-btn { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; padding: .85rem 1.4rem; border-radius: .625rem; cursor: pointer; border: 0; transition: background-color .2s, transform .2s; } .u-btn svg { width: 1.2rem; height: 1.2rem; } .u-form-status { font-size: .9rem; font-weight: 600; color: #15803d; min-height: 1.25rem; } .u-form-status.is-error { color: #b91c1c; } html[data-theme="dark"] .u-field label { color: var(--u-ink-2); } html[data-theme="dark"] .u-field :is(input, select, textarea) { background: var(--u-card); color: var(--u-ink); border-color: var(--u-line-2); } html[data-theme="dark"] .u-form-note { color: var(--u-ink-4); } html[data-theme="dark"] .u-form-status { color: #4ade80; } html[data-theme="dark"] .u-form-status.is-error { color: #fca5a5; } /* --------------------------------------------------------------------------- Galeri araştırmasından gelen detaylar (fikir; birebir kopya değil) ------------------------------------------------------------------------ */ /* SSS: hidden="until-found" ile Ctrl+F kapalı cevapta da bulur (Tailwind'in [hidden] kuralını geç) */ [data-faq] [hidden="until-found"] { display: block; padding-top: 0; padding-bottom: 0; } /* kapalıyken boşluk bırakmasın */ /* Şablondaki transition-all, cevap açılırken iç boşluğu 0'dan 20px'e kaydırıp altındaki her şeyi titretiyordu */ [data-faq] [id^="faq-answer-"] { transition: none; } /* Yüzen arama düğmesi: açık / kapalı noktası */ .u-fab a.u-has-status::after { content: ""; position: absolute; top: .2rem; right: .2rem; width: .7rem; height: .7rem; border-radius: 50%; background: #9ca3af; border: 2px solid #fff; } .u-fab a.u-has-status.u-is-open::after { background: #22c55e; } html[data-theme="dark"] .u-fab a.u-has-status::after { border-color: var(--u-base); } /* İletişim: kopyala düğmeleri */ .u-copy-row { display: flex; align-items: center; gap: .5rem; } .u-copy-row > a { flex: 0 1 auto; } .u-copy { position: relative; flex: none; display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 9999px; border: 1px solid #d1d5db; background: rgb(255 255 255 / .85); color: #374151; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; } .u-copy:hover { color: #dc2626; border-color: #dc2626; } .u-copy svg { width: 1.1rem; height: 1.1rem; } .u-copy .u-ok { display: none; } .u-copy.is-copied { color: #15803d; border-color: #15803d; } .u-copy.is-copied .u-ok { display: block; } .u-copy.is-copied .u-cp { display: none; } .u-copy.is-copied::after { content: "Kopyalandı"; position: absolute; left: calc(100% + .5rem); top: 50%; translate: 0 -50%; white-space: nowrap; font-size: .8rem; font-weight: 600; color: #fff; background: #15803d; padding: .25rem .55rem; border-radius: .4rem; } html[data-theme="dark"] .u-copy { background: rgb(22 27 35 / .9); border-color: var(--u-line-2); color: var(--u-ink-2); } html[data-theme="dark"] .u-copy:hover { color: var(--u-red-text); border-color: var(--u-red-text); } /* Hızlı mesaj: yapı türü çipleri + canlı önizleme */ .u-chips { display: flex; flex-wrap: wrap; gap: .5rem; border: 0; padding: 0; margin: 0; } .u-chips legend { font-size: .9rem; font-weight: 600; color: #374151; margin-bottom: .5rem; padding: 0; } .u-chip { position: relative; } .u-chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; } .u-chip span { display: inline-block; padding: .5rem 1rem; border-radius: 9999px; border: 1px solid #d1d5db; background: #fff; font-size: .9rem; font-weight: 600; color: #374151; transition: background-color .15s, border-color .15s, color .15s; } .u-chip input:checked + span { background: #dc2626; border-color: #dc2626; color: #fff; } .u-chip input:focus-visible + span { outline: 3px solid var(--u-focus); outline-offset: 2px; } .u-chip:hover span { border-color: #dc2626; } html[data-theme="dark"] .u-chips legend { color: var(--u-ink-2); } html[data-theme="dark"] .u-chip span { background: var(--u-card); border-color: var(--u-line-2); color: var(--u-ink-2); } html[data-theme="dark"] .u-chip input:checked + span { background: #dc2626; border-color: #dc2626; color: #fff; } .u-form { accent-color: #dc2626; } /* 404: bunu mu aradınız? */ .u-suggest { margin-top: 2rem; display: grid; gap: .5rem; justify-items: center; } .u-suggest-title { font-weight: 700; color: #111827; } .u-suggest-link { display: inline-flex; gap: .5rem; align-items: center; font-weight: 600; color: #dc2626; } .u-suggest-link:hover { text-decoration: underline; } html[data-theme="dark"] .u-suggest-title { color: var(--u-ink); } html[data-theme="dark"] .u-suggest-link { color: var(--u-red-text); } /* Footer bağlantıları: alt çizgi soldan çizilir (yalnızca fareyle, hareket azaltılmamışsa) */ @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) { footer ul a { background: linear-gradient(currentColor 0 0) 0 100% / 0 1px no-repeat; transition: background-size .3s cubic-bezier(.22, 1, .36, 1), color .2s; } footer ul a:hover, footer ul a:focus-visible { background-size: 100% 1px; } } /* Koyu tema: fotoğraflar hafifçe kısılır (göz yormaz); logolar hariç */ html[data-theme="dark"] main img:not([src*="logo"]):not([src*="cdn-assets/f4a7"]):not([src$=".svg"]) { filter: brightness(.9); } /* Sayfalar arası geçiş (Chrome/Edge/Safari; hareket azaltılmışsa kapalı): eski sayfa hızla söner, yenisi hafifçe yükselerek gelir; başlık ve yüzen düğmeler yerinde kalır */ @media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } ::view-transition-old(root) { animation: u-page-out .16s cubic-bezier(.4, 0, 1, 1) both; } ::view-transition-new(root) { animation: u-page-in .42s cubic-bezier(.2, .7, .1, 1) .04s both; } } @keyframes u-page-out { to { opacity: 0; } } @keyframes u-page-in { from { opacity: 0; transform: translateY(12px); } } body > header { view-transition-name: site-header; } .u-fab { view-transition-name: u-fab; } /* Tema geçişi: düğmeden büyüyen daire (View Transitions). Sayfa tek görüntü olarak döner. */ html.u-theme-vt body > header, html.u-theme-vt .u-fab { view-transition-name: none; } html.u-theme-vt::view-transition-old(root), html.u-theme-vt::view-transition-new(root) { animation: none; mix-blend-mode: normal; } html.u-theme-vt::view-transition-old(root) { z-index: 1; } html.u-theme-vt::view-transition-new(root) { z-index: 2; } /* Eski görüntünün üstte kaldığı animasyonlar (ör. bulanıklaşarak kaybolma) */ html.u-theme-vt.u-vt-old-top::view-transition-old(root) { z-index: 2; } html.u-theme-vt.u-vt-old-top::view-transition-new(root) { z-index: 1; } /* Güneş / ay simgesi dönerek ve büyüyerek gelir (yalnızca düğmeye basınca) */ html.u-theme-changed .u-theme-toggle svg { animation: u-icon-in .55s cubic-bezier(.2, .7, .2, 1); } @keyframes u-icon-in { from { opacity: 0; transform: rotate(-135deg) scale(.35); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { html.u-theme-changed .u-theme-toggle svg { animation: none; } } /* ============================================================================= HAREKET Tek imza an: anasayfa açılışı. Geri kalan her hareket ziyaretçinin bir eylemine cevap verir (menü, SSS, kopyala, form, basma). Hareket azaltılmışsa hepsi kapalı. Eğriler: giriş cubic-bezier(.2,.7,.1,1) · durum değişimi cubic-bezier(.4,0,.2,1) ========================================================================== */ /* Başlık kelimeleri maskeli sarmalayıcıda (yalnızca açılışta kırpılır) */ .u-w, .u-w > span { display: inline-block; } /* Anasayfa açılışı: html.u-intro, siteye dışarıdan gelince ya da yenileyince eklenir */ @media (prefers-reduced-motion: no-preference) { /* Kelimeler bir çizginin altından sırayla yükselir */ html.u-intro .u-hero .u-w { clip-path: inset(-.4em -.15em 0 -.15em); } html.u-intro .u-hero .u-w > span { animation: u-rise .8s cubic-bezier(.2, .7, .1, 1) var(--u-d) both; } html.u-intro .u-hero .u-w:nth-child(2) > span { animation-delay: calc(var(--u-d) + .07s); } html.u-intro .u-hero .u-w:nth-child(3) > span { animation-delay: calc(var(--u-d) + .14s); } /* Kırmızı şerit soldan sağa çizilir, yazısı arkasından gelir; ardından yazı efekti başlar */ html.u-intro .u-hero .u-typed-pill { animation: u-wipe .62s cubic-bezier(.65, 0, .35, 1) calc(var(--u-d) + .32s) both; } html.u-intro .u-hero .u-typed-line { animation: u-nudge .5s cubic-bezier(.2, .7, .1, 1) calc(var(--u-d) + .52s) both; } /* Açıklama, düğme, puanlar ve kartlar */ html.u-intro .u-hero .space-y-6 > :nth-child(n+2) { animation: u-fade-up .6s cubic-bezier(.2, .7, .1, 1) var(--u-d) both; } html.u-intro .u-hero .space-y-6 > :nth-child(2) { animation-delay: calc(var(--u-d) + .5s); } html.u-intro .u-hero .space-y-6 > :nth-child(3) { animation-delay: calc(var(--u-d) + .58s); } html.u-intro .u-hero .space-y-6 > :nth-child(4) { animation-delay: calc(var(--u-d) + .66s); } html.u-intro .u-hero .space-y-6 > :nth-child(5) { animation-delay: calc(var(--u-d) + .76s); } /* Fotoğraf lacivert şeridin arkasından yükselir (opaklık değişmez: LCP gecikmez) */ html.u-intro .u-hero-img { animation: u-hero-rise 1.05s cubic-bezier(.2, .7, .1, 1) calc(var(--u-d) + .08s) both; } html.u-intro .u-hero > .absolute { animation: u-dot .5s cubic-bezier(.3, 1.6, .5, 1) var(--u-d) both; } html.u-intro .u-hero > .absolute:nth-child(1) { animation-delay: calc(var(--u-d) + .85s); } html.u-intro .u-hero > .absolute:nth-child(2) { animation-delay: calc(var(--u-d) + .95s); } html.u-intro .u-hero > .absolute:nth-child(3) { animation-delay: calc(var(--u-d) + 1.05s); } } /* 1.45em: "İ" ve "ö" noktaları satır kutusunun üstüne taştığı için kutu yüksekliğinden fazla iner */ @keyframes u-rise { from { transform: translateY(1.45em); } } @keyframes u-wipe { from { clip-path: inset(0 100% 0 0 round 1.5rem); } to { clip-path: inset(0 0 0 0 round 1.5rem); } } @keyframes u-nudge { from { opacity: 0; transform: translateX(-.4em); } } @keyframes u-fade-up { from { opacity: 0; transform: translateY(14px); } } @keyframes u-hero-rise { from { transform: translateY(10%); } } @keyframes u-dot { from { transform: scale(0); } } /* Menü düğmesi: üç çizgi X'e dönüşür */ [data-menu-button] line { transform-box: fill-box; transform-origin: center; transition: transform .3s cubic-bezier(.4, 0, .2, 1), opacity .2s; } [data-menu-button][aria-expanded="true"] line:nth-child(1) { transform: translateY(6px) rotate(45deg); } [data-menu-button][aria-expanded="true"] line:nth-child(2) { opacity: 0; transform: scaleX(.2); } [data-menu-button][aria-expanded="true"] line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* Menü bağlantıları sırayla iner (kapanış site.js'te) */ @media (prefers-reduced-motion: no-preference) { .u-menu-panel:not([hidden]) a { animation: u-item-in .4s cubic-bezier(.2, .7, .1, 1) both; } .u-menu-panel:not([hidden]) a:nth-child(2) { animation-delay: .03s; } .u-menu-panel:not([hidden]) a:nth-child(3) { animation-delay: .06s; } .u-menu-panel:not([hidden]) a:nth-child(4) { animation-delay: .09s; } .u-menu-panel:not([hidden]) a:nth-child(5) { animation-delay: .12s; } .u-menu-panel:not([hidden]) a:nth-child(6) { animation-delay: .15s; } } @keyframes u-item-in { from { opacity: 0; transform: translateY(-8px); } } /* SSS: ok aynı eğriyle döner (cevabın açılıp kapanması site.js'te) */ [data-faq] button svg { transition-duration: .3s; transition-timing-function: cubic-bezier(.4, 0, .2, 1); } /* Kopyala: onay işareti çizilir, "Kopyalandı" yanından kayarak gelir */ .u-copy .u-ok path { stroke-dasharray: 22; } @media (prefers-reduced-motion: no-preference) { .u-copy.is-copied .u-ok path { animation: u-draw .36s cubic-bezier(.4, 0, .2, 1) .04s both; } .u-copy.is-copied::after { animation: u-tip-in .3s cubic-bezier(.2, .9, .3, 1.2) both; } } @keyframes u-draw { from { stroke-dashoffset: 22; } to { stroke-dashoffset: 0; } } @keyframes u-tip-in { from { opacity: 0; translate: -.4rem -50%; } } /* Basınca hafifçe içeri göçen düğmeler (bırakınca yumuşakça döner) */ .u-btn, .u-copy, .u-theme-toggle, .u-chip span { transition-property: background-color, border-color, color, scale; transition-duration: .2s; } @media (prefers-reduced-motion: no-preference) { :is(.u-btn, .u-copy, .u-theme-toggle, a.bg-red-600, a.bg-gray-900):active, .u-chip:active span { scale: .96; transition-duration: .08s; } } /* Yüzen arama düğmesi: mesai içindeyse yeşil nokta iki kez nabız atar, sonra durur */ @media (prefers-reduced-motion: no-preference) { .u-fab a.u-has-status.u-is-open::after { animation: u-ping 1.8s cubic-bezier(0, 0, .2, 1) 1.5s 2; } } @keyframes u-ping { from { box-shadow: 0 0 0 0 rgb(34 197 94 / .6); } to { box-shadow: 0 0 0 .6rem rgb(34 197 94 / 0); } } /* Form: eksik alan iki yana sallanır, durum mesajı aşağıdan gelir (site.js) */ /* Hizmet görselleri: kaydırdıkça yerine oturur (yalnızca kaydırmaya bağlı; içerik hiç gizlenmez) */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .space-y-24 > div > div:first-child img { animation: u-settle linear both; animation-timeline: view(); animation-range: entry 10% cover 30%; } } } @keyframes u-settle { from { scale: .9; translate: 0 2.5rem; } } /* --------------------------------------------------------------------------- Açılış perdesi: oturumun ilk sayfasında bir kez (html.u-loader-on, patch.mjs LOADER_INIT). Logo soldan belirir, altında kırmızı çizgi dolar, ardından perde iki kanat hâlinde kapı gibi açılır. Zamanlama tamamen CSS'te: JS çalışmasa bile 1,8 sn'de kendiliğinden kalkar. Tıklayınca hemen kalkar (site.js). Hareket azaltılmışsa hiç gösterilmez. Anasayfa açılışı perde açılınca başlar (--u-d). ------------------------------------------------------------------------ */ :root { --u-d: 0s; } html.u-loader-on { --u-d: 1.15s; } .u-loader { display: none; } html.u-loader-on .u-loader { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; cursor: pointer; overflow: hidden; animation: u-loader-gone 0s linear 1.8s forwards; } .u-loader-door { position: absolute; top: 0; bottom: 0; width: 50.5%; background: #fff; } .u-loader-door-l { left: 0; animation: u-door-l .7s cubic-bezier(.76, 0, .24, 1) 1.05s forwards; } .u-loader-door-r { right: 0; animation: u-door-r .7s cubic-bezier(.76, 0, .24, 1) 1.05s forwards; } .u-loader-mark { position: relative; display: grid; justify-items: center; gap: 1.1rem; animation: u-mark-out .3s ease .95s forwards; } .u-loader-mark img { width: min(62vw, 240px); height: auto; clip-path: inset(0 100% 0 0); animation: u-mark-in .7s cubic-bezier(.65, 0, .35, 1) .1s forwards; } .u-loader-line { position: relative; width: min(62vw, 240px); height: 2px; border-radius: 2px; background: #e5e7eb; overflow: hidden; } .u-loader-line::after { content: ""; position: absolute; inset: 0; background: #dc2626; transform-origin: 0 50%; transform: scaleX(0); animation: u-loader-fill .8s cubic-bezier(.65, 0, .35, 1) .15s forwards; } html[data-theme="dark"] .u-loader-door { background: var(--u-base); } html[data-theme="dark"] .u-loader-line { background: var(--u-line-2); } html[data-theme="dark"] .u-loader-line::after { background: #ef4444; } /* Tıklayınca: bütün perde hızla söner */ html.u-loader-on .u-loader.is-skipped { animation: u-loader-skip .25s ease forwards; } @keyframes u-door-l { to { transform: translateX(-100%); } } @keyframes u-door-r { to { transform: translateX(100%); } } @keyframes u-mark-in { to { clip-path: inset(0 0 0 0); } } @keyframes u-loader-fill { to { transform: scaleX(1); } } @keyframes u-mark-out { to { opacity: 0; transform: scale(.97); } } @keyframes u-loader-gone { to { visibility: hidden; } } @keyframes u-loader-skip { to { opacity: 0; visibility: hidden; } } @media print { .u-loader { display: none !important; } } /* --------------------------------------------------------------------------- Açılır liste (site.js "Açılır liste"): tarayıcının kendi listesi yerine siteye uygun liste. Asıl görünür. ------------------------------------------------------------------------ */ .u-select { position: relative; } .u-field .u-select-native { position: absolute; inset: 0; opacity: 0; pointer-events: none; } .u-select-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .75rem; text-align: left; cursor: pointer; border: 1px solid #d1d5db; border-radius: .625rem; padding: .7rem .85rem; background: #fff; color: #111827; font: inherit; transition: border-color .2s, box-shadow .2s; } .u-select-btn:hover { border-color: #9ca3af; } .u-select-btn:focus-visible { outline: 3px solid var(--u-focus); outline-offset: 1px; } .u-select.is-open .u-select-btn { border-color: #dc2626; box-shadow: 0 0 0 3px rgb(220 38 38 / .12); } .u-select-val { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .u-select-btn svg { width: 1.1rem; height: 1.1rem; flex: none; color: #6b7280; transition: transform .25s cubic-bezier(.25, .8, .25, 1), color .2s; } .u-select.is-open .u-select-btn svg { transform: rotate(180deg); color: #dc2626; } .u-select-list { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + .4rem); margin: 0; padding: .35rem; list-style: none; background: #fff; border: 1px solid #e5e7eb; border-radius: .75rem; box-shadow: 0 20px 44px -18px rgb(15 23 42 / .35); max-height: min(24rem, 60vh); overflow: auto; overscroll-behavior: contain; transform-origin: 50% 0; } .u-select.is-up .u-select-list { top: auto; bottom: calc(100% + .4rem); transform-origin: 50% 100%; } .u-select-list[hidden] { display: none; } .u-select-opt { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .6rem .7rem; border-radius: .5rem; color: #374151; cursor: pointer; user-select: none; transition: background-color .12s, color .12s; } .u-select-opt.is-active { background: #fef2f2; color: #b91c1c; } .u-select-opt[aria-selected="true"] { font-weight: 700; color: #111827; } .u-select-opt[aria-selected="true"].is-active { color: #b91c1c; } .u-select-opt svg { width: 1rem; height: 1rem; flex: none; color: #dc2626; visibility: hidden; } .u-select-opt[aria-selected="true"] svg { visibility: visible; } html[data-theme="dark"] .u-select-btn { background: var(--u-card); color: var(--u-ink); border-color: var(--u-line-2); } html[data-theme="dark"] .u-select-btn:hover { border-color: var(--u-ink-4); } html[data-theme="dark"] .u-select.is-open .u-select-btn { border-color: #f87171; box-shadow: 0 0 0 3px rgb(248 113 113 / .15); } html[data-theme="dark"] .u-select-btn svg { color: var(--u-ink-4); } html[data-theme="dark"] .u-select.is-open .u-select-btn svg { color: #f87171; } html[data-theme="dark"] .u-select-list { background: var(--u-card-2); border-color: var(--u-line-2); box-shadow: 0 22px 48px -18px rgb(0 0 0 / .8); } html[data-theme="dark"] .u-select-opt { color: var(--u-ink-2); } html[data-theme="dark"] .u-select-opt.is-active { background: rgb(220 38 39 / .16); color: #fca5a5; } html[data-theme="dark"] .u-select-opt[aria-selected="true"] { color: var(--u-ink); } html[data-theme="dark"] .u-select-opt[aria-selected="true"].is-active { color: #fca5a5; } html[data-theme="dark"] .u-select-opt svg { color: #f87171; }