/* ===================================================================== OTOKOD — Tasarim sistemi (koyu tema) --------------------------------------------------------------------- Performans kurallari (Sartname 19.2 + Core Web Vitals): - Web fontu YOK. Sistem yazi tipi yigini kullanilir. - Tum animasyonlar yalnizca transform/opacity uzerinden calisir; boylece yerlesim (layout) ve boyama (paint) tetiklenmez. - Kritik CSS icine gomulur, bu dosya asenkron yuklenir. - prefers-reduced-motion: reduce tum hareketi kapatir. ===================================================================== */ /* --- Belirtecler ---------------------------------------------------- */ :root { color-scheme: dark; /* Zemin katmanlari */ --zemin: #070910; --zemin-2: #0B0F18; --yuzey: #10151F; --yuzey-2: #161C28; --yuzey-3: #1D2533; /* Cam yuzeyler */ --cam: rgba(255, 255, 255, .035); --cam-guclu: rgba(255, 255, 255, .06); --kenarlik: rgba(255, 255, 255, .09); --kenarlik-2: rgba(255, 255, 255, .14); /* Metin */ --metin: #E9EFF8; --metin-2: #97A6BC; --metin-3: #64748B; /* Marka */ --vurgu: #4C8DFF; --vurgu-2: #7C5CFF; --vurgu-3: #22D3EE; --vurgu-metin: #05070C; --vurgu-yumusak: rgba(76, 141, 255, .14); /* Durum */ --basarili: #34D399; --basarili-zemin: rgba(52, 211, 153, .12); --uyari: #FBBF24; --uyari-zemin: rgba(251, 191, 36, .12); --hata: #FB7185; --hata-zemin: rgba(251, 113, 133, .12); /* Bicim */ --kose: 18px; --kose-orta: 13px; --kose-kucuk: 10px; --golge: 0 1px 2px rgba(0,0,0,.5), 0 12px 32px -12px rgba(0,0,0,.7); --golge-buyuk: 0 30px 80px -30px rgba(0,0,0,.9); --parilti: 0 0 0 1px rgba(255,255,255,.06), 0 0 40px -12px rgba(76,141,255,.5); --yazi: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --genislik: 1160px; --gecis: 220ms cubic-bezier(.22, .61, .36, 1); --yay: 420ms cubic-bezier(.34, 1.56, .64, 1); } /* --- Sifirlama ve taban --------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; } body { margin: 0; min-height: 100dvh; font-family: var(--yazi); font-size: 16px; line-height: 1.65; color: var(--metin); background: var(--zemin); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } /* Aurora zemin — tek bir sabit katman, GPU'da kalir, scroll'u etkilemez */ body::before { content: ""; position: fixed; inset: -20% -20% auto -20%; height: 90vh; z-index: -2; pointer-events: none; background: radial-gradient(42% 46% at 18% 8%, rgba(124, 92, 255, .22), transparent 70%), radial-gradient(46% 44% at 82% 4%, rgba(34, 211, 238, .16), transparent 72%), radial-gradient(50% 50% at 50% 30%, rgba(76, 141, 255, .18), transparent 75%); filter: blur(20px); animation: aurora 22s ease-in-out infinite alternate; } /* Ince izgara dokusu — derinlik hissi verir, 0 bayt gorsel maliyeti */ body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5; background-image: linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 20%, transparent 78%); } h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.15; letter-spacing: -.03em; font-weight: 700; text-wrap: balance; } h1 { font-size: clamp(2rem, 1.2rem + 3.4vw, 3.75rem); letter-spacing: -.04em; } h2 { font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.35rem); } h3 { font-size: clamp(1.05rem, .98rem + .35vw, 1.25rem); } p { margin: 0 0 1em; text-wrap: pretty; } a { color: var(--vurgu); text-decoration: none; transition: color var(--gecis); } a:hover { color: #7FB0FF; } img, svg, video { max-width: 100%; height: auto; display: block; } hr { border: 0; border-top: 1px solid var(--kenarlik); margin: 28px 0; } ::selection { background: rgba(76,141,255,.32); color: #fff; } :focus-visible { outline: 2px solid var(--vurgu); outline-offset: 3px; border-radius: 6px; } /* --- Yerlesim -------------------------------------------------------- */ .kapsayici { width: 100%; max-width: var(--genislik); margin: 0 auto; padding: 0 20px; } .dar { max-width: 680px; } .orta { text-align: center; } .bolum { padding: clamp(48px, 8vw, 96px) 0; position: relative; } /* Ekran disindaki bolumler cizilmez -> LCP ve TBT duser */ .bolum:not(.kahraman) { content-visibility: auto; contain-intrinsic-size: auto 520px; } .bolum-baslik { max-width: 640px; margin: 0 auto clamp(32px, 5vw, 56px); text-align: center; } .bolum-baslik p { color: var(--metin-2); font-size: clamp(1rem, .95rem + .3vw, 1.15rem); margin: 0; } .gizli { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .atla { position: fixed; top: 8px; left: 8px; z-index: 100; transform: translateY(-200%); background: var(--vurgu); color: var(--vurgu-metin); padding: 10px 18px; border-radius: var(--kose-kucuk); font-weight: 600; } .atla:focus { transform: translateY(0); } /* --- Gradyan metin --------------------------------------------------- */ .gradyan { background: linear-gradient(102deg, var(--vurgu-3) 0%, var(--vurgu) 42%, var(--vurgu-2) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 220% 100%; animation: gradyanKay 9s ease-in-out infinite; } /* --- Dugmeler -------------------------------------------------------- */ .dugme { --dugme-zemin: linear-gradient(135deg, var(--vurgu) 0%, var(--vurgu-2) 100%); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 12px 22px; border: 1px solid transparent; border-radius: 999px; background: var(--dugme-zemin); color: #fff; font: 600 15px/1 var(--yazi); cursor: pointer; text-decoration: none; white-space: nowrap; isolation: isolate; overflow: hidden; box-shadow: 0 6px 20px -8px rgba(76,141,255,.9); transition: transform var(--gecis), box-shadow var(--gecis), background var(--gecis), border-color var(--gecis); } /* Uzerine gelince kayan parilti — pseudo eleman, ek DOM yok */ .dugme::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(120deg, transparent 25%, rgba(255,255,255,.28) 50%, transparent 75%); background-size: 250% 100%; background-position: 150% 0; transition: background-position 620ms ease; } .dugme:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -10px rgba(76,141,255,1); color: #fff; } .dugme:hover::after { background-position: -50% 0; } .dugme:active { transform: translateY(0) scale(.985); } .dugme[disabled], .dugme.pasif { opacity: .45; pointer-events: none; } .dugme.ikincil { background: var(--cam); color: var(--metin); border-color: var(--kenarlik); box-shadow: none; backdrop-filter: blur(10px); } .dugme.ikincil:hover { background: var(--cam-guclu); border-color: var(--kenarlik-2); color: #fff; box-shadow: none; } .dugme.sade { background: none; color: var(--metin-2); box-shadow: none; padding: 9px 14px; } .dugme.sade:hover { background: var(--cam); color: var(--metin); } .dugme.tehlike { background: linear-gradient(135deg, #F43F5E, #BE123C); box-shadow: 0 6px 20px -8px rgba(244,63,94,.9); } .dugme.buyuk { min-height: 56px; padding: 16px 30px; font-size: 16.5px; } .dugme.kucuk { min-height: 36px; padding: 8px 15px; font-size: 13.5px; gap: 6px; } .dugme.tam { width: 100%; } .dugme .ikon { width: 18px; height: 18px; flex: none; } /* --- Kartlar --------------------------------------------------------- */ .kart { position: relative; background: linear-gradient(180deg, var(--cam-guclu), var(--cam)); border: 1px solid var(--kenarlik); border-radius: var(--kose); padding: clamp(20px, 3vw, 28px); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--golge); } .kart + .kart { margin-top: 16px; } .kart-baslik { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; } .kart-baslik > :is(h2, h3) { margin: 0; } /* Ust kenarda ince isik cizgisi — cam hissini tamamlar */ .kart::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent); border-radius: var(--kose) var(--kose) 0 0; } .kart.vurgulu { border-color: rgba(76,141,255,.42); box-shadow: var(--parilti), var(--golge); } .kart.tehlike-bolge { border-color: rgba(251,113,133,.3); background: linear-gradient(180deg, rgba(251,113,133,.07), var(--cam)); } .kart.tehlike-bolge h3 { color: var(--hata); } /* Etkilesimli kart: isaretciyi izleyen isik + hafif kalkma */ .kart--etkilesimli { transition: transform var(--gecis), border-color var(--gecis); } .kart--etkilesimli::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity var(--gecis); background: radial-gradient(320px circle at var(--fare-x, 50%) var(--fare-y, 0%), rgba(76,141,255,.13), transparent 62%); } .kart--etkilesimli:hover { transform: translateY(-4px); border-color: var(--kenarlik-2); } .kart--etkilesimli:hover::after { opacity: 1; } /* --- Formlar --------------------------------------------------------- */ .alan { margin-bottom: 18px; } .alan label, .etiket { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 7px; color: var(--metin); letter-spacing: -.01em; } .alan .ipucu { display: block; font-weight: 400; font-size: 13px; color: var(--metin-3); margin-top: 7px; line-height: 1.5; } input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], input[type="search"], input[type="time"], input[type="url"], input[type="date"], select, textarea { width: 100%; padding: 13px 15px; /* 16px altina inmez: iOS Safari otomatik yakinlastirmayi boyle onleriz */ font: 16px/1.45 var(--yazi); color: var(--metin); background: rgba(0,0,0,.28); border: 1px solid var(--kenarlik); border-radius: var(--kose-orta); transition: border-color var(--gecis), box-shadow var(--gecis), background var(--gecis); -webkit-appearance: none; appearance: none; } input::placeholder, textarea::placeholder { color: var(--metin-3); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--vurgu); background: rgba(0,0,0,.4); box-shadow: 0 0 0 4px var(--vurgu-yumusak); } textarea { resize: vertical; min-height: 104px; } select { background-image: linear-gradient(45deg, transparent 50%, var(--metin-2) 50%), linear-gradient(135deg, var(--metin-2) 50%, transparent 50%); background-position: calc(100% - 19px) 21px, calc(100% - 14px) 21px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 40px; } input.hatali, select.hatali, textarea.hatali { border-color: var(--hata); background: var(--hata-zemin); } .alan-hata { color: var(--hata); font-size: 13px; margin-top: 7px; font-weight: 500; } .onay { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; line-height: 1.55; cursor: pointer; padding: 12px 14px; border-radius: var(--kose-orta); border: 1px solid transparent; transition: background var(--gecis), border-color var(--gecis); } .onay:hover { background: var(--cam); border-color: var(--kenarlik); } .onay input[type="checkbox"] { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--vurgu); cursor: pointer; } .onay + .onay { margin-top: 4px; } .ikili { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .uclu { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } @media (max-width: 640px) { .ikili, .uclu { grid-template-columns: 1fr; } } /* Bal kupu — hem gorsel hem ekran okuyucu icin gizli (Sartname 16.1) */ .bal-kupu { position: absolute !important; left: -9999px !important; opacity: 0; height: 0; width: 0; } /* --- Bildirimler ----------------------------------------------------- */ .bildirim { display: flex; gap: 11px; align-items: flex-start; padding: 14px 17px; border-radius: var(--kose-orta); margin-bottom: 16px; font-size: 14.5px; line-height: 1.55; border: 1px solid var(--kenarlik); background: var(--cam); animation: kayGir 380ms cubic-bezier(.22,.61,.36,1) both; } .bildirim .ikon { flex: none; width: 19px; height: 19px; margin-top: 1px; } .bildirim.basarili { background: var(--basarili-zemin); border-color: rgba(52,211,153,.32); color: #A7F3D0; } .bildirim.hata { background: var(--hata-zemin); border-color: rgba(251,113,133,.32); color: #FECDD3; } .bildirim.uyari { background: var(--uyari-zemin); border-color: rgba(251,191,36,.32); color: #FDE68A; } .bildirim.bilgi { background: var(--vurgu-yumusak); border-color: rgba(76,141,255,.32); color: #BFDBFE; } .bildirim a { color: inherit; text-decoration: underline; } /* --- Rozetler -------------------------------------------------------- */ .rozet { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; letter-spacing: -.01em; background: var(--cam-guclu); color: var(--metin-2); border: 1px solid var(--kenarlik); white-space: nowrap; } .rozet .ikon { width: 13px; height: 13px; } .rozet.yesil { background: var(--basarili-zemin); color: var(--basarili); border-color: rgba(52,211,153,.3); } .rozet.sari { background: var(--uyari-zemin); color: var(--uyari); border-color: rgba(251,191,36,.3); } .rozet.kirmizi { background: var(--hata-zemin); color: var(--hata); border-color: rgba(251,113,133,.3); } .rozet.mavi { background: var(--vurgu-yumusak); color: #93C5FD; border-color: rgba(76,141,255,.3); } .rozet.premium { background: linear-gradient(120deg, var(--vurgu-2), var(--vurgu)); color: #fff; border-color: transparent; box-shadow: 0 3px 14px -5px rgba(124,92,255,.9); } /* Canli nokta — bekleyen/aktif durum gostergesi */ .nokta { width: 7px; height: 7px; border-radius: 50%; flex: none; background: currentColor; box-shadow: 0 0 0 0 currentColor; animation: nabizHalka 2.2s ease-out infinite; } /* --- Kod ve tablolar -------------------------------------------------- */ code, .kod { font: 13px/1.5 var(--mono); background: rgba(0,0,0,.4); border: 1px solid var(--kenarlik); padding: 2px 7px; border-radius: 6px; color: #A5C8FF; } .tablo-sarmal { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -4px; padding: 0 4px; } table.veri { width: 100%; border-collapse: collapse; font-size: 14.5px; } table.veri th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--metin-3); font-weight: 700; padding: 11px 12px; border-bottom: 1px solid var(--kenarlik); white-space: nowrap; } table.veri td { padding: 13px 12px; border-bottom: 1px solid rgba(255,255,255,.05); vertical-align: middle; } table.veri tr:last-child td { border-bottom: 0; } table.veri tbody tr { transition: background var(--gecis); } table.veri tbody tr:hover td { background: var(--cam); } .tek-satir { white-space: nowrap; } /* --- Ust bar --------------------------------------------------------- */ .ust-bar { position: sticky; top: 0; z-index: 50; background: rgba(7, 9, 16, .72); 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-bar.kaydirildi { border-bottom-color: var(--kenarlik); background: rgba(7, 9, 16, .88); } .ust-ic { display: flex; align-items: center; gap: 20px; height: 68px; } .marka { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; font-size: 19px; letter-spacing: -.045em; color: var(--metin); text-decoration: none; } .marka:hover { color: var(--metin); } .marka b { font-weight: 800; background: linear-gradient(120deg, var(--vurgu-3), var(--vurgu), var(--vurgu-2)); -webkit-background-clip: text; background-clip: text; color: transparent; } .marka-isaret { width: 30px; height: 30px; flex: none; border-radius: 9px; display: grid; place-items: center; background: linear-gradient(135deg, var(--vurgu), var(--vurgu-2)); color: #fff; box-shadow: 0 4px 14px -5px rgba(76,141,255,.9); } .marka-isaret .ikon { width: 17px; height: 17px; } .ust-menu { display: flex; align-items: center; gap: 6px; margin-left: auto; } .ust-menu > a:not(.dugme) { color: var(--metin-2); font-size: 14.5px; font-weight: 500; padding: 9px 13px; border-radius: 999px; transition: color var(--gecis), background var(--gecis); } .ust-menu > a:not(.dugme):hover, .ust-menu > a.aktif { color: var(--metin); background: var(--cam); } @media (max-width: 860px) { .ust-menu .masaustu-gizle { display: none; } } /* --- Mobil alt cubuk (uygulama hissi) --------------------------------- */ .alt-cubuk { display: none; } @media (max-width: 860px) { .alt-cubuk { display: grid; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; grid-auto-flow: column; grid-auto-columns: 1fr; background: rgba(11, 15, 24, .9); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-top: 1px solid var(--kenarlik); padding: 8px 6px calc(8px + env(safe-area-inset-bottom)); } .alt-cubuk a { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 4px; border-radius: 12px; color: var(--metin-3); font-size: 10.5px; font-weight: 600; letter-spacing: -.01em; text-decoration: none; transition: color var(--gecis), background var(--gecis), transform var(--gecis); } .alt-cubuk a .ikon { width: 21px; height: 21px; } .alt-cubuk a.aktif { color: var(--vurgu); background: var(--vurgu-yumusak); } .alt-cubuk a:active { transform: scale(.92); } /* Alt cubuk icerigi ortmesin */ body { padding-bottom: calc(66px + env(safe-area-inset-bottom)); } } /* --- Kahraman bolumu -------------------------------------------------- */ .kahraman { padding: clamp(56px, 9vw, 108px) 0 clamp(48px, 7vw, 88px); } .kahraman-izgara { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(32px, 5vw, 64px); align-items: center; } @media (max-width: 900px) { .kahraman-izgara { grid-template-columns: 1fr; } } .kahraman h1 { max-width: 16ch; margin-bottom: 20px; } .kahraman .giris { font-size: clamp(1.02rem, .96rem + .5vw, 1.2rem); color: var(--metin-2); max-width: 52ch; margin-bottom: 30px; } .kahraman-eylemler { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; } /* Etiket onizlemesi — 3B egim + tarama cizgisi */ .etiket-sahne { perspective: 1000px; display: grid; place-items: center; } .etiket-onizleme { position: relative; width: min(300px, 82vw); padding: 26px; border-radius: 26px; text-align: center; background: linear-gradient(165deg, rgba(255,255,255,.1), rgba(255,255,255,.03)); border: 1px solid var(--kenarlik-2); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: var(--golge-buyuk), inset 0 1px 0 rgba(255,255,255,.14); transform: rotateX(6deg) rotateY(-9deg); animation: etiketSuzul 7s ease-in-out infinite alternate; transform-style: preserve-3d; } .etiket-onizleme .qr-kutu { position: relative; width: 168px; height: 168px; margin: 0 auto 16px; padding: 11px; border-radius: 14px; background: #fff; overflow: hidden; } .etiket-onizleme .qr-kutu svg { width: 100%; height: 100%; } /* Tarama cizgisi: QR'in okutuldugunu anlatir */ .etiket-onizleme .qr-kutu::after { content: ""; position: absolute; left: 0; right: 0; height: 42%; background: linear-gradient(180deg, transparent, rgba(76,141,255,.5), transparent); animation: tara 2.8s cubic-bezier(.5,0,.5,1) infinite; } .etiket-onizleme .kod-metni { font: 700 21px/1 var(--mono); letter-spacing: .16em; margin-bottom: 8px; color: var(--metin); } .etiket-onizleme .ibare { font-size: 12.5px; color: var(--metin-2); margin: 0; line-height: 1.5; } .etiket-onizleme .ibare strong { color: var(--metin); } /* Kahraman altindaki guven satiri */ .guven-satiri { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; font-size: 13px; color: var(--metin-3); margin: 0; } .guven-satiri span { display: inline-flex; align-items: center; gap: 6px; } .guven-satiri .ikon { width: 15px; height: 15px; color: var(--basarili); } /* --- Ozellik izgarasi ------------------------------------------------- */ .ozellikler { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } @media (max-width: 980px) { .ozellikler { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .ozellikler { grid-template-columns: 1fr; } } .ozellik h3 { margin-bottom: 8px; } .ozellik p { color: var(--metin-2); font-size: 14.8px; margin: 0; } .ozellik-simge { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 16px; border-radius: 14px; color: var(--vurgu); background: var(--vurgu-yumusak); border: 1px solid rgba(76,141,255,.24); transition: transform var(--yay), background var(--gecis); } .kart--etkilesimli:hover .ozellik-simge { transform: translateY(-3px) scale(1.07) rotate(-4deg); } .ozellik-simge .ikon { width: 23px; height: 23px; } .ozellik-simge.mor { color: var(--vurgu-2); background: rgba(124,92,255,.14); border-color: rgba(124,92,255,.24); } .ozellik-simge.camgobegi { color: var(--vurgu-3); background: rgba(34,211,238,.13); border-color: rgba(34,211,238,.24); } .ozellik-simge.yesil { color: var(--basarili); background: var(--basarili-zemin); border-color: rgba(52,211,153,.24); } .ozellik-simge.sari { color: var(--uyari); background: var(--uyari-zemin); border-color: rgba(251,191,36,.24); } .ozellik-simge.kirmizi { color: var(--hata); background: var(--hata-zemin); border-color: rgba(251,113,133,.24); } /* --- Adim listesi ------------------------------------------------------ */ .adimlar-liste { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: adim; } @media (max-width: 880px) { .adimlar-liste { grid-template-columns: 1fr; } } .adim { position: relative; padding-left: 58px; } .adim::before { counter-increment: adim; content: counter(adim, decimal-leading-zero); position: absolute; left: 0; top: 2px; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; font: 700 14px/1 var(--mono); color: var(--vurgu); background: var(--vurgu-yumusak); border: 1px solid rgba(76,141,255,.26); } .adim h3 { margin-bottom: 6px; } .adim p { color: var(--metin-2); font-size: 14.8px; margin: 0; } /* Adimlari birlestiren dikey/yatay cizgi */ .adimlar-liste .adim:not(:last-child)::after { content: ""; position: absolute; left: 21px; top: 52px; bottom: -20px; width: 1px; background: linear-gradient(180deg, var(--kenarlik), transparent); } @media (min-width: 881px) { .adimlar-liste .adim:not(:last-child)::after { left: 50px; top: 22px; bottom: auto; right: -20px; width: auto; height: 1px; background: linear-gradient(90deg, var(--kenarlik), transparent); } } /* --- Fiyat kartlari ---------------------------------------------------- */ .fiyat-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(266px, 1fr)); gap: 18px; align-items: start; } .fiyat-kart { display: flex; flex-direction: column; height: 100%; } .fiyat-kart .tutar { font-size: clamp(2rem, 1.6rem + 1.4vw, 2.6rem); font-weight: 800; letter-spacing: -.04em; margin: 10px 0 2px; line-height: 1; } .fiyat-kart .donem { color: var(--metin-3); font-size: 13.5px; margin-bottom: 22px; } .fiyat-kart ul { list-style: none; padding: 0; margin: 0 0 24px; flex: 1; } .fiyat-kart li { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; font-size: 14.5px; color: var(--metin-2); } .fiyat-kart li .ikon { width: 17px; height: 17px; flex: none; margin-top: 3px; color: var(--basarili); } .fiyat-kart li.yok { color: var(--metin-3); } .fiyat-kart li.yok .ikon { color: var(--metin-3); } /* --- SSS akordeonu ------------------------------------------------------ */ details.sss { border: 1px solid var(--kenarlik); border-radius: var(--kose-orta); background: var(--cam); margin-bottom: 10px; overflow: hidden; transition: border-color var(--gecis), background var(--gecis); } details.sss:hover { border-color: var(--kenarlik-2); } details.sss[open] { background: var(--cam-guclu); border-color: rgba(76,141,255,.28); } details.sss summary { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 17px 20px; font-weight: 600; font-size: 15.5px; cursor: pointer; list-style: none; } details.sss summary::-webkit-details-marker { display: none; } details.sss summary .ikon { width: 19px; height: 19px; flex: none; color: var(--metin-3); transition: transform var(--yay), color var(--gecis); } details.sss[open] summary .ikon { transform: rotate(90deg); color: var(--vurgu); } details.sss .govde { padding: 0 20px 19px; } details.sss p { margin: 0; color: var(--metin-2); font-size: 14.8px; } details.sss[open] .govde { animation: acil 300ms cubic-bezier(.22,.61,.36,1) both; } /* --- Kimlik sayfalari (giris / kayit) ----------------------------------- */ .kimlik-sayfa { min-height: calc(100dvh - 68px); display: grid; place-items: center; padding: 40px 20px 64px; } .kimlik-kutu { width: 100%; max-width: 452px; } .kimlik-kutu .kart { padding: clamp(24px, 4vw, 34px); } .kimlik-kutu h1 { font-size: clamp(1.5rem, 1.3rem + .9vw, 1.85rem); margin-bottom: 8px; } .kimlik-kutu .alt-metin { color: var(--metin-2); font-size: 14.8px; margin-bottom: 26px; } .kimlik-alt { text-align: center; margin-top: 22px; font-size: 14.5px; color: var(--metin-2); } /* --- Sozlesme metinleri ------------------------------------------------- */ .metin-sayfa { max-width: 760px; } .metin-sayfa h2 { font-size: 1.3rem; margin-top: 36px; padding-top: 4px; } .metin-sayfa h2:first-of-type { margin-top: 0; } .metin-sayfa h3 { font-size: 1.05rem; margin-top: 24px; color: var(--metin); } .metin-sayfa p, .metin-sayfa li { color: var(--metin-2); } .metin-sayfa ul, .metin-sayfa ol { padding-left: 22px; } .metin-sayfa li { margin-bottom: 9px; } .metin-sayfa strong { color: var(--metin); } .sozlesme-menu { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; } .sozlesme-menu a { font-size: 13px; padding: 8px 14px; border-radius: 999px; background: var(--cam); border: 1px solid var(--kenarlik); color: var(--metin-2); transition: all var(--gecis); } .sozlesme-menu a:hover { border-color: var(--kenarlik-2); color: var(--metin); } .sozlesme-menu a.aktif { background: linear-gradient(135deg, var(--vurgu), var(--vurgu-2)); border-color: transparent; color: #fff; } /* --- Alt bilgi ---------------------------------------------------------- */ .alt-bilgi { border-top: 1px solid var(--kenarlik); background: linear-gradient(180deg, transparent, rgba(0,0,0,.35)); padding: clamp(40px, 6vw, 64px) 0 34px; margin-top: clamp(48px, 8vw, 96px); } .alt-izgara { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 34px; } @media (max-width: 820px) { .alt-izgara { grid-template-columns: 1fr 1fr; gap: 28px; } } .alt-bilgi h4 { font-size: 11.5px; text-transform: uppercase; letter-spacing: .09em; color: var(--metin-3); margin-bottom: 14px; font-weight: 700; } .alt-bilgi ul { list-style: none; padding: 0; margin: 0; } .alt-bilgi li { margin-bottom: 9px; } .alt-bilgi a { color: var(--metin-2); font-size: 14.3px; } .alt-bilgi a:hover { color: var(--metin); } .alt-satir { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--kenarlik); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--metin-3); } /* --- Hata sayfalari ------------------------------------------------------ */ .hata-sayfa { min-height: 72dvh; display: grid; place-items: center; text-align: center; padding: 60px 20px; } .hata-sayfa .hata-kod { font: 800 clamp(4rem, 3rem + 8vw, 7rem)/1 var(--yazi); letter-spacing: -.06em; background: linear-gradient(160deg, var(--metin-2), transparent 88%); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 4px; } .hata-sayfa p { color: var(--metin-2); max-width: 46ch; margin: 0 auto 26px; } /* --- Kaydirma cubugu ----------------------------------------------------- */ ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: var(--zemin); } ::-webkit-scrollbar-thumb { background: #212B3B; border-radius: 99px; border: 3px solid var(--zemin); } ::-webkit-scrollbar-thumb:hover { background: #2E3A4D; } /* ===================================================================== ANIMASYONLAR Yalnizca transform/opacity kullanilir -> compositor katmaninda kalir, ana is parcacigini (main thread) mesgul etmez, CLS uretmez. ===================================================================== */ @keyframes aurora { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-2%, 2%, 0) scale(1.06); } 100% { transform: translate3d(2%, -1%, 0) scale(1.02); } } @keyframes gradyanKay { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @keyframes tara { 0% { transform: translateY(-120%); } 100% { transform: translateY(340%); } } @keyframes etiketSuzul { 0% { transform: rotateX(6deg) rotateY(-9deg) translateY(0); } 100% { transform: rotateX(2deg) rotateY(6deg) translateY(-14px); } } @keyframes kayGir { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } @keyframes acil { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } @keyframes nabizHalka { 0% { box-shadow: 0 0 0 0 currentColor; opacity: 1; } 70% { box-shadow: 0 0 0 7px transparent; opacity: .75; } 100% { box-shadow: 0 0 0 0 transparent; opacity: 1; } } @keyframes cizil { to { stroke-dashoffset: 0; } } @keyframes nabiz { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.13); } } @keyframes suzul { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } @keyframes don { to { transform: rotate(360deg); } } @keyframes salla { 0%, 88%, 100% { transform: rotate(0); } 92% { transform: rotate(11deg); } 96% { transform: rotate(-11deg); } } @keyframes ziple { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-5px); } 60% { transform: translateY(-2px); } } @keyframes parlama { 0% { background-position: -160% 0; } 100% { background-position: 260% 0; } } /* --- Ikon animasyonlari --------------------------------------------- */ .ikon { display: inline-block; vertical-align: middle; flex: none; } .ikon--nabiz { animation: nabiz 2.4s ease-in-out infinite; } .ikon--suzul { animation: suzul 3.2s ease-in-out infinite; } .ikon--don { animation: don 1.1s linear infinite; } .ikon--salla { animation: salla 3.6s ease-in-out infinite; transform-origin: 50% 15%; } .ikon--ziple { animation: ziple 2.6s ease-in-out infinite; } /* Cizilme animasyonu: yol uzunlugu pathLength ile normalize edilmez, bu yuzden bol bir dasharray verilir; tum ikonlar icin yeterlidir. */ .ikon--ciz :is(path, circle, rect, line, polyline) { stroke-dasharray: 120; stroke-dashoffset: 120; animation: cizil 1.5s cubic-bezier(.55, 0, .25, 1) forwards; } .ikon--ciz :nth-child(2) { animation-delay: .16s; } .ikon--ciz :nth-child(3) { animation-delay: .32s; } .ikon--ciz :nth-child(4) { animation-delay: .48s; } /* --- Kaydirmayla ortaya cikma ---------------------------------------- */ /* JS yoksa icerik gorunur kalir: .js sinifi yalnizca betik calisirsa eklenir */ .js .beliren { opacity: 0; transform: translateY(22px); transition: opacity 620ms cubic-bezier(.22,.61,.36,1), transform 620ms cubic-bezier(.22,.61,.36,1); transition-delay: var(--gecikme, 0ms); } .js .beliren.gorunur { opacity: 1; transform: none; } /* Iskelet parlamasi */ .iskelet { background: linear-gradient(90deg, var(--cam) 25%, var(--cam-guclu) 50%, var(--cam) 75%); background-size: 220% 100%; animation: parlama 1.5s linear infinite; border-radius: var(--kose-kucuk); } /* --- Erisilebilirlik: hareket azaltma --------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .js .beliren { opacity: 1; transform: none; } .ikon--ciz :is(path, circle, rect, line, polyline) { stroke-dashoffset: 0; } } @media print { .ust-bar, .alt-bilgi, .alt-cubuk, .dugme { display: none !important; } body { background: #fff; color: #000; } body::before, body::after { display: none; } }