/* OPPLINKX — ozel stiller (Tailwind CDN ustune) */ /* * Yatay tasma korumasi. * * tech.md TailwindCSS'i CDN olarak zorunlu kiliyor; CDN surumu stilleri * calisma aninda uretir, bu yuzden ilk yuklemede kisa bir an duzen henuz * uygulanmamis olabiliyor (olculdu: mobilde gecici 70-85px tasma). * "clip" kullaniyoruz — "hidden" olsaydi kaydirma kabi olusturur ve * ust bardaki position:sticky bozulurdu. */ html, body{ max-width:100%; overflow-x:clip; } /* Uzun kirilmayan metinler (IBAN, e-posta, URL, kod) kabini zorlamasin */ .opx-card, .opx-table td, .opx-table th{ overflow-wrap:anywhere; } pre{ max-width:100%; } /* Arka plan atmosferi: koyu zemin + neon parilti */ .opx-bg{ position:fixed; inset:0; z-index:-1; pointer-events:none; background: radial-gradient(60rem 40rem at 15% -10%, rgba(34,197,94,.10), transparent 60%), radial-gradient(50rem 35rem at 90% 0%, rgba(56,189,248,.07), transparent 55%), #050810; } /* Cam efektli kart */ .opx-card{ background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.07); border-radius: 1rem; backdrop-filter: blur(12px); } .opx-card-hover:hover{ border-color: rgba(34,197,94,.28); background: rgba(255,255,255,.04); } /* Form ogeleri * * OZGULLUK NOTU: Tailwind CDN'in "forms" eklentisi [type='email'] gibi * OZNITELIK seciciyle background:#fff basiyor ve calisma aninda 'e * enjekte edildigi icin bizim 'imizden SONRA geliyor. Ayni ozgullukte * (0,1,0) sonra gelen kazandigi icin input'lar BEYAZ kaliyordu. * Sinifi ikiye katlayarak ozgullugu (0,2,0) yapiyoruz — !important gerekmez. */ .opx-input.opx-input, .opx-select.opx-select, .opx-textarea.opx-textarea, .opx-input, .opx-select, .opx-textarea{ width:100%; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10); border-radius: .75rem; padding: .625rem .875rem; color: #e2e8f0; font-size: .875rem; transition: border-color .15s, box-shadow .15s; } .opx-input::placeholder, .opx-textarea::placeholder{ color:#64748b; } .opx-input.opx-input:focus, .opx-select.opx-select:focus, .opx-textarea.opx-textarea:focus, .opx-input:focus, .opx-select:focus, .opx-textarea:focus{ outline:none; border-color: rgba(34,197,94,.55); box-shadow: 0 0 0 3px rgba(34,197,94,.14); } .opx-select option{ background:#0a0f1c; color:#e2e8f0; } .opx-label{ display:block; font-size:.75rem; font-weight:500; color:#94a3b8; margin-bottom:.375rem; } .opx-help{ font-size:.6875rem; color:#64748b; margin-top:.25rem; } /* Butonlar */ .opx-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.625rem 1rem; border-radius:.75rem; font-size:.875rem; font-weight:600; transition:.15s; cursor:pointer; border:1px solid transparent; white-space:nowrap; } .opx-btn-primary{ background:#22c55e; color:#050810; box-shadow:0 0 30px -8px rgba(34,197,94,.35); } .opx-btn-primary:hover{ background:#4ade80; } .opx-btn-ghost{ background:rgba(255,255,255,.05); color:#cbd5e1; border-color:rgba(255,255,255,.10); } .opx-btn-ghost:hover{ background:rgba(255,255,255,.09); color:#fff; } .opx-btn-danger{ background:rgba(244,63,94,.12); color:#fda4af; border-color:rgba(244,63,94,.25); } .opx-btn-danger:hover{ background:rgba(244,63,94,.2); } .opx-btn-sm{ padding:.375rem .75rem; font-size:.75rem; border-radius:.5rem; } .opx-btn:disabled{ opacity:.45; cursor:not-allowed; } /* Tablo */ .opx-table{ width:100%; font-size:.875rem; border-collapse:separate; border-spacing:0; } .opx-table thead th{ text-align:left; font-size:.6875rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:#64748b; padding:.625rem .875rem; border-bottom:1px solid rgba(255,255,255,.07); white-space:nowrap; } .opx-table tbody td{ padding:.75rem .875rem; border-bottom:1px solid rgba(255,255,255,.045); color:#cbd5e1; } .opx-table tbody tr:last-child td{ border-bottom:0; } .opx-table tbody tr:hover td{ background:rgba(255,255,255,.02); } .opx-table .num{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; } /* Tablo kaydirma kabi — yatay tasma sayfayi degil kendini kaydirir */ .opx-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; } /* Zaman cizelgesi */ .opx-timeline{ position:relative; padding-left:1.75rem; } .opx-timeline::before{ content:''; position:absolute; left:.4375rem; top:.5rem; bottom:.5rem; width:2px; background:linear-gradient(180deg, rgba(34,197,94,.5), rgba(255,255,255,.07)); } .opx-timeline-dot{ position:absolute; left:0; width:1rem; height:1rem; border-radius:9999px; border:2px solid #050810; background:#22c55e; } /* Ilerleme cubugu */ .opx-progress{ height:.375rem; border-radius:9999px; background:rgba(255,255,255,.07); overflow:hidden; } .opx-progress > span{ display:block; height:100%; border-radius:9999px; background:linear-gradient(90deg,#22c55e,#4ade80); } /* Mobil: tablolari kart gorunumune cevirme yardimcisi */ @media (max-width: 640px){ .opx-stack-sm thead{ display:none; } .opx-stack-sm tbody tr{ display:block; padding:.75rem 0; border-bottom:1px solid rgba(255,255,255,.06); } .opx-stack-sm tbody td{ display:flex; justify-content:space-between; gap:1rem; padding:.3125rem .875rem; border:0; text-align:right; } .opx-stack-sm tbody td::before{ content:attr(data-label); color:#64748b; font-size:.75rem; text-align:left; flex-shrink:0; } .opx-stack-sm .num{ text-align:right; } } /* Onay kutulari: forms eklentisinin varsayilanini marka rengiyle degistir */ input[type="checkbox"], input[type="radio"]{ background-color: rgba(255,255,255,.05); border-color: rgba(255,255,255,.2); color: #22c55e; /* isaretli renk */ } input[type="checkbox"]:focus, input[type="radio"]:focus{ --tw-ring-color: rgba(34,197,94,.4); border-color: rgba(34,197,94,.6); } /* Dosya secme butonu */ input[type="file"]{ color:#94a3b8; } input[type="file"]::file-selector-button{ margin-right:.75rem; padding:.35rem .75rem; border-radius:.5rem; cursor:pointer; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); color:#cbd5e1; } input[type="file"]::file-selector-button:hover{ background:rgba(255,255,255,.12); } /* Tarih/sayi alanlarinin tarayici ikonlari koyu zeminde gorunsun */ input[type="date"]::-webkit-calendar-picker-indicator, input[type="number"]::-webkit-inner-spin-button{ filter: invert(.7); }