/* ============================================================================ HORAKHTY NETWORK — LeaderOS "Flat" (Tabler/Bootstrap 5) cinematic re-skin ---------------------------------------------------------------------------- Paste this into: Admin Panel → Görünüm/Tema → Özel CSS (Custom CSS) Pure CSS. Touches NO PHP, no loops, no helpers, no i18n. Functionality intact. Strategy: override Tabler/Bootstrap CSS variables globally, then layer the cinematic stage-light + Kalam typography + red gradient controls on top. Scope guard: most rules sit under html.theme-dark-h so we never fight the admin dashboard. The tag gets this class via the snippet in the notes, OR remove the guard to apply site-wide. Attribution + fixed bar rules kept. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Kalam:wght@400;700&display=swap'); /* ---------------------------------------------------------------------------- 1. DESIGN TOKENS (mirror of horakhty.net homepage) -------------------------------------------------------------------------- */ :root{ --h-bg:#070707; --h-surface:#0d0a0b; --h-surface-2:#120d0e; --h-red:#e11d2a; --h-red-soft:#ff3b48; --h-red-deep:#b3121d; --h-dred:#8b0000; --h-text:#f5f0f0; --h-muted:rgba(245,240,240,.52); --h-faint:rgba(245,240,240,.30); --h-line:rgba(255,255,255,.08); --h-spring:cubic-bezier(.16,1,.3,1); --h-shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 18px 40px -20px rgba(0,0,0,.8), 0 6px 16px -8px rgba(0,0,0,.6); --h-glow:0 0 0 1px rgba(225,29,42,.0), 0 10px 30px -8px rgba(225,29,42,.45); } /* ---------------------------------------------------------------------------- 2. TABLER / BOOTSTRAP VARIABLE OVERRIDE (re-skins ~80% with no selectors) -------------------------------------------------------------------------- */ :root, .theme-dark, [data-bs-theme=dark]{ --tblr-body-bg:var(--h-bg); --tblr-body-bg-rgb:7,7,7; --tblr-body-color:var(--h-text); --tblr-body-color-rgb:245,240,240; --tblr-emphasis-color:#ffffff; --tblr-secondary-color:var(--h-muted); --tblr-muted:var(--h-muted); --tblr-primary:var(--h-red); --tblr-primary-rgb:225,29,42; --tblr-primary-fg:#ffffff; --tblr-link-color:var(--h-red-soft); --tblr-link-color-rgb:255,59,72; --tblr-link-hover-color:#ffffff; --tblr-border-color:var(--h-line); --tblr-border-color-translucent:var(--h-line); --tblr-bg-surface:var(--h-surface); --tblr-bg-surface-secondary:var(--h-surface-2); --tblr-bg-surface-tertiary:#160f10; --tblr-bg-surface-dark:#050404; --tblr-card-bg:var(--h-surface); --tblr-card-cap-bg:rgba(255,255,255,.02); --tblr-card-border-color:var(--h-line); --tblr-font-sans-serif:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif; --tblr-font-monospace:ui-monospace,SFMono-Regular,Menlo,monospace; /* Bootstrap fallbacks (LeaderOS mixes both prefixes) */ --bs-body-bg:var(--h-bg); --bs-body-color:var(--h-text); --bs-primary:var(--h-red); --bs-primary-rgb:225,29,42; --bs-border-color:var(--h-line); --bs-link-color:var(--h-red-soft); --bs-link-hover-color:#ffffff; --bs-emphasis-color:#ffffff; } /* ---------------------------------------------------------------------------- 3. BASE -------------------------------------------------------------------------- */ .theme-dark-h, .theme-dark-h body{ background:var(--h-bg); color:var(--h-text); font-family:'Inter',system-ui,sans-serif; -webkit-font-smoothing:antialiased; } .theme-dark-h ::selection{background:var(--h-red);color:#fff} .theme-dark-h a{color:var(--h-red-soft);text-decoration:none;transition:color .2s var(--h-spring)} .theme-dark-h a:hover{color:#fff} /* Cinematic stage light + vignette behind everything (fixed, non-blocking) */ .theme-dark-h body::before, .theme-dark-h body::after{ content:"";position:fixed;inset:0;pointer-events:none;z-index:0; } .theme-dark-h body::before{ background: radial-gradient(60% 55% at 50% -8%,rgba(225,29,42,.22),rgba(139,0,0,.10) 38%,transparent 68%), radial-gradient(50% 40% at 50% 108%,rgba(139,0,0,.16),transparent 60%); } .theme-dark-h body::after{ background:radial-gradient(ellipse 90% 80% at 50% 42%,transparent 42%,rgba(7,7,7,.55) 78%,rgba(4,3,3,.92) 100%); } .theme-dark-h .page, .theme-dark-h .page-wrapper, .theme-dark-h .page-body, .theme-dark-h main, .theme-dark-h .navbar, .theme-dark-h footer{position:relative;z-index:1} /* ---------------------------------------------------------------------------- 4. TYPOGRAPHY — Kalam for display/headings, Inter for body -------------------------------------------------------------------------- */ .theme-dark-h h1,.theme-dark-h h2,.theme-dark-h h3, .theme-dark-h .h1,.theme-dark-h .h2,.theme-dark-h .h3, .theme-dark-h .page-title, .theme-dark-h .card-title, .theme-dark-h .navbar-brand, .theme-dark-h .display-1,.theme-dark-h .display-2,.theme-dark-h .display-3, .theme-dark-h .empty-title{ font-family:'Kalam','Inter',cursive; font-weight:700; letter-spacing:.005em; color:var(--h-text); } .theme-dark-h .page-title{font-size:clamp(26px,3.4vw,40px);line-height:1.05} .theme-dark-h .text-muted, .theme-dark-h .text-secondary{color:var(--h-muted)!important} /* Section / page header band with red stage light */ .theme-dark-h .page-header{ position:relative; padding:clamp(34px,6vw,70px) 0 clamp(20px,3vw,34px); margin-bottom:8px; border-bottom:1px solid var(--h-line); overflow:hidden; } .theme-dark-h .page-header::before{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:radial-gradient(60% 130% at 18% 0%,rgba(225,29,42,.20),transparent 60%); } .theme-dark-h .page-pretitle{ color:var(--h-red)!important;letter-spacing:.28em;text-transform:uppercase; font-size:11px;font-weight:700; } /* ---------------------------------------------------------------------------- 5. CARDS -------------------------------------------------------------------------- */ .theme-dark-h .card, .theme-dark-h .accordion, .theme-dark-h .list-group{ background:linear-gradient(180deg,rgba(20,14,15,.6),rgba(10,8,9,.72)); border:1px solid var(--h-line); border-radius:16px; box-shadow:var(--h-shadow); transition:transform .35s var(--h-spring),border-color .35s var(--h-spring),box-shadow .35s var(--h-spring); } .theme-dark-h .card-header, .theme-dark-h .card-footer{ background:rgba(255,255,255,.02); border-color:var(--h-line); } .theme-dark-h .card-link:hover, .theme-dark-h a.card:hover, .theme-dark-h .card.card-link-hover:hover{ transform:translateY(-4px); border-color:rgba(225,29,42,.35); box-shadow:var(--h-shadow),0 28px 60px -28px rgba(225,29,42,.5); } /* Hover-active accent strip cards (LeaderOS featured) */ .theme-dark-h .card.card-active, .theme-dark-h .card-status-top.bg-primary{background:var(--h-red)} /* ---------------------------------------------------------------------------- 6. BUTTONS — red gradient pill, spring lift -------------------------------------------------------------------------- */ .theme-dark-h .btn{ border-radius:999px; font-weight:700; letter-spacing:.01em; border:1px solid transparent; transition:transform .18s var(--h-spring),box-shadow .2s var(--h-spring), background .2s var(--h-spring),filter .2s var(--h-spring),border-color .2s var(--h-spring); } .theme-dark-h .btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(225,29,42,.45)} .theme-dark-h .btn-primary, .theme-dark-h .btn-danger{ background:linear-gradient(180deg,var(--h-red),var(--h-red-deep)); color:#fff;border-color:rgba(255,255,255,.06); box-shadow:0 8px 24px -10px rgba(225,29,42,.7); } .theme-dark-h .btn-primary:hover, .theme-dark-h .btn-danger:hover{ transform:translateY(-2px);filter:brightness(1.08); box-shadow:0 14px 34px -12px rgba(225,29,42,.8); } .theme-dark-h .btn-primary:active, .theme-dark-h .btn-danger:active{transform:translateY(0) scale(.97);filter:brightness(.98)} .theme-dark-h .btn-outline-primary, .theme-dark-h .btn-ghost-primary{ background:rgba(225,29,42,.06);color:var(--h-text); border-color:rgba(225,29,42,.45); } .theme-dark-h .btn-outline-primary:hover, .theme-dark-h .btn-ghost-primary:hover{ background:rgba(225,29,42,.16);border-color:var(--h-red);transform:translateY(-2px); } .theme-dark-h .btn-secondary, .theme-dark-h .btn-default, .theme-dark-h .btn-outline-secondary{ background:rgba(255,255,255,.04);color:var(--h-text);border-color:var(--h-line); } .theme-dark-h .btn-secondary:hover, .theme-dark-h .btn-default:hover, .theme-dark-h .btn-outline-secondary:hover{ background:rgba(225,29,42,.08);border-color:rgba(225,29,42,.4);transform:translateY(-2px); } .theme-dark-h .btn-link{color:var(--h-red-soft)} /* ---------------------------------------------------------------------------- 7. FORMS — dark inputs, red focus ring -------------------------------------------------------------------------- */ .theme-dark-h .form-control, .theme-dark-h .form-select, .theme-dark-h .input-group-text, .theme-dark-h .form-check-input{ background:rgba(255,255,255,.03); border:1px solid var(--h-line); color:var(--h-text); border-radius:12px; transition:border-color .2s var(--h-spring),box-shadow .2s var(--h-spring),background .2s var(--h-spring); } .theme-dark-h .form-control::placeholder{color:var(--h-faint)} .theme-dark-h .form-control:focus, .theme-dark-h .form-select:focus{ background:rgba(255,255,255,.05); border-color:rgba(225,29,42,.6); box-shadow:0 0 0 3px rgba(225,29,42,.22); color:#fff; } .theme-dark-h .form-check-input:checked{background-color:var(--h-red);border-color:var(--h-red)} .theme-dark-h .form-label{color:var(--h-muted);font-weight:600;letter-spacing:.01em} .theme-dark-h .input-group-text{color:var(--h-muted)} /* ---------------------------------------------------------------------------- 8. NAVBAR (header.php) + FOOTER (footer.php) -------------------------------------------------------------------------- */ .theme-dark-h .navbar, .theme-dark-h .navbar-expand-md{ background:linear-gradient(180deg,rgba(9,7,8,.92),rgba(9,7,8,.55))!important; backdrop-filter:blur(10px); border-bottom:1px solid var(--h-line); } .theme-dark-h .navbar-brand{ color:var(--h-text)!important;letter-spacing:.14em;text-transform:uppercase;font-size:16px; display:flex;align-items:center;gap:10px; } .theme-dark-h .navbar-brand img{filter:drop-shadow(0 0 8px rgba(225,29,42,.6))} .theme-dark-h .navbar .nav-link{ color:var(--h-muted)!important;font-weight:500;letter-spacing:.03em; border-radius:8px;transition:color .2s var(--h-spring),background .2s var(--h-spring); } .theme-dark-h .navbar .nav-link:hover, .theme-dark-h .navbar .nav-item.active .nav-link, .theme-dark-h .navbar .nav-link.active{color:#fff!important} .theme-dark-h .navbar .nav-link.active{background:rgba(225,29,42,.1)} .theme-dark-h footer, .theme-dark-h .footer{ background:var(--h-surface); border-top:1px solid var(--h-line); color:var(--h-muted); } .theme-dark-h footer a{color:var(--h-muted)} .theme-dark-h footer a:hover{color:#fff} /* Dropdown menus */ .theme-dark-h .dropdown-menu{ background:var(--h-surface);border:1px solid var(--h-line);border-radius:14px; box-shadow:var(--h-shadow); } .theme-dark-h .dropdown-item{color:var(--h-text)} .theme-dark-h .dropdown-item:hover{background:rgba(225,29,42,.12);color:#fff} .theme-dark-h .dropdown-divider{border-color:var(--h-line)} /* ---------------------------------------------------------------------------- 9. STORE (product / category cards + price + buy) -------------------------------------------------------------------------- */ .theme-dark-h .product-card .card-img-top, .theme-dark-h .card-img-top, .theme-dark-h .product-image, .theme-dark-h .package-image{ background: repeating-linear-gradient(135deg,rgba(255,255,255,.022) 0 2px,transparent 2px 11px), radial-gradient(120% 120% at 30% 0%,#181012,#0a0708 70%); border-bottom:1px solid var(--h-line); } .theme-dark-h .price, .theme-dark-h .product-price, .theme-dark-h .package-price, .theme-dark-h .card .h1.price{ font-family:'Kalam','Inter',cursive;font-weight:700;color:#fff; } .theme-dark-h .price .currency, .theme-dark-h .text-decoration-line-through{color:var(--h-muted)} /* "popular / featured" highlighted package */ .theme-dark-h .card.featured, .theme-dark-h .card.is-popular, .theme-dark-h .card.ribbon-bookmark.bg-primary, .theme-dark-h .card.border-primary{ border-color:rgba(225,29,42,.55)!important; box-shadow:0 0 0 1px rgba(225,29,42,.25),0 24px 60px -26px rgba(139,0,0,.6); } .theme-dark-h .ribbon.bg-primary, .theme-dark-h .badge.bg-primary, .theme-dark-h .badge.bg-red{ background:var(--h-red)!important;color:#fff;border-radius:999px; letter-spacing:.12em;text-transform:uppercase;font-weight:700; } .theme-dark-h .badge{border-radius:999px} /* category pills / filters */ .theme-dark-h .nav-pills .nav-link{ border-radius:999px;color:var(--h-muted);border:1px solid var(--h-line); background:rgba(255,255,255,.02);margin:0 4px 8px 0; } .theme-dark-h .nav-pills .nav-link.active{ background:var(--h-red);color:#fff;border-color:transparent; } /* ---------------------------------------------------------------------------- 10. FORUM (categories / threads / list-group) -------------------------------------------------------------------------- */ .theme-dark-h .list-group-item{ background:transparent;border-color:var(--h-line);color:var(--h-text); transition:background .2s var(--h-spring); } .theme-dark-h .list-group-item:hover{background:rgba(225,29,42,.06)} .theme-dark-h .list-group-item-action:hover{color:#fff} .theme-dark-h .forum-category-title, .theme-dark-h .forum-thread-title{ font-family:'Kalam','Inter',cursive;font-weight:700;color:var(--h-text); } .theme-dark-h .avatar{border:1px solid var(--h-line);box-shadow:0 0 0 2px rgba(225,29,42,.12)} .theme-dark-h .forum-stats, .theme-dark-h .forum-meta{color:var(--h-muted)} /* tables (forum/store admin-ish listings) */ .theme-dark-h .table{color:var(--h-text);--tblr-table-bg:transparent;--bs-table-bg:transparent} .theme-dark-h .table thead th{ color:var(--h-muted);text-transform:uppercase;letter-spacing:.1em;font-size:11px; border-color:var(--h-line); } .theme-dark-h .table td,.theme-dark-h .table th{border-color:var(--h-line)} .theme-dark-h .table-hover tbody tr:hover{background:rgba(225,29,42,.05)} /* ---------------------------------------------------------------------------- 11. AUTH (/login /register) — centered cinematic card -------------------------------------------------------------------------- */ .theme-dark-h .page.page-center, .theme-dark-h .page-center{ min-height:100vh;display:flex;align-items:center;justify-content:center; } .theme-dark-h .page-center .container-tight, .theme-dark-h .page-center .container-narrow{max-width:420px} .theme-dark-h .page-center .card{ background:linear-gradient(180deg,rgba(22,14,16,.85),rgba(10,8,9,.92)); border:1px solid rgba(225,29,42,.18); box-shadow:var(--h-shadow),0 40px 90px -40px rgba(139,0,0,.6); border-radius:22px; backdrop-filter:blur(6px); } .theme-dark-h .page-center .card-title{text-align:center} .theme-dark-h .navbar-brand-autodark, .theme-dark-h .page-center .text-center img{ filter:drop-shadow(0 0 30px rgba(225,29,42,.5)); } .theme-dark-h .login-divider, .theme-dark-h .hr-text{color:var(--h-faint);border-color:var(--h-line)} .theme-dark-h .hr-text::before,.theme-dark-h .hr-text::after{border-color:var(--h-line)} /* ---------------------------------------------------------------------------- 12. MISC — alerts, pagination, progress, modals, tabs, breadcrumb -------------------------------------------------------------------------- */ .theme-dark-h .alert{border-radius:14px;border:1px solid var(--h-line);background:var(--h-surface);color:var(--h-text)} .theme-dark-h .alert-success{border-color:rgba(61,220,132,.4)} .theme-dark-h .alert-danger{border-color:rgba(225,29,42,.5);background:rgba(40,8,10,.7)} .theme-dark-h .page-link{ background:transparent;border-color:var(--h-line);color:var(--h-muted);border-radius:10px;margin:0 3px; } .theme-dark-h .page-item.active .page-link{background:var(--h-red);border-color:var(--h-red);color:#fff} .theme-dark-h .page-link:hover{background:rgba(225,29,42,.1);color:#fff} .theme-dark-h .progress{background:rgba(255,255,255,.06)} .theme-dark-h .progress-bar{background:linear-gradient(90deg,var(--h-dred),var(--h-red))} .theme-dark-h .modal-content{ background:var(--h-surface);border:1px solid var(--h-line);border-radius:18px;box-shadow:var(--h-shadow); } .theme-dark-h .modal-header,.theme-dark-h .modal-footer{border-color:var(--h-line)} .theme-dark-h .nav-tabs{border-color:var(--h-line)} .theme-dark-h .nav-tabs .nav-link.active{ background:transparent;color:#fff;border-color:transparent transparent var(--h-red); } .theme-dark-h .breadcrumb{color:var(--h-muted)} .theme-dark-h .breadcrumb-item.active{color:var(--h-text)} .theme-dark-h .text-primary{color:var(--h-red-soft)!important} .theme-dark-h .bg-primary{background:var(--h-red)!important} .theme-dark-h .border-primary{border-color:rgba(225,29,42,.5)!important} .theme-dark-h hr{border-color:var(--h-line)} /* ---------------------------------------------------------------------------- 13. LEADEROS ATTRIBUTION — keep footer credit, hide the ugly fixed bar (do not remove — license requirement; the floating bar stays hidden) -------------------------------------------------------------------------- */ a[href*="leaderos.com.tr"][style*="fixed"], a[href*="leaderos.net"][style*="fixed"]{display:none!important} .theme-dark-h .footer a[href*="leaderos"]{color:var(--h-faint)} .theme-dark-h .footer a[href*="leaderos"]:hover{color:var(--h-muted)} /* ---------------------------------------------------------------------------- 14. MOTION SAFETY -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce){ .theme-dark-h *{transition-duration:.01ms!important;animation-duration:.01ms!important} } /* ===== Horakhty custom auth (login/register) design ===== */ :root{--bg:#070707;--bg2:#0d0a0b;--red:#e11d2a;--red-soft:#ff3b48;--dred:#8b0000;--text:#f5f0f0;--muted:rgba(245,240,240,.52);--faint:rgba(245,240,240,.30);--line:rgba(255,255,255,.08);--spring:cubic-bezier(.16,1,.3,1)} @keyframes breathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-10px) scale(1.02)}} .auth{ position:fixed;inset:0;z-index:300;display:grid;grid-template-columns:1.05fr 1fr; background:var(--bg);overflow:auto; } /* left brand panel */ .auth__brand{ position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center; padding:40px;overflow:hidden;border-right:1px solid var(--line);min-height:100vh; } .auth__brand .a-light{ position:absolute;left:50%;top:-6%;width:120%;height:80%;transform:translateX(-50%);pointer-events:none; background:radial-gradient(ellipse 55% 60% at 50% 32%,rgba(225,29,42,.30),rgba(139,0,0,.15) 40%,transparent 70%); } .auth__brand .a-grnd{ position:absolute;left:50%;bottom:-25%;width:140%;height:60%;transform:translateX(-50%);pointer-events:none; background:radial-gradient(ellipse 50% 60% at 50% 70%,rgba(139,0,0,.22),transparent 60%); } .auth__brand .a-vig{ position:absolute;inset:0;pointer-events:none; background:radial-gradient(ellipse 80% 80% at 50% 46%,transparent 34%,rgba(7,7,7,.5) 74%,rgba(5,4,4,.92) 100%); } .auth__emblem{ position:relative;width:clamp(72px,7.5vw,100px);height:auto;margin-bottom:2px; filter:drop-shadow(0 0 40px rgba(225,29,42,.55)) drop-shadow(0 0 90px rgba(139,0,0,.4)); animation:breathe 6s ease-in-out infinite; } .auth__wordmark{position:relative;font-family:'Kalam',cursive;font-weight:700;text-transform:uppercase; letter-spacing:.04em;line-height:.95;font-size:clamp(34px,4vw,58px);margin-top:14px; text-shadow:0 0 50px rgba(225,29,42,.35)} .auth__wordmark span{color:var(--red)} .auth__tag{position:relative;margin-top:12px;font-size:12px;font-weight:600;letter-spacing:.45em; text-transform:uppercase;color:var(--muted);padding-left:.45em} .auth__art{position:relative;width:min(82%,330px);margin-top:26px} .auth__art svg{width:100%;height:auto;display:block;overflow:visible;filter:drop-shadow(0 34px 46px rgba(0,0,0,.6))} .auth__art .cb-t{fill:#2a141a} .auth__art .cb-l{fill:#190e10} .auth__art .cb-r{fill:#0f090a} @keyframes artfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}} .auth__ip{ position:absolute;left:28px;bottom:26px;display:inline-flex;align-items:center;gap:9px; background:rgba(20,12,13,.55);border:1px solid rgba(225,29,42,.35);border-radius:999px; padding:9px 16px;backdrop-filter:blur(14px);font-weight:700;font-size:14px; box-shadow:0 8px 30px rgba(0,0,0,.5),0 0 24px rgba(225,29,42,.12); } .auth__ip svg{width:15px;height:15px;color:var(--red-soft)} /* right form panel */ .auth__form{position:relative;display:flex;flex-direction:column;justify-content:center; padding:clamp(34px,4.5vw,64px) clamp(28px,5vw,80px);min-height:100vh} .auth__inner{width:100%;max-width:430px;margin:0 auto} .auth__back{ position:absolute;top:26px;right:clamp(28px,5vw,48px);display:inline-flex;align-items:center;gap:8px; background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--text);cursor:pointer; font-family:inherit;font-weight:600;font-size:13px;padding:10px 18px;border-radius:999px; transition:background .2s ease,border-color .2s ease,transform .18s ease; } .auth__back:hover{background:rgba(225,29,42,.08);border-color:rgba(225,29,42,.45);transform:translateY(-1px)} .auth__back svg{width:15px;height:15px} .auth__mini{display:none;align-items:center;gap:10px;margin-bottom:22px} .auth__mini img{width:34px;height:34px;filter:drop-shadow(0 0 8px rgba(225,29,42,.6))} .auth__mini b{font-family:'Kalam',cursive;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:18px} .auth__title{font-family:'Kalam',cursive;font-weight:700;font-size:clamp(34px,4.4vw,52px);line-height:1;letter-spacing:.01em} .auth__sub{color:var(--muted);font-size:15px;margin-top:8px} .auth__fields{margin-top:30px;display:flex;flex-direction:column;gap:18px} .auth__label{display:block;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:8px;letter-spacing:.02em} .auth__inputwrap{position:relative;display:flex;align-items:center} .auth__input{ width:100%;background:rgba(255,255,255,.03);border:1px solid var(--line);color:var(--text); font-family:inherit;font-size:15px;padding:15px 16px;border-radius:14px; transition:border-color .2s var(--spring),box-shadow .2s var(--spring),background .2s var(--spring); } .auth__input::placeholder{color:var(--faint)} .auth__input:focus{outline:none;background:rgba(255,255,255,.05);border-color:rgba(225,29,42,.6); box-shadow:0 0 0 3px rgba(225,29,42,.22);color:#fff} .auth__eye{position:absolute;right:6px;background:none;border:0;color:var(--muted);cursor:pointer; padding:9px;display:grid;place-items:center;border-radius:8px} .auth__eye:hover{color:var(--text)} .auth__eye svg{width:18px;height:18px} .auth__forgot{display:flex;justify-content:flex-end;margin-top:10px} .auth__forgot a{color:var(--red-soft);font-size:13px;font-weight:600;cursor:pointer} .auth__forgot a:hover{color:#fff} .auth__verify{ margin-top:22px;display:flex;align-items:center;gap:13px; background:rgba(255,255,255,.025);border:1px solid var(--line);border-radius:14px;padding:14px 16px;cursor:pointer; transition:border-color .2s ease,background .2s ease;user-select:none; } .auth__verify:hover{border-color:rgba(225,29,42,.35)} .auth__check{width:22px;height:22px;border-radius:6px;border:1.5px solid var(--muted);flex:none; display:grid;place-items:center;transition:background .2s ease,border-color .2s ease} .auth__check svg{width:14px;height:14px;color:#fff;opacity:0;transition:opacity .2s ease} .auth__verify.on .auth__check{background:var(--red);border-color:var(--red)} .auth__verify.on .auth__check svg{opacity:1} .auth__verify-t{font-size:13.5px;color:rgba(245,240,240,.78);line-height:1.35} .auth__verify-t small{display:block;color:var(--faint);font-size:11px;letter-spacing:.04em} .auth__shield{margin-left:auto;color:var(--faint);flex:none} .auth__shield svg{width:24px;height:24px} .auth__row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:26px} .auth__alt{color:var(--muted);font-size:14px} .auth__alt a{color:var(--text);font-weight:700;cursor:pointer;text-decoration-color:rgba(225,29,42,.5)} .auth__alt a:hover{color:var(--red-soft)} .auth__submit{ display:inline-flex;align-items:center;gap:9px;cursor:pointer;border:1px solid transparent;font-family:inherit; font-weight:700;font-size:15px;letter-spacing:.01em;padding:15px 30px;border-radius:999px;color:#fff; background:linear-gradient(180deg,var(--red),#b3121d);box-shadow:0 8px 24px -10px rgba(225,29,42,.7); transition:transform .18s var(--spring),box-shadow .2s ease,filter .2s ease; } .auth__submit:hover{transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 14px 34px -12px rgba(225,29,42,.85)} .auth__submit:active{transform:translateY(0) scale(.97)} .auth__submit svg{width:17px;height:17px} .auth__foot{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between; align-items:center;gap:16px;padding:22px clamp(28px,5vw,80px);border-top:1px solid var(--line); font-size:12.5px;color:var(--faint)} .auth__foot a{color:var(--muted)} .auth__foot a:hover{color:var(--text)} /* ============ TOAST ============ */ .toast{ position:fixed;left:50%;bottom:34px;transform:translateX(-50%) translateY(24px); z-index:9999;background:rgba(20,12,13,.96);border:1px solid rgba(225,29,42,.4); color:var(--text);padding:13px 22px;border-radius:12px;font-size:14px;font-weight:600; display:flex;align-items:center;gap:10px;opacity:0;pointer-events:none; transition:opacity .3s ease,transform .3s ease;backdrop-filter:blur(10px); box-shadow:0 14px 40px rgba(0,0,0,.6); } .toast.show{opacity:1;transform:translateX(-50%) translateY(0)} .toast svg{width:17px;height:17px;color:#3ddc84} /* ============ RESPONSIVE ============ */ @media(max-width:860px){ .nav__links{position:fixed;inset:0 0 0 auto;flex-direction:column;align-items:flex-start; justify-content:center;gap:4px;width:min(78vw,300px);padding:30px; background:rgba(8,6,7,.97);backdrop-filter:blur(16px);border-left:1px solid var(--line); transform:translateX(100%);transition:transform .4s cubic-bezier(.16,1,.3,1);z-index:210} .nav__links.open{transform:none} .nav__links a{font-size:16px;width:100%;padding:13px 14px} .nav__burger{display:block;z-index:220} .why__grid{grid-template-columns:1fr 1fr} .why__item{border-bottom:1px solid var(--line);padding:30px 24px 30px 0} .why__item:nth-child(2n){border-right:0;padding-right:0} .why__item:nth-child(2n+1){padding-right:24px} .cards{grid-template-columns:1fr;max-width:420px;margin-left:auto;margin-right:auto} .card--pop{transform:none} .card--pop:hover{transform:translateY(-8px)} .strip__inner,.strip--smp .strip__inner{max-width:none;text-align:left;margin:0} .strip--smp .eyebrow{justify-content:flex-start} .strip--smp .eyebrow::after{display:none} .strip--smp .eyebrow::before{display:block} .strip--smp .strip__desc,.strip--smp .strip__tags{margin-left:0;justify-content:flex-start} } @media(max-width:560px){ .why__grid{grid-template-columns:1fr} .why__item,.why__item:nth-child(2n+1){border-right:0;padding-right:0} .pill{flex-wrap:wrap;justify-content:center;padding:14px 16px;gap:10px;border-radius:18px} .pill__ip{margin-right:0;width:100%;text-align:center} .footer__in{flex-direction:column;text-align:center} } @media(max-width:880px){ .auth{grid-template-columns:1fr} .auth__brand{display:none} .auth__form{min-height:100vh;padding-top:84px;padding-bottom:96px} .auth__mini{display:flex!important} } @media(max-width:520px){ .auth__row{flex-direction:column-reverse;align-items:stretch;gap:14px} .auth__submit{justify-content:center} .auth__alt{text-align:center} .auth__foot{flex-direction:column;gap:6px;text-align:center} } @media(prefers-reduced-motion:reduce){ *{animation-duration:.01ms!important;animation-iteration-count:1!important} .reveal{opacity:1;transform:none} }